:root{color:#f4f7fb;background:#0c1116;--ink: #071014;--panel: rgba(13, 24, 31, .78);--panel-strong: rgba(17, 31, 40, .92);--line: rgba(255, 255, 255, .16);--cyan: #2fc3df;--gold: #f4cc4f;--red: #ee4d53;--display-font: "Arial Black", "Segoe UI Black", Impact, "Segoe UI", system-ui, sans-serif;font-family:Segoe UI Variable,Segoe UI,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}[hidden]{display:none!important}html{width:100%;height:100%}body{margin:0;min-width:320px;height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;display:grid;place-items:center;background:#0c1116;user-select:none;-webkit-user-select:none}button,input,select{font:inherit}input,textarea{user-select:text;-webkit-user-select:text}button{color:inherit}.app-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;width:100vw;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:12px;background:repeating-linear-gradient(90deg,rgba(244,204,79,.1) 0 3px,transparent 3px 9px),repeating-linear-gradient(0deg,rgba(47,195,223,.08) 0 2px,transparent 2px 7px),radial-gradient(circle at 16% 18%,rgba(47,195,223,.26),transparent 28%),radial-gradient(circle at 88% 84%,rgba(244,204,79,.2),transparent 30%),linear-gradient(135deg,#1f341f,#163a45 38%,#101820 66%,#2d202a)}@media(orientation:landscape){.app-shell{width:min(100vw,100dvh);max-width:100dvh}}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{display:grid;place-items:center;width:42px;height:42px;overflow:hidden;border:1px solid rgba(125,241,255,.52);border-radius:9px;background:#071014;box-shadow:0 0 0 2px #2fc3df29,0 0 18px #2fc3df42,0 12px 28px #00000052}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}h1,p{margin:0}h1{font-family:var(--display-font);font-size:28px;line-height:1;letter-spacing:0;text-shadow:0 2px 0 #071014,0 0 18px rgba(47,195,223,.35)}.top-actions{display:flex;align-items:center;gap:8px}.command-button,.icon-button,.text-button,.pad-button{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff24,#ffffff0d),#091016bd;color:#f4f7fb;cursor:pointer;box-shadow:inset 0 1px #ffffff24,0 10px 22px #00000038;transition:transform .12s ease,background .12s ease,border-color .12s ease}.command-button:hover,.icon-button:hover,.text-button:hover,.pad-button:hover{transform:translateY(-1px);background:#ffffff29;border-color:#ffffff61}.command-button:disabled,.icon-button:disabled,.text-button:disabled,.pad-button:disabled{cursor:not-allowed;opacity:.48;transform:none}.command-button{min-height:40px;padding:0 18px;border-radius:7px;font-weight:800}.command-button.primary{border-color:#2fc3dfc7;background:linear-gradient(180deg,#86ecff,#2fc3df 54%,#1891ad),#2fc3df;color:#071014;text-shadow:0 1px 0 rgba(255,255,255,.35)}.icon-button{display:grid;place-items:center;width:40px;height:40px;border-radius:7px;font-weight:900}.text-button{min-height:32px;padding:0 10px;border-radius:6px}.game-layout{--side-min-width: 300px;display:grid;grid-template-columns:var(--board-canvas-width, minmax(0, 1fr)) minmax(var(--side-min-width),1fr);gap:12px;min-width:0;min-height:0;overflow:hidden}.play-surface{position:relative;align-self:start;justify-self:start;width:var(--board-canvas-width, 100%);height:var(--board-canvas-height, 100%);min-width:0;min-height:0;overflow:visible}#boardCanvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}.center-prompt{position:absolute;left:var(--prompt-x, 50%);top:var(--prompt-y, 50%);display:grid;gap:8px;place-items:center;transform:translate(-50%,-50%);width:min(var(--prompt-max-width, 360px),calc(100% - 32px));padding:clamp(14px,3.4vw,24px) clamp(16px,4vw,30px);border:1px solid rgba(255,255,255,.25);background:linear-gradient(180deg,#ffffff21,#ffffff0a),#0a1116db;box-shadow:inset 0 1px #ffffff26,0 18px 46px #00000070;animation:promptIn .42s cubic-bezier(.16,1,.3,1)}.center-prompt[hidden],.touch-controls[hidden]{display:none}.logo-word{display:flex;align-items:baseline;justify-content:center;max-width:100%;overflow:hidden;color:#f4f7fb;font-size:var(--prompt-logo-size, 72px);font-weight:1000;line-height:.86;letter-spacing:0;-webkit-text-stroke:clamp(1px,calc(var(--prompt-max-width, 360px) * .004),2px) rgba(5,12,18,.88);text-shadow:0 3px 0 rgba(255,255,255,.5),0 7px 0 rgba(0,0,0,.68),0 0 18px rgba(47,195,223,.48),0 0 26px rgba(244,204,79,.24);filter:drop-shadow(0 1px 0 rgba(255,255,255,.3))}.logo-word span{display:block;margin-right:-.055em}.logo-word span:nth-child(1){color:#c8cbff}.logo-word span:nth-child(2){color:#ffb17b}.logo-word span:nth-child(3){color:#fff5aa}.logo-word span:nth-child(4){color:#a8f29d}.logo-word span:nth-child(5){color:#ffc0ff}.logo-word[data-mode=plain]{display:block;color:#fff;font-size:calc(var(--prompt-logo-size, 72px) * .5)}.center-prompt:has(.logo-word[data-mode=plain]){gap:14px}.prompt-action{color:#d4e1ea;font-size:28px;font-weight:900;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 12px rgba(47,195,223,.28)}.screen-curtain{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;background:linear-gradient(90deg,transparent,rgba(47,195,223,.18),transparent),#ffffff0a;transform:translate(-100%)}.screen-curtain.play-transition{animation:curtainSweep .52s cubic-bezier(.16,1,.3,1)}.status-toast{position:absolute;left:var(--toast-x, 50%);top:var(--toast-y, 16px);min-width:130px;padding:9px 14px;border:1px solid rgba(255,255,255,.22);background:#071014c7;color:#fff7b6;font-weight:900;text-align:center;opacity:0;transform:translate(-50%,-12px);box-shadow:0 10px 28px #00000059;pointer-events:none}.status-toast.show{animation:toastPop .9s cubic-bezier(.16,1,.3,1)}.side-panel{display:grid;grid-template-rows:auto auto auto auto auto minmax(0,1fr);gap:12px;min-height:0;padding:2px}.title-lockup{display:grid;gap:6px;justify-items:start;min-width:0}.friel-logo{display:flex;align-items:baseline;justify-content:flex-start;max-width:100%;overflow:hidden;font-family:var(--display-font);font-size:clamp(62px,8.2vw,102px);line-height:.8;letter-spacing:0;filter:drop-shadow(0 0 14px rgba(47,195,223,.28)) drop-shadow(0 12px 16px rgba(0,0,0,.32));text-shadow:0 3px 0 rgba(255,255,255,.5),0 6px 0 rgba(4,8,13,.76),0 0 18px rgba(47,195,223,.34)}.friel-logo b{display:block;font-weight:1000;margin-right:-.055em;-webkit-text-stroke:1px rgba(4,9,13,.62)}.friel-logo b:nth-child(1){color:#c8cbff}.friel-logo b:nth-child(2){color:#ffb17b}.friel-logo b:nth-child(3){color:#fff5aa}.friel-logo b:nth-child(4){color:#a8f29d}.friel-logo b:nth-child(5){color:#ffc0ff}.title-lockup small{display:inline-grid;place-items:center;min-height:24px;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:#020507;color:#dce8ef;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;font-weight:900;box-shadow:inset 0 0 0 1px #000c,0 0 18px #2fc3df38}.meter-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px}.meter-strip.compact .metric{padding:10px 22px}.meter-strip.compact .metric strong{font-size:29px}.metric,.progress-row,.next-panel,.ranking-panel{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff17,#ffffff09),var(--panel);box-shadow:inset 0 1px #ffffff17,0 12px 28px #0003}.metric{display:grid;align-content:center;min-width:0;min-height:74px;padding:10px 22px;border-radius:999px;background:linear-gradient(180deg,#ffffff14,#fff0),#020507}.metric span,.progress-row span,.next-panel>span,.panel-heading span,.panel-heading small{color:#f0f4f6;font-size:24px;font-weight:800;text-transform:uppercase;text-shadow:0 2px 0 #000}.panel-heading small{display:inline-grid;place-items:center;min-height:20px;padding:0 8px;border:1px solid rgba(244,204,79,.36);border-radius:999px;background:linear-gradient(180deg,#f4cc4f24,#f4cc4f0a),#020507b8;color:#fff7b6;font-size:20px}.metric strong{display:block;margin-top:4px;overflow-wrap:normal;color:#35f36f;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:29px;line-height:1.1;font-variant-numeric:tabular-nums;text-align:right;text-shadow:0 2px 0 rgba(0,0,0,.86),0 0 12px rgba(53,243,111,.38)}.score-metric strong{min-width:6ch;white-space:nowrap}.metric:nth-child(2) strong,.meter-strip.compact .metric:nth-child(2) strong,.level-metric strong,.type-metric strong{color:#ff4b2c;text-shadow:0 2px 0 rgba(0,0,0,.86),0 0 12px rgba(255,75,44,.32)}.progress-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:12px 22px;border-radius:8px;background:#020507bd}.progress-track{height:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0000005c}.progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#2fc3df,#f2c84b),#2fc3df;box-shadow:0 0 14px #2fc3df73}.next-panel{display:grid;justify-items:center;gap:8px;padding:12px;border-radius:8px;background:linear-gradient(180deg,#2fc3df21,#0000001a),#020507c7}#nextCanvas{width:min(90px,100%,var(--next-preview-max-width, 90px));height:auto;aspect-ratio:3 / 5;image-rendering:auto}.ranking-panel{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#2fc3df1a,#f4cc4f0d 46%,#0000002e),#020507d1}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1)}#rankingList{display:grid;align-content:start;gap:5px;min-height:0;margin:0;padding:9px;overflow:auto;scrollbar-color:#2fc3df rgba(2,5,7,.62);scrollbar-width:thin}#rankingList::-webkit-scrollbar,.ranking-modal-list::-webkit-scrollbar{width:10px}#rankingList::-webkit-scrollbar-track,.ranking-modal-list::-webkit-scrollbar-track{border:1px solid rgba(255,255,255,.08);background:#020507b8}#rankingList::-webkit-scrollbar-thumb,.ranking-modal-list::-webkit-scrollbar-thumb{border:2px solid rgba(2,5,7,.88);border-radius:999px;background:linear-gradient(180deg,#fff7b6,#2fc3df 50%,#117a95),#2fc3df}.ranking-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:34px;padding:5px 8px 5px 5px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:linear-gradient(180deg,#ffffff14,#ffffff06),#030a0eb3;box-shadow:inset 0 1px #ffffff14,0 8px 16px #00000024;list-style:none;counter-increment:none}.ranking-row::marker{content:""}.ranking-rank{display:grid;place-items:center;width:30px;height:24px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:linear-gradient(180deg,#ffffff24,#ffffff08),#071014;color:#a8bac7;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:1000;line-height:1;text-shadow:0 1px 0 #000}.ranking-name{min-width:0;overflow:hidden;color:#e8f1f5;font-size:13px;font-weight:900;line-height:1;text-overflow:ellipsis;text-shadow:0 2px 0 rgba(0,0,0,.62);white-space:nowrap}.ranking-score{color:#35f36f;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1;font-variant-numeric:tabular-nums;text-align:right;text-shadow:0 2px 0 rgba(0,0,0,.86),0 0 10px rgba(53,243,111,.28)}.ranking-row.rank-1{border-color:#f4cc4f8a;background:linear-gradient(90deg,rgba(244,204,79,.17),transparent 42%),linear-gradient(180deg,#ffffff1c,#ffffff09),#030a0ec7}.ranking-row.rank-2{border-color:#a8bac775;background:linear-gradient(90deg,rgba(168,186,199,.14),transparent 42%),linear-gradient(180deg,#ffffff1a,#ffffff08),#030a0ec2}.ranking-row.rank-3{border-color:#ffb17b75;background:linear-gradient(90deg,rgba(255,177,123,.15),transparent 42%),linear-gradient(180deg,#ffffff1a,#ffffff08),#030a0ec2}.ranking-row.rank-1 .ranking-rank{border-color:#f4cc4fad;background:linear-gradient(180deg,#fff7b6,#f4cc4f 52%,#a87618),#f4cc4f;color:#071014;text-shadow:0 1px 0 rgba(255,255,255,.45)}.ranking-row.rank-2 .ranking-rank{border-color:#e8f1f585;background:linear-gradient(180deg,#fff,#a8bac7 54%,#506373),#a8bac7;color:#071014;text-shadow:0 1px 0 rgba(255,255,255,.38)}.ranking-row.rank-3 .ranking-rank{border-color:#ffb17b8f;background:linear-gradient(180deg,#ffe1bc,#ffb17b 54%,#8b4d25),#ffb17b;color:#071014;text-shadow:0 1px 0 rgba(255,255,255,.36)}.touch-controls{display:grid;grid-template-columns:repeat(6,minmax(40px,1fr));gap:8px}.copyright-footer{color:#e8f1f5b8;font-size:11px;font-weight:700;line-height:1;text-align:right;text-shadow:0 1px 0 rgba(0,0,0,.5)}.copyright-footer a{color:inherit;text-decoration:none;text-underline-offset:2px}.copyright-footer a:hover,.copyright-footer a:focus-visible{text-decoration:underline}.pad-button{position:relative;min-height:58px;border-radius:8px;font-size:26px;font-weight:900;touch-action:none;-webkit-user-select:none;user-select:none}.pad-button:after{content:attr(data-key-hint);pointer-events:none;position:absolute;left:50%;bottom:calc(100% + 8px);z-index:20;width:max-content;max-width:min(190px,70vw);padding:6px 9px;border:1px solid rgba(125,241,255,.42);border-radius:6px;background:linear-gradient(180deg,#ffffff29,#ffffff0d),#070f14f5;color:#e9fbff;font-size:11px;font-weight:900;line-height:1.15;text-align:center;white-space:normal;opacity:0;transform:translate(-50%,4px);box-shadow:inset 0 1px #ffffff24,0 12px 28px #00000061,0 0 18px #2fc3df38;transition:opacity .12s ease,transform .12s ease}.pad-button:hover:after,.pad-button:focus-visible:after{opacity:1;transform:translate(-50%)}.pad-button:first-child:after{left:0;transform:translateY(4px)}.pad-button:first-child:hover:after,.pad-button:first-child:focus-visible:after{transform:translate(0)}.pad-button:last-child:after{right:0;left:auto;transform:translateY(4px)}.pad-button:last-child:hover:after,.pad-button:last-child:focus-visible:after{transform:translate(0)}.pad-button.rotate{background:#2fc3df33}.pad-button.drop{background:#f4cc4f2e}.pad-button.hard-drop{background:#ee4d5333}dialog{width:min(460px,calc(100vw - 32px));border:1px solid rgba(255,255,255,.18);padding:0;background:#121d25;color:#f4f7fb;box-shadow:0 24px 80px #00000073}dialog::backdrop{background:#05090cb8}.modal-panel{display:grid;gap:14px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent),#121d25}.modal-panel h2{margin:0;font-size:22px;letter-spacing:0}.modal-body{color:#c7d4dd;white-space:pre-wrap}.help-panel{display:grid;gap:14px;max-height:min(66dvh,520px);overflow:auto;padding-right:4px;scrollbar-color:#2fc3df rgba(2,5,7,.62);scrollbar-width:thin;white-space:normal}.help-panel::-webkit-scrollbar{width:10px}.help-panel::-webkit-scrollbar-track{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#2fc3df14,#f4cc4f0f),#020507b8}.help-panel::-webkit-scrollbar-thumb{border:2px solid rgba(2,5,7,.88);border-radius:999px;background:linear-gradient(180deg,#fff7b6,#2fc3df 46%,#117a95),#2fc3df;box-shadow:inset 0 1px #ffffff6b,0 0 10px #2fc3df59}.help-panel::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#fff,#6ee8fb 50%,#1891ad),#6ee8fb}.help-section{display:grid;gap:7px}.help-section h3{margin:0;color:#fff7b6;font-size:14px;font-weight:1000;letter-spacing:0;text-transform:uppercase;text-shadow:0 0 12px rgba(244,204,79,.22)}.help-section ul{display:grid;gap:5px;margin:0;padding-left:18px}.help-section li{line-height:1.42}.ranking-modal-list{display:grid;gap:8px;max-height:min(62dvh,460px);margin:0;padding:2px 4px 2px 0;overflow:auto;color:#edf6fb;counter-reset:none}.ranking-modal-list .ranking-row{grid-template-columns:42px minmax(0,1fr) minmax(96px,auto);min-height:44px;padding:7px 10px 7px 7px}.ranking-modal-list .ranking-rank{width:36px;height:28px;font-size:12px}.ranking-modal-list .ranking-name,.ranking-modal-list .ranking-score{font-size:15px}.achievements-list{display:grid;grid-template-columns:1fr auto;gap:10px 18px;margin:0;padding:4px 0}.achievements-panel{display:grid;gap:16px}.share-panel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border:1px solid rgba(47,195,223,.2);border-radius:8px;background:linear-gradient(180deg,#2fc3df1a,#f4cc4f0d),#0205078f}.share-label{color:#dce8ef;font-size:13px;font-weight:900;text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.55)}.share-button{display:inline-grid;place-items:center;width:38px;min-width:38px;height:38px;min-height:38px;padding:0;text-decoration:none}.share-button svg{width:20px;height:20px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}.achievements-list dt{color:#dce8ef;font-weight:800}.achievements-list dd{margin:0;color:#fff7b6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;text-align:right;text-shadow:0 0 12px rgba(244,204,79,.25)}.danger-button{justify-self:end;border-color:#ee4d5380;background:linear-gradient(180deg,#ee4d5338,#ee4d5314),#140608b8;color:#ffd1d4}.settings-panel{display:grid;gap:12px}.settings-row{display:grid;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:linear-gradient(180deg,#ffffff14,#ffffff08),#03080c94;box-shadow:inset 0 1px #ffffff14}.settings-row.audio-row{grid-template-columns:minmax(82px,auto) 1fr 42px;align-items:center}.settings-row.language-row{grid-template-columns:minmax(104px,auto) minmax(0,1fr);align-items:center}.settings-row span{display:inline-flex;align-items:center;gap:9px;color:#eef6fa;font-weight:900}.settings-row input[type=checkbox]{width:18px;height:18px;accent-color:#2fc3df}.settings-row input[type=range]{width:100%;accent-color:#f4cc4f}.settings-row select{width:100%;min-width:0;min-height:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(125,241,255,.34);border-radius:7px;padding:0 40px 0 12px;background:linear-gradient(45deg,transparent 50%,#fff7b6 50%) calc(100% - 20px) 50% / 7px 7px no-repeat,linear-gradient(135deg,#fff7b6 50%,transparent 50%) calc(100% - 14px) 50% / 7px 7px no-repeat,linear-gradient(180deg,#2fc3df29,#f4cc4f14),#020507db;color:#f4f7fb;font-weight:900;text-shadow:0 2px 0 #000;box-shadow:inset 0 1px #ffffff1a,0 0 0 1px #0000006b,0 10px 24px #00000038}.settings-row select:focus-visible{outline:2px solid #f4cc4f;outline-offset:2px;border-color:#f4cc4fb8}.settings-row select option{background:#071014;color:#f4f7fb}.settings-row output{color:#35f36f;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;text-align:right}#nameInput{width:100%;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:0 12px;background:#ffffff14;color:#fff}#nameInput[aria-invalid=true]{border-color:#ee4d53d1;box-shadow:0 0 0 1px #ee4d5352,0 0 18px #ee4d5329}.name-warning{margin-top:-6px;color:#ffd1d4;font-size:13px;font-weight:800;line-height:1.35;text-shadow:0 2px 0 rgba(0,0,0,.64)}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.modal-actions .text-button,.modal-actions .command-button{display:inline-grid;place-items:center;min-height:40px;height:40px;padding:0 14px;line-height:1}.modal-actions .command-button{padding:0 18px}.modal-extra-action{margin-right:auto}@media(max-width:1180px){.progress-row,.ranking-panel{display:none}.game-layout{--side-min-width: 126px;grid-template-columns:var(--board-canvas-width, minmax(0, 1fr)) minmax(var(--side-min-width),1fr);gap:8px}.side-panel{align-self:start;grid-template-columns:1fr;grid-template-rows:auto auto auto minmax(0,1fr);height:min(var(--board-height, 100%),100%);margin-top:0;gap:6px;min-width:0;padding-top:0}.title-lockup{margin-bottom:8px}.meter-strip,.meter-strip.compact{grid-template-columns:1fr;gap:6px}.metric{min-height:48px;padding:6px 14px}.meter-strip.compact .metric{padding:6px 14px}.metric span,.next-panel>span{font-size:20px}.metric strong,.meter-strip.compact .metric strong{margin-top:1px;font-size:20px}.next-panel{min-height:0;padding:6px}#nextCanvas{width:min(90px,100%,var(--next-preview-max-width, 90px));height:auto}}@media(max-width:920px){body{overflow:hidden}.app-shell{height:100dvh;min-height:100dvh;gap:8px;overflow:hidden}.topbar{align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}.game-layout{--side-min-width: 126px;grid-template-columns:var(--board-canvas-width, minmax(0, 1fr)) minmax(var(--side-min-width),1fr);grid-template-rows:minmax(0,1fr);gap:8px;min-height:0}.side-panel{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);gap:6px;min-width:0}.title-lockup{display:none}.meter-strip,.meter-strip.compact{grid-template-columns:1fr;gap:6px}.progress-row,.ranking-panel{display:none}.metric{min-height:48px;padding:6px 14px}.meter-strip.compact .metric{padding:6px 14px}.metric span,.next-panel>span{font-size:20px}.metric strong,.meter-strip.compact .metric strong{margin-top:1px;font-size:20px}.next-panel{min-height:0;padding:6px}#nextCanvas{width:min(90px,100%,var(--next-preview-max-width, 90px));height:auto}.ranking-panel{grid-column:auto}}@media(max-width:560px){.app-shell{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.brand-mark{width:36px;height:36px}h1{font-size:21px}.icon-button,.command-button{min-height:36px;height:36px}.game-layout{--side-min-width: 112px;grid-template-columns:var(--board-canvas-width, minmax(0, 1fr)) minmax(var(--side-min-width),1fr);grid-template-rows:minmax(0,1fr)}.side-panel{grid-template-columns:1fr}.metric strong{font-size:21px}.touch-controls{grid-template-columns:repeat(6,1fr)}.pad-button{min-height:52px}}@media(max-height:700px){.app-shell{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:6px}.topbar{min-height:38px}.brand{gap:7px}.brand-mark{width:34px;height:34px}h1{font-size:20px}.title-lockup,.progress-row,.ranking-panel{display:none}.command-button,.icon-button{min-height:34px;height:34px}.game-layout{--side-min-width: 112px;grid-template-columns:var(--board-canvas-width, minmax(0, 1fr)) minmax(var(--side-min-width),1fr);gap:6px}.side-panel{gap:6px}.meter-strip,.meter-strip.compact{grid-template-columns:1fr;gap:6px}.metric{min-height:38px;padding:5px 12px}.meter-strip.compact .metric{padding:5px 12px}.metric span,.next-panel>span{font-size:20px}.metric strong,.meter-strip.compact .metric strong{margin-top:0;font-size:20px}.next-panel{padding:6px}#nextCanvas{width:min(90px,100%,var(--next-preview-max-width, 90px));height:auto}.touch-controls{gap:6px}.pad-button{min-height:40px;font-size:22px}.copyright-footer{font-size:10px}}@media(max-aspect-ratio:9 / 16){.game-layout{--side-min-width: 96px;grid-template-columns:var(--board-canvas-width, minmax(0, 1fr)) minmax(var(--side-min-width),1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"meters ." "board next";gap:8px}.play-surface{grid-area:board}.side-panel{display:contents}.title-lockup,.secondary-meter,.progress-row,.ranking-panel{display:none}.primary-meter{grid-area:meters;grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-self:start;width:min(var(--board-width, 100%),calc(100% - var(--board-x, 0px)));margin-left:var(--board-x, 0px);gap:8px}.primary-meter .metric{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;justify-items:start;min-height:44px;padding:6px 10px;border-radius:8px}.primary-meter .metric span{font-size:20px;line-height:1}.primary-meter .metric strong{min-width:0;max-width:100%;margin-top:2px;overflow:hidden;font-size:20px;line-height:1;text-overflow:clip}.next-panel{grid-area:next;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-self:start;align-content:center;align-items:center;justify-items:center;height:min(var(--board-height, 100%),100%);margin-top:var(--board-y, 0px);min-height:0;padding:6px 8px}#nextCanvas{width:min(72px,100%,var(--next-preview-max-width, 72px));height:auto}}@keyframes promptIn{0%{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes curtainSweep{0%{opacity:0;transform:translate(-100%)}30%{opacity:1}to{opacity:0;transform:translate(100%)}}@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-14px) scale(.94)}18%,70%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,-8px) scale(.98)}}
