:root{color-scheme:dark;--lime:#d4ff57;--ink:#07110d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 10%,#173a28,var(--ink) 65%);color:#edf6ec;font:16px/1.5 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #345341;padding-bottom:20px}header a{display:flex;align-items:center;gap:10px;font-weight:750;font-size:22px;text-decoration:none}a{color:var(--lime)}header span,.eyebrow{font-size:12px;letter-spacing:.17em;color:#b4d28c}h1{font-size:clamp(32px,6vw,54px);line-height:1.1;letter-spacing:-.04em;margin:16px 0}em{font-style:normal;color:var(--lime)}.intro{max-width:640px;margin:28px 0}.intro p,.muted{color:#a9bfb0}.game{max-width:480px;margin:30px auto;border:1px solid #476842;background:#0b1c14;border-radius:22px;overflow:hidden;box-shadow:0 20px 70px #0007}.metrics{display:flex;justify-content:space-between;padding:16px;font-size:11px;letter-spacing:.06em}.metrics b{display:block;font-size:24px;color:var(--lime)}canvas{width:100%;height:auto;display:block;touch-action:none;background:#07130e}button,select{font:inherit;border-radius:12px;min-height:44px;border:1px solid #486347;padding:8px 14px;color:#eff8e8;background:#1b3324}button:first-child{background:var(--lime);color:#102409;font-weight:750}button:disabled{opacity:.45}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #ffe35c;outline-offset:2px}.actions,.levels{display:flex;gap:10px;flex-wrap:wrap;padding:10px 16px}.levels{font-size:13px;align-items:center}#status,#record{padding:0 16px;min-height:24px}footer{display:flex;flex-wrap:wrap;gap:20px;margin:32px 0}#record{font-size:13px}input{accent-color:var(--lime)}@media(min-width:800px){.intro{float:left;max-width:350px}.game{margin-left:auto;margin-right:0;width:440px}main>.muted,footer{clear:both}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}



/* Rev3: upright ASENCAN consoles over the site's own blurred backdrop. */
body.arcade-page{background:transparent;color:#e5f5df}
.arcade-page .arcade-stage{width:100%;max-width:620px;margin:auto;padding:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.arcade-console{--plastic:#25823c;--phosphor:#beffa7;position:relative;width:100%;padding:12px 14px 5px;border:2px solid #358a40;border-radius:47px 47px 39px 39px;background:radial-gradient(ellipse at 8% 0%,#a5ea72 0,transparent 24%),linear-gradient(112deg,#3b9d49 0%,#17612a 14%,#2b923f 48%,#125725 82%,#48a34a 100%);box-shadow:inset 0 4px 3px #c6ffb080,inset 5px 0 3px #64b95680,inset -6px -5px 6px #092f19bd,0 9px 28px #0009}
.console-header{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 50px 5px}
.console-brand{font:bold clamp(17px,4vw,25px)/1 system-ui;color:#a0d676;text-shadow:0 -1px 1px #0d3817,0 1px 0 #78c871}
.power-led{position:absolute;left:9px;top:13px;width:15px;height:15px;border-radius:50%;background:#baff49;border:2px solid #75cc37;box-shadow:0 0 12px #8cff39,0 0 3px 3px #4aaf27}
.console-close{position:absolute;right:-3px;top:-2px;width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;border:2px solid #0b3118;background:linear-gradient(#326b37,#092e17);color:#bcff9d;font:bold 34px/1 system-ui;box-shadow:inset 0 2px 2px #7fbe6b88,0 3px 4px #0a2f19}
.screen-rim{padding:8px;border:2px solid #0c391a;border-radius:30px;background:linear-gradient(130deg,#194c21,#347b36 40%,#164b22);box-shadow:inset 4px 5px 7px #09260ee0,0 2px 2px #8dcf6c99}
.phosphor-screen{position:relative;isolation:isolate;overflow:hidden;border:3px solid #05180b;border-radius:20px;background:#041d0c;color:var(--phosphor);box-shadow:inset 0 0 24px #000}
.phosphor-screen:after{content:"";pointer-events:none;position:absolute;inset:0;z-index:4;background:repeating-linear-gradient(0deg,#0003 0,#0003 1px,transparent 1px,transparent 4px),url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.06' filter='url(%23g)'/%3E%3C/svg%3E");box-shadow:inset 0 0 20px #0007;border-radius:inherit}
.arcade-hud{position:relative;z-index:1;display:flex;justify-content:space-between;gap:5px;padding:9px 10px 6px;font:bold clamp(9px,2.5vw,14px)/1.2 monospace;white-space:nowrap;background:#05230e}
.arcade-board-wrap{position:relative}
.arcade-page canvas{width:100%;height:auto;aspect-ratio:10/7;display:block;touch-action:none;background:#051e0d;image-rendering:pixelated}
.arcade-page .game-welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;background:radial-gradient(ellipse,#134625,#03190b);color:#c5ffb4;text-align:center}
.arcade-page .game-welcome[hidden]{display:none}
.game-welcome img{border-radius:9px;width:44px;height:44px}
.arcade-page .game-welcome h1{font:bold clamp(17px,4vw,28px)/1.1 monospace;letter-spacing:0;margin:0}
.arcade-page .game-welcome p{font:13px/1.3 monospace;margin:0;color:#b4e7a7}
.arcade-page .game-welcome small{font:10px/1.2 monospace}
.arcade-page #feedback{display:block;text-align:center;min-height:25px;padding:4px 7px;font:bold 11px/1.4 monospace;letter-spacing:.04em;color:#c6ffb8}
.arcade-page #feedback[data-kind="miss"],.arcade-page #feedback[data-kind="damage"]{color:#f1df83}
.deboss{color:#092d13;text-shadow:0 1px 0 #84bc6388,0 -1px 1px #092d13dd;font-weight:900;text-align:center}
.game-name{font:bold clamp(17px,4.5vw,25px)/1.2 system-ui;letter-spacing:-.03em;padding:5px 0 8px}
.control-panel{padding:15px 13px 12px;border:2px solid #0a2e12;border-radius:29px 29px 33px 33px;background:repeating-linear-gradient(0deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 3px),linear-gradient(130deg,#0a1e0e,#152f14 48%,#071a0c);box-shadow:inset 0 4px 8px #000b,0 1px 1px #9cce6e88}
.nota-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.physical-key{min-width:0;min-height:54px;padding:3px;border:3px solid #1a451a;border-bottom:6px solid #113b15;border-radius:13px;background:linear-gradient(145deg,#8dc66c,#64b650 50%,#3e9134);color:#103514;font:bold clamp(23px,6vw,38px)/1 system-ui;box-shadow:inset 2px 2px 2px #d4f9a6b0,inset -2px -2px 2px #205b2588,0 3px 3px #000b;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.physical-key.is-down{transform:translateY(3px);border-bottom-width:3px;background:linear-gradient(140deg,#c6ff8c,#8bf15a);box-shadow:inset 0 2px 4px #28602b66,0 0 17px #8dff3866}
.physical-key[data-result="perfect"],.physical-key[data-result="hit"],.physical-key[data-result="hold"]{background:linear-gradient(135deg,#d0ffa0,#75d54c);box-shadow:0 0 14px #9cff5888,inset 1px 1px 2px #efffc1}
.physical-key[data-result="miss"]{border-color:#c6ae4b}
.console-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:13px}
.console-actions button{min-height:36px;min-width:47px;padding:6px 5px;border:1px solid #2b5b26;border-radius:11px;color:#b1e28e;background:linear-gradient(#2e632c,#153b1d);font:bold 10px/1.2 monospace;box-shadow:inset 0 1px 1px #96cb6a66,0 2px 3px #000;touch-action:manipulation}
.console-actions button:first-child{background:linear-gradient(#438538,#1e4a23);color:#ceffb2}
.console-actions button:active,.console-close:active{transform:translateY(2px);box-shadow:inset 0 2px 3px #0008}
.asencan-brand{font:900 clamp(22px,5.5vw,33px)/1 system-ui;letter-spacing:.08em;padding:7px 0 5px}
.hero-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-controls[hidden],.nota-controls[hidden]{display:none}
.dpad{display:grid;grid-template-columns:repeat(3,clamp(44px,9vw,62px));grid-template-rows:repeat(3,clamp(44px,9vw,62px));gap:0;flex:none;filter:drop-shadow(0 3px 2px #000)}
.dpad .physical-key{min-height:0;width:100%;height:100%;font-size:clamp(28px,7vw,42px);border-radius:10px}
.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}
.dpad-center{grid-area:2/2;background:linear-gradient(125deg,#78b65a,#347c2a);box-shadow:inset 0 2px 3px #c6f5a766}
.ab-buttons{display:grid;grid-template-columns:repeat(2,clamp(56px,13vw,83px));gap:8px;align-items:center}
.ab-buttons .physical-key{border-radius:50%;width:100%;height:clamp(56px,13vw,83px);min-height:0;font-size:clamp(28px,8vw,45px)}
.action-a{grid-column:1;grid-row:1;transform:translateY(14px)}.action-b{grid-column:2;grid-row:1;transform:translateY(-12px)}
.action-a.is-down{transform:translateY(17px)}.action-b.is-down{transform:translateY(-9px)}
.hero-controls .speaker{width:45px;height:35px;flex-shrink:1;background:radial-gradient(circle,#000 2px,transparent 2.8px) 0 0/9px 9px}
.outside-console{margin:8px 5px 0;color:#f1ffe8}
.arcade-page #status{font:12px/1.45 system-ui;padding:0;margin:8px 4px;min-height:18px;text-shadow:0 1px 3px #000}
.arcade-help{border:1px solid #a2d48944;border-radius:13px;background:#062113d9;margin:7px 0;padding:10px 13px;font:12px/1.6 system-ui;box-shadow:0 3px 10px #0003}
.arcade-help summary{cursor:pointer;min-height:24px;font-weight:750}
.arcade-help p{margin:8px 0}.arcade-page #record{font:11px/1.5 system-ui;padding:0;margin:8px 0;color:#c3e4b8}
.game-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.game-settings label{display:flex;flex-direction:column;gap:5px}.game-settings label:nth-child(2){flex-direction:row;align-items:center}
.game-settings input[type="number"]{width:100%;min-height:40px;border-radius:8px;border:1px solid #6f9d62;background:#0a2918;color:#e2f8d5;padding:6px 10px;font:inherit}
.game-settings input[type="range"]{width:100%;min-height:30px}
.arcade-page button:focus-visible,.arcade-help summary:focus-visible,.game-settings input:focus-visible{outline:3px solid #e9ff9d;outline-offset:3px}
@media(max-width:380px){.arcade-console{padding:8px 10px 3px;border-radius:33px}.screen-rim{padding:5px;border-radius:23px}.console-header{min-height:44px}.console-close{width:44px;height:44px;font-size:30px}.control-panel{padding:11px 8px 9px}.nota-controls{gap:5px}.physical-key{min-height:48px;border-width:2px;border-bottom-width:5px;border-radius:10px}.hero-controls{gap:5px}.hero-controls .speaker{display:none}.ab-buttons{gap:7px}.game-name{padding:5px 0}.arcade-page .game-welcome{gap:8px}.console-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){.phosphor-screen:after{background-image:repeating-linear-gradient(0deg,#0001 0,#0001 1px,transparent 1px,transparent 5px)}.physical-key.is-down{transform:none}.action-a,.action-b{transform:none}}

/* V2.6d Rev2/3: polished molded shell and viewport-aware proportions. */
.arcade-page .arcade-stage{max-width:none;width:var(--console-fit, min(96vw,740px));padding:8px;container-type:inline-size}
.arcade-console{overflow:hidden;padding:1.8cqw 2cqw .6cqw;border-radius:7cqw 7cqw 6cqw 6cqw;border:2px solid #277e2d;background:radial-gradient(ellipse at 7% 0%,#c6ff9a 0,#67d64e 8%,transparent 31%),linear-gradient(106deg,#65dd55 0%,#18812b 12%,#32b043 48%,#0d6321 83%,#47b93d 100%);box-shadow:inset 0 3px 2px #ecffbead,inset 5px 0 5px #88ff7870,inset -7px -7px 9px #06441cd9,inset 0 -12px 20px #18451e66,0 22px 55px #0009}
.arcade-console:before{content:'';position:absolute;pointer-events:none;inset:0;z-index:5;border-radius:inherit;background:linear-gradient(115deg,#e5ffc61c,transparent 15% 69%,#c6ff9a12 84%,transparent);box-shadow:inset 0 0 0 2px #ddff9b21}
.console-header{min-height:8cqw;padding:0 12cqw 1cqw}.console-brand{font-size:4cqw;color:#a6f284;text-shadow:0 2px 1px #083b15,0 -1px 1px #b7ff8d44}
.power-led{left:2cqw;top:2cqw;width:2.2cqw;height:2.2cqw;background:#efffd6;border-color:#8cfa51;box-shadow:0 0 4px 3px #8cff55,0 0 18px 5px #6dff3c88}
.console-close{right:0;top:.2cqw;width:7cqw;height:7cqw;min-height:30px;font-size:5cqw}
.console-fullscreen{position:absolute;right:8cqw;top:.5cqw;min-height:30px;width:6cqw;height:6cqw;padding:0;border:1px solid #9edc6f66;border-radius:50%;background:linear-gradient(#316e33,#0d3a1b);color:#c9ffad;font:bold 3cqw/1 system-ui;box-shadow:inset 0 1px 2px #c7ff8c55,0 2px 4px #0008}
.screen-rim{padding:1.3cqw;border-radius:4.8cqw;background:linear-gradient(130deg,#0a3c16,#2e9635 40%,#124c20);border:2px solid #0b421c;box-shadow:inset 3px 6px 7px #012f16,0 2px 2px #b4ed8a88,0 0 0 2px #083c16}
.phosphor-screen{border-radius:3.6cqw;border:3px solid #021508;box-shadow:inset 0 0 22px #000,0 1px 0 #8fc97544}
.phosphor-screen:after{opacity:.5;box-shadow:inset 0 0 28px #0008}
.phosphor-screen:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:inherit;background:linear-gradient(128deg,#bcffd710 0,transparent 38% 67%,#a6ffbc06);box-shadow:inset 0 0 14px #05260b66}
.arcade-hud{font-size:2cqw;padding:1.3cqw 1.5cqw 1cqw;background:#05230ed9;color:#dbffc8}
.arcade-page #feedback{font-size:1.7cqw;min-height:3.5cqw;padding:.6cqw}
.game-name{font-size:3.4cqw;padding:1cqw 0 1.4cqw;letter-spacing:-.025em}
.control-panel{padding:2.4cqw 2.5cqw 1.8cqw;border-radius:4cqw 4cqw 5cqw 5cqw;background:repeating-linear-gradient(0deg,#b3d59f06 0 1px,transparent 1px 3px),linear-gradient(130deg,#020c08,#152819 55%,#06130b);box-shadow:inset 0 5px 9px #000,0 1px 1px #c0f18e80}
.nota-controls{gap:1.5cqw}.nota-controls .physical-key{height:12cqw;min-height:42px}
.physical-key{border:3px solid #2e6c27;border-bottom:5px solid #0d3c16;border-radius:2.2cqw;background:radial-gradient(ellipse at 22% 7%,#a7f67e70,transparent 48%),linear-gradient(135deg,#94e875,#4ba342 74%,#37842d);box-shadow:inset 2px 3px 2px #efffbbab,inset -3px -2px 3px #215f2580,0 0 0 2px #061c0c,0 5px 5px #000b;font-size:6cqw;color:#083a17;text-shadow:0 1px 0 #b7f29455}
.physical-key.is-down{background:linear-gradient(140deg,#d1ff9b,#7bfb39);box-shadow:inset 0 2px 4px #28602b66,0 0 22px #8dff3866}
.hero-controls{gap:2cqw}.dpad{grid-template-columns:repeat(3,10cqw);grid-template-rows:repeat(3,10cqw)}.dpad .physical-key{font-size:7cqw;border-radius:1.7cqw}.dpad-center{background:linear-gradient(130deg,#75ba54,#3e7435)}
.ab-buttons{grid-template-columns:repeat(2,14cqw);gap:2.5cqw}.ab-buttons .physical-key{width:14cqw;height:14cqw;min-height:0;border-radius:50%;font-size:8cqw;background:radial-gradient(ellipse at 30% 22%,#c8ff8b,#78cf50 60%,#347b2a);box-shadow:inset 2px 3px 3px #ddffb3b0,inset -2px -4px 3px #276722,0 0 0 3px #0b2b13,0 5px 7px #000b}.action-a{transform:translateY(1.5cqw)}.action-b{transform:translateY(-1.5cqw)}
.hero-controls .speaker{display:block;width:7cqw;height:6cqw;background-size:1.4cqw 1.4cqw}
.console-actions{gap:2.4cqw;margin-top:2.2cqw}.console-actions button{font-size:1.8cqw;min-height:30px;height:5cqw;min-width:7.6cqw;border-radius:1.5cqw;padding:.5cqw 1cqw}
.asencan-brand{font-size:4.2cqw;padding:1.1cqw 0 .7cqw;text-shadow:0 1px 0 #a1d57870,0 -2px 1px #073710}
.arcade-page .game-welcome{background:radial-gradient(ellipse at center,#0c3322df,#02190bf2);gap:2cqw}.arcade-page .game-welcome h1{font-size:4cqw}.arcade-page .game-welcome p{font-size:2cqw}.arcade-page .game-welcome small{font-size:1.4cqw}
.arcade-page:fullscreen{overflow:auto;background:#020c07}.arcade-page:fullscreen .arcade-stage{margin:auto}
@media(pointer:coarse){.console-actions button{min-height:36px}.console-close,.console-fullscreen{min-height:36px;min-width:36px}}
@media(prefers-reduced-motion:reduce){.physical-key.is-down,.action-a,.action-b{transform:none}}
/* V2.7 Rev1: no Android/iOS browser callout over either console's controls. */
.arcade-console,.arcade-console *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.arcade-console{touch-action:none}
.arcade-console button,.arcade-console canvas{touch-action:none;-webkit-tap-highlight-color:transparent}

/* V2.7 Rev2: one portrait console in every orientation. */
.arcade-page .arcade-stage{width:var(--console-fit,min(96vw,580px));margin-inline:auto;max-width:580px}
.arcade-console{display:block;position:relative}
.mcv-keyboard-guide{margin:12px 0;padding:12px 14px;border:1px solid #517545;border-radius:12px;background:#10271b;color:#d8eccb;font:13px/1.7 system-ui,sans-serif;user-select:text}
.mcv-keyboard-guide strong{display:block;color:#e8ffc9}.mcv-keyboard-guide kbd{display:inline-block;padding:1px 5px;border:1px solid #638854;border-radius:4px;background:#203f25;color:#f1ffdd;font:600 12px monospace}
