:root { --bg:#000000; --text:#ffffff; --muted:#a1a1aa; --line:#292929; --accent:#ff4612; color-scheme:dark; font-family:"Power Grotesk","Die Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; }
[data-theme="light"] { --bg:#bcc1c9; --text:#000000; --muted:#353b43; --line:#8e969f; color-scheme:light; }
* { box-sizing:border-box; transition:background-color .3s ease,color .3s ease,border-color .3s ease; }
body { margin:0; min-height:100svh; background:var(--bg); color:var(--text); font-weight:300; font-size:20px; line-height:1.3; padding-top:50px; }
button,select { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; } button:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.topbar { position:fixed; inset:0 0 auto; z-index:2; height:50px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; background:var(--accent); color:#000; letter-spacing:.01em; }.theme { min-width:44px; min-height:44px; border:0; background:transparent; font-size:25px; line-height:1; }
.game { width:min(100%, 520px); margin:auto; padding:28px 20px 36px; display:grid; gap:38px; }.intro { position:relative; border-bottom:1px solid var(--line); padding-bottom:25px; animation:reveal .7s ease-out both; }.eyebrow,.hint { color:var(--muted); margin:0 0 14px; letter-spacing:.01em; } h1 { margin:0; font-size:clamp(56px,18vw,100px); font-weight:200; line-height:.78; letter-spacing:-.06em; text-transform:lowercase; }.sticker { display:inline-block; margin-left:8px; color:var(--accent); font-size:.55em; vertical-align:top; transform:rotate(-14deg); animation:pop .3s ease-out both; }.play-area { animation:reveal .7s .12s ease-out both; }
.round-tools { display:flex; justify-content:space-between; align-items:start; gap:16px; }.status { min-height:26px; margin:0 0 17px; }.difficulty-label { color:var(--muted); white-space:nowrap; }.difficulty-label select { margin-left:4px; min-height:38px; background:var(--bg); border:1px solid var(--line); padding:0 4px; }
.score { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 0 18px; }.score span { min-height:66px; padding:8px 4px; display:grid; place-items:center; color:var(--muted); }.score span + span { border-left:1px solid var(--line); }.score b { color:var(--text); font-size:30px; font-weight:200; line-height:1; }
.round-history { border-bottom:1px solid var(--line); margin:0 0 18px; padding:0 0 16px; }.history-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }.history-heading h2,.history-heading p { margin:0; font-size:20px; font-weight:300; line-height:1.3; }.history-heading h2 { color:var(--text); }.history-heading p { color:var(--muted); }.history-list { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:12px 0 0; padding:0; }.round-result { min-width:72px; padding:7px 10px; color:var(--text); border-left:3px solid var(--line); font-size:20px; line-height:1.3; }.round-result.win { border-color:var(--accent); }.round-result.draw { border-color:var(--muted); }.round-result.loss { border-color:var(--text); }
.board-viewport { width:100%; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); max-height:58svh; }.board { display:grid; grid-template-columns:repeat(10,56px); width:max-content; border-top:1px solid var(--line); border-left:1px solid var(--line); }.cell { width:56px; height:56px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; font-size:38px; font-weight:200; line-height:1; }.cell:not(.taken):hover { background:var(--accent); color:#000; }.cell.winner { background:var(--accent); color:#000; }.cell.taken { cursor:default; }
.actions { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; margin-top:24px; }.new-game { min-height:54px; border:0; padding:0 20px; background:var(--accent); color:#000; }.quiet { min-height:44px; border:0; background:transparent; color:var(--muted); padding:0; }.hint { margin-top:25px; } footer { border-top:1px solid var(--line); padding:18px 20px calc(18px + env(safe-area-inset-bottom)); color:var(--muted); }
@keyframes pop { 0%{transform:scale(0) rotate(-14deg)} 60%{transform:scale(1.15) rotate(-14deg)} 100%{transform:scale(1) rotate(-14deg)} } @keyframes reveal { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @media (min-width:700px) { .game { width:min(90vw,1000px); grid-template-columns:.85fr 1fr; align-items:end; gap:70px; padding:70px 32px; }.intro { border-bottom:0; padding-bottom:0; } } @media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }