*{box-sizing:border-box}body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #497ef1;outline-offset:4px}button:active{transform:translateY(1px)}[hidden]{display:none!important}.screen{min-height:100dvh}.home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.black{background:#111;color:white;font-size:13px;letter-spacing:2px;font-weight:700;height:52px;padding:0 30px}.home .black{width:204px}.black:hover{background:#333}.text{background:none;color:inherit;font-size:11px;font-weight:700;letter-spacing:1.2px;padding:10px 0}.text:hover{color:#777}.settings-panel{max-width:470px;margin:auto;padding:55px 25px}header{display:flex;justify-content:space-between;align-items:center}h1{font-size:18px;letter-spacing:2px;margin:0}.muted{font-size:12px;color:#888;margin:12px 0 38px}.section-title{font-size:10px;font-weight:700;letter-spacing:1.6px;margin:30px 0 12px;display:flex;justify-content:space-between}.section-title span{font-weight:400;letter-spacing:0;color:#999}.row{display:flex;align-items:center;justify-content:space-between;min-height:43px;border-bottom:1px solid #eee;font-size:13px}.key{min-width:100px;background:#f4f4f4;border:1px solid #e8e8e8;padding:6px 12px;font:11px monospace}.key.waiting{background:#111;color:white}select{border:1px solid #ddd;background:white;padding:6px;font-size:12px}input[type=number]{width:60px;border:0;background:#f5f5f5;padding:7px;text-align:right}input[type=checkbox]{accent-color:#111;width:17px;height:17px}.input-wrap{font-size:11px;color:#777}.hint{font-size:11px;line-height:1.6;color:#999}.reset{margin-top:30px;color:#777}.game{display:flex;align-items:center;justify-content:center;padding:22px}.game-shell{width:576px}.game-header{margin-bottom:20px;font-size:10px;letter-spacing:2px;color:#888}.play-layout{display:grid;grid-template-columns:120px 300px 120px;gap:18px}.board-wrap{position:relative;outline:2px solid #181818;background:#fafafa;aspect-ratio:1/2}#board{width:100%;height:100%;display:block}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#969696;font-weight:700;margin-bottom:8px}.left,.right{padding-top:2px}.left canvas,.right canvas{width:100%;height:auto;display:block}.stats{padding-top:25px}.number{font-size:22px;font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.7px;margin-bottom:25px}.number small{font-size:12px;color:#aaa;letter-spacing:0}footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:10px;letter-spacing:1px}#feedback{color:#888}#overlay{position:absolute;inset:0;background:#fffffff0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px;text-align:center}#overlayTitle{font-size:25px;font-weight:700;letter-spacing:2px}#overlayDetail{font-size:12px;color:#777;line-height:1.8;margin:18px 0 28px}.keys-hint{text-align:center;font-size:10px;color:#aaa;margin:15px 0 0;line-height:1.8}.touch-controls{display:none;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:15px}.touch-controls button{padding:13px 4px;background:#f2f2f2;font-size:12px;touch-action:none;user-select:none}@media(max-width:620px){.game{padding:18px 12px;align-items:flex-start}.game-shell{max-width:450px;width:100%}.play-layout{grid-template-columns:minmax(50px,1fr) minmax(0,2.7fr) minmax(50px,1fr);gap:10px}.number{font-size:17px;margin-bottom:20px}.game-header{margin-bottom:15px}.stats{padding-top:12px}.number small{font-size:10px}.eyebrow{font-size:8px}.keys-hint{display:none}}@media(pointer:coarse){.touch-controls{display:grid}}@media(min-width:621px) and (max-height:780px){.game-shell{width:480px}.play-layout{grid-template-columns:100px 250px 100px;gap:15px}.game{padding:10px}.game-header{margin-bottom:12px}.number{margin-bottom:20px}}

