:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#875f60;background:#f7f2ee;font-synthesis:none;--ink:#875f60;--green:#5d8768}*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #346e9a;outline-offset:3px}button[hidden],[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}main{width:min(100%,600px);margin:0 auto;padding:0 8px}.game{position:relative}.game-top{display:grid;grid-template-columns:56px 1fr 1fr 56px;align-items:center;padding:18px 10px 16px;gap:14px}.brand-icon{width:44px;height:44px;object-fit:contain}.level-stat,.time-stat{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-label{font-size:16px}#level-label{margin:0;font-size:30px;font-weight:800;line-height:1.1}#timer{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.4}.circle{border:0;border-radius:50%;width:46px;height:46px;background:#fff;font-size:28px;box-shadow:0 5px 12px #ab815818;display:grid;place-items:center}.board-meta{display:flex;align-items:center;gap:10px;padding:0 6px 14px}.cat-progress{background:#fff;border-radius:30px;padding:8px 12px;flex:1;min-width:0}#cat-track{display:flex;align-items:center;justify-content:space-between;gap:4px;height:23px}#cat-track img{width:clamp(14px,5vw,26px);height:23px;object-fit:contain;opacity:.18;filter:sepia(1);min-width:0}#cat-track img.home{opacity:1;filter:none}.lives{display:flex;justify-content:center;gap:5px;background:#fff;border-radius:30px;padding:8px 12px;color:#d77d81;font-size:22px;line-height:23px}.lives .lost{color:#e7ddd6}.rules-strip{display:grid;grid-template-columns:1fr 1.24fr 1.1fr;gap:5px;background:#fff;padding:6px;border-radius:14px;margin:0 5px 20px}.rules-strip>div{background:#f8f1eb;border-radius:9px;text-align:center;padding:8px 3px;line-height:1.25}.rules-strip b{display:block;font-size:14px;font-weight:700}.rules-strip span{display:block;font-size:12px;margin-top:3px}#board{display:grid;aspect-ratio:1;gap:3px;border:6px solid white;border-radius:16px;overflow:hidden;isolation:isolate;background:#fff;touch-action:none;width:100%}.cell{padding:0;min-width:0;min-height:0;border:0;border-radius:6px;position:relative;display:grid;place-items:center;background:var(--color);user-select:none;-webkit-user-select:none;overflow:hidden}.cell.marked:before,.cell.blocked:before{content:'×';font-family:Arial,sans-serif;font-weight:400;font-size:clamp(20px,6vw,32px);line-height:1;color:#24382aab}.cell.blocked:before{font-size:clamp(15px,4vw,22px);opacity:.6}.cell img{width:78%;height:78%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 0 #ffffff50)}.cell.hint{box-shadow:inset 0 0 0 3px white,inset 0 0 0 5px #875f60}.cell.error{background:#f2a1a6;box-shadow:inset 0 0 0 3px #b23337;animation:shake .28s linear}.cell.error:before{display:none}.wrong-badge{display:grid;place-items:center;width:65%;height:65%;background:#b23337;border-radius:50%;color:#fff;font:bold 22px system-ui;z-index:3}.region-letter{position:absolute;top:1px;left:3px;font-size:10px;color:#172d25;opacity:.75}.tap-guide{display:flex;justify-content:center;gap:24px;margin-top:14px;font-size:13px;color:#927676}.tap-guide>span{display:flex;align-items:center;gap:5px}.tap-guide b{font-size:13px}.tap-guide img{width:20px;height:20px;object-fit:contain}#feedback{font-size:14px;line-height:1.4;text-align:center;margin:8px 18px;min-height:32px;display:flex;align-items:center;justify-content:center;color:#8b7270}#feedback.mistake{color:#a32531;font-weight:700}.tools{display:flex;justify-content:center;gap:clamp(30px,10vw,70px);padding:5px 0 12px}.tools button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;font-size:14px}.tool-icon{display:grid;place-items:center;width:64px;height:64px;background:#fff;border-radius:50%;font-size:36px;line-height:1;box-shadow:0 6px 18px #ba926223}.tools #hint .tool-icon{color:#d5a33c}.tools button:active:not(:disabled) .tool-icon{transform:scale(.96)}footer{max-width:600px;margin:0 auto;padding:0 14px 15px;text-align:center;font-size:11px;color:#a08c86}.footer-actions{display:flex;justify-content:center;gap:24px;margin-bottom:9px}.quiet{border:0;background:none;font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:7px}.eyebrow{font-size:13px;font-weight:700;letter-spacing:1.5px}#win{position:absolute;inset:0;padding:28px;display:flex;align-items:center;justify-content:center;background:#f7f2ee;border-radius:20px;text-align:center;z-index:5}.win-content{width:100%;max-width:340px}.win-cat{object-fit:contain;width:120px;height:120px;margin-bottom:24px;animation:pop .3s ease-out}#win h2{font-family:Georgia,serif;font-weight:500;font-size:44px;margin:15px 0}#win-description{font-size:16px;line-height:1.6;margin:0 0 30px}#next,.primary{background:var(--green);color:#fff;border:0;border-radius:14px;padding:16px;font-weight:700;width:100%;font-size:16px}dialog{border:0;border-radius:22px;background:#fffaf6;color:var(--ink);padding:24px;width:min(460px,calc(100% - 30px));max-height:85dvh;box-shadow:0 20px 100px #312b2820}dialog::backdrop{background:#392e3260;backdrop-filter:blur(4px)}.modal-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.modal-top h2{margin:0;font-size:23px}.modal-top .circle{flex-shrink:0}#modal-body{font-size:15px;line-height:1.6}#modal-body p{margin:12px 0}#modal-body ul{padding-left:22px}.option{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid #e9ddd3}.option input{width:20px;height:20px;accent-color:var(--green)}.option small{display:block;font-size:13px;color:#967c75}.secondary{border:1px solid #c8b6aa;background:none;border-radius:10px;width:100%;padding:12px;margin-top:10px}.small{font-size:13px;color:#967c75}@keyframes pop{from{transform:scale(.7)}to{transform:scale(1)}}@keyframes shake{25%,75%{transform:translateX(2px)}50%{transform:translateX(-2px)}}@media(min-width:700px){main{padding:0 16px}.game-top{padding-top:25px}.rules-strip{margin-bottom:20px}.tools{padding-bottom:22px}}@media(max-height:740px) and (max-width:600px){.game-top{padding-top:10px;padding-bottom:12px}.rules-strip{margin-bottom:12px}.board-meta{padding-bottom:10px}.rules-strip>div{padding:6px 2px}.tap-guide{margin-top:9px}#feedback{margin:7px 14px;min-height:36px}.tools{padding-bottom:12px}.tool-icon{width:54px;height:54px;font-size:31px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

