:root{color-scheme:dark;--ink:#1d1431;--cream:#fff6dd;--pink:#fa538e;--lime:#c8ff5b;--orange:#ffad50;--blue:#66e9ec}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:radial-gradient(circle at 15% 15%,#422454 0,transparent 38%),radial-gradient(circle at 88% 90%,#273b4f 0,transparent 36%),#150d25;color:var(--cream);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#viewport{width:100vw;height:100dvh;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:max(0px,env(safe-area-inset-top))}
.arcade{position:relative;aspect-ratio:16/9;width:min(100vw,177.7778dvh);max-height:100dvh;background:#1d1431;overflow:hidden;box-shadow:0 25px 110px #07040eb3;isolation:isolate}
canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.overlay{position:absolute;inset:0;display:none;z-index:5;align-items:center;justify-content:center;background:linear-gradient(120deg,#0d0a24da,#20112acb);backdrop-filter:blur(6px);padding:3%}
.overlay.visible{display:flex}
.dialog{position:relative;width:min(650px,92%);max-height:96%;overflow:auto;border:2px solid #fff1c864;border-radius:25px;padding:clamp(18px,3.4%,32px);background:linear-gradient(160deg,#322047 0%,#211831 55%,#261c36 100%);box-shadow:0 16px 0 #100b21,0 25px 80px #08051290;text-align:center}
.dialog:before{content:"";position:absolute;inset:7px;border:1px dashed #ffffff2e;border-radius:19px;pointer-events:none}
.eyebrow{font-size:clamp(10px,1.4vw,15px);font-weight:900;letter-spacing:.24em;color:var(--lime);text-transform:uppercase;margin:0 0 6px}
.game-title{font-size:clamp(30px,6vw,65px);line-height:.91;letter-spacing:-.075em;font-weight:1000;font-stretch:condensed;margin:0;text-shadow:4px 5px 0 #0d091d;text-transform:uppercase;color:#fff9df}
.game-title span{display:block;color:var(--pink)}
.strap{color:#ffcb9a;letter-spacing:.13em;font-weight:900;font-size:clamp(10px,1.3vw,14px);margin:15px 0}
.story{font-size:clamp(11px,1.45vw,16px);max-width:435px;margin:0 auto 18px;line-height:1.45;color:#f8e7e0}
.how{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 18px}
.how b{font-size:clamp(9px,1.2vw,12px);background:#ffffff13;border:1px solid #ffffff24;border-radius:11px;padding:8px 12px;color:#fbe9d7}
button{font:inherit;cursor:pointer}
.primary{position:relative;border:0;border-radius:13px;background:var(--lime);color:#1c1530;padding:14px 38px;min-height:48px;min-width:200px;font-size:clamp(13px,2vw,20px);font-weight:1000;letter-spacing:.04em;box-shadow:0 7px 0 #73a92b,0 11px 24px #0005;transition:transform .1s,box-shadow .1s}
.primary:hover{transform:translateY(-2px)}.primary:active{transform:translateY(5px);box-shadow:0 2px 0 #73a92b}
.secondary{border:1px solid #ffffff60;border-radius:11px;color:#fffaeb;background:#ffffff12;padding:10px 16px;font-weight:800}
.secondary:hover{background:#ffffff25}
.muted{color:#cbbdcf;font-size:clamp(9px,1.15vw,13px);margin-top:17px}
.chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.chip{background:#130d25;border:1px solid #ffffff30;border-radius:12px;min-width:105px;padding:9px 14px}
.chip span{display:block;font-size:10px;letter-spacing:.12em;color:#ffc99a;font-weight:800}
.chip strong{display:block;font-size:25px;font-weight:1000;line-height:1.25}
.shop{display:flex;gap:10px;justify-content:center;margin:15px 0;flex-wrap:wrap}
.upgrade{flex:1 1 180px;max-width:265px;display:flex;align-items:center;flex-direction:column;gap:4px;border:1px solid #ffd8854a;border-radius:13px;background:#ffffff0c;padding:10px;color:white}
.upgrade:hover:not(:disabled){background:#ffffff24}
.upgrade:disabled{opacity:.48;cursor:not-allowed}
.upgrade strong{font-size:14px}.upgrade small{font-size:11px;color:#f8d9b6}.upgrade em{font-style:normal;font-size:13px;color:var(--lime);font-weight:900}
.actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.rotate{display:none}
@media (orientation:portrait) and (max-width:700px){.arcade{width:100vw;height:100dvh;aspect-ratio:auto;max-height:none}.arcade canvas,.arcade .overlay{display:none!important}.rotate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:22px;background:repeating-linear-gradient(135deg,#231837,#231837 25px,#291d40 25px,#291d40 50px);text-align:center;color:#fff6dd}.rotate-icon{font-size:85px;color:var(--lime);line-height:1}.rotate strong{font-size:27px;letter-spacing:-.05em;margin:14px 0}.rotate p{font-size:16px;max-width:270px;color:#e0cddf}}
@media (max-height:520px) and (orientation:landscape){.dialog{padding:15px 22px}.story{margin-bottom:8px}.strap{margin:8px 0}.how{margin-bottom:9px}.muted{margin-top:10px}.chips{margin:9px 0}.shop{margin:9px 0}}
@media (prefers-reduced-motion:reduce){.primary{transition:none}}