:root{--bg: #0e1116;--panel: #171c26;--panel-2: #212940;--board-bg: #12161f;--text: #e8ecf4;--muted: #93a0b4;--accent: #38bdf8;--accent-ink: #06283a;--ink: #dbe4f3;--line: rgba(147, 160, 180, .16);--line-bold: rgba(147, 160, 180, .4);--error: #f87171;--gold: #fbbf24;color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}.game{height:100%;max-width:720px;margin-inline:auto;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));display:flex;flex-direction:column;gap:10px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.hud{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.chips{grid-column:1;grid-row:1;display:flex;gap:6px;min-width:0}.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding-inline:10px;border-radius:10px;background:var(--panel);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}.chip .icon{width:17px;height:17px;flex:none}#time-chip .icon{color:var(--muted)}#mistake-chip .icon{color:var(--error)}#progress-chip .icon{color:var(--accent)}.actions{grid-column:2;grid-row:1;display:flex;gap:6px;justify-self:end}.levels{grid-column:1 / -1;grid-row:2;display:flex;gap:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding-inline:14px;border:0;border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:600;cursor:pointer}.btn .icon{width:20px;height:20px;flex:none}.btn:active{transform:translateY(1px)}.btn-icon{padding-inline:0}.btn.is-on{background:var(--accent);color:var(--accent-ink)}.btn-primary{background:var(--accent);color:var(--accent-ink);padding-inline:24px}.btn-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level{flex:1;min-width:0;min-height:40px;padding-inline:6px;border:0;border-radius:10px;background:var(--panel);color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level.is-on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1.5px #38bdf88c}.board-wrap{position:relative;flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}.board{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;padding:8px;border-radius:10px;background:var(--board-bg);box-shadow:inset 0 0 0 1px #ffffff0a;touch-action:none}.corner{grid-column:1;grid-row:1}.col-clues{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(var(--cols),var(--cell));align-items:end}.clue-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:3px}.row-clues{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(var(--rows),var(--cell));width:calc(var(--clue) * var(--row-band) + 3px)}.clue-row{display:flex;justify-content:flex-end;align-items:center;padding-right:3px}.num{min-width:var(--clue);height:var(--clue);display:inline-flex;align-items:center;justify-content:center;font-size:calc(var(--clue) * .72);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--muted)}.clue.is-done .num{color:#93a0b461}.grid{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));border:1px solid var(--line-bold);border-radius:2px;cursor:pointer}.cell{display:flex;align-items:center;justify-content:center;background:#161c29;box-shadow:inset -1px -1px 0 var(--line)}.cell.alt{background:#1a2131}.cell.bx{box-shadow:inset -2px 0 0 var(--line-bold),inset 0 -1px 0 var(--line)}.cell.by{box-shadow:inset -1px 0 0 var(--line),inset 0 -2px 0 var(--line-bold)}.cell.bx.by{box-shadow:inset -2px 0 0 var(--line-bold),inset 0 -2px 0 var(--line-bold)}@media(hover:hover)and (pointer:fine){.cell:not(.is-fill):not(.is-cross):hover{background:#232c42}}.cell.is-fill{background:var(--ink);transition:background .4s ease}.cell.is-cross{color:#93a0b48c}.cell .icon{width:62%;height:62%}.cell.is-fresh{animation:cell-pop .14s ease-out}@keyframes cell-pop{0%{transform:scale(.7)}to{transform:scale(1)}}.cell.is-error{animation:cell-error .45s ease-out}@keyframes cell-error{0%{background:var(--error)}to{background:#161c29}}.board.is-solved .cell.is-fill{background:var(--picture)}.board.is-solved .cell{box-shadow:none;transition:box-shadow .6s ease}.board.is-solved .cell.is-cross .icon{opacity:0;transition:opacity .5s ease}.board.is-solved .num{color:#93a0b438;transition:color .5s ease}.board.is-solved .grid{border-color:transparent;transition:border-color .6s ease}.overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:12px;background:#0e111673;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:overlay-in .2s ease-out}.overlay[hidden]{display:none}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.overlay-card{max-width:100%;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 22px;border-radius:16px;background:var(--panel);box-shadow:0 18px 44px #0000008c;text-align:center}.overlay-title{margin:0;font-size:clamp(21px,5vw,32px);font-weight:800}.overlay-line{margin:0;color:var(--muted);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.overlay-note{margin:0;color:var(--muted);font-size:14px}.overlay-note:empty{display:none}.overlay-note.is-gold{color:var(--gold);font-weight:700}.overlay-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}.hint{margin:0;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}@media(max-width:470px){.btn-label{display:none}#restart-btn{padding-inline:0}.game{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}}@media(max-width:380px){#progress-chip{display:none}}@media(max-height:470px){.game{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}.chip{min-height:32px;padding-inline:8px;font-size:14px}.btn{min-height:38px;min-width:38px}.level{min-height:32px;font-size:13px}.hint{font-size:12px}}@media(max-width:380px)and (max-height:470px){.hint{display:none}.board-wrap{padding-block-end:52px}.chip{padding-inline:6px;font-size:13px}.chip .icon{display:none}.level{font-size:12px;padding-inline:2px}}@media(max-height:470px)and (min-aspect-ratio:13 / 10){.game{flex-direction:row;align-items:stretch;gap:10px;max-width:none}.hud{display:flex;flex-direction:column;justify-content:center;align-items:stretch;flex:0 0 auto;width:min(32vw,185px);min-height:0;overflow-y:auto;gap:6px}.chips,.levels{flex-direction:column}.chip{justify-content:space-between}.actions{justify-self:auto}#restart-btn{flex:1}.hint{display:none}}@media(prefers-reduced-motion:reduce){.cell.is-fresh,.cell.is-error,.overlay{animation-duration:1ms}.cell.is-fill,.board.is-solved .cell,.board.is-solved .cell.is-cross .icon,.board.is-solved .num,.board.is-solved .grid{transition-duration:1ms}}
