/* One electric game surface; physical red construction tape stays independent. */
.play-action{--tape-height:31px;--tape-overhang:18px;position:relative;width:300px;max-width:calc(100% - 16px);isolation:isolate;z-index:10}
.play-button{position:relative;display:grid;place-items:center;overflow:hidden;width:100%;height:72px;gap:0;padding:0 50px;border:1.5px solid transparent;border-radius:12px;background:linear-gradient(180deg,#1686ff,#0867f1 45%,#0750d2) padding-box,linear-gradient(115deg,#79fcff,#269aff 43%,#478dff 72%,#99faff) border-box;box-shadow:inset 0 1px 0 #bcecff42,inset 0 -1px 0 #04369480,0 3px 0 #06317d,0 5px 0 1px #061a3c,0 0 11px #278cff58,0 8px 24px #0864e63b;color:#f3fcff;font:900 27px/1 Game,Arial,sans-serif;font-variation-settings:'wght' 900,'slnt' -8,'opsz' 48;letter-spacing:.45px;text-shadow:0 1.5px 0 #06479d;transform:translateY(0);filter:none;transition:transform .2s ease,box-shadow .24s ease,filter .3s ease;-webkit-tap-highlight-color:transparent}
.play-button::before{content:"";position:absolute;inset:0;height:auto;border:0;border-radius:0;background:radial-gradient(ellipse at 38% -25%,#7bfff533,transparent 65%);opacity:.65;pointer-events:none;animation:play-surface-light 6.5s ease-in-out infinite alternate}
.play-button::after{content:none;display:none}
.play-button > span{position:relative;z-index:1;display:block;width:100%;text-align:center}
.play-button > svg{position:absolute;z-index:1;right:22px;top:50%;width:23px;height:23px;fill:#edfdff;filter:drop-shadow(0 0 6px #61e8ff77);transform:translateY(-50%);animation:play-icon-glide 4.8s ease-in-out infinite}
.play-button:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:inset 0 1px 0 #d2f4ff66,inset 0 -1px 0 #04369480,0 4px 0 #06317d,0 6px 0 1px #061a3c,0 0 13px #42c8ff66,0 10px 26px #0875eb40}
.play-button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #bcecff42,inset 0 -1px 0 #04369480,0 1px 0 #06317d,0 3px 0 1px #061a3c,0 0 8px #278cff3d,0 5px 16px #0864e62e}
.play-button:focus-visible{outline:2px solid #c2f8ff;outline-offset:7px}
.play-action.is-open .play-button{transform:translateY(1px);filter:grayscale(1) brightness(.8);box-shadow:inset 0 1px 0 #e6f5ff3b,inset 0 -1px 0 #203044,0 2px 0 #29394e,0 4px 0 1px #071827,0 7px 14px #07182880}
.play-action.is-open .play-button::before,.play-action.is-open .play-button > svg{animation-play-state:paused}
.play-blockade{position:absolute;z-index:4;left:calc(var(--tape-overhang)*-1);right:calc(var(--tape-overhang)*-1);top:50%;height:0;pointer-events:none}
.play-tape{--tape-angle:-12deg;--tape-entry:-120%;position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tape-height);overflow:hidden;border-top:1px solid #ff919947;border-bottom:1px solid #7e061966;border-radius:0;background-color:#f12b2ef7;background-image:linear-gradient(0deg,#23000314,transparent 35%,#fff6f60b 70%,transparent),linear-gradient(102deg,transparent 17%,#fff6f609 18%,transparent 19%,transparent 64%,#21000309 65%,transparent 66%);box-shadow:0 1px 1px #75041459,0 4px 7px #01062059;opacity:0;transform:translateY(-50%) rotate(var(--tape-angle)) translateX(var(--tape-entry)) scale(.96);transform-origin:50% 50%;transition:transform .48s cubic-bezier(.25,.7,.3,1),opacity .22s ease .13s;will-change:transform}
.play-tape--one{z-index:2}
.play-tape--two{--tape-angle:12deg;--tape-entry:120%;z-index:1;transition-duration:.55s,.22s}
.play-tape .tape-print{position:absolute;left:50%;top:0;display:flex;align-items:center;gap:25px;width:max-content;height:100%;transform:translateX(-50%);white-space:nowrap}
.play-tape .tape-print span,.play-tape > span{position:relative;display:block;flex:none;height:100%;min-width:0;margin:0;padding:0;background:none;color:#17060a;font:950 15px/var(--tape-height) Game,Arial,sans-serif;font-variation-settings:'wght' 950,'slnt' 0,'wdth' 78,'opsz' 24;letter-spacing:.85px;text-align:center;white-space:nowrap;text-transform:uppercase;text-shadow:none}
.play-action.is-open .play-tape{opacity:1;transform:translateY(-50%) rotate(var(--tape-angle)) translateX(0) scale(1);transition:transform .56s cubic-bezier(.18,.88,.25,1.07),opacity .15s ease}
.play-action.is-open .play-tape--two{transition-delay:.075s}
/* Floating tooltip: a soft, irregular dark spray supports only the copy. */
.launch-note{isolation:isolate;top:calc(100% + 27px);bottom:auto;width:316px;max-width:calc(100vw - 32px);padding:15px 18px;border:0;border-radius:0;background:none;box-shadow:none;transform:translate(calc(-50% + var(--note-shift-x,0px)),var(--note-shift-y,0px));color:#e5efff;animation:notice-in .2s ease-out}
.launch-note::before{content:"";position:absolute;z-index:-1;inset:-17% -7%;background:radial-gradient(ellipse at 40% 50%,#020616ed 0 30%,transparent 71%),radial-gradient(ellipse at 76% 60%,#080721cf 0 21%,transparent 68%),radial-gradient(ellipse at 20% 72%,#020513b3 0 17%,transparent 64%);filter:blur(11px);transform:rotate(-3deg);pointer-events:none}
.launch-note::after,.launch-note[data-side="above"]::after{content:none;display:none}
.launch-note[data-side="above"]{top:auto;bottom:calc(100% + 27px)}
.launch-note strong{position:relative;margin-bottom:6px;color:#f1f8ff;font:850 18px/1.2 Game,Arial,sans-serif;font-variation-settings:'wght' 850,'slnt' -6,'opsz' 40;text-shadow:0 2px 8px #010617}
.launch-note p{position:relative;font:12px/1.5 Inter,Arial,sans-serif;text-shadow:0 1px 5px #010617}
.launch-note[hidden]{display:none}
@keyframes play-surface-light{to{opacity:.25;transform:translateX(5%)}}
@keyframes play-icon-glide{0%,65%,100%{transform:translateY(-50%) translateX(0)}77%{transform:translateY(-50%) translateX(3px)}87%{transform:translateY(-50%) translateX(1px)}}
.motion-paused .play-button::before,.motion-paused .play-button > svg{animation-play-state:paused!important}
@media(min-width:1800px){.play-action{width:320px;--tape-height:33px}.play-button{height:76px;font-size:29px}.play-tape .tape-print span,.play-tape > span{font-size:16px}}
@media(max-height:720px) and (min-width:901px){.play-action{width:285px}.play-button{height:65px;font-size:26px}}
@media(max-width:1100px) and (min-width:901px){.play-action{width:272px;--tape-height:29px;--tape-overhang:16px}.play-button{height:64px;font-size:25px}.play-tape .tape-print span,.play-tape > span{font-size:14px}}
@media(max-width:900px){.play-action{width:282px;--tape-height:29px;--tape-overhang:16px}.play-button{height:65px;font-size:25px}.play-tape .tape-print span,.play-tape > span{font-size:14px}}
@media(max-width:360px){.play-action{width:246px;--tape-overhang:13px;--tape-height:27px}.play-button{height:60px;font-size:23px;padding:0 44px}.play-button > svg{width:21px;height:21px;right:20px}.play-tape .tape-print{gap:20px}.play-tape .tape-print span,.play-tape > span{font-size:12px;letter-spacing:.65px}.launch-note{padding:13px 15px}.launch-note strong{font-size:17px}}
@media(max-height:480px) and (min-width:901px){.play-action{width:242px;--tape-height:27px;--tape-overhang:13px}.play-button{height:55px;font-size:22px;padding:0 44px}.play-tape .tape-print span,.play-tape > span{font-size:12px}.launch-note{padding:12px 16px}.launch-note strong{font-size:16px}}
@media(min-width:640px) and (max-width:900px) and (max-height:600px){.play-action{width:224px;--tape-height:25px;--tape-overhang:12px}.play-button{height:52px;font-size:21px;padding:0 42px}.play-button > svg{width:18px;height:18px;right:19px}.play-tape .tape-print{gap:19px}.play-tape .tape-print span,.play-tape > span{font-size:11px;letter-spacing:.6px}.launch-note{padding:11px 14px;width:290px}.launch-note strong{font-size:16px}.launch-note p{font-size:11px}}
/* The modal floats as an illustration and type, with no panel geometry. */
.development-dialog{width:min(600px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);padding:0;margin:auto;border:0;border-radius:0;background:none;color:#f4f9ff;overflow:visible;outline:none;box-shadow:none}
/* Overscan keeps the page blurred beneath changing WebView chrome and safe areas. */
.development-dialog::backdrop{position:fixed;inset:auto;top:calc(-96px - env(safe-area-inset-top,0px));left:calc(-32px - env(safe-area-inset-left,0px));width:calc(max(100vw,var(--development-cover-width,0px)) + 64px + env(safe-area-inset-left,0px) + env(safe-area-inset-right,0px));height:calc(max(100vh,var(--development-cover-height,0px)) + 192px + env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px));min-height:calc(100lvh + 192px + env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px));margin:0;border:0;border-radius:0;background:#06112488;backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);animation:development-backdrop-in .22s ease-out}
.development-card{position:relative;isolation:isolate;max-height:calc(100svh - 32px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:27px 30px 29px;border:0;border-radius:0;background:none;box-shadow:none;scrollbar-width:thin;scrollbar-color:#5474a466 transparent}
.development-card::before{content:none;display:none}
.development-close{position:absolute;z-index:4;right:14px;top:10px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#09152638;box-shadow:none;color:#eaf5ff;cursor:pointer;filter:drop-shadow(0 2px 5px #01051066);transition:background .18s,transform .18s;-webkit-tap-highlight-color:transparent}
.development-close svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.development-close:hover{background:#16446a59;color:#fff;transform:scale(1.06)}
.development-close:active{transform:scale(.95)}
.development-close:focus-visible{outline:2px solid #b5e6ff;outline-offset:4px}
.development-art{position:relative;width:min(340px,calc(100svh - 212px));aspect-ratio:1;margin:0 auto 17px}
.development-art::before{content:"";position:absolute;left:9%;right:9%;bottom:6%;height:14%;border-radius:50%;background:#1b6bff1f;filter:blur(17px);pointer-events:none}
.development-art img{position:relative;display:block;width:100%;height:100%;object-fit:contain;opacity:0;filter:drop-shadow(0 13px 17px #01030f66);transition:opacity .18s ease-out}
.development-dialog.art-ready .development-art img{opacity:1}
.development-copy{position:relative;isolation:isolate;z-index:1;text-align:center}
.development-copy::before{content:none;display:none}
.development-copy h2{margin:0 0 11px;color:#f4fcff;font:900 34px/1.1 Game,Arial,sans-serif;font-variation-settings:'wght' 900,'slnt' -8,'opsz' 48;letter-spacing:-.3px;text-shadow:0 2px 12px #01041499}
.development-copy p{max-width:390px;margin:0 auto;color:#d0ddef;font:14px/1.55 Inter,Arial,sans-serif;text-shadow:0 1px 9px #010414aa}
.development-dialog[open]{animation:development-panel-in .27s cubic-bezier(.2,.8,.2,1)}
.development-dialog[open].art-ready .development-art img{animation:development-art-in .68s cubic-bezier(.2,.8,.25,1)}
.development-dialog[open] .development-copy{animation:development-copy-in .3s ease-out .1s both}
@keyframes development-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes development-panel-in{from{opacity:0;transform:translateY(15px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes development-art-in{0%{opacity:0;transform:translateY(18px) scale(.62) rotate(-5deg)}43%{opacity:1;transform:translateY(-7px) scale(1.055) rotate(1.7deg)}72%{transform:translateY(3px) scale(.985) rotate(-.6deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes development-copy-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
 .development-dialog{width:min(340px,calc(100vw - 28px));max-height:calc(100svh - 28px)}.development-card{max-height:calc(100svh - 28px);padding:56px 18px 24px}.development-close{right:8px;top:6px;width:44px;height:44px}.development-art{width:min(270px,45svh,calc(100vw - 66px));margin-bottom:16px}.development-copy h2{font-size:28px;margin-bottom:9px;letter-spacing:-.4px}.development-copy p{font-size:13px;line-height:1.55}
}
@media(max-width:360px){.development-copy h2{font-size:26px}.development-card{padding-bottom:22px}.development-art{margin-bottom:14px}}
@media(max-height:500px) and (min-width:540px){
 .development-dialog{width:min(600px,calc(100vw - 32px));max-height:calc(100svh - 32px)}.development-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:20px;max-height:calc(100svh - 32px);padding:22px 25px}.development-art{width:min(230px,calc(100svh - 86px));max-width:100%;margin:0 auto}.development-copy{text-align:left}.development-copy h2{font-size:clamp(26px,3.4vw,34px);line-height:1.1;margin-bottom:10px}.development-copy p{font-size:13px;margin:0}.development-close{right:8px;top:0;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.play-button,.play-tape{transition:none!important}.play-button::before,.play-button > svg{animation:none!important}.play-button > svg{transform:translateY(-50%)}.launch-note{animation:none!important}.play-tape{will-change:auto}.development-dialog,.development-dialog::backdrop,.development-dialog *{animation:none!important;transition:none!important}.development-close:hover,.development-close:active{transform:none}}