.game-errors{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:7px 11px;min-height:32px;border-radius:20px;border:1px solid var(--club-line);background:var(--surface);color:var(--sub);font-size:12px;font-weight:600;line-height:1.4}.game-errors.has-errors{color:#e4a29a;background:color-mix(in srgb,#d6847b 10%,var(--surface));border-color:color-mix(in srgb,#d6847b 35%,var(--club-line))}.game-main .game-top{flex-wrap:wrap}.game-main .mobile-play-status{margin-right:auto}.game-main .game-top .timer{flex:none}.result-open{display:block;grid-column:1;grid-row:auto;color:var(--mint);border:1px solid var(--club-line);border-radius:13px;background:var(--surface);padding:15px 20px;margin:14px 0;font-size:13px;min-height:48px}.result-open[hidden]{display:none}.game-main .result-open{order:9}.cat-eyes{transform-box:fill-box;transform-origin:center;transition:transform .13s;transform:scaleY(var(--cat-eye-scale,1))}.cell.cat-cheer>svg{animation:cat-head-cheer .85s var(--cat-delay,0s) ease-in-out}.cell.cat-peek>svg{animation:cat-head-peek 1.3s ease-in-out}.cell.cat-cheer{--cat-eye-scale:.28}.cell.cat-peek{--cat-eye-scale:.7}.cell.cat-cheer:after{content:'♪';position:absolute;top:0;right:9%;font-size:clamp(13px,2cqw,23px);line-height:1;color:#fff;pointer-events:none;z-index:4;animation:cat-note 1s var(--cat-delay,0s) both}.cell.cat-cheer .lock-badge,.cell.cat-peek .lock-badge{animation:none}.game-main:has(#pause-overlay:not([hidden])) .cell>svg{animation-play-state:paused}
@keyframes cat-head-cheer{0%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-6%) rotate(-9deg)}48%{transform:translateY(-3%) rotate(8deg)}73%{transform:translateY(-4%) rotate(-4deg)}}@keyframes cat-head-peek{0%,100%{transform:rotate(0)}20%,50%{transform:rotate(9deg) translateX(2%)}73%{transform:rotate(-5deg)}}@keyframes cat-note{0%,100%{opacity:0;transform:translateY(4px) rotate(-12deg)}22%,65%{opacity:.9;transform:translateY(-8px) rotate(9deg)}}
/* The result is a small illustrated scene, with the next action always in view. */
dialog:has(.result-panel){width:min(960px,calc(100vw - 32px));max-width:960px;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--club-line);border-radius:30px;overflow:hidden;background:var(--surface);box-shadow:0 28px 100px #0005;text-align:left}
dialog:has(.result-panel) #modal-content{max-height:calc(100dvh - 32px);overflow:auto}
dialog:has(.result-panel) .close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:1px solid var(--club-line);border-radius:50%;background:var(--surface);color:var(--sub);z-index:10;display:grid;place-items:center;font-size:22px}
.result-panel{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(230px,.86fr) minmax(0,1.35fr);color:var(--text);background:var(--surface);overflow:hidden}
.result-copy{padding:36px 38px 24px;min-width:0;position:relative;z-index:2}
.result-heading{padding-right:12px}.result-panel .result-context{margin:0 0 14px;color:var(--mint);font-size:12px;line-height:1.6;font-weight:650;max-width:90%}.result-context>span{color:var(--sub);font-weight:400;white-space:nowrap}
.result-eyebrow{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.result-panel h2{font-family:var(--club-title-font,'Trebuchet MS',sans-serif);font-weight:750;font-size:clamp(27px,2.7vw,37px);letter-spacing:-1.2px;line-height:1.15;margin:0 0 10px;color:var(--text)}
.result-panel .result-line{font-size:14px;line-height:1.6;color:var(--sub);margin:0 0 20px}
.result-stats{display:flex;gap:30px;margin:0 0 19px;padding:16px 0;border-top:1px solid var(--club-line);border-bottom:1px solid var(--club-line)}
.result-stats>div{flex:1;min-width:0}.result-stats small{display:block;font-size:11px;color:var(--sub);margin-bottom:7px}.result-stats strong{display:block;font-family:var(--club-title-font,'Trebuchet MS',sans-serif);font-size:24px;color:var(--text);line-height:1.2;letter-spacing:-.6px}.result-stats #result-time{font-variant-numeric:tabular-nums;font-size:22px;white-space:nowrap}
.result-reward{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px;margin:0 0 20px;padding:0;background:none;border:0;color:var(--mint)}
.result-reward>strong{font-family:var(--club-title-font,'Trebuchet MS',sans-serif);font-size:25px;letter-spacing:-.6px;line-height:1.25}.result-reward>span{font-size:12px;color:var(--sub)}
.result-actions{display:grid;gap:9px}.result-actions .result-primary{display:block;width:100%;min-height:52px;padding:14px 18px;font-size:15px;font-weight:700;border:0;border-radius:16px;background:var(--orange);color:#483024;box-shadow:0 4px 0 color-mix(in srgb,var(--orange) 65%,#594132);transition:transform .15s,box-shadow .15s}
.result-actions .result-primary:hover{filter:brightness(1.04)}.result-actions .result-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #ad7143}.result-actions .result-primary:disabled{opacity:.55;box-shadow:none;cursor:wait}
.result-menu{min-height:38px;padding:8px 12px;border:0;background:none;color:var(--sub);font-size:13px;border-radius:12px}.result-menu:hover{color:var(--text);background:var(--club-bg)}
.result-panel .result-secondary{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:1px 0 0;flex-wrap:wrap}
.result-secondary>button{flex:1;min-width:100px;min-height:40px;padding:9px 6px;font-size:12px;border:0;border-radius:11px;color:var(--sub);background:none}
.result-panel .result-secondary #result-ranking{grid-column:auto;flex-basis:auto;min-height:40px}.result-secondary>button:hover{color:var(--mint);background:var(--club-bg)}
.result-panel button:focus-visible,.result-details>summary:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.result-details{margin-top:14px;border-top:1px solid var(--club-line);padding-top:6px}.result-details>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:5px 0;font-size:11px;line-height:1.5;color:var(--sub);cursor:pointer;list-style:none;border-radius:6px}.result-details>summary::-webkit-details-marker{display:none}.result-details[open]>summary>span:last-child{transform:rotate(180deg)}
.result-panel .result-sync{margin:7px 0 0;font-size:12px;line-height:1.7;color:var(--sub)}
.result-panel .result-loss-note{font-size:12px;line-height:1.7;margin:0 0 20px;color:var(--sub)}
.result-panel .exp-chapter-reward{display:flex;align-items:center;gap:12px;padding:12px;margin:0 0 18px;background:color-mix(in srgb,var(--mint) 7%,var(--surface));border-radius:18px;border:1px solid var(--club-line);font-size:13px;text-align:left}.result-panel .exp-chapter-reward[hidden]{display:none}.result-panel .exp-chapter-reward>svg{width:53px;height:58px;flex:none;margin:0}.exp-chapter-reward>span{display:grid;gap:5px}.exp-chapter-reward small{font-size:11px;line-height:1.5;color:var(--sub)}
.result-share-status:empty{display:none}.result-panel .result-share-status{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--sub)}.result-share-fallback{display:block;width:100%;height:115px;resize:vertical;padding:12px;margin-top:10px;border:1px solid var(--club-line);border-radius:12px;background:var(--club-bg);color:var(--text);font-size:12px;line-height:1.6}.result-share-fallback[hidden]{display:none}
.result-visual{position:relative;min-height:420px;background:color-mix(in srgb,var(--orange) 10%,var(--surface));overflow:hidden}.result-loss .result-visual{background:color-mix(in srgb,#b49acb 12%,var(--surface))}
.result-scene{position:absolute;inset:0;isolation:isolate;overflow:hidden}.scene-halo{position:absolute;width:250px;height:260px;left:50%;top:22%;transform:translateX(-50%) rotate(-10deg);border-radius:47% 53% 44% 56%;background:color-mix(in srgb,var(--orange) 14%,var(--surface));z-index:-1}.scene-retry .scene-halo{background:color-mix(in srgb,#b49acb 16%,var(--surface))}
.scene-thread{position:absolute;inset:0;width:100%;height:100%;color:color-mix(in srgb,var(--orange) 65%,var(--sub));opacity:.55}.scene-retry .scene-thread{color:#b49acb}.scene-host{position:absolute;left:12%;bottom:24%;width:190px;height:240px;z-index:2}.scene-host>svg{width:100%;height:100%;overflow:visible;animation:result-arrival .65s cubic-bezier(.2,.8,.3,1) both}.scene-friend{position:absolute;right:3%;bottom:15%;width:166px;height:177px;z-index:3}.scene-friend>svg{width:100%;height:100%;animation:result-arrival .7s .08s cubic-bezier(.2,.8,.3,1) both}.scene-yarn{position:absolute;left:16%;bottom:9%;width:99px;height:91px;z-index:4;transform:rotate(-12deg)}.scene-yarn>svg{width:100%;height:100%;animation:result-yarn .9s .12s ease-out both}.scene-floor{position:absolute;left:5%;right:5%;bottom:13%;height:18px;background:#5c46551a;filter:blur(6px);border-radius:50%;z-index:0}.scene-retry .scene-host{width:220px;height:234px;left:18%;bottom:25%}.scene-retry .scene-yarn{left:19%;bottom:16%;width:85px}.result-scene .buddy-head,.result-scene .buddy-tail{animation-iteration-count:1}
.result-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}.result-confetti .joy-flying{position:absolute;animation-name:result-confetti-fall}
@keyframes result-arrival{from{opacity:0;transform:translateY(18px) rotate(-5deg)}70%{opacity:1;transform:translateY(-4px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes result-yarn{from{transform:translateX(-35px) rotate(-45deg);opacity:0}to{transform:translateX(0) rotate(0);opacity:1}}
@keyframes result-confetti-fall{0%{opacity:0;transform:translate(0,-25px) rotate(0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--joy-drift),760px) rotate(var(--joy-turn))}}
/* Board portraits stay readable even at twelve columns. */
.play-eye-left{transform-box:fill-box;transform-origin:center;transform:scaleY(var(--play-left-eye,1));transition:transform .12s}
.play-ear-left{transform-box:fill-box;transform-origin:80% 90%;transform:rotate(var(--play-ear-angle,0deg));transition:transform .15s}
.play-ear-right{transform-box:fill-box;transform-origin:20% 90%;transform:rotate(calc(var(--play-ear-angle,0deg) * -.5));transition:transform .15s}
.cell.cat-wink{--cat-eye-scale:1;--play-left-eye:.12}.cell.cat-curious{--play-ear-angle:-9deg}.cell.cat-celebrate{--play-ear-angle:-5deg}.cell>.play-cat-art{filter:drop-shadow(0 2px 1px #654a3926)}.ghost-cat>.play-cat-art{filter:grayscale(1);opacity:.58}
@media(min-width:1700px){.game-errors{font-size:15px;min-height:41px;padding:9px 14px}.result-open{font-size:15px}.game-main .game-top{gap:14px}}
@media(min-width:651px){.game-main .game-card,.game-main[data-play-mode='expedition'] .game-card{grid-template-areas:'status tools' 'progress tools' 'notes tools' 'board tools' 'message tools' 'result tools' 'tip tools'}.game-main .result-open{grid-area:result}}
@media(min-width:651px) and (max-width:850px){.result-panel{grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr)}.result-copy{padding:30px 25px 20px}.result-panel h2{font-size:29px}.result-panel .result-context>span{display:block}.scene-host{width:160px;height:203px;left:3%;bottom:30%}.scene-friend{width:136px;height:145px;right:4%;bottom:20%}.scene-halo{width:210px;height:230px}.scene-yarn{left:9%;bottom:15%}.scene-retry .scene-host{left:6%;width:195px;height:207px}}
@media(max-width:650px){
 .game-main .game-top{gap:7px;margin-bottom:6px}.game-errors{font-size:10px;min-height:32px;padding:7px 9px}.game-main .mobile-play-status{font-size:11px}.game-main .game-top .timer{font-size:11px;gap:5px;padding:7px 9px}
 dialog:has(.result-panel){width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:26px}dialog:has(.result-panel) #modal-content{max-height:calc(100dvh - 24px)}
 .result-panel{grid-template-columns:1fr}.result-visual{height:150px;min-height:0}.result-copy{padding:21px 23px 17px}.result-heading{padding:0}.result-panel .result-context{font-size:11px;margin-bottom:9px;max-width:100%}.result-panel h2{font-size:29px;margin-bottom:8px}.result-panel .result-line{font-size:13px;margin-bottom:15px}
 .result-stats{gap:16px;margin-bottom:15px;padding:12px 0}.result-stats strong{font-size:23px}.result-stats #result-time{font-size:21px}.result-reward{margin-bottom:17px}.result-reward>strong{font-size:24px}
 .result-actions .result-primary{min-height:52px;font-size:15px}.result-menu{font-size:13px;min-height:36px}.result-secondary>button{min-height:42px;font-size:12px}.result-details{margin-top:9px;padding-top:3px}.result-details>summary{min-height:32px;font-size:11px}.result-panel .exp-chapter-reward{margin-bottom:15px}
 .scene-host{left:26%;bottom:1%;width:103px;height:132px}.scene-friend{width:111px;height:118px;right:12%;bottom:-4%}.scene-yarn{left:14%;bottom:0;width:66px;height:61px}.scene-halo{width:180px;height:180px;left:52%;top:-16px}.scene-floor{bottom:0}.scene-thread{height:210px;top:-35px}.scene-retry .scene-host{left:38%;bottom:-5%;width:142px;height:151px}.scene-retry .scene-yarn{left:23%;bottom:-4%;width:62px}
 .result-open{width:100%;margin:8px 0;min-height:48px}
}
@media(max-width:650px) and (max-height:740px){.result-visual{height:108px}.scene-host{width:80px;height:101px;left:27%}.scene-friend{width:90px;height:96px;right:17%}.scene-yarn{width:55px;height:51px;left:15%}.scene-retry .scene-host{height:115px;width:108px}.result-copy{padding-top:16px;padding-bottom:13px}.result-panel h2{font-size:27px}.result-panel .result-line{margin-bottom:12px}.result-stats{padding:10px 0;margin-bottom:12px}.result-reward{margin-bottom:13px}.result-details{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.cell.cat-cheer>svg,.cell.cat-peek>svg,.cell.cat-cheer:after,.cat-eyes,.result-scene *,.result-confetti .joy-flying,.play-eye-left,.play-ear-left,.play-ear-right{animation:none!important;transition:none!important}.cell.cat-cheer:after{display:none}}
:root[data-motion=reduced] :is(.result-scene *,.result-confetti .joy-flying,.play-eye-left,.play-ear-left,.play-ear-right){animation:none!important;transition:none!important}
:root[data-motion=reduced] .cell.cat-cheer:after{display:none}

/* A finished puzzle remains fully readable while its cells stay locked. */
.game-main:has(.result-open:not([hidden])) #board .cell:disabled{opacity:1;cursor:default}

/* Each portrait inherits the palette actually painted by its region. */
:where(#board .cell){--play-coat:var(--color)}
#board .cell .play-cat-art{--play-stripe:color-mix(in srgb,var(--play-coat) 68%,#283449);color:var(--play-coat)}