:root{color-scheme:dark;--ink:#f5f3ff;--muted:#b5b2d0;--coral:#ff718d;--gold:#ffd166;--sky:#58c7f3;--mint:#a4f2cb;--line:#44415c}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#15172a}body{color:var(--ink);font:15px/1.45 system-ui,sans-serif;background:radial-gradient(ellipse at 10% 0,#30254c,transparent 65%),radial-gradient(ellipse at 100% 100%,#143b49,transparent 60%),#141729;overscroll-behavior:none}.app{width:100%;max-width:1000px;height:100vh;height:100dvh;margin:auto;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 44px}.brand{display:flex;align-items:center;gap:10px}h1{font-size:20px;letter-spacing:-.6px;margin:0}.logo{display:flex;gap:3px;align-items:center}.logo i{width:11px;height:11px;border-radius:50%;background:var(--coral)}.logo i:nth-child(2){background:var(--gold)}.logo i:nth-child(3){background:var(--sky)}button,select,input,textarea{font:inherit;color:var(--ink);background:#302d47;border:1px solid #57506d;border-radius:12px;padding:10px 14px;max-width:100%}button{cursor:pointer;min-height:44px;touch-action:manipulation;font-weight:600}button:hover{background:#45405e}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}button:disabled{opacity:.4;cursor:default}.icon-button{width:44px;padding:7px;font-size:23px}.primary{background:var(--mint);color:#16382c;border-color:var(--mint)}.primary:hover{background:#c5ffe3}.accent{background:var(--coral);color:#281827;border-color:var(--coral)}.accent:hover{background:#ff9cb0}.wide{display:block;width:100%;margin:10px 0;min-height:48px}.screen{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}.play-screen{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;overflow:hidden}.arena{min-width:0;min-height:0;display:grid;grid-template-rows:36px 4px minmax(0,1fr);gap:8px}.hud{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 4px}.hud small{display:block;font-size:11px;color:var(--muted)}.hud strong{font-size:16px}.hud>span{font-size:13px;color:var(--gold);white-space:nowrap}.meter{background:#38344f;border-radius:4px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--coral),var(--gold),var(--mint));border-radius:4px;transition:width .15s}.board-wrap{min-width:0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}canvas#board{display:block;width:100%;height:100%;object-fit:contain;touch-action:none}.play-controls{display:flex;flex-direction:column;justify-content:center;gap:8px}.note{margin:0;min-height:38px;font-size:13px;color:#e4dcf4;text-align:center;display:flex;align-items:center;justify-content:center;line-height:1.3}.pad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:46px 46px;gap:5px;justify-content:center}.pad button{font-size:24px;padding:4px;background:linear-gradient(#3b3655,#2c2941);box-shadow:0 2px 0 #111325}.pad .up{grid-column:2}.pad .left{grid-column:1}.play-actions{display:flex;justify-content:center;gap:8px}.play-actions button{flex:1}.resume-button{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);background:var(--mint);color:#17382e;border-color:var(--mint);white-space:nowrap}.resume-button:active{transform:translate(-50%,-49%)}h2{font-size:28px;letter-spacing:-1px;line-height:1.2;margin:10px 0}h3{margin:4px 0;font-size:18px}p{margin:10px 0}small,.muted,.status{color:var(--muted)}.status{font-size:13px;line-height:1.5;min-height:20px}.page-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;background:#1b1c32f5;backdrop-filter:blur(12px);padding:8px 12px;border-radius:14px;z-index:1;gap:12px}.page-head h2{font-size:23px;margin:0}.page-content{max-width:560px;margin:0 auto;padding:14px 6px 24px}.menu-content{max-width:420px}.menu-content label{margin-top:24px}.result-content{width:100%;max-width:450px;margin:auto;padding:12px 5px 24px;text-align:center}.result-symbol{font-size:45px;color:var(--gold);line-height:1.2}.result-content h2{font-size:32px;margin:7px 0}.result-content>small{font-size:12px}.result{margin:12px 0}.result strong{font-size:42px;line-height:1.2;color:var(--mint);display:block}.result small{display:block;color:var(--muted);font-size:13px}.result-content .muted{font-size:14px;min-height:20px}.actions{display:flex;gap:8px;margin:9px 0;flex-wrap:wrap}.actions button{flex:1;min-width:120px}.result-content .actions button{font-size:13px;min-width:140px}.result-content .wide{margin:8px 0}#submit-status:empty{display:none}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-head .status{flex:1}.panel-head button{flex:none}label{display:block;color:var(--muted);font-size:13px}select,input{width:100%;margin-top:5px;font-size:16px}.identity{display:flex;gap:8px;align-items:end;margin:15px 0}.identity label{flex:1}.personal{padding:12px;background:#34304b;border-radius:12px;font-size:14px}table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}td,th{padding:12px 6px;text-align:left;border-bottom:1px solid #3a3650;overflow-wrap:anywhere}td:first-child,th:first-child{width:60px}td:last-child,th:last-child{width:65px;text-align:right}th{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:500}.rank{color:var(--gold)}.me{color:var(--mint);background:#a4f2cb0b}.empty{font-size:14px;color:var(--muted)}.eyebrow{font-size:12px;letter-spacing:1px;color:var(--gold)}details{margin-top:20px;color:var(--muted);font-size:13px}summary{cursor:pointer;min-height:36px}.share-content{max-width:380px}#share-card{display:block;width:100%;height:auto;border:1px solid #58506d;border-radius:15px;max-height:48dvh;object-fit:contain;margin:12px 0}textarea{width:100%;min-height:100px;font-size:13px;resize:vertical}.level-list{display:grid;gap:12px}.level-button{text-align:left;display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px;gap:10px}.level-button strong{display:block;font-size:17px}.level-button small{display:block;margin-top:5px;font-weight:400;font-size:12px}.level-number{font-size:25px;color:var(--gold);font-weight:800}.lesson{padding:15px 0;border-bottom:1px solid #3b3851}.lesson-symbol{font-size:27px;color:var(--gold)}.coral{color:var(--coral)}.mint{color:var(--mint)}.lesson p{font-size:14px;color:var(--muted);margin:5px 0}.invite{flex:none;padding:8px 12px;background:#37344fee;border:1px solid #84769e;border-radius:12px;font-size:12px;line-height:1.3}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.hidden,[hidden]{display:none!important}#save-status{display:block;font-size:12px;margin-top:18px}.help-content{max-width:400px}@media(max-width:720px) and (orientation:portrait){.play-screen{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px}.play-controls{gap:6px}.note{min-height:32px}.play-actions{max-width:270px;width:100%;margin:auto}.arena{grid-template-rows:34px 4px minmax(0,1fr);gap:6px}.result-content{padding-top:6px}.result-symbol{font-size:38px}.result-content h2{font-size:29px}.result strong{font-size:37px}}@media(max-height:500px) and (orientation:landscape){.app{gap:4px;padding-top:max(5px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}.app-header{flex-basis:40px}h1{font-size:18px}.play-screen{grid-template-columns:minmax(0,1fr) 190px;gap:14px}.arena{grid-template-rows:30px 3px minmax(0,1fr);gap:5px}.play-controls{gap:5px}.note{min-height:32px;font-size:12px}.pad{grid-template-columns:repeat(3,52px);grid-template-rows:44px 44px;gap:4px}.result-content{max-width:550px}.result-symbol{display:none}.result strong{font-size:32px}.result-content h2{font-size:26px}.result-content{padding-top:2px}.share-content{max-width:340px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.header-actions{display:flex;gap:5px;align-items:center}.compact-button{min-width:44px;padding:8px;font-size:12px;white-space:nowrap}.hud-side{display:flex;flex-direction:column;align-items:flex-end;gap:1px}.rank-chip{border:0;background:transparent;padding:0 2px;min-height:18px;color:#c8bddc;font-size:11px;font-weight:500}.rank-result{background:#a4f2cb15;border:1px solid #668c7b;border-radius:12px;padding:12px;margin:10px 0;color:var(--mint);font-size:18px;font-weight:700}.personal-feedback{font-size:13px;color:var(--gold);margin:7px 0}.audio-settings{border:1px solid var(--line);border-radius:12px;margin:20px 0;padding:12px}.audio-settings label{display:flex;gap:10px;align-items:center;min-height:44px;margin:0}.audio-settings input{width:20px;height:20px;margin:0;accent-color:var(--mint)}.audio-settings legend{font-size:14px;color:var(--muted)}@media(max-width:420px){h1{font-size:16px}.brand{gap:7px}.logo{gap:2px}.logo i{width:7px;height:7px}.header-actions{gap:3px}.compact-button{font-size:11px;padding:7px}.app-header{gap:5px}}

.record-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;font-size:12px;padding:2px 4px;color:var(--gold)}.record-strip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-strip small{grid-column:1/-1;color:var(--muted);font-size:11px}#your-record{color:var(--mint)}.arena{grid-template-rows:36px 4px auto minmax(0,1fr)}@media(max-width:720px) and (orientation:portrait){.arena{grid-template-rows:34px 4px auto minmax(0,1fr)}}@media(max-height:500px) and (orientation:landscape){.arena{grid-template-rows:30px 3px auto minmax(0,1fr)}.record-strip{font-size:11px}}

.account-panel{margin:22px 0;padding:14px;border:1px solid var(--line);border-radius:12px}.account-panel h3{font-size:17px}.info-links{font-size:12px;color:var(--muted)}a{color:var(--mint)}