:root{--arc-control-safe-x: max(18px, env(safe-area-inset-left));--arc-control-safe-y: max(16px, env(safe-area-inset-bottom));--arc-control-accent: #71edff;--arc-control-accent-strong: #eaffff;--arc-control-text: #ffffff;--arc-control-shadow: rgba(0, 0, 0, .38);--arc-control-joystick: clamp(102px, 25vh, 128px);--arc-control-joystick-axis: clamp(78px, 19vh, 96px);--arc-control-joystick-wide: clamp(122px, 30vh, 154px);--arc-control-joystick-tall: clamp(122px, 30vh, 154px);--arc-control-large: clamp(88px, 22vh, 112px);--arc-control-small: clamp(52px, 13vh, 66px);--arc-control-joystick-row: 60%;--arc-control-center-gap: clamp(10px, 2.4vh, 16px);--arc-control-center-offset: clamp(64px, 16vh, 82px)}.arc-control-layer{position:fixed;inset:0;z-index:30;display:none;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}.arc-control{--arc-place-x: var(--arc-control-safe-x);--arc-place-y: var(--arc-control-safe-y);position:absolute;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:IBM Plex Mono,ui-monospace,monospace}.arc-control[hidden]{display:none!important}.arc-control--disabled{opacity:.34;pointer-events:none}.arc-place--bottom-left{left:var(--arc-place-x);bottom:var(--arc-place-y)}.arc-place--bottom-right{right:var(--arc-place-x);bottom:var(--arc-place-y)}.arc-place--left-center{left:var(--arc-place-x);top:var(--arc-control-joystick-row);transform:translateY(-50%)}.arc-place--right-center{right:var(--arc-place-x);top:var(--arc-control-joystick-row);transform:translateY(-50%)}.arc-place--left-upper{left:var(--arc-place-x);top:22%}.arc-place--right-upper{right:var(--arc-place-x);top:22%}.arc-place--left-lower{left:var(--arc-place-x);top:calc(var(--arc-control-joystick-row) + var(--arc-control-center-offset) + var(--arc-control-center-gap))}.arc-place--right-lower{right:var(--arc-place-x);top:calc(var(--arc-control-joystick-row) + var(--arc-control-center-offset) + var(--arc-control-center-gap))}.arc-place--left-lower-inner{left:calc(var(--arc-place-x) + var(--arc-control-large) + 12px);top:calc(var(--arc-control-joystick-row) + var(--arc-control-center-offset) + var(--arc-control-center-gap) + 14px)}.arc-place--right-lower-inner{right:calc(var(--arc-place-x) + var(--arc-control-large) + 12px);top:calc(var(--arc-control-joystick-row) + var(--arc-control-center-offset) + var(--arc-control-center-gap) + 14px)}.arc-place--top-left{left:var(--arc-place-x);top:max(14px,env(safe-area-inset-top))}.arc-place--top-right{right:var(--arc-place-x);top:max(14px,env(safe-area-inset-top))}.arc-joystick{display:flex;flex-direction:column;align-items:center;gap:5px}.arc-joystick__base{position:relative;display:grid;place-items:center;width:var(--arc-control-joystick);height:var(--arc-control-joystick);border:3px solid color-mix(in srgb,var(--arc-control-accent) 78%,#ffffff 22%);outline:2px solid color-mix(in srgb,var(--arc-control-accent-strong) 52%,transparent);outline-offset:4px;border-radius:50%;background:color-mix(in srgb,#07101b 12%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--arc-control-accent) 22%,transparent),inset 0 0 0 1px #ffffff14}.arc-joystick--horizontal .arc-joystick__base{width:var(--arc-control-joystick-wide);height:var(--arc-control-joystick-axis);border-radius:999px}.arc-joystick--vertical .arc-joystick__base{width:var(--arc-control-joystick-axis);height:var(--arc-control-joystick-tall);border-radius:999px}.arc-joystick__base:before,.arc-joystick__base:after{content:"";position:absolute;background:color-mix(in srgb,var(--arc-control-accent) 22%,transparent);pointer-events:none}.arc-joystick--omni .arc-joystick__base:before{width:62%;height:1px}.arc-joystick--omni .arc-joystick__base:after{width:1px;height:62%}.arc-joystick--horizontal .arc-joystick__base:before{width:66%;height:1px}.arc-joystick--horizontal .arc-joystick__base:after{display:none}.arc-joystick--vertical .arc-joystick__base:before{width:1px;height:66%}.arc-joystick--vertical .arc-joystick__base:after{display:none}.arc-joystick__knob{position:relative;z-index:2;width:clamp(46px,11vh,58px);height:clamp(46px,11vh,58px);border:3px solid color-mix(in srgb,var(--arc-control-accent-strong) 82%,transparent);border-radius:50%;background:color-mix(in srgb,var(--arc-control-accent) 46%,transparent);box-shadow:0 7px 16px var(--arc-control-shadow),0 0 18px color-mix(in srgb,var(--arc-control-accent) 34%,transparent);will-change:transform}.arc-control--active .arc-joystick__knob,.arc-control--engaged .arc-joystick__knob{background:color-mix(in srgb,var(--arc-control-accent) 74%,transparent)}.arc-joystick__arrows{position:absolute;inset:0;display:grid;place-items:center;white-space:pre-line;color:color-mix(in srgb,var(--arc-control-accent-strong) 58%,transparent);font:800 clamp(20px,5vh,28px)/1 system-ui,sans-serif;letter-spacing:.2em;pointer-events:none}.arc-control__label{min-height:12px;color:color-mix(in srgb,var(--arc-control-text) 82%,transparent);font-size:clamp(8px,1.9vh,10px);font-weight:800;line-height:1;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 5px var(--arc-control-shadow)}.arc-button{display:grid;place-items:center;align-content:center;gap:2px;border:2px solid color-mix(in srgb,var(--arc-control-accent-strong) 72%,transparent);border-radius:50%;padding:8px;color:var(--arc-control-text);background:color-mix(in srgb,var(--arc-control-accent) 72%,#101724 28%);box-shadow:0 8px 18px var(--arc-control-shadow),0 0 18px color-mix(in srgb,var(--arc-control-accent) 30%,transparent);font:inherit;text-transform:uppercase;transition:transform .06s ease,filter .06s ease}.arc-button--large{width:var(--arc-control-large);height:var(--arc-control-large)}.arc-button--small{width:var(--arc-control-small);height:var(--arc-control-small)}.arc-button__icon{font:800 clamp(16px,4vh,24px)/1 system-ui,sans-serif}.arc-button__label{white-space:pre-line;text-align:center;font-size:clamp(9px,2.2vh,13px);font-weight:900;line-height:.95;letter-spacing:.06em}.arc-button__sub{font-size:clamp(7px,1.6vh,9px);font-weight:700;line-height:1;letter-spacing:.12em;opacity:.75}.arc-button--small .arc-button__sub{display:none}.arc-button--small .arc-button__label{font-size:clamp(8px,1.9vh,10px)}.arc-control--active.arc-button{transform:translateY(3px) scale(.96);filter:brightness(1.18);box-shadow:0 3px 8px var(--arc-control-shadow),0 0 22px color-mix(in srgb,var(--arc-control-accent) 42%,transparent)}@media (hover: none),(pointer: coarse){.arc-control-layer{display:block}}@media (hover: hover) and (pointer: fine){.arc-control-layer{display:none!important}}@media (orientation: portrait){.arc-control-layer{visibility:hidden}}@media (orientation: landscape) and (max-height: 430px){:root{--arc-control-safe-x: max(12px, env(safe-area-inset-left));--arc-control-safe-y: max(10px, env(safe-area-inset-bottom));--arc-control-joystick: clamp(90px, 27vh, 110px);--arc-control-joystick-wide: clamp(108px, 31vh, 132px);--arc-control-joystick-tall: clamp(108px, 31vh, 132px);--arc-control-large: clamp(78px, 24vh, 98px);--arc-control-small: clamp(46px, 14vh, 58px);--arc-control-center-offset: clamp(56px, 16vh, 68px)}}:root{--bg: #050611;--panel: rgba(10, 15, 31, .94);--panel2: rgba(14, 22, 43, .94);--cyan: #61edff;--magenta: #ff4fa8;--amber: #ffd84e;--lime: #8cff75;--purple: #a96cff;--red: #ff506d;--text: #edf8ff;--dim: #8ba1b8;--line: rgba(97, 237, 255, .22)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#17203c 0,#090b18 38%,var(--bg) 75%);color:var(--text);font-family:IBM Plex Mono,ui-monospace,monospace}body{min-height:100vh;overflow-x:hidden}button,a{font:inherit}button{touch-action:manipulation}.scan,.noise{position:fixed;inset:0;pointer-events:none;z-index:20}.scan{background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.13) 2px 4px)}.noise{opacity:.06;background-image:radial-gradient(circle at 20% 20%,#fff 0 1px,transparent 1px),radial-gradient(circle at 70% 40%,#fff 0 1px,transparent 1px);background-size:13px 13px,17px 17px}.shell{width:min(1540px,calc(100% - 24px));margin:0 auto;padding:12px 0 max(22px,env(safe-area-inset-bottom))}.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;min-height:82px;padding:12px 18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#131b33f5,#070a15f5);box-shadow:0 18px 50px #00000047,inset 0 0 0 1px #ffffff06}.back,.pause{color:var(--dim);text-decoration:none;letter-spacing:.16em;text-transform:uppercase;font-size:11px}.back:hover,.pause:hover{color:var(--cyan)}.pause{border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:#ffffff06;cursor:pointer}.brand{text-align:center}.brand span{display:block;color:var(--magenta);letter-spacing:.23em;text-transform:uppercase;font-size:9px;margin-bottom:5px}.brand h1{margin:0;font:900 clamp(30px,4.2vw,55px)/.92 "Orbitron",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 0 20px rgba(97,237,255,.28),8px 8px 0 rgba(255,79,168,.13)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;margin-top:14px;align-items:stretch}.viewport-panel{min-width:0}.viewport-frame{position:relative;width:100%;aspect-ratio:16/10;min-height:610px;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#03050b;box-shadow:0 22px 65px #00000059,inset 0 0 0 1px #ffffff06}#stage{display:block;width:100%;height:100%}.view-tag{position:absolute;z-index:4;padding:5px 8px;border:1px solid rgba(97,237,255,.22);border-radius:8px;background:#02050cb8;color:var(--cyan);font-size:8px;letter-spacing:.18em;text-transform:uppercase;pointer-events:none}.main-tag{top:12px;left:12px}.front-tag{top:12px;right:12px}.side-tag{top:34.5%;right:12px}.top-tag{top:67%;right:12px}.panic-line{position:absolute;left:0;top:19%;width:72%;border-top:1px dashed rgba(255,80,109,.35);pointer-events:none}.panic-line span{position:absolute;right:12px;top:-17px;color:#ff506db3;font-size:8px;letter-spacing:.16em;text-transform:uppercase}.mobile-readout{display:none}.console{display:flex;flex-direction:column;gap:12px}.panel{border:1px solid var(--line);border-radius:17px;background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:inset 0 0 0 1px #ffffff06}.score-panel{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden}.score-panel div{min-height:78px;padding:13px;background:#ffffff05;display:flex;flex-direction:column;justify-content:center}.score-panel span,.preview-block>span{color:var(--dim);font-size:9px;letter-spacing:.16em;text-transform:uppercase}.score-panel b{margin-top:7px;font:700 22px/1 Orbitron,sans-serif;color:var(--amber)}.score-panel div:nth-child(2) b{color:var(--cyan)}.score-panel div:nth-child(3) b{color:var(--magenta)}.score-panel div:nth-child(4) b{color:var(--lime)}.preview-panel{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden}.preview-block{min-width:0;padding:13px 10px;text-align:center;background:#ffffff05}.preview-block b{display:block;min-height:17px;color:var(--text);font-size:10px;letter-spacing:.11em;text-transform:uppercase}.piece-preview{position:relative;width:104px;height:90px;margin:9px auto 5px}.piece-preview.muted{opacity:.55}.preview-cube{position:absolute;width:22px;height:22px;border-radius:4px;border:1px solid rgba(255,255,255,.55);box-shadow:inset -4px -5px #0000002e,0 0 12px currentColor;transform:skewY(-7deg)}.status-panel{padding:16px}.status-panel p{margin:0;min-height:44px;color:var(--text);font-size:11px;line-height:1.65;letter-spacing:.07em;text-transform:uppercase}.drop-meter{height:9px;margin-top:13px;border-radius:999px;overflow:hidden;background:#ffffff0e;border:1px solid rgba(255,255,255,.06)}.drop-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 10px #61edff80;transition:width .08s linear}.combo{margin-top:10px;color:var(--amber);font-size:9px;letter-spacing:.16em;text-transform:uppercase}.controls-panel{padding:15px}.controls-panel h2{margin:0 0 11px;color:var(--cyan);font:700 13px/1 Orbitron,sans-serif;text-transform:uppercase}.control-list{display:grid;gap:8px}.control-list span{display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:center;color:var(--dim);font-size:9px;letter-spacing:.06em;text-transform:uppercase}kbd{display:inline-grid;place-items:center;min-height:28px;padding:3px 6px;border:1px solid rgba(97,237,255,.22);border-radius:7px;background:#ffffff06;color:var(--text);font:700 9px/1 IBM Plex Mono,monospace;box-shadow:inset 0 -3px #00000040}.control-list em{font-style:normal}.mobile-control-copy{margin:16px 0 0;color:#b8d9e8;font-size:9px;line-height:1.65;letter-spacing:.09em;text-transform:uppercase}.mobile-control-copy b{color:var(--amber)}.footer{margin-top:11px;text-align:center;color:#65758b;font-size:8px;letter-spacing:.15em;text-transform:uppercase}.overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:18px;background:#020309e0;backdrop-filter:blur(8px)}.overlay.hidden{display:none}.overlay-card{width:min(680px,100%);border:1px solid rgba(97,237,255,.28);border-radius:24px;padding:clamp(25px,5vw,48px);text-align:center;background:radial-gradient(circle at 50% 0,rgba(97,237,255,.1),transparent 40%),linear-gradient(180deg,#121a32,#080b17);box-shadow:0 0 70px #61edff1f,inset 0 0 0 1px #ffffff06}.overlay-kicker{margin:0 0 10px;color:var(--magenta);font-size:9px;letter-spacing:.24em;text-transform:uppercase}.overlay h2{margin:0;font:900 clamp(44px,9vw,78px)/.9 "Orbitron",sans-serif;text-transform:uppercase;color:#fff;text-shadow:0 0 20px rgba(97,237,255,.3),8px 8px 0 rgba(255,79,168,.16)}.overlay-lead{max-width:570px;margin:22px auto 0;color:#b5c6d7;font-size:12px;line-height:1.8}.view-explainer{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0;text-align:left}.view-explainer span{padding:11px;border:1px solid rgba(97,237,255,.12);border-radius:11px;background:#ffffff06;color:var(--dim);font-size:9px;line-height:1.55;text-transform:uppercase}.view-explainer b{display:block;color:var(--cyan);margin-bottom:4px}.overlay button{min-width:220px;min-height:52px;border:1px solid rgba(255,216,78,.4);border-radius:13px;background:linear-gradient(180deg,#ffe36b,#e7a820);color:#211703;font-weight:900;letter-spacing:.17em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 -5px #5e33003d,0 10px 30px #ffd84e1f}.overlay-fine{margin:15px 0 0;color:#65758b;font-size:8px;letter-spacing:.16em;text-transform:uppercase}.nowebgl{display:none;position:fixed;inset:0;z-index:100;place-items:center;padding:20px;background:#050611;color:var(--text);text-align:center}@media (max-width: 1100px){.game-layout{grid-template-columns:1fr}.console{display:grid;grid-template-columns:1fr 1fr}.controls-panel{grid-column:span 2}.viewport-frame{min-height:540px}}@media (pointer: coarse),(max-width: 760px){:root{--stack-left-gutter: clamp(112px, 16vw, 170px);--stack-right-gutter: clamp(126px, 18vw, 190px);--stack-mini-width: clamp(115px, 20vw, 180px)}html,body{width:100%;height:100%;overflow:hidden}body{min-height:100dvh}.shell{position:fixed;inset:0;width:100dvw;height:100dvh;margin:0;padding:0}.game-layout{position:absolute;inset:0;display:block;margin:0;min-height:0}.as-stage{position:absolute;inset:0;display:block;min-width:0;min-height:0}.viewport-frame{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;overflow:hidden}#stage{width:100%;height:100%}.console,.footer{display:none!important}.as-topbar.topbar{display:block!important;position:fixed;inset:0;z-index:34;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:none}.brand{display:none}.back,.pause{position:absolute;top:max(10px,env(safe-area-inset-top));min-height:38px;display:grid;place-items:center;padding:0 14px;border:2px solid rgba(97,237,255,.34);border-radius:999px;background:#030711d1;color:#dffaff;font-size:9px;letter-spacing:.13em;backdrop-filter:blur(7px);pointer-events:auto}.back{left:max(12px,env(safe-area-inset-left))}.pause{right:max(12px,env(safe-area-inset-right));cursor:pointer}.mobile-readout{display:flex;position:absolute;left:50%;transform:translate(-50%);top:max(10px,env(safe-area-inset-top));z-index:12;justify-content:center;gap:clamp(8px,2vw,18px);margin:0;padding:7px 14px;border:1px solid rgba(97,237,255,.28);border-radius:999px;background:#040812c7;color:var(--cyan);font-size:clamp(8px,1.8vh,10px);letter-spacing:.11em;text-transform:uppercase;backdrop-filter:blur(7px)}.view-tag{z-index:10;padding:5px 8px;background:#030711c7;font-size:8px}.main-tag{top:58px;left:calc(var(--stack-left-gutter) + 8px)}.top-tag{top:58px;right:calc(var(--stack-right-gutter) + 8px)}.side-tag{top:37%;right:calc(var(--stack-right-gutter) + 8px)}.front-tag{top:70%;right:calc(var(--stack-right-gutter) + 8px);bottom:auto;left:auto}.panic-line{left:var(--stack-left-gutter);top:16%;width:calc(100% - var(--stack-left-gutter) - var(--stack-right-gutter))}.panic-line span{right:8px}.arcade-audio-toggle{left:max(14px,env(safe-area-inset-left))!important;right:auto!important;top:58px!important;bottom:auto!important;width:40px!important;height:40px!important}.arc-control.stack-bricks-roll-control{top:18%}.arc-control.stack-bricks-hold-control .arc-button__label,.arc-control.stack-bricks-roll-control .arc-button__label,.arc-control.stack-bricks-drop-control .arc-button__label{letter-spacing:.04em}.arc-control.stack-bricks-drop-control .arc-button__sub{max-width:76px;line-height:1.1;text-align:center}.overlay{padding:max(8px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom));overflow-y:auto}.overlay-card{margin:auto;padding:15px 18px;border-radius:15px}.overlay h2{font-size:clamp(26px,11vh,46px)}.overlay-lead{font-size:9.5px;line-height:1.48;margin-top:8px}.mobile-control-copy{margin:9px 0;font-size:8px;line-height:1.45}.view-explainer{grid-template-columns:1fr 1fr;gap:5px;margin:8px 0;max-height:none;overflow:visible}.view-explainer span{padding:7px 9px;font-size:7.5px}#start,#again{min-height:42px;font-size:10px}.overlay-fine{display:none}}@media (prefers-reduced-motion: reduce){.drop-meter i{transition:none}}:root{--as-line: rgba(112, 178, 255, .28);--as-dim: #7d8fae;--as-btn-a: linear-gradient(180deg, rgba(255,227,107,.8), rgba(220,161,29,.8));--as-btn-b: rgba(112, 178, 255, .22)}.as-btn-a.drop{color:#211703;border-color:#ffd84e73}@media (orientation: landscape) and (max-height: 430px){.arc-control-layer{--arc-control-large: clamp(80px, 21vh, 86px)}.arc-control.stack-bricks-roll-control{top:16%}}@media (hover: hover) and (pointer: fine){.shell{height:100vh;height:100dvh;min-height:0}.game-layout{grid-template-columns:minmax(0,1fr) clamp(260px,24vw,320px);min-height:0;overflow:hidden}.as-stage,.viewport-frame{min-height:0;height:100%}.viewport-frame{aspect-ratio:auto}.console{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}@media (hover: hover) and (pointer: fine) and (max-height: 850px){.shell{padding-top:6px;padding-bottom:8px}.topbar{min-height:68px;padding-block:7px}.brand span{margin-bottom:3px;font-size:8px}.brand h1{font-size:clamp(28px,3.4vw,44px)}.game-layout{gap:10px;margin-top:8px}.console{gap:7px}.panel{border-radius:12px}.score-panel div{min-height:58px;padding:9px}.score-panel b{margin-top:5px;font-size:18px}.preview-block{padding:8px 6px}.piece-preview{width:92px;height:62px;margin:5px auto 2px;transform:scale(.82);transform-origin:center}.status-panel{padding:10px}.status-panel p{min-height:30px;font-size:9px;line-height:1.4}.drop-meter{margin-top:7px}.combo{margin-top:6px;font-size:8px}.controls-panel{padding:10px}.controls-panel h2{margin-bottom:7px;font-size:11px}.control-list{gap:5px}.control-list span{grid-template-columns:64px 1fr;font-size:8px}kbd{min-height:22px;font-size:8px}.footer{margin-top:6px;font-size:7px}}
