/* UI contract: book + advisor + cloth flag. Resource slots and the wheel share an ImageGen rail. Never replace these objects with flat dashboard cards. */
:root {
 --book-width:320px; --banner-width:370px; --banner-height:190px;
 --banner-center:calc(50% - 120px);
}
#hudRail { display:none; }
#hud {
 left:var(--banner-center); bottom:calc(8px + var(--hud-bottom));
 width:var(--banner-width); height:var(--banner-height); min-height:0;
 padding:35px 32px 31px; border:0; border-radius:0;
 background-image:url('assets/ui/stats-banner58.png'); background-position:center;
 background-size:100% 100%; background-repeat:no-repeat;
 box-shadow:none; pointer-events:none;
}
#hud #bannerContext,#hud #adviceSlot { max-width:none; padding:0; font-size:14px; line-height:1.35; }
#hud #advisorCopy { max-height:none; overflow:visible; }
#hud #advisorText,#hud #toast { margin:0; font-size:14px; line-height:1.35; -webkit-line-clamp:4; }
#hud #advisorHeading { font:700 14px/1.2 Georgia,serif; margin-bottom:7px; }
#hud #worldAction { gap:6px; }
#hud #sceneTitle { font:700 15px/1.2 Georgia,serif; color:#ffe8b5; -webkit-line-clamp:2; }
#hud #sceneReceipt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:1.25; }
#hud #sceneActions { flex-direction:row; gap:6px; margin-top:5px; }
#hud #sceneActions button {
 pointer-events:auto; min-height:44px; min-width:44px; padding:5px 8px;
 border:1px solid #cfaf7466; border-radius:3px; background:#3a182449;
 color:#fff0c7; font:13px/1.2 Georgia,serif;
 box-shadow:inset 0 1px 1px #ffdca329,0 1px 2px #20130d55;
}
#hud #sceneActions button:disabled { opacity:.65; }
#hud #sceneProgress { width:100%; height:5px; }
#advisor {
 left:calc(var(--banner-center) + var(--banner-width)/2 - 12px);
 right:auto; bottom:calc(-5px + var(--hud-bottom)); width:var(--book-width); height:var(--book-width);
}
#advisor #advisorArt { inset:0; width:100%; height:100%; overflow:visible; z-index:-1; }
#advisor #advisorArt img { inset:0; width:100%; height:100%; object-fit:contain; }
#advisor .book-page { top:50%; width:30%; height:40%; gap:3px; overflow:hidden; font-size:13px; }
#advisor #bookLeft { left:18%; }
#advisor #bookStatus { left:53%; }
#advisor #bookSummaryLeft,#advisor #bookSummaryRight { gap:2px; height:100%; }
#advisor .book-caption,#advisor #bookHero { display:none; }
#advisor #bookAdvice { display:block; font:700 13px/1.2 Georgia,serif; flex-shrink:0; }
#advisor #bookWorkers { min-height:44px; flex-shrink:0; font-size:13px; line-height:1.2; }
#advisor #advisorJournal { min-height:44px; margin-top:auto; font-size:13px; }
#advisor #bookTown,#advisor #bookRelics { display:block; min-height:44px; width:100%; padding:0; color:inherit; font:13px/1.2 Georgia,serif; border:0; background:none; pointer-events:auto; text-align:left; }
#advisor #bookToggle {
 left:calc(50% - 22px); top:40%; bottom:auto; right:auto;
 width:44px; height:44px; min-height:44px; padding:0; border:0; background:none;
 font:12px Georgia,serif;
}
#advisor #bookToggle span { width:18px; height:34px; font-size:14px; }
#advisor #interactionDoor {
 left:auto; right:0; bottom:56%; width:27%; height:40%; z-index:3;
}
#advisor #interactionDoor span { font-size:11px; padding:5px 2px; left:0; right:0; }
#villageHud>#walletButton {
 left:calc(var(--banner-center) - var(--banner-width)/2 - 72px);
 bottom:calc(12px + var(--hud-bottom)); width:78px; height:78px;
}
#walletButton #money { left:15%; top:85%; width:70%; font-size:20px; }
/* The rail is an ImageGen sprite, not a CSS approximation. All ink occupies
   measured empty slots in the same source atlas. See docs/v92/UI-CONTRACT.md.
   The 2172x724 original has its main silhouette at y187..574. The viewport
   trims transparent margins in CSS; original generated pixels stay intact. */
