@font-face{font-family:"Nunito Fallback";src:local("Arial"),local("Helvetica");size-adjust:103%;ascent-override:98%;descent-override:34%;line-gap-override:0%}
@font-face{font-family:"Space Mono Fallback";src:local("Courier New"),local("Courier");size-adjust:102%;ascent-override:110%;descent-override:35%;line-gap-override:0%}
:root{--bg:#0d0d14;--surface:#171720;--surface2:#1e1e2a;--surface3:#252534;--border:#2c2c3e;--border2:#3a3a52;--text:#eeeef8;--text-muted:#d2d2ff;--text-dim:#bebeff;--accent:#c084fc;--accent2:#fb7185;--correct:#4ade80;--present:#facc15;--absent:#2d2d42;--absent-text:#8a8ab0;--too-high:#f87171;--too-low:#60a5fa;--equal:#4ade80;--tile-bg:#1a1a26;--tile-border:#323248;--tile-border-active:#c084fc;--tile-filled:#22223a;--sep-color:#4a4a68;--key-bg:#202030;--key-hover:#2a2a40;--key-text:#d0d0f0;--modal-bg:#111119;--overlay:#000000d1;--shadow:0 20px 60px #0009;--r-sm:8px;--r:12px;--r-lg:20px;--ff-disp:Nunito,"Nunito Fallback",system-ui,sans-serif;--ff-mono:"Space Mono","Space Mono Fallback",ui-monospace,Consolas,monospace;--ff-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--tile-w:clamp(30px,9.5vw,50px);--tile-h:clamp(28px,7.5vw,40px);--grid-gap:clamp(3px,.8vh,6px);--key-h:clamp(42px,11vw,56px);--key-h-wide:clamp(48px,12vw,62px)}
[data-theme="light"]{--bg:#f0f0fa;--surface:#fff;--surface2:#f4f4ff;--surface3:#e8e8f8;--border:#d4d4e8;--border2:#bbbbd4;--text:#08081d;--text-muted:#113;--text-dim:#060642;--tile-bg:#fafaff;--tile-border:#c8c8e0;--tile-filled:#ebebff;--sep-color:#9090c0;--key-bg:#e0e0f4;--key-hover:#d4d4ee;--key-text:#222240;--modal-bg:#f8f8ff;--overlay:#00001499;--absent:#cccce0;--absent-text:#5a5a7a;--shadow:0 20px 60px #00003c2e;--too-high:#c73a3a;--too-low:#2563c9;--equal:#15803d}
[data-contrast="high"]{--correct:#0f4;--present:#fe0;--absent:#334;--absent-text:#aab;--too-high:#f33;--too-low:#29f}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--ff-body);display:flex;flex-direction:column;align-items:center;overflow-x:hidden;transition:background-color .3s,color .3s}
body::before{content:"";position:fixed;top:-30%;left:50%;transform:translateX(-50%);width:600px;height:400px;pointer-events:none;z-index:0;background:radial-gradient(ellipse,#c084fc0f 0%,transparent 70%)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app-frame{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;flex-shrink:0;position:relative;z-index:1}
header{width:100%;max-width:580px;min-height:clamp(54px,8vh,68px);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(6px,1.5vh,12px) clamp(10px,4vw,20px);border-bottom:1px solid var(--border);flex-shrink:0;position:relative;z-index:1}
.logo-wrap{display:flex;flex-direction:column;gap:2px;user-select:none;min-width:0}
.logo{display:flex;align-items:center;gap:3px;line-height:1.1}
.logo-cake{font-size:clamp(16px,4vw,22px);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;flex-shrink:0}
.logo-text{font-family:var(--ff-disp);font-weight:900;font-size:clamp(20px,5vw,28px);line-height:1.1;letter-spacing:-.5px;background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap}
.logo-sub{font-family:var(--ff-mono);font-size:clamp(7px,1.8vw,9px);line-height:1.3;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-right{display:flex;gap:6px;align-items:center;flex-shrink:0}
.icon-btn{width:clamp(36px,9vw,40px);height:clamp(36px,9vw,40px);border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background-color .2s,color .2s,transform .1s;font-size:clamp(14px,3.6vw,16px);flex-shrink:0;touch-action:manipulation}
.icon-btn:hover{border-color:var(--accent);color:var(--text);background:var(--surface3)}
.icon-btn:active{transform:scale(.92)}
.mode-pill{font-family:var(--ff-mono);font-size:clamp(8px,1.9vw,10px);letter-spacing:1px;min-height:36px;padding:0 clamp(8px,2vw,12px);border-radius:20px;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s;text-transform:uppercase;white-space:nowrap;flex-shrink:0;touch-action:manipulation}
.mode-pill:hover{border-color:var(--accent);color:var(--accent)}
.mode-pill.daily{background:#c084fc1a;border-color:var(--accent);color:var(--accent)}
#stopwatch{font-family:var(--ff-mono);font-size:clamp(9px,2.2vw,11px);color:var(--accent);padding:4px 8px;background:var(--surface2);border-radius:20px;border:1px solid var(--border);display:none;flex-shrink:0;min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
#stopwatch.visible{display:block}
main{flex:1;width:100%;max-width:580px;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:clamp(4px,1.5vh,10px) clamp(8px,3vw,16px) clamp(4px,1.5vh,8px);gap:clamp(4px,1.2vh,8px);position:relative;z-index:1}
#status-bar{flex-shrink:0;width:100%;height:30px;text-align:center;font-family:var(--ff-mono);font-size:clamp(9px,2.2vw,11px);color:var(--text-muted);letter-spacing:1.2px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hint-pill{display:inline-block;max-width:100%;padding:5px 14px;border-radius:20px;font-weight:700;font-size:clamp(9px,2vw,11px);letter-spacing:1px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint-high{background:#f8717126;color:var(--too-high);border:1px solid #f871714d}
.hint-low{background:#60a5fa26;color:var(--too-low);border:1px solid #60a5fa4d}
.hint-win{background:#4ade8026;color:var(--equal);border:1px solid #4ade804d}
#format-label{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:14px}
.fmt-part,.fmt-sep{font-family:var(--ff-mono);font-size:clamp(8px,1.8vw,10px);color:var(--text-dim);letter-spacing:1px}
.fmt-sep{padding:0 2px}
#grid-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}
#grid{display:flex;flex-direction:column;gap:var(--grid-gap);width:100%;max-width:500px;height:calc(8 * var(--tile-h) + 7 * var(--grid-gap));flex-shrink:0}
.row{display:flex;align-items:center;justify-content:center;height:var(--tile-h)}
.sep-display{font-family:var(--ff-mono);font-weight:700;font-size:clamp(16px,4.5vw,28px);color:var(--sep-color);padding:0 clamp(2px,.8vw,6px);flex-shrink:0;line-height:1;user-select:none}
.tile-group{display:flex;gap:clamp(2px,.6vw,4px)}
.tile{width:var(--tile-w);height:var(--tile-h);border-radius:var(--r-sm);border:2px solid var(--tile-border);background:var(--tile-bg);display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:clamp(14px,4vw,22px);font-weight:700;color:var(--text);user-select:none;transition:border-color .15s,background-color .15s}
.tile.active-group{border-color:var(--tile-border-active);background:var(--tile-filled)}
.tile.filled{border-color:var(--border2);background:var(--tile-filled)}
.tile.pop{animation:tilePop .12s cubic-bezier(.34,1.56,.64,1)}
.tile.correct{background:var(--correct);border-color:var(--correct);color:#0d1a0d}
.tile.present{background:var(--present);border-color:var(--present);color:#1a1500}
.tile.absent{background:var(--absent);border-color:var(--absent);color:var(--absent-text)}
.tile.flip{animation:tileFlip .4s ease forwards}
@keyframes tilePop {
0%{transform:scale(1)}
60%{transform:scale(1.15)}
100%{transform:scale(1)}
}
@keyframes tileFlip {
0%{transform:rotateX(0);opacity:1}
45%{transform:rotateX(-90deg);opacity:.3}
55%{transform:rotateX(-90deg);opacity:.3}
100%{transform:rotateX(0);opacity:1}
}
@keyframes rowShake {
0%,100%{transform:translateX(0)}
15%{transform:translateX(-7px)}
30%{transform:translateX(7px)}
45%{transform:translateX(-5px)}
60%{transform:translateX(5px)}
75%{transform:translateX(-3px)}
90%{transform:translateX(3px)}
}
.shake{animation:rowShake .45s ease}
@keyframes rowBounce {
0%,100%{transform:translateY(0)}
25%{transform:translateY(-10px)}
50%{transform:translateY(-5px)}
75%{transform:translateY(-8px)}
}
.bounce{animation:rowBounce .65s ease}
#keyboard{width:100%;max-width:480px;display:flex;flex-direction:column;gap:clamp(4px,1vh,6px);flex-shrink:0}
.key-row{display:flex;justify-content:center;gap:clamp(3px,.8vw,5px)}
#krow-1{height:var(--key-h)}
#krow-2{height:var(--key-h-wide)}
.key{font-family:var(--ff-mono);font-weight:700;font-size:clamp(12px,3.5vw,17px);min-width:clamp(24px,7vw,52px);height:var(--key-h);border-radius:var(--r-sm);border:1px solid var(--border);background:var(--key-bg);color:var(--key-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s;user-select:none;padding:0 4px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative;overflow:hidden}
.key::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .1s;border-radius:inherit}
.key:active::after{opacity:.08}
.key:hover:not([data-state]){background:var(--key-hover);border-color:var(--border2)}
.key.wide{min-width:clamp(64px,17vw,86px);height:var(--key-h-wide);font-size:clamp(12px,3.2vw,16px)}
.key[data-state="correct"]{background:var(--correct);border-color:var(--correct);color:#0d1a0d}
.key[data-state="present"]{background:var(--present);border-color:var(--present);color:#1a1500}
.key[data-state="absent"]{background:var(--absent);border-color:var(--absent);color:var(--absent-text)}
#ad-slot{width:100%;max-width:760px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px 32px;position:relative;z-index:1}
.ad-label{font-family:var(--ff-mono);font-size:9px;line-height:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted)}
.ad-unit{width:300px;height:250px;max-width:100%;background:var(--surface2);border-radius:var(--r-sm);overflow:hidden;display:block}
#ad-desktop{display:none;width:728px;height:90px}
@media(min-width:1024px) {
#ad-mobile{display:none}
#ad-desktop{display:block}
}
.overlay{position:fixed;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s linear .25s;padding:16px}
.overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.modal{background:var(--modal-bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(18px,4vh,28px) clamp(18px,5vw,28px);width:100%;max-width:400px;max-height:90vh;max-height:90dvh;overflow-y:auto;box-shadow:var(--shadow);transform:translateY(16px) scale(.97);transition:transform .25s cubic-bezier(.34,1.2,.64,1),opacity .25s;opacity:0}
.overlay.open .modal{transform:translateY(0) scale(1);opacity:1}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(14px,3vh,22px)}
.modal-title{font-family:var(--ff-disp);font-weight:900;font-size:clamp(17px,4.5vw,22px);letter-spacing:-.3px}
.close-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:background-color .15s,color .15s;flex-shrink:0}
.close-x:hover{background:var(--surface3);color:var(--text)}
.setting{display:flex;justify-content:space-between;align-items:flex-start;padding:clamp(10px,2.5vh,14px) 0;border-bottom:1px solid var(--border);gap:14px}
.setting:last-child{border-bottom:none}
.setting-info{flex:1}
.setting-name{font-weight:600;font-size:clamp(13px,3.3vw,15px);color:var(--text);margin-bottom:3px}
.setting-desc{font-size:clamp(11px,2.6vw,12px);color:var(--text-muted);line-height:1.45}
.toggle-sw{width:46px;height:26px;border-radius:13px;background:var(--border2);border:none;cursor:pointer;position:relative;transition:background-color .2s;flex-shrink:0;margin-top:2px}
.toggle-sw::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s cubic-bezier(.34,1.4,.64,1);box-shadow:0 2px 6px #0000004d}
.toggle-sw.on{background:var(--accent)}
.toggle-sw.on::after{left:23px}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:clamp(14px,3vh,20px)}
.stat-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:clamp(8px,2vh,12px) 6px;text-align:center}
.stat-val{font-family:var(--ff-mono);font-size:clamp(20px,5vw,28px);font-weight:700;color:var(--text);line-height:1}
.stat-lbl{font-size:clamp(8px,2vw,10px);color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-top:4px}
.dist-title{font-family:var(--ff-disp);font-size:clamp(11px,2.8vw,13px);font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.dist-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dist-idx{font-family:var(--ff-mono);font-size:11px;color:var(--text-muted);width:14px;text-align:right;flex-shrink:0}
.dist-track{flex:1;height:20px;background:var(--surface2);border-radius:5px;overflow:hidden;border:1px solid var(--border)}
.dist-bar{height:100%;border-radius:5px;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;font-family:var(--ff-mono);font-size:10px;color:#111;min-width:22px;background:var(--accent);transition:width .6s cubic-bezier(.34,1,.64,1)}
.dist-bar.win-bar{background:var(--correct)}
#share-text-box{font-family:var(--ff-mono);font-size:13px;line-height:1.7;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:12px;white-space:pre;overflow-x:auto;margin:12px 0 0;text-align:center;letter-spacing:1px;display:none;user-select:all}
.modal-btn{width:100%;min-height:44px;padding:clamp(11px,2.5vh,14px);border-radius:var(--r);border:none;font-family:var(--ff-disp);font-size:clamp(13px,3.3vw,15px);font-weight:800;letter-spacing:.4px;cursor:pointer;transition:transform .2s,filter .2s;margin-top:8px}
.modal-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;box-shadow:0 4px 20px #c084fc4d}
.modal-btn.secondary{background:var(--surface2);border:1px solid var(--border);color:var(--text)}
.modal-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.modal-btn:active{transform:translateY(0)}
.howto-p{font-size:clamp(12px,3vw,14px);color:var(--text-muted);line-height:1.6;margin-bottom:12px}
.howto-p.small{font-size:12px}
.howto-p strong{color:var(--text)}
.example-date{display:flex;align-items:center;justify-content:center;margin:10px 0 4px}
.ex-tile{width:clamp(26px,8vw,36px);height:clamp(26px,7.5vw,34px);border-radius:6px;border:2px solid var(--tile-border);display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:clamp(12px,3.5vw,16px);font-weight:700;color:var(--text)}
.ex-tile.correct{background:var(--correct);border-color:var(--correct);color:#0d1a0d}
.ex-tile.present{background:var(--present);border-color:var(--present);color:#1a1500}
.ex-tile.absent{background:var(--absent);border-color:var(--absent);color:var(--absent-text)}
.ex-sep{font-family:var(--ff-mono);font-size:clamp(14px,4vw,22px);color:var(--sep-color);padding:0 4px}
.legend{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.legend.tight{margin-top:8px}
.legend-item{display:flex;align-items:center;gap:10px}
.leg-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.leg-dot.correct{background:var(--correct)}
.leg-dot.present{background:var(--present)}
.leg-dot.absent{background:var(--absent)}
.leg-dot.high{background:var(--too-high)}
.leg-dot.low{background:var(--too-low)}
.leg-dot.equal{background:var(--equal)}
.leg-txt{font-size:clamp(11px,2.8vw,13px);color:var(--text-muted);line-height:1.4}
.leg-txt strong{color:var(--text)}
#toast{position:fixed;top:clamp(60px,12vh,80px);left:50%;transform:translateX(-50%) translateY(-8px);background:var(--text);color:var(--bg);font-family:var(--ff-mono);font-size:clamp(11px,2.8vw,13px);font-weight:700;letter-spacing:.5px;padding:10px 20px;border-radius:30px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.34,1.2,.64,1);z-index:999;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
@media (prefers-reduced-motion:reduce) {
*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
h1.logo-text{margin:0}
:root[data-motion="reduced"] *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
#reset-stats{margin-top:14px}