:root{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",sans-serif;color:#303337;background:#f3f3f3;font-synthesis:none;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}body{margin:0;overflow:hidden;overscroll-behavior:none;height:100vh;height:100dvh;display:grid;place-items:center}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #675000;outline-offset:5px}::selection{background:#ffc800;color:#303337}
#device{height:min(870px,calc(100dvh - 36px));aspect-ratio:393/852;padding:8px;background:#252525;border-radius:52px;box-shadow:0 15px 45px #00000020,inset 0 0 0 2px #a6a39d,inset 0 0 0 4px #64635f;position:relative}
#screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:44px;background:white;isolation:isolate;container-type:inline-size}
.side-key{position:absolute;display:block;background:#73716b;border-radius:2px;width:3px;left:-2px}.action-key{top:16%;height:3%}.volume-up{top:23%;height:6%}.volume-down{top:31%;height:6%}.power-key{left:auto;right:-2px;top:26%;height:10%}
#island{position:absolute;z-index:5;top:3.05cqw;left:50%;transform:translateX(-50%);width:31%;height:4.25%;max-height:37px;border-radius:30px;background:#050505;pointer-events:none}.lens{position:absolute;right:11%;top:50%;transform:translateY(-50%);width:3.05cqw;height:3.05cqw;border-radius:50%;background:radial-gradient(circle at 38% 34%,#283c64 0 9%,#111b30 15% 33%,#080b12 40% 65%,#14161b 70%)}
#game,#lock{position:absolute;inset:0;width:100%;height:100%}#game{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#board{width:100%;height:auto;aspect-ratio:2/1;overflow:visible;touch-action:none;user-select:none;-webkit-user-select:none}#result{position:absolute;bottom:18%;text-align:center}#replay{border:0;background:#f2f2ef;border-radius:50%;width:48px;height:48px;display:grid;place-items:center}#replay:active{transform:scale(.94)}
#lock{background:#fffef8;touch-action:none;user-select:none;-webkit-user-select:none;z-index:2}#lock.dragging{transition:none}.wallpaper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.status-icons{position:absolute;right:7%;top:5.6cqw;width:19%;color:#252720}.status-icons svg{display:block;width:100%}#clock{position:absolute;top:11%;left:0;width:100%;font-size:clamp(64px,25cqw,100px);font-weight:650;line-height:1;letter-spacing:-.035em;text-align:center;color:#403c24;font-variant-numeric:tabular-nums}#clock>span{display:inline-block;transform:scaleX(1.18);transform-origin:center}#unlock{position:absolute;bottom:0;left:50%;transform:translateX(-50%);border:0;background:transparent;width:50%;height:35px;display:grid;place-items:center;padding:0}#unlock span{display:block;width:74%;height:5px;background:#343120;border-radius:99px}
.sr-only,.keyboard-only:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.keyboard-only:focus{position:absolute;bottom:20px;background:white;border:2px solid #303337;border-radius:12px;padding:12px}
@media(max-width:600px),(hover:none) and (pointer:coarse){body{background:#fffef8}#device{width:100%;height:100dvh;aspect-ratio:auto;padding:0;border-radius:0;background:transparent;box-shadow:none}#screen{border-radius:0}.side-key{display:none}#island{display:none}.status-icons{top:max(20px,env(safe-area-inset-top))}#clock{top:max(11%,calc(env(safe-area-inset-top) + 32px))}#unlock{bottom:env(safe-area-inset-bottom)}}
@media(max-height:460px) and (hover:none){#clock{font-size:64px;top:8%}}
@media(prefers-reduced-motion:reduce){#lock{transition:none}}

/* Layered unlock; only the active gesture keeps compositor hints. */
#clock{transform-origin:50% 50%}#board{transform-origin:50% 50%}#game{opacity:0}.wallpaper{transform-origin:50% 50%}.unlock-moving #lock,.unlock-moving #game{will-change:opacity}.unlock-moving #clock,.unlock-moving .wallpaper,.unlock-moving #board{will-change:transform,opacity}

/* Campaign uses the approved SVG art within the existing lock-screen shell. */
#game{padding:0;display:block;overflow:hidden;touch-action:none}#play-page,#next-scene{position:absolute;inset:0;background:white}#board{width:100%;height:100%;aspect-ratio:auto;overflow:hidden;outline-offset:-4px}#board:focus:not(:focus-visible){outline:none}
#next-scene[hidden],#outro-prompt[hidden]{display:none}#next-scene{z-index:2;outline:0}
#settings,#reset{position:absolute;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#fff0bd;box-shadow:none;color:#70531e;border:1px solid #f0d98c;padding:10px}
#settings{right:7%;top:max(8%,env(safe-area-inset-top))}#reset{left:50%;bottom:max(8%,env(safe-area-inset-bottom));transform:translateX(-50%)}#settings svg,#reset svg{width:23px;height:23px;stroke-width:2.4}#settings:hover,#reset:hover{background:#ffe291}#settings:active{transform:scale(.94)}#reset:active{transform:translateX(-50%) scale(.94)}
#outro-prompt{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:25%;width:50%;height:36px;background:transparent;border:0;display:grid;place-items:center;padding:0}#outro-prompt span{width:70%;height:5px;border-radius:4px;background:#303337}
dialog{position:fixed;margin:0;transform:translate(-50%,-50%);background:#fff;border:1px solid #e5c36b;border-radius:22px;box-shadow:none;color:#594016;padding:24px;max-width:calc(100vw - 40px)}dialog::backdrop{background:#39290f66}dialog h2{margin:0 0 20px;font-size:20px}dialog label{display:flex;align-items:center;justify-content:space-between;margin:20px 0}dialog button{background:#fff0bd;border:1px solid #e5c36b;border-radius:12px;color:#594016;padding:10px 16px;min-height:44px}
dialog input{appearance:none;width:46px;height:28px;border-radius:20px;background:#e5d5a6;position:relative;cursor:pointer}dialog input:before{content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;background:white;border-radius:50%;transition:transform .15s}dialog input:checked{background:#f7cb39}dialog input:checked:before{transform:translateX(18px)}dialog input:focus-visible{outline:3px solid #9c6e13;outline-offset:3px}.eye{cursor:grab}.eye:active{cursor:grabbing}
@media(prefers-reduced-motion:reduce){dialog input:before{transition:none}}

#screen{container-type:size}#board{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(100cqw,49.7468cqh);height:auto;aspect-ratio:393/790;max-height:100%}

#board:focus-visible{outline:2px solid #f7cb39;outline-offset:-3px}#board[data-pointer=true]:focus{outline:none}

/* User direction: yellow square controls matching the character palette. */
#settings,#reset{border:0;border-radius:3px;background:#f7cb39;color:#fff;width:48px;height:48px;padding:11px;box-shadow:0 5px 0 #bb851b;transition:background .12s,box-shadow .12s;}
#settings:hover,#reset:hover{background:#ffda55}
#settings:active{transform:translateY(3px);box-shadow:0 2px 0 #bb851b}
#reset:active{transform:translate(-50%,3px);box-shadow:0 2px 0 #bb851b}
#settings svg,#reset svg{width:26px;height:26px}
dialog{border:3px solid #bb851b;border-radius:5px;background:#fff8df;box-shadow:0 6px 0 #594016;padding:22px}
dialog button{border:0;border-radius:3px;background:#f7cb39;color:#fff;box-shadow:0 4px 0 #bb851b;font-weight:700}
dialog button:active{translate:0 2px;box-shadow:0 2px 0 #bb851b}
dialog input,dialog input:before{border-radius:3px}
.crt-screen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8;}
.crt-screen[hidden]{display:none}

/* Three approved poses: mirrored waving sides, laughing center. */
#settlement{position:absolute;inset:0;z-index:4;overflow:hidden;touch-action:none}
#settlement[hidden]{display:none}
.win-wash{position:absolute;inset:0;background:linear-gradient(to bottom,#fff0 0%,#fff8e8ee 27%,#fff0bd 58%,#f7d45c 100%)}
@font-face{font-family:WinSpray;src:url('./assets/fonts/win-titles.woff2') format('woff2');font-weight:400;font-display:swap}
.win-title{position:absolute;top:19%;left:0;width:100%;margin:0;text-align:center;font-family:WinSpray,sans-serif;font-size:clamp(112px,41cqw,166px);line-height:1.15;font-weight:400;letter-spacing:-.035em;color:#ffda33;text-shadow:-2px 3px 0 #33230c;-webkit-text-stroke:2px #33230c;paint-order:stroke fill;transform:rotate(-9deg) skewX(-6deg);isolation:isolate}
.win-title:before{content:attr(data-title);position:absolute;inset:0;z-index:-1;-webkit-text-stroke:6px #fff;paint-order:stroke fill;color:#fff;text-shadow:-2px 3px 0 #fff}
.win-cast{position:absolute;inset:44% 0 18%;pointer-events:none}
.win-cast img{position:absolute;bottom:0;object-fit:contain;object-position:bottom;filter:none}
.win-center{width:57%;height:100%;left:21.5%;z-index:2}
.win-side{width:35%;height:74%;z-index:1}
.win-left{left:3%;transform:scaleX(-1)}
.win-right{right:3%;transform:none}
.win-next{position:absolute;bottom:max(8%,env(safe-area-inset-bottom));left:25%;width:50%;height:48px;border:0;border-radius:5px;background:#f7cb39;color:#fff;font-size:20px;font-weight:750;box-shadow:0 5px 0 #bb851b;z-index:3}
.win-next:active{translate:0 3px;box-shadow:0 2px 0 #bb851b}.win-next:disabled{cursor:default}
#settings{z-index:5}#reset{z-index:3}
#play-page:has(#settlement:not([hidden])) #reset{visibility:hidden}
#settlement.arriving .win-wash{animation:win-wash .7s cubic-bezier(.16,1,.3,1) both}
#settlement.arriving .win-cast{animation:win-rise .75s cubic-bezier(.16,1,.3,1) both}
#settlement.arriving .win-title{animation:win-title .5s .15s cubic-bezier(.16,1,.3,1) both}
#settlement.arriving .win-next{animation:win-fade .3s .5s both}
#settlement.leaving{animation:win-exit .46s cubic-bezier(.65,0,.35,1) both}
#board.level-enter{animation:board-enter .45s cubic-bezier(.16,1,.3,1) both}
@keyframes win-wash{from{opacity:0;translate:0 32%}to{opacity:1;translate:0 0}}
@keyframes win-rise{from{translate:0 110%;opacity:0}to{translate:0 0;opacity:1}}
@keyframes win-title{from{opacity:0;transform:translateY(24px) rotate(-9deg) skewX(-6deg) scale(.8)}to{opacity:1;transform:translateY(0) rotate(-9deg) skewX(-6deg) scale(1)}}
@keyframes win-fade{from{opacity:0}to{opacity:1}}
@keyframes win-exit{to{translate:0 -100%;opacity:0}}
@keyframes board-enter{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){#settlement.arriving .win-wash,#settlement.arriving .win-cast,#settlement.arriving .win-title,#settlement.arriving .win-next{animation:win-fade .1s both}#settlement.leaving{animation:win-fade .08s reverse both}#board.level-enter{animation:win-fade .1s both}}

/* Settings and ordered map reuse the approved yellow control styling. */
.dialog-close{position:absolute;right:10px;top:8px;width:44px;height:44px;padding:0;font-size:30px;line-height:1;background:transparent;color:#594016;box-shadow:none}
.dialog-close:active{box-shadow:none}dialog h2{padding-right:36px}
#restart{display:block;margin:26px auto 0;min-width:148px}
#map-open{position:absolute;bottom:max(8%,env(safe-area-inset-bottom));right:7%;min-width:64px;height:48px;padding:0 12px;background:#f7cb39;color:#fff;border:0;border-radius:3px;box-shadow:0 5px 0 #bb851b;font-weight:700;z-index:3}
#map-open:hover{background:#ffda55}#map-open:active{translate:0 3px;box-shadow:0 2px 0 #bb851b}
#play-page:has(#settlement:not([hidden])) #map-open{visibility:hidden}
#map-panel{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
#level-list{display:grid;gap:12px}#level-list button{width:100%;min-height:44px;font-size:20px}#level-list button[aria-current]{outline:2px solid #594016;outline-offset:2px}

#reset{left:calc(50% - 38px)}
#map-open{left:calc(50% + 38px);right:auto;transform:translateX(-50%);width:48px;min-width:48px;padding:11px;display:grid;place-items:center}
#map-open svg{width:26px;height:26px;fill:currentColor}

.final-settlement .win-title{top:15%;left:3%;width:94%;font-size:clamp(44px,15.8cqw,66px);line-height:1.25;-webkit-text-stroke:2px #33230c;text-shadow:-2px 3px #33230c;transform:rotate(-5deg)}
.final-settlement .win-title:before{-webkit-text-stroke:5px #fff;text-shadow:-2px 3px #fff}
.final-settlement .win-next{left:8%;width:84%;padding:10px 12px;height:auto;min-height:52px;font-size:clamp(14px,4cqw,17px);transition:background .2s,box-shadow .2s}
.final-settlement .win-next.confirmed{background:#a7c95a;box-shadow:0 5px 0 #617b36;cursor:default}
.hire-check{display:block;font-family:Arial,sans-serif;font-size:32px;line-height:32px;font-weight:900;animation:hire-check-pop .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes hire-check-pop{0%{opacity:0;scale:.3;rotate:-18deg}55%{opacity:1;scale:1.3;rotate:5deg}78%{scale:.92;rotate:-2deg}100%{scale:1;rotate:0deg}}
@media(prefers-reduced-motion:reduce){.hire-check{animation:none}.final-settlement .win-next{transition:none}}

.copy-status{position:absolute;bottom:2.5%;left:5%;width:90%;margin:0;text-align:center;color:#594016;font-size:14px;font-weight:650}.copy-status[hidden]{display:none}

.win-next:focus-visible{outline:2px solid #fff;outline-offset:3px}

#settlement:focus{outline:none}

body.loading #device{visibility:hidden}#loading-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#fff}#loading-screen[hidden]{display:none}#startup{padding:12px 20px;border:0;background:transparent;color:#594016;text-align:center;font-size:16px;font-weight:650;min-height:44px}#startup:disabled{cursor:wait;opacity:1}#unlock:disabled{opacity:.35;cursor:wait}