/* Fit the playing surface to the usable phone viewport, not a fixed phone model. */
.board-space{width:100%}
#feedback.quiet-feedback{display:none}
@media(max-width:700px) and (orientation:portrait) and (min-height:520px){
 body{height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 main{min-height:0;width:100%;margin:0 auto}
 .game,#play-surface{height:100%;min-height:0}
 #play-surface{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;gap:0}
 .game-top{padding:8px 10px;gap:10px;grid-template-columns:46px 1fr 1fr 46px}
 #level-label{font-size:26px}.stat-label{font-size:14px}#timer{font-size:22px}.brand-icon{width:38px;height:38px}.circle{width:44px;height:44px}
 .board-meta{padding:4px 6px 8px}.cat-progress,.lives{padding-top:6px;padding-bottom:6px}
 .rules-strip{margin:0 5px 8px;padding:5px}.rules-strip>div{padding:6px 2px}
 .board-space{container-type:size;min-height:0;display:grid;place-items:center}
 #board{width:min(100cqw,100cqh);height:min(100cqw,100cqh);max-width:100%;max-height:100%}
 .tap-guide{margin:7px 0 3px;line-height:20px}
 #feedback{margin:3px 12px;min-height:0;font-size:13px;line-height:1.35}
 .tools{padding:6px 0 4px;gap:clamp(30px,10vw,70px)}.tools button{gap:4px}.tool-icon{width:52px;height:52px;font-size:30px}
 footer{width:100%;padding:0 10px 2px}.footer-actions{margin:0;min-height:36px;align-items:center}.quiet{padding:8px;font-size:12px}
 #offline-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #win{overflow:auto}
}

/* Anchor hidden labels so their static positions cannot extend the page by a pixel. */
.sr-only{top:0;left:0}
@media(max-width:700px) and (orientation:portrait) and (min-height:520px){
 footer{position:relative}#offline-status{top:0;left:0}
 html[data-app-mode="standalone"]{height:100%;overflow:hidden;overscroll-behavior:none}
 html[data-app-mode="standalone"] body{position:fixed;top:0;left:0;width:100%;height:var(--app-height,100dvh);overflow:hidden;overscroll-behavior:none}
 dialog{overflow-y:auto;overscroll-behavior:contain}
}

/* White marks with a dark edge remain legible on light and dark regions. */
.cell.marked:before,.cell.blocked:before{color:#fff;font-weight:600;text-shadow:0 1px 2px #26352bdd,0 0 1px #26352bcc}
.cell.blocked:before{opacity:.88;font-weight:500}

/* Focused hint walkthrough; the square board gets the remaining viewport. */
#hint-dialog{width:min(100vw,600px);height:min(100dvh,var(--app-height,100dvh));max-width:100vw;max-height:100dvh;margin:auto;border:0;border-radius:0;padding:max(10px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom));background:#393536;color:#fff;overflow:hidden}
#hint-dialog[open]{display:flex;flex-direction:column;gap:10px}
#hint-dialog::backdrop{background:#211e20d9;backdrop-filter:none}
.hint-top{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding-left:10px;font-size:14px;color:#eee1d8}
#hint-close{width:44px;height:44px;background:#514b4c;color:#fff;border:0;border-radius:50%;font-size:28px;line-height:1}
.hint-card{flex-shrink:0;background:#fffaf4;border-radius:18px;padding:16px 18px;color:#67494b}
.hint-card h2{font-size:20px;line-height:1.2;margin:0 0 8px;font-weight:750}
#hint-explanation{font-size:16px;line-height:1.4;margin:0}
#hint-detail{font-size:13px;font-weight:700;margin:8px 0 0;color:#836262}
.hint-board-space{flex:1;min-height:0;min-width:0;container-type:size;display:flex;align-items:center;justify-content:center}
#hint-board{width:min(100cqw,100cqh);height:min(100cqw,100cqh);display:grid;gap:3px;padding:5px;background:#51494a;border-radius:12px;flex-shrink:0}
.hint-axis{display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;line-height:1}
.hint-square{position:relative;min-width:0;min-height:0;display:grid;place-items:center;background:var(--color);border-radius:5px;filter:brightness(.28);overflow:hidden}
.hint-square.relevant{filter:none}
.hint-square.candidate{box-shadow:inset 0 0 0 3px #fff}
.hint-square.conflict{box-shadow:inset 0 0 0 3px #f34f67}
.hint-square img{width:76%;height:76%;object-fit:contain}
.hint-square.preview-cat{box-shadow:inset 0 0 0 3px #fff}
.hint-square.test-cat{box-shadow:inset 0 0 0 3px #ffc34a}
.test-badge{position:absolute;right:1px;top:1px;min-width:13px;height:14px;border-radius:4px;background:#ffc34a;color:#402b0c;font:bold 12px/14px system-ui;text-align:center}
.hint-square.preview-x:before,.hint-square.existing-x:before{content:'×';font:700 clamp(19px,6vw,34px)/1 Arial;color:white;text-shadow:0 1px 2px #172d25,0 0 1px #172d25}
.hint-square.preview-x:before{-webkit-text-stroke:1px #fff;color:transparent;text-shadow:0 1px 2px #172d2580;font-size:clamp(24px,7vw,42px)}
.hint-square.existing-x:before{font-size:clamp(15px,4vw,23px);opacity:.85}
.hint-square.clear-mark:after{content:'';position:absolute;width:80%;height:2px;background:#ffc34a;transform:rotate(-35deg)}
#hint-legend{flex-shrink:0;text-align:center;font-size:13px;line-height:1.35;margin:0 2px;color:#f3e7de}
.hint-actions{display:flex;gap:10px;flex-shrink:0}
.hint-actions button{border:0;border-radius:30px;min-height:52px;padding:12px 20px;font-size:17px;font-weight:750}
#hint-advance{background:#f49b26;color:#33200d;flex:1}
#hint-previous{background:#5d5254;color:#fff}
@media(max-height:660px){#hint-dialog[open]{gap:6px}.hint-card{padding:10px 14px}.hint-card h2{font-size:18px;margin-bottom:5px}#hint-explanation{font-size:14px;line-height:1.3}#hint-detail{margin-top:5px}.hint-actions button{min-height:46px;padding:9px 16px}}

.hint-square.conflict.candidate{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #f34f67}