@font-face{font-family:NinePixel;src:url('/fonts/press-start-2p.ttf') format('truetype');font-display:swap;font-weight:400}

/* A quiet handheld-console palette, with readable Thai and board digits. */
:root{--bg:#f4f1e4;--surface:#fffcf1;--ink:#293c30;--muted:#667360;--line:#d9ddc9;--accent:#245b41;--tint:#e5edd4;--peer:#f0f2e3;--same:#dae7bd;--selected:#c5dda3;--given:#263d2e;--error:#a33141;--error-bg:#f8dedc;--grid:#d4dcc6;--box:#5e7456;--pixel-shadow:#b3bea0;--button-face:#e4edcf;--button-shadow:#82966f;--on-accent:#fffcf1;--panel:#e4ebcf;--texture:#9daa7e22}
body{background-color:var(--bg);background-image:radial-gradient(var(--texture) 1px,transparent 1px);background-size:8px 8px;color:var(--ink)}
body.dark{--bg:#19271e;--surface:#223328;--ink:#eef0d8;--muted:#adba9d;--line:#3e503c;--accent:#b5d889;--tint:#334932;--peer:#2a3d2c;--same:#3d5735;--selected:#4b683e;--given:#eef0d8;--error:#ffa5a5;--error-bg:#533739;--grid:#43563e;--box:#81936a;--pixel-shadow:#101d13;--button-face:#314830;--button-shadow:#101d13;--on-accent:#19271e;--panel:#2b422e;--texture:#91ab6d13;background-color:var(--bg);background-image:radial-gradient(var(--texture) 1px,transparent 1px)}
.header{border-bottom:2px solid var(--box);box-shadow:0 4px 0 var(--line)}.header-inner{gap:24px}.brand{font-family:NinePixel,monospace;font-size:22px;letter-spacing:-1px;color:var(--accent);font-weight:400}.brand>span{gap:12px}.brand-sub{font-family:NineThai,sans-serif;font-size:14px;letter-spacing:0;color:var(--muted)}.brand img{image-rendering:pixelated}.nav{gap:24px;margin-left:20px}.nav-item.active:after{height:4px;border-radius:0;bottom:-2px}.new-label{border-radius:0;background:var(--tint);border:1px solid var(--line)}.language{font-family:NinePixel,monospace;font-size:10px}
.main{padding-top:30px}.page-heading{margin-bottom:25px}.page-heading .eyebrow{font-family:NinePixel,monospace;font-size:9px;letter-spacing:0;color:var(--accent);line-height:1.8}h1{font-size:32px;letter-spacing:0}.title-dot{display:inline-block;width:8px;height:8px;background:var(--accent);color:transparent;margin-left:9px}.save-status{padding-top:16px;font-size:12px}.save-status svg{color:var(--accent)}
.icon-button,.small-icon,.new-label,.primary,.secondary,.difficulty,.difficulty button,.number-key,.board-frame,.ad-slot,.ad-mark,.journey-icon,.stage>span,dialog,.level-choice,.shortcut-input,.toast,.tool-icon small,.hv-chip,.hv-key,.live-hint-annotation,.win-summary,.win-icon,.pause-symbol{border-radius:0}
.icon-button:hover,.small-icon:hover{background:var(--tint)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.difficulty,body.dark .difficulty{padding:3px;gap:2px;background:var(--line);border:1px solid var(--box)}.difficulty button{padding:8px 15px}.difficulty button.active{background:var(--surface);box-shadow:2px 2px 0 var(--pixel-shadow);color:var(--accent)}.difficulty button:not(.active):hover{background:var(--peer)}
.board-frame{border:3px solid var(--box);box-shadow:5px 5px 0 var(--pixel-shadow);overflow:hidden}.cell{font-family:NineThai,sans-serif;font-size:30px;font-weight:500}.cell.given{font-weight:600}.cell.selected{box-shadow:inset 0 0 0 2px var(--accent)}.cell-notes{font-family:NineThai,sans-serif;font-weight:400}.cell.pop{animation:pixel-number .14s steps(2,end)}.board-meta{font-size:13px}.board-bottom{font-size:12px;margin-top:17px}.mini-dot{border-radius:0;width:6px;height:6px}.progress-track{height:5px;border-radius:0;background:var(--line)}.progress-track>div{transition:width .2s steps(5,end)}#timer{font-family:NinePixel,monospace;font-size:11px;min-width:57px;letter-spacing:-1px}
.tools{gap:7px}.tool{gap:9px;font-size:12px}.tool svg{width:24px;height:24px}.tool-icon small{right:-17px;border-color:var(--bg);background:var(--line);color:var(--muted)}.tool.active .tool-icon small{background:var(--accent);color:var(--on-accent)}
.numpad{gap:11px}.number-key,body.dark .number-key{background:var(--button-face);border:1px solid var(--box);box-shadow:3px 3px 0 var(--button-shadow);color:var(--accent);font-family:NinePixel,monospace;font-size:23px;gap:6px;height:64px;transition:translate .1s steps(2,end),box-shadow .1s steps(2,end);line-height:1.3}.number-key small,body.dark .number-key small{font-family:NineThai,sans-serif;font-size:11px;color:var(--muted);line-height:1}.number-key:hover{background:var(--same);transform:none;translate:-1px -1px;box-shadow:4px 4px 0 var(--button-shadow)}.number-key:active{transform:none;translate:3px 3px;box-shadow:0 0 0 var(--button-shadow)}
.primary,body.dark .primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);box-shadow:3px 3px 0 var(--button-shadow);transition:translate .1s steps(2,end),box-shadow .1s steps(2,end)}.primary:hover,body.dark .primary:hover{background:var(--accent);transform:none;translate:-1px -1px;box-shadow:4px 4px 0 var(--button-shadow)}.primary:active,body.dark .primary:active{transform:none;translate:3px 3px;box-shadow:none}.secondary{border:1px solid var(--box);background:var(--surface)}.secondary:hover{background:var(--tint)}.new-game{margin-top:20px}.control-tip{margin-top:21px}.control-tip p{font-size:12px}
.daily-card,body.dark .daily-card{background:var(--panel);border:0;border-top:4px solid var(--accent);border-radius:0;padding:22px;color:var(--ink);box-shadow:4px 4px 0 var(--line)}.daily-top .eyebrow,body.dark .daily-top .eyebrow{font-family:NinePixel,monospace;font-size:9px;letter-spacing:0;color:var(--accent)}.daily-top svg{color:var(--accent);width:27px;height:27px}.daily-date{gap:14px;margin:22px 0 12px}.daily-date>span{font-family:NinePixel,monospace;font-size:41px;letter-spacing:-2px;line-height:1.3;color:var(--accent)}.daily-date>div{font-size:14px}.daily-date>div>span:last-child,body.dark .daily-date>div>span:last-child{color:var(--muted);font-size:12px}.daily-card h2{font-size:21px;margin-top:19px;letter-spacing:0}.daily-card p,body.dark .daily-card p{color:var(--muted);font-size:13px}.daily-card button,body.dark .daily-card button{background:var(--surface);color:var(--accent);border:1px solid var(--box);border-radius:0;box-shadow:2px 2px 0 var(--pixel-shadow);font-size:14px;transition:translate .1s steps(2,end)}.daily-card button:hover{box-shadow:3px 3px 0 var(--pixel-shadow);translate:-1px -1px}.daily-foot,body.dark .daily-foot{color:var(--muted);font-size:11px}
.ad-section{margin-top:26px}.ad-label{font-family:NinePixel,monospace;font-size:7px;letter-spacing:0;color:var(--muted);line-height:1.8}.ad-slot,body.dark .ad-slot{background:var(--peer);border:1px dashed var(--box);color:var(--muted)}.ad-mark,body.dark .ad-mark{background:var(--line)}.ad-mark svg{color:var(--muted)}.ad-note{color:var(--muted);font-size:12px}.journey-teaser{padding-top:24px}.journey-icon{background:var(--tint);color:var(--accent)}.journey-teaser>span:last-child{color:var(--accent)}.stage>span{border:1px solid var(--box);box-shadow:2px 2px 0 var(--pixel-shadow)}.stage.current>span{background:var(--accent);color:var(--on-accent)}
.below-game{border-top:2px solid var(--line)}.footer{border-top:2px solid var(--box)}.footer-brand{font-size:15px}.copyright{font-size:11px}.footer button{font-size:12px}.learning-tip p{font-size:14px}.bottom-ad{border-radius:0}
dialog{border:2px solid var(--box);box-shadow:7px 7px 0 var(--pixel-shadow),0 20px 70px #10241844}dialog::backdrop{background:#13251866;backdrop-filter:blur(2px)}.switch{border-radius:0;background:var(--line)}.switch:after{border-radius:0;background:var(--surface)}.switch:checked{background:var(--accent)}.level-choice{border-color:var(--box)}.level-choice:hover{box-shadow:2px 2px 0 var(--pixel-shadow)}.pause-symbol,.win-icon{background:var(--tint);border:2px solid var(--box);box-shadow:4px 4px 0 var(--pixel-shadow)}.win-summary{border:1px solid var(--line)}.toast{border:2px solid var(--box);box-shadow:4px 4px 0 var(--pixel-shadow);background:var(--ink);color:var(--surface)}
.hv-chip{font-family:NineThai,sans-serif}.hv-chip.answer,body.dark .hv-chip.answer{color:var(--on-accent)}.hv-progress>span{border-radius:0}.hint-message{border-left-width:3px}.live-hint-arrows{shape-rendering:auto}.hint-actions button,.hv-controls button{font-size:13px}.hint-context{font-size:12px}.hv-legend{font-size:12px}.inline-hint-heading .eyebrow{font-family:NineThai,sans-serif}.game-section{animation:pixel-enter .24s steps(4,end) both}.sidebar{animation:pixel-enter .24s .08s steps(4,end) both}
@keyframes pixel-enter{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}@keyframes pixel-number{from{opacity:.4;scale:.94}to{opacity:1;scale:1}}
@media(max-width:1150px){.header-inner{gap:16px}.nav{margin-left:8px;gap:19px}.difficulty button{padding:8px 11px}.number-key{height:58px;font-size:21px}.brand{font-size:20px}.brand>span{gap:8px}.daily-card{padding:20px}.daily-date>span{font-size:37px}}
@media(min-width:651px) and (max-width:960px){.number-key{height:76px}.daily-card{min-height:280px}.ad-section{margin-top:0}.brand-sub{font-size:12px}}
@media(min-width:651px) and (max-width:760px){.number-key{height:58px}.header-inner{padding:0 22px;gap:14px}.brand{font-size:18px}.header-actions{gap:7px}.header-actions .language{display:none}.nav{gap:13px}.nav-item{font-size:12px}.tool{font-size:11px}}
@media(max-width:650px){.header-inner{gap:0;padding:0 18px}.brand{font-size:21px}.brand-sub{font-size:13px}.brand>span{gap:10px}.header-actions{gap:8px}.nav{margin:0;gap:14px;height:47px}.nav-item{font-size:13px}.main{padding:21px 18px 0}.page-heading{margin-bottom:17px}.page-heading h1{font-size:27px}.save-status{font-size:11px;padding-top:0}.game-top{margin-bottom:13px}.difficulty button{padding:8px 10px}.board-frame{border-width:2px;box-shadow:4px 4px 0 var(--pixel-shadow)}.cell{font-size:clamp(23px,7vw,34px)}.board-bottom{margin-top:14px;font-size:11px}.play-layout{gap:17px}.tools{margin-bottom:17px}.tool{font-size:12px}.numpad{gap:6px}.number-key,body.dark .number-key{height:54px;font-size:19px;gap:5px;box-shadow:2px 2px 0 var(--button-shadow)}.number-key small{font-size:10px}.new-game{margin-top:17px}.daily-card{min-height:0;padding:20px}.daily-date{margin:14px 0 0 10px;gap:13px}.daily-date>span{font-size:36px}.daily-card h2{margin-top:20px}.daily-card p{font-size:12px}.daily-top .eyebrow{font-size:9px}.ad-section{margin-top:0}.footer-brand{font-size:15px}.hint-actions button,.hv-controls button{font-size:14px}}
@media(max-width:360px){.brand{font-size:18px}.brand-sub{font-size:12px}.nav{gap:6px}.nav-item{font-size:12px}.number-key,body.dark .number-key{font-size:17px}.difficulty button{padding:8px}.game-top .text-button{font-size:11px}.daily-date>span{font-size:30px}.daily-date>div{font-size:12px}}
/* Original owl illustration stays beside the game, never over its cells. */
.mascot{display:block;object-fit:contain;image-rendering:pixelated;pointer-events:none;user-select:none}
.daily-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:8px;margin:13px 0 4px}
.daily-hero .daily-date{display:flex;flex-direction:column;align-items:flex-start;gap:7px;float:none;margin:0;min-width:0}.daily-hero .daily-date>div{gap:2px}.daily-hero .daily-date>span{font-size:36px}.mascot-daily{width:100%;height:auto;aspect-ratio:1;max-width:150px;justify-self:end}
.daily-card:has(.mascot) h2{margin-top:10px}.mascot-pause{width:clamp(80px,18vw,132px);height:auto;aspect-ratio:1}.pause-overlay:has(.mascot) h2{margin:10px 0 2px}.pause-overlay:has(.mascot) p{margin:5px 0 15px}.pause-overlay:not([hidden]) .mascot{animation:owl-arrive .25s steps(3,end) both}
@keyframes owl-arrive{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:650px){.daily-hero{grid-template-columns:minmax(0,1fr) 128px;margin:8px 0 0}.daily-hero .daily-date{gap:9px}.daily-hero .daily-date>span{font-size:38px}.daily-hero .daily-date>div{font-size:14px}.mascot-daily{width:128px;height:128px}.daily-card:has(.mascot) h2{margin-top:9px}.mascot-pause{width:96px;height:96px}.pause-overlay:has(.mascot) h2{font-size:21px}.pause-overlay:has(.mascot) p{font-size:13px;margin-bottom:12px}}
@media(max-width:360px){.daily-hero{grid-template-columns:minmax(0,1fr) 108px}.mascot-daily{width:108px;height:108px}.mascot-pause{width:80px;height:80px}}
.cell-notes .note-active{color:var(--accent);font-weight:600}.cell-notes .note-cut{color:var(--error);text-decoration:line-through;text-decoration-thickness:1px;font-weight:400}
.candidate-panel{border-top:1px solid var(--box);padding-top:13px;margin-top:19px}.candidate-heading{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px}.candidate-heading>span{color:var(--muted)}.candidate-panel p{font-size:12px;line-height:1.8;color:var(--muted);margin:7px 0 12px}.candidate-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.candidate-actions button{font-size:12px;padding:9px 5px;min-height:42px}.candidate-legend{display:flex;gap:13px;align-items:center;font-size:11px;color:var(--muted);margin-top:11px}.candidate-legend>span{display:flex;align-items:center;gap:5px}.candidate-legend s{font-size:14px;color:var(--error)}
.number-key .key-digit{position:relative}.number-key.candidate-active{background:var(--selected);box-shadow:3px 3px 0 var(--button-shadow),inset 0 0 0 1px var(--accent)}.number-key.candidate-cut .key-digit{color:var(--error);text-decoration:line-through;text-decoration-thickness:2px}.number-key.candidate-cut small{color:var(--error)}.is-hinting .candidate-panel{display:none}
@media(max-width:650px){.candidate-panel{order:2;margin-top:17px}.candidate-actions button{font-size:14px}.candidate-panel p{font-size:13px}.candidate-heading{font-size:13px}.candidate-legend{font-size:12px}.number-key small,body.dark .number-key small{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}