@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.absolute{position:absolute}.contents{display:contents}.grid{display:grid}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}:root{--bg:#0f0f0f;--surface:#1a1a1a;--surface-2:#222;--border:#2e2e2e;--text:#f0f0f0;--text-muted:#999;--text-dim:#3a3a3a;--accent:#f5a623;--accent-dim:#f5a6231f;--correct:#22c55e;--correct-bg:#22c55e26;--earlier:#f87171;--earlier-bg:#f8717126;--later:#60a5fa;--later-bg:#60a5fa26;--radius:10px;--radius-sm:6px;--radius-lg:16px;--font:"Inter", system-ui, -apple-system, sans-serif;--header-h:44px;--max-w:480px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100dvh;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-size:16px;line-height:1.5;overflow:hidden}#root{height:100dvh;overflow:hidden}button{cursor:pointer;background:0 0;border:none;font-family:inherit}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit;text-decoration:none}.app{height:100dvh;max-width:var(--max-w);flex-direction:column;margin:0 auto;display:flex;overflow:hidden}.app--loading{justify-content:center;align-items:center}.loading-text{color:var(--text-muted);letter-spacing:.05em;font-size:1rem}.app__main{flex-direction:column;flex:1;gap:5px;min-height:0;padding:0 12px;display:flex;overflow:hidden}.app__chart-zone{flex-direction:column;flex:1;min-height:0;padding-top:6px;display:flex}.app__keyboard-zone{padding-bottom:env(safe-area-inset-bottom,4px);flex-shrink:0}.app__exhausted{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.exhausted-title{color:var(--text);font-size:1.25rem;font-weight:600}.exhausted-sub{color:var(--text-muted);font-size:.95rem}.header{height:var(--header-h);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 12px;display:flex}.header__center{align-items:center;gap:0;display:flex}.header__tm{color:var(--text);perspective:200px;align-items:center;font-size:1.15rem;font-weight:700;line-height:1;display:inline-flex}.flap-char{width:20px;font-family:var(--font);font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:0;perspective:200px;justify-content:center;align-items:center;font-size:1.15rem;font-weight:800;line-height:1;display:flex}.flap-char--pulse{animation:3s ease-in-out infinite char-pulse;animation-delay:calc(var(--stagger,0s) + .5s)}@keyframes char-pulse{0%,to{opacity:1}50%{opacity:.6}}.flap-char--anim.flap-char--out{animation:.3s ease-in both flap-out;animation-delay:var(--stagger,0s)}.flap-char--anim.flap-char--in{animation:.3s ease-out both flap-in;animation-delay:var(--stagger,0s)}@keyframes flap-out{0%{opacity:1;transform:rotateX(0)}to{opacity:0;transform:rotateX(-90deg)}}@keyframes flap-in{0%{opacity:0;transform:rotateX(90deg)}to{opacity:1;transform:rotateX(0)}}.header__icon-btn{border-radius:var(--radius-sm);width:40px;height:40px;color:var(--text-muted);justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}.header__icon-btn:hover{color:var(--text);background:var(--surface)}.chart-board{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);flex-direction:column;flex:1;min-height:0;transition:border-color .1s,box-shadow .1s;display:flex;overflow:hidden}.chart-board--flash-incorrect{border-color:var(--text-muted);box-shadow:0 0 0 1px var(--text-muted);animation:.65s forwards board-flash}@keyframes board-flash{0%{opacity:1}15%{opacity:.85}to{opacity:1}}.chart-board__header{border-bottom:1px solid var(--border);background:var(--surface-2);flex-shrink:0;padding:7px 14px}.chart-board__header-text{letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-size:.6rem;font-weight:600}.chart-board__rows{flex-direction:column;flex:1;min-height:0;display:flex}.chart-row{border-bottom:1px solid var(--border);flex:1;align-items:center;min-height:0;padding:0 14px;display:flex;overflow:hidden}.chart-row:last-child{border-bottom:none}.chart-row--visible{animation:.4s cubic-bezier(.34,1.4,.64,1) both row-reveal;animation-delay:calc(var(--stagger,0) * .16s)}@keyframes row-reveal{0%{opacity:0;transform-origin:top;transform:scaleY(.4)}60%{opacity:1;transform:scaleY(1.04)}to{opacity:1;transform:scaleY(1)}}.chart-row__position{font-variant-numeric:tabular-nums;color:var(--accent);flex-shrink:0;min-width:18px;font-size:.72rem;font-weight:700}.chart-row__divider{background:var(--border);flex-shrink:0;width:1px;height:18px;margin:0 12px}.chart-row__hidden-text{color:var(--text-dim);letter-spacing:.12em;font-size:.8rem;font-weight:500}.chart-row__content{flex-direction:column;justify-content:center;gap:0;min-width:0;display:flex}.chart-row__song{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;line-height:1.3;overflow:hidden}.chart-row__artist{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.68rem;line-height:1.3;overflow:hidden}.chart-board__history{border-top:1px solid var(--border);background:var(--surface-2);flex-shrink:0}.hist-row{border-bottom:1px solid var(--border);align-items:center;gap:0;height:28px;padding:0 14px;animation:.25s both hist-slide-in;display:flex}.hist-row:last-child{border-bottom:none}.hist-row--latest{background:#ffffff08}@keyframes hist-slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.hist-row__label{color:var(--text);letter-spacing:.02em;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:40px;font-size:.75rem;font-weight:700}.hist-row__divider{background:var(--border);flex-shrink:0;width:1px;height:14px;margin:0 8px}.hist-row__signal{letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums;margin-right:4px;font-size:.72rem;font-weight:700}.hist-row__signal--correct{color:var(--correct)}.hist-row__signal--incorrect{color:var(--text-muted)}.guess-history{flex-direction:column;gap:2px;padding:4px 0;display:flex}.signal-pill{border:1px solid #0000;border-radius:20px;align-items:center;display:flex}.feedback-row{align-items:center;gap:8px;padding:4px 0;display:flex}.feedback-row--animate{animation:.25s both feedback-slide-in}@keyframes feedback-slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.feedback-row__digit-pills{align-items:center;gap:6px;display:flex}.feedback-row__correct-badge{color:var(--correct);font-size:.85rem;font-weight:700}.guesses-remaining{color:var(--text-muted);letter-spacing:.03em;padding:6px 0;font-size:.68rem;font-weight:600}.digit-pill{border:1px solid #0000;border-radius:20px;flex:none;align-items:center;gap:3px;padding:4px 8px;font-size:.8rem;font-weight:700;display:flex}.digit-pill__digit{font-variant-numeric:tabular-nums;text-align:center;min-width:10px;font-size:.85rem}.signal-pill__icon{font-size:.75rem;font-weight:800}.pill--correct{background:var(--correct-bg);border-color:var(--correct);color:var(--correct)}.pill--incorrect{background:var(--earlier-bg);border-color:var(--earlier);color:var(--earlier)}.digit-pill--mini{gap:5px;padding:5px 10px;font-size:.85rem}.numkbd{-webkit-user-select:none;user-select:none;flex-direction:column;gap:4px;display:flex}.numkbd__display{flex-direction:column;gap:3px;display:flex}.numkbd__display--shake{animation:.35s display-shake}@keyframes display-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.numkbd__display-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:stretch;gap:0;height:56px;display:flex;position:relative;overflow:hidden}.numkbd__digit-pill{font-variant-numeric:tabular-nums;color:var(--text);border:none;border-right:1px solid var(--border);cursor:pointer;background:0 0;flex:1;justify-content:center;align-items:center;min-width:0;padding:0;font-size:1.4rem;font-weight:700;transition:background .1s,color .1s;display:flex;position:relative}.numkbd__digit-pill:last-child{border-right:none}.numkbd__digit-pill--active:after{content:"";background:var(--accent);border-radius:2px;width:60%;height:3px;position:absolute;bottom:6px;left:20%}.numkbd__digit-pill--confirmed{color:var(--correct);cursor:default}.numkbd__digit-pill--filled{color:var(--text)}.numkbd__placeholder{color:var(--text-dim);font-size:.85rem;font-weight:400}.numkbd__guess-badge{color:var(--text-muted);letter-spacing:.06em;white-space:nowrap;flex-shrink:0;align-self:center;padding:0 10px;font-size:.6rem;font-weight:700}.numkbd__error{color:var(--earlier);text-align:center;font-size:.72rem;font-weight:500}.numkbd__grid{flex-direction:column;gap:4px;display:flex}.numkbd__row{gap:4px;display:flex}.numkbd__key{border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);height:38px;color:var(--text);font-size:1.05rem;font-weight:600;font-family:var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex:1;justify-content:center;align-items:center;transition:background .1s,transform 80ms;display:flex}.numkbd__key:active:not(:disabled){background:var(--surface-2);transform:scale(.94)}.numkbd__key--action{background:var(--surface-2);font-size:.95rem}.numkbd__key--enter{background:var(--accent);color:#000;border-color:var(--accent);font-size:1rem;font-weight:800}.numkbd__key--enter:active:not(:disabled){background:var(--accent);opacity:.85}.btn{border-radius:var(--radius);letter-spacing:.02em;cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:13px 24px;font-size:.9rem;font-weight:700;transition:opacity .15s,transform .1s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.97)}.btn--primary{background:var(--accent);color:#000}.btn--primary:hover:not(:disabled){opacity:.9}.btn--secondary{background:var(--surface-2);border:1px solid var(--border);color:var(--text)}.btn--secondary:hover:not(:disabled){background:var(--surface);border-color:var(--text-muted)}.btn--full{width:100%}.modal-overlay{z-index:100;background:#000000bf;justify-content:center;align-items:center;animation:.2s forwards overlay-in;display:flex;position:fixed;inset:0}@media (width>=480px){.modal-overlay{padding:24px}}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:var(--max-w);flex-direction:column;gap:20px;max-height:90vh;padding:28px 24px 40px;animation:.25s forwards modal-in;display:flex;position:relative;overflow-y:auto}@media (width>=480px){.modal{padding:32px 28px}}@keyframes modal-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.modal__close{width:32px;height:32px;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;transition:color .15s,background .15s;display:flex;position:absolute;top:16px;right:16px}.modal__close:hover{color:var(--text);background:var(--surface-2)}.modal__title{letter-spacing:-.01em;text-align:center;color:var(--text);font-size:1.1rem;font-weight:700}.result-modal__header{text-align:center}.result-modal__title{letter-spacing:-.02em;font-size:1.5rem;font-weight:700}.result-modal__title--won{color:var(--correct)}.result-modal__title--lost{color:var(--text-muted)}.result-modal__subtitle{color:var(--text);margin-top:4px;font-size:.875rem}.result-modal__answer{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:4px;padding:16px;display:flex}.result-modal__answer-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text);font-size:.7rem;font-weight:600}.result-modal__answer-value{letter-spacing:-.02em;color:var(--accent);font-size:1.75rem;font-weight:700}.result-modal__spotify{color:var(--text);border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:8px;padding:10px;font-size:.85rem;font-weight:500;transition:color .15s,background .15s;display:flex}.result-modal__spotify:hover{color:var(--text);background:var(--surface-2)}.result-modal__countdown{flex-direction:column;align-items:center;gap:2px;display:flex}.result-modal__countdown-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text);font-size:.7rem;font-weight:600}.result-modal__countdown-timer{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text);font-size:1.5rem;font-weight:700}.result-modal__actions{gap:10px;display:flex}.result-modal__actions .btn{flex:1}.stats-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.stat-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:2px;padding:12px 8px;display:flex}.stat-tile__value{letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}.stat-tile__label{text-transform:uppercase;letter-spacing:.08em;color:var(--text);text-align:center;font-size:.65rem;font-weight:600}.distribution{flex-direction:column;gap:6px;display:flex}.distribution__title{text-transform:uppercase;letter-spacing:.1em;color:var(--text);margin-bottom:2px;font-size:.7rem;font-weight:600}.dist-row{align-items:center;gap:8px;height:26px;display:flex}.dist-row__key{color:var(--text);text-align:center;flex-shrink:0;width:14px;font-size:.8rem;font-weight:700}.dist-row__bar-wrap{flex:1;align-items:center;height:100%;display:flex}.dist-row__bar{background:var(--surface-2);border-radius:4px;justify-content:flex-end;align-items:center;min-width:32px;height:100%;padding-right:8px;transition:width .4s;display:flex}.dist-row__bar--current{background:var(--correct)}.dist-row__count{color:var(--text);font-size:.75rem;font-weight:700}.dist-row__bar--current .dist-row__count{color:#000}.stats-modal__countdown{flex-direction:column;align-items:center;gap:2px;display:flex}.stats-modal__countdown-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text);font-size:.7rem;font-weight:600}.stats-modal__countdown-timer{font-variant-numeric:tabular-nums;color:var(--text);font-size:1.4rem;font-weight:700}.howtoplay-body{flex-direction:column;gap:16px;display:flex}.howtoplay-intro{color:var(--text);text-align:center;font-size:.95rem;line-height:1.6}.howtoplay-intro strong{color:var(--accent)}.howtoplay-steps{counter-reset:steps;flex-direction:column;gap:12px;padding-left:0;list-style:none;display:flex}.howtoplay-steps li{counter-increment:steps;align-items:flex-start;gap:12px;display:flex}.howtoplay-steps li:before{content:counter(steps);background:var(--surface-2);border:1px solid var(--border);width:24px;height:24px;color:var(--text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:.7rem;font-weight:700;display:flex}.howtoplay-step__body{flex-direction:column;gap:2px;display:flex}.howtoplay-step__body strong{color:var(--text);font-size:.875rem;font-weight:700;line-height:1.4}.howtoplay-step__body span{color:var(--text);font-size:.825rem;line-height:1.5}.howtoplay-legend{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:6px;padding:12px;display:flex}.howtoplay-legend__title{text-transform:uppercase;letter-spacing:.08em;color:var(--text);margin-bottom:2px;font-size:.7rem;font-weight:600}.howtoplay-legend__title strong{color:var(--accent);text-transform:none;letter-spacing:0}.howtoplay-legend__example{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.howtoplay-legend__example .signal-pill{flex:none;padding:3px 8px;font-size:.65rem}.howtoplay-legend__example-desc{color:var(--text);white-space:normal;flex:1;min-width:0;font-size:.72rem;line-height:1.3}.howtoplay-legend__example-desc--win{color:var(--correct);font-weight:600}.howtoplay-footer{color:var(--text);text-align:center;font-size:.8rem}.howtoplay-cta{width:100%}.rotate-device{background:var(--bg);z-index:999;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.rotate-device__content{text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}.rotate-device__icon{color:var(--accent);margin-bottom:4px}.rotate-device__text{color:var(--text);font-size:1.1rem;font-weight:700}.rotate-device__sub{color:var(--text-muted);font-size:.85rem}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}::selection{background:var(--accent);color:#000}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}