:root {
 --status-rail-width:480px; --status-rail-ratio:2172 / 387;
 --status-ink:#412919; --status-label-ink:#705037;
 --status-value-font:700 16px/1 Georgia,serif;
 --status-label-font:10px/1 Georgia,serif;
 --status-clock-font:10px/1 Georgia,serif;
 --rail-slot-top:22%; --rail-slot-height:31%; --rail-slot-width:9.3%;
 --rail-wood-x:10.2%; --rail-stone-x:27.5%; --rail-people-x:68.75%; --rail-beds-x:85.75%;
 --rail-wheel-x:40.6%; --rail-wheel-top:5%; --rail-wheel-width:18.8%;
}
#resourcePanel {
 position:fixed; z-index:7; left:50%; top:max(8px,env(safe-area-inset-top));
 transform:translateX(-50%); width:var(--status-rail-width);
 max-width:calc(100vw - 128px); aspect-ratio:var(--status-rail-ratio);
 display:block; overflow:hidden; padding:0; border:0; border-radius:0;
 background:none; background-image:none; box-shadow:none; color:var(--status-ink);
 pointer-events:none; white-space:nowrap; user-select:none;
}
#resourcePanel .resource-art {
 position:absolute; left:0; top:-48.32%; width:100%; height:auto;
 max-width:none; pointer-events:none;
}
#resourcePanel .resource-counter {
 position:absolute; top:var(--rail-slot-top); width:var(--rail-slot-width); height:var(--rail-slot-height);
 display:flex; flex-direction:column; justify-content:center; align-items:center;
 gap:2px; overflow:hidden; font-variant-numeric:tabular-nums;
}
#resourcePanel [data-slot=wood] { left:var(--rail-wood-x); }
#resourcePanel [data-slot=stone] { left:var(--rail-stone-x); }
#resourcePanel [data-slot=people] { left:var(--rail-people-x); }
#resourcePanel [data-slot=beds] { left:var(--rail-beds-x); width:8.5%; }
#resourcePanel .resource-label { color:var(--status-label-ink); font:var(--status-label-font); }
#resourcePanel .resource-counter b { font:var(--status-value-font); }
#resourcePanel #dayClock {
 position:absolute; left:var(--rail-wheel-x); top:var(--rail-wheel-top); width:var(--rail-wheel-width); aspect-ratio:2 / 1;
 transform:none; text-align:center; color:var(--status-ink); text-shadow:none;
 pointer-events:none;
}
#resourcePanel #dayClock .dial-viewport {
 position:relative; width:100%; height:100%; aspect-ratio:2 / 1;
 overflow:hidden; border-radius:0;
}
#resourcePanel #dayClock .dial-crop {
 position:relative; margin:0; width:100%; height:auto; aspect-ratio:1;
 overflow:visible; border-radius:50%; transform:translateY(-50%); filter:none;
}
#resourcePanel #dayClock #dayWheel {
 inset:0; width:100%; height:100%; transform-origin:50% 50%;
 transform:rotate(var(--wheel-rotation,180deg))!important;
}
#resourcePanel #dayClock .dial-needle {
 position:absolute; top:auto; bottom:0; left:calc(50% - 3px);
 width:0; height:0; background:none; border:0; border-left:3px solid transparent;
 border-right:3px solid transparent; border-bottom:5px solid #d1a25b;
 transform:none; box-shadow:none; filter:drop-shadow(0 1px 1px #412919);
}
#resourcePanel #dayClock .dial-needle:after { display:none; }
#dayClock .clock-caption {
 position:absolute; top:113%; left:10%; width:80%; height:33%;
 display:flex; align-items:center; justify-content:center; gap:3px;
 font:var(--status-clock-font); font-variant-numeric:tabular-nums;
}
#resourcePanel #clockDay,#resourcePanel #clockTime {
 display:inline; margin:0; font:inherit; line-height:1;
}
#resourcePanel #clockTime { font-weight:700; }
#mapTools { top:calc(max(8px,env(safe-area-inset-top)) + 104px); }
@media(max-width:1024px) {
 header .buttons>#overview,header .buttons>#settings {
  position:fixed; top:max(12px,env(safe-area-inset-top)); width:44px;
  min-width:44px; height:44px; padding:10px;
 }
 header .buttons>#overview { left:12px; }
 header .buttons>#settings { right:12px; }
 header .buttons>#overview span,header .buttons>#settings span { display:none; }
}
@media(max-width:600px) {
 #resourcePanel { top:calc(max(8px,env(safe-area-inset-top)) + 50px); max-width:calc(100vw - 16px); }
 #resourcePanel .resource-label { display:none; }
 #resourcePanel .resource-counter b { font-size:14px; }
 #resourcePanel #clockTime { display:none; }
 #dayClock .clock-caption { font-size:11px; }
 #mapTools { top:calc(max(8px,env(safe-area-inset-top)) + 142px); }
}
button:focus-visible { outline:2px solid #f3d18c; outline-offset:2px; }
@media(max-width:760px) {
 :root { --book-width:244px; --banner-width:calc(100vw - 218px); --banner-height:204px; --banner-center:calc(12px + var(--banner-width)/2); }
 #hud { padding:33px 21px 30px; }
 #hud #advisorText,#hud #toast { font-size:12px; -webkit-line-clamp:6; }
 #hud #sceneTitle { font-size:13px; }
 #hud #sceneReceipt { font-size:12px; -webkit-line-clamp:3; }
 #hud #sceneActions { flex-direction:column; gap:4px; }
 #hud #sceneActions button { font-size:12px; padding:3px; }
 #advisor { left:auto; right:-10px; }
 #advisor .book-page { top:50%; height:42%; font-size:12px; }
 #advisor #bookAdvice { font-size:12px; }
 #advisor #bookWorkers,#advisor #advisorJournal,#advisor #bookTown,#advisor #bookRelics { font-size:12px; }
 #advisor #bookAdvice { display:none; }
 #villageHud>#walletButton { left:12px; bottom:calc(var(--banner-height) + 6px + var(--hud-bottom)); width:60px; height:60px; }
 #walletButton #money { font-size:18px; }
 #dock { left:auto; right:12px; bottom:calc(var(--book-width) + 4px + var(--hud-bottom)); }
}
@media(max-width:370px) {
 :root { --book-width:218px; --banner-width:calc(100vw - 194px); --banner-height:216px; }
 #advisor .book-page { height:44%; }
 #hud { padding-left:19px; padding-right:19px; }
}
@media(max-height:520px) and (min-width:761px) {
 :root { --book-width:250px; --banner-height:164px; --banner-width:350px; --banner-center:calc(50% - 88px); }
 #hud { padding:30px 30px 25px; }
 #hud #advisorText,#hud #toast { -webkit-line-clamp:3; }
 #advisor #bookAdvice { display:none; }
}