/* Emberwatch Rising: the Steward's window, Maelis' stillroom, Hilde's kitchen rows, the fishing panel and the
   tier-up banner. Sizes are in em off one scaled root size, so the windows read the same at 1280x720 and 2560x1440. */
:root { --town-gold:#ebc570; --town-renown:#e8c978; --town-ink:#e5d5b9; --town-dim:#b8ad97; --town-line:#b1935040; }

/* ---------- windows (share the service frame; kept clear of the HUD) ---------- */
.town-modal { padding:16px 16px calc(var(--hud-height, 64px) + 40px); }
.town-modal .town-frame { font-size:calc(16px * var(--ui-zoom, 1)); width:min(46em, calc(100vw - 32px)); max-height:calc(100vh - var(--hud-height, 64px) - 56px); padding:.3em 1.2em .7em; font-family:Georgia, serif; line-height:1.45; }
.town-frame > header { flex-shrink:0; padding:.5em 0 .7em; border-bottom:0; }
.town-frame > header .ui-close { width:calc(42px * var(--ui-zoom, 1)) !important; height:calc(42px * var(--ui-zoom, 1)) !important; }
.town-head { display:flex; align-items:center; gap:.8em; padding-right:3.2em; }
.town-head canvas { width:4.2em; height:4.2em; flex:none; border:2px solid #9a7741; border-radius:50%; background:radial-gradient(circle at 50% 40%, #4a3a26, #140e09 72%); box-shadow:0 0 0 2px #120c07, inset 0 0 10px #000; }
.town-head small { display:block; color:var(--town-dim); font-size:.9em; }
.town-head h2 { margin:.05em 0 0; font:700 1.6em/1.15 Cinzel, Georgia, serif; color:#ffe59b; text-wrap:balance; }
.town-tabs { flex-shrink:0; display:flex; gap:.35em; margin:0; padding:0; border-bottom:1px solid #7e603899; }
.town-tabs button { flex:1; min-height:2.6em; padding:.35em .6em; font:600 1em Cinzel, Georgia, serif; color:#d8c7a2; border:1px solid #7e6038 !important; border-bottom:0 !important; border-radius:.4em .4em 0 0; border-image:none !important; background:linear-gradient(#2c211a, #18110c) !important; cursor:pointer; }
.town-tabs button[aria-selected="true"] { color:#ffe1a0; background:linear-gradient(#5a4125, #2a1d12) !important; box-shadow:inset 0 -3px #d9a74a; }
.town-tabs button:hover { filter:brightness(1.18); }
.town-tabs button:focus-visible, .town-frame button:focus-visible { outline:2px solid #f6d987; outline-offset:2px; }
.town-scroll { padding:1em .6em .2em 0; }
.town-frame section { margin-top:1.3em; padding-top:1em; border-top:1px solid var(--town-line); }
.town-frame section:first-child, .town-frame .town-now { border-top:0; margin-top:.4em; padding-top:0; }
.town-frame h3 { margin:0 0 .4em; font:600 1.1em/1.3 Cinzel, Georgia, serif; color:#efd69c; }
.town-frame p { margin:0 0 .7em; font-size:.97em; color:var(--town-ink); text-wrap:pretty; }
.town-frame .service-intro { color:#d8cbb2; }
.town-frame .service-empty { color:var(--town-dim); font-size:.93em; }
.town-frame > footer { display:flex; align-items:center; gap:1em; margin-top:.9em; padding-top:.6em; border-top:1px solid #b1935055; font-size:.95em; }
.town-frame > footer small { margin-left:auto; color:var(--town-dim); font-size:.85em; }
.town-renown-chip { color:var(--town-renown); }
.town-renown-chip::before { content:'✦ '; }
.town-frame button:not(.ui-close):not([role="tab"]) { min-height:2.5em; padding:.4em 1em; font:1em Georgia, serif; }

/* ---------- Emberwatch tab ---------- */
.town-track { display:grid; grid-template-columns:repeat(5, 1fr); gap:.3em; margin:.2em 0 1.1em; padding:0; list-style:none; counter-reset:none; }
.town-track li { position:relative; display:grid; justify-items:center; gap:.3em; padding:.55em .2em .5em; border:1px solid #5e4628; border-radius:.4em; background:#120d09b0; color:var(--town-dim); font:600 .82em/1.2 Cinzel, Georgia, serif; text-align:center; }
.town-track li b { display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%; border:1px solid #6d5230; color:#cdb88f; font:700 1em Cinzel, Georgia, serif; }
.town-track li.done { color:#cdbb92; border-color:#7d6033; }
.town-track li.done b { background:#5a4125; border-color:#b08a4a; color:#fff0cc; }
.town-track li.now { color:#ffe59b; border-color:#d9a74a; background:linear-gradient(#3d2c18, #1b130b); box-shadow:0 0 12px #e0a8403d, inset 0 0 10px #000; }
.town-track li.now b { background:#d9a74a; border-color:#ffe59b; color:#1b1107; }
.town-next { padding:.6em .8em; background:#6f893b17; box-shadow:inset 3px 0 #9bc999; }
.town-perks { margin:0; padding:0; list-style:none; display:grid; gap:.45em; }
.town-perks li { font-size:.95em; color:var(--town-ink); }
.town-perks b { color:#efd69c; margin-right:.35em; }

/* ---------- Ledger tab ---------- */
.town-icon { flex:none; vertical-align:middle; }
.town-stock { display:grid; grid-template-columns:repeat(auto-fill, minmax(6.4em, 1fr)); gap:.45em; margin:.4em 0 .2em; padding:0; list-style:none; }
.town-stock li { display:grid; justify-items:center; gap:.1em; padding:.5em .3em; border:1px solid #5e4628; border-radius:.4em; background:#120d09b3; text-align:center; }
.town-stock li .town-icon { width:1.9em; height:1.9em; }
.town-stock li b { font:700 1.15em Cinzel, Georgia, serif; color:#fff0cc; font-variant-numeric:tabular-nums; }
.town-stock li span { font-size:.8em; color:var(--town-dim); line-height:1.15; }
.town-stock li.none { opacity:.5; }
.town-grow { margin:0; padding:0; list-style:none; display:grid; gap:.5em; }
.town-grow li { display:grid; grid-template-columns:minmax(9em, 1.2fr) 2fr 4.2em; align-items:center; gap:.8em; }
.town-grow-name { display:grid; font-size:.95em; }
.town-grow-name small { color:var(--town-dim); font-size:.82em; }
.town-bar { position:relative; height:.8em; border:1px solid #6d5230; border-radius:.4em; background:#0b0806; overflow:hidden; }
.town-bar i { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg, #5d8a3a, #b7d46a); }
.town-grow-time { text-align:right; font-variant-numeric:tabular-nums; color:#d8c9a4; }
.town-grow-time b { color:#bfe3a0; }

/* ---------- Projects tab ---------- */
.town-project { margin:0 0 .8em; padding:.8em 1em .9em; border:1px solid #5e4628; border-radius:.5em; background:linear-gradient(#1a130dcc, #0f0b08cc); }
.town-project.built { border-color:#8a6a38; }
.town-project { display:grid; grid-template-columns:11em minmax(0, 1fr); gap:1em; align-items:start; }
.town-project-body { min-width:0; }
.town-project-body > header { display:flex; align-items:center; justify-content:space-between; gap:1em; }
.town-project h3 { margin:0; }
.town-pips { display:flex; gap:.3em; }
.town-pips i { width:.9em; height:.9em; transform:rotate(45deg); border:1px solid #9a7741; background:#140e09; }
.town-pips i.on { background:linear-gradient(135deg, #ffe59b, #c98f2e); box-shadow:0 0 6px #e8b85a88; }
.town-project-body > p { margin:.4em 0 .5em; }
/* The project's picture: its own art composed from the town plan (or painted art once it exists), in a framed well. */
.town-pic-col { display:grid; gap:.45em; }
.town-pic { position:relative; margin:0; aspect-ratio:4 / 3; overflow:hidden; border:1px solid #9a7741; border-radius:.4em; background:radial-gradient(ellipse at 50% 38%, #4a3a26, #1c140d 62%, #0d0906); box-shadow:0 0 0 2px #120c07, inset 0 0 1.2em #000c; }
.town-pic canvas { display:block; width:100%; height:100%; }
.town-pic figcaption { position:absolute; left:0; right:0; bottom:0; padding:.9em .5em .25em; font:600 .72em/1.2 Cinzel, Georgia, serif; letter-spacing:.04em; color:#f1d898; text-align:center; background:linear-gradient(#0d090600, #0d0906e6 70%); pointer-events:none; }
.town-pic-next { aspect-ratio:2 / 1; border-color:#6d5230; }
.town-pic-next figcaption { color:#ffcf73; }
.town-pic-mini { flex:none; width:3.6em; aspect-ratio:4 / 3; border-radius:.3em; box-shadow:0 0 0 1px #120c07, inset 0 0 .5em #000c; }
.town-perks .town-perk-built { display:flex; align-items:center; gap:.7em; }
@media (max-width:700px) { .town-project { grid-template-columns:1fr; } .town-pic-col { grid-template-columns:repeat(auto-fit, minmax(8em, 1fr)); } .town-pic-next { aspect-ratio:4 / 3; } }
.town-have { color:#bfe3a0 !important; font-size:.92em !important; }
.town-next-level { padding-top:.5em; border-top:1px dashed #6d523066; }
.town-next-level p { margin-bottom:.45em; }
.town-costs { display:flex; flex-wrap:wrap; gap:.35em; margin:.2em 0 .5em; }
.town-cost { display:inline-flex; align-items:center; gap:.3em; padding:.2em .55em; border:1px solid #6d5230; border-radius:1em; background:#0d0906; color:#e8dcc0; font-size:.86em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.town-cost .town-icon { width:1.15em; height:1.15em; }
.town-cost.short { border-color:#9a4a3c; color:#ff9a86; background:#2a0f0b; }
.town-dot { display:inline-block; width:.7em; height:.7em; border-radius:50%; background:#aaa; box-shadow:0 0 0 1px #0008; }
.town-dot-gold { background:radial-gradient(circle at 35% 35%, #fff2b0, #d9a21e); }
.town-dot-renown { background:radial-gradient(circle at 35% 35%, #fff6d8, #e8c978); transform:rotate(45deg); border-radius:1px; }
.town-dot-ember_dust { background:#ff9a3c; }
.town-dot-ember_shard { background:#ff5a3a; transform:rotate(45deg); border-radius:1px; }
.town-dot-ember_core { background:radial-gradient(circle at 35% 35%, #fff4c4, #ffd05a); box-shadow:0 0 5px #ffd05a; }
.town-build { display:flex; align-items:center; justify-content:flex-end; gap:.8em; }
.town-build small { color:#d9a88a; font-size:.86em; }

/* ---------- Renown tab ---------- */
.town-renown-head { display:flex; justify-content:space-between; align-items:baseline; gap:1em; padding:.6em .8em; border:1px solid #6d5230; border-radius:.5em; background:#120d09cc; }
.town-renown-head b { font:700 1.6em Cinzel, Georgia, serif; color:var(--town-renown); font-variant-numeric:tabular-nums; }
.town-renown-head span:last-child { color:var(--town-dim); font-size:.9em; }
.town-donate { display:flex; flex-wrap:wrap; gap:.5em; }
.town-log { margin:0; padding:0; list-style:none; display:grid; gap:.3em; font-size:.93em; }
.town-log b { display:inline-block; min-width:3em; color:var(--town-renown); font-variant-numeric:tabular-nums; }

/* ---------- Hilde's kitchen rows inside the tavern window ---------- */
.town-kitchen .service-option > div { display:grid; gap:.1em; }
.town-kitchen .town-costs, .service-option .town-costs { margin:.35em 0 0; font-size:14px; }
.service-option .town-cost .town-icon { width:16px; height:16px; }

.town-forge-perk { margin:8px 0 0 !important; padding:8px 12px !important; color:#e8d4a0 !important; background:#8f512526 !important; box-shadow:inset 3px 0 #d9a74a; font-size:14px; }

/* ---------- the tier-up moment ---------- */
body.town-moment #ui::before, body.town-moment #ui::after { content:''; position:fixed; left:0; right:0; height:8vh; z-index:40; background:#000; pointer-events:none; animation:town-bars .5s ease-out both; }
body.town-moment #ui::before { top:0; }
body.town-moment #ui::after { bottom:0; }
body.town-moment #hud, body.town-moment #minis, body.town-moment #playerCard, body.town-moment #buffs, body.town-moment #hirelingCard, body.town-moment #questUI .quest-panel, body.town-moment #msgs { opacity:0; transition:opacity .4s; }
body.town-moment #areaTitle, body.town-moment #discoveryStack, body.town-moment #banner { visibility:hidden; }
@keyframes town-bars { from { transform:scaleY(0); } to { transform:scaleY(1); } }
.town-rise { position:fixed; z-index:45; top:14vh; left:50%; width:min(44em, calc(100vw - 32px)); box-sizing:border-box; transform:translateX(-50%); padding:1em 1.6em 1.2em; font-size:calc(15px * var(--ui-zoom, 1)); text-align:center; pointer-events:none; opacity:0; border-top:1px solid #d9a74a88; border-bottom:1px solid #d9a74a88; background:linear-gradient(90deg, transparent, #120d08f0 14%, #120d08f0 86%, transparent); box-shadow:0 1em 2.4em #0009; transition:opacity .5s, transform .5s; }
.town-rise.show { opacity:1; }
.town-rise small { display:block; color:#ffd45ad1; font:700 .8em Cinzel, Georgia, serif; letter-spacing:.2em; }
.town-rise strong { display:block; margin:.15em 0 .25em; color:#ffd45a; font:700 2.6em/1.1 Cinzel, Georgia, serif; text-shadow:0 0 18px #ff8a2a66, 0 2px 3px #000; text-wrap:balance; }
.town-rise span { color:#e8dcc0; font-size:1.05em; text-wrap:balance; }
.town-rise.small strong { font-size:1.9em; }
.town-rise.small { display:flex; align-items:center; justify-content:center; gap:1.2em; }
.town-rise .town-pic-rise { flex:none; width:8.5em; }
@media (prefers-reduced-motion: reduce) { .town-rise, body.town-moment #ui::before, body.town-moment #ui::after { transition:none; animation:none; } }

/* ---------- fishing ---------- */
.town-fishing { position:fixed; z-index:42; left:50%; bottom:calc(var(--hud-height, 64px) + 36px); width:min(38em, calc(100vw - 32px)); box-sizing:border-box; transform:translateX(-50%); padding:.6em 1em .8em; font:calc(15px * var(--ui-zoom, 1))/1.4 Georgia, serif; color:var(--town-ink); pointer-events:auto; border:1px solid #9a7741; border-radius:.6em; background:linear-gradient(#20170fef, #0d0906f5); box-shadow:0 1em 2em #000b, inset 0 0 0 2px #0a0705; }
.town-fishing header { display:flex; align-items:center; justify-content:space-between; gap:1em; }
.town-fishing header small { color:var(--town-dim); font-size:.85em; }
.town-fishing h2 { margin:0; font:700 1.35em Cinzel, Georgia, serif; color:#ffe59b; }
.town-fishing .ui-close { width:calc(40px * var(--ui-zoom, 1)) !important; height:calc(40px * var(--ui-zoom, 1)) !important; }
.town-fishing canvas { display:block; width:100%; height:auto; margin:.35em 0 .35em; border:1px solid #3b5a64; border-radius:.35em; cursor:pointer; }
.town-fish-hint { min-height:2.8em; margin:0 0 .2em; color:#e8dcc0; font-size:.95em; line-height:1.35; text-wrap:pretty; }
.town-fishing footer { display:flex; align-items:center; justify-content:space-between; gap:1em; font-variant-numeric:tabular-nums; }
.town-fishing footer span { display:flex; align-items:center; gap:.4em; flex-wrap:wrap; color:#d8c9a4; }
.town-fishing footer .town-icon { width:1.2em; height:1.2em; margin-left:.3em; }
.town-fishing footer button { min-height:2.5em; padding:.4em 1.1em; font:1em Georgia, serif; }
@media (max-width:700px) { .town-grow li { grid-template-columns:1fr 1fr 3.4em; } .town-track li { font-size:.7em; } }