:root{--bg: #0e0f16;--panel: #171926;--text: #e8e9f1;--muted: #8b8fa8;--accent: #7c6cf0;--accent-hover: #9586ff;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{position:relative;height:100%;display:grid;place-items:center}canvas{display:block;max-width:100vw;max-height:100vh}.overlay{position:absolute;min-width:320px;max-width:92vw;padding:28px 32px;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid #2a2d42;border-radius:14px;box-shadow:0 20px 60px #00000080;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.hidden{display:none!important}h1{margin:0;font-size:40px;letter-spacing:.04em}h2{margin:0;font-size:26px}.tagline,.hint,.best{margin:0;color:var(--muted)}.hint{max-width:300px;font-size:13px}.big{margin:0;font-size:44px;font-variant-numeric:tabular-nums;font-weight:700}#result-detail{margin:0;color:var(--muted)}button{font:inherit;color:var(--text);background:#252839;border:1px solid #343852;border-radius:8px;padding:9px 18px;cursor:pointer}button:hover{background:#2e3247}button.primary{background:var(--accent);border-color:var(--accent);font-weight:600}button.primary:hover{background:var(--accent-hover)}button.link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:4px}.row{display:flex;gap:10px}.controls{border-collapse:collapse;font-size:13px;color:var(--muted);margin-top:4px}.controls td{padding:2px 10px;text-align:left}.controls td:last-child{color:var(--text)}label{display:flex;flex-direction:column;gap:4px;width:280px;text-align:left;font-size:14px}label output{color:var(--muted)}.setting-name{font-weight:600}.setting-help{color:var(--muted);font-size:12px}#settings label{width:320px}input[type=range]{width:100%;accent-color:var(--accent)}.tables{align-items:flex-start;gap:24px}.controls th{padding:2px 10px;text-align:left;color:var(--text);font-size:13px}.hint.wide{max-width:560px}.segmented{display:flex}.segmented button{border-radius:0;padding:6px 12px;font-size:13px;margin-left:-1px}.segmented button:first-child{border-radius:8px 0 0 8px;margin-left:0}.segmented button:last-child{border-radius:0 8px 8px 0}.segmented button.selected{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;position:relative}.online-pick input{font:inherit;color:var(--text);background:#11131d;border:1px solid #343852;border-radius:8px;padding:8px 10px}#room-code{width:0;flex:1;min-width:64px;text-transform:uppercase;letter-spacing:.15em;text-align:center}#lobby-code{letter-spacing:.2em;-webkit-user-select:all;user-select:all}.account-bar{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}#account-status strong{color:var(--text)}#account-form{display:flex;flex-direction:column;align-items:center;gap:12px}#account-form input,#region{font:inherit;color:var(--text);background:#11131d;border:1px solid #343852;border-radius:8px;padding:8px 10px}.error{margin:0;min-height:1.2em;color:#ff8a80;font-size:14px;max-width:300px}.rating-change{margin:0;font-size:18px;font-weight:600}.rating-change .up{color:#7ddc8a}.rating-change .down{color:#ff8a80}h3{margin:4px 0 6px;font-size:15px;color:var(--muted);font-weight:600}.history{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.history td,.history th{padding:3px 8px;text-align:left}.history th{color:var(--muted);font-weight:500}.history .win{color:#7ddc8a}.history .loss{color:#ff8a80}.history button{padding:2px 8px;font-size:12px}#profile .tables>div{max-height:46vh;overflow-y:auto}body{transition:background-color .3s}.pick-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:620px}.pick-grid button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;font-size:12px;min-width:70px}.pick-grid button.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:#2a2550}.pick-grid button:disabled{opacity:.45;cursor:not-allowed}.pick-grid img{width:64px;height:77px}.pick-grid canvas{width:112px;height:32px;image-rendering:auto}.pick-grid .lock{color:var(--muted);font-size:11px;max-width:120px}label.check{flex-direction:row;align-items:center;gap:8px;width:auto}.keymap{border-collapse:collapse;font-size:14px}.keymap td{padding:4px 8px;text-align:left}.keymap td:first-child{color:var(--muted)}.keymap button{padding:3px 10px;font-size:13px;margin-right:4px}.keymap button.key:hover{background:#5a2333;border-color:#ff8a80;text-decoration:line-through}.keymap button.listening{background:var(--accent);border-color:var(--accent)}.tip{position:absolute;top:12px;left:50%;transform:translate(-50%);width:min(560px,92vw);padding:14px 20px;background:color-mix(in srgb,var(--panel) 95%,transparent);border:1px solid var(--accent);border-radius:12px;box-shadow:0 10px 40px #00000080;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.tip.hidden{display:none}.tip h2{font-size:20px}.tip p{margin:0}.tip .step{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.tip.done{animation:pop .35s ease-out}@keyframes pop{0%{transform:translate(-50%) scale(1.06)}to{transform:translate(-50%) scale(1)}}.overlay{max-height:96vh;overflow-y:auto}.menu{width:min(900px,94vw);gap:18px}.menu-head{display:flex;flex-direction:column;align-items:center;gap:6px}.account-bar{justify-content:center;flex-wrap:wrap}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}.card{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:16px;background:#12141f;border:1px solid #262a3d;border-radius:12px;text-align:left}.card h3{margin:0 0 4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}.card .stat{margin:-2px 0 2px;font-size:13px;color:var(--muted)}.card .field{display:flex;flex-direction:column;gap:6px}.card .label{font-size:13px;color:var(--muted)}.card .pair{display:flex;gap:8px}.card .pair>button{flex:1;padding-left:10px;padding-right:10px;white-space:nowrap}.card .divider{font-size:12px;color:var(--muted);text-align:center}.card input:not(#room-code),.card select{width:100%}#bot-levels{flex-direction:column}#bot-levels button{margin:-1px 0 0;border-radius:0;text-align:left}#bot-levels button:first-child{margin-top:0;border-radius:8px 8px 0 0}#bot-levels button:last-child{border-radius:0 0 8px 8px}.menu-foot{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}.menu-foot button.link{font-size:14px;text-decoration:none}.menu-foot button.link:hover{color:var(--text)}#language{font:inherit;font-size:14px;color:var(--muted);background:transparent;border:1px solid #343852;border-radius:8px;padding:3px 6px;cursor:pointer}#language option{background:var(--panel);color:var(--text)}.reference{width:100%;border-top:1px solid #262a3d;padding-top:12px}.reference summary{cursor:pointer;color:var(--muted);font-size:14px}.reference summary:hover{color:var(--text)}.reference[open] summary{margin-bottom:12px}.reference .tables{justify-content:center;flex-wrap:wrap}.reference .hint{margin:12px auto 0}@media(max-width:760px){.modes{grid-template-columns:1fr}.menu{padding:20px 16px}}#customize h3{margin:6px 0 0}@media(min-width:1100px){.tip{top:50%;left:max(16px,calc(50% - 600px));transform:translateY(-50%);width:270px}@keyframes pop{0%{transform:translateY(-50%) scale(1.06)}to{transform:translateY(-50%) scale(1)}}}