body,html{background:#f5f7fc;background:var(--background,#f5f7fc);min-width:320px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;color:#14213d;color:var(--text,#14213d);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden}button,input,select,textarea{font:inherit}:root{--background:oklch(97% 0.012 260);--surface:oklch(100% 0 0);--surface-raised:oklch(95% 0.018 260);--text:oklch(25% 0.055 260);--text-muted:oklch(46% 0.04 260);--border:oklch(84% 0.025 260);--accent:oklch(55% 0.19 270);--accent-ink:oklch(99% 0 0);--focus:oklch(55% 0.12 210);--success:oklch(52% 0.14 155);--success-soft:oklch(91% 0.07 155);--success-ink:oklch(28% 0.08 155);--error:oklch(55% 0.18 20);--error-soft:oklch(92% 0.06 20);--error-ink:oklch(34% 0.12 20);--shadow-panel:0 8px 24px oklch(25% 0.04 260/0.08);--radius-sm:8px;--radius-md:10px;--radius-lg:12px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--cell-size:clamp(36px,calc(5.55556vw - 4.22222px),52px);--cell-gap:2px;--cell-ink:oklch(25% 0.055 260);--alkali-metal:oklch(90% 0.11 35);--alkaline-earth-metal:oklch(91% 0.1 75);--transition-metal:oklch(89% 0.07 265);--post-transition-metal:oklch(90% 0.07 235);--metalloid:oklch(89% 0.09 175);--reactive-nonmetal:oklch(92% 0.08 135);--halogen:oklch(91% 0.09 310);--noble-gas:oklch(90% 0.08 220);--lanthanide:oklch(90% 0.08 10);--actinide:oklch(88% 0.08 345)}:root[data-theme=dark]{--background:oklch(18% 0.035 255);--surface:oklch(24% 0.045 255);--surface-raised:oklch(30% 0.055 255);--text:oklch(97% 0.01 255);--text-muted:oklch(79% 0.035 255);--border:oklch(45% 0.05 255);--accent:oklch(71% 0.15 270);--accent-ink:oklch(20% 0.06 270);--focus:oklch(80% 0.14 205);--success:oklch(72% 0.15 155);--success-soft:oklch(34% 0.09 155);--success-ink:oklch(96% 0.02 155);--error:oklch(72% 0.17 20);--error-soft:oklch(35% 0.1 20);--error-ink:oklch(97% 0.02 20);--shadow-panel:0 8px 24px oklch(5% 0.02 255/0.28);--cell-ink:oklch(97% 0.01 255);--alkali-metal:oklch(42% 0.1 35);--alkaline-earth-metal:oklch(43% 0.09 75);--transition-metal:oklch(39% 0.08 265);--post-transition-metal:oklch(40% 0.07 235);--metalloid:oklch(40% 0.08 175);--reactive-nonmetal:oklch(39% 0.08 135);--halogen:oklch(40% 0.09 310);--noble-gas:oklch(40% 0.08 220);--lanthanide:oklch(41% 0.08 10);--actinide:oklch(39% 0.08 345)}*{box-sizing:border-box}button,summary{-webkit-tap-highlight-color:transparent}.table-scroll:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid oklch(55% .12 210);outline:3px solid var(--focus);outline-offset:2px}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.game-shell{grid-gap:8px;display:grid;gap:8px;grid-template-rows:auto auto auto minmax(0,1fr);margin:0 auto;min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));width:min(100%,1440px)}.challenge-bar,.completion-panel,.top-bar{background:oklch(100% 0 0);background:var(--surface);border:1px solid oklch(84% .025 260);border:1px solid var(--border);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 8px 24px oklch(25% .04 260/.08);box-shadow:var(--shadow-panel)}.top-bar{grid-gap:16px;align-items:center;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) auto auto auto;min-height:52px;min-width:0;padding:8px 12px}.attempt-feedback,.brand,.button,.challenge-clue,.completion-panel,.icon-button,.phase-progress,.phase-summary,.restart-confirmation,.top-actions{align-items:center;display:flex}.brand{color:oklch(25% .055 260);color:var(--text);font-size:16px;font-weight:700;gap:8px;min-width:0}.brand-mark{background:oklch(55% .19 270);background:var(--accent);border-radius:8px;border-radius:var(--radius-sm);color:oklch(99% 0 0);color:var(--accent-ink);display:grid;flex:0 0 auto;height:32px;place-items:center;width:32px}.brand-mark svg{height:20px;width:20px}.brand-name-short{display:none}.phase-summary{align-items:flex-start;flex-direction:column;line-height:1.1;min-width:0}.challenge-label,.completion-kicker,.phase-kicker{color:oklch(46% .04 260);color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.phase-name{color:oklch(25% .055 260);color:var(--text);font-size:14px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phase-progress{gap:4px}.progress-dot{background:oklch(95% .018 260);background:var(--surface-raised);border:1px solid oklch(84% .025 260);border:1px solid var(--border);border-radius:50%;height:8px;width:8px}.progress-dot.is-complete{background:oklch(52% .14 155);background:var(--success);border-color:oklch(52% .14 155);border-color:var(--success)}.progress-count{font-feature-settings:"tnum";color:oklch(46% .04 260);color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums;font-weight:700;margin-left:4px}.restart-confirmation,.top-actions{gap:8px}.button,.icon-button,.orientation-dismiss{background:oklch(95% .018 260);background:var(--surface-raised);border:1px solid oklch(84% .025 260);border:1px solid var(--border);border-radius:8px;border-radius:var(--radius-sm);color:oklch(25% .055 260);color:var(--text);cursor:pointer;font-size:14px;font-weight:700;gap:8px;justify-content:center;min-height:44px;transition:color .15s cubic-bezier(.25,1,.5,1),background-color .15s cubic-bezier(.25,1,.5,1),border-color .15s cubic-bezier(.25,1,.5,1),transform .15s cubic-bezier(.25,1,.5,1)}.icon-button{min-width:44px;padding:0 12px}.button svg,.icon-button svg{height:16px;width:16px}.button{padding:0 16px}.button-primary{background:oklch(55% .19 270);background:var(--accent);border-color:oklch(55% .19 270);border-color:var(--accent);color:oklch(99% 0 0);color:var(--accent-ink)}.button-danger{background:oklch(92% .06 20);background:var(--error-soft);border-color:oklch(55% .18 20);border-color:var(--error);color:oklch(34% .12 20);color:var(--error-ink)}.button-quiet{color:oklch(46% .04 260);color:var(--text-muted)}.button:active,.element-cell:active,.icon-button:active,.orientation-dismiss:active{transform:scale(.96)}.challenge-bar{align-items:stretch;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:64px;overflow:hidden}.attempt-feedback,.challenge-clue{gap:12px;min-width:0;padding:8px 16px}.attempt-feedback>svg,.challenge-icon{flex:0 0 auto;height:20px;width:20px}.challenge-icon{color:oklch(55% .19 270);color:var(--accent)}.attempt-feedback>div,.challenge-copy{grid-gap:4px;display:grid;gap:4px;min-width:0}.attempt-feedback strong,.challenge-copy strong{color:oklch(25% .055 260);color:var(--text);font-size:14px;line-height:1.25}.attempt-feedback{background:oklch(95% .018 260);background:var(--surface-raised);border-left:1px solid oklch(84% .025 260);border-left:1px solid var(--border)}.attempt-feedback:empty{display:none}.challenge-bar:has(.attempt-feedback:empty){grid-template-columns:1fr}.attempt-feedback span{color:oklch(46% .04 260);color:var(--text-muted);font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.challenge-bar.is-correct .attempt-feedback{background:oklch(91% .07 155);background:var(--success-soft);color:oklch(28% .08 155);color:var(--success-ink)}.challenge-bar.is-incorrect .attempt-feedback{background:oklch(92% .06 20);background:var(--error-soft);color:oklch(34% .12 20);color:var(--error-ink)}.orientation-hint{align-items:center;background:oklch(95% .018 260);background:var(--surface-raised);border:1px solid oklch(55% .19 270);border:1px solid var(--accent);border-radius:10px;border-radius:var(--radius-md);color:oklch(25% .055 260);color:var(--text);display:flex;gap:12px;padding:12px}.orientation-hint>svg{color:oklch(55% .19 270);color:var(--accent);flex:0 0 auto;height:24px;width:24px}.orientation-hint>div{grid-gap:4px;display:grid;flex:1 1;gap:4px}.orientation-hint strong{font-size:14px}.orientation-hint span{color:oklch(46% .04 260);color:var(--text-muted);font-size:12px;line-height:1.35}.orientation-dismiss{min-width:44px;padding:0 12px}.orientation-dismiss svg{display:none;height:16px;width:16px}.completion-panel{gap:16px;min-height:88px;padding:12px 16px}.completion-panel>svg{color:oklch(52% .14 155);color:var(--success);flex:0 0 auto;height:32px;width:32px}.completion-panel>div{flex:1 1;min-width:0}.completion-panel h2,.completion-panel p{margin:0}.completion-panel h2{color:oklch(25% .055 260);color:var(--text);font-size:20px;line-height:1.2}.completion-panel p{color:oklch(46% .04 260);color:var(--text-muted);font-size:14px;line-height:1.35;margin-top:4px}.board-area,.periodic-table-section,.table-scroll,.table-scroll-cue{min-height:0;min-width:0}.periodic-table-section{display:flex;flex-direction:column;height:100%;justify-content:center}.table-scroll-cue{border-inline:3px solid #0000}.table-scroll{-webkit-overflow-scrolling:touch;background:oklch(100% 0 0);background:var(--surface);border:1px solid oklch(84% .025 260);border:1px solid var(--border);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 8px 24px oklch(25% .04 260/.08);box-shadow:var(--shadow-panel);overflow-x:auto;overscroll-behavior-inline:contain;padding:8px;width:100%}.periodic-table{grid-gap:2px;grid-gap:var(--cell-gap);display:grid;gap:2px;gap:var(--cell-gap);grid-template-columns:repeat(18,clamp(36px,calc(5.55556vw - 4.22222px),52px));grid-template-columns:repeat(18,var(--cell-size));grid-template-rows:repeat(9,clamp(36px,calc(5.55556vw - 4.22222px),52px));grid-template-rows:repeat(9,var(--cell-size));margin:0 auto;width:max-content}.period-row{display:contents}.element-cell{font-feature-settings:"tnum";background:var(--category-color);border:1px solid color-mix(in oklch,currentcolor 28%,#0000);border-radius:8px;border-radius:var(--radius-sm);color:oklch(25% .055 260);color:var(--cell-ink);cursor:pointer;display:grid;font-variant-numeric:tabular-nums;height:clamp(36px,calc(5.55556vw - 4.22222px),52px);height:var(--cell-size);line-height:1;min-height:0;min-width:0;padding:4px;place-items:center;position:relative;touch-action:manipulation;transition:background-color .18s cubic-bezier(.25,1,.5,1),border-color .18s cubic-bezier(.25,1,.5,1),transform .15s cubic-bezier(.25,1,.5,1);width:clamp(36px,calc(5.55556vw - 4.22222px),52px);width:var(--cell-size)}.element-cell[aria-disabled=true]{cursor:not-allowed}.category-alkali-metal{--category-color:var(--alkali-metal)}.category-alkaline-earth-metal{--category-color:var(--alkaline-earth-metal)}.category-transition-metal{--category-color:var(--transition-metal)}.category-post-transition-metal{--category-color:var(--post-transition-metal)}.category-metalloid{--category-color:var(--metalloid)}.category-reactive-nonmetal{--category-color:var(--reactive-nonmetal)}.category-halogen{--category-color:var(--halogen)}.category-noble-gas{--category-color:var(--noble-gas)}.category-lanthanide{--category-color:var(--lanthanide)}.category-actinide{--category-color:var(--actinide)}.atomic-number{font-size:11px;font-weight:600;left:4px;position:absolute;top:4px}.element-symbol{font-size:clamp(14px,2vw,20px);font-weight:750;letter-spacing:-.02em;padding-top:8px}.element-state-icon{display:grid;height:12px;place-items:center;position:absolute;right:3px;top:3px;width:12px}.element-state-icon svg{stroke-width:3;height:12px;width:12px}.element-cell.is-solved{background:oklch(91% .07 155);background:var(--success-soft);border:2px solid oklch(52% .14 155);border:2px solid var(--success);color:oklch(28% .08 155);color:var(--success-ink)}.element-cell.is-incorrect{background:oklch(92% .06 20);background:var(--error-soft);border:2px solid oklch(55% .18 20);border:2px solid var(--error);color:oklch(34% .12 20);color:var(--error-ink)}.legend-wide{margin-top:8px}.legend-list{color:oklch(46% .04 260);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:4px 12px;justify-content:center;list-style:none;margin:0;padding:0}.legend-list li{align-items:center;display:flex;gap:4px}.legend-swatch{background:var(--category-color);border:1px solid oklch(84% .025 260);border:1px solid var(--border);border-radius:3px;height:10px;width:10px}.legend-compact{color:oklch(46% .04 260);color:var(--text-muted);display:none;font-size:12px;margin-top:8px}.legend-compact summary{cursor:pointer;font-weight:700;min-height:44px;padding:12px;width:fit-content}@media (hover:hover) and (pointer:fine){.button-quiet:hover,.icon-button:hover,.orientation-dismiss:hover{border-color:oklch(55% .19 270);border-color:var(--accent);color:oklch(55% .19 270);color:var(--accent)}.button-primary:hover{background:color-mix(in oklch,oklch(55% .19 270) 88%,oklch(25% .055 260));background:color-mix(in oklch,var(--accent) 88%,var(--text))}.element-cell:hover:not(.is-solved):not(.is-incorrect){border-color:oklch(55% .19 270);border-color:var(--accent);transform:translateY(-1px)}}@media (max-width:767px){:root{--cell-size:44px;--cell-gap:4px}.game-shell{padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right))}.top-bar{gap:8px;grid-template-columns:minmax(0,1fr) auto auto auto}.control-label,.phase-name{display:none}.icon-button{padding:0}.restart-confirmation{background:oklch(100% 0 0);background:var(--surface);border:1px solid oklch(84% .025 260);border:1px solid var(--border);border-radius:10px;border-radius:var(--radius-md);box-shadow:0 8px 24px oklch(25% .04 260/.08);box-shadow:var(--shadow-panel);padding:8px;position:absolute;right:max(8px,env(safe-area-inset-right));top:max(64px,calc(env(safe-area-inset-top) + 52px));z-index:3}.legend-wide{display:none}.legend-compact{display:block}}@media (pointer:coarse) and (orientation:portrait) and (max-width:500px){.challenge-bar{grid-template-columns:1fr}.attempt-feedback{border-left:0;border-top:1px solid oklch(84% .025 260);border-top:1px solid var(--border)}.table-scroll-cue{border-color:oklch(55% .19 270);border-color:var(--accent);border-radius:12px;border-radius:var(--radius-lg)}.periodic-table{margin-left:0}.completion-panel{align-items:flex-start;flex-wrap:wrap}.completion-panel .button{width:100%}}@media (orientation:landscape) and (max-height:500px){:root{--cell-size:clamp(24px,min(calc(5.55556vw - env(safe-area-inset-left)/18 - env(safe-area-inset-right)/18 - 2.88889px),calc(100dvh/9 - env(safe-area-inset-top)/9 - env(safe-area-inset-bottom)/9 - 11.11111px)),36px);--cell-gap:2px}#root,body,html{height:100%;overflow:hidden;width:100%}.game-shell{gap:0;grid-template-rows:36px 44px minmax(0,1fr);height:100dvh;min-height:0;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));width:100%}.top-bar{border-radius:8px 8px 0 0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;box-shadow:none;gap:8px;grid-template-columns:minmax(0,1fr) auto auto auto;min-height:0;padding:2px 8px}.brand-mark{height:28px;width:28px}.brand-mark svg{height:16px;width:16px}.attempt-feedback strong,.brand,.challenge-copy strong,.phase-name{font-size:12px}.phase-summary{flex-direction:row;gap:4px}.phase-name{display:inline;max-width:88px}.challenge-label,.phase-kicker{font-size:10px}.button,.icon-button{font-size:11px;min-height:28px;min-width:28px;padding-inline:8px}.control-label{display:none}.restart-confirmation{top:36px}.challenge-bar{border-radius:0 0 8px 8px;border-radius:0 0 var(--radius-sm) var(--radius-sm);border-top:0;box-shadow:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:0}.attempt-feedback,.challenge-clue{gap:8px;padding:3px 8px}.attempt-feedback>svg,.challenge-icon{height:16px;width:16px}.attempt-feedback>div,.challenge-copy{gap:1px}.attempt-feedback span{font-size:10px}.completion-panel{border-radius:0 0 8px 8px;border-radius:0 0 var(--radius-sm) var(--radius-sm);border-top:0;box-shadow:none;gap:8px;min-height:0;padding:3px 8px}.completion-panel>svg{height:20px;width:20px}.completion-panel h2{font-size:14px}.completion-kicker,.completion-panel p{display:none}.periodic-table-section{justify-content:center}.table-scroll,.table-scroll-cue{display:grid;height:100%;place-items:center}.table-scroll{background:#0000;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0}.atomic-number{font-size:clamp(8px,2.5vh,11px);left:3px;top:2px}.element-symbol{font-size:clamp(11px,3.5vh,14px);padding-top:5px}.element-state-icon{right:1px;top:1px}.element-state-icon,.element-state-icon svg{height:9px;width:9px}.legend-compact,.legend-wide{display:none}}@media (orientation:landscape) and (max-width:600px) and (max-height:340px){.brand-name,.phase-name,.progress-dot{display:none}.brand-name-short{display:inline}.phase-kicker{white-space:nowrap}}@media (max-width:400px){.brand-name{display:none}.brand-name-short{display:inline}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/*# sourceMappingURL=main.a0e1abdc.css.map*/