/* Pixel Ultima by DeeJayLSP, SIL OFL 1.1: ./pixel-ultima-OFL.txt.
   Source: https://github.com/DeeJayLSP/pixel-ultima-font */
@font-face{font-family:pixel-ultima-ui;src:url('./pixel-ultima-regular.woff?v=1') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:pixel-ultima-ui;src:url('./pixel-ultima-bold.woff?v=1') format('woff');font-style:normal;font-weight:700;font-display:swap}
*{box-sizing:border-box}html{background:#0b0d10;color:#fff;font-family:monospace}body{margin:0;min-height:100dvh;display:grid;place-items:center;overscroll-behavior:none}/* Nine-slice stone: corners stay fixed; edge segments repeat to fit the panel. */
main{width:min(100%,900px,calc((100dvh - 295px)*.778 + 24px));min-width:280px;padding:2px 2px max(3px,env(safe-area-inset-bottom));border:12px solid #4a4640;border-image:url('./stone-panel.png?v=128') 15% fill / 12px / 0 round;background:#242322;box-shadow:0 8px 40px #000b}
#resources,footer{position:relative;background:#292827;border:10px solid #4a4640;border-image:url('./stone-panel.png?v=128') 15% fill / 10px / 0 round;border-radius:0;box-shadow:0 2px 4px #0009}
#resources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0 0 3px;font-weight:bold}
#resources span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;border-right:1px solid color-mix(in srgb, #100e0a66 var(--divider-strength), transparent);box-shadow:1px 0 color-mix(in srgb, #b3a78c20 var(--divider-strength), transparent)}
#resources span:last-child{border:0;box-shadow:none}
#resources b{font-size:clamp(26px,7.2vw,34px);line-height:1;color:#fff3cd;text-shadow:2px 2px #090d10,0 -1px #786c50;letter-spacing:-1px}
#resources canvas{width:52px;height:48px;filter:drop-shadow(2px 2px #0b1116)}
canvas{image-rendering:pixelated}#world{display:block;width:100%;aspect-ratio:7/9;background:#000;touch-action:none;border:2px solid #171f23;cursor:pointer}#message{font-size:11px;min-height:28px;margin:9px 0 2px;color:#b9c3ac;line-height:14px}footer{margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 2px 5px}nav{display:flex;gap:8px;flex:1;min-width:0}button{--edge:#909793;--light:#626d73;--dark:#313d45;border:2px solid #090d08;border-radius:3px;box-shadow:0 3px 0 #060906,inset 0 0 0 1px var(--edge),inset 0 3px #ffffff25,inset 0 -4px #0005;background:linear-gradient(var(--light),var(--dark));color:#f6f2cf;cursor:pointer;touch-action:manipulation;font:bold 25px monospace;min-height:44px;text-shadow:0 2px #182015;transition:filter .1s,transform .1s}button:active:not(:disabled){filter:brightness(1.2);transform:translateY(2px);box-shadow:0 1px 0 #060906,inset 0 0 0 1px var(--edge),inset 0 2px 5px #0005}button:focus-visible{outline:2px solid #f3d98b;outline-offset:2px}button:disabled{cursor:default;filter:brightness(.72)}nav button{width:calc((100% - 16px)/3);aspect-ratio:1;padding:6px;min-width:0;max-width:80px}nav button:first-child{--edge:#7197ed;--light:#304fa0;--dark:#182852}nav button:nth-child(2){--edge:#d69371;--light:#a34b37;--dark:#532920}nav button:nth-child(3){--edge:#b9ae80;--light:#72725b;--dark:#393f30}nav canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 0 #0007)}.pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px;flex-shrink:0}.pad button{padding:0;min-height:44px}.pad button:nth-child(1){grid-column:2}.pad button:nth-child(2){grid-column:1;grid-row:2}.pad button:nth-child(3){grid-column:2;grid-row:2}.pad button:nth-child(4){grid-column:3;grid-row:2}@media(max-width:350px){main{padding:0;border-width:8px;border-image-width:8px}#resources,footer{border-width:7px;border-image-width:7px}footer{gap:6px;padding:3px 0 5px}nav{gap:4px}nav button{width:calc((100% - 8px)/3);padding:3px}#resources canvas{width:46px;height:44px}}

@media(min-width:700px){#resources canvas{width:60px;height:54px}#resources b{font-size:36px}main{border-width:16px;border-image-width:16px}#resources,footer{border-width:12px;border-image-width:12px}footer{padding:4px 10px 6px}.pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px)}}

/* The world keeps its layout while hidden; reveal only after data and texture are ready. */
#resources{min-height:calc(71px + clamp(26px,7.2vw,34px))}
main{opacity:1;transition:opacity .45s ease-out}
body.booting main{opacity:0;pointer-events:none}
#loader{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at center,#242922 0,#0b0d10 65%);opacity:1;transition:opacity .4s ease;pointer-events:auto}
#loader.finished{opacity:0;pointer-events:none}
#loader[hidden]{display:none}
.loading-emblem{width:76px;height:76px;display:grid;place-items:center;border:2px solid #a4976b;background:#282b26;box-shadow:inset 0 0 0 4px #121610,0 0 38px #a5b37719;animation:loading-glow 1.5s ease-in-out infinite alternate}
.loading-emblem canvas{width:56px;height:56px}
#loading-text{margin:0;color:#dfd6b8;font-size:14px;letter-spacing:1px;text-align:center;padding:0 20px;max-width:320px;line-height:1.5}
.loading-track{width:190px;height:8px;padding:2px;background:#131610;box-shadow:0 0 0 1px #615b45,inset 0 1px #000}
.loading-track i{display:block;height:4px;width:90%;background:linear-gradient(90deg,#777b43,#d7cf88);box-shadow:0 0 8px #c2c47740;transform:scaleX(1);transform-origin:left;animation:loading-progress 1s cubic-bezier(.2,.6,.3,1) both}
#loader.finished .loading-track i{animation:none;width:100%}
#loading-retry{padding:5px 16px;font-size:14px}
@keyframes loading-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes loading-glow{to{box-shadow:inset 0 0 0 4px #121610,0 0 38px #a5b37738}}
@media(max-width:350px){#resources{min-height:calc(61px + clamp(26px,7.2vw,34px))}}
@media(min-width:700px){#resources{min-height:117px}}
@media(prefers-reduced-motion:reduce){main,#loader{transition:opacity .12s}.loading-emblem,.loading-track i{animation:none}}

/* Darken only stone surfaces; content stays above the tint. */
main{--stone-edge:12px;position:relative;isolation:isolate}
#resources,footer{--stone-edge:10px;isolation:isolate}
main::before,#resources::before,footer::before{content:"";position:absolute;inset:calc(-1 * var(--stone-edge));background:#00000030;pointer-events:none;z-index:0}
main>*,#resources>*,footer>*{position:relative;z-index:1}
@media(max-width:350px){main{--stone-edge:8px}#resources,footer{--stone-edge:7px}}
@media(min-width:700px){main{--stone-edge:16px}#resources,footer{--stone-edge:12px}}

/* Controls never surrender their width to the directional pad. */
footer{container-type:inline-size;--menu-size:max(44px,calc((100cqw - 22px)/5.5));--arrow-size:calc(var(--menu-size)*.833333);flex-wrap:wrap;gap:10px;justify-content:space-between}
nav{display:grid;grid-template-columns:repeat(3,var(--menu-size));gap:4px;flex:0 0 auto}
nav button{width:var(--menu-size);height:var(--menu-size);min-width:var(--menu-size);min-height:var(--menu-size);max-width:none;padding:5px;aspect-ratio:1}
.pad{grid-template-columns:repeat(3,var(--arrow-size));grid-template-rows:repeat(2,var(--arrow-size));gap:3px}
.pad button{width:var(--arrow-size);height:var(--arrow-size);min-height:var(--arrow-size)}
@media(max-width:699px){
 body{display:block}
 main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;min-height:360px;width:100%;min-width:0;margin:0;--stone-edge:6px;border-width:6px;border-image-width:6px;padding:2px 2px max(4px,env(safe-area-inset-bottom));box-shadow:none}
 #world{width:100%;height:100%;min-height:0;aspect-ratio:auto}
 #resources,footer{--stone-edge:6px;border-width:6px;border-image-width:6px}
 #resources{min-height:calc(63px + clamp(26px,7.2vw,34px))}
 footer{padding:4px 3px 6px;gap:8px;flex-wrap:nowrap}
 nav{gap:4px}
 nav button{padding:5px}
}
@media(max-width:319px){footer{flex-wrap:wrap;justify-content:center}}

/* VGA keycaps: solid faces, stepped bevels and pixel arrows. */
footer{z-index:3;overflow:visible;gap:6px;padding-top:12px;padding-bottom:8px;align-items:center}
footer button{--face:#77766c;--bevel-light:#c4c3ac;--bevel-mid:#979888;--bevel-dark:#373a32;background:var(--face);border:3px solid #090c09;border-radius:0;box-shadow:inset 3px 3px var(--bevel-light),inset -3px -3px var(--bevel-dark),inset 5px 5px var(--bevel-mid),0 3px 0 #080b08;transition:none;text-shadow:none}
nav button:first-child{--face:#2342b3;--bevel-light:#8eacff;--bevel-mid:#5269cf;--bevel-dark:#111d58}
nav button:nth-child(2){--face:#ad3025;--bevel-light:#f4a178;--bevel-mid:#d4563c;--bevel-dark:#551c18}
nav button:nth-child(3){--face:#727568;--bevel-light:#c6c9aa;--bevel-mid:#969b87;--bevel-dark:#353b31}
footer button:active:not(:disabled){filter:none;transform:translateY(2px);box-shadow:inset 3px 3px var(--bevel-dark),inset -2px -2px var(--bevel-light),0 1px #080b08}
nav canvas{filter:none}
.pad{position:relative;grid-template-rows:var(--arrow-size);gap:4px}
.pad button{display:grid;place-items:center}
.pad button:nth-child(1){position:absolute;left:calc(var(--arrow-size) + 4px);bottom:calc(100% + 4px);grid-column:auto;grid-row:auto}
.pad button:nth-child(2),.pad button:nth-child(3),.pad button:nth-child(4){grid-row:1}
.pad canvas{width:64%;height:64%;pointer-events:none}
.pad [data-action="left"] canvas{transform:rotate(-90deg)}
.pad [data-action="down"] canvas{transform:rotate(180deg)}
.pad [data-action="right"] canvas{transform:rotate(90deg)}

/* Keep icon insets proportional as the whole control panel grows. */
nav button{padding:max(5px,calc(var(--menu-size)*.09))}

/* Native low-resolution stone, enlarged without smoothing. */
main,#resources,footer{image-rendering:pixelated}
@media(min-width:700px) and (pointer:fine){
 main{--stone-side:clamp(28px,3vw,48px);border-left-width:var(--stone-side);border-right-width:var(--stone-side);border-image-width:16px var(--stone-side)}
 main::before{inset:-16px calc(-1 * var(--stone-side))}
}

/* Desktop uses the same bounded viewport layout as mobile. */
@media(min-width:700px){
 html,body{height:100dvh;min-height:0;overflow:clip}
 main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;min-height:0;margin:0}
 #world{width:100%;height:100%;min-height:0;aspect-ratio:auto}
}

/* Tight stone surround and a recessed control shelf instead of a second frame. */
main{--frame-x:clamp(14px,4vw,20px);--frame-y:14px;padding:0;border-width:var(--frame-y) var(--frame-x);border-image-slice:10% fill;border-image-width:var(--frame-y) var(--frame-x)}
main::before{inset:calc(-1 * var(--frame-y)) calc(-1 * var(--frame-x))}
#resources{border-image-slice:10% fill}
footer{--stone-edge:0px;margin-top:0;border:0;border-image:none;background-color:#1c1c19;background-image:linear-gradient(#00000038,#00000018),url('./stone-panel.png?v=128');background-position:center;background-size:100% 100%,145% 700%;background-repeat:no-repeat;box-shadow:inset 0 6px #080a08,inset 4px 0 #10120e,inset -4px 0 #10120e,inset 0 -2px #555247;padding:14px 6px max(10px,env(safe-area-inset-bottom))}
footer::before{inset:0;background:#00000018}
@media(min-width:700px){main{--frame-x:16px;--frame-y:26px}}
@media(min-width:700px) and (pointer:fine){main{--frame-x:clamp(28px,3vw,48px);--frame-y:clamp(26px,2.5vw,40px)}}

/* Brief client-side messages on a compact hanging banner. */
#hint{position:absolute;left:50%;top:112px;z-index:6;width:min(calc(100% - 24px),480px);pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-7px);transition:opacity .7s ease,transform .7s ease,visibility 0s .7s;background:#632e32;border:2px solid #c4a263;box-shadow:inset 0 3px #91504a,inset 0 -4px #351f24;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),56% calc(100% - 7px),50% 100%,44% calc(100% - 7px),0 calc(100% - 7px));padding-bottom:7px}
#hint.visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s ease,transform .18s ease,visibility 0s}
#hint-text{display:block;width:100%;height:auto;image-rendering:pixelated}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
footer button.is-locked{filter:brightness(.72);cursor:default}
@media(prefers-reduced-motion:reduce){#hint{transition:none}}

#hint-close{position:absolute;top:2px;right:2px;width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff0c6;font:bold 28px/32px monospace;text-shadow:2px 2px #251519;pointer-events:none;cursor:pointer}
#hint.visible #hint-close{pointer-events:auto}
#hint-close:active{transform:translateY(1px);filter:none;background:#351f24}
@media(prefers-reduced-motion:reduce){#hint,#hint.visible{transition:none}}

/* Resources share the outer stone surround, without a nested frame. */
#resources{--stone-edge:0px;border:0;border-image:none;background-color:#1c1c19;background-image:linear-gradient(#00000038,#00000018),url('./stone-panel.png?v=128');background-position:center;background-size:100% 100%,145% 700%;background-repeat:no-repeat;box-shadow:inset 0 4px #080a08,inset 0 -2px #11140e;padding:4px 0 6px}
#resources::before{inset:0;background:#00000018}

/* Keep held touch arrows captured without browser pan or selection. */
.pad button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Compact city planning controls occupy less than one map row. */
#city-bar{position:absolute;left:7px;bottom:110px;z-index:5;display:flex;gap:4px;width:55%;height:clamp(32px,calc(var(--cell-size)*.8),64px)}
#city-bar[hidden],#unprotected[hidden]{display:none}
#city-bar button{min-width:0;min-height:0;flex:1;padding:2px;background:#404d36;border:2px solid #acac7b;border-radius:0;box-shadow:inset 2px 2px #697850,inset -2px -2px #1b291b}
#city-bar button:last-child{background:#654033;border-color:#b19769}
#city-bar button.invalid{filter:brightness(.75)}
#city-bar canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
#build-toggle[aria-pressed="true"]{outline:2px solid #ecda86;outline-offset:-3px;filter:brightness(1.2)}
#unprotected{position:absolute;top:100px;left:8px;z-index:4;width:calc(var(--cell-size,40px)*.88);height:calc(var(--cell-size,40px)*.88);min-height:0;padding:calc(var(--cell-size,40px)*.1);opacity:.7;background:#1b231de6;border:1px solid #817044;border-radius:0;box-shadow:inset 1px 1px #ccb77355,inset -1px -1px #080e09}
#unprotected canvas{width:100%;height:100%;display:block}

/* Context actions replace the on-screen movement pad. */
footer{--menu-size:max(44px,calc((100cqw - 22px)/5));flex-wrap:nowrap}
.castle-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-left:auto;flex:0 0 auto}
.castle-actions[hidden]{display:flex;visibility:hidden;pointer-events:none}
.castle-actions button{width:var(--arrow-size);height:var(--arrow-size);min-width:var(--arrow-size);min-height:var(--arrow-size);padding:7px;display:grid;place-items:center}
.castle-actions canvas{width:100%;height:100%;display:block;pointer-events:none}
#castle-upgrade{--face:#55603d;--bevel-light:#c9d091;--bevel-mid:#8e9c67;--bevel-dark:#29361f}
#castle-enter{--face:#4c5f68;--bevel-light:#bfd0c4;--bevel-mid:#829d9b;--bevel-dark:#26363c}
#castle-upgrade.is-unavailable{filter:brightness(.55) saturate(.45);cursor:help}
#castle-enter[aria-expanded="true"]{outline:2px solid #e6d780;outline-offset:-3px}

/* A castle is a separate screen; the world remains server-authoritative. */
#castle-view[hidden],#world[hidden]{display:none}
#castle-view{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px;background:#1c241b;color:#eee5c6;font:16px/1.35 monospace;scrollbar-color:#7f8461 #1c241b}
main.inside-castle{grid-template-rows:auto minmax(0,1fr)}
.inside-castle footer{display:none}
.castle-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:2px solid color-mix(in srgb, #5d6848 var(--divider-strength), transparent);padding-bottom:8px}
.castle-heading h1{font-size:20px;margin:0;color:#f5dda0;text-shadow:2px 2px #090e09}
.castle-heading p{margin:4px 0 0;font-size:13px}
#castle-view button{border-radius:0;min-height:44px;background:#465535;border:2px solid #a4a67c;box-shadow:inset 2px 2px #7d8959,inset -2px -2px #202e1e;padding:6px 10px;font:bold 15px monospace;color:#fff0c3}
#castle-exit{white-space:nowrap}
.castle-portrait{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 0}
#castle-picture{width:96px;height:96px;max-width:30%;image-rendering:pixelated}
.castle-portrait p{font-weight:bold;font-size:15px;max-width:150px}
.castle-service{padding:10px 0;border-top:2px solid color-mix(in srgb, #404d35 var(--divider-strength), transparent)}
.castle-service h2{font-size:17px;margin:0 0 8px;color:#e2ce90}
.castle-service-row{display:flex;align-items:center;gap:8px;margin:8px 0;justify-content:space-between}
.castle-service-row button{display:flex;align-items:center;justify-content:center;gap:6px;flex:0 0 46%}
.castle-service-row button canvas{width:24px;height:24px;flex:0 0 24px}
.castle-price{display:flex;gap:6px 10px;flex-wrap:wrap;justify-content:flex-end;flex:1}
.castle-price span{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:16px}
.castle-price canvas{width:22px;height:22px}
.castle-price .missing{color:#ff9c80}
.castle-note{font-size:12px;line-height:1.45;color:#bdc5a6;margin:6px 0}
#castle-view .is-unavailable{filter:brightness(.65) saturate(.5);cursor:help}
@media(min-width:700px){#castle-view{padding:20px}.castle-heading h1{font-size:26px}.castle-portrait{padding:20px}#castle-picture{width:144px;height:144px}.castle-service-row button{font-size:18px;min-height:52px}}
@media(max-height:600px){.castle-portrait{padding:2px}#castle-picture{width:64px;height:64px}.castle-service{padding:6px 0}}

@media(max-width:350px){#castle-view button{font-size:13px;padding:6px}.castle-service-row button canvas{width:20px;height:20px;flex-basis:20px}}

/* Small VGA settings menu, with room reserved beside the resource counters. */
#resources{padding-right:48px}
#game-menu{position:absolute;right:3px;top:4px;z-index:10}
#menu-toggle{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:8px;border-radius:0;background:#35382d;border:2px solid #898a69;box-shadow:inset 2px 2px color-mix(in srgb, #62684d var(--divider-strength), transparent),inset -2px -2px color-mix(in srgb, #141a12 var(--divider-strength), transparent)}
#menu-toggle canvas{width:24px;height:24px;display:block}
#menu-panel{position:absolute;right:0;top:50px;width:min(264px,calc(100vw - 48px));padding:8px;background:#25291f;border:2px solid #9c936d;box-shadow:inset 2px 2px #51563b,4px 4px #080c09cc}
#menu-panel[hidden]{display:none}
#hints-toggle{display:block;width:100%;min-height:44px;padding:4px;border-radius:0;background:#414934;border:2px solid #7e8962;box-shadow:inset 2px 2px #69744e,inset -2px -2px #1c2716}
#hints-toggle[aria-pressed="false"]{background:#393932;border-color:#757563}
#hints-toggle canvas{display:block;width:100%;height:auto;image-rendering:pixelated}

#sound-toggle{display:block;width:100%;min-height:44px;margin-top:8px;padding:4px;border-radius:0;background:#414934;border:2px solid #7e8962;box-shadow:inset 2px 2px #69744e,inset -2px -2px #1c2716}
#sound-toggle[aria-pressed="false"]{background:#393932;border-color:#757563}
#sound-toggle canvas{display:block;width:100%;height:auto;image-rendering:pixelated}

/* Menu occupies the same responsive column as each resource. */
#resources{grid-template-columns:repeat(5,minmax(0,1fr));padding-right:0;z-index:7}
#game-menu{position:relative;right:auto;top:auto;align-self:stretch;min-width:0;display:flex;align-items:center;justify-content:center}
#menu-toggle{width:100%;height:100%;min-width:0;padding:4px;border:0;border-left:1px solid color-mix(in srgb, #100e0a66 var(--divider-strength), transparent);background:transparent;box-shadow:inset 1px 0 color-mix(in srgb, #b3a78c20 var(--divider-strength), transparent)}
#resources #menu-toggle canvas{width:52px;height:48px;max-width:100%;filter:none}
#menu-panel{top:calc(100% + 8px)}
@media(max-width:350px){#resources #menu-toggle canvas{width:46px;height:44px}}
@media(min-width:700px){#resources #menu-toggle canvas{width:60px;height:54px}}
/* Compact resource strip on phones; counters retain their readable size. */
@media(max-width:699px){
 #resources{min-height:calc(47px + clamp(26px,7.2vw,34px));padding-top:3px;padding-bottom:4px}
 #resources canvas,#resources #menu-toggle canvas{width:44px;height:40px}
}

/* Quiet recessed stone slots; only actual contextual actions are interactive. */
.castle-actions,.castle-actions[hidden]{display:grid;grid-template-columns:repeat(2,var(--arrow-size));grid-template-rows:var(--arrow-size);gap:4px;visibility:visible}
.castle-actions::before,.castle-actions::after{content:"";grid-row:1;pointer-events:none;margin:3px;background:#080c091c;border:2px solid #080c0938;box-shadow:inset 2px 2px #00000024,inset -2px -2px #aaa78a0a,1px 1px #aaa78a0c}
.castle-actions::before{grid-column:1}
.castle-actions::after{grid-column:2}
.castle-actions:not([hidden])::after{visibility:hidden}
.castle-actions button{grid-column:2;grid-row:1;z-index:1}
.castle-actions[hidden] button{visibility:hidden;pointer-events:none}

/* Shared readable UI typography. Pixel rendering is reserved for game art. */
:root{--ui-font:pixel-ultima-ui,Arial,Helvetica,sans-serif;--ui-scale:1;--ui-width:100vw;--ui-text:calc(18px * var(--ui-scale));--ui-small:calc(16px * var(--ui-scale));--ui-title:calc(22px * var(--ui-scale));--ui-control:calc(44px * var(--ui-scale))}
#menu-panel{width:min(360px,calc(100vw - 56px));padding:14px}
#hints-toggle,#sound-toggle{min-height:56px;padding:12px 10px;font:600 var(--ui-text)/1.35 var(--ui-font);color:#fff5dd;text-shadow:none;white-space:normal;overflow-wrap:anywhere}
#sound-toggle{margin-top:12px}
#hint{width:min(calc(100% - 16px),560px);padding:16px 46px 23px 18px}
#hint-accessible{font:500 var(--ui-text)/1.45 var(--ui-font);color:#fff8e8;text-shadow:none;overflow-wrap:anywhere;text-align:left}
#hint-close{top:3px;right:3px;width:40px;height:40px;min-height:40px;font:400 28px/40px var(--ui-font);text-shadow:none}
#city-bar button,#castle-view,#castle-view button,.castle-price span,.castle-portrait p{font-family:var(--ui-font);font-size:var(--ui-text);line-height:1.35;text-shadow:none}
.castle-heading h1,.castle-service h2{font-family:var(--ui-font);font-size:var(--ui-title);line-height:1.3;text-shadow:none}
.castle-heading p,.castle-note{font-family:var(--ui-font);font-size:var(--ui-small);line-height:1.4}

#fullscreen-toggle,#sound-test{display:block;width:100%;min-height:56px;margin-top:12px;padding:12px 10px;border-radius:0;background:#414934;border:2px solid #7e8962;box-shadow:inset 2px 2px #69744e,inset -2px -2px #1c2716;font:600 var(--ui-text)/1.35 var(--ui-font);color:#fff5dd;text-shadow:none;white-space:normal}
#fullscreen-note,#sound-note{margin:12px 0 0;font:400 var(--ui-small)/1.4 var(--ui-font);color:#f2dab0}
#fullscreen-note[hidden],#sound-note[hidden]{display:none}
#menu-panel{max-height:calc(100dvh - 160px);overflow-y:auto;overscroll-behavior:contain}
html:fullscreen{background:#080d0a}
html.game-fullscreen{background:#080d0a}

/* Shared compact status tray below the resource panel. */
#status-icons{position:absolute;top:108px;left:8px;z-index:4;display:flex;gap:6px;align-items:flex-start;pointer-events:none}
#status-icons .status-icon,#status-icons #unprotected{position:relative;top:auto!important;left:auto;width:clamp(32px,calc(var(--cell-size,48px)*.7),64px);height:clamp(32px,calc(var(--cell-size,48px)*.7),64px);min-height:0;box-sizing:border-box;padding:5px;background:#1b231dcc;border:1px solid #81704499;box-shadow:inset 1px 1px #ccb77333,inset -1px -1px #080e09;opacity:.8}
#status-icons #unprotected{pointer-events:auto}
#status-icons canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
#status-icons [hidden]{display:none}

/* Hints replace the resource counters without moving or covering the map. */
#hint{left:0;top:0;width:80%;height:100px;z-index:8;box-sizing:border-box;transform:none;clip-path:none;padding:10px 42px 10px 14px;display:flex;align-items:center;background:#482b2c;border:2px solid #a88e5d;box-shadow:inset 0 2px #795144,inset 0 -3px #281c1b;transition:opacity .45s ease,visibility 0s .45s}
#hint.visible{transform:none;pointer-events:auto;transition:opacity .18s ease,visibility 0s}
#hint-accessible{width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b19a6b #362525;line-height:1.4;touch-action:pan-y}
#resources>span{transition:opacity .3s ease}
#resources.showing-hint>span{opacity:0}
#hint-close{top:2px;right:1px}
@media(prefers-reduced-motion:reduce){#hint,#hint.visible,#resources>span{transition:none}}

/* Planning action belongs in the footer; the castle button cancels it. */
footer.planning-city .castle-actions{display:none}
footer #city-bar{position:static;left:auto;bottom:auto;margin-left:auto;width:auto;flex:1 1 auto;min-width:0;height:var(--menu-size);gap:0}
footer #city-bar[hidden]{display:none}
footer #city-primary{width:100%;height:100%;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;background:#36462c;border:2px solid #879568;box-shadow:inset 2px 2px #65764a,inset -2px -2px #1a2515;font:600 var(--ui-text)/1.25 var(--ui-font);text-shadow:none}
footer #city-primary::before{content:"✓";color:#92df65;font:700 26px/1 var(--ui-font);text-shadow:1px 2px #172411}
#city-toggle{position:relative}

/* The whole header becomes the hint, including the menu column. */
#resources.showing-hint{display:block;padding:0}
#resources.showing-hint>span,#resources.showing-hint>#game-menu{display:none}
#resources>#hint{left:0;top:0;width:100%;height:auto;min-height:inherit;margin:0;padding:12px 44px 12px 14px}
#resources>#hint.visible{position:relative}
#resources #hint-accessible{max-height:none;overflow:visible;font-weight:400}



/* Planning turns the whole castle button into Cancel. */
#build-toggle[aria-pressed="true"]{--face:#703d32;--bevel-light:#d8ae81;--bevel-mid:#a67956;--bevel-dark:#382219;filter:none}
#build-toggle[aria-pressed="true"] canvas{visibility:hidden}
/* A geometric cross keeps Cancel legible regardless of the text font. */
#build-toggle[aria-pressed="true"]::after{display:none}

#status-icons #slow-status,#status-icons #speed-status{pointer-events:auto;cursor:pointer}

/* Repeated map taps are game actions, not text selection or iOS callouts. */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body input,body textarea,body [contenteditable="true"],body [contenteditable="true"] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

#defeat{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom));overflow-y:auto;background:#080a10;animation:defeat-darken 3.5s ease-in both;-webkit-user-select:none;user-select:none}
#defeat[hidden]{display:none}#defeat-content{width:min(100%,480px);text-align:center;font:var(--ui-text)/1.45 var(--ui-font);animation:defeat-content-in .5s 3s both}
#defeat-picture{display:block;width:100%;height:auto;image-rendering:pixelated;border:4px solid #62636a;box-shadow:0 0 0 2px #11151c,0 0 0 4px #2b303b;margin:0 auto 24px}
#defeat h1{font:700 var(--ui-title)/1.3 var(--ui-font);color:#ebc992;margin:0 0 12px}#defeat p{font-size:var(--ui-small);color:#b6b8bf;margin:10px 0 20px}
#restart-game{font:700 var(--ui-text)/1.3 var(--ui-font);padding:14px 24px;min-height:52px;border-radius:0;background:#394657;border:3px solid #a2adba;box-shadow:inset 3px 3px #586b81,inset -3px -3px #202b38;color:#f3e4c6;touch-action:manipulation}
#defeat #restart-status{min-height:1.5em;margin-bottom:0}#defeat.instant,#defeat.instant #defeat-content{animation:none}
@keyframes defeat-darken{0%,72%{background:#080a1000}100%{background:#080a10}}
@keyframes defeat-content-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#defeat,#defeat-content{animation:none}}


/* Text, touch targets and spacing follow one panel scale, not screen resolution. */
#loading-text,#loading-retry{font:500 var(--ui-text)/1.4 var(--ui-font);letter-spacing:normal}
#loading-text{max-width:min(90vw,28em)}
#loading-retry{min-height:var(--ui-control);padding:.5em 1em}
#menu-panel{width:min(calc(360px * var(--ui-scale)),calc(var(--ui-width) - 12px));max-height:calc(100dvh - 160px);padding:calc(12px * var(--ui-scale))}
#hints-toggle,#sound-toggle,#fullscreen-toggle,#sound-test{min-height:var(--ui-control);padding:.65em .55em}
#fullscreen-note,#sound-note{overflow-wrap:anywhere}
#resources>#hint{padding:calc(12px * var(--ui-scale)) calc(var(--ui-control) + 8px) calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale))}
#resources #hint-accessible{font-size:var(--ui-text);max-height:38dvh;overflow-y:auto}
#hint-close{width:var(--ui-control);height:var(--ui-control);min-height:var(--ui-control);font-size:var(--ui-title);line-height:1;display:grid;place-items:center}
footer #city-primary{gap:.15em;padding:.2em;overflow-wrap:anywhere}
footer #city-primary::before{font-size:var(--ui-title)}
#castle-view{padding:calc(12px * var(--ui-scale))}
.castle-heading{flex-wrap:wrap;gap:.5em;padding-bottom:.5em}
.castle-heading>div{min-width:0;flex:1 1 60%}
#castle-view button{min-height:var(--ui-control);padding:.4em .55em;white-space:normal;overflow-wrap:anywhere}
.castle-portrait{gap:1em;padding:.7em 0}
.castle-portrait p{max-width:12em}
.castle-service{padding:.6em 0}
.castle-service-row{flex-wrap:wrap;gap:.5em;margin:.5em 0}
.castle-service-row button{min-width:min(100%,9em);gap:.35em}
.castle-service-row button canvas{width:1.35em;height:1.35em;flex-basis:1.35em}
.castle-price{gap:.35em .6em}
.castle-price canvas{width:1.3em;height:1.3em}
#defeat-content{width:min(100%,calc(480px * var(--ui-scale)))}
#restart-game{min-height:var(--ui-control);padding:.7em 1.2em}


/* Long messages use the same clear letter shapes as the action buttons. */
#hint-accessible,footer #city-primary,#hint-close{font-family:var(--ui-font);letter-spacing:normal;text-shadow:none}

html{font-synthesis:none}


/* Four equal actions; confirmation replaces the whole row with two choices. */
footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;--menu-size:max(44px,calc((100cqw - 18px)/5));align-items:stretch}
footer nav{display:contents}
footer nav button{display:grid;place-items:center;width:100%;min-width:0;max-width:none;height:var(--menu-size);min-height:44px}
footer nav canvas{width:auto;height:100%;max-width:100%;object-fit:contain}
#city-toggle[hidden]{display:none}
#build-toggle{position:relative;--face:#775335;--bevel-light:#e2c18a;--bevel-mid:#ac8254;--bevel-dark:#3c291d}
.build-cancel-label{display:none}
footer.planning-city{grid-template-columns:repeat(2,minmax(0,1fr))}
footer.planning-city #army,footer.planning-city #fight{display:none}
footer.planning-city #build-toggle{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;font:600 var(--ui-text)/1.25 var(--ui-font)}
footer.planning-city #build-toggle canvas,footer.planning-city #build-toggle::before,footer.planning-city #build-toggle::after{display:none}
footer.planning-city .build-cancel-label{display:block}
footer.planning-city #city-bar{grid-column:2}
footer #city-bar{grid-column:4;grid-row:1;width:100%;height:var(--menu-size);margin:0}
footer #city-bar #city-primary{flex-direction:row;gap:.35em;min-width:0;min-height:44px;background:#36462c;border-color:#879568}
@media(max-width:350px){footer #city-primary::before{display:none}}

/* VGA construction carousel: readable type, crisp sprites and bevelled controls. */
:root{--ui-font:Arial,Helvetica,sans-serif}
html{overflow-x:clip}
#build-panel{position:absolute;z-index:12;bottom:calc(100% + 5px);left:0;right:0;box-sizing:border-box;padding:10px 12px;max-height:52dvh;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(#b5a577,#b5a577) 4px 4px/8px 2px no-repeat,linear-gradient(#b5a577,#b5a577) calc(100% - 4px) 4px/8px 2px no-repeat,linear-gradient(#333b2d,#252d23 45%,#20271f);border:2px solid #8c835e;box-shadow:inset 0 0 0 2px #171f18,inset 0 0 0 3px #555e43,0 -3px #11180f;animation:build-slide .16s ease-out both;color:#f5ead0;font:var(--ui-small)/1.25 var(--ui-font);text-shadow:none}
#build-panel[hidden]{display:none}
.building-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 7px;border-bottom:1px solid color-mix(in srgb, #596044 var(--divider-strength), transparent)}
#build-panel h2{font:600 var(--ui-small)/1.25 var(--ui-font);color:#c6bc97;margin:0}
#building-page{font:var(--ui-small)/1.25 var(--ui-font);font-variant-numeric:tabular-nums;color:#c6bc97}
#building-upgrade-title{font:700 var(--ui-title)/1.2 var(--ui-font);text-align:center;margin:10px 0 0;overflow-wrap:anywhere;color:#f1e3b5}
.building-carousel{--build-arrow:clamp(52px,calc(44px * var(--ui-scale)),72px);display:grid;grid-template-columns:var(--build-arrow) minmax(0,1fr) var(--build-arrow);gap:8px;align-items:center}
#build-panel .building-carousel>button{width:var(--build-arrow);height:calc(var(--build-arrow) + 8px);padding:0;display:grid;place-items:center;background:#414d35;border:2px solid;border-color:#a5a576 #1a241b #182219 #899569;border-radius:0;box-shadow:inset 0 0 0 2px #2a3727,0 2px #111910;touch-action:manipulation;transition:background .15s ease}
.building-carousel>button i{display:block;width:22px;height:30px;background:#e9d694;clip-path:polygon(0 37%,25% 37%,25% 25%,50% 25%,50% 12%,75% 12%,75% 0,100% 0,100% 100%,75% 100%,75% 88%,50% 88%,50% 75%,25% 75%,25% 63%,0 63%)}
#building-next i{transform:rotate(180deg)}
#build-panel button:focus-visible{outline:2px solid #ffe4a1;outline-offset:2px}
#build-panel .building-carousel>button:active{background:#303d29;border-color:#19241b #8c986d #a5a576 #253223;box-shadow:inset 0 0 0 2px #253223}
@media(hover:hover){#build-panel .building-carousel>button:hover{background:#53613f}}
.building-stage{position:relative;display:grid;place-items:center;min-width:0;height:clamp(72px,12dvh,128px);background:radial-gradient(ellipse at 50% 90%,#67744626,transparent 65%);border-bottom:1px solid color-mix(in srgb, #546043 var(--divider-strength), transparent);box-shadow:0 1px color-mix(in srgb, #172018 var(--divider-strength), transparent);touch-action:pan-y;user-select:none}
#building-selected{display:block;width:auto;height:100%;max-width:100%;aspect-ratio:1;image-rendering:pixelated}
.building-stage.unaffordable #building-selected{filter:grayscale(.65) brightness(.6)}
#building-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px clamp(14px,4vw,32px);margin:4px 0 10px;padding:10px 0;border-top:1px solid color-mix(in srgb, #596044 var(--divider-strength), transparent);border-bottom:1px solid color-mix(in srgb, #596044 var(--divider-strength), transparent);font:600 var(--ui-text)/1.25 var(--ui-font);font-variant-numeric:tabular-nums;color:#f0e9ce}
#building-price>div{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:0;background:none;border:0}
#building-price span{overflow-wrap:anywhere;min-width:0}
#building-price canvas{width:calc(16px * var(--ui-scale));height:calc(16px * var(--ui-scale));image-rendering:pixelated;flex-shrink:0}
#building-price .missing span{color:#ef9b84}
#build-panel #building-confirm{width:100%;min-height:44px;font:700 var(--ui-text)/1.2 var(--ui-font);padding:10px;background:#495d32;color:#f4ebc8;border:2px solid;border-color:#a7b575 #26371d #18240f #7b8b58;border-radius:0;text-shadow:none;box-shadow:none;transition:background .15s ease}
#build-panel #building-confirm:active:not(:disabled){background:#617541}
#build-panel #building-confirm:disabled{background:#30382a;color:#929985;border-top-color:#515b42;border-bottom-color:#20251c;box-shadow:none;filter:none;cursor:default}
#build-panel.upgrading .building-carousel{grid-template-columns:1fr}
#build-panel.upgrading #building-prev,#build-panel.upgrading #building-next,#build-panel.upgrading #building-page{display:none}
footer.build-opening nav button,footer.build-opening #city-bar{pointer-events:none}
footer #city-primary:disabled{background:#363a30;color:#8e9381;filter:grayscale(.8);cursor:default}
@keyframes build-slide{from{opacity:.2;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#build-panel{animation:none}}

#building-price[hidden],#building-price>div[hidden]{display:none}

#resources .resource-button{cursor:pointer;touch-action:manipulation;user-select:none}
#resources .resource-button:focus-visible{outline:2px solid #efd792;outline-offset:-3px}
#resource-flag{position:absolute;z-index:30;pointer-events:none;max-width:calc(100% - 12px);padding:7px 20px 7px 12px;border-left:3px solid #edd398;background:#393c28;color:#fff0c6;box-shadow:inset 0 2px #ac9863,inset 0 -2px #72623d;font:600 var(--ui-text)/1.25 var(--ui-font);overflow-wrap:anywhere;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%)}
#resource-flag[hidden]{display:none}

/* Reserve the caption space; reveal it only after fonts and artwork settle. */
#loading-text{min-height:2.8em;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .65s ease,transform .65s ease;}
#loader.assets-ready #loading-text{visibility:visible;opacity:1;transform:translateY(0)}
#loader:not(.assets-ready) .loading-emblem,#loader:not(.assets-ready) .loading-track i{animation-play-state:paused}
#loader:not(.assets-ready) #loading-retry{visibility:hidden}
@media(prefers-reduced-motion:reduce){#loading-text{transform:none;transition:opacity .15s ease}}

#settlement-intro{position:absolute;z-index:3;left:12%;right:8%;margin:0;padding:0;background:none;border:0;box-shadow:none;pointer-events:none;text-align:center;text-wrap:balance;color:#fff3d9;font:500 var(--ui-text)/1.45 var(--ui-font);text-shadow:0 1px 2px #24301a99;opacity:0}
#settlement-intro[hidden]{display:none}

#soft-hint{position:absolute;z-index:4;left:8%;right:8%;margin:0;padding:0;border:0;background:none;box-shadow:none;pointer-events:none;color:#fff3d9;font:500 var(--ui-small)/1.45 var(--ui-font);text-align:center;text-wrap:balance;text-shadow:0 1px 2px #24301a99;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s}
#soft-hint.visible{opacity:.85;visibility:visible;transition:opacity .22s ease,visibility 0s}

/* A translucent, dry-brush paint stroke for quiet in-world guidance. */
#settlement-intro,#soft-hint{isolation:isolate;padding:.65em 1.25em;color:#394039;text-shadow:none;font-weight:600}
#settlement-intro::before,#soft-hint::before{content:"";position:absolute;z-index:-1;inset:-3px -5px;pointer-events:none;background:linear-gradient(176deg,transparent 8%,#fffff8b8 10% 38%,transparent 40%),linear-gradient(4deg,transparent 27%,#fffef6b3 30% 73%,transparent 76%),linear-gradient(177deg,transparent 59%,#fffff9b8 62% 92%,transparent 95%);clip-path:polygon(3% 15%,17% 9%,30% 12%,48% 5%,65% 10%,84% 4%,97% 9%,93% 21%,100% 27%,96% 40%,99% 53%,95% 64%,98% 78%,93% 86%,77% 94%,62% 89%,42% 98%,25% 91%,7% 96%,3% 84%,7% 73%,0 61%,4% 48%,1% 35%,6% 26%)}
#settlement-intro::after,#soft-hint::after{content:"";position:absolute;z-index:-1;inset:4px 0;pointer-events:none;background:repeating-linear-gradient(178deg,transparent 0 8px,#ffffff26 9px 10px,transparent 11px 17px);clip-path:polygon(6% 14%,42% 8%,93% 12%,98% 30%,90% 38%,95% 66%,91% 84%,48% 95%,8% 89%,3% 69%,8% 45%,2% 26%)}
#soft-hint.visible{opacity:1}

/* Быстрое меню зданий: upgrade on the left, entrance nearest the right edge. */
#building-quick{position:absolute;right:6px;bottom:calc(100% + 10px);display:flex;gap:12px;z-index:10;animation:building-menu-in .18s ease-out both}
#building-quick[hidden],:is(#building-view,#tavern-view)[hidden]{display:none}
:is(#building-quick,#castle-quick,#adventure-quick) button{width:clamp(52px,calc(44px * var(--ui-scale)),72px);height:clamp(52px,calc(44px * var(--ui-scale)),72px);min-height:52px;border-radius:50%;padding:10px;background:#455139;border:2px solid #b5a776;box-shadow:inset 0 2px #d2c28a,inset 0 -3px #263020,0 2px #151e14;display:grid;place-items:center}
:is(#building-quick,#castle-quick,#adventure-quick) button:disabled{filter:grayscale(.8) brightness(.65)}
:is(#building-quick,#castle-quick,#adventure-quick) canvas{width:100%;height:100%;image-rendering:pixelated}
:is(#building-view,#tavern-view){display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#22291f;color:#efe4c3;font:var(--ui-text)/1.4 var(--ui-font);animation:building-menu-in .2s ease-out both}
.building-room{position:relative;flex:0 0 auto;min-height:0;background:#242b25;overflow:hidden;border-bottom:1px solid color-mix(in srgb, #8a8159 var(--divider-strength), transparent)}
.building-room>canvas{display:block;width:100%;height:auto;aspect-ratio:288/88;image-rendering:pixelated}
:is(#building-view,#tavern-view) button{font:600 var(--ui-text)/1.25 var(--ui-font);min-height:44px;padding:9px 14px;border-radius:0;border:0;border-top:1px solid #a3a872;border-bottom:2px solid #131e12;box-shadow:none;background:#495938;color:#f7ebc7;text-shadow:none;transition:background .16s ease}
:is(#building-view,#tavern-view) button:active{background:#657648}
:is(#building-view,#tavern-view) button:disabled{filter:brightness(.65);cursor:default}
:is(#building-view,#tavern-view) [data-room="exit"]{position:absolute;right:1%;top:8%;bottom:2%;width:20%;min-height:44px;padding:0 0 2px;display:flex;align-items:flex-end;justify-content:center;background:transparent;border:0;box-shadow:none;font:600 var(--ui-small)/1.25 var(--ui-font);color:#f1dfb4;text-shadow:0 1px 2px #171d15;transition:color .18s ease}
@media(hover:hover){:is(#building-view,#tavern-view) [data-room="exit"]:hover,:is(#building-view,#tavern-view) [data-room="exit"]:active{background:transparent;box-shadow:none;transform:none;color:#fff2ca}}
:is(#building-view,#tavern-view) [data-room="exit"] span{border-bottom:1px solid #b5a57866;padding:0 3px}
:is(#building-view,#tavern-view) [data-room="exit"]:focus-visible{outline:1px solid #e4cf91;outline-offset:-3px}
.building-room-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex:0 0 auto;margin:0 12px;padding:10px 0;border-bottom:1px solid color-mix(in srgb, #555e43 var(--divider-strength), transparent)}
.building-room-heading h1{margin:0;font:700 var(--ui-title)/1.2 var(--ui-font);color:#efddb2}
.building-room-heading>span{font-size:var(--ui-small);color:#bdb792;white-space:nowrap}
.building-room-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 16px;scrollbar-color:#777e54 #22291f}
.building-room-scroll section{padding:12px 0;border-top:1px solid color-mix(in srgb, #555e43 var(--divider-strength), transparent)}
.building-room-scroll section:first-of-type{border-top:0;padding-top:0}
.building-room-scroll h2{font:600 var(--ui-text)/1.3 var(--ui-font);color:#ddcda2;margin:0 0 6px}
.building-room-scroll p{margin:8px 0;overflow-wrap:anywhere}
.building-room-scroll .room-muted,.building-room-scroll [data-room="status"]{font-size:var(--ui-small);color:#b7b99a}
.building-room-scroll button{width:100%;margin:6px 0 0}
.room-price{display:flex;flex-wrap:wrap;gap:12px 22px;padding:4px 0 9px}
.room-price span{display:flex;align-items:center;gap:6px}
.room-price canvas{width:calc(16px * var(--ui-scale));height:calc(16px * var(--ui-scale));image-rendering:pixelated}
.room-price .missing{color:#ee9d88}
:is(#building-view,#tavern-view) .room-demolition button{background:#664432;border-top-color:#b8976a}
:is(#building-view,#tavern-view) [data-room="cancel"]{background:#3d4934}
:is(#building-view,#tavern-view) [hidden]{display:none}
.resident-slots{display:flex;flex-wrap:wrap;gap:7px;padding:5px 0}
.resident-slots i{display:block;width:12px;height:17px;background:#546047;clip-path:polygon(25% 0,75% 0,75% 35%,100% 35%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 35%,25% 35%)}
.resident-slots i.occupied{background:#d4bd7c}
@keyframes building-menu-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){:is(#building-view,#tavern-view),#building-quick{animation:none}}


/* One large VGA landscape, soft vignette, title and a quiet loading line. */
#loader{gap:18px;padding:24px 0;background:#0b1114;transition:opacity .35s ease;overflow:hidden}
#loader::before{content:none}
.loading-art{position:relative;width:min(94vw,900px,92vh);aspect-ratio:8/5;flex:none;opacity:0;transform:translateY(5px);transition:opacity 1s ease,transform 1s ease}
.loading-art canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.loading-art::after{content:"";position:absolute;inset:-1px;background:radial-gradient(ellipse at 50% 49%,transparent 22%,#0b111424 48%,#0b1114b8 73%,#0b1114 96%),linear-gradient(0deg,#0b1114,transparent 22%,transparent 82%,#0b1114);pointer-events:none}
#loading-title{position:relative;margin:-18px 20px 0;color:#e9d7ad;font:700 var(--ui-title)/1.3 var(--ui-font);letter-spacing:.1em;text-align:center;text-shadow:0 2px 12px #000;visibility:hidden;opacity:0;transform:translateY(5px);transition:opacity .7s ease,transform .7s ease}
#loader.assets-ready .loading-art,#loader.assets-ready #loading-title{visibility:visible;opacity:1;transform:translateY(0)}
#loading-text{display:none;font:400 var(--ui-small)/1.4 var(--ui-font);color:#c6bca4;min-height:0;margin:0;padding:0 20px}
#loader.has-error #loading-text{display:block}
#loader .loading-track{width:min(38vw,240px);height:2px;padding:0;margin-top:2px;background:#41473b66;box-shadow:none;overflow:hidden}
#loader .loading-track i{display:block;width:100%;height:2px;background:linear-gradient(90deg,#6d806c,#dcc795);box-shadow:none;transform:scaleX(var(--loading-progress,0));transform-origin:left;transition:transform .55s ease;animation:none}
#loader.finished .loading-track i{transform:scaleX(1);animation:none}
@media(max-height:500px){#loader{gap:10px;padding:8px 0}.loading-art{width:min(75vw,82vh)}#loading-title{margin-top:-12px}}
@media(prefers-reduced-motion:reduce){#loader{transition:opacity .2s}.loading-art,#loading-title{transform:none;transition:opacity .15s}#loader .loading-track i{transition:none}}

/* Decorative desktop wings never intercept input or join the game's render loop. */
body{isolation:isolate}
#desktop-scenery{filter:brightness(.6);display:none;position:fixed;inset:0;width:100vw;height:100dvh;z-index:-1;pointer-events:none;image-rendering:pixelated}
@media(min-width:1000px) and (pointer:fine){#desktop-scenery{display:block}}

#castle-view #castle-exit{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:0 5px 3px;background:none;border:0;box-shadow:none;font:600 var(--ui-small)/1.25 var(--ui-font);color:#f1dfb4}
#castle-exit canvas{width:clamp(48px,calc(36px * var(--ui-scale)),76px);height:auto;image-rendering:pixelated}
#castle-exit span{border-bottom:1px solid #b5a57866}

/* A soft join from the illustration into a clean, readable building sheet. */
.building-room{border-bottom:0}
.building-room::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:15px;background:linear-gradient(to bottom,transparent,#17201888 45%,#22291f);pointer-events:none}
.building-room-heading{border-bottom:0;padding:10px 0 4px}
.building-room-scroll section{border-top:0;padding:14px 0 6px}
.building-room-scroll section:first-of-type{padding-top:5px}
.building-room-scroll [data-room="stats"]{font:600 var(--ui-title)/1.35 var(--ui-font);color:#f2e5bd;margin:4px 0}
.building-room-scroll .resident-slots{display:block;padding:0;margin:6px 0;font:400 var(--ui-small)/1.4 var(--ui-font);color:#b7b99a}
.building-room-scroll .room-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding:12px 0 14px}
.building-room-scroll .room-price span{gap:5px;white-space:nowrap;font:600 var(--ui-title)/1.3 var(--ui-font)}
.building-room-scroll .room-price canvas{width:calc(32px * var(--ui-scale));height:calc(32px * var(--ui-scale));flex-shrink:0}
.building-room-scroll .room-demolition{margin-top:12px;padding-top:16px;border-top:1px solid color-mix(in srgb, #75815c33 var(--divider-strength), transparent)}
.building-room-scroll .room-demolition h2{display:none}
:is(#building-view,#tavern-view) .room-demolition [data-room="demolish"]{background:#3c3529;color:#c6b796;border-top:0;border-bottom:0;min-height:44px}
:is(#building-view,#tavern-view) .room-demolition [data-room="cancel"]{border:0}

/* Full-screen VGA menu, sharing the painted introduction landscape. */
#menu-panel{position:fixed;inset:0;z-index:1200;width:100%;height:100dvh;max-height:none;box-sizing:border-box;margin:0;padding:clamp(18px,4vh,48px) 18px;overflow:auto;border:0;background:#0b1114;box-shadow:inset 0 0 100px #0009;opacity:0;transition:opacity 180ms ease;overscroll-behavior:contain}
#menu-panel.is-open{opacity:1}
#menu-panel .menu-content{width:min(100%,760px);min-height:100%;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
#menu-panel header{text-align:center;position:relative;z-index:1}
#menu-panel h1{margin:5px 0 0;color:#eddbac;font:600 var(--ui-title)/1.2 var(--ui-font);letter-spacing:.08em}
#menu-panel .menu-eyebrow{margin:0;color:#9d9f84;font:400 var(--ui-small)/1.3 var(--ui-font);letter-spacing:.16em}
.menu-art{position:relative;width:min(100%,640px);flex:none;aspect-ratio:8/5;margin:-12px 0 -24px}
.menu-art canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.menu-art::after{content:"";position:absolute;inset:-1px;background:radial-gradient(ellipse,transparent 25%,#0b111470 65%,#0b1114 95%),linear-gradient(0deg,#0b1114,transparent 28%,transparent 80%,#0b1114);pointer-events:none}
.menu-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;width:100%;position:relative}
#menu-panel .menu-controls button{width:100%;min-height:var(--ui-control);margin:0;padding:.65em .6em;border:0;border-bottom:1px solid color-mix(in srgb, #62654b var(--divider-strength), transparent);background:#202c2a;box-shadow:inset 0 1px color-mix(in srgb, #38463d var(--divider-strength), transparent);color:#e4ddc5;font:500 var(--ui-text)/1.3 var(--ui-font);text-shadow:none}
#menu-panel .menu-controls p{grid-column:1/-1;margin:0;font:400 var(--ui-small)/1.4 var(--ui-font)}
#menu-return{width:min(100%,520px);min-height:var(--ui-control);padding:.7em 1em;border:1px solid #a2915e;border-radius:0;background:#3b4936;box-shadow:inset 0 2px #667151,inset 0 -2px #222c23;color:#fff0c9;font:600 var(--ui-text)/1.3 var(--ui-font);position:relative}
#menu-panel button{cursor:pointer;transition:background 150ms ease,color 150ms ease}
@media(hover:hover){#menu-panel button:hover{background:#45503c}}
#menu-panel button:focus-visible{outline:2px solid #eed396;outline-offset:3px}
@media(max-width:540px){.menu-controls{grid-template-columns:1fr;gap:6px}#menu-panel .menu-content{gap:14px}.menu-art{width:min(100%,46vh)}}
@media(max-height:650px) and (min-width:541px){.menu-art{width:280px}#menu-panel .menu-content{gap:12px}}
@media(prefers-reduced-motion:reduce){#menu-panel,#menu-panel button{transition:none}}

/* A compact pennant, anchored to the left edge just above the controls. */
#hint{display:none}
#soft-hint{left:0;right:auto;top:auto;z-index:9;width:max-content;max-width:calc(100% - 8px);padding:.42em 1.35em .42em .7em;box-sizing:border-box;color:#42483d;font:500 var(--ui-text)/1.35 var(--ui-font);text-align:left;text-shadow:none;text-wrap:wrap;isolation:isolate;opacity:0;visibility:hidden;transform:translateX(-5px);transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
#soft-hint.visible{opacity:1;visibility:visible;transform:translateX(0);transition:opacity .18s ease,transform .18s ease,visibility 0s}
#soft-hint::before{content:"";inset:0;background:linear-gradient(0deg,#c1c3aee8,#e7e5d3ed);box-shadow:inset 0 1px #fbf4dbb3,inset 0 -2px #6f79615c;clip-path:polygon(0 0,100% 0,100% 18%,calc(100% - 4px) 18%,calc(100% - 4px) 34%,calc(100% - 8px) 34%,calc(100% - 8px) 66%,calc(100% - 4px) 66%,calc(100% - 4px) 82%,100% 82%,100% 100%,0 100%);-webkit-mask-image:none;mask-image:none;filter:none}
#soft-hint::after{content:"";inset:0 auto 0 0;width:3px;background:#879577b3;clip-path:none;filter:none}
#soft-hint>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.7em;text-wrap:wrap;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){#soft-hint,#soft-hint.visible{transform:none;transition:opacity .15s ease}}

#boat-quick{position:absolute;right:8px;bottom:calc(100% + 10px);z-index:10;width:calc(var(--ui-control) + 8px);height:calc(var(--ui-control) + 8px);padding:6px;border-radius:50%;border:2px solid #b9aa76;background:#273d43;box-shadow:inset 0 2px #6a7c75,0 2px 4px #0007;opacity:0;visibility:hidden;transition:opacity 160ms ease,visibility 0s 160ms}
#boat-quick canvas{width:100%;height:100%;image-rendering:pixelated}
#boat-quick.visible,#boat-bar.visible{opacity:1;visibility:visible;transition:opacity 160ms ease,visibility 0s}
#boat-bar{position:absolute;inset:0;z-index:12;display:grid;grid-template-columns:1fr 2fr;gap:8px;padding:6px;background:#151e1b;opacity:0;visibility:hidden;transition:opacity 160ms ease,visibility 0s 160ms}
#boat-bar button{min-width:0;border:2px solid #95885d;border-radius:0;background:#3c4a34;color:#fff0c8;font:600 var(--ui-text)/1.25 var(--ui-font);padding:6px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
#boat-bar #boat-cancel{background:#594034}
.boat-price{display:inline-flex;align-items:center;gap:5px}.boat-price canvas{width:24px;height:24px;image-rendering:pixelated}
#boat-bar button:disabled{opacity:.5}footer.boat-planning nav{visibility:hidden}
@media(prefers-reduced-motion:reduce){#boat-quick,#boat-bar{transition:none}}

#status-icons #weakness-status{pointer-events:auto;cursor:pointer;animation:weakness-appear .18s ease-out}@keyframes weakness-appear{from{opacity:0}to{opacity:.8}}@media(prefers-reduced-motion:reduce){#status-icons #weakness-status{animation:none}}

:is(#building-view,#tavern-view){background:#181e1b}.building-room::after{background:linear-gradient(to bottom,transparent,#181e1b99 45%,#181e1b)}

#castle-quick{position:absolute;right:6px;bottom:calc(100% + 10px);display:flex;gap:12px;z-index:10;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
#castle-transfer{position:absolute;inset:0;z-index:11;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px;background:#17201b;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
#castle-quick.visible,#castle-transfer.visible{opacity:1;visibility:visible;transition:opacity .18s,visibility 0s}
footer.castle-transfer-open nav{visibility:hidden}
#castle-transfer button{min-width:0;padding:4px;border:2px solid #8d9471;border-radius:0;background:#354a3d;box-shadow:inset 1px 1px #c8c79a66,inset -2px -2px #15251d;color:#f1e5bd;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font:600 var(--ui-text)/1 var(--ui-font)}
#castle-transfer button[data-direction="give"]{background:#494735;border-color:#a1956b}
#castle-transfer canvas{width:clamp(30px,calc(30px * var(--ui-scale)),56px);height:auto;image-rendering:pixelated}
#castle-transfer small{font:400 var(--ui-small)/1.2 var(--ui-font);white-space:nowrap}
#castle-transfer button[aria-disabled="true"],#castle-transfer button:disabled{filter:grayscale(.5);opacity:.45}
@media(prefers-reduced-motion:reduce){#castle-transfer,#castle-quick{transition:none}}

#castle-transfer small{display:flex;align-items:center;justify-content:center;gap:4px}#castle-transfer small canvas{width:clamp(24px,calc(24px * var(--ui-scale)),40px)}#castle-quick button[aria-disabled="true"]{filter:grayscale(.6) brightness(.7)}

#castle-view{padding:0;background:#181e1b;font:400 var(--ui-text)/1.4 var(--ui-font)}
.castle-room{position:relative;width:100%;background:#101719}.castle-room>canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.castle-room::after{content:"";position:absolute;inset:auto 0 0;height:12%;background:linear-gradient(transparent,#181e1b);pointer-events:none}
#castle-view .castle-room #castle-exit{position:absolute;left:79%;top:24%;width:16%;height:52%;min-width:0;min-height:0;padding:0 0 2px;justify-content:flex-end;z-index:1;color:#f3dfb1;text-shadow:1px 2px #07100d;background:none;border:0;box-shadow:none;font:600 var(--ui-small)/1.2 var(--ui-font)}
.castle-content{padding:10px 12px 18px}.castle-heading{border:0;align-items:center;padding:0;gap:6px}.castle-heading h1{font-size:var(--ui-title)}.castle-heading p{margin:0 0 0 auto}
#castle-army{margin:10px 0 4px;font-weight:600}.castle-content>p{margin:5px 0}.castle-service{border:0;padding:14px 0 0}.castle-service h2{font-size:var(--ui-title)}
.castle-people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#castle-view .castle-people-grid button{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 2px;font:600 var(--ui-text)/1.2 var(--ui-font)}
.castle-people-grid button>span{font-size:var(--ui-small);font-weight:400}.castle-people-grid .castle-price{padding:0;justify-content:center;gap:0}.castle-people-grid .castle-price span{gap:3px;font-size:var(--ui-small)}
#castle-return-one,#castle-return-ten{background:#494735!important}#castle-upgrade-cost{display:flex;flex-wrap:wrap;gap:12px;padding:8px 0 12px}.castle-content .castle-price canvas{width:calc(26px * var(--ui-scale));height:calc(26px * var(--ui-scale))}#castle-view #castle-upgrade{width:100%}

#planning-limit{position:absolute;left:0;bottom:calc(100% + 4px);max-width:100%;margin:0;padding:4px 9px;background:#18281ddd;color:#e4d6b2;font:400 var(--ui-small)/1.3 var(--ui-font);pointer-events:none}#planning-limit[hidden]{display:none}#city-primary[aria-disabled="true"]{filter:brightness(.65)}

#soft-hint.interior-hint{position:relative;inset:auto;display:block;width:max-content;max-width:100%;margin:8px 0 10px;z-index:1;transform:none;font-size:var(--ui-small)}#soft-hint.interior-hint.visible{display:block;animation:interior-hint-in .18s ease-out}@keyframes interior-hint-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}:is(#building-view,#tavern-view) [data-room="upgrade"][aria-disabled="true"]{filter:brightness(.65) saturate(.5);cursor:help}@media(prefers-reduced-motion:reduce){#soft-hint.interior-hint.visible{animation:none}}

#soft-hint.visible{pointer-events:auto;cursor:pointer;touch-action:manipulation}#soft-hint:focus-visible{outline:1px solid #bda976;outline-offset:2px}

#rebel-trophy{position:absolute;top:23%;left:5%;right:5%;z-index:8;margin:0;padding:10px 12px;background:#1a2421eb;border-top:2px solid color-mix(in srgb, #c9ad70 var(--divider-strength), transparent);border-bottom:2px solid color-mix(in srgb, #756448 var(--divider-strength), transparent);color:#f3dd9d;text-align:center;font:600 var(--ui-title)/1.35 var(--ui-font);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}#rebel-trophy.visible{opacity:1;visibility:visible;transition:opacity .25s}

#island-elder{position:absolute;top:19%;left:50%;z-index:9;max-width:calc(100% - 28px);padding:8px 22px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;background:#20262bf2;border:2px solid #b3a078;box-shadow:inset 0 0 0 2px #44473f,0 4px 0 #10191899;color:#f4e4bc;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity 220ms ease,transform 220ms ease,visibility 0s 220ms}
#island-elder.visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity 220ms ease,transform 220ms ease,visibility 0s}
#island-elder canvas{width:96px;height:96px;image-rendering:pixelated}
#island-elder p{margin:0;font:600 var(--ui-title)/1.3 var(--ui-font);text-align:center;white-space:normal;width:22ch;max-width:100%;text-wrap:balance}
@media(prefers-reduced-motion:reduce){#island-elder,#island-elder.visible{transform:translateX(-50%);transition:opacity 220ms ease,visibility 0s 220ms}}

:is(#building-view,#tavern-view) .bank-services[hidden]{display:none}
.bank-meter{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px;padding:10px;background:#182720;border:2px solid;border-color:#838965 #111d19 #111d19 #636e50;box-shadow:inset 0 0 0 2px #2d3c2d}
.bank-meter canvas{display:block;width:96px;height:96px;image-rendering:pixelated}
:is(#building-view,#tavern-view) [data-bank="balance"]{font:600 var(--ui-title)/1.3 var(--ui-font);color:#efcf7e;font-variant-numeric:tabular-nums}
.bank-services label{display:block;margin-top:12px;font:var(--ui-small)/1.4 var(--ui-font);color:#c6c7ae}
.bank-services input,.bank-services select{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:44px;margin-top:5px;padding:8px 10px;border:2px solid;border-color:#1b261e #6d7858 #85906a #26382b;border-radius:0;background:#18251f;color:#f5e8c4;font:var(--ui-text)/1.3 var(--ui-font)}
.bank-services input:focus-visible,.bank-services select:focus-visible{outline:2px solid #d6bd77;outline-offset:2px}
.bank-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
:is(#building-view,#tavern-view) .bank-transfer-title{margin-top:20px}
@media(max-width:360px){.bank-meter{grid-template-columns:72px minmax(0,1fr);gap:8px;padding:8px}.bank-meter canvas{width:72px;height:72px}}

#island-elder.pirate-warning{border-color:#c5a05a;background:#292820f2}#island-elder.pirate-warning p{white-space:normal;width:22ch;max-width:100%;color:#f1d58b}

/* Tap anywhere on the elder to dismiss; retain the text throughout the fade. */
#island-elder{pointer-events:auto;transition:opacity 180ms ease,transform 180ms ease,visibility 0s 180ms}
#island-elder.visible{transition:opacity 180ms ease,transform 180ms ease,visibility 0s}
#island-elder .elder-dismiss{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;min-height:0;z-index:2;touch-action:manipulation}
#island-elder .elder-dismiss:active{background:transparent;box-shadow:none;transform:none}
@media(max-width:699px){
 #island-elder,#island-elder.visible{top:var(--elder-top,0px);left:var(--elder-left,0px);width:var(--elder-width,100%);height:var(--elder-height,81px);max-width:none;box-sizing:border-box;transform:none;flex-direction:row;gap:8px;padding:5px 10px;border:0;border-bottom:1px solid color-mix(in srgb, #847b59 var(--divider-strength), transparent);box-shadow:inset 0 1px color-mix(in srgb, #545846 var(--divider-strength), transparent);background:#20262b;transition:opacity 180ms ease,visibility 0s 180ms}
 #island-elder.visible{transition:opacity 180ms ease,visibility 0s}
 #island-elder.pirate-warning{background:#292820}
 #island-elder canvas{width:48px;height:48px;flex:0 0 48px}
 #island-elder p,#island-elder.pirate-warning p{width:auto;min-width:0;flex:1;font:500 var(--ui-text)/1.2 var(--ui-font);text-align:left;text-wrap:balance}
 #resources>.resource-button,#resources>#game-menu{transition:opacity 180ms ease}
 .elder-in-header #resources>.resource-button,.elder-in-header #resources>#game-menu{opacity:0;pointer-events:none}
}

/* The menu fades into a starry exit at the bottom; its content scrolls above it. */
#castle-view{display:flex;flex-direction:column;overflow:hidden}
#castle-view[hidden]{display:none}
.castle-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#7f8461 #181e1b;scroll-padding-bottom:40px}
.castle-content{padding-bottom:42px}
.building-room-scroll{flex:1 1 auto;padding-bottom:42px;scroll-padding-bottom:40px}
#castle-view #castle-exit.interior-exit,:is(#building-view,#tavern-view) [data-room="exit"].interior-exit{
 position:relative;inset:auto;z-index:2;isolation:isolate;display:flex;flex:0 0 auto;align-items:center;justify-content:center;
 width:100%;height:auto;min-width:0;min-height:84px;box-sizing:border-box;margin:0;padding:22px 16px 24px;
 border:0;border-radius:0;box-shadow:none;transform:none;overflow:visible;cursor:pointer;
 background:linear-gradient(180deg,rgba(3,5,8,.76),#030507 72%);color:#e9dfc7;
 font:500 var(--ui-text)/1.4 var(--ui-font);letter-spacing:.025em;text-shadow:0 0 12px #c0cbd433;
 transition:color .2s ease,text-shadow .2s ease;
}
.interior-exit::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:36px;background:linear-gradient(180deg,transparent,rgba(3,5,8,.18) 28%,rgba(3,5,8,.5) 68%,rgba(3,5,8,.76));pointer-events:none}
.interior-exit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.72;
 background:radial-gradient(circle at 9% 65%,#d5dcd0 0 .7px,transparent 1.4px),radial-gradient(circle at 18% 27%,#a4b4c0 0 .6px,transparent 1.3px),radial-gradient(circle at 28% 77%,#e5d5a7 0 .8px,transparent 1.6px),radial-gradient(circle at 38% 17%,#b7c1cc 0 .6px,transparent 1.2px),radial-gradient(circle at 63% 82%,#aab8c5 0 .6px,transparent 1.2px),radial-gradient(circle at 73% 24%,#ecdfb6 0 .8px,transparent 1.7px),radial-gradient(circle at 84% 69%,#b6c4d3 0 .7px,transparent 1.5px),radial-gradient(circle at 94% 35%,#cdd2c3 0 .6px,transparent 1.3px);
}
#castle-view #castle-exit.interior-exit span,:is(#building-view,#tavern-view) [data-room="exit"].interior-exit span{position:relative;border:0;padding:0;white-space:normal;text-align:center}
@media(hover:hover){#castle-view #castle-exit.interior-exit:hover,:is(#building-view,#tavern-view) [data-room="exit"].interior-exit:hover{color:#fff2cc;text-shadow:0 0 16px #d9d9ba66}}
#castle-view #castle-exit.interior-exit:active,:is(#building-view,#tavern-view) [data-room="exit"].interior-exit:active{transform:none;box-shadow:none;color:#fff8e8}
#castle-view #castle-exit.interior-exit:focus-visible,:is(#building-view,#tavern-view) [data-room="exit"].interior-exit:focus-visible{outline:1px solid #c6ba96;outline-offset:-7px}
@media(prefers-reduced-motion:reduce){.interior-exit{animation:none}.interior-exit::before,.interior-exit::after{animation:none}}

/* Keep the illustration above the scrolling sheet; dissolve its lower edge into the menu. */
#castle-view{--room-fog:24,30,27}
:is(#building-view,#tavern-view){--room-fog:34,41,31}
.castle-room,.building-room{flex:0 0 auto;position:relative;overflow:hidden;border:0}
.castle-room::after,.building-room::after{
 content:"";position:absolute;inset:auto 0 0;z-index:1;height:clamp(30px,30%,76px);pointer-events:none;
 background:linear-gradient(180deg,rgba(var(--room-fog),0),rgba(var(--room-fog),.22) 28%,rgba(var(--room-fog),.68) 64%,rgb(var(--room-fog)) 100%),radial-gradient(ellipse at 25% 100%,rgba(var(--room-fog),.35),rgba(var(--room-fog),0) 70%);
}

/* Interiors use half-height resources, leaving more room for their menus. */
#resources{transition:min-height .18s ease,padding .18s ease}
#resources>.resource-button canvas,#resources #menu-toggle canvas{transition:width .18s ease,height .18s ease}
#resources>.resource-button b{transition:font-size .18s ease}
@media(max-width:759px),(pointer:coarse){
.inside-castle #resources{min-height:58.5px;padding:2px 0 3px}
.inside-castle #resources>.resource-button canvas,.inside-castle #resources #menu-toggle canvas{width:30px;height:27px;filter:drop-shadow(1px 1px #0b1116)}
.inside-castle #resources>.resource-button b{font-size:18px;letter-spacing:-.5px;text-shadow:1px 1px #090d10,0 -.5px #786c50}
.inside-castle #resources #menu-toggle{min-height:0;padding:2px}
.inside-castle #resources #menu-toggle canvas{filter:none}
}
@media(max-width:699px){
 .inside-castle #resources{min-height:calc(23.5px + clamp(13px,3.6vw,17px));padding:1.5px 0 2px}
 .inside-castle #resources>.resource-button canvas,.inside-castle #resources #menu-toggle canvas{width:22px;height:20px}
 .inside-castle #resources>.resource-button b{font-size:clamp(13px,3.6vw,17px)}
}
@media(prefers-reduced-motion:reduce){#resources,#resources>.resource-button canvas,#resources #menu-toggle canvas,#resources>.resource-button b{transition:none}}

/* Resource prices remain prominent inside the compact interior menus. */
#castle-view .castle-price canvas{width:calc(32px * var(--ui-scale));height:calc(32px * var(--ui-scale));flex-shrink:0}
#castle-view #castle-upgrade-cost span{font-size:var(--ui-title);gap:5px;white-space:nowrap}
#castle-view .castle-people-grid .castle-price span{font-size:var(--ui-text);gap:4px;white-space:nowrap}
:is(#building-view,#tavern-view) .room-price canvas{width:calc(36px * var(--ui-scale));height:calc(36px * var(--ui-scale));flex-shrink:0}

body img,body canvas{-webkit-user-drag:none}#world:focus{outline:none}

/* Road construction shares the existing two-button planning row. */
footer #city-primary .road-cost-icon{width:20px;height:20px;flex:0 0 20px;image-rendering:pixelated}

/* Square desktop field, with the existing portrait layout one click away. */
#screen-mode,:is(#desktop-tools,#desktop-left-tools){display:none}
@media(min-width:760px) and (pointer:fine){
 #screen-mode{position:absolute;top:0;left:calc(100% + var(--frame-x) + 14px);z-index:15;display:grid;place-items:center;width:52px;height:52px;padding:10px;border-radius:50%;border:2px solid #b5a776;background:#455139;box-shadow:inset 0 2px #d2c28a,inset 0 -3px #263020,0 2px #151e14}
 #screen-mode canvas{width:100%;height:100%;image-rendering:pixelated}
 .desktop-view main{width:min(calc(100vw - 180px),calc(100dvh - 220px));min-width:320px;height:auto;max-height:100dvh;grid-template-rows:auto auto auto;--frame-x:24px;--frame-y:20px}
 .desktop-view #world{width:100%;height:auto;aspect-ratio:1;min-height:0}
 .desktop-view #resources{min-height:64px;padding:3px 0}
 .desktop-view #resources>.resource-button canvas,.desktop-view #resources #menu-toggle canvas{width:36px;height:30px}
 .desktop-view #resources>.resource-button b{font-size:22px}
 .desktop-view footer{--menu-size:clamp(64px,8dvh,88px);gap:8px;padding:6px 4px 8px;justify-items:stretch}
 .desktop-view footer nav button{width:100%;height:var(--menu-size);min-height:64px;max-width:none;aspect-ratio:auto;border-radius:0;padding:6px;border:3px solid #0c120d;background:var(--face);box-shadow:inset 2px 2px var(--bevel-light),inset -3px -3px var(--bevel-dark),inset 4px 4px var(--bevel-mid),0 2px #080b08}
 .desktop-view footer nav canvas{width:calc(var(--menu-size) - 16px);height:calc(var(--menu-size) - 16px);max-width:100%}
 :is(#desktop-tools,#desktop-left-tools){position:absolute;top:66px;left:calc(100% + var(--frame-x) + 14px);z-index:15;width:52px;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:14px;border-top:1px solid color-mix(in srgb, #777454 var(--divider-strength), transparent);box-shadow:0 -1px color-mix(in srgb, #151e14 var(--divider-strength), transparent)}
 :is(#desktop-tools,#desktop-left-tools) button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:8px;border-radius:50%;border:2px solid #b5a776;background:#455139;box-shadow:inset 0 2px #d2c28a66,inset 0 -3px #263020,0 2px #151e14}
 :is(#desktop-tools,#desktop-left-tools) canvas{width:100%;height:100%;image-rendering:pixelated}
 :is(#desktop-tools,#desktop-left-tools) button[aria-pressed="false"]{filter:saturate(.35);opacity:.65}
 .desktop-view footer.planning-city #build-toggle{width:100%;max-width:none;border-radius:0;padding:6px}
 .desktop-view main.inside-castle{height:min(100dvh,850px);grid-template-rows:auto minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){#screen-mode:active,:is(#desktop-tools,#desktop-left-tools) button:active{transform:none}}

/* A shared square icon box; visible artwork is centred in Canvas as well. */
:is(#screen-mode,#boat-quick,#castle-quick,#building-quick,:is(#desktop-tools,#desktop-left-tools)) canvas{display:block;aspect-ratio:1;object-fit:contain;align-self:center;justify-self:center;filter:none}
.desktop-view footer nav canvas{display:block;aspect-ratio:1;object-fit:contain;filter:none;align-self:center;justify-self:center}

/* Desktop resources: an icon and its count share one generous horizontal row. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view #resources{grid-template-columns:repeat(4,minmax(0,1fr)) clamp(40px,calc(var(--ui-width) * .08),72px);min-height:68px;padding:6px 4px}
 .desktop-view #resources>.resource-button{flex-direction:row;gap:clamp(4px,calc(var(--ui-width) * .008),12px);padding:4px clamp(3px,calc(var(--ui-width) * .008),12px);min-width:0}
 .desktop-view #resources>.resource-button canvas{display:block;width:clamp(24px,calc(var(--ui-width) * .053),54px);height:clamp(24px,calc(var(--ui-width) * .053),54px);flex-shrink:0;object-fit:contain;image-rendering:pixelated}
 .desktop-view #resources>.resource-button b{font-size:clamp(20px,calc(var(--ui-width) * .032),34px);line-height:1.1;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0}
 .desktop-view #resources #menu-toggle canvas{width:40px;height:40px;max-width:100%;object-fit:contain}
}

/* Desktop controls retain their proportions on wide buttons and windows. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view #build-toggle[aria-pressed="true"]::after{display:none}
 .desktop-view footer nav button{overflow:hidden}
 .desktop-view footer nav button:active:not(:disabled){box-shadow:inset 2px 2px var(--bevel-dark),inset -2px -2px var(--bevel-light),0 1px #080b08}
 .desktop-view #resources>.resource-button{container-type:inline-size}
 .desktop-view #resources>.resource-button b{font-size:min(clamp(20px,calc(var(--ui-width) * .032),34px),calc((100cqw - clamp(24px,calc(var(--ui-width) * .053),54px) - clamp(4px,calc(var(--ui-width) * .008),12px)) / var(--resource-digits,2) * 1.5))}
 .desktop-view .castle-heading,.desktop-view .building-room-heading{flex-wrap:wrap}
 .desktop-view .castle-heading h1,.desktop-view .building-room-heading h1{min-width:0;overflow-wrap:anywhere}
 .desktop-view #build-panel{max-height:calc(100dvh - 220px);max-height:min(52dvh,calc(100dvh - 220px))}
}

/* Visible building tabs replace the one-at-a-time arrow carousel. */
#building-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:5px;margin:10px 0 0;border-bottom:2px solid #879264;padding-bottom:5px}
#building-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:64px;padding:5px 3px;border:2px solid;border-color:#788363 #222c20 #222c20 #626f51;border-radius:0;background:#303b2d;box-shadow:inset 0 1px #a4ac7933;color:#d6d5b5;font:600 var(--ui-small)/1.15 var(--ui-font);text-shadow:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
#building-tabs button[aria-selected="true"]{background:#52643c;border-color:#d4c98e #859766 #a6b27b #c1c38a;color:#fff0bf;box-shadow:inset 0 -3px #84915a}
#building-tabs button:active{transform:none;background:#627447}
#building-tabs button:focus-visible{outline:2px solid #ffe4a1;outline-offset:1px}
#building-tabs canvas{display:block;width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
#building-tabs span{max-width:100%;overflow-wrap:anywhere;text-align:center}
#build-panel #building-prev,#build-panel #building-next,#build-panel #building-page{display:none}
#build-panel .building-carousel{grid-template-columns:minmax(0,1fr)}
#building-details{min-width:0}
#build-panel .building-stage{height:clamp(64px,10dvh,112px)}
#build-panel.upgrading #building-tabs{display:none}
@media(prefers-reduced-motion:reduce){#building-tabs button{transition:none}}

@media(min-width:760px) and (pointer:fine){
 :is(#building-quick,#castle-quick,#adventure-quick) button{width:clamp(68px,calc(58px * var(--ui-scale)),94px);height:clamp(68px,calc(58px * var(--ui-scale)),94px);min-height:68px;padding:12px}
 #building-quick,#castle-quick{gap:16px}
 #screen-mode{width:68px;height:68px;padding:12px}
 :is(#desktop-tools,#desktop-left-tools){top:84px;width:68px;gap:16px;padding-top:16px}
 :is(#desktop-tools,#desktop-left-tools) button{width:60px;height:60px;min-height:60px;padding:10px}
 #boat-quick{width:calc(var(--ui-control) * 1.3 + 10px);height:calc(var(--ui-control) * 1.3 + 10px);padding:7px}
}

/* The desktop elder speaks just below resources, without covering that row. */
@media(min-width:700px) and (pointer:fine){
 #island-elder,#island-elder.visible{top:var(--elder-below-top,80px);left:50%;width:calc(100% - 20px);max-width:680px;box-sizing:border-box;flex-direction:row;align-items:center;gap:14px;padding:10px 16px;transform:translateX(-50%);transition:opacity 180ms ease,visibility 0s 180ms}
 #island-elder.visible{transition:opacity 180ms ease,visibility 0s}
 #island-elder canvas{width:64px;height:64px;flex:0 0 64px;image-rendering:pixelated}
 #island-elder p,#island-elder.pirate-warning p{flex:1;min-width:0;width:auto;max-width:none;font:500 var(--ui-text)/1.35 var(--ui-font);text-align:left;overflow-wrap:anywhere}
}

/* Castle price belongs to its confirmation button, readable on both layouts. */
footer:has(#city-primary.castle-foundation){--menu-size:clamp(76px,10dvh,96px)}
footer #city-bar #city-primary.castle-foundation{flex-direction:column;gap:5px;padding:6px 4px}
footer #city-primary.castle-foundation::before{display:none}
.castle-build-label{font:600 var(--ui-text)/1.15 var(--ui-font)}
#castle-build-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;max-width:100%;font:700 var(--ui-text)/1.1 var(--ui-font);font-variant-numeric:tabular-nums}
#castle-build-price>span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
footer #castle-build-price canvas{display:block;width:24px;height:24px;flex:0 0 24px;image-rendering:pixelated}
#castle-build-price .missing{color:#ffad8e}
@media(min-width:760px) and (pointer:fine){footer #castle-build-price canvas{width:32px;height:32px;flex-basis:32px}#castle-build-price{gap:6px 16px}}
@media(max-width:350px){footer #castle-build-price canvas{width:20px;height:20px;flex-basis:20px}#castle-build-price{column-gap:5px}}

/* Desktop rooms leave most of the window to readable services and actions. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view main.inside-castle{height:min(960px,calc(100dvh - 24px));max-height:calc(100dvh - 24px)}
 .desktop-view :is(.castle-room,.building-room){height:clamp(140px,25dvh,220px);min-height:0;flex:0 0 auto}
 .desktop-view :is(.castle-room,.building-room)>canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:fill}
 .desktop-view :is(.castle-room,.building-room)::after{height:36px}
 .desktop-view .castle-content{padding:12px 20px 26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start}
 .desktop-view .castle-content>.castle-heading,.desktop-view .castle-content>p{grid-column:1/-1}
 .desktop-view .castle-service{min-width:0;padding-top:14px}
 .desktop-view .castle-service h2{margin:0 0 10px;font-size:var(--ui-title)}
 .desktop-view #castle-view .castle-price canvas,.desktop-view :is(#building-view,#tavern-view) .room-price canvas{width:32px;height:32px;flex:0 0 32px}
 .desktop-view #castle-view .castle-people-grid button{padding:10px 4px;gap:7px}
 .desktop-view .building-room-heading{margin:0 20px;padding:12px 0;flex-shrink:0}
 .desktop-view .building-room-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;align-content:start;align-items:start;padding:0 20px 26px}
 .desktop-view .building-room-scroll>p,.desktop-view .building-room-scroll>.bank-services{grid-column:1/-1}
 .desktop-view .building-room-scroll>section{min-width:0;margin:0;padding-top:12px}
 .desktop-view #castle-view #castle-exit.interior-exit,.desktop-view :is(#building-view,#tavern-view) [data-room="exit"].interior-exit{min-height:60px;padding:14px 16px 16px}
 .desktop-view .interior-exit::before{height:24px}
}
@media(min-width:760px) and (max-height:750px) and (pointer:fine){
 .desktop-view .castle-content,.desktop-view .building-room-scroll{grid-template-columns:minmax(0,1fr)}
 .desktop-view :is(.castle-room,.building-room){height:140px}
}

/* Invisible doorway hit areas for optional, purely decorative room secrets. */
#castle-view .room-easter-door,:is(#building-view,#tavern-view) .room-easter-door{position:absolute;z-index:3;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;display:block;cursor:pointer}
#castle-view .room-easter-door:active,:is(#building-view,#tavern-view) .room-easter-door:active{background:transparent;box-shadow:none;transform:none}
#castle-view .room-easter-door:focus-visible,:is(#building-view,#tavern-view) .room-easter-door:focus-visible{outline:1px dashed #b8b58b;outline-offset:0}
.room-easter-door>canvas{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}

/* Stable shell: action modes replace content, never resize the game frame. */
main{--resource-height:96px;--action-height:100px;grid-template-rows:var(--resource-height) minmax(0,1fr) var(--action-height)}
main.inside-castle{grid-template-rows:var(--resource-height) minmax(0,1fr)}
main #resources,main.inside-castle #resources{height:var(--resource-height);min-height:0;max-height:var(--resource-height);transition:none;overflow:hidden}
footer,footer:has(#city-primary.castle-foundation){--menu-size:80px;height:calc(var(--action-height) - 6px);min-height:0;max-height:calc(var(--action-height) - 6px);padding:6px 4px 8px;align-content:center;grid-template-rows:minmax(0,1fr)}
footer nav button,footer #city-bar{height:var(--menu-size);min-height:0}
@media(max-width:699px){main{--resource-height:88px}}
@media(min-width:760px) and (pointer:fine){
 .desktop-view main,.desktop-view main.inside-castle{
  --desktop-menu-size:clamp(52px,6.12dvh,88px);
  --resource-height:clamp(44px,4.45dvh,64px);
  --action-height:calc(var(--desktop-menu-size) + 20px);
  --frame-x:clamp(12px,1.67dvh,24px);--frame-y:clamp(10px,1.39dvh,20px);
  --desktop-tool-size:clamp(44px,4.72dvh,68px);
  --desktop-side-room:calc(2 * (var(--desktop-tool-size) + 14px));
  --game-width:min(calc(100vw - var(--desktop-side-room)),calc(100dvh - var(--resource-height) - var(--action-height) - 2 * var(--frame-y) + 2 * var(--frame-x)));
  width:var(--game-width);min-width:0;height:100dvh;max-height:100dvh;
  grid-template-rows:var(--resource-height) minmax(0,1fr) var(--action-height);
 }
 .desktop-view main.inside-castle{grid-template-rows:var(--resource-height) minmax(0,1fr)}
 .desktop-view footer,.desktop-view footer:has(#city-primary.castle-foundation){--menu-size:var(--desktop-menu-size)}
 .desktop-view #world{height:100%;min-height:0;aspect-ratio:auto}
}

/* Subtle separators across all game menus, including existing translucent lines. */
:root{--divider-strength:50%}
@media(max-width:699px),(pointer:coarse){:root{--divider-strength:30%}}

/* Raised construction caption and roomier tabs; scrolling stays inside the frame. */
#build-panel{--building-body-height:min(64dvh,calc(100dvh - var(--resource-height) - var(--action-height) - 68px));max-height:none;overflow:visible;padding:10px}
#build-panel .building-heading{position:absolute;left:10px;bottom:calc(100% + 8px);max-width:calc(100% - 112px);box-sizing:border-box;padding:6px 10px;border:0;background:#293224;box-shadow:inset 0 1px #a5a57655,0 2px #131b13;pointer-events:none}
#build-panel h2{font-size:var(--ui-text);overflow-wrap:anywhere}
#building-body{max-height:max(100px,var(--building-body-height));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#66704b #252d23;padding:2px;box-sizing:border-box}
#building-tabs{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
#building-tabs button{min-height:76px;gap:5px;padding:7px 3px}
#building-tabs canvas{width:40px;height:40px;flex-shrink:0}
#build-panel .building-stage{height:clamp(88px,14dvh,136px)}
@media(min-width:760px) and (pointer:fine){
 .desktop-view #build-panel{max-height:none;--building-body-height:min(64dvh,calc(100dvh - var(--resource-height) - var(--action-height) - 68px));padding:12px}
 .desktop-view #building-tabs button{min-height:92px;padding:9px 4px}
 .desktop-view #building-tabs canvas{width:48px;height:48px}
 .desktop-view #build-panel .building-stage{height:clamp(112px,17dvh,168px)}
}

/* The first paint is already dark; only finished UI becomes visible. */
main{transition:opacity .2s ease-out}
#loader{transition:opacity .6s ease;background:#0b1114}
#loader .loading-track{display:none}
#loader.has-error #loading-text,#loader.has-error #loading-retry{visibility:visible;opacity:1;transform:none}
#loader.has-error #loading-text{display:block}
@media(prefers-reduced-motion:reduce){main,#loader{transition:opacity .12s}}

/* Desktop phone preview uses the same document at an actual phone viewport size. */
html.mobile-preview-shell{background:#0b1114}
.mobile-preview-shell body{display:grid;place-items:center;min-height:100dvh;padding:16px 88px;overflow:hidden}
#mobile-preview-shell{position:relative;width:390px;height:min(844px,calc(100dvh - 32px));max-width:100%;}
#mobile-preview-shell iframe{display:block;width:100%;height:100%;border:0;background:#0b1114;color-scheme:dark}
#mobile-preview-back{position:absolute;left:calc(100% + 18px);top:0;width:60px;height:60px;min-height:60px;padding:14px;display:grid;place-items:center;border:2px solid #b5a776;border-radius:50%;background:#455139;box-shadow:inset 0 2px #d2c28a,inset 0 -3px #263020,0 2px #151e14}
#mobile-preview-back span{position:relative;display:block;width:26px;height:19px;border:3px solid #e9d694}
#mobile-preview-back span::after{content:"";position:absolute;width:14px;height:3px;top:20px;left:3px;background:#e9d694;box-shadow:0 -3px #e9d694}

#blessing-status{color:#f9e1a0;font:28px/1 Arial;pointer-events:auto;cursor:pointer}
#adventure-quick{position:absolute;right:6px;bottom:calc(100% + 10px);z-index:10;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s .18s}
#adventure-quick.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s ease,visibility 0s}
/* A solid parchment caption for the desktop map; pixel edges never stretch. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view #settlement-intro{left:12%;right:8%;padding:12px 22px;color:#343c30;font-weight:600;line-height:1.4}
 .desktop-view #settlement-intro::before{inset:0;background:linear-gradient(#eee9d3,#e1ddc4);clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),0 calc(100% - 4px),0 4px,8px 4px);box-shadow:inset 0 2px #fff8e9,inset 0 -2px #a6a78b}
 .desktop-view #settlement-intro::after{content:none}
}

/* Adventure discovery lives inside the map, without a framed window. */
#adventure-veil{position:absolute;z-index:45;box-sizing:border-box;display:flex;overflow:auto;overscroll-behavior:contain;padding:20px 16px;border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse at 50% 42%,#334440b8,transparent 65%),linear-gradient(#0a121b,#0e171b 65%,#091218);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s .2s;scrollbar-width:thin;scrollbar-color:#54615b #101b20}
#adventure-veil.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s}
#adventure-veil .adventure-opening{width:min(100%,480px);margin:auto;text-align:center;flex-shrink:0;color:#e8e4ce}
.adventure-vignette{position:relative;width:clamp(112px,22dvh,176px);aspect-ratio:1;margin:0 auto 8px;background:radial-gradient(circle,#78948b25,transparent 70%)}
.adventure-vignette canvas{display:block;width:100%;height:100%;image-rendering:pixelated;mask-image:radial-gradient(circle,#000 35%,#000b 50%,transparent 70%);-webkit-mask-image:radial-gradient(circle,#000 35%,#000b 50%,transparent 70%)}
#adventure-scene-title{font-size:var(--ui-title);line-height:1.25;margin:0 0 16px;color:#ece3bd}
.adventure-narrator{display:flex;align-items:center;gap:12px;text-align:left;margin:0 auto;max-width:430px}
.adventure-narrator canvas{width:48px;height:48px;flex:0 0 48px;image-rendering:pixelated}
#adventure-story{margin:0;font-size:var(--ui-text);line-height:1.45;color:#d8dccd}
#adventure-veil .adventure-question{margin:20px 0 4px;font-size:var(--ui-title);line-height:1.3;color:#f2e3b2}
#adventure-veil .adventure-choices{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px}
#adventure-veil .adventure-choices button{width:auto;min-width:96px;min-height:44px;height:auto;margin:0;padding:10px 12px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#d9dcca;font:inherit;font-size:var(--ui-text);line-height:1.3;transform:none;transition:color .18s,text-shadow .18s}
#adventure-veil .adventure-choices [data-open]{color:#ffe6a3;font-weight:600;text-shadow:0 0 16px #e1c36a40}
@media(hover:hover){#adventure-veil .adventure-choices button:hover{color:#fff2cd;text-shadow:0 0 12px #e1c36a66}}
#adventure-veil .adventure-choices button:focus-visible{outline:1px dashed #d4c291;outline-offset:-3px}
#adventure-veil .adventure-choices button:active{color:#c7b775}
@media(max-width:480px){#adventure-veil{padding:16px 12px}.adventure-narrator{gap:8px}.adventure-narrator canvas{width:40px;height:40px;flex-basis:40px}}
@media(prefers-reduced-motion:reduce){#adventure-veil,#adventure-veil.visible{transition:opacity .15s,visibility 0s .15s}#adventure-veil.visible{transition-delay:0s}}

/* Player wiki: quiet full-screen reading, with discoveries rather than spoilers. */
:is(#desktop-tools,#desktop-left-tools) #wiki-toggle{position:relative;margin-top:22px;flex-shrink:0}
#wiki-toggle::before{content:"";position:absolute;top:-15px;left:0;right:0;height:1px;background:#b5a77640}
.wiki-count{position:absolute;right:-9px;top:-5px;min-width:22px;height:22px;box-sizing:border-box;padding:1px 5px;border:1px solid #aa9c68;border-radius:12px;background:#303b2e;color:#f2e4b0;font:600 16px/18px var(--ui-font);box-shadow:0 2px 4px #0005}
#wiki-panel{position:fixed;inset:0;z-index:1000;display:flex;padding:clamp(8px,2vw,24px);box-sizing:border-box;background:radial-gradient(ellipse at top,#283a32,#0b1318 75%);color:#e4dfc8;font-family:var(--ui-font);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}
#wiki-panel.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s,visibility 0s}
#wiki-panel .wiki-shell{width:100%;max-width:1200px;height:100%;min-height:0;margin:auto;display:flex;flex-direction:column;gap:16px}
#wiki-panel .wiki-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
#wiki-panel h1,#wiki-panel h2{font-size:var(--ui-title);line-height:1.35;margin:0;color:#eee1b5}
#wiki-panel .wiki-header p{font-size:var(--ui-small);margin:4px 0 0;color:#a9b2a3}
#wiki-panel button{font:400 var(--ui-text)/1.35 var(--ui-font);border:0;box-shadow:none;border-radius:4px;background:#27382e;color:#dedbc6;min-height:44px;height:auto;padding:10px 14px;transform:none;transition:background .18s,color .18s;text-align:left}
@media(hover:hover){#wiki-panel button:hover{background:#3b4b37}}
#wiki-panel button:focus-visible,#wiki-panel input:focus-visible,#wiki-panel article:focus-visible{outline:2px solid #b8ad7b;outline-offset:2px}
#wiki-panel .wiki-close{font-size:var(--ui-title);width:44px;padding:6px;text-align:center;flex-shrink:0}
#wiki-panel .wiki-tabs{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
#wiki-panel button[aria-pressed="true"]{background:#52603d;color:#fff0bf}
#wiki-panel .wiki-unread::after{content:"!";display:inline-block;flex:0 0 auto;margin-left:6px;color:#d7c480;font-weight:700;font-size:var(--ui-small);line-height:1;vertical-align:middle}
#wiki-panel .wiki-body{display:grid;grid-template-columns:minmax(190px,28%) minmax(0,1fr);gap:24px;flex:1;min-height:0}
#wiki-panel .wiki-list{display:flex;flex-direction:column;gap:6px;overflow:auto;padding:3px;scrollbar-width:thin;align-items:stretch}
#wiki-panel .wiki-list button{flex-shrink:0}
#wiki-panel .wiki-article{overflow:auto;overscroll-behavior:contain;min-height:0;padding:8px 18px 28px 4px;scrollbar-width:thin;max-width:760px}
#wiki-panel .wiki-article p{font-size:var(--ui-text);line-height:1.65;margin:16px 0;color:#d4d8c9;user-select:text}
#wiki-panel .wiki-settings{position:static;display:block;flex-shrink:0;height:auto;min-height:0;max-height:none;margin:0;padding:12px 0 0;border:0;border-top:1px solid #aeb69325;background:none;box-shadow:none}
#wiki-panel .wiki-settings label{display:flex;align-items:center;gap:10px;font-size:var(--ui-small);cursor:pointer;min-height:32px}
#wiki-panel input{width:20px;height:20px;accent-color:#b4bf89}
#wiki-panel .wiki-settings p{font-size:var(--ui-small);color:#98a393;margin:6px 0 0}
@media(max-width:600px){#wiki-panel .wiki-shell{gap:10px}#wiki-panel .wiki-tabs{flex-wrap:nowrap;overflow:auto;padding-bottom:4px}#wiki-panel .wiki-tabs button{white-space:nowrap}#wiki-panel .wiki-body{display:flex;flex-direction:column;gap:12px}#wiki-panel .wiki-list{flex-direction:row;flex-shrink:0;max-height:100px}#wiki-panel .wiki-list button{max-width:220px}#wiki-panel .wiki-article{flex:1;padding:4px 8px 20px}#wiki-panel .wiki-settings p{margin-top:2px}}
@media(max-height:500px){#wiki-panel .wiki-header p,#wiki-panel .wiki-settings p{display:none}#wiki-panel .wiki-shell{gap:6px}#wiki-panel .wiki-settings{padding-top:4px}}
@media(prefers-reduced-motion:reduce){#wiki-panel,#wiki-panel.visible{transition-duration:.15s}#wiki-panel button{transition:none}}

/* The journal replaces the game inside its own stone frame. */
#wiki-panel{inset:auto;padding:clamp(10px,2vw,22px);overflow:hidden;background:#111e22;isolation:isolate;--ui-text:18px;--ui-small:16px;--ui-title:22px}
#wiki-panel::before{content:"";position:absolute;inset:-15%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 20% 20%,#60704724,transparent 55%),radial-gradient(ellipse at 85% 75%,#51737720,transparent 60%),linear-gradient(135deg,#142426,#101b20);animation:wiki-glimmer 16s ease-in-out infinite alternate}
@keyframes wiki-glimmer{from{transform:translate(-2%,-1%);opacity:.75}to{transform:translate(2%,1%);opacity:1}}
#wiki-panel .wiki-shell{gap:12px;max-width:none}
#wiki-panel .wiki-header p{color:#9ea88f}
#wiki-panel .wiki-tabs{display:flex;flex:0 0 auto;align-items:stretch;flex-wrap:nowrap;overflow:auto;gap:5px;padding:2px 2px 6px;grid-template-columns:none}
#wiki-panel button{aspect-ratio:auto;min-width:0;max-width:none;width:auto;min-height:44px;height:auto;text-shadow:none;box-sizing:border-box}
#wiki-panel .wiki-tabs button{display:flex;flex:1 0 auto;align-items:center;justify-content:center;gap:5px;min-height:48px;max-height:64px;padding:7px 9px;font-size:var(--ui-small);background:#2b3b302e;border-bottom:2px solid transparent;white-space:nowrap}
#wiki-panel .wiki-tabs button[aria-pressed="true"]{background:#75845a22;border-bottom-color:#b4a57588;color:#e8d6a2}
#wiki-panel .wiki-body{gap:18px;grid-template-columns:minmax(140px,29%) minmax(0,1fr)}
#wiki-panel .wiki-list{flex:1 1 auto;align-content:start;grid-template-columns:none;min-width:0;gap:5px}
#wiki-panel .wiki-list button{display:flex;align-items:center;gap:8px;width:100%;height:auto;min-height:52px;max-height:none;flex:0 0 auto;padding:7px 8px;background:#293b302e;font-size:var(--ui-small)}
#wiki-panel .wiki-list button[aria-pressed="true"]{background:#64734a40;box-shadow:inset 2px 0 #b6a370;color:#eddfb6}
#wiki-panel .wiki-icon{display:block;flex:0 0 32px;width:32px;height:32px;object-fit:contain;image-rendering:pixelated;filter:none}
#wiki-panel .wiki-tabs .wiki-icon{width:26px;height:26px;flex-basis:26px}
#wiki-panel .wiki-picture{display:block;width:min(100%,320px);height:auto;aspect-ratio:160/88;margin:0 auto 16px;image-rendering:pixelated;mask-image:radial-gradient(ellipse,#000 40%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse,#000 40%,transparent 73%)}
#wiki-panel .wiki-article{padding:0 8px 18px;max-width:none}
#wiki-panel .wiki-article p{line-height:1.55;margin:12px 0}
#wiki-panel .wiki-settings::before{content:none}
#wiki-panel .wiki-settings{padding-top:8px}
#wiki-panel .wiki-settings p{color:#879480;font-size:var(--ui-small)}
@media(max-width:700px){#wiki-panel .wiki-tabs button{flex:0 0 auto}#wiki-panel .wiki-body{display:flex;flex-direction:column;gap:10px}#wiki-panel .wiki-list{flex:0 0 auto;flex-direction:row;max-height:80px;overflow:auto}#wiki-panel .wiki-list button{width:auto;max-width:220px;min-height:50px;white-space:normal}#wiki-panel .wiki-article{flex:1;min-height:0}#wiki-panel .wiki-picture{width:240px;max-width:100%;margin-bottom:10px}#wiki-panel .wiki-settings p{display:none}}
@media(prefers-reduced-motion:reduce){#wiki-panel::before{animation:none}}

/* Quiet emphasis for the journal's key actions and conditions. */
#wiki-panel .wiki-article strong{font-weight:600;color:#e4d5aa}
/* Small, static game sprites stay beside their readable names. */
#wiki-panel .wiki-inline-subject{white-space:nowrap}
#wiki-panel .wiki-inline-icon{display:inline-block;width:24px;height:24px;margin:0 3px 0 0;vertical-align:-5px;image-rendering:pixelated;object-fit:contain;pointer-events:none}


/* Keep the journal toggle available outside the inert game while reading. */
#wiki-toggle.wiki-return{position:fixed;z-index:1001;display:grid;place-items:center;box-sizing:border-box;margin:0;color:#ead9a2}
#wiki-toggle.wiki-return canvas{display:block;width:100%;height:100%;aspect-ratio:1;image-rendering:pixelated;filter:none}

/* Hero sheet shares the construction panel's position, never changes map size. */
#hero-panel{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:24;margin:0;padding:12px;background:linear-gradient(145deg,#303a29,#1b2924);border:2px solid #85896380;box-shadow:inset 0 0 0 2px #151f1a,0 3px 12px #0006;color:#e4dec0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s;text-align:left}
#hero-panel.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s,visibility 0s}
#hero-panel h2{position:absolute;left:10px;bottom:calc(100% + 8px);max-width:calc(100% - 24px);box-sizing:border-box;padding:6px 10px;border:0;background:#293224;box-shadow:inset 0 1px #a5a57655,0 2px #131b13;pointer-events:none;font:600 var(--ui-title)/1.3 var(--ui-font);margin:0}
.hero-panel-scroll{max-height:min(65dvh,calc(100dvh - var(--resource-height) - var(--action-height) - 120px));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.hero-company{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 4px 0}
.hero-company canvas{display:block;width:min(100%,240px);height:auto;image-rendering:pixelated}
.hero-company-heading{display:flex;align-items:baseline;justify-content:center;gap:8px;font:600 var(--ui-text)/1.3 var(--ui-font)}
.hero-army-count{font:inherit;color:inherit;text-shadow:none}
.hero-combat-summary{text-align:center;margin:6px 0 10px;font:400 var(--ui-small)/1.4 var(--ui-font);color:#bfc8af}
.hero-skill-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.hero-skill{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-top:1px solid #bdba8525}
.hero-skill>canvas{width:28px;height:28px;flex-shrink:0;image-rendering:pixelated}
.hero-skill>div{flex:1;min-width:0}.hero-skill-heading{display:flex;justify-content:space-between;gap:6px;font:400 var(--ui-text)/1.3 var(--ui-font)}
.hero-skill-heading span{white-space:nowrap;color:#e8d6a5}.hero-skill p{font:400 var(--ui-small)/1.35 var(--ui-font);margin:5px 0 0;color:#b8c3ad}
.hero-skill-meter{height:3px;background:#111e19;margin-top:6px}.hero-skill-meter i{display:block;height:100%;min-width:2px;background:#a9ad71}
#army.hero-panel-active canvas{display:none}#army.hero-panel-active{--face:#693e32;--bevel-light:#c4a16e;--bevel-mid:#8c6950;--bevel-dark:#35261d}
@media(max-width:600px){.hero-skill-list{grid-template-columns:1fr}.hero-company{gap:0}#hero-panel{padding:10px}.hero-company canvas{width:min(100%,240px)}}
@media(prefers-reduced-motion:reduce){#hero-panel,#hero-panel.visible{transition-duration:.12s}}

/* Shared left-edge banner for raised game-panel titles. */
.panel-title-flag,#build-panel .building-heading,#hero-panel h2{position:absolute;left:-2px;bottom:calc(100% + 8px);box-sizing:border-box;margin:0;padding:7px 24px 7px 12px;border:0;border-left:3px solid #a6a17499;background:linear-gradient(90deg,#37412d,#293324);box-shadow:inset 0 1px #b6b18440,inset 0 -1px #0c180e80;color:#dfd5ae;font:600 var(--ui-title)/1.3 var(--ui-font);pointer-events:none;clip-path:polygon(0 0,100% 0,100% 20%,calc(100% - 4px) 20%,calc(100% - 4px) 35%,calc(100% - 8px) 35%,calc(100% - 8px) 65%,calc(100% - 4px) 65%,calc(100% - 4px) 80%,100% 80%,100% 100%,0 100%)}
#hero-panel h2{padding:4px 20px 4px 10px;font-size:var(--ui-text)}
#build-panel .building-heading h2{margin:0;font:inherit;color:inherit}
.panel-title-flag{max-width:calc(100% - 24px);overflow-wrap:anywhere}

/* One geometric close mark, independent of fonts, on every game panel. */
:root{--close-mark-size:24px;--close-mark-color:#fff0cf;--close-mark:polygon(0 0,19% 0,50% 31%,81% 0,100% 0,100% 19%,69% 50%,100% 81%,100% 100%,81% 100%,50% 69%,19% 100%,0 100%,0 81%,31% 50%,0 19%)}
#wiki-panel .wiki-close,#hint-close,.game-close{position:relative;font-size:0;text-shadow:none}
#hint-close{position:absolute}
#build-toggle[aria-pressed="true"]::before,#army.hero-panel-active::before,#wiki-panel .wiki-close::before,#hint-close::before,.game-close::before{content:"";position:absolute;inset:50% auto auto 50%;display:block;width:var(--close-mark-size);height:var(--close-mark-size);background:var(--close-mark-color);border:0;box-shadow:none;pointer-events:none;transform:translate(-50%,-50%);clip-path:var(--close-mark)}

/* Anchor the shared close mark to its own button in mobile layouts too. */
#army.hero-panel-active{position:relative}

/* A complete, quiet farewell: no game frame or tools showing behind it. */
body.defeated{background:#0a1116}
body.defeated> :not(#defeat){visibility:hidden;pointer-events:none}
#defeat{z-index:2000;background:radial-gradient(ellipse at 50% 38%,#1c3031 0,transparent 58%),#0a1116;animation:none}
#defeat-content{width:min(100%,440px);animation:defeat-content-in .25s ease both}
#defeat-picture{width:min(100%,384px);max-height:52dvh;object-fit:contain;border:0;box-shadow:none;margin:0 auto 14px;mask-image:radial-gradient(ellipse at 50% 48%,#000 46%,#000b 68%,transparent 92%)}
#defeat h1{color:#dfd7b7;margin-bottom:8px}
#defeat p{color:#aabbb5}
#restart-game{background:#354c43;border:1px solid #98a88a80;box-shadow:inset 0 1px #d6dec044,inset 0 -2px #172c27;padding:13px 26px;color:#e7dfbf}
.preview-defeated body{padding:0;background:#0a1116}
.preview-defeated #mobile-preview-shell{position:fixed;inset:0;width:100%;height:100dvh;max-width:none}
.preview-defeated #mobile-preview-back{display:none}
@media(prefers-reduced-motion:reduce){#defeat-content{animation:none}}

/* Death is a sequence: falling hero, rising soul, mist, then the elder. */
#defeat{background:transparent;isolation:isolate;animation:none}
#defeat::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 38%,#1c3031 0,transparent 58%),#0a1116;opacity:0;transition:opacity .85s ease}
#defeat.farewell-covered::before{opacity:1}
#defeat #defeat-content{opacity:0;visibility:hidden;transform:translateY(6px);animation:none;transition:opacity .6s ease,transform .6s ease,visibility 0s .6s;pointer-events:none}
#defeat.farewell-ready #defeat-content{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
body.farewell-playing #screen-mode,body.farewell-playing :is(#desktop-tools,#desktop-left-tools),body.farewell-playing #wiki-toggle{opacity:0;pointer-events:none}
.preview-farewell #mobile-preview-back{opacity:0;pointer-events:none}
#mobile-preview-back{transition:opacity .2s ease}
#preview-farewell-veil{position:fixed;inset:0;z-index:3000;background:#0a1116;opacity:0;pointer-events:none;transition:opacity .22s ease}
#preview-farewell-veil.visible{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){#defeat::before{transition-duration:.25s}#defeat #defeat-content{transform:none;transition:opacity .25s ease,visibility 0s .25s}}

#screen-mode,:is(#desktop-tools,#desktop-left-tools){transition:opacity .2s ease}

/* Phones and the compact preview keep the single-building carousel. */
@media(max-width:899px),(pointer:coarse){
 #build-panel #building-tabs{display:none}
 #build-panel:not(.upgrading) .building-carousel{grid-template-columns:var(--build-arrow) minmax(0,1fr) var(--build-arrow)}
 #build-panel:not(.upgrading) #building-prev,#build-panel:not(.upgrading) #building-next{display:grid}
 #build-panel:not(.upgrading) #building-page{display:inline-block;white-space:nowrap}
}

/* Quiet update marker; the game reloads only on request. */
#menu-toggle{position:relative}
#menu-toggle::after{content:"";position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#e4cc84;box-shadow:0 0 0 2px #253029;opacity:0;pointer-events:none;transition:opacity .2s ease}
#menu-toggle.has-update::after{opacity:1}
#game-update-note{color:#dacb9c;line-height:1.4;overflow-wrap:anywhere}

/* A closed construction panel cannot leave its raised caption behind. */
#build-panel[hidden],#build-panel[hidden] .building-heading,#build-panel .building-heading[hidden]{display:none!important}
#build-panel .building-heading{max-width:calc(100% - 72px);padding-right:16px;overflow-wrap:anywhere}
#build-panel #building-page{width:100%;text-align:center;margin:3px 0 5px}
@media(pointer:coarse){#world{image-rendering:pixelated}}

/* Chapter ending: full-screen comic, with readable captions outside the pixel art. */
#story-finale{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#030305;color:#f7e6bd;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));box-sizing:border-box;overscroll-behavior:none;touch-action:none;outline:none}
body.story-finished #story-finale{visibility:visible;opacity:1}
#story-finale[hidden]{display:none}
.finale-comic{width:min(900px,100%);text-align:center;transition:opacity 1.6s ease}
.finale-kicker{font:var(--ui-small)/1.4 Arial,sans-serif;color:#c2ad7c;letter-spacing:.14em;margin:0 0 14px}
.finale-frame{border:3px solid #857254;box-shadow:0 0 0 3px #1b1c22,0 12px 70px #47302033;overflow:hidden}
.finale-frame canvas{display:block;width:100%;max-height:65dvh;aspect-ratio:16/9;object-fit:contain;image-rendering:pixelated;background:#050509}
.finale-caption{font:var(--ui-title)/1.5 Arial,sans-serif;min-height:3em;margin:20px auto 0;max-width:34em;text-wrap:balance;padding:0 8px}
.finale-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;font:var(--ui-title)/1.6 Arial,sans-serif;letter-spacing:.08em;color:#dfd5c3;opacity:0;transition:opacity 3s ease;pointer-events:none}
.finale-end.visible{opacity:1}
#story-finale.finished{background:#000}
#story-finale.finished .finale-comic{display:none}
#chapter-goal{font:var(--ui-small)/1.45 Arial,sans-serif;color:#e0d4ac;margin:8px 0;white-space:pre-line}
@media(prefers-reduced-motion:reduce){.finale-comic,.finale-end{transition-duration:1s}}

#game-version{margin:0;color:#9a9f91;font:400 var(--ui-small)/1.4 var(--ui-font);text-align:center;max-width:100%;overflow-wrap:anywhere}

/* Optional objective, revealed through a quiet veil of fog without canvas filters. */
#chapter-fold{grid-column:1/-1;position:relative;background:radial-gradient(ellipse at 18% 15%,#afbea619,transparent 68%),radial-gradient(ellipse at 85% 65%,#a4b9ae12,transparent 65%);border-bottom:1px solid #a6af8a25}
#menu-panel #chapter-toggle{background:transparent;border:0;box-shadow:none;text-align:left;color:#c9d0b4;padding:.65em .8em;display:flex;align-items:center;justify-content:space-between;gap:12px}
#chapter-toggle::after{content:'';width:7px;height:7px;border-right:2px solid #a9b395;border-bottom:2px solid #a9b395;transform:rotate(45deg);transition:transform 200ms ease;flex:none;margin-right:4px}
#chapter-fold.expanded #chapter-toggle::after{transform:rotate(225deg)}
#chapter-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 220ms ease,opacity 200ms ease}
#chapter-reveal>div{min-height:0;overflow:hidden}
#chapter-fold.expanded #chapter-reveal{grid-template-rows:1fr;opacity:1}
#menu-panel #chapter-goal{padding:0 .9em .9em;margin:0;color:#d9dfcc;line-height:1.55;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){#chapter-reveal{transition:opacity 200ms ease}#chapter-toggle::after{transition:none}}

/* Mobile foundation price sits above both choices on a taller VGA slab. */
#mobile-build-price{display:none}
@media(max-width:759px),(pointer:coarse){
 footer:has(#city-primary.castle-foundation){height:calc(var(--action-height) + 38px);max-height:calc(var(--action-height) + 38px);margin-top:-44px;padding-top:50px;grid-template-rows:minmax(0,1fr)}
 footer #city-primary.castle-foundation #castle-build-price{display:none}
 #mobile-build-price{position:absolute;top:6px;left:4px;right:4px;display:flex;align-items:center;justify-content:center;gap:16px;box-sizing:border-box;min-height:40px;padding:3px 8px;background:#303b29;border:2px solid #92855d;box-shadow:inset 2px 2px #b2a477,inset -2px -2px #172116;color:#f5ead0;font:700 var(--ui-text)/1.1 var(--ui-font);font-variant-numeric:tabular-nums;pointer-events:none;animation:build-price-in .18s ease-out both}
 #mobile-build-price>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
 footer #mobile-build-price canvas{display:block;width:32px;height:32px;flex:0 0 32px;image-rendering:pixelated}
 #mobile-build-price .missing{color:#ffad8e}
}
@media(max-width:350px){#mobile-build-price{gap:10px}}
@keyframes build-price-in{from{opacity:0}to{opacity:1}}


/* Mobile panels share a safe ceiling below map notifications and their raised titles. */
@media(max-width:759px),(pointer:coarse){
 #hero-panel .hero-panel-scroll{max-height:min(44dvh,var(--mobile-panel-content-height,calc(100dvh - var(--resource-height) - var(--action-height) - 188px)))}
 #build-panel #building-body{max-height:min(44dvh,var(--mobile-panel-content-height,calc(100dvh - var(--resource-height) - var(--action-height) - 188px)))}
 #hero-panel .hero-company{padding-top:0}
 #hero-panel .hero-skill-list{row-gap:6px}
 #hero-panel .hero-skill{padding:6px 0}
}

/* Mobile hints stay low and narrow; never climb above the quick actions. */
@media(max-width:759px),(pointer:coarse){
 #soft-hint:not(.interior-hint){max-width:min(260px,var(--mobile-hint-width,calc(100% - 8px)))!important;padding:6px 14px 6px 8px;font-size:var(--ui-small);line-height:1.25}
 #soft-hint:not(.interior-hint)>span{max-height:2.5em}
}

/* Painted VGA medallions: the entire star halo stays inside the map. */
#building-quick,#castle-quick,#adventure-quick,#boat-quick,#fishing-quick{right:calc(24px + var(--quick-row-offset,0px));bottom:calc(100% + 24px)}
#building-quick,#castle-quick{gap:24px}
:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb,:is(#boat-quick,#fishing-quick).quick-orb{isolation:isolate;overflow:visible;border:2px solid transparent;border-radius:0;background:#303d2a;border-radius:50%;box-shadow:none;transition:opacity .18s}
:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb{position:relative}
.quick-orb>canvas{position:relative;z-index:2;pointer-events:none}
.quick-medallion{position:absolute;inset:-2px;z-index:0;pointer-events:none}
.quick-orb .quick-orbit{position:absolute;inset:-10px;z-index:1;overflow:hidden;pointer-events:none;animation-play-state:paused}
#building-quick.visible .quick-orbit,#castle-quick.visible .quick-orbit,#adventure-quick.visible .quick-orbit,:is(#boat-quick,#fishing-quick).visible .quick-orbit{animation-play-state:running}
.quick-orb:nth-child(2) .quick-orbit>canvas{animation-direction:reverse}
:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb:disabled .quick-orbit,.quick-orb[aria-disabled="true"] .quick-orbit{animation-play-state:paused;opacity:.3}
@media(hover:hover){:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb:hover:not(:disabled) .quick-medallion,:is(#boat-quick,#fishing-quick).quick-orb:hover .quick-medallion{filter:brightness(1.1)}}
:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb:active:not(:disabled),:is(#boat-quick,#fishing-quick).quick-orb:active:not(:disabled){box-shadow:none}
.quick-orb:focus-visible{outline:2px dashed #d2c593;outline-offset:9px}
#building-quick{animation:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s .16s}
#building-quick.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s ease,visibility 0s}
#building-quick.visible .quick-orb,#castle-quick.visible .quick-orb,#adventure-quick.visible .quick-orb,:is(#boat-quick,#fishing-quick).visible{animation:quick-pixel-appear .18s ease-out both}
.quick-orb::after{content:"";position:absolute;z-index:3;left:18%;top:12%;width:3px;height:3px;background:#eee1ac;box-shadow:3px 0 #b9a46c,0 3px #b9a46c,24px 20px #d6c58b;opacity:0;pointer-events:none}
#building-quick.visible .quick-orb::after,#castle-quick.visible .quick-orb::after,#adventure-quick.visible .quick-orb::after,:is(#boat-quick,#fishing-quick).visible::after{animation:quick-pixel-spark .2s steps(3,end) both}
@keyframes quick-star-frames{from{transform:translateX(0)}to{transform:translateX(-96.96969697%)}}
@keyframes quick-pixel-appear{from{opacity:0}to{opacity:1}}
@keyframes quick-pixel-spark{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .quick-orb .quick-orbit>canvas{animation:none!important}
 #building-quick.visible .quick-orb::after,#castle-quick.visible .quick-orb::after,#adventure-quick.visible .quick-orb::after,:is(#boat-quick,#fishing-quick).visible::after{animation:none}
}

/* Canvas artwork is allowed by the site's CSP; no data-URL images. */
:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb,:is(#boat-quick,#fishing-quick).quick-orb{width:clamp(64px,calc(56px * var(--ui-scale)),88px);height:clamp(64px,calc(56px * var(--ui-scale)),88px);min-height:64px;padding:6px}
:is(#building-quick,#castle-quick,#adventure-quick,#boat-quick,#fishing-quick,#weapon-attack) .quick-medallion>canvas{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:fill;image-rendering:pixelated;filter:none}
:is(#building-quick,#castle-quick,#adventure-quick,#boat-quick,#fishing-quick,#weapon-attack) .quick-orbit>canvas{display:block;position:absolute;left:0;top:0;width:3300%;height:100%;max-width:none;aspect-ratio:auto;object-fit:fill;image-rendering:pixelated;filter:none;animation:quick-star-frames 8s steps(32,end) infinite;animation-play-state:inherit}

/* Fishing keeps all controls in the existing footer; the gauge never covers the HUD. */
#fishing-quick{position:absolute;z-index:15;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s}
#fishing-quick.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s,visibility 0s}
footer:has(#boat-quick.visible) #fishing-quick{right:calc(48px + clamp(64px,calc(56px * var(--ui-scale)),88px))}
#fishing-quick>canvas{display:block;width:100%;height:100%;max-width:none;aspect-ratio:1;image-rendering:pixelated;filter:none}
#fishing-controls{position:absolute;inset:6px 4px;z-index:20;display:grid;grid-template-columns:minmax(64px,1fr) minmax(0,3fr);gap:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s}
#fishing-controls.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s,visibility 0s}
#fishing-controls button{min-width:0;width:100%;height:100%;min-height:44px;margin:0;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:0;font:600 var(--ui-text)/1.15 var(--ui-font);background:#38492e;box-shadow:inset 2px 2px #b2a477,inset -2px -2px #172116;border:2px solid #92855d}
#fishing-controls .game-close{background:#6c4133}
#fishing-controls canvas{display:block;width:48px;height:48px;max-height:100%;image-rendering:pixelated;flex-shrink:0}
footer.fishing-active nav{visibility:hidden;pointer-events:none}
footer.fishing-active :is(#boat-quick,#building-quick,#castle-quick,#adventure-quick,#castle-transfer){visibility:hidden;pointer-events:none;opacity:0}
#fishing-meter{position:absolute;z-index:12;width:38px;height:116px;box-sizing:border-box;padding:8px 9px 26px;pointer-events:none;background:#22332bef;border:2px solid #918b66;box-shadow:inset 1px 1px #b9b186,inset -1px -1px #14241c;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
#fishing-meter.visible{opacity:1;visibility:visible;transition:opacity .18s,visibility 0s}
.fishing-track{position:relative;width:100%;height:100%;background:#12251f;box-shadow:inset 1px 0 #080f0e}
.fishing-target{position:absolute;left:0;right:0;background:#a6924e;border-top:2px solid #e0ce83;border-bottom:2px solid #e0ce83;box-sizing:border-box}
.fishing-cursor{position:absolute;left:-4px;right:-4px;height:3px;transform:translateY(-50%);background:#f4edca;box-shadow:0 1px #272b20}
#fishing-meter output{position:absolute;top:calc(100% - 23px);left:50%;transform:translateX(-50%);min-width:38px;padding:2px 4px;box-sizing:border-box;white-space:nowrap;background:#22332bef;color:#eee4bd;font:600 var(--ui-small)/1.15 var(--ui-font);text-align:center}
#fishing-meter.caught output{color:#f2d979}
@media(prefers-reduced-motion:reduce){#fishing-quick.visible::after{animation:none}}

/* Field journal on every screen: reveal the book, then open it. */
#wiki-mobile-tab{display:block;position:absolute;z-index:5;width:104px;height:44px;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .16s,visibility 0s .16s}
 #wiki-mobile-tab{display:block}
 #wiki-mobile-tab.visible{opacity:1;visibility:visible;transition:opacity .16s,visibility 0s}
 #wiki-mobile-tab button{position:relative;display:block;width:104px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;transform:translateX(-60px);transition:transform .18s ease-out;pointer-events:auto;filter:none;text-shadow:none;touch-action:manipulation}
 #wiki-mobile-tab button::before{content:"";position:absolute;inset:3px 4px 3px 0;background:#39442fec;box-shadow:inset 0 1px #9b956e,inset 0 -2px #202d22;clip-path:polygon(0 0,92% 0,92% 8%,97% 8%,97% 20%,100% 20%,100% 80%,97% 80%,97% 92%,92% 92%,92% 100%,0 100%)}
 #wiki-mobile-tab.expanded button{transform:translateX(0)}
 #wiki-mobile-tab button:active{box-shadow:none;filter:none}
 #wiki-mobile-tab canvas{position:absolute;left:12px;top:6px;width:32px;height:32px;image-rendering:pixelated;pointer-events:none}
 #wiki-mobile-tab .wiki-mobile-count{position:absolute;right:6px;top:6px;display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;border:1px solid #96906a;border-radius:50%;box-shadow:inset 1px 1px #a69c7033,inset -1px -2px #17281e;background:#35402ced;color:#dfd2a9;font:600 var(--ui-small)/1 var(--ui-font);font-variant-numeric:tabular-nums;pointer-events:none}
 #wiki-mobile-tab button:focus-visible{outline:1px dashed #c8bd90;outline-offset:-4px}

:is(#desktop-tools,#desktop-left-tools) #wiki-toggle{display:none}
@media(prefers-reduced-motion:reduce){#wiki-mobile-tab button{transition:none}}

/* On phones the rightmost quick action shares the hammer button's centre. */
@media(max-width:759px),(pointer:coarse){
 #building-quick,#castle-quick,#adventure-quick,#boat-quick,#fishing-quick{right:calc(var(--mobile-quick-center,56px) - var(--quick-fit-size,var(--mobile-quick-size,64px))/2 + var(--quick-row-offset,0px))}
 :is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb,:is(#boat-quick,#fishing-quick).quick-orb{width:var(--mobile-quick-size,64px);height:var(--mobile-quick-size,64px);min-height:var(--mobile-quick-size,64px)}
 footer:has(#boat-quick.visible) #fishing-quick{right:calc(var(--mobile-quick-center,56px) + var(--mobile-quick-size,64px)/2 + 24px)}
}

/* Small painted tackle board: static pixel art, only the hook moves. */
#fishing-meter{width:56px;height:128px;padding:10px 10px 28px;border:0;background:none;box-shadow:none}
#fishing-meter .fishing-frame{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#fishing-meter .fishing-track{background:none;box-shadow:none}
#fishing-meter .fishing-target{background:#bba24b55;border:0;box-shadow:inset 0 2px #e3c679,inset 0 -2px #e3c679}
#fishing-meter .fishing-target canvas{position:absolute;width:28px;height:14px;left:0;top:50%;transform:translateY(-50%);image-rendering:pixelated}
#fishing-meter .fishing-cursor{left:auto;right:-5px;width:24px;height:24px;background:none;box-shadow:none}
#fishing-meter .fishing-cursor canvas{display:block;width:24px;height:24px;image-rendering:pixelated}
#fishing-meter output{top:auto;bottom:6px;min-width:40px;padding:0 2px;background:#29382c}

/* Keep the farewell caption readable and evenly wrapped on phones. */
@media(max-width:759px),(pointer:coarse){
 #defeat-content{min-width:0}
 #defeat #defeat-content h1 + p{box-sizing:border-box;width:calc(100% - 16px);max-width:34ch;margin:12px auto 22px;font:400 var(--ui-small)/1.5 var(--ui-font);white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:none;text-wrap:balance}
 #defeat #defeat-title{text-wrap:balance}
}



/* Compact mobile action row shared by normal and contextual controls. */
@media(max-width:759px),(pointer:coarse){
 main{--action-height:88px}
 footer,footer:has(#city-primary.castle-foundation){--menu-size:68px}
 footer nav button{aspect-ratio:auto}
 footer nav canvas{width:calc(var(--menu-size) - 20px);height:calc(var(--menu-size) - 20px);max-width:100%}
 #fishing-controls canvas{width:40px;height:40px}
 #boat-bar button{padding:4px;gap:3px 6px}
 #castle-transfer button{display:grid;grid-template-columns:auto auto;grid-template-rows:28px 20px;justify-content:center;align-content:center;gap:2px 4px;padding:3px}
 #castle-transfer button>canvas{width:28px;height:28px}
 #castle-transfer button>small{grid-column:1/-1;justify-self:center}
 #castle-transfer small canvas{width:16px;height:16px}
 footer:has(#city-primary.castle-foundation){height:calc(var(--action-height) + 32px);max-height:calc(var(--action-height) + 32px);margin-top:-38px;padding-top:44px}
 #mobile-build-price{min-height:34px;padding:2px 6px}
 footer #mobile-build-price canvas{width:26px;height:26px;flex-basis:26px}
}

/* Larger fishing tackle: comfortable on desktop, modest on phones. */
#fishing-meter{width:70px;height:min(160px,var(--fishing-meter-max-height,160px));padding:12px 12px 34px}
#fishing-meter .fishing-target canvas{width:35px;height:18px}
#fishing-meter .fishing-cursor{right:-5px;width:30px;height:30px}
#fishing-meter .fishing-cursor canvas{width:30px;height:30px}
#fishing-meter output{bottom:9px;min-width:48px}
@media(min-width:760px) and (pointer:fine){
 #fishing-meter{width:84px;height:min(192px,var(--fishing-meter-max-height,192px));padding:15px 15px 40px}
 #fishing-meter .fishing-target canvas{width:42px;height:21px}
 #fishing-meter .fishing-cursor,#fishing-meter .fishing-cursor canvas{width:36px;height:36px}
 #fishing-meter output{bottom:12px;min-width:56px}
}

/* One mobile footer anchor for nearby actions, panels and hint flags. */
@media(max-width:759px),(pointer:coarse){
 main{--bottom-ui-gap:2px;--quick-halo-room:10px}
 #building-quick,#castle-quick,#adventure-quick,#boat-quick,#fishing-quick{bottom:calc(100% + var(--bottom-ui-gap) + var(--quick-halo-room))}
 #build-panel,#hero-panel,#planning-limit{bottom:calc(100% + var(--bottom-ui-gap))}
}

/* The loaded version stays first in the desktop status row. */
#status-icons #version-status{display:none}
@media(min-width:760px) and (pointer:fine){
 #status-icons #version-status{display:flex;align-items:center;justify-content:center;width:auto;flex:0 0 auto;order:-1;padding:5px 10px;color:#ddd2a2;font:500 var(--ui-small)/1 var(--ui-font);font-variant-numeric:tabular-nums;white-space:nowrap}
 #status-icons .status-icon{flex-shrink:0}
}

#story-finale .finale-preview-exit{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:3;min-height:44px;padding:10px 16px;background:#303c2c;border:2px solid #a89968;border-radius:0;color:#eee3bd;font:600 var(--ui-text)/1.2 var(--ui-font)}
#story-finale .finale-preview-note{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;margin:0;text-align:center;color:#a9af98;font:400 var(--ui-small)/1.3 var(--ui-font)}
#story-finale .finale-preview-exit[hidden],#story-finale .finale-preview-note[hidden]{display:none}

@media(min-width:760px) and (pointer:fine){
 #status-icons #version-status{padding:5px 7px;font-size:calc(var(--ui-small) * .85);letter-spacing:-.02em}
}

/* Resource receipts remain visible while the world is replaced by an interior. */
.resource-gain{position:absolute;left:50%;width:256px;max-width:calc(100% - 24px);height:auto;pointer-events:none;z-index:90;image-rendering:pixelated;transform:translateX(-50%)}

/* Desktop journal bookmark: woven olive cloth with a stepped swallowtail. */
@media(min-width:760px) and (pointer:fine){
 #wiki-mobile-tab,#wiki-mobile-tab button{width:112px}
 #wiki-mobile-tab button::before{inset:3px 0;background:repeating-linear-gradient(0deg,#c7c18c08 0 1px,transparent 1px 3px),linear-gradient(90deg,#2b372b,#49533a 65%,#414b34);box-shadow:inset 0 2px #9b9866,inset 0 4px #626d47,inset 0 -2px #18251e,inset 0 -4px #737b4c;clip-path:polygon(0 0,100% 0,100% 6px,calc(100% - 4px) 6px,calc(100% - 4px) 10px,calc(100% - 8px) 10px,calc(100% - 8px) 14px,calc(100% - 12px) 14px,calc(100% - 12px) 24px,calc(100% - 8px) 24px,calc(100% - 8px) 28px,calc(100% - 4px) 28px,calc(100% - 4px) 32px,100% 32px,100% 100%,0 100%)}
 #wiki-mobile-tab button::after{content:"";position:absolute;left:5px;top:10px;width:2px;height:24px;background:repeating-linear-gradient(0deg,#b4ad7566 0 2px,transparent 2px 5px);pointer-events:none}
 #wiki-mobile-tab .wiki-mobile-count{right:16px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#e4d7a6;text-shadow:1px 2px #202b21}
@media(hover:hover){ #wiki-mobile-tab button:hover::before{filter:brightness(1.08)}}
}

/* Tavern shares the fixed room and accessible bottom exit of other buildings. */
#tavern-view .building-room canvas{width:100%;height:auto;image-rendering:pixelated}
#tavern-view .tavern-service,#tavern-view .tavern-trade,#tavern-view .tavern-hires{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}
#tavern-view .tavern-service>canvas{width:88px;height:auto;flex-shrink:0;image-rendering:pixelated}
#tavern-view .tavern-service>[data-guests]{width:112px}
#tavern-view button canvas,#tavern-view .tavern-trade span canvas{width:26px;height:26px;image-rendering:pixelated;vertical-align:middle;margin:0 5px}
#tavern-view [data-story]{min-height:3em;color:#e3d6b5;overflow-wrap:break-word}
#tavern-view .tavern-spoken{animation:tavern-speech .2s ease-out}
#tavern-view .tavern-hires button{flex:1}
@keyframes tavern-speech{from{opacity:.3}to{opacity:1}}
@media(max-width:600px){#tavern-view .tavern-service>[data-guests]{width:80px}#tavern-view .tavern-service>canvas{width:66px}#tavern-view .tavern-service{gap:8px}}
@media(prefers-reduced-motion:reduce){#tavern-view .tavern-spoken{animation:none}}

#fight{position:relative}
#fight .weapon-damage{position:absolute;right:3px;top:3px;display:flex;align-items:center;gap:3px;background:#18251e80;border:1px solid #c4b57933;border-radius:0;padding:2px 3px;color:#d1c6a1b3;font:500 var(--ui-small)/1 var(--ui-font);pointer-events:none;text-shadow:none}
#weapon-picker .weapon-damage{position:absolute;right:2px;bottom:2px;top:auto;display:flex;align-items:center;gap:2px;background:none;border:0;padding:0;color:#d1c6a1b3;font:500 var(--ui-small)/1 var(--ui-font);pointer-events:none;text-shadow:none}
.weapon-damage b{font-weight:500}
.weapon-damage i{display:block;width:10px;height:10px;background:#c4b58c;opacity:.65;clip-path:polygon(70% 0,100% 0,100% 30%,60% 70%,80% 90%,70% 100%,50% 80%,20% 100%,0 80%,20% 50%,0 30%,10% 20%,30% 40%)}
#fight .weapon-close{position:absolute;left:50%;top:50%;width:var(--close-mark-size);height:var(--close-mark-size);transform:translate(-50%,-50%);pointer-events:none}
#weapon-picker{position:absolute;left:6px;bottom:calc(100% + 10px);width:min(300px,calc(100% - 12px));box-sizing:border-box;padding:10px;background:#273123;border:2px solid #8f9262;z-index:24;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s}
#weapon-picker.visible{opacity:1;visibility:visible;pointer-events:auto}
#weapon-picker>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:35dvh;overflow:auto}
#weapon-picker button{position:relative;padding:12px 5px 5px;min-height:48px;background:#394731;border:1px solid #777a55;box-shadow:inset 1px 1px #a7a578;color:#ecdfb1}
#weapon-picker button[aria-pressed="true"]{background:#5b613c;border-color:#e1cb8a}
#weapon-picker canvas{width:100%;max-width:52px;height:auto;image-rendering:pixelated}
#weapon-attack{position:absolute;left:14px;bottom:calc(100% + 12px);width:clamp(56px,calc(50px * var(--ui-scale)),76px);height:clamp(56px,calc(50px * var(--ui-scale)),76px);min-height:44px;display:grid;place-items:center;isolation:isolate;border:2px solid transparent;border-radius:50%;padding:6px;background:#303d2a;box-shadow:none;z-index:12;overflow:visible;opacity:1;filter:brightness(calc(.48 + var(--ready,1)*.52));transition:filter .08s linear}
#weapon-attack[hidden]{display:none}
#weapon-attack>canvas{position:relative;z-index:2;width:100%;height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;pointer-events:none}
#weapon-attack .weapon-recharge{position:absolute;inset:0;z-index:3;border-radius:50%;background:linear-gradient(to top,#d5c89022,transparent);opacity:calc(1 - var(--ready,1));pointer-events:none}
#weapon-attack .quick-orbit{animation-play-state:running;opacity:calc(.25 + var(--ready,1)*.75)}
#weapon-attack[hidden] .quick-orbit{animation-play-state:paused}
#weapon-attack:disabled{opacity:1;filter:brightness(calc(.48 + var(--ready,1)*.52))}
.weapon-find{position:absolute;z-index:38;display:flex;align-items:center;gap:6px;max-width:calc(100% - 16px);padding:3px 8px;color:#ffedb9;background:#14251ed9;border:1px solid #ad9c6a;transform:translateX(-50%);pointer-events:none;font:600 var(--ui-text)/1.2 var(--ui-font);text-shadow:1px 1px #101916}
.weapon-find canvas{width:40px;height:40px;flex:none;image-rendering:pixelated}
.weapon-find span{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){#weapon-picker,#weapon-attack{transition:none}}

#fight .weapon-damage canvas{width:16px;height:16px;min-width:16px;image-rendering:pixelated}
#tavern-view [data-weapon-name]{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
#tavern-view [data-weapon-name] canvas{width:40px;height:40px;flex:none}

/* Native hidden must win over the quick buttons’ grid layout. */
:is(#building-quick,#castle-quick,#adventure-quick) button[hidden]{display:none!important}

#building-quick,#castle-quick{gap:var(--quick-row-gap,24px)}
:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb,:is(#boat-quick,#fishing-quick).quick-orb{width:var(--quick-fit-size,64px);height:var(--quick-fit-size,64px);min-height:var(--quick-fit-size,64px)}

/* Square intrinsic canvases retain their proportions even in shallow mobile buttons. */
footer nav button>canvas,.desktop-view footer nav button>canvas{display:block;width:min(calc(var(--menu-size) - 20px),calc(100% - 12px));height:auto;aspect-ratio:1;object-fit:contain;min-width:0;min-height:0;justify-self:center;align-self:center}
footer nav button>canvas[hidden]{display:none}

/* Keep the icon square and centred independently of the orbit layers. */
:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb,:is(#boat-quick,#fishing-quick,#weapon-attack).quick-orb{display:grid;place-items:center}
:is(#building-quick,#castle-quick,#adventure-quick) button.quick-orb>canvas,:is(#boat-quick,#fishing-quick,#weapon-attack).quick-orb>canvas{display:block;grid-area:1/1;width:100%;height:100%;aspect-ratio:1;object-fit:contain;align-self:center;justify-self:center;margin:0;min-width:0;min-height:0}

#weapon-picker .weapon-key{position:absolute;left:4px;top:4px;color:#d6cba5b3;font:500 var(--ui-small)/1 var(--ui-font);pointer-events:none;text-shadow:none}
.desktop-view #weapon-picker{width:max-content;max-width:calc(100% - 12px)}
.desktop-view #weapon-picker>div{grid-template-columns:repeat(var(--weapon-count,7),minmax(0,72px));overflow-x:auto;max-height:none}
.desktop-view #weapon-picker button{min-width:0;min-height:72px;padding-top:20px}

/* Decorative children never become separate touch targets. Native scrolling stays enabled. */
button>*{pointer-events:none}
@media(pointer:coarse){
 button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
 button:active:not(:disabled),footer button:active:not(:disabled){transform:none}
 #wiki-mobile-tab button:active{transform:translateX(-60px)}
 #wiki-mobile-tab.expanded button:active{transform:translateX(0)}
}
#portrait-prompt{position:fixed;inset:0;z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;background:#0b1114;color:#e5d9ad;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s .18s;touch-action:none}
#portrait-prompt.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s ease,visibility 0s}
#portrait-prompt p{margin:0;font:var(--ui-text)/1.4 var(--ui-font);text-align:center}
.portrait-phone{display:block;width:38px;height:62px;border:3px solid #b4ad79;background:#34412e;box-shadow:inset 0 0 0 4px #152119;position:relative}
.portrait-phone::after{content:"";position:absolute;width:8px;height:3px;bottom:5px;left:12px;background:#b4ad79}
@media(prefers-reduced-motion:reduce){#portrait-prompt{transition:none}}

/* Alliance bookmark uses the journal's cloth and stepped edge. */
#alliance-tab{position:absolute;z-index:5;width:112px;height:44px;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .16s,visibility 0s .16s}
#alliance-tab.visible{opacity:1;visibility:visible;transition:opacity .16s,visibility 0s}
#alliance-tab button{position:relative;display:block;width:112px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;transform:translateX(-60px);transition:transform .18s ease-out;pointer-events:auto;filter:none;text-shadow:none}
#alliance-tab button::before{content:"";position:absolute;inset:3px 0;background:repeating-linear-gradient(0deg,#c7c18c08 0 1px,transparent 1px 3px),linear-gradient(90deg,#2b372b,#49533a 65%,#414b34);box-shadow:inset 0 2px #9b9866,inset 0 4px #626d47,inset 0 -2px #18251e,inset 0 -4px #737b4c;clip-path:polygon(0 0,100% 0,100% 6px,calc(100% - 4px) 6px,calc(100% - 4px) 10px,calc(100% - 8px) 10px,calc(100% - 8px) 14px,calc(100% - 12px) 14px,calc(100% - 12px) 24px,calc(100% - 8px) 24px,calc(100% - 8px) 28px,calc(100% - 4px) 28px,calc(100% - 4px) 32px,100% 32px,100% 100%,0 100%)}
#alliance-tab button>span{position:absolute;left:5px;top:11px;font:var(--ui-small)/1.3 var(--ui-font);color:#e4d7a6}
#alliance-tab canvas{position:absolute;right:16px;top:6px;width:32px;height:32px}
#alliance-tab.expanded button,#alliance-tab.expanded button:active{transform:translateX(0)}
#alliance-tab button:active{transform:translateX(-60px);box-shadow:none}
.alliance-dot{position:absolute;top:4px;left:35px;width:8px;height:8px;background:#efe1a6;border:2px solid #797a48;box-shadow:0 0 0 1px #15211b;pointer-events:none}
#alliance-tab.expanded .alliance-dot{left:95px}
#alliance-panel{position:absolute;z-index:25;left:6px;bottom:calc(100% + 10px);width:min(480px,calc(100% - 12px));padding:40px 10px 10px;background:#273123;border:2px solid #8f9262;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s}
#alliance-panel.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s,visibility 0s}
#alliance-panel h2{margin:0}
#alliance-panel .alliance-close{position:absolute;right:4px;top:3px;width:36px;height:32px;min-height:32px;border:0;background:transparent;box-shadow:none}
.alliance-list{max-height:var(--alliance-max-height,320px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.alliance-list>p{margin:8px;color:#e0d5b6;font:var(--ui-text)/1.4 var(--ui-font)}
.alliance-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #9b986633}
.alliance-row>canvas{flex:none;width:48px;height:48px}
.alliance-row>div:not(.alliance-actions){min-width:0;flex:1}
.alliance-row b{display:block;font:600 var(--ui-text)/1.3 var(--ui-font);overflow-wrap:anywhere;color:#e3d7ad}
.alliance-row small{display:block;font:var(--ui-small)/1.3 var(--ui-font);color:#b7bea4}
.alliance-actions{display:flex;gap:5px;flex:none}
#alliance-panel .alliance-actions button{width:44px;height:44px;min-height:44px;padding:8px;transform:none}
.alliance-actions canvas{display:block;width:24px;height:24px}
#new-life-confirm{padding:12px;border:1px solid #92815d;background:#252e24}
#new-life-confirm p{font:var(--ui-text)/1.4 var(--ui-font);color:#e0cfaa;margin:0 0 12px}
#new-life-confirm button{width:100%;margin-top:8px}
@media(prefers-reduced-motion:reduce){#alliance-tab,#alliance-tab button,#alliance-panel{transition:opacity .15s}}

/* Phone bookmarks share the same exposed width and round badge geometry. */
@media(max-width:759px),(pointer:coarse){
 #alliance-tab,#alliance-tab button{width:104px}
 #alliance-tab button::before{inset:3px 4px 3px 0;background:#39442fec;box-shadow:inset 0 1px #9b956e,inset 0 -2px #202d22;clip-path:polygon(0 0,92% 0,92% 8%,97% 8%,97% 20%,100% 20%,100% 80%,97% 80%,97% 92%,92% 92%,92% 100%,0 100%)}
 #alliance-tab canvas{right:6px;top:6px;box-sizing:border-box;width:32px;height:32px;padding:3px;border:1px solid #96906a;border-radius:50%;box-shadow:inset 1px 1px #a69c7033,inset -1px -2px #17281e;background:#35402ced}
}

/* Upgrade price shares the quick actions' baseline and height. */
#upgrade-cost-sign{position:absolute;left:4px;bottom:calc(100% + 10px);z-index:16;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:0 6px;width:var(--upgrade-sign-width,144px);height:var(--quick-fit-size,64px);box-sizing:border-box;padding:2px 5px;border:1px solid #a7a176;background:#d1c99eeF;box-shadow:inset 0 2px #efe1b4,inset 0 -2px #898b64,2px 2px #14231ccc;clip-path:polygon(0 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,0 100%);color:#344231;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s}
#upgrade-cost-sign.visible{opacity:1;visibility:visible;pointer-events:auto;touch-action:none;transition:opacity .18s,visibility 0s}
#upgrade-cost-sign span{display:flex;align-items:center;justify-content:flex-start;gap:3px;min-width:0;white-space:nowrap;font:600 var(--ui-small)/1 var(--ui-font)}
#upgrade-cost-sign canvas{width:clamp(14px,calc((var(--quick-fit-size,64px) - 8px)/2),24px);height:clamp(14px,calc((var(--quick-fit-size,64px) - 8px)/2),24px);flex:none;image-rendering:pixelated}
#upgrade-cost-sign .missing{color:#a8342b}

@media(prefers-reduced-motion:reduce){#upgrade-cost-sign{transition:none}}
#building-quick [data-quick="upgrade"][aria-disabled="true"]{filter:brightness(.72)}

/* Folded bookmarks never expose the end of their caption. */
#alliance-tab button>span{max-width:52px;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .16s,visibility 0s .16s}
#alliance-tab.expanded button>span{opacity:1;visibility:visible;transition:opacity .16s,visibility 0s}
@media(min-width:760px){
 #alliance-panel{width:min(420px,calc(100% - 12px));padding:50px 12px 10px;box-shadow:inset 0 1px #c6bb8233,0 3px 0 #152018}
 #alliance-panel h2.panel-title-flag{left:12px;top:10px;bottom:auto;max-width:calc(100% - 64px);padding:0;border:0;background:none;box-shadow:none;clip-path:none}
 #alliance-panel .alliance-close{top:7px;right:7px}
 .alliance-row{gap:12px;padding:10px 0}
 .alliance-row:last-child{border-bottom:0}
}
@media(max-width:759px),(pointer:coarse){
 #upgrade-cost-sign{bottom:calc(100% + var(--quick-fit-size,64px) + 26px);height:auto;min-height:44px;padding:8px 10px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px}
 #upgrade-cost-sign span:not(.missing){display:none}
 #upgrade-cost-sign canvas{width:24px;height:24px}
 #upgrade-cost-sign:not(:has(.missing)){opacity:0;visibility:hidden}
}

/* VGA price board: the same desktop baseline as the quick medallions. */
#upgrade-cost-sign{bottom:calc(100% + 24px);grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;gap:4px 6px;padding:5px 7px;border:2px solid #8d9161;background:repeating-linear-gradient(0deg,#b2b17808 0 1px,transparent 1px 4px),#34412e;box-shadow:inset 2px 2px #b5ae78,inset -2px -2px #17271d;color:#eee0b5;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px)}
#upgrade-cost-sign::before{content:"";position:absolute;inset:3px;border:1px solid #a6a37440;pointer-events:none}
#upgrade-cost-sign span{position:relative;gap:6px;padding:1px 3px;background:#15261e55;box-shadow:inset 0 -1px #8b936033;min-height:0}
#upgrade-cost-sign b{font-weight:600;font-variant-numeric:tabular-nums}
#upgrade-cost-sign canvas{width:20px;height:20px}
#upgrade-cost-sign .missing{color:#ff9d83;background:#512f2555;box-shadow:inset 0 -1px #c1795866}
@media(max-width:759px),(pointer:coarse){
 #upgrade-cost-sign{bottom:calc(100% + var(--quick-fit-size,64px) + 26px);width:max-content;max-width:calc(100% - 16px);min-height:0;display:grid;grid-template-columns:repeat(var(--upgrade-missing-columns,2),minmax(0,max-content));grid-template-rows:auto;justify-content:start;padding:7px;gap:5px}
 #upgrade-cost-sign span{justify-content:center;padding:5px 7px;gap:5px}
 #upgrade-cost-sign canvas{width:24px;height:24px}
}

/* Alliances share the full-width hero sheet and replace the footer with one exit. */
#alliance-panel{left:0;right:0;width:auto;bottom:calc(100% + 8px);padding:12px;border:2px solid #85896380;background:linear-gradient(145deg,#303a29,#1b2924);box-shadow:inset 0 0 0 2px #151f1a,0 3px 12px #0006;color:#e4dec0;text-align:left}
#alliance-panel h2.panel-title-flag{position:absolute;left:-2px;top:auto;bottom:calc(100% + 8px);max-width:calc(100% - 24px);margin:0;padding:7px 24px 7px 12px;border:0;border-left:3px solid #a6a17499;background:linear-gradient(90deg,#37412d,#293324);box-shadow:inset 0 1px #b6b18440,inset 0 -1px #0c180e80;color:#dfd5ae;font:600 var(--ui-title)/1.3 var(--ui-font);clip-path:polygon(0 0,100% 0,100% 20%,calc(100% - 4px) 20%,calc(100% - 4px) 35%,calc(100% - 8px) 35%,calc(100% - 8px) 65%,calc(100% - 4px) 65%,calc(100% - 4px) 80%,100% 80%,100% 100%,0 100%)}
#alliance-panel .alliance-list{max-height:min(60dvh,var(--alliance-max-height,320px),calc(100dvh - var(--resource-height) - var(--action-height) - 120px));scrollbar-width:thin}
#alliance-panel .alliance-row{padding:10px 4px;gap:12px}
#alliance-panel .alliance-row:last-child{border-bottom:0}
#alliance-panel .alliance-list>p{padding:14px 4px;margin:0;font:var(--ui-text)/1.5 var(--ui-font);color:#bfc8af}
footer.alliance-open>nav{visibility:hidden;pointer-events:none}
footer.alliance-open :is(#building-quick,#castle-quick,#castle-transfer,#adventure-quick,#boat-quick,#fishing-quick,#weapon-attack){display:none!important}
#alliance-close{position:absolute;inset:3px;z-index:26;display:flex;align-items:center;justify-content:center;gap:12px;width:calc(100% - 6px);height:calc(100% - 6px);padding:6px;--face:#684738;--bevel-light:#bb9a70;--bevel-mid:#8e7453;--bevel-dark:#382c23;font:600 var(--ui-text)/1.3 var(--ui-font);color:#eee1bd}
#alliance-close i{display:block;width:24px;height:24px;flex:none}
@media(max-width:759px),(pointer:coarse){#alliance-panel{bottom:calc(100% + var(--bottom-ui-gap,2px));padding:10px}#alliance-panel .alliance-list{max-height:min(44dvh,var(--alliance-max-height,280px))}}

/* Закладки построек: один ряд значков, название в выбранной карточке. */
#build-panel #building-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);overflow-x:auto;scrollbar-width:thin}
#build-panel #building-tabs button{min-height:64px;padding:7px 3px;gap:0}
#build-panel #building-tabs canvas{width:40px;height:40px;flex:none}
@media(min-width:760px){.desktop-view #build-panel #building-tabs button{min-height:72px}.desktop-view #build-panel #building-tabs canvas{width:48px;height:48px}}

/* The hook runs on the compositor; map rendering and snapshots cannot reposition it. */
#fishing-meter .fishing-cursor{top:0;will-change:transform}

/* Desktop proportions follow the available viewport, with 1440px as the reference height.
   Width can shrink for square monitors without shortening the outer frame. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view body{display:grid;place-items:center;height:100dvh;min-height:0;padding:0}
 .desktop-view footer nav button{min-height:0}
 .desktop-view #screen-mode{width:var(--desktop-tool-size);height:var(--desktop-tool-size);min-height:44px;padding:clamp(8px,.84dvh,12px)}
 .desktop-view :is(#desktop-tools,#desktop-left-tools){top:calc(var(--desktop-tool-size) + 16px);width:var(--desktop-tool-size);gap:clamp(8px,1.12dvh,16px);padding-top:clamp(8px,1.12dvh,16px)}
 .desktop-view :is(#desktop-tools,#desktop-left-tools) button{width:clamp(40px,4.17dvh,60px);height:clamp(40px,4.17dvh,60px);min-height:40px;padding:clamp(7px,.7dvh,10px)}
 .desktop-view #resources #menu-toggle canvas{width:clamp(24px,2.78dvh,40px);height:clamp(24px,2.78dvh,40px)}
 .desktop-view #weapon-attack{width:var(--desktop-quick-size,64px);height:var(--desktop-quick-size,64px)}
}

@media(min-width:760px) and (pointer:fine){
 .desktop-view #resources{padding:4px;grid-template-rows:minmax(0,1fr)}
 .desktop-view #resources>.resource-button{min-height:0;padding-top:0;padding-bottom:0}
 .desktop-view #resources>.resource-button canvas{max-height:calc(var(--resource-height) - 12px)}
 .desktop-view #resources #menu-toggle{min-height:0;height:100%;padding:2px}
 .desktop-view footer #city-bar #city-primary.castle-foundation{padding:2px 4px;gap:2px}
 .desktop-view footer #castle-build-price{gap:3px 8px;font-size:var(--ui-small)}
 .desktop-view footer #castle-build-price canvas{width:clamp(16px,1.67dvh,24px);height:clamp(16px,1.67dvh,24px);flex-basis:clamp(16px,1.67dvh,24px)}
}

/* Tablets keep the touch controls while the map fills the available screen. */
.tablet-view,.tablet-view body{width:100%;height:100dvh;min-height:0;overflow:clip}
.tablet-view body{display:block;padding:0}
.tablet-view main,.tablet-view main.inside-castle{
 width:100%;max-width:none;min-width:0;height:100dvh;max-height:100dvh;min-height:0;margin:0;
 --frame-x:12px;--frame-y:12px;--resource-height:88px;--action-height:88px;
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 grid-template-rows:var(--resource-height) minmax(0,1fr) var(--action-height);
}
.tablet-view main.inside-castle{grid-template-rows:var(--resource-height) minmax(0,1fr)}
.tablet-view #world{width:100%;height:100%;min-height:0;aspect-ratio:auto}
.tablet-view #resources{padding:3px 0;grid-template-rows:minmax(0,1fr)}
.tablet-view #resources>.resource-button{min-height:0}
.tablet-view #resources canvas,.tablet-view #resources #menu-toggle canvas{width:44px;height:40px}
.tablet-view #resources b{font-size:28px}
.tablet-view footer,.tablet-view footer:has(#city-primary.castle-foundation){--menu-size:68px}
.tablet-view footer nav button{width:100%;min-width:0;aspect-ratio:auto}
.tablet-view #screen-mode,.tablet-view :is(#desktop-tools,#desktop-left-tools){display:none}
.tablet-view #build-panel #building-tabs{display:grid}
.tablet-view #build-panel #building-tabs canvas{width:40px;height:40px;max-width:100%}
.tablet-view #build-panel #building-prev,.tablet-view #build-panel #building-next{display:none}
.tablet-view #build-panel:not(.upgrading) .building-carousel{grid-template-columns:minmax(0,1fr)}
.tablet-view #build-panel #building-page{display:none}

/* A quiet olive touch control, confined to the world and above quick actions. */
#map-joystick{position:absolute;z-index:14;border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none;opacity:0;visibility:hidden;pointer-events:none;cursor:grab;transition:opacity .18s ease,visibility 0s .18s;--stick-x:0px;--stick-y:0px}
#map-joystick.visible{opacity:.24;visibility:visible;pointer-events:auto;transition:opacity .18s ease,visibility 0s}
#map-joystick.engaged{opacity:.78;cursor:grabbing}
.joystick-track{position:absolute;inset:0;border:2px solid #c5bb88;border-radius:50%;background:#29362999;box-shadow:inset 0 0 0 5px #18241d55,inset 0 0 0 7px #96916c55,0 2px 0 #101a16;pointer-events:none}
.joystick-track::before,.joystick-track::after{content:"";position:absolute;background:#ccc39180;left:50%;top:50%;transform:translate(-50%,-50%)}
.joystick-track::before{width:2px;height:72%}.joystick-track::after{height:2px;width:72%}
.joystick-track i,.joystick-track b{position:absolute;inset:12%;border:1px dashed #b5ad7966;border-radius:50%}.joystick-track b{inset:35%;border-style:solid}
.joystick-knob{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;border:2px solid #d4c691;background:#65714d;box-shadow:inset 2px 2px #b2ad7777,inset -3px -3px #2d3d2b,0 3px 0 #17231b88;transform:translate(var(--stick-x),var(--stick-y));transition:transform .16s ease;pointer-events:none}
#map-joystick.engaged .joystick-knob{transition:none}
#joystick-toggle[aria-pressed="true"]{color:#efdfa0!important}
@media(hover:hover){#map-joystick.visible:hover{opacity:.48}#map-joystick.engaged:hover{opacity:.78}}
@media(prefers-reduced-motion:reduce){#map-joystick{transition:opacity .15s ease}.joystick-knob{transition:none}}

/* Every bottom action fits the same available row, including compact desktops. */
#castle-transfer,#boat-bar{grid-template-rows:minmax(0,1fr);min-height:0}
#castle-transfer button{
 display:grid;grid-template-columns:auto auto;grid-template-rows:minmax(0,1fr) auto;
 justify-content:center;align-items:center;align-content:stretch;gap:1px 5px;
 height:100%;min-height:0;min-width:0;padding:2px 3px;overflow:hidden;
}
#castle-transfer button>canvas{width:clamp(18px,calc((var(--menu-size) - 20px)*.6),30px);height:clamp(18px,calc((var(--menu-size) - 20px)*.6),30px);max-height:100%;object-fit:contain;justify-self:end}
#castle-transfer button>span{font-size:var(--ui-text);line-height:1;align-self:center;justify-self:start}
#castle-transfer button>small{grid-column:1/-1;justify-self:center;min-width:0;max-width:100%;gap:3px;font-size:var(--ui-small);line-height:1;white-space:nowrap}
#castle-transfer button>small canvas{width:16px;height:16px;flex:0 0 16px;object-fit:contain}
#boat-bar button,#fishing-controls button{min-height:0;min-width:0;padding:3px 5px;gap:4px 6px;line-height:1.1}
#boat-bar button{flex-wrap:nowrap}
#boat-bar button canvas,#fishing-controls canvas{width:clamp(24px,calc(var(--menu-size) - 20px),40px);height:clamp(24px,calc(var(--menu-size) - 20px),40px);max-width:30%;max-height:100%;object-fit:contain;flex-shrink:1}
footer #city-bar #city-primary{min-height:0;height:100%;padding:2px 4px;line-height:1.1}
footer #city-bar #city-primary.castle-foundation{gap:1px}
footer #castle-build-price{flex-wrap:nowrap;gap:2px 6px;line-height:1}
footer #castle-build-price>span{gap:2px}
footer #castle-build-price canvas{width:16px;height:16px;flex-basis:16px}
#alliance-close{min-height:0;line-height:1.1}

#boat-bar .boat-price{flex-shrink:0;gap:3px}
#boat-bar .boat-price canvas{width:16px;height:16px;max-width:none;flex:0 0 16px}
.desktop-view footer #castle-build-price canvas{width:16px;height:16px;flex-basis:16px}

#demolition-toggle{position:absolute;right:14px;bottom:calc(100% + 160px);z-index:26;display:grid;place-items:center;width:clamp(56px,calc(58px * var(--ui-scale)),76px);height:clamp(56px,calc(58px * var(--ui-scale)),76px);min-height:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s}
#demolition-toggle canvas{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
#demolition-toggle.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s,visibility 0s}
#demolition-toggle:active{transform:none;box-shadow:none;filter:brightness(1.12)}
#demolition-bar{position:absolute;inset:4px;z-index:27;display:grid;grid-template-columns:1fr 2fr;gap:8px;background:#1c251d;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s}
#demolition-bar.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s,visibility 0s}
#demolition-bar button{min-width:0;min-height:0;padding:6px;border:2px solid #8f8460;border-radius:0;background:#5c4433;color:#eee1ba;font:600 var(--ui-text)/1.2 var(--ui-font);box-shadow:inset 1px 1px #b19a6666}
footer.demolition-active nav{visibility:hidden;pointer-events:none}
footer.demolition-active :is(#castle-transfer,#building-quick,#castle-quick,#adventure-quick,#boat-quick,#fishing-quick,#weapon-attack){opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){#demolition-toggle,#demolition-bar{transition:opacity .15s}}

/* Status buttons remain interactive inside the transparent status overlay. */
#status-icons button.status-icon{pointer-events:auto;cursor:pointer}

/* Compact durability stays above the scrolling castle actions. */
.building-durability{flex:0 0 auto;padding:4px 12px 10px;background:#181e1b;color:#d8d2b5;font:400 var(--ui-small)/1.35 var(--ui-font)}
.durability-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}.durability-caption b{font-weight:600;font-variant-numeric:tabular-nums;color:#ead5a0}
.durability-track{height:6px;padding:1px;background:#0f1613;border:1px solid #646b4c;box-shadow:inset 0 1px #070c09}.durability-track>span{display:block;width:100%;height:100%;transform:scaleX(var(--durability,1));transform-origin:left;background:#a3ad70;box-shadow:inset 0 1px #d3cf91;transition:transform .2s ease,background-color .2s ease}.building-durability.damaged .durability-track>span{background:#b47955;box-shadow:inset 0 1px #d7a877}
@media(prefers-reduced-motion:reduce){.durability-track>span{transition:background-color .2s ease}}


/* A deliberate keyboard choice is distinct from the default primary action. */
button.keyboard-choice{outline:2px solid #d4c291!important;outline-offset:-3px;color:#fff0bc;transition:color .18s,outline-color .18s}
#adventure-veil .adventure-choices:has(.keyboard-choice) button:not(.keyboard-choice){color:#d9dcca;font-weight:400;text-shadow:none}
#adventure-veil .adventure-choices button.keyboard-choice{color:#ffe6a3;font-weight:600;text-shadow:0 0 12px #e1c36a40}

#expedition-view{grid-row:2/-1;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#101b1b;color:#e8dfbd;font:400 var(--ui-text)/1.4 var(--ui-font);animation:building-menu-in .2s ease-out both}
#expedition-view[hidden]{display:none}
.expedition-scroll{flex:1;min-height:0;overflow:auto;padding:16px 18px 24px;text-align:center;scrollbar-color:#74795b #101b1b}
.expedition-scene{display:block;width:clamp(100px,24%,180px);height:auto;margin:0 auto 12px;image-rendering:pixelated}
#expedition-view h1{margin:0 0 8px;font:600 var(--ui-title)/1.3 var(--ui-font)}
.expedition-clock{margin:0 0 20px;color:#b3b799;font-size:var(--ui-small);font-variant-numeric:tabular-nums}
.expedition-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:650px;margin:auto}
#expedition-view .expedition-cards button{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;min-width:0;margin:0;padding:10px 10px 18px;border:2px solid #7e8561;border-radius:0;background:linear-gradient(#303d30,#202c26);box-shadow:inset 0 0 0 2px #131f1a,inset 0 0 0 4px #49543b;color:#eadbb1;font:600 var(--ui-text)/1.3 var(--ui-font);text-shadow:none;transition:background .18s,border-color .18s,color .18s;transform:none}
.expedition-cards canvas{width:100%;height:auto;image-rendering:pixelated}
#expedition-view .expedition-cards button:hover,#expedition-view .expedition-cards button:focus-visible{border-color:#d2bd80;background:#3d4832;color:#fff0bb}
#expedition-view .expedition-exit{flex:none;min-height:64px;padding:18px;border:0;border-radius:0;box-shadow:none;background:linear-gradient(#101b1b,#070c11);color:#d3cfb2;font:400 var(--ui-text)/1.3 var(--ui-font);text-shadow:none;transform:none;transition:color .18s}
#expedition-view .expedition-exit:hover{color:#fff1c4}
@media(max-width:759px){.expedition-scroll{padding:12px 10px 18px}.expedition-cards{gap:10px}#expedition-view .expedition-cards button{padding:7px 7px 14px;gap:10px}.expedition-scene{width:100px}.expedition-clock{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){#expedition-view{animation:none}}

.expedition-cards small{font-size:var(--ui-small);font-weight:normal;line-height:1.4;color:#c0bea5}.expedition-cards canvas{image-rendering:pixelated}
/* Keep the item's label independent from the full-width room button defaults. */
#tavern-view .tavern-trade{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px}
#tavern-view .tavern-trade>button{width:auto;min-width:140px;margin:0}
#tavern-view [data-weapon-name]{display:flex;align-items:center;gap:10px;min-width:0}
#tavern-view [data-weapon-name]>canvas{flex:none;width:32px;height:32px;margin:0}
#tavern-view [data-weapon-name]>span{overflow-wrap:normal;word-break:normal;line-height:1.35}
.tavern-wager-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#tavern-view .tavern-wager-cards button{min-width:0;display:flex;flex-direction:column;gap:12px;padding:10px;background:linear-gradient(#414932,#252f27);border:2px solid #8b8e61;transition:background .18s,border-color .18s}
#tavern-view .tavern-wager-cards canvas{width:100%;height:auto;margin:0;image-rendering:pixelated}
#tavern-view .tavern-wager-cards strong{font-size:var(--ui-text);line-height:1.3}
#tavern-view .tavern-wager-cards span{font-size:var(--ui-small);font-weight:normal;line-height:1.4;color:#d3cbb0}
#tavern-view [data-wager]{animation:building-menu-in .2s ease-out}
#tavern-view [data-choice=skip]{margin-top:18px;background:transparent}
@media(max-width:480px){#tavern-view [data-armory] .tavern-trade{grid-template-columns:minmax(0,1fr)}#tavern-view [data-armory] .tavern-trade>button{width:100%}.tavern-wager-cards{gap:8px}#tavern-view .tavern-wager-cards button{padding:7px}}
@media(prefers-reduced-motion:reduce){#tavern-view [data-wager]{animation:none}}
#quick-action-rail{position:absolute;bottom:calc(100% + 2px);z-index:17;height:calc(var(--quick-fit-size,64px) + 24px);max-width:calc(100% - 24px);pointer-events:auto}
#quick-action-rail[hidden]{display:none}
.quick-rail-scroll{height:100%;display:flex;align-items:center;gap:var(--quick-row-gap,24px);padding:12px;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;scroll-snap-type:x proximity;mask-image:linear-gradient(to right,black,black);-webkit-mask-image:linear-gradient(to right,black,black)}
.quick-rail-scroll::-webkit-scrollbar{display:none}
#quick-action-rail.more-left .quick-rail-scroll{mask-image:linear-gradient(to right,transparent,black 26px);-webkit-mask-image:linear-gradient(to right,transparent,black 26px)}
#quick-action-rail.more-right .quick-rail-scroll{mask-image:linear-gradient(to left,transparent,black 26px);-webkit-mask-image:linear-gradient(to left,transparent,black 26px)}
#quick-action-rail.more-left.more-right .quick-rail-scroll{mask-image:linear-gradient(to right,transparent,black 26px,black calc(100% - 26px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 26px,black calc(100% - 26px),transparent)}
#quick-action-rail :is(#building-quick,#castle-quick,#adventure-quick,#boat-quick,#fishing-quick){position:relative;inset:auto;flex:none;margin:0;transform:none;gap:var(--quick-row-gap,24px)}
#quick-action-rail :is(#building-quick,#castle-quick,#adventure-quick,#boat-quick,#fishing-quick):not(.visible){display:none!important}
#quick-action-rail .quick-orb{flex:none;scroll-snap-align:end}
#quick-action-rail .quick-rail-arrow{position:absolute;top:50%;transform:translateY(-50%);width:22px;min-width:0;height:36px;min-height:0;margin:0;padding:6px;border:0;background:#263127dc;color:#dac995;display:grid;place-items:center;z-index:4;opacity:1;transition:opacity .18s;clip-path:polygon(3px 0,19px 0,19px 3px,22px 3px,22px 33px,19px 33px,19px 36px,3px 36px,3px 33px,0 33px,0 3px,3px 3px)}
#quick-action-rail .previous{left:0}#quick-action-rail .next{right:0}
#quick-action-rail .quick-rail-arrow:disabled{opacity:0;pointer-events:none}
.quick-rail-arrow span{width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.quick-rail-arrow.previous span{transform:rotate(-135deg)}
footer:is(.alliance-open,.demolition-active,.fishing-active) #quick-action-rail,main.inside-castle #quick-action-rail{display:none}
@media(prefers-reduced-motion:reduce){.quick-rail-scroll{scroll-behavior:auto}#quick-action-rail .quick-rail-arrow{transition:none}}



/* Available production slots sit above the hammer, leaving its icon clear. */
footer nav :is(#build-toggle,#fight){position:relative;overflow:visible}
.menu-count-badge{--slot-badge-size:clamp(24px,calc(var(--menu-size) * .48),30px);position:absolute;z-index:2;top:calc(var(--slot-badge-size) * -.32);right:4px;display:grid;place-items:center;box-sizing:border-box;width:var(--slot-badge-size);height:var(--slot-badge-size);border:1px solid var(--bevel-mid);border-color:color-mix(in srgb,var(--bevel-mid) 48%,var(--face));border-radius:50%;background:var(--bevel-dark);background:color-mix(in srgb,var(--face) 62%,#201b18);box-shadow:0 1px 0 #130e0cb3,inset 0 1px 0 #ffffff12,inset 0 -1px 0 #0003;color:#d2c4ac;font:600 var(--ui-text)/1 var(--ui-font);font-variant-numeric:tabular-nums;text-shadow:0 1px #0004;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 180ms ease,visibility 0s 180ms}
.menu-count-badge.visible{opacity:1;visibility:visible;transition:opacity 180ms ease,visibility 0s}
@media(min-width:760px) and (pointer:fine){.desktop-view footer nav :is(#build-toggle,#fight){overflow:visible}.menu-count-badge{--slot-badge-size:clamp(30px,calc(var(--menu-size) * .5),42px);right:6px}}
@media(prefers-reduced-motion:reduce){.menu-count-badge{transition:opacity 150ms ease,visibility 0s 150ms}.menu-count-badge.visible{transition:opacity 150ms ease,visibility 0s}}

/* A quiet VGA notice replaces the selected building when every slot is used. */
#building-slots-notice{display:none;box-sizing:border-box;max-width:540px;margin:clamp(14px,3dvh,28px) auto;padding:18px 16px 20px;border:2px solid #9d9366;background:linear-gradient(#3f4933,#2a3528);box-shadow:inset 0 0 0 2px #192318,inset 0 4px #c4bb7b22,inset 0 -4px #101a1455;clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px),0 6px,6px 6px);text-align:center;animation:slots-notice-in 180ms ease-out both}
#build-panel.slots-full #building-details>:not(#building-slots-notice){display:none}
#build-panel.slots-full #building-slots-notice{display:block}
#build-panel.slots-full #building-tabs button{filter:none;background:#2d3529;color:#949a7e;box-shadow:inset 0 1px #7a835422;cursor:default;border-color:#62694d #202a1f #202a1f #62694d}
#build-panel.slots-full #building-tabs canvas{opacity:.38;filter:grayscale(.7)}
.slots-notice-art{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 10px}
.slots-notice-art canvas{width:64px;height:64px;image-rendering:pixelated}
.slots-notice-art span{display:grid;place-items:center;width:34px;height:34px;border:2px solid #c5b77b;border-radius:50%;background:#35442a;color:#fff0b8;font:700 var(--ui-text)/1 var(--ui-font);box-shadow:0 2px #131b13,inset 0 1px #ddd09866}
#building-slots-notice h3{margin:0 0 8px;color:#f0e1af;font:700 var(--ui-title)/1.25 var(--ui-font);overflow-wrap:anywhere}
#building-slots-notice p{max-width:400px;margin:0 auto;color:#d8d3b4;font:400 var(--ui-text)/1.4 var(--ui-font);overflow-wrap:anywhere}
@keyframes slots-notice-in{from{opacity:0}to{opacity:1}}
@media(max-width:759px){#building-slots-notice{padding:14px 12px 16px;margin:12px auto}.slots-notice-art canvas{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){#building-slots-notice{animation:none}}


/* Mobile counters slightly overhang the right edge of their buttons. */
@media(max-width:759px){.menu-count-badge{right:-4px}}

/* Outside own lands the hammer remains visible and calmly dims. */
#build-toggle{transition:filter 180ms ease}
#build-toggle.outside-territory{filter:saturate(.6) brightness(.72);cursor:default}
@media(prefers-reduced-motion:reduce){#build-toggle{transition:none}}

/* Keep resource text height consistent; fit excess width horizontally. */
@media(max-width:759px),(pointer:coarse){
 #resources>.resource-button b{white-space:nowrap;max-width:none;width:max-content;flex-shrink:0;font-variant-numeric:tabular-nums;transform-origin:center center}
}

/* Repair shares demolition movement and the same quiet VGA medallion. */
#repair-toggle{position:absolute;right:calc(14px + clamp(56px,calc(58px * var(--ui-scale)),76px) + 24px);bottom:calc(100% + 160px);z-index:26;display:grid;place-items:center;width:clamp(56px,calc(58px * var(--ui-scale)),76px);height:clamp(56px,calc(58px * var(--ui-scale)),76px);min-height:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease,visibility 0s 180ms}
#repair-toggle canvas{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
#repair-toggle.visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 180ms ease,visibility 0s}
#repair-toggle:active{transform:none;box-shadow:none;filter:brightness(1.12)}
footer.repair-active{min-height:calc(var(--menu-size) + 28px)}
footer.repair-active #demolition-bar{grid-template-columns:minmax(60px,1fr) minmax(0,3fr);grid-template-rows:minmax(44px,1fr) auto;gap:4px 8px;padding:4px;box-sizing:border-box}
footer.repair-active [data-demolition=cancel]{grid-row:1 / 3}
footer.repair-active #demolition-bar:has(#repair-price[hidden]){grid-template-rows:minmax(44px,1fr);row-gap:0}
footer.repair-active #demolition-bar:has(#repair-price[hidden]) [data-demolition=cancel]{grid-row:1}
footer.repair-active [data-demolition=select]{background:#495d35;padding:4px;font:600 var(--ui-text)/1.2 var(--ui-font);overflow-wrap:anywhere}
footer.repair-active [data-demolition=select][aria-disabled=true]{background:#343b2d;color:#929985;box-shadow:none;cursor:default}
#repair-price{grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;padding:2px 0;color:#eee1ba;font:600 var(--ui-small)/1.2 var(--ui-font)}
#repair-price[hidden],#repair-price>span[hidden]{display:none}
#repair-price>span{display:inline-flex;align-items:center;gap:4px}
#repair-price canvas{width:16px;height:16px;image-rendering:pixelated;flex-shrink:0}
#repair-price b{font:inherit}
#repair-price .missing{color:#ef9b84}
@media(prefers-reduced-motion:reduce){#repair-toggle{transition:opacity 150ms ease}}

/* Mobile resource stocks share a smaller, consistent font height. */
@media(max-width:759px),(pointer:coarse){main:not(.inside-castle) #resources>.resource-button b{font-size:clamp(22px,6vw,28px)}}


/* Phone interiors reclaim the space above the room, not only shrink the digits. */
@media(max-width:759px){
 :root main{transition:grid-template-rows .18s ease}
 :root main.inside-castle{--resource-height:44px;grid-template-rows:var(--resource-height) minmax(0,1fr) 0px}
 main #resources,main.inside-castle #resources{height:100%;max-height:100%;min-height:0;box-sizing:border-box;transition:padding .18s ease}
 main.inside-castle #resources{padding:1.5px 0 2px}
 main.inside-castle #resources>.resource-button canvas,main.inside-castle #resources #menu-toggle canvas{width:22px;height:20px}
 main.inside-castle #resources>.resource-button b{font-size:clamp(13px,3.6vw,17px)}
}
@media(max-width:759px) and (prefers-reduced-motion:reduce){
 :root main,main #resources,main.inside-castle #resources{transition:none}
}


/* Desktop resources stay identical on the map and in every interior. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view #resources,.desktop-view #resources>.resource-button canvas,.desktop-view #resources>.resource-button b,.desktop-view #resources #menu-toggle canvas{transition:none}
}


/* Shared, width-aware layout for castle, production and tavern services. */
:is(#castle-view,#building-view,#tavern-view){container-type:inline-size;container-name:room-layout;--room-gutter:12px;--room-gap:12px}
:is(#castle-view,#building-view,#tavern-view) .building-durability{padding:6px var(--room-gutter) 12px}
:is(#castle-view,#building-view,#tavern-view) .durability-caption{flex-wrap:wrap;gap:4px 12px}
#castle-view .castle-content,:is(#building-view,#tavern-view) .building-room-scroll{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;align-items:stretch;gap:var(--room-gap);padding:12px var(--room-gutter) 36px}
#castle-view .castle-content>*,:is(#building-view,#tavern-view) .building-room-scroll>*{min-width:0}
#castle-view .castle-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 16px;padding:0;grid-column:1/-1}
#castle-view .castle-heading h1{margin:0;min-width:0;overflow-wrap:anywhere;font:600 var(--ui-title)/1.3 var(--ui-font)}
#castle-view .castle-heading p{margin:0;font:400 var(--ui-small)/1.4 var(--ui-font)}
#castle-view #castle-production{grid-column:1/-1}
#castle-view .castle-content>p{grid-column:1/-1;margin:0;line-height:1.45;overflow-wrap:anywhere}
#castle-view #castle-army{margin:0;font-size:var(--ui-text)}
#castle-view .castle-service,:is(#building-view,#tavern-view) .building-room-scroll>section{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:14px;border:1px solid #7c88622b;background:#20292055}
#castle-view .castle-service h2,:is(#building-view,#tavern-view) .building-room-scroll h2{margin:0;font:600 var(--ui-title)/1.3 var(--ui-font);overflow-wrap:anywhere}
#castle-view .castle-service p,:is(#building-view,#tavern-view) .building-room-scroll>section>p{margin:0;line-height:1.45;overflow-wrap:anywhere}
#castle-view .castle-people-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:auto}
#castle-view .castle-people-grid button{min-width:0;min-height:104px;padding:10px 6px;gap:8px;margin:0;justify-content:center;line-height:1.25;overflow-wrap:anywhere}
#castle-view .castle-people-grid button>span{margin:0;font-size:var(--ui-small)}
#castle-view .castle-people-grid .castle-price{flex:0 0 auto;min-height:24px;padding:0;gap:4px;justify-content:center}
#castle-view .castle-people-grid .castle-price span{font-size:var(--ui-text);gap:4px}
#castle-view .castle-people-grid .castle-price canvas{width:24px;height:24px;flex:0 0 24px}
#castle-view .castle-upgrade-service{grid-column:1/-1}
#castle-view #castle-upgrade-cost,:is(#building-view,#tavern-view) .room-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 18px;flex:0 0 auto;padding:4px 0;margin:0}
#castle-view #castle-upgrade-cost span,:is(#building-view,#tavern-view) .room-price span{display:flex;align-items:center;gap:5px;font:600 var(--ui-text)/1.3 var(--ui-font);white-space:nowrap}
#castle-view #castle-upgrade-cost canvas,:is(#building-view,#tavern-view) .room-price canvas{width:26px;height:26px;flex:0 0 26px}
#castle-view #castle-upgrade,:is(#building-view,#tavern-view) .building-room-scroll button{min-width:0;min-height:48px;margin:0;padding:10px 12px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
:is(#building-view,#tavern-view) .building-room-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0 var(--room-gutter);padding:12px 0 0}
:is(#building-view,#tavern-view) .building-room-heading h1{min-width:0;overflow-wrap:anywhere;line-height:1.3}
:is(#building-view,#tavern-view) .building-room-heading>span{white-space:normal;overflow-wrap:anywhere}
:is(#building-view,#tavern-view) .building-room-scroll>p,:is(#building-view,#tavern-view) .building-room-scroll>.trail-notice{grid-column:1/-1;margin:0}
#building-view .building-room-scroll>section{grid-column:1/-1}
#building-view .room-overview [data-room=stats]{margin:0;font:600 var(--ui-title)/1.35 var(--ui-font)}
#building-view .room-overview .resident-slots{margin:0}
#building-view .building-room-scroll .room-demolition{margin:0;padding:14px}
#building-view .building-room-scroll .room-demolition h2{display:none}
#building-view .building-room-scroll .bank-services{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
#building-view .bank-services>div{display:flex;flex-direction:column;gap:10px;min-width:0}
#building-view .bank-meter{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px}
#building-view .bank-meter canvas{width:72px;height:72px}
#building-view .bank-meter p{margin:0;overflow-wrap:anywhere}
#building-view .bank-services label{margin:0}
#building-view .bank-transfer-title{margin:0}
#building-view .bank-actions{gap:8px}
#tavern-view .tavern-service{display:flex;align-items:center;gap:12px;margin:0}
#tavern-view .tavern-service>button{flex:1;min-width:0;width:auto}
#tavern-view [data-trade]{display:flex;flex-direction:column;gap:12px}
#tavern-view .tavern-trade{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin:0}
#tavern-view .tavern-trade>button{width:auto;min-width:120px}
#tavern-view .tavern-hires{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
#tavern-view .tavern-hires button{width:100%;min-width:0}
#tavern-view [data-wager]{grid-column:1/-1}
#tavern-view .tavern-wager-cards button{align-items:stretch;gap:10px;padding:10px}
#tavern-view .tavern-wager-cards span{margin-top:auto}
:is(#castle-view,#building-view,#tavern-view) [hidden]{display:none!important}
@container room-layout (min-width:820px){
 #castle-view .castle-content,#tavern-view .building-room-scroll{grid-template-columns:repeat(2,minmax(0,1fr))}
 #building-view .building-room-scroll .bank-services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container room-layout (min-width:980px){
 #castle-view .castle-people-service .castle-people-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:760px) and (pointer:fine){
 :is(#castle-view,#building-view,#tavern-view){--room-gutter:20px;--room-gap:16px}
}
@media(max-width:479px){
 #castle-view .castle-heading{grid-template-columns:minmax(0,1fr)}
 #castle-view .castle-service,:is(#building-view,#tavern-view) .building-room-scroll>section{padding:12px}
 #tavern-view .tavern-trade{grid-template-columns:minmax(0,1fr)}
 #tavern-view .tavern-trade>button{width:100%;min-width:0}
 #tavern-view .tavern-wager-cards{grid-template-columns:minmax(0,1fr)}
}

/* Keep construction tools in one column, with room reserved above the panel. */
footer{--build-action-size:clamp(56px,calc(58px * var(--ui-scale)),76px)}
#demolition-toggle,#repair-toggle{right:var(--build-tools-right,14px);width:var(--build-action-size);height:var(--build-action-size)}
#demolition-toggle{bottom:var(--build-tools-bottom,calc(100% + 160px))}
#repair-toggle{bottom:calc(var(--build-tools-bottom,calc(100% + 160px)) + var(--build-action-size) + 24px)}
#build-panel:not(.upgrading) #building-body{max-height:min(var(--building-body-height),var(--build-tools-content-height,44dvh))}
@media(max-width:759px),(pointer:coarse){
 #build-panel:not(.upgrading) #building-body{max-height:min(44dvh,var(--build-tools-content-height,var(--mobile-panel-content-height)))}
}

/* A visible child must never escape a replaced bottom navigation row. */
footer:is(.demolition-active,.repair-active,.fishing-active,.boat-planning,.castle-transfer-open,.alliance-open)>nav>button{opacity:0;pointer-events:none}
footer:is(.demolition-active,.repair-active,.fishing-active,.boat-planning,.castle-transfer-open,.alliance-open)>nav,
footer:is(.demolition-active,.repair-active,.fishing-active,.boat-planning,.castle-transfer-open,.alliance-open)>nav *{visibility:hidden!important;pointer-events:none!important}
footer:is(.demolition-active,.repair-active,.fishing-active,.boat-planning,.castle-transfer-open,.alliance-open)>nav .menu-count-badge,
footer.planning-city>nav .menu-count-badge{opacity:0;visibility:hidden;pointer-events:none}

/* Compact VGA title screen, using the same stone border and palette as the map. */
#loader.title-menu{display:flex;align-items:center;justify-content:flex-start;padding:20px 12px;gap:0;background:#0c1210;overflow:auto;transition:opacity .2s ease}
#loader.title-menu .loading-art{position:relative;display:flex;flex-direction:column;width:min(560px,100%);height:auto;min-height:0;aspect-ratio:auto;margin:auto;flex:none;border:10px solid #4a4640;border-image:url('./stone-panel.png?v=128') 15% fill / 10px / 0 round;background:#222c20;box-shadow:0 5px #060b08;opacity:1;transform:none;animation:title-arrive .2s ease both}
#loader.title-menu .loading-art::after{content:none}
#loader.title-menu #loading-picture{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;image-rendering:pixelated;border-top:2px solid #101b13;border-bottom:2px solid #101b13;opacity:0;transition:opacity .18s ease}
#loader.title-menu #loading-picture.painted{opacity:1}
.title-copy{position:relative;padding:17px 12px 15px;text-align:center;background:#253023;border-bottom:1px solid #77815b}
#loader.title-menu #loading-title{position:relative;margin:0;padding:0;visibility:visible;opacity:1;transform:none;font:700 clamp(32px,7vw,46px)/1.1 pixel-ultima-ui,Georgia,serif;letter-spacing:.16em;text-indent:.16em;color:#e2ce93;text-shadow:2px 2px #0c1912;transition:none}
.title-copy::before,.title-copy::after{content:'';position:absolute;top:50%;width:5px;height:5px;background:#aea06e;box-shadow:1px 1px #101b13}
.title-copy::before{left:18px}.title-copy::after{right:18px}
.title-actions{position:relative;inset:auto;width:min(300px,calc(100% - 32px));margin:18px auto 4px;padding:0;transform:none}
.title-actions nav{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;margin:0}
#loader.title-menu .title-actions button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:none;min-width:0;min-height:46px;height:auto;aspect-ratio:auto;margin:0;padding:10px 16px;border:2px solid #101c12;border-radius:0;background:#35472b;box-shadow:inset 1px 1px #899167,inset -1px -1px #1e2c1d,0 2px #0d170e;color:#e6dbb4;font:600 var(--ui-text)/1.3 var(--ui-font);text-shadow:none;transform:none;transition:background .15s ease,color .15s ease}
#loader.title-menu .title-actions button:hover:not(:disabled){background:#475a36;color:#fff0c2}
#loader.title-menu .title-actions button:focus-visible{outline:2px solid #d8bf78;outline-offset:2px}
#loader.title-menu .title-actions button:disabled{cursor:default;opacity:.65}
#loader.title-menu #title-play{background:#535d32;box-shadow:inset 1px 1px #b8b47b,inset -1px -1px #303d25,0 2px #0d170e}
#loader.title-menu #title-play:hover:not(:disabled){background:#65713e}
.title-button-icon{color:#dcc17a;font-size:14px}
#loader.title-menu #loading-text{display:none;min-height:0;padding:0;margin:12px 0 0;font:400 var(--ui-small)/1.4 var(--ui-font);color:#d4c79f;text-align:center}
#loader.title-menu.joining #loading-text,#loader.title-menu.has-error #loading-text{display:block}
#loader.title-menu #loading-retry{margin-top:8px}
.title-footer{position:static;display:flex;justify-content:space-between;gap:12px;margin:15px 20px 12px;color:#969e83;font:400 var(--ui-small)/1.3 var(--ui-font)}
#loader.title-menu.show-details .title-actions{width:calc(100% - 36px);margin-top:16px}
#title-details h2{margin:0 0 12px;color:#e1d19e;font:600 var(--ui-title)/1.3 var(--ui-font)}
#title-details p{margin:0 0 16px;color:#c6cbb1;font:400 var(--ui-text)/1.5 var(--ui-font)}
#title-details{animation:title-arrive .18s ease both}
@keyframes title-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:759px){#loader.title-menu{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}.title-copy{padding:16px 12px}.title-actions{margin-top:14px}.title-footer{margin:14px 16px 10px}}
@media(max-height:560px){#loader.title-menu{padding:8px}#loader.title-menu .loading-art{width:min(440px,100%)}#loader.title-menu #loading-picture{max-height:150px;object-fit:cover;object-position:50% 56%}.title-copy{padding:10px}.title-actions{margin-top:10px}.title-actions nav{gap:6px}}
@media(prefers-reduced-motion:reduce){#loader.title-menu .loading-art,#title-details{animation:none}#loader.title-menu,#loader.title-menu #loading-picture{transition:opacity .15s}}

/* Website layout around the VGA game scene. Decoration is cached canvas + CSS opacity. */
#loader.title-menu{isolation:isolate;padding:24px 20px;background:#09131b;align-items:center}
#loader .title-night,#loader .title-stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;image-rendering:pixelated}
#loader .title-stars{animation:title-stars-breathe 5.8s ease-in-out infinite alternate;opacity:.4}
.title-site{position:relative;width:min(1180px,100%);margin:auto;flex:none;animation:title-arrive .22s ease both}
.title-site-header,.title-side{border:8px solid #4a4640;border-image:url('./stone-panel.png?v=128') 15% fill / 8px / 0 round;background:#202a23;box-shadow:0 3px #080e10}
.title-site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;margin-bottom:22px}
#loader .title-site-header nav{display:flex;flex:0 1 auto;flex-wrap:wrap;gap:4px;justify-content:center}
#loader .title-site-header button,#loader .title-side button,#title-account-dialog button:not(.game-close){width:auto;max-width:none;min-height:44px;aspect-ratio:auto;border:1px solid #697357;border-radius:0;padding:9px 12px;background:#303e2d;box-shadow:inset 1px 1px #87946a33,0 2px #0b1710;color:#e1d5ad;font:600 var(--ui-small)/1.3 var(--ui-font);text-shadow:none;transition:background .16s,color .16s;transform:none}
#loader .title-site-header nav button{border-color:transparent;background:transparent;box-shadow:none;font-weight:400}
#loader .title-site-header nav button:first-child{border-bottom-color:#b9a26e;color:#f0d995}
#loader .title-site-header button:hover,#loader .title-side button:hover,#title-account-dialog button:not(.game-close):hover{background:#46563b;color:#fff0c3}
#loader .title-site-header .title-wordmark{font:700 24px/1 pixel-ultima-ui,serif;letter-spacing:.12em;border:0;background:transparent;box-shadow:none;color:#d3b878;padding-left:0}
.title-account{display:flex;gap:8px;flex-wrap:wrap}
#loader .title-site-header [data-auth=register]{border-color:#aa9865;background:#4a5231}
.title-site-grid{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,560px) minmax(170px,1fr);gap:20px;align-items:start}
#loader.title-menu .title-site .loading-art{width:100%;margin:0;border-width:10px;border-image-width:10px}
.title-side{min-width:0;margin-top:38px}
.title-side summary,.title-side h2{padding:15px 12px;margin:0;border-bottom:1px solid #747b54;color:#dcc798;font:600 var(--ui-title)/1.25 var(--ui-font)}
.title-side summary{cursor:pointer;list-style-position:inside}
.title-side-body{padding:12px}
.title-side p{margin:0 0 16px;color:#c7c9ae;font:400 var(--ui-text)/1.45 var(--ui-font)}
#loader .title-muted,#title-account-dialog .title-muted{color:#9ba991;font:400 var(--ui-small)/1.45 var(--ui-font)}
.title-rank-tabs{display:flex;gap:6px;margin:0 0 14px}
#loader .title-rank-tabs button{flex:1;min-width:0;padding:8px 4px}
#loader .title-rank-tabs [aria-pressed=true]{background:#4a5534;border-color:#baaa74;color:#f1dda3}
.title-rank-list{padding:0;margin:0 0 16px;list-style:none}
.title-rank-list li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:7px;padding:11px 0;border-bottom:1px solid #52604766;font:400 var(--ui-small)/1.3 var(--ui-font);color:#d1d4b9}
.title-rank-list b{color:#d9c58c;font-weight:600}.title-rank-number{color:#8a9778;font-size:var(--ui-small)}
.title-rank-list li:first-child .title-rank-number{color:#e7c779}
.title-camp{display:block;width:144px;height:96px;max-width:100%;margin:0 auto 14px;image-rendering:pixelated}
.title-news{margin-top:22px;border-top:1px solid #6a7151;padding-top:16px}
.title-news h3{margin:0 0 12px;color:#d6bd86;font:600 var(--ui-text)/1.3 var(--ui-font)}
.title-scene{position:relative;overflow:hidden}
#loader.title-menu .title-scene #loading-picture{border:0;max-height:none;object-fit:contain}
.title-scene-alternate{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;opacity:0;animation:title-scene-frame 1.6s steps(1,end) infinite}
#loader.finished .title-stars,#loader.finished .title-scene-alternate,#loader.title-sleep .title-stars,#loader.title-sleep .title-scene-alternate{animation-play-state:paused}
#title-account-dialog{position:fixed;inset:0;width:min(420px,calc(100vw - 28px));max-height:calc(100svh - 32px);padding:24px 20px;border:8px solid #4a4640;border-image:url('./stone-panel.png?v=128') 15% fill / 8px / 0 round;background:#202c23;color:#e2d5ae;box-sizing:border-box;overflow:auto;box-shadow:0 8px 0 #080e12;animation:title-arrive .18s ease both}
#title-account-dialog::backdrop{background:#050b12cf}
#title-account-dialog h2{margin:0 32px 12px 0;font:600 var(--ui-title)/1.3 var(--ui-font)}
#title-account-dialog p{margin:0 0 16px;font:400 var(--ui-text)/1.45 var(--ui-font)}
#title-account-dialog form{display:grid;gap:14px}
#title-account-dialog label{display:grid;gap:6px;font:400 var(--ui-small)/1.3 var(--ui-font);color:#c4c9ac}
#title-account-dialog input{width:100%;min-width:0;min-height:46px;padding:10px;border:1px solid #738064;border-radius:0;background:#111e1b;color:#f0e2bb;font:400 var(--ui-text)/1.3 var(--ui-font)}
#title-account-dialog input:focus{outline:2px solid #b5a576;outline-offset:1px}
#title-account-dialog .title-dialog-close{position:absolute;top:12px;right:10px;min-height:36px;width:36px;padding:6px}
#title-account-dialog .title-guest{margin-top:14px;width:100%}
#title-account-dialog #title-auth-submit{background:#535f39}
@keyframes title-stars-breathe{from{opacity:.2}to{opacity:.85}}
@keyframes title-scene-frame{0%,100%{opacity:0}50%{opacity:1}}
@media(max-width:1050px){.title-site-grid{grid-template-columns:minmax(180px,1fr) minmax(0,560px)}.title-chronicle{grid-column:1 / -1;margin-top:0}.title-chronicle .title-side-body{display:grid;grid-template-columns:130px 1fr;gap:12px}.title-chronicle .title-camp{grid-row:1 / 4}.title-chronicle .title-news{grid-column:1 / -1;margin-top:0}.title-site-header{padding:8px 10px;gap:8px}.title-account{margin-left:auto}}
@media(max-width:759px){
 #loader.title-menu{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
 .title-site{width:min(560px,100%)}.title-site-header{margin-bottom:14px;gap:6px;padding:6px 8px}
 #loader .title-site-header .title-wordmark{font-size:22px;padding:8px 2px}.title-account{gap:6px}
 #loader .title-site-header button{padding:8px;font-size:var(--ui-small)}
 #loader .title-site-header nav{order:3;flex-basis:100%;justify-content:space-between;border-top:1px solid #65704c;padding-top:4px}
 .title-site-grid{display:flex;flex-direction:column;gap:14px}.title-site-grid>.loading-art{order:0}.title-ranking{order:1;width:100%;margin:0}.title-chronicle{order:2;width:100%;margin:0}
 .title-side-body{padding:14px}.title-ranking summary{padding:14px}.title-rank-list li{grid-template-columns:28px minmax(0,1fr) auto}
 #loader .title-stars{animation-duration:7.5s}.title-scene-alternate{animation-duration:2s}
}
@media(max-width:359px){.title-site-header .title-account{width:100%;margin:0}.title-account button{flex:1}}
@media(prefers-reduced-motion:reduce){#loader .title-stars{animation:none;opacity:.55}.title-scene-alternate{animation:none;opacity:0}.title-site,#title-account-dialog{animation:none}}
#loader .title-meteor{position:fixed;left:0;top:0;width:112px;height:16px;z-index:-1;opacity:0;pointer-events:none;image-rendering:pixelated;transform-origin:90% 50%}
@media(max-width:759px){#loader .title-meteor{width:84px;height:12px}}
@media(prefers-reduced-motion:reduce){#loader .title-meteor{display:none}}
.title-ranking[open] .title-side-body{animation:title-arrive .18s ease both}
@media(prefers-reduced-motion:reduce){.title-ranking[open] .title-side-body{animation:none}}

/* Sunlit Civina valley: one cached landscape, a quiet central menu. */
#loader.title-menu.title-day{background:#101c1a;padding:24px;align-items:stretch}
.title-day .title-landscape{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated;z-index:-2;pointer-events:none}
#loader.title-day::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#101c1a44,transparent 26%,transparent 70%,#101c1acc),linear-gradient(90deg,#101c1a99,transparent 22%,transparent 78%,#101c1a99)}
.title-day .title-site{width:100%;max-width:1400px;min-height:calc(100svh - 48px);margin:auto;display:flex;flex-direction:column;gap:20px}
.title-day .title-site-header{background:#1e2c24e8;border:1px solid #8f9166;box-shadow:0 3px #14231c;padding:8px 16px;flex-shrink:0}
.title-day .title-site-grid{display:flex;flex:1;align-items:center;justify-content:center;gap:0}
.title-day .title-site-grid>.title-side{display:none}
#loader.title-day .loading-art{width:min(370px,100%);margin:25px auto 50px;background:#202e24ed;border:2px solid #979871;box-shadow:0 0 0 4px #1b261fcc,0 8px 0 #101b1c44;animation:title-arrive .22s ease both}
.title-day .title-copy{padding:22px 14px 12px;background:transparent;border:0}
#loader.title-day #loading-title{font-size:44px;padding:0;letter-spacing:.12em;color:#eddb9d;text-shadow:3px 3px #17251d}
#loader.title-day #loading-picture{display:none}
.title-day .title-actions{width:calc(100% - 36px);margin:12px auto 16px}
.title-day .title-actions nav{gap:8px}
#loader.title-day .title-actions button{min-height:46px;background:#364932;border:1px solid #a2a277;box-shadow:inset 1px 1px #788263,inset -1px -1px #17271c;font:var(--ui-text)/1.35 var(--ui-font)}
#loader.title-day #title-play{min-height:54px;background:#667440;color:#fff1c5;margin-bottom:8px}
.title-day .title-footer{margin:14px 18px;color:#b3b699;font-size:var(--ui-small)}
.title-day-clouds{position:fixed;left:-5%;top:16%;width:110%;height:6px;background:repeating-linear-gradient(90deg,transparent 0 18%,#f5e8c214 18% 23%,transparent 23% 42%);z-index:-1;pointer-events:none;animation:day-drift 18s ease-in-out infinite alternate}
@keyframes day-drift{to{transform:translateX(3%)}}
.title-sleep .title-day-clouds,.finished .title-day-clouds{animation-play-state:paused}
#title-tools{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow:auto;padding:24px;background:#223127;color:#eee1bb;border:2px solid #96976c;box-shadow:0 0 0 4px #14221d;font:var(--ui-text)/1.45 var(--ui-font);animation:title-arrive .18s ease}
#title-tools::backdrop{background:#0c181bcc}
#title-tools h2{font-size:var(--ui-title);padding-right:40px;margin:0 0 18px}
.title-tools-body{display:grid;gap:10px}
.title-tools-body p{margin:0 0 8px;font-size:var(--ui-small);color:#bac2aa}
#title-tools .title-tools-body>button{width:100%;max-width:none;aspect-ratio:auto;min-height:46px;padding:10px;background:#425536;color:#f0e5c2;border:1px solid #93976a;font:var(--ui-text)/1.4 var(--ui-font)}
#title-tools .title-ranking{width:100%;margin:0;border:0;background:transparent}
#title-tools .title-ranking summary{display:none}
#title-tools .title-side-body{padding:0}
body.booting.title-wiki-open>#wiki-panel.visible{visibility:visible;opacity:1}
body.title-wiki-open #wiki-panel{border:2px solid #92946b;background:#1d2c25}
@media(max-width:759px){
 #loader.title-menu.title-day{padding:12px}
 .title-day .title-site{min-height:calc(100svh - 24px);gap:14px}
 .title-day .title-site-header{padding:6px 10px;gap:6px}
 .title-day .title-site-header>nav{display:none}
 .title-day .title-account{margin-left:auto}
 .title-day .title-landscape{object-position:25% center}
 #loader.title-day .loading-art{margin:20px auto;width:min(340px,calc(100% - 12px))}
 .title-day .title-copy{padding-top:18px}
 #loader.title-day #loading-title{font-size:36px}
 .title-day .title-actions{width:calc(100% - 28px)}
 .title-day .title-actions nav{gap:7px}
 .title-day-clouds{animation-duration:24s}
}
@media(prefers-reduced-motion:reduce){.title-day-clouds{animation:none}#loader.title-day .loading-art{animation:none}}

/* Match the keeper's illustrated forest, with a compact menu over the clearing. */
#loader.title-menu.title-day .title-site .loading-art{width:300px;max-width:calc(100vw - 40px);flex:0 0 auto;margin:20px auto 32px;border:1px solid #929579;border-image:none;background:#1b2b25eb;box-shadow:0 0 0 3px #18251fc9,0 8px 24px #07151144}
#loader.title-menu.title-day .title-site{max-width:1120px}
#loader.title-menu.title-day .title-site-header{border-image:none;border:0;background:#172723c9;box-shadow:0 1px #a4aa8055;margin-bottom:0}
#loader.title-menu.title-day .title-actions{width:calc(100% - 32px);margin:8px auto 12px}
#loader.title-menu.title-day .title-actions nav{gap:6px}
#loader.title-menu.title-day .title-actions button{min-height:44px;margin:0;padding:8px 10px;box-shadow:none;border:1px solid #83916a66;background:#344730b3}
#loader.title-menu.title-day #title-play{min-height:48px;margin-bottom:6px;background:#627047;border-color:#b8b482}
#loader.title-menu.title-day .title-copy{padding:20px 12px 12px}
#loader.title-menu.title-day #loading-title{font-size:36px}
#loader.title-menu.title-day .title-footer{margin:10px 16px 14px}
#loader.title-menu.title-day .title-landscape{object-fit:cover;object-position:50% 50%}
#loader.title-menu.title-day::after{background:linear-gradient(180deg,#0c191a66,transparent 24%,transparent 73%,#0c191ac9),linear-gradient(90deg,#0c191a99,transparent 16%,transparent 84%,#0c191a99)}
.title-day-clouds{display:none}
@media(max-width:759px){
 #loader.title-menu.title-day .title-site{max-width:100%}
 #loader.title-menu.title-day .title-site .loading-art{width:280px;margin:18px auto}
 #loader.title-menu.title-day .title-landscape{object-position:63% center}
 #loader.title-menu.title-day .title-site-header{padding:6px 8px}
 #loader.title-menu.title-day .title-copy{padding:16px 12px 10px}
}

/* Website navigation remains available above the single central entry action. */
#loader.title-menu.title-day .title-site-header{display:flex;align-items:center;gap:12px;padding:10px 18px;border:1px solid #8d977466;background:#1b2a25ed;box-shadow:0 3px #0d1c1866}
#loader.title-menu.title-day .title-site-header nav{display:flex;flex:1;justify-content:center;gap:2px}
#loader.title-menu.title-day .title-site-header nav button{padding:8px 10px;min-height:44px;border:0;background:transparent;color:#d0d0af}
#loader.title-menu.title-day .title-site-header nav button:hover{background:#43513b;color:#fff0c7}
#loader.title-menu.title-day .title-site-header .title-account{margin-left:0;gap:6px}
#loader.title-menu.title-day .title-site-header .title-account button{border:1px solid #89946b77;background:#3e4c33;box-shadow:none}
#loader.title-menu.title-day .title-site .loading-art{background:#192921d9;margin-bottom:40px}
#loader.title-menu.title-day .title-copy{padding:26px 16px 16px}
#loader.title-menu.title-day .title-actions{margin:0 auto 10px}
#loader.title-menu.title-day #title-play{margin:0}
@media(max-width:1050px){
 #loader.title-menu.title-day .title-site-header{flex-wrap:wrap}
 #loader.title-menu.title-day .title-site-header .title-account{margin-left:auto}
 #loader.title-menu.title-day .title-site-header nav{order:3;flex:1 0 100%;border-top:1px solid #8d977433;padding-top:6px;flex-wrap:wrap}
}
@media(max-width:759px){
 #loader.title-menu.title-day .title-site-header{padding:6px 8px;gap:5px}
 #loader.title-menu.title-day .title-site-header nav{display:flex;gap:0;padding-top:4px}
 #loader.title-menu.title-day .title-site-header nav button{padding:7px 9px;font-size:var(--ui-small)}
 #loader.title-menu.title-day .title-site-header .title-account{width:auto;flex:0 1 auto}
 #loader.title-menu.title-day .title-site-header .title-account button{padding:7px 8px}
 #loader.title-menu.title-day .title-site .loading-art{margin:24px auto 60px}
}

/* Header sections are pages in the same website, not overlays. */
#loader.title-reading .title-site-grid{align-items:stretch;flex-direction:column;justify-content:flex-start}
#loader .title-page-host{width:min(100%,1000px);margin:8px auto 16px;min-height:0;box-sizing:border-box;background:#1c2d26f2;border:1px solid #929b7466;box-shadow:0 4px 20px #0b191c33;padding:clamp(14px,2vw,20px);animation:title-arrive .18s ease}
#loader .title-page-host #title-tools,#loader .title-page-host #title-account-dialog{position:static;display:block;width:100%;max-width:720px;max-height:none;margin:0 auto;padding:0;border:0;background:none;box-shadow:none;overflow:visible;animation:none}
#loader .title-page-host #title-tools h2{padding:0;margin:0 0 10px}
#loader .title-page-host .title-tools-body{gap:10px}
#loader .title-page-host .title-tools-body>p{font:var(--ui-text)/1.5 var(--ui-font);max-width:64ch}
#loader .title-page-host .title-tools-body>button{max-width:400px;text-align:left}
#loader .title-page-host .title-ranking{max-width:640px}
#loader .title-page-host #title-account-dialog .title-dialog-close{display:none}
#loader .title-site-header nav button[data-current]{background:#526242;color:#f5e8b8;box-shadow:inset 0 -2px #c5b778}
#loader .title-site-header nav button:not([data-current]){border-bottom-color:transparent}
#loader #wiki-panel.title-wiki-page{position:static;inset:auto;width:100%;height:min(680px,75dvh);min-height:420px;padding:0;border:0;background:transparent;box-shadow:none;z-index:auto}
#loader #wiki-panel.title-wiki-page .wiki-close{display:none}
#loader #wiki-panel.title-wiki-page .wiki-shell{max-width:none}
#loader #wiki-panel.title-wiki-page .wiki-tabs{gap:6px}
@media(max-width:759px){
 #loader .title-page-host{margin:4px auto 12px;padding:14px;min-height:0}
 #loader #wiki-panel.title-wiki-page{height:calc(100dvh - 190px);min-height:440px}
 #loader .title-page-host #title-tools{width:100%}
 #loader.title-reading .title-site{gap:8px}
}

/* The website wiki inherits the page background, without the game-window veil. */
#loader #wiki-panel.title-wiki-page{position:relative;isolation:isolate}
#loader #wiki-panel.title-wiki-page::before{content:none;animation:none}

/* A narrow dry-brush menu: quiet edges, aligned controls, no blurred cloud. */
#loader.title-menu.title-day .title-site .loading-art{isolation:isolate;width:340px;max-width:calc(100vw - 40px);padding:24px 22px 16px;border:0;border-image:none;background:none;box-shadow:none;overflow:visible}
#loader.title-menu.title-day .title-site .loading-art::before{content:"";position:absolute;inset:0 -8px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#263a2fe0,#20362ff2 24%,#23392ef2 78%,#304333d9);clip-path:polygon(7% 0,89% 1%,96% 3%,93% 8%,98% 9%,95% 19%,99% 20%,96% 39%,99% 41%,95% 60%,98% 62%,94% 81%,96% 90%,89% 97%,8% 100%,4% 96%,7% 89%,2% 85%,5% 71%,1% 68%,4% 51%,2% 45%,5% 29%,1% 25%,5% 11%,3% 7%);mask-image:linear-gradient(transparent,#000b 5%,#000 12%,#000 88%,#000b 95%,transparent)}
#loader.title-menu.title-day .title-site .loading-art::after{content:none}
#loader.title-menu.title-day .title-copy{padding:10px 0 24px;background:none}
#loader.title-menu.title-day .title-copy::before,#loader.title-menu.title-day .title-copy::after{content:none}
#loader.title-menu.title-day #loading-title{font-size:36px;letter-spacing:.1em;text-shadow:2px 2px #14251e}
#loader.title-menu.title-day .title-actions{width:100%;margin:0}
#loader.title-menu.title-day .title-actions nav{display:grid;gap:8px}
#loader.title-menu.title-day .title-actions button,#loader.title-menu.title-day .title-actions #title-play{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:none;min-height:48px;margin:0;padding:10px 8px;border:0;border-radius:0;box-shadow:none;outline-offset:3px;background:#64765324;color:#dddcc2;font:var(--ui-text)/1.35 var(--ui-font);text-shadow:none;transition:background .18s,color .18s}
#loader.title-menu.title-day .title-actions #title-play{background:#7d895161;color:#fff0be;box-shadow:inset 0 1px #c7bd7844,inset 0 -1px #c7bd7833}
#loader.title-menu.title-day .title-actions button:hover:not(:disabled),#loader.title-menu.title-day .title-actions button:focus-visible{background:#83905b60;color:#fff3cc}
#loader.title-menu.title-day .title-button-icon{display:none}
#loader.title-menu.title-day .title-room{flex-wrap:wrap}
#loader.title-menu.title-day .title-room small{font:var(--ui-small)/1.3 var(--ui-font);color:#a9b497}
#loader.title-menu.title-day .title-footer{justify-content:center;margin:16px 0 0;color:#9da98b;font-size:var(--ui-small)}
#loader.title-menu.title-day .title-footer>span:first-child{display:none}
.title-menu-notice{margin:12px 0 0;color:#e0d7b8;text-align:center;font:var(--ui-small)/1.4 var(--ui-font);animation:title-arrive .18s ease}
@media(max-width:759px){#loader.title-menu.title-day .title-site .loading-art{width:320px;max-width:calc(100vw - 36px);padding:22px 20px 14px;margin:20px auto 36px}}

/* Cached title-scene layers share the exact landscape crop on every screen. */
#loader.title-menu.title-day .title-life{pointer-events:none;z-index:-2}
#loader .title-water-glints{opacity:.22;animation:title-water 4s ease-in-out infinite alternate}
#loader .title-twinkles,#loader .title-night-animal,#loader .title-crickets{display:none}
#loader.title-night-mode .title-twinkles{display:block;opacity:.5;animation:title-stars-breathe 5s ease-in-out infinite alternate}
#loader .title-rabbit-0{animation:title-rabbit-rest 7s steps(1,end) infinite}
#loader .title-rabbit-1{animation:title-rabbit-ear 7s steps(1,end) infinite}
#loader.title-night-mode .title-rabbit{display:none}
#loader.title-night-mode .title-night-animal,#loader.title-night-mode .title-crickets{display:block}
#loader.title-night-mode .title-fox-0{animation:title-fox-rest 31s steps(1,end) infinite}
#loader.title-night-mode .title-fox-1{animation:title-fox-tail 31s steps(1,end) infinite}
#loader.title-night-mode .title-crickets-0{animation:title-rabbit-rest 1s steps(1,end) infinite}
#loader.title-night-mode .title-crickets-1{animation:title-rabbit-ear 1s steps(1,end) infinite}
#loader.title-night-mode .title-water-glints{opacity:.1}
@keyframes title-water{from{opacity:.08}to{opacity:.3}}
@keyframes title-rabbit-rest{0%,76%,88%,100%{opacity:1}80%,84%{opacity:0}}
@keyframes title-rabbit-ear{0%,76%,88%,100%{opacity:0}80%,84%{opacity:1}}
@keyframes title-fox-rest{0%,50%,83%,100%{opacity:0}54%,62%,74%{opacity:1}58%,68%,78%{opacity:0}}
@keyframes title-fox-tail{0%,54%,62%,74%,83%,100%{opacity:0}58%,68%,78%{opacity:1}}
#loader.title-sleep .title-life,#loader.finished .title-life{animation-play-state:paused}
#loader .title-theme-toggle{white-space:nowrap;min-width:84px}
@media(max-width:759px){#loader.title-menu.title-day .title-site-header .title-account{gap:4px;flex-wrap:wrap;justify-content:flex-end}#loader.title-menu.title-day .title-site-header .title-account button{padding:7px 6px}}
@media(prefers-reduced-motion:reduce){#loader .title-life{animation:none!important}#loader .title-rabbit-0{opacity:1}#loader .title-rabbit-1,#loader .title-fox-1,#loader .title-crickets-1{opacity:0}#loader .title-fox-0{opacity:.7}}
#loader .title-leaves{opacity:.35;animation:title-leaf-sway 4s ease-in-out infinite alternate}
#loader.title-night-mode .title-leaves{opacity:.07}
@keyframes title-leaf-sway{to{transform:translate(2px,1px)}}

/* Pull-cord switch with a weighted wooden handle and a short spring return. */
#loader.title-menu.title-day .title-site-header .title-account .title-theme-toggle{position:relative;align-self:flex-start;width:48px;min-width:48px;height:60px;min-height:60px;margin:-10px 6px -8px 0;padding:0;border:0;background:none;box-shadow:none;overflow:visible;touch-action:manipulation}
#loader .title-cord{position:absolute;top:0;left:12px;width:24px;height:58px;transform-origin:50% 0;pointer-events:none}
#loader .title-cord i{position:absolute;left:11px;top:calc(-100vh - 64px);width:3px;height:calc(100vh + 104px);background:repeating-linear-gradient(0deg,#c3b17a 0 2px,#786c48 2px 4px);box-shadow:1px 0 #19271e}
#loader .title-cord b{position:absolute;left:5px;top:38px;width:16px;height:18px;background:#ad965b;border:2px solid #4a4932;box-shadow:inset 2px 2px #dfc88c,inset -2px -2px #726039;clip-path:polygon(25% 0,75% 0,75% 15%,100% 35%,100% 80%,75% 100%,25% 100%,0 80%,0 35%,25% 15%)}
#loader.title-night-mode .title-cord b{background:#8caaa0;box-shadow:inset 2px 2px #c1cdbc,inset -2px -2px #586f68}
#loader.title-menu.title-day .title-site-header .title-account .title-theme-toggle:hover{background:#c9cfa00c}
#loader .title-night-painting{opacity:0;transition:opacity .24s ease;pointer-events:none}
#loader.title-night-mode .title-night-painting{opacity:1}
#loader .title-rabbit-0{animation:title-rabbit-rest 7s steps(1,end) infinite,title-hare-hop 19s linear infinite}
#loader .title-rabbit-1{animation:title-rabbit-ear 7s steps(1,end) infinite,title-hare-hop 19s linear infinite}
@keyframes title-hare-hop{0%,54%,100%{transform:translate(0,0)}56%{transform:translate(-4px,-6px)}58%,69%{transform:translate(-8px,0)}70%{transform:translate(-8px,1px)}72%{transform:translate(-4px,-6px)}74%,86%{transform:translate(0,0)}88%{transform:translate(0,1px)}90%{transform:translate(0,0)}}
@media(max-width:759px){#loader.title-menu.title-day .title-site-header .title-account .title-theme-toggle{height:54px;min-height:54px;margin:-6px 2px -4px 0}}
@media(prefers-reduced-motion:reduce){#loader .title-night-painting{transition:opacity .15s}#loader .title-rabbit{animation:none!important}}

#loader.title-menu.title-day #loading-title{font:600 var(--ui-title)/1.35 var(--ui-font);letter-spacing:0;text-shadow:none}

/* Single-row header, with the same live links tucked into a VGA dropdown. */
#loader.title-menu.title-day .title-site-header{position:relative;display:flex;flex-wrap:nowrap;gap:10px;min-width:0;z-index:5}
#loader.title-menu.title-day .title-site-header>nav{flex-wrap:nowrap;order:0;flex:1 1 auto;border:0;padding:0}
#loader.title-menu.title-day .title-site-header .title-account{display:flex;flex:0 0 auto;flex-wrap:nowrap;width:auto;margin-left:auto}
#loader.title-menu.title-day .title-site-header .title-more{display:none}
#loader.title-menu.title-day .title-site-header.is-compact{padding:8px 10px;gap:6px;min-height:60px;box-sizing:border-box}
#loader.title-menu.title-day .title-site-header.is-compact .title-wordmark{flex:1 1 auto;min-width:0;margin:0;padding:0;font-size:24px;letter-spacing:.08em;white-space:nowrap}
#loader.title-menu.title-day .title-site-header.is-compact .title-account{gap:4px;margin:0}
#loader.title-menu.title-day .title-site-header.is-compact .title-account [data-auth=login]{width:auto;min-width:56px;min-height:44px;margin:0;padding:8px;font-size:var(--ui-small)}
#loader.title-menu.title-day .title-site-header.is-compact .title-account .title-theme-toggle{width:44px;min-width:44px;height:44px;min-height:44px;margin:-8px 0 0;padding:0}
#loader.title-menu.title-day .title-site-header.is-compact .title-cord{left:10px;height:44px}
#loader.title-menu.title-day .title-site-header.is-compact .title-cord i{height:calc(100vh + 89px)}
#loader.title-menu.title-day .title-site-header.is-compact .title-cord b{top:23px}
#loader.title-menu.title-day .title-site-header.is-compact .title-more{display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:1px solid #8e986c66;background:#354732;box-shadow:inset 1px 1px #81906444}
#loader .title-more span{width:20px;height:16px;background:linear-gradient(#d6d1a4 0 3px,transparent 3px 6px,#d6d1a4 6px 9px,transparent 9px 13px,#d6d1a4 13px 16px)}
#loader #title-header-dropdown{position:absolute;top:calc(100% + 6px);right:0;width:min(300px,100%);max-height:calc(100dvh - 100px);overflow:auto;box-sizing:border-box;padding:10px;background:#1e3028;border:2px solid #7f8962;box-shadow:3px 4px #101e1bea;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:opacity .18s,transform .18s,visibility 0s .18s}
#loader #title-header-dropdown.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity .18s,transform .18s,visibility 0s}
#loader.title-menu.title-day .title-site-header.is-compact #title-header-dropdown nav{display:grid;grid-template-columns:1fr;gap:4px;flex:none;width:100%;margin:0;padding:0;border:0}
#loader.title-menu.title-day .title-site-header.is-compact #title-header-dropdown button{width:100%;max-width:none;min-height:44px;padding:9px 12px;text-align:left;white-space:normal;font:var(--ui-text)/1.35 var(--ui-font)}
#loader.title-menu.title-day .title-site-header.is-compact #title-header-dropdown>[data-auth=register]{margin-top:8px;background:#53613c;border:1px solid #98996b;color:#f0e4b8}
@media(prefers-reduced-motion:reduce){#loader #title-header-dropdown{transform:none;transition:opacity .15s,visibility 0s .15s}#loader #title-header-dropdown.is-open{transition:opacity .15s}}

/* Shared sound control, next to the light cord; no perpetual icon animation. */
#loader.title-menu.title-day .title-site-header .title-account .title-sound-toggle{display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:#d6d1a4}
#loader .title-sound-toggle svg{display:block;overflow:visible}
#loader .title-sound-toggle .speaker-wave,#loader .title-sound-toggle .speaker-mute{transition:opacity .18s}
#loader .title-sound-toggle .speaker-mute{opacity:0}
#loader .title-sound-toggle.is-muted .speaker-wave{opacity:0}
#loader .title-sound-toggle.is-muted .speaker-mute{opacity:1}
#loader.title-menu.title-day .title-site-header .title-account .title-sound-toggle.is-muted{color:#99a48b}
#loader.title-menu.title-day .title-site-header .title-account .title-sound-toggle:hover{background:#c9cfa014}
#loader .title-login-icon{display:none}
@media(max-width:759px){
 #loader.title-menu.title-day .title-site-header.is-compact{--header-action-gap:clamp(4px,1.5vw,8px);gap:var(--header-action-gap);padding:10px 12px}
 #loader.title-menu.title-day .title-site-header.is-compact .title-wordmark{font-size:22px;letter-spacing:.04em;text-align:left}
 #loader.title-menu.title-day .title-site-header.is-compact .title-account{gap:var(--header-action-gap)}
 #loader.title-menu.title-day .title-site-header.is-compact .title-account [data-auth=login]{display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0}
 #loader.title-menu.title-day .title-site-header.is-compact .title-login-label{display:none}
 #loader.title-menu.title-day .title-site-header.is-compact .title-login-icon{display:block}
}

/* Account pages share the compact website layout on phones and desktops. */
#title-account-dialog .account-tabs{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
#title-account-dialog .account-tabs button{flex:1;min-width:0}
#title-account-dialog .account-tabs button[aria-pressed="true"]{background:#535f39;border-color:#c5b981;color:#fff0c3}
#title-account-dialog [hidden]{display:none!important}
#title-account-dialog #account-login-status:empty{display:none}
#title-account-dialog #account-login-status{margin:0}
#title-account-dialog button:disabled{opacity:.6;cursor:wait}
#title-account-dialog .title-auth-result{margin-top:16px;overflow-wrap:anywhere}
#title-account-dialog .account-description{overflow-wrap:anywhere}
#loader.title-menu{overflow-x:hidden}
#title-account-dialog h2{overflow-wrap:anywhere}


/* Shared page navigation and modal header menu. */
#loader .title-site{animation-fill-mode:backwards}
#loader .title-header-backdrop{position:fixed;inset:0;z-index:4;background:#030b12b8;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s .18s}
#loader .title-header-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s ease,visibility 0s}
#loader.title-header-open{overflow:hidden}
#loader .title-site-header .title-auth-close{position:relative}
#loader .title-site-header .title-auth-close>* ,#loader .title-more.game-close>span{visibility:hidden}
#loader .title-page-back{display:flex;align-items:center;justify-content:center;min-height:44px;height:44px;width:44px;min-width:44px;margin:0 0 12px;padding:0;border:1px solid #82916a66;background:#30433280;color:#eee1bb;box-shadow:none;border-radius:0;text-shadow:none;transition:background .18s ease,border-color .18s ease}
#loader .title-page-back[hidden]{display:none}
#loader .title-page-back:hover{background:#46563b;border-color:#a8ae83}
#loader .title-page-back:focus-visible{outline:2px solid #dfce94;outline-offset:3px}
#loader .title-page-back svg{flex:none;width:22px;height:22px}

#title-account-dialog .account-tabs button{min-height:48px;padding:10px 12px;font:var(--ui-text)/1.35 var(--ui-font)}
#loader.title-menu.title-day .title-site-header.is-compact #title-header-dropdown>[data-auth=register]{min-height:48px;text-align:center;font:var(--ui-text)/1.35 var(--ui-font)}
@media(prefers-reduced-motion:reduce){#loader .title-header-backdrop{transition:opacity .15s,visibility 0s .15s}#loader .title-header-backdrop.is-open{transition:opacity .15s,visibility 0s}}




/* Compact account cards and readable field feedback on every screen. */
#loader .title-page-host.title-account-page{width:min(100%,500px);min-height:0;margin:8px auto 16px;padding:20px;background:#1b2d26f5;border-color:#929b7480;box-shadow:0 6px 24px #07151155}
#loader .title-page-host.title-account-page #title-account-dialog{max-width:none}
#loader .title-account-page .title-page-back{margin-bottom:12px}
#title-account-dialog form{gap:16px}
#title-account-dialog .account-description{font:var(--ui-small)/1.5 var(--ui-font);margin-bottom:12px}
#title-account-dialog input{transition:border-color .18s,background .18s;scroll-margin-block:24px}
#title-account-dialog input[aria-invalid="true"]{border-color:#c28e68;background:#292722}
#title-account-dialog .account-field-error,#title-account-dialog .account-field-note{font:var(--ui-small)/1.4 var(--ui-font);overflow-wrap:anywhere}
#title-account-dialog .account-field-error{color:#e5b994;animation:account-feedback-in .18s ease}
#title-account-dialog .account-field-note{color:#c7c493}
#title-account-dialog .account-password-row{display:flex;align-items:stretch;min-width:0;gap:6px}
#title-account-dialog .account-password-row input{flex:1;min-width:0;width:0}
#title-account-dialog .account-password-toggle{flex:none;padding:8px;min-height:46px;font:var(--ui-small)/1.3 var(--ui-font);box-shadow:none}
#title-account-dialog #title-auth-submit,#title-account-dialog .title-guest,#title-account-dialog .account-logout{width:100%;min-height:48px;font:var(--ui-text)/1.35 var(--ui-font);padding:10px 14px}
#title-account-dialog .title-guest{background:transparent;border-color:#69735799;box-shadow:none}
#title-account-dialog .title-auth-result{padding:12px 14px;border:1px solid #a8866480;border-left:3px solid #c29b70;background:#403728;color:#eee0bd;font:var(--ui-small)/1.5 var(--ui-font);margin:16px 0 0}
#title-account-dialog .title-auth-result[data-tone="success"]{background:#2c4231;border-color:#94a57580;color:#d9e2bc}
#title-account-dialog .title-auth-result[data-tone="pending"]{background:#293b34;border-color:#82998680;color:#cad6c0}
#title-account-dialog #account-login-status{font:var(--ui-small)/1.4 var(--ui-font);overflow-wrap:anywhere}
#title-account-dialog #account-login-status[data-tone="success"]{color:#bccf9a}
#title-account-dialog #account-login-status[data-tone="error"]{color:#e5b994}
@keyframes account-feedback-in{from{opacity:0}to{opacity:1}}
@media(max-width:759px){#loader .title-page-host.title-account-page{margin:8px auto 20px;padding:16px}#title-account-dialog .account-tabs{gap:6px}#title-account-dialog .account-tabs button{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){#title-account-dialog .account-field-error{animation:none}}

/* Keep the desktop row and move individual links only when space runs out. */
#loader.title-menu.title-day .title-site-header .title-wordmark{flex:0 0 auto;width:auto;text-align:left;margin:0;white-space:nowrap}
#loader.title-menu.title-day .title-site-header>nav{flex:0 0 auto;width:max-content;min-width:0;justify-content:flex-start;margin:0}
#loader.title-menu.title-day .title-site-header>nav button{flex:0 0 auto;white-space:nowrap}
#loader.title-menu.title-day .title-site-header .title-account{margin-left:auto}
#loader.title-menu.title-day .title-site-header.is-compact .title-wordmark{flex:0 0 auto;text-align:left}

#loader .title-nav-icon{display:none;pointer-events:none}
@media(min-width:760px) and (pointer:fine){
 #loader.title-menu.title-day .title-site-header>nav button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:8px 10px}
 #loader .title-site-header>nav .title-nav-icon{display:block;width:24px;height:24px;flex:none;image-rendering:pixelated}
}

#loader .guide-wiki-line{margin:0;font:var(--ui-text)/1.5 var(--ui-font)}
#loader .guide-wiki-link{display:inline;min-height:44px;padding:6px 4px;border:0;background:transparent;box-shadow:none;color:#edda9b;font:600 var(--ui-text)/1.5 var(--ui-font);text-decoration:underline;text-underline-offset:4px}
#loader .guide-wiki-link:hover{color:#fff0c2}
#loader .guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
#loader .guide-card{padding:12px;border:1px solid #82916a55;background:#25382b80;min-width:0}
#loader .guide-card h3{margin:8px 0 6px;font:600 var(--ui-title)/1.3 var(--ui-font);color:#e2d5ae}
#loader .guide-card p{margin:0;font:var(--ui-text)/1.5 var(--ui-font);color:#c3c9b0}
#loader .guide-preview{display:flex;align-items:center;gap:8px;min-height:44px;pointer-events:none}
#loader .guide-preview>span{display:grid;place-items:center;width:44px;height:44px;background:#172821;border:1px solid #8f966455;box-sizing:border-box;color:#e2d5ae}
#loader .guide-rounds>span{border-radius:50%;border:3px double #a5a475;background:#394a30}
#loader .guide-footnote{margin:0;font:var(--ui-small)/1.5 var(--ui-font);color:#aeb79a}
@media(max-width:759px){#loader .guide-grid{grid-template-columns:1fr}#loader .guide-card{padding:12px}}

#loader .title-about{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:16px;align-items:center}
#loader .title-about canvas{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid #89916a66;box-sizing:border-box}
#loader .title-about-copy p{margin:0;font:var(--ui-text)/1.55 var(--ui-font);color:#c3c9b0}
#loader .title-about-copy .title-about-credit{margin-top:12px;font-size:var(--ui-small)}
#loader .title-about-credit strong{color:#e2d5ae;font-weight:600}
@media(max-width:759px){#loader .title-about{grid-template-columns:1fr;gap:12px}#loader .title-about canvas{max-width:480px;margin:auto}}

#loader.title-reading .title-site{gap:8px}

#loader .guide-shot{height:150px;display:flex;align-items:center;justify-content:center;background:#111e18;border:1px solid #7d896044;overflow:hidden}
#loader .guide-shot img{display:block;width:100%;max-width:100%;height:auto;max-height:100%;object-fit:contain;image-rendering:pixelated}
#loader .guide-shot-map img{height:100%;object-fit:cover}
#loader .guide-shot-quick img{width:230px}
@media(max-width:759px){#loader .guide-shot{height:140px}}

#title-account-dialog .account-tabs{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 12px;padding:4px;background:#14241e;border:1px solid #7e8b6155}
#title-account-dialog .account-tabs button{border:1px solid transparent;background:transparent;box-shadow:none}
#title-account-dialog .account-tabs button[aria-pressed="true"]{background:#535f39;border-color:#c5b981;color:#fff0c3;box-shadow:inset 0 -2px #d2c287}

/* Desktop branding belongs to the main menu; phones keep it in the header. */
#loader.title-menu.title-day .title-site-header .title-wordmark{display:none}
#loader.title-menu.title-day #loading-title{display:flex;align-items:center;justify-content:center;gap:10px;font:700 32px/1.2 pixel-ultima-ui,monospace;letter-spacing:.06em;color:#e4d09a}
#loader #loading-title img,#loader .title-wordmark img{flex:none;image-rendering:pixelated;object-fit:contain}
#loader.title-menu.title-day .title-copy{padding:6px 0 14px}
@media(max-width:759px),(pointer:coarse){
 #loader.title-menu.title-day .title-site-header .title-wordmark{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:44px;padding:0;line-height:1.2}
 #loader.title-menu.title-day .title-copy{display:none}
 #loader.title-menu.title-day .title-actions{margin-top:4px}
}
@media(max-width:359px){
 #loader.title-menu.title-day .title-site-header.is-compact .title-wordmark{font-size:18px;gap:4px}
 #loader .title-wordmark img{width:20px;height:20px}
}

#loader .title-brand-helmet{display:block;flex:none;background:none;border:0;box-shadow:none}
#loader #loading-title .title-brand-helmet{width:48px;height:56px}
#loader .title-site-header .title-wordmark .title-brand-helmet{width:28px;height:32px}
@media(max-width:359px){#loader .title-site-header .title-wordmark .title-brand-helmet{width:24px;height:28px}}

/* Pixel font capitals sit above their line box: align the visible logo optically. */
@media(max-width:759px),(pointer:coarse){
 #loader.title-menu.title-day .title-site-header .title-wordmark>span{display:block;line-height:1;transform:translateY(2px)}
}

#loader.title-menu.title-day .title-site-header .title-wordmark{font-weight:700}

/* News feed: lightweight screenshots load as the reader scrolls. */
#loader .site-news-feed{display:grid;gap:16px}
#loader .site-news-card{overflow:hidden;border:1px solid #7d896055;background:#203229}
#loader .site-news-cover{display:block;width:100%;padding:0;border:0;background:#111e18;cursor:pointer}
#loader .site-news-cover img,#loader .site-news-post img{display:block;width:100%;height:auto;aspect-ratio:388/220;object-fit:contain;image-rendering:pixelated;background:#111e18}
#loader .site-news-copy{padding:14px;display:grid;gap:10px}
#loader .site-news-copy h3{margin:0;font:600 var(--ui-title)/1.3 var(--ui-font);color:#e5d7a9}
#loader .site-news-copy p,#loader .site-news-post p{margin:0;font:var(--ui-text)/1.55 var(--ui-font)}
#loader .site-news-copy .guide-wiki-link{justify-self:start}
#loader .site-news-meta{display:flex;position:static;flex-wrap:wrap;gap:6px 16px;padding:0;margin:2px 0 0;border:0;background:none;box-shadow:none;font:var(--ui-small)/1.4 var(--ui-font);color:#aab396;min-height:0}
#loader .site-news-post{display:grid;gap:14px}
#loader .site-news-cover:focus-visible{outline:2px solid #e5d7a9;outline-offset:-3px}
@media(min-width:760px){#loader .site-news-card{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr)}#loader .site-news-cover img{height:100%;object-fit:cover}}

#title-account-dialog .account-password-row .account-password-toggle{display:grid;place-items:center;flex:0 0 46px;width:46px;min-width:46px;padding:0}
#title-account-dialog .account-password-toggle svg{display:block;width:24px;height:24px}
#title-account-dialog .account-password-toggle svg g{transition:opacity .16s ease}
#title-account-dialog .account-password-toggle .password-eye-closed{opacity:0}
#title-account-dialog .account-password-toggle[aria-pressed="true"] .password-eye-open{opacity:0}
#title-account-dialog .account-password-toggle[aria-pressed="true"] .password-eye-closed{opacity:1}

#loader .setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #8f996633}
#loader .setting-row strong{display:block;font:600 var(--ui-text)/1.4 var(--ui-font);color:#eadbb2}
#loader .setting-row small{display:block;font:var(--ui-small)/1.4 var(--ui-font);color:#b7c0a7;margin-top:3px}
#loader .setting-row button{flex:none;display:flex;align-items:center;gap:8px;width:100px;max-width:none;min-height:44px;padding:6px;border:0;background:none;box-shadow:none;color:#ded4ae;font:var(--ui-small)/1.2 var(--ui-font)}
#loader .setting-row button i{position:relative;display:block;width:38px;height:22px;background:#17241e;border:1px solid #778365;transition:background .18s}
#loader .setting-row button i:after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:#aeb79a;transition:transform .18s,background .18s}
#loader .setting-row button[aria-checked=true] i{background:#53643a;border-color:#b5ae75}
#loader .setting-row button[aria-checked=true] i:after{transform:translateX(16px);background:#ebd89b}
#loader .settings-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#loader .settings-actions button,#loader .settings-retry{width:auto;max-width:100%;min-height:44px;padding:8px 12px;border:1px solid #7e8964;background:#344632;box-shadow:none;font:var(--ui-small)/1.4 var(--ui-font);color:#e8dcb5}
#loader .settings-actions p{flex-basis:100%}
#loader .title-tools-body .settings-sync{font:var(--ui-small)/1.5 var(--ui-font);color:#adb99b;margin:4px 0 0}
#loader .setting-row button:focus-visible{outline:2px solid #e4d39b;outline-offset:2px}
#loader .setting-row button:disabled{opacity:.5}
@media(max-width:459px){#loader .setting-row{gap:8px}#loader .setting-row button{width:94px}}
@media(prefers-reduced-motion:reduce){#loader .setting-row button i:after{transition:background .18s}}

/* The main menu and its forms share one responsive width. */
#loader{--site-menu-width:380px;--site-menu-padding:20px}
#loader.title-menu.title-day .title-site .loading-art,
#loader .title-page-host.title-compact-page{box-sizing:border-box;width:min(100%,var(--site-menu-width));max-width:100%;padding:var(--site-menu-padding)}
#loader .title-compact-page #title-tools,#loader .title-compact-page #title-account-dialog{min-width:0;max-width:100%}
#loader .title-compact-page .title-about{grid-template-columns:minmax(0,1fr);gap:12px}
#loader .title-compact-page .title-about canvas{width:100%;max-width:100%}
#loader .title-compact-page .setting-row>div{min-width:0;overflow-wrap:anywhere}
#loader .title-compact-page .settings-actions{display:grid;grid-template-columns:minmax(0,1fr)}
#loader .title-compact-page .settings-actions button{width:100%}
@media(max-width:759px){#loader{--site-menu-padding:14px}#loader.title-menu.title-day .title-site .loading-art,#loader .title-page-host.title-compact-page{width:min(100%,var(--site-menu-width));max-width:100%}#loader .title-compact-page .account-tabs button{padding:10px 4px}}

.guest-welcome{position:fixed;inset:auto 0 18px;margin:0 auto;width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 36px);overflow:auto;box-sizing:border-box;padding:0;border:1px solid #889269;background:#203229;color:#dfdcc3;box-shadow:0 12px 40px #0008;font:var(--ui-text)/1.45 var(--ui-font);animation:guest-welcome-in .2s ease}
.guest-welcome::backdrop{background:#06110fcc}
.guest-welcome>img{display:block;width:100%;height:140px;object-fit:cover;image-rendering:pixelated}
.guest-welcome .guest-welcome-close{position:absolute;right:8px;top:8px;width:44px;height:44px;min-height:44px;padding:0;background:#203229ed;border:1px solid #a5ac80;box-shadow:none}
.guest-welcome-copy{padding:16px}
.guest-welcome h2{margin:0 0 10px;font:600 var(--ui-title)/1.3 var(--ui-font);color:#eddfb3}
.guest-welcome p{margin:0 0 10px;font:var(--ui-small)/1.5 var(--ui-font)}
.guest-welcome-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.guest-welcome-copy button{width:100%;max-width:none;min-height:44px;padding:8px 4px;border:1px solid #8a956a;background:#4c5c39;box-shadow:none;color:#f0e2b7;font:var(--ui-text)/1.3 var(--ui-font)}
.guest-welcome-copy .guest-welcome-continue{margin-top:8px;background:transparent;border-color:transparent;color:#c2cab1;font-size:var(--ui-small)}
.guest-welcome button:focus-visible{outline:2px solid #efdaa1;outline-offset:-3px}
@keyframes guest-welcome-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:459px){.guest-welcome{bottom:max(10px,env(safe-area-inset-bottom));max-height:calc(100dvh - 24px)}.guest-welcome>img{height:110px}.guest-welcome-copy{padding:14px}}
@media(prefers-reduced-motion:reduce){.guest-welcome{animation:none}}

#title-account-dialog .account-profile{display:grid;gap:12px;min-width:0}
#title-account-dialog .account-profile[hidden]{display:none}
#title-account-dialog .profile-login{margin:0;color:#e6d7ac;overflow-wrap:anywhere}
#title-account-dialog .profile-help{display:block;font:var(--ui-small)/1.4 var(--ui-font);color:#b6c0a6;margin-top:6px}
#title-account-dialog .account-profile button{width:100%;min-height:44px}

#title-account-dialog .profile-flags{min-width:0;margin:0;padding:0;border:0}
#title-account-dialog .profile-flags legend{margin-bottom:8px;font:var(--ui-text)/1.4 var(--ui-font)}
#title-account-dialog .profile-palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
#loader #title-account-dialog .profile-flag{display:grid;place-items:center;width:100%;height:46px;min-width:0;padding:3px;background:#172820;border:1px solid #748466;box-shadow:none}
#loader #title-account-dialog .profile-flag[aria-pressed=true]{border-color:#ffe1a0;background:#53633b;box-shadow:inset 0 0 0 2px #c8b982}
.profile-flag canvas{width:32px;height:32px;image-rendering:pixelated}
#title-account-dialog textarea{box-sizing:border-box;display:block;width:100%;margin-top:6px;resize:vertical;min-height:88px;border:1px solid #7c8b69;background:#111f19;color:#eee0b7;padding:10px;font:var(--ui-text)/1.4 var(--ui-font)}
.profile-stats h3{font:600 var(--ui-title)/1.3 var(--ui-font);color:#e5d5a4;margin:18px 0 10px}
.profile-records,.profile-achievements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.profile-records>div,.profile-achievement{padding:10px;background:#13271f;border:1px solid #71806444;min-width:0}
.profile-records dt{font:var(--ui-small)/1.35 var(--ui-font);color:#b3bea5}
.profile-records dd{margin:6px 0 0;color:#ecdbab;font:600 var(--ui-text)/1.3 var(--ui-font)}
.profile-achievement strong,.profile-achievement span{display:block;font:var(--ui-small)/1.4 var(--ui-font)}
.profile-achievement{color:#a4af9b}.profile-achievement.earned{border-color:#bfae68;background:#394b2e;color:#efdc9c}
#title-account-dialog .account-logout{width:100%;margin-top:18px}
@media(max-width:359px){#title-account-dialog .profile-palette{grid-template-columns:repeat(4,minmax(0,1fr))}}

#loader .guide-touch{display:flex;gap:14px;align-items:flex-start;padding:12px;background:#263b2b;border:1px solid #84916855}
#loader .guide-touch>svg{flex:none;color:#d6c788;margin-top:3px}
#loader .guide-touch h3{margin:0 0 6px;font:600 var(--ui-title)/1.3 var(--ui-font);color:#e7dab2}
#loader .guide-touch p{margin:0;font:var(--ui-text)/1.5 var(--ui-font);color:#c3cbb3}
#loader .guide-touch strong{color:#e6d5a4;font-weight:600}
@media(max-width:459px){#loader .guide-touch{display:block}#loader .guide-touch>svg{display:block;width:60px;height:46px;margin:0 0 8px}}

#loader .guide-grid .guide-touch{display:block;background:#203229;border-color:#84916855}
#loader .guide-grid .guide-touch>svg{display:block;width:72px;height:56px;margin:0 0 10px}
#loader .guide-grid .guide-touch p+p{margin-top:8px}
#loader .guide-settings-link{margin-top:10px}

#loader .title-page-host.title-profile-page{width:min(100%,1000px);max-width:100%;padding:clamp(14px,2vw,20px)}
#loader .title-profile-page #title-account-dialog.profile-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px;max-width:none;align-items:start}
#loader .profile-view>#title-account-heading,#loader .profile-view>.title-auth-result,#loader .profile-view>.account-logout{grid-column:1/-1;margin:0}
#loader .profile-view>.account-profile{grid-column:1;grid-row:2}
#loader .profile-view>.profile-stats{grid-column:2;grid-row:2;min-width:0}
#loader .profile-view .profile-stats h3:first-child{margin-top:0}
#loader .profile-view>.account-logout{margin-top:4px;justify-self:start;width:auto;min-width:160px}
@media(max-width:759px){#loader .title-profile-page #title-account-dialog.profile-view{grid-template-columns:minmax(0,1fr);gap:16px}#loader .profile-view>.account-profile,#loader .profile-view>.profile-stats{grid-column:1;grid-row:auto}#loader .profile-view>.account-logout{width:100%}}

#loader .profile-view>.account-profile{padding:16px;border:1px solid #7c896444;background:#172b225c;box-sizing:border-box;gap:16px}
#loader .profile-view .profile-login{padding-bottom:10px;border-bottom:1px solid #88946c33;color:#c8d0b5}
#loader .profile-icon{display:inline-block;flex:none;vertical-align:middle;margin-right:7px;color:#b2ae79;opacity:.85}
#loader .profile-records dt{display:flex;align-items:center;min-height:24px}
#loader .profile-records>div:last-child{grid-column:1/-1}
#loader .profile-records dd{margin-left:27px}
#loader .profile-achievement strong{display:flex;align-items:center;font-weight:500}
#loader .profile-achievement span{margin-top:6px}
#loader .profile-achievement progress{display:block;appearance:none;border:0;width:100%;height:4px;margin-top:9px;background:#0f2019;color:#89975e}
#loader .profile-achievement progress::-webkit-progress-bar{background:#0f2019}
#loader .profile-achievement progress::-webkit-progress-value{background:#89975e}
#loader .profile-achievement progress::-moz-progress-bar{background:#89975e}
#loader .profile-achievement.earned .profile-icon{color:#e7cf8b;opacity:1}
#loader #title-account-dialog .profile-flag{transition:background .18s,border-color .18s}
#loader #title-account-dialog .profile-flag:hover{background:#35482e}
#loader #title-account-dialog .profile-flag:focus-visible{outline:2px solid #e7ce91;outline-offset:2px}
@media(max-width:759px){#loader .profile-view>.account-profile{padding:12px}#loader .profile-records,#loader .profile-achievements{gap:6px}#loader .profile-records>div,#loader .profile-achievement{padding:9px}}
@media(max-width:359px){#loader .profile-achievements{grid-template-columns:1fr}}

#title-account-dialog .profile-portrait{overflow:hidden;background:#14281f;border:1px solid #7d896044}
#title-account-dialog .profile-portrait canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
#title-account-dialog .profile-portrait>div{padding:10px 12px}
#title-account-dialog .profile-portrait strong{display:block;color:#e5d4a2;font:600 var(--ui-title)/1.3 var(--ui-font);overflow-wrap:anywhere}
#title-account-dialog .profile-portrait p{margin:5px 0;font:var(--ui-small)/1.4 var(--ui-font);color:#b8c4a8}
#title-account-dialog .profile-portrait small{font:var(--ui-small)/1.4 var(--ui-font);color:#d3c495}

/* The account exit sits outside the profile panel, at its lower right edge. */
#loader .title-page-host.title-profile-page{padding:0;background:none;border:0;box-shadow:none}
#loader .title-profile-page #title-account-dialog.profile-view{padding:clamp(14px,2vw,20px);background:#1c2d26f2;border:1px solid #929b7466;box-shadow:0 4px 20px #0b191c33;box-sizing:border-box}
#loader .title-page-host>.account-logout{display:block;width:auto;max-width:100%;min-height:48px;margin:12px 0 0 auto;padding:10px 14px;font:var(--ui-text)/1.35 var(--ui-font)}

#loader #title-version{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:auto;max-width:100%;margin:-8px 0;padding:8px 12px;border:0;background:none;box-shadow:none;color:inherit;font:inherit;cursor:pointer}
#loader #title-version:focus-visible{outline:1px solid #d9c78e;outline-offset:2px}
#loader .title-author-flag{position:fixed;z-index:-1;pointer-events:none;background:#d8c896;color:#293c30;border-right:4px solid #746849;padding:10px 16px 10px 22px;font:700 var(--ui-text)/1.35 var(--ui-font);white-space:nowrap;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 75%,5px 75%,5px 60%,10px 60%,10px 40%,5px 40%,5px 25%,0 25%);animation:title-author-wave .48s steps(2,end) infinite}
@keyframes title-author-wave{0%,100%{transform:skewY(-1deg)}50%{transform:skewY(1deg)}}
@media(prefers-reduced-motion:reduce){#loader .title-author-flag{animation:none}}

/* Wide desktop map; the HUD remains a compact, centred control strip. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view main,.desktop-view main.inside-castle{
  --game-width:min(90vw,1560px,calc(100vw - var(--desktop-side-room)));
  width:var(--game-width);height:min(1000px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);margin:12px auto;
 }
 .desktop-view main>#resources,.desktop-view main>footer{width:min(100%,720px);justify-self:center;margin-left:auto;margin-right:auto}
 .desktop-view main>#world{width:100%;height:100%;min-width:0;min-height:0;max-width:none;justify-self:stretch;grid-column:1/-1}
}

/* Black shelves span the frame; the resource and action controls stay compact. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view main::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#000,#000) top / 100% var(--resource-height) no-repeat,linear-gradient(#000,#000) bottom / 100% var(--action-height) no-repeat}
 .desktop-view main.inside-castle::after{background:linear-gradient(#000,#000) top / 100% var(--resource-height) no-repeat}
 .desktop-view main>#resources,.desktop-view main>footer{background:#000;box-shadow:none}
 .desktop-view main>#resources::before,.desktop-view main>footer::before{background:none}
}

/* Desktop menu and sound controls occupy the left outer rail. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view #desktop-left-tools{left:auto;right:calc(100% + var(--frame-x) + 14px);top:0;padding-top:0;border-top:0;box-shadow:none}
 .desktop-view main>#resources{grid-template-columns:repeat(4,minmax(0,1fr))}
 .desktop-view #resources>#game-menu{display:none}
}
#desktop-menu-toggle{position:relative}
#desktop-menu-toggle.has-update::after{content:"";position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#e4cc84;box-shadow:0 0 0 2px #253029;pointer-events:none}

:root:not(.desktop-view) #desktop-left-tools{display:none}

@media(min-width:760px) and (pointer:fine){
 .desktop-view main>#world{width:var(--pixel-world-width,100%);height:var(--pixel-world-height,100%);justify-self:center;align-self:center}
}

/* Keep the resource strip inside its grid row, overriding old desktop minimums. */
@media(min-width:760px) and (pointer:fine){
 .desktop-view main>#resources{height:var(--resource-height);min-height:0;max-height:var(--resource-height);box-sizing:border-box;align-self:start}
}