:root{color-scheme:light;font-family:Malgun Gothic,system-ui,sans-serif;color:#24213c;background:#efe8dc;font-synthesis:none;--ink: #24213c;--violet: #684cff;--mint: #10a986;--coral: #f06f68;--cream: #fffaf0}*{box-sizing:border-box}html,body,#app{min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.85),transparent 28rem),repeating-linear-gradient(125deg,transparent 0 72px,rgba(45,39,66,.035) 73px 74px),#efe8dc}button{font:inherit}button:focus-visible{outline:4px solid #ffcf45;outline-offset:4px}[hidden]{display:none!important}.app-shell{width:min(100%,1440px);min-height:100vh;margin:0 auto}.menu-screen{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) minmax(330px,.8fr);align-content:center;gap:22px 8vw;min-height:100vh;padding:7vh clamp(24px,7vw,110px);overflow:hidden}.menu-screen:before,.menu-screen:after{position:absolute;content:"";border-radius:999px;pointer-events:none}.menu-screen:before{width:44vw;height:44vw;min-width:500px;min-height:500px;right:-18vw;top:-18vw;border:90px solid rgba(104,76,255,.1)}.menu-screen:after{width:240px;height:240px;left:-130px;bottom:8%;background:var(--coral);opacity:.16}.eyebrow{margin:0;color:var(--coral);font:700 .72rem/1 system-ui,sans-serif;letter-spacing:.25em}h1,h2{margin:0;font-family:Impact,Arial Black,sans-serif;font-weight:900;line-height:.84;letter-spacing:-.045em;text-transform:uppercase}h1{grid-column:1;font-size:clamp(4.7rem,10.2vw,10rem)}h1 em{color:var(--violet);font-style:normal}.tagline{grid-column:1;max-width:430px;margin:0;font-size:clamp(1rem,1.8vw,1.35rem)}.brand-mark{display:flex;gap:8px;align-items:end;height:35px}.brand-mark span{width:12px;height:12px;border-radius:999px;background:var(--violet)}.brand-mark span:nth-child(2){height:27px;background:var(--mint)}.brand-mark span:nth-child(3){height:18px;background:var(--coral)}.menu-actions{grid-column:2;grid-row:2 / span 3;display:grid;align-content:center;gap:12px}button{border:2px solid var(--ink);border-radius:16px;color:var(--ink);background:#fffaf0c7;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}button:hover{transform:translateY(-3px);box-shadow:6px 7px 0 var(--ink)}button:active{transform:translateY(1px);box-shadow:2px 3px 0 var(--ink)}button.primary{display:grid;grid-template-columns:46px 1fr;gap:2px 16px;padding:20px 24px;text-align:left}button.primary>span{grid-row:1 / span 2;align-self:center;color:var(--violet);font:900 .78rem/1 system-ui,sans-serif}button.primary strong{font:900 clamp(1.25rem,2.2vw,1.75rem)/1 Impact,"Arial Black",sans-serif}button.primary small{opacity:.62}button.primary:first-child{color:#fff;background:var(--violet)}button.primary:first-child>span{color:#ffe36e}button.is-disabled{opacity:.5;cursor:not-allowed}.secondary-actions{display:flex;gap:10px}.secondary-actions button,.back-button,.game-toolbar button,.result-overlay button{padding:10px 16px}.copyright-note{align-self:end;margin:0;color:#24213c80;font-size:.8rem}.difficulty-screen,.online-screen,.lobby-screen{min-height:100vh;padding:clamp(28px,6vw,90px)}.online-screen{display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,.72fr);align-content:center;gap:30px 8vw}.online-screen>.back-button{position:absolute;top:30px;left:clamp(28px,6vw,90px)}.online-screen h2,.lobby-screen h2{margin:24px 0;font-size:clamp(3.6rem,8vw,7rem)}.online-form{display:grid;gap:14px;padding:clamp(22px,4vw,42px);border:2px solid var(--ink);border-radius:22px;background:#fffaf0cc;box-shadow:10px 12px 0 var(--ink)}.online-form label{display:grid;gap:7px;font-weight:700}.online-form input{width:100%;padding:14px 16px;border:2px solid var(--ink);border-radius:12px;color:var(--ink);background:#fff;font:inherit;text-transform:none}.online-form input[name=roomCode]{font:900 1.3rem/1 Impact,Arial Black,sans-serif;letter-spacing:.2em;text-transform:uppercase}.join-row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px}.join-row button,.ready-button{padding:14px 22px}.form-error{min-height:1.4em;margin:0;color:#bd3946;font-weight:700}.lobby-screen{text-align:center}.room-code-card{width:min(560px,100%);margin:35px auto;padding:25px;border:2px solid var(--ink);border-radius:20px;background:var(--violet);color:#fff;box-shadow:9px 10px 0 var(--ink)}.room-code-card>small{display:block;letter-spacing:.18em}.room-code-card>strong{display:block;margin:12px 0 18px;font:900 clamp(3rem,8vw,6rem)/1 Impact,"Arial Black",sans-serif;letter-spacing:.12em}.room-code-card button{margin:4px;padding:9px 14px}.lobby-players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;width:min(800px,100%);margin:0 auto}.lobby-players article{display:grid;gap:8px;min-height:135px;padding:24px;border:2px solid var(--ink);border-radius:18px;background:#eee8ff}.lobby-players article:last-child{background:#ddf7ed}.lobby-players article>span{color:var(--violet);font:900 .72rem/1 system-ui,sans-serif;letter-spacing:.16em}.lobby-players article>strong{font-size:1.35rem}.connection-state{margin:25px 0 12px}.ready-button{min-width:220px;color:#fff;background:var(--mint);font-weight:800}.difficulty-screen h2{max-width:700px;margin:30px 0 50px;font-size:clamp(4rem,9vw,8rem)}.difficulty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.difficulty-grid button{min-height:260px;padding:28px;text-align:left}.difficulty-grid strong{display:block;margin:55px 0 14px;font:900 2.1rem/1 Impact,Arial Black,sans-serif}.difficulty-grid small{line-height:1.7}.level-dot{display:block;width:28px;height:28px;border-radius:50%;background:#63d49f}.level-dot.intermediate{background:#ffb53d}.level-dot.expert{background:#f06f68}.game-screen{min-height:100vh;padding:18px clamp(12px,3vw,42px) 24px;background:#28243d;color:#fff}.game-toolbar,.scoreboard,.key-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1180px,100%);margin:0 auto}.game-toolbar button{border-color:#ffffff73;color:#fff;background:#ffffff14}.mode-pill{padding:8px 14px;border-radius:999px;background:#ffffff1a;font-size:.85rem}.toolbar-actions{display:flex;gap:8px}.scoreboard{justify-content:center;padding:10px 0 12px}.scoreboard>div{display:flex;align-items:center;gap:14px}.scoreboard>div:last-child{flex-direction:row-reverse}.scoreboard small{opacity:.65;font:700 .7rem/1 system-ui,sans-serif;letter-spacing:.08em}.scoreboard strong{min-width:55px;font:900 clamp(2.5rem,5vw,4.4rem)/1 Impact,"Arial Black",sans-serif;text-align:center}.scoreboard>span{min-width:120px;padding:8px;color:#ffe36e;text-align:center;font:700 .72rem/1 system-ui,sans-serif;letter-spacing:.08em}.canvas-frame{position:relative;width:min(1180px,100%);margin:0 auto;overflow:hidden;border:4px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 16px 50px #00000047}canvas{display:block;width:100%;aspect-ratio:16 / 9;background:#98e3f2}.pause-overlay,.result-overlay{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;background:#1f1c34bf;backdrop-filter:blur(8px)}.pause-overlay strong,.result-overlay>strong{font:900 clamp(2.5rem,6vw,5rem)/1 Impact,"Arial Black",sans-serif}.result-overlay>div{display:flex;justify-content:center;gap:10px}.result-overlay button.primary.compact{display:block;padding:12px 22px;color:var(--ink);background:#ffe36e}.key-strip{padding-top:12px;color:#ffffff9e;font-size:.8rem}.key-strip b{color:#ffe36e}.key-strip [data-role=left-controls]:first-child{color:#ffffffe6}.touch-controls{display:none;justify-content:center;gap:8px;padding:14px 0 0}.touch-controls button{width:52px;height:52px;border-color:#ffffff80;color:#fff;background:#ffffff1f;touch-action:none}.touch-controls button.attack{width:70px;color:var(--ink);background:#ffe36e}dialog{width:min(620px,calc(100% - 32px));padding:34px;border:2px solid var(--ink);border-radius:20px;color:var(--ink);background:var(--cream);box-shadow:10px 12px 0 var(--ink)}dialog::backdrop{background:#24213ca8;backdrop-filter:blur(5px)}dialog h2{margin:16px 0 30px;font-size:3.5rem}.dialog-close{float:right;width:42px;height:42px;font-size:1.5rem}.control-guide{display:grid;grid-template-columns:1fr 1fr;gap:16px}.control-guide section{padding:16px;border-radius:14px;background:#eee8ff}.control-guide section:last-child{background:#ddf7ed}kbd{display:inline-block;min-width:32px;margin:2px;padding:5px 7px;border:1px solid var(--ink);border-radius:7px;background:#fff;box-shadow:0 3px 0 var(--ink);text-align:center}.setting-row{display:flex;justify-content:space-between;width:100%;margin:10px 0;padding:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(pointer:coarse),(max-width:700px){.touch-controls{display:flex}}@media(max-width:800px){.menu-screen{grid-template-columns:1fr;align-content:start;padding-top:8vh}.menu-actions{grid-column:1;grid-row:auto}.difficulty-grid{grid-template-columns:1fr}.online-screen{grid-template-columns:1fr;padding-top:100px}.difficulty-grid button{min-height:150px}.difficulty-grid strong{margin-top:24px}.toolbar-actions button:nth-child(-n+2){display:none}.key-strip{display:none}.game-screen{display:grid;align-content:center}.scoreboard small{display:none}}@media(max-width:520px){.menu-screen{padding-inline:18px}h1{font-size:4.2rem}.game-toolbar{font-size:.78rem}.mode-pill{display:none}.scoreboard{padding-block:5px}.scoreboard>span{min-width:85px}.control-guide,.lobby-players{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}