/* Soft, quiet controls; gameplay stays immediate. */
@font-face{font-family:Nunito;src:url('nunito.ttf') format('truetype');font-weight:200 1000;font-style:normal;font-display:swap}
body{font-family:Nunito,'Arial Rounded MT Bold','Segoe UI',sans-serif}
button{border-radius:14px;transition:background .16s ease,box-shadow .16s ease,transform .16s ease;color:inherit}
.black{border-radius:20px;color:white;font-size:14px;letter-spacing:1.4px;box-shadow:0 3px 0 #00000018}
.black:hover{background:#292929;transform:translateY(-2px);box-shadow:0 6px 15px #00000016}
button:active,.black:active{transform:translateY(1px) scale(.97);box-shadow:none}
.home{gap:14px}.home .black{height:56px;width:210px}
.key{border-radius:12px;padding:8px 15px;min-width:108px;border:1px solid #eaeaea;background:#f5f5f6;font-family:inherit;font-size:13px;font-weight:700}
.key:hover{background:#eaeaec;transform:translateY(-1px)}.key.waiting{background:#181818}
.row{min-height:49px;font-size:14px;border-color:#f0f0f2}.section-title{font-size:11px;letter-spacing:1px}
input[type=number],select{border-radius:10px;background:#f5f5f6;border:1px solid #ededee;padding:8px;font:inherit;font-size:13px}
input[type=number]{width:76px}input:disabled{opacity:.4}.input-wrap{font-size:11px;display:flex;gap:8px;align-items:center}
.text{padding:9px 12px;border-radius:12px;letter-spacing:.8px}.text:hover{background:#f4f4f5;color:#111}
.muted,.hint{color:#777}.number{font-weight:650}.touch-controls button{border-radius:12px}
@media(prefers-reduced-motion:reduce){button{transition:none}.black:hover,button:active,.black:active{transform:none}}
:root{--page:#fff;--text:#171820;--surface:#f4f4f6;--border:#e8e8ed;--muted:#777984;--overlay:#fffffff2;--accent:#242630}
:root[data-theme=dark]{color-scheme:dark;--page:#11131a;--text:#e9eaf2;--surface:#20232e;--border:#343744;--muted:#a5a8b7;--overlay:#11131af2;--accent:#e9eaf2}
body{background:var(--page);color:var(--text)}.row{border-color:var(--border)}.key,select,input[type=number],.touch-controls button{background:var(--surface);color:var(--text);border-color:var(--border)}.text:hover,.key:hover{background:var(--border);color:var(--text)}.muted,.hint,.eyebrow,.game-header,.section-title span,#feedback,.keys-hint,#overlayDetail{color:var(--muted)}#overlay{background:var(--overlay)}.board-wrap{outline-color:var(--accent)}input[type=checkbox],input[type=range]{accent-color:var(--accent)}.home #mode{width:210px;text-align:center;margin-bottom:8px;border:0;padding:11px}.settings-panel{max-width:530px}.tabs{display:flex;gap:5px;background:var(--surface);border-radius:16px;padding:5px;margin-bottom:24px}.tabs button{flex:1;background:transparent;padding:12px;color:var(--muted);font-weight:750}.tabs button[aria-selected=true]{background:var(--page);color:var(--text);box-shadow:0 2px 6px #0000000c}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.preset{border:2px solid transparent;background:var(--surface);padding:10px 3px;font-size:12px;font-weight:700;color:var(--text)}.preset canvas{display:block;width:72px;max-width:100%;margin:0 auto 3px}.preset[aria-pressed=true]{border-color:var(--accent)}#skinPreview{width:100%;height:auto;border-radius:16px;margin-top:14px}.editor-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:14px 0}.editor-tools .key{min-width:0;padding:8px 13px}.editor-tools label{display:flex;gap:6px;align-items:center;font-size:13px}.editor-tools input[type=color]{width:34px;height:32px;border:0;padding:0;background:transparent}.editor-tools [aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px}.editor-tools .black{font-size:10px;height:38px;padding:0 17px}.key:disabled{opacity:.4;cursor:default}#pixelEditor{display:grid;grid-template-columns:repeat(16,1fr);width:100%;max-width:320px;aspect-ratio:1;margin:18px auto;background:repeating-conic-gradient(#aeb4c5 0% 25%,#ced2dd 0% 50%) 0 0/40px 40px;border:2px solid var(--border);touch-action:none;user-select:none}#pixelEditor button{border-radius:0;border:1px solid #00000012;background:transparent;padding:0;min-width:0;transition:none}#pixelEditor button:active{transform:none}#pixelEditor button:focus-visible{outline:2px solid #ff467e;outline-offset:-2px;z-index:1}.settings-panel .muted{margin-bottom:24px}@media(max-width:380px){.preset-grid{grid-template-columns:repeat(2,1fr)}.settings-panel{padding:30px 16px}}:root[data-theme=dark] .black{background:#e8eaf3;color:#161923}:root[data-theme=dark] .black:hover{background:#fff}:root[data-theme=dark] .key.waiting{background:#e8eaf3;color:#111}

.piece-picker{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.piece-picker .key{min-width:42px;padding:10px;border-bottom:5px solid var(--piece-color)}.piece-picker [aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}

.account-panel{max-width:530px}.account-panel #accountForm{display:flex;flex-direction:column;align-items:stretch;gap:14px}.account-field{display:grid;gap:8px;font-size:13px;font-weight:700;color:var(--text)}.account-field input{width:100%;height:52px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);padding:0 16px;box-shadow:inset 0 1px 2px #00000005;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.account-field input:hover{border-color:#c9cad2}.account-field input:focus{background:var(--page);border-color:#9b9da8;box-shadow:0 0 0 4px #7d809014;outline:none}.account-panel #accountForm .black,.account-panel #accountLogout{border-radius:999px;min-height:54px}.account-panel #accountSwap{align-self:center}.account-status{min-height:18px;margin-top:8px;font-size:12px;color:var(--muted);line-height:1.5}.account-status[data-error=true]{color:var(--muted)}.account-panel .hint{margin:0 0 2px}