/* ═══════════════════════════════════════════════════════════════════════════
   Till Dawn — interface.
   A night-camp look: deep blue-black glass plates with bronze trim, amber light, serif titles.
   Everything is sized in cqw (1% of the phone's width) so it scales with the screen.
   Layout:  top card (resources · fire · clock · speed · menu)   right edge (minimap + camera tools)
            notices (stacked toasts)   bottom: quest coach · selection card · dock   sheets slide over the map
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --s0: #07090d; --s1: #0d131b; --s2: #141c27; --s3: #1c2735; --s4: #263548; --line: #2c3b4e; --line2: #1d2a39;
  --ink: #f4edd9; --ink2: #d3cbb6; --mute: #92a0ac; --dim: #667380;
  --gold: #f6c65c; --gold2: #ffe8ac; --bronze: #b98a44; --bronze2: #7a5a28; --ember: #ff8f3c;
  --good: #7ed36a; --warn: #f6b84a; --bad: #f2584b; --mind: #92a0ff; --blue: #6fb9ff;
  --serif: Constantia, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Noto Serif", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --dock-h: 12.6cqw;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--s0); color: var(--ink); font-family: var(--sans); overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible { outline: .5cqw solid var(--gold); outline-offset: .3cqw; }
.uic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; display: block; }

#stage { position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 28%, #16263a 0%, #0a1018 55%, #05070b 100%); }
#stage::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(1px 1px at 12% 20%, #fff8 50%, transparent), radial-gradient(1px 1px at 82% 12%, #fff6 50%, transparent), radial-gradient(1.4px 1.4px at 28% 74%, #ffe2a088 50%, transparent),
    radial-gradient(1px 1px at 70% 62%, #fff5 50%, transparent), radial-gradient(1.2px 1.2px at 92% 84%, #fff6 50%, transparent), radial-gradient(1px 1px at 6% 52%, #fff5 50%, transparent); }
/* THE SCREEN. The world canvas fills the whole window, edge to edge (game.js fitView() sizes it); the interface sits in a centred column, #phone, at most 720:1264 wide:
   the whole width of a phone, a phone-shaped strip in the middle of a desktop window. Empty parts of the column let taps through to the canvas. */
#phone { position: absolute; container-type: inline-size; overflow: hidden; left: max(0px, calc((100vw - min(100vw, 56.96vh)) / 2)); top: 0; width: min(100vw, 56.96vh); height: 100%;
  background: transparent; pointer-events: none; font-size: 3.2cqw; }
:where(#phone) > * { pointer-events: auto; }
#cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; touch-action: none; }
#safe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))); padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)); }
#fx-vignette, #fx-danger { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .8s; }
#fx-vignette { background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(3,6,18,.55) 100%); }
#fx-danger { background: radial-gradient(ellipse at 50% 46%, transparent 48%, rgba(220,30,20,.55) 100%); animation: dangerPulse 1.3s ease-in-out infinite; }
@keyframes dangerPulse { 50% { filter: brightness(1.5); } }

/* ───────── the building block: a plate (glass panel with bronze trim) ───────── */
.plate { position: relative; border-radius: 2.4cqw;
  background:
    radial-gradient(circle at 1.3cqw 1.3cqw, rgba(255,222,150,.9) .22cqw, transparent .5cqw),
    radial-gradient(circle at calc(100% - 1.3cqw) 1.3cqw, rgba(255,222,150,.9) .22cqw, transparent .5cqw),
    radial-gradient(circle at 1.3cqw calc(100% - 1.3cqw), rgba(255,222,150,.9) .22cqw, transparent .5cqw),
    radial-gradient(circle at calc(100% - 1.3cqw) calc(100% - 1.3cqw), rgba(255,222,150,.9) .22cqw, transparent .5cqw),
    linear-gradient(180deg, rgba(27,36,49,.95) 0%, rgba(12,18,26,.97) 100%);
  box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .62cqw rgba(185,138,68,.55), inset 0 .3cqw 0 rgba(255,232,180,.13), inset 0 -.6cqw 1.2cqw rgba(0,0,0,.4), 0 1.4cqw 3.6cqw rgba(0,0,0,.55); }

/* ───────── round and pill buttons ───────── */
.rbtn { width: 9.6cqw; height: 9.6cqw; border-radius: 50%; display: grid; place-items: center; font-size: 5cqw; color: var(--gold2); position: relative;
  background: radial-gradient(circle at 50% 28%, #2b394d 0%, #151e2b 70%); box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw rgba(185,138,68,.6), inset 0 .3cqw 0 rgba(255,232,180,.18), 0 .7cqw 1.4cqw rgba(0,0,0,.5); }
.rbtn:active { transform: translateY(.3cqw); filter: brightness(1.25); }
.rbtn.sm { width: 8.4cqw; height: 8.4cqw; font-size: 4.3cqw; }
.rbtn.txt { font-size: 2.6cqw; font-weight: 700; letter-spacing: -.02em; }
.rbtn:disabled { opacity: .35; }
.rbtn.muted { color: var(--dim); }
.pill-btn { display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.1cqw 3cqw 1.1cqw 2.2cqw; border-radius: 6cqw; font-size: 3cqw; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, rgba(31,41,56,.95), rgba(14,20,29,.96)); box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .55cqw var(--bronze2), 0 .8cqw 1.6cqw rgba(0,0,0,.5); }
.pill-btn[hidden] { display: none; }
.pill-btn .uic { font-size: 4.2cqw; }
.pill-btn .more { background: rgba(255,255,255,.14); border-radius: 3cqw; padding: .1cqw 1.3cqw; font-size: 2.4cqw; }
.pill-btn.lv0 { color: var(--gold2); }
.pill-btn.lv1 { color: #ffd98a; box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .55cqw #a87a22, 0 .8cqw 1.6cqw rgba(0,0,0,.5); }
.pill-btn.lv2 { color: #ffc2b8; box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .55cqw var(--bad), 0 0 3cqw rgba(242,88,75,.35); animation: alertGlow 1.2s ease-in-out infinite; }
@keyframes alertGlow { 50% { box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .55cqw var(--bad), 0 0 5cqw rgba(242,88,75,.7); } }

/* ═════ top HUD ═════ */
#hud { position: absolute; left: 2.6cqw; right: 2.6cqw; top: 2cqw; z-index: 4; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud-card { padding: 1.2cqw 1.8cqw 1.3cqw; }
#resbar { display: flex; gap: 1.2cqw; justify-content: space-between; }
.res { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 1.2cqw; padding: .6cqw 1cqw; border-radius: 2cqw; position: relative;
  background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.06), inset 0 .3cqw .8cqw rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }
.res img { width: 5.2cqw; height: 5.2cqw; image-rendering: pixelated; flex: none; }
.res b { font-size: 3.7cqw; font-weight: 700; text-shadow: 0 .3cqw 0 rgba(0,0,0,.6); }
.res small { font-size: 2.2cqw; color: var(--mute); letter-spacing: 0; pointer-events: none; white-space: nowrap; font-weight: 600; }
.res.low small { color: #ff9a8a; }
.res .duo { display: flex; gap: .2cqw; flex: none; }
.res .duo img { width: 4.2cqw; height: 4.2cqw; }
.res.tier2 { display: none; } .res.tier2.on { display: flex; }
.res.low b { color: var(--bad); animation: lowBlink 1.4s ease-in-out infinite; }
@keyframes lowBlink { 50% { opacity: .55; } }
.res.bump b { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.3); color: var(--gold); } }
.res .delta { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-size: 2.8cqw; font-weight: 800; pointer-events: none; animation: deltaUp 1.3s ease-out forwards; text-shadow: 0 .3cqw 0 #000; white-space: nowrap; z-index: 3; }
.res .delta.up { color: var(--good); } .res .delta.down { color: #ff9a7a; }
@keyframes deltaUp { 0% { opacity: 0; transform: translate(-50%, -1cqw); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 3cqw); } }

#hud-row { display: flex; align-items: center; gap: 2cqw; margin-top: 1.6cqw; }
#fire { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.4cqw; }
#fire-ico { font-size: 6.4cqw; color: var(--ember); filter: drop-shadow(0 0 1.2cqw rgba(255,140,50,.7)); animation: flicker 1.1s ease-in-out infinite; flex: none; }
#fire.low #fire-ico { color: var(--bad); filter: drop-shadow(0 0 1.4cqw rgba(255,60,50,.8)); }
#fire.out #fire-ico { color: var(--dim); filter: none; animation: none; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 35% { transform: scale(1.07, .96) rotate(2deg); } 70% { transform: scale(.96, 1.06) rotate(-1deg); } }
#fuel-wrap { flex: 1; position: relative; min-width: 0; }
#fuel { height: 4.6cqw; display: grid; grid-template-columns: repeat(14, 1fr); gap: .45cqw; padding: .7cqw; background: rgba(0,0,0,.5); border-radius: 1.4cqw; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.08); }
#fuel i { background: #1d2733; border-radius: .3cqw; }
#fuel i.on { background: linear-gradient(#ffe48a, #f59a22 70%, #d46a12); box-shadow: 0 0 .9cqw rgba(255,160,40,.55); }
#fuel.low i.on { background: linear-gradient(#ffb09a, #ee4a3a); box-shadow: 0 0 .9cqw rgba(255,70,50,.7); }
#fuel-pct { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 2.6cqw; font-weight: 800; color: #fff; text-shadow: 0 0 .6cqw #000, 0 .2cqw 0 #000, 0 0 1.4cqw #000; font-variant-numeric: tabular-nums; pointer-events: none; }
#clock { flex: 1.1; min-width: 0; display: flex; align-items: center; gap: 1.8cqw; }
#clock-ring { --p: .3; width: 9.6cqw; height: 9.6cqw; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--gold) calc(var(--p) * 1turn), rgba(255,255,255,.1) 0); }
#clock-ring::before { content: ""; position: absolute; inset: .9cqw; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #243348, #0d141d); box-shadow: inset 0 0 0 .3cqw rgba(0,0,0,.6); }
#clock-ico { position: relative; font-size: 5.2cqw; color: var(--gold); }
#clock.night #clock-ring { background: conic-gradient(#7d8dff calc(var(--p) * 1turn), rgba(255,255,255,.1) 0); }
#clock.night #clock-ico { color: #b5c0ff; }
#clock-txt { display: grid; line-height: 1.12; min-width: 0; }
#day-label { font-family: var(--serif); font-size: 4.3cqw; letter-spacing: .07em; color: var(--gold2); text-shadow: 0 .3cqw 0 #000; white-space: nowrap; }
#phase-sub { font-size: 2.4cqw; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clock.night #day-label { color: #c9d1ff; }
#btn-speed { font-size: 3cqw; letter-spacing: 0; }
#btn-pause.paused { color: #1a1205; background: radial-gradient(circle at 50% 28%, #ffe28a, #e7a93a 80%); animation: pulseglow 1.2s ease-in-out infinite; }
#hud-sub { margin-top: 2.2cqw; display: flex; }

/* ═════ right edge: minimap + camera tools ═════ */
#tools { position: absolute; right: 2.6cqw; top: 31cqw; z-index: 3; display: grid; justify-items: end; gap: 2.2cqw; pointer-events: none; transition: opacity .7s; }
#tools.idle { opacity: .3; }
#tools > * { pointer-events: auto; }
#minimap-wrap { width: 18cqw; overflow: hidden; padding: 0; border-radius: 1.8cqw; touch-action: none; background: #0a1018; }
#minimap { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: pointer; border-radius: 1.6cqw; }
#toolbtns { display: grid; gap: 2cqw; justify-items: end; }

/* ═════ notices (stacked toasts) ═════ */
#notices { position: absolute; left: 2.6cqw; top: 38cqw; z-index: 9; display: grid; gap: 1.6cqw; width: 70cqw; pointer-events: none; justify-items: start; }
.notice { display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 3.4cqw 1.6cqw 2.2cqw; border-radius: 4cqw; font-size: 3.1cqw; line-height: 1.3; max-width: 100%;
  background: linear-gradient(180deg, rgba(29,39,54,.97), rgba(12,17,25,.98)); box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw var(--bronze2), 0 1.2cqw 3cqw rgba(0,0,0,.6);
  animation: noticeIn .35s cubic-bezier(.2,.9,.3,1.2) both; }
.notice .uic { font-size: 4.6cqw; color: var(--gold); flex: none; }
.notice.bad { box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw var(--bad), 0 1.2cqw 3cqw rgba(0,0,0,.6); } .notice.bad .uic { color: var(--bad); }
.notice.good .uic { color: var(--good); }
.notice.agent { cursor: pointer; pointer-events: auto; color: #d8deff; box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw #4a5fa8, 0 1.2cqw 3cqw rgba(0,0,0,.6); }
.notice.agent.ask { box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw var(--gold), 0 0 3cqw rgba(246,198,92,.4); color: var(--gold2); }
.notice.agent img { width: 8cqw; height: 8cqw; border-radius: 50%; image-rendering: pixelated; flex: none; background: #0a1020; box-shadow: 0 0 0 .3cqw #4a5fa8; }
.notice.agent b { color: #fff; }
.notice.out { animation: noticeOut .4s ease forwards; }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-3cqw) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes noticeOut { to { opacity: 0; transform: translateY(-2cqw) scale(.96); } }

#pause-badge { position: absolute; left: 50%; top: 48cqw; transform: translateX(-50%); z-index: 5; display: grid; justify-items: center; gap: .2cqw; padding: 1.6cqw 6cqw;
  border-radius: 4cqw; font-family: var(--serif); font-size: 4.6cqw; letter-spacing: .3em; color: var(--gold2); text-indent: .3em;
  background: rgba(8,12,18,.78); box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw var(--bronze2), 0 1.2cqw 3cqw rgba(0,0,0,.5); backdrop-filter: blur(2px); }
#pause-badge small { font-family: var(--sans); font-size: 2.3cqw; letter-spacing: .1em; color: var(--mute); text-indent: 0; }
#pause-badge[hidden] { display: none; }

#banner { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: calc(var(--dock-h) + 5.4cqw); z-index: 7; display: flex; align-items: center; gap: 2cqw; padding: 2cqw 2.4cqw 2cqw 3.6cqw; font-size: 3.3cqw; }
#banner[hidden] { display: none; }
#banner-text { flex: 1; color: var(--gold2); font-weight: 600; }
#banner button { border-radius: 2cqw; font-weight: 700; padding: 1.5cqw 3.6cqw; font-size: 3.1cqw; background: linear-gradient(#ffd77a, #e3a63a); color: #1a1205; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.5), 0 .4cqw 0 #6a4710; }
#banner button[hidden] { display: none; }
#banner #banner-break, #banner #banner-erase { background: linear-gradient(#27323f, #18212c); color: var(--gold2); box-shadow: inset 0 0 0 .3cqw var(--bronze2); }
#banner #banner-erase.on { background: linear-gradient(#ff8c7c, #d6382c); color: #fff; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.4); }

/* ═════ bottom: coach, selection card, dock ═════ */
#hud-bottom { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: 2.4cqw; z-index: 6; display: grid; gap: 2.6cqw; pointer-events: none; }
#hud-bottom > * { pointer-events: auto; }
#dock { display: grid; grid-template-columns: repeat(6, 1fr); padding: 1cqw 1cqw 1.2cqw; gap: .4cqw; height: var(--dock-h); align-items: stretch; }
.dk { position: relative; display: grid; justify-items: center; align-content: center; gap: .7cqw; border-radius: 1.8cqw; color: var(--ink2); transition: color .15s, background .15s; }
.dk-ico { font-size: 6.4cqw; line-height: 0; display: block; transition: transform .15s; }
.dk-lbl { font-size: 2.35cqw; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.dk:not(.active):not(.main) .dk-lbl { display: none; }                      /* clean dock: icons only, and the open one names itself */
#phone.learning .dk .dk-lbl { display: block; }                               /* ...until the first game's tutorial is done */
.dk:not(.active):not(.main) { gap: 0; }
.dk:active { filter: brightness(1.4); }
.dk:active .dk-ico { transform: scale(.9); }
.dk.active { color: var(--gold); background: radial-gradient(ellipse at 50% 100%, rgba(246,198,92,.22), transparent 75%); }
.dk.active::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: .2cqw; height: .7cqw; border-radius: .4cqw; background: var(--gold); box-shadow: 0 0 1.4cqw var(--gold); }
.dk.main .dk-ico { color: #1a1205; background: linear-gradient(#ffdb84, #e5a73a); border-radius: 50%; padding: 1.3cqw; font-size: 8cqw; box-sizing: border-box; margin-top: -1.2cqw;
  box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw var(--bronze), 0 .8cqw 1.4cqw rgba(0,0,0,.5), inset 0 .3cqw 0 rgba(255,255,255,.6); }
.dk.main { color: var(--gold2); }
.dk.main .dk-lbl { margin-top: -.2cqw; }
.dk i { position: absolute; top: .4cqw; right: 16%; min-width: 4.2cqw; text-align: center; background: var(--gold); color: #1a1205; font-style: normal; font-weight: 800; font-size: 2.3cqw; padding: .1cqw 1.1cqw; border-radius: 2cqw; letter-spacing: 0; box-shadow: 0 0 0 .3cqw #04060a; }
.dk i.red { background: var(--bad); color: #fff; } .dk i[hidden] { display: none; }
.pulse { animation: pulseglow 1s ease-in-out infinite; }
@keyframes pulseglow { 50% { box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .62cqw var(--gold), 0 0 4cqw rgba(246,198,92,.6); } }
.dk.pulse { border-radius: 2cqw; }

#coach { display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw 2.6cqw; font-size: 3.1cqw; line-height: 1.38; }
#coach[hidden] { display: none; }
#coach-text { flex: 1; }
#coach .step { display: inline-block; background: linear-gradient(#ffd77a, #e3a63a); color: #1a1205; font-weight: 800; border-radius: 1.2cqw; padding: .1cqw 1.5cqw; margin-right: 1.8cqw; font-size: 2.5cqw; }
#coach b { color: var(--gold); font-weight: 600; }
#coach-skip { color: var(--mute); border-radius: 1.4cqw; padding: 1.2cqw 2.2cqw; font-size: 2.4cqw; box-shadow: inset 0 0 0 .3cqw var(--line); }

/* selection card */
#infocard { display: flex; align-items: stretch; gap: 2.6cqw; padding: 2.2cqw 2.4cqw; min-height: 23cqw; animation: cardIn .25s ease both; }
#infocard[hidden] { display: none; }
@keyframes cardIn { from { opacity: 0; transform: translateY(2cqw); } to { opacity: 1; transform: none; } }
.uc-portrait { width: 17.4cqw; flex: none; border-radius: 1.8cqw; overflow: hidden; background: radial-gradient(circle at 50% 30%, #2f4a32, #121d14); box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw var(--bronze2); align-self: flex-start; height: 17.4cqw; position: relative; }
.uc-portrait img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.uc-portrait.struct { background: radial-gradient(circle at 50% 35%, #2a3a52, #0f1622); }
.uc-portrait.struct img { width: 76%; height: 76%; margin: 12%; }
.uc-portrait .lvl { position: absolute; left: 0; bottom: 0; background: #1a1205; color: var(--gold); font-size: 2.3cqw; font-weight: 800; padding: .2cqw 1.2cqw; border-top-right-radius: 1.2cqw; }
.uc-main { flex: 1; min-width: 0; display: grid; align-content: start; gap: .9cqw; max-height: 74cqw; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: .9cqw .9cqw 2.4cqw; margin: -.9cqw -.9cqw -2.4cqw; }   /* (the padding and the matching negative margin keep the raised edge of the buttons inside the scrolling box: a scroller clips its children, and the 3D drop of a button reaches 1.5cqw below it) */
.uc-name { font-family: var(--serif); font-size: 4.6cqw; font-weight: 700; letter-spacing: .03em; color: var(--ink); line-height: 1.1; display: flex; align-items: baseline; gap: 1.4cqw; flex-wrap: wrap; }
.uc-name small { font-family: var(--sans); font-size: 2.5cqw; color: var(--mute); font-weight: 500; letter-spacing: 0; }
.uc-chips { display: flex; gap: 1.2cqw; flex-wrap: wrap; align-items: center; }
.chip-role { display: inline-flex; align-items: center; gap: .9cqw; background: rgba(246,198,92,.12); color: var(--gold2); border-radius: 2cqw; padding: .3cqw 1.6cqw .3cqw .8cqw; font-size: 2.6cqw; font-weight: 600; box-shadow: inset 0 0 0 .3cqw rgba(246,198,92,.35); }
.chip-role img { width: 3.8cqw; height: 3.8cqw; image-rendering: pixelated; }
.chip-trait { color: var(--mute); font-size: 2.5cqw; font-style: italic; }
.uc-bars { display: grid; grid-template-columns: 1fr 1fr; gap: .9cqw 2.4cqw; margin-top: .3cqw; }
.uc-bar { display: flex; align-items: center; gap: 1cqw; }
.uc-bar .uic { font-size: 3.4cqw; flex: none; }
.uc-bar.hp .uic { color: #ff7a6a; } .uc-bar.food .uic { color: #f0b040; } .uc-bar.energy .uic { color: #f4e060; } .uc-bar.mood .uic { color: #74b8ff; }
.meter { flex: 1; height: 1.7cqw; border-radius: 1cqw; background: #070a0f; overflow: hidden; box-shadow: inset 0 0 0 .25cqw rgba(255,255,255,.08); }
.meter > div { height: 100%; border-radius: 1cqw; background: linear-gradient(#9af08a, #4fae3e); transition: width .3s; }
.uc-bar.hp .meter > div { background: linear-gradient(#ff9a8a, #e23c30); }
.uc-bar.food .meter > div { background: linear-gradient(#ffd27a, #d08a1c); }
.uc-bar.energy .meter > div { background: linear-gradient(#fff090, #d8b820); }
.uc-bar.mood .meter > div { background: linear-gradient(#a8d4ff, #3f86d8); }
.meter.low > div { background: linear-gradient(#ff9a8a, #e23c30) !important; }
.uc-task { display: flex; align-items: center; gap: 1.2cqw; font-size: 2.7cqw; color: var(--ink2); min-width: 0; }
.uc-task .uic { font-size: 3.4cqw; color: var(--gold); flex: none; }
.uc-task span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-why { font-size: 2.3cqw; color: var(--mute); }
.uc-acts { display: flex; gap: 1.4cqw; flex-wrap: wrap; margin-top: .6cqw; }
#infocard .x { position: absolute; top: -1.4cqw; right: -1.2cqw; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; display: grid; place-items: center; font-size: 3.4cqw; color: var(--gold2);
  background: radial-gradient(circle at 50% 28%, #2b394d, #151e2b 75%); box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .55cqw var(--bronze2); }
.uc-hp { margin-top: .4cqw; }
.uc-hp .meter { height: 1.5cqw; }
.uc-hp small { display: block; font-size: 2.2cqw; color: var(--mute); margin-top: .4cqw; letter-spacing: .04em; }
.uc-bar.prog .meter > div { background: linear-gradient(#ffdb84, #e0a030); }

/* ═════ sheet (menus) ═════ */
#sheet.plate { background: linear-gradient(180deg, rgba(25,33,45,.985) 0%, rgba(11,16,23,.99) 100%); }
#sheet { position: absolute; left: 2.6cqw; right: 2.6cqw; top: 33cqw; bottom: calc(var(--dock-h) + 5.6cqw); z-index: 8; display: flex; flex-direction: column; overflow: hidden; animation: sheetIn .28s cubic-bezier(.2,.9,.3,1) both; }
#sheet[hidden] { display: none; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(5cqw); } to { opacity: 1; transform: none; } }
.sheet-head { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 2.8cqw 1.8cqw; }
#sheet-ico { font-size: 6cqw; color: var(--gold); }
.sheet-head h2 { flex: 1; margin: 0; font-family: var(--serif); font-size: 5cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--gold2); text-shadow: 0 .3cqw 0 #000; font-weight: 700; }
#sheet-close { width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; font-size: 4cqw; color: var(--ink2); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.1); }
#sheet-close:active { filter: brightness(1.5); }
#sheet-tabs { display: flex; gap: 1.2cqw; padding: 0 2.4cqw 1.6cqw; border-bottom: .3cqw solid var(--line2); }
#sheet-tabs:empty { display: none; }
.tab { flex: 1; text-align: center; padding: 1.5cqw 1cqw; border-radius: 2cqw; font-size: 2.9cqw; font-weight: 600; color: var(--mute); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.06); white-space: nowrap; }
.tab.on { color: #1a1205; background: linear-gradient(#ffd77a, #e3a63a); box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.5); font-weight: 800; }
.tab i { font-style: normal; background: var(--bad); color: #fff; border-radius: 2cqw; padding: 0 1cqw; margin-left: .8cqw; font-size: 2.2cqw; }
#sheet-body { flex: 1; overflow-y: auto; padding: 2.2cqw 2.6cqw 3cqw; font-size: 3.1cqw; scrollbar-width: thin; scrollbar-color: #3a526b transparent; overscroll-behavior: contain; }
#sheet-foot { padding: 2cqw 2.6cqw 2.4cqw; border-top: .3cqw solid var(--line2); background: rgba(0,0,0,.25); }
#sheet-foot[hidden] { display: none; }
.sec { display: flex; align-items: center; gap: 1.6cqw; font-family: var(--serif); font-size: 2.8cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); margin: 3cqw 0 1.6cqw; }
.sec::after { content: ""; flex: 1; height: .3cqw; background: linear-gradient(90deg, var(--bronze2), transparent); }
.sec:first-child { margin-top: 0; }
.sec small { font-family: var(--sans); letter-spacing: .02em; text-transform: none; color: var(--mute); font-size: 2.5cqw; margin-left: auto; order: 3; }
.note { color: var(--mute); font-size: 2.7cqw; line-height: 1.5; display: block; margin: 1cqw 0 1.6cqw; }
.note b { color: var(--ink2); }
.empty { text-align: center; color: var(--mute); padding: 6cqw 4cqw; font-size: 3cqw; line-height: 1.5; }
.empty .uic { font-size: 9cqw; margin: 0 auto 2cqw; color: var(--dim); }

/* cards and rows */
.card { display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw 2.4cqw; margin-bottom: 1.6cqw; border-radius: 2cqw; position: relative;
  background: linear-gradient(180deg, rgba(30,41,57,.85), rgba(16,23,33,.9)); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.07), inset 0 .3cqw 0 rgba(255,255,255,.05); }
.card .ic { width: 12.6cqw; height: 12.6cqw; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #25364b, #0c131c); border-radius: 1.8cqw; flex: none; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.08); }
.card .ic img { image-rendering: pixelated; width: 76%; height: 76%; object-fit: contain; }
.card .ic .uic { font-size: 6.4cqw; color: var(--gold); }
.card .tx { flex: 1; min-width: 0; }
.card .tx b { display: block; font-size: 3.4cqw; font-weight: 700; color: var(--ink); }
.card .tx small { display: block; color: var(--mute); font-size: 2.6cqw; margin-top: .5cqw; line-height: 1.4; }
.card.clickable:active { filter: brightness(1.25); }
.card.owned { opacity: .55; }
.card.era-now { box-shadow: inset 0 0 0 .4cqw var(--bronze2), 0 0 3cqw rgba(185,138,68,.18); }
.chips { display: flex; gap: 1.2cqw; flex-wrap: wrap; margin-top: 1.1cqw; }
.chip { display: inline-flex; align-items: center; gap: .8cqw; font-size: 2.6cqw; padding: .4cqw 1.4cqw; border-radius: 1.6cqw; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.chip img { width: 3.4cqw; height: 3.4cqw; image-rendering: pixelated; }
.chip.no { color: var(--bad); box-shadow: inset 0 0 0 .3cqw rgba(242,88,75,.5); }
.pill { display: inline-block; font-size: 2.3cqw; padding: .2cqw 1.3cqw; border-radius: 5cqw; background: rgba(120,160,190,.16); color: #b9d2e2; letter-spacing: .03em; font-weight: 600; vertical-align: middle; }
.pill.lv { background: rgba(146,156,255,.18); color: #c9d0ff; }
.pill.gold { background: rgba(246,198,92,.18); color: var(--gold2); }
.pill.red { background: rgba(242,88,75,.2); color: #ffb0a4; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.2cqw; padding: 1.9cqw 3.6cqw; border-radius: 2cqw; font-size: 3cqw; font-weight: 700; letter-spacing: .03em; color: var(--ink);
  background: linear-gradient(180deg, #2a384a, #18212d); box-shadow: inset 0 0 0 .3cqw rgba(201,154,74,.55), inset 0 .3cqw 0 rgba(255,232,180,.12), 0 .5cqw 0 #05070a; }
.btn .uic { font-size: 3.8cqw; }
.btn:active { transform: translateY(.4cqw); box-shadow: inset 0 0 0 .3cqw rgba(201,154,74,.55), 0 .1cqw 0 #05070a; filter: brightness(1.15); }
.btn.primary, button.primary { background: linear-gradient(180deg, #ffdd8c, #e4a63a); color: #1a1205; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.6), inset 0 0 0 .3cqw rgba(120,74,10,.5), 0 .5cqw 0 #6a4710; }
.btn.danger { background: linear-gradient(180deg, #ff8c7c, #d6382c); color: #fff; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.4), 0 .5cqw 0 #5a1712; }
.btn.small { padding: 1.3cqw 2.6cqw; font-size: 2.6cqw; border-radius: 1.6cqw; }
.btn.block { display: flex; width: 100%; padding: 2.4cqw; font-size: 3.4cqw; }
.btn:disabled { opacity: .4; filter: grayscale(.4); pointer-events: none; }
.btn.on { color: var(--gold2); box-shadow: inset 0 0 0 .4cqw var(--gold), 0 .5cqw 0 #05070a; background: linear-gradient(180deg, #3a3222, #231d12); }
.btnrow { display: flex; gap: 1.8cqw; flex-wrap: wrap; margin-bottom: 1.8cqw; }
.btnrow .btn { flex: 1; }
.stepper { display: flex; align-items: center; gap: 1.6cqw; }
.stepper b { min-width: 11cqw; text-align: center; font-size: 3.3cqw; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border-radius: 2cqw; overflow: hidden; box-shadow: inset 0 0 0 .3cqw var(--line); background: rgba(0,0,0,.3); }
.seg button { color: var(--mute); padding: 1.3cqw 2.8cqw; font-size: 2.6cqw; font-weight: 600; border-right: .3cqw solid var(--line2); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: linear-gradient(#ffd77a, #e3a63a); color: #1a1205; font-weight: 800; }
.seg.mini button.on { background: #566be0; color: #fff; }

/* stat tiles (War) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-bottom: 1.6cqw; }
.tile { display: grid; justify-items: center; gap: .4cqw; padding: 2.2cqw 1cqw 1.8cqw; border-radius: 2cqw; text-align: center; background: linear-gradient(180deg, rgba(30,41,57,.85), rgba(16,23,33,.9)); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.07); }
.tile .uic { font-size: 5.6cqw; color: var(--gold); }
.tile.red .uic { color: var(--bad); } .tile.blue .uic { color: var(--blue); } .tile.green .uic { color: var(--good); }
.tile b { font-size: 4.4cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.tile small { font-size: 2.3cqw; color: var(--mute); letter-spacing: .05em; text-transform: uppercase; }
.kv { display: flex; justify-content: space-between; gap: 3cqw; padding: 1.5cqw 0; border-bottom: .3cqw dashed var(--line2); color: var(--ink2); }
.kv b { color: var(--ink); text-align: right; }

/* build grid */
.bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.bcard { position: relative; display: grid; justify-items: center; gap: .8cqw; padding: 2.4cqw 1.6cqw 2cqw; border-radius: 2.2cqw; text-align: center;
  background: linear-gradient(180deg, rgba(31,43,60,.9), rgba(15,22,31,.92)); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.08); }
.bcard .bi { width: 19cqw; height: 15cqw; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 75%, #2f4a30 0%, #16241a 62%, #0d141a 100%); border-radius: 1.8cqw; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.07); }
.bcard .bi img { image-rendering: pixelated; max-width: 82%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 .6cqw .4cqw rgba(0,0,0,.6)); }
.bcard b { font-size: 3.1cqw; font-weight: 700; line-height: 1.15; }
.bcard .chips { justify-content: center; margin-top: .4cqw; }
.bcard .tag { position: absolute; top: 1.2cqw; left: 1.2cqw; }
.bcard .cnt { position: absolute; top: 1.2cqw; right: 1.2cqw; font-size: 2.3cqw; font-weight: 800; color: var(--gold2); background: rgba(0,0,0,.5); border-radius: 2cqw; padding: .1cqw 1.2cqw; }
.bcard.sel { box-shadow: inset 0 0 0 .5cqw var(--gold), 0 0 3cqw rgba(246,198,92,.3); background: linear-gradient(180deg, rgba(58,48,28,.9), rgba(24,20,12,.92)); }
.bcard.poor { opacity: .72; }
.bcard.locked { opacity: .5; filter: grayscale(.8); }
.bcard.locked .bi img { filter: brightness(0) opacity(.5); }
.bcard .lockmsg { font-size: 2.3cqw; color: var(--mute); display: flex; gap: .6cqw; align-items: center; }
.bcard .lockmsg .uic { font-size: 3cqw; }
.bdetail b { display: block; font-family: var(--serif); font-size: 4cqw; color: var(--gold2); margin-bottom: .6cqw; }
.bdetail p { margin: 0 0 1.6cqw; color: var(--ink2); font-size: 2.8cqw; line-height: 1.45; }
.bdetail .row { display: flex; align-items: center; gap: 2cqw; }
.bdetail .row .chips { margin: 0; flex: 1; }

/* people: roster + work matrix */
.person { display: flex; align-items: center; gap: 2.2cqw; padding: 1.8cqw 2.2cqw; margin-bottom: 1.4cqw; border-radius: 2cqw; background: linear-gradient(180deg, rgba(30,41,57,.85), rgba(16,23,33,.9)); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.07); }
.person:active { filter: brightness(1.25); }
.person .face { width: 12.6cqw; height: 12.6cqw; border-radius: 1.6cqw; overflow: hidden; background: radial-gradient(circle at 50% 30%, #2f4a32, #121d14); flex: none; box-shadow: 0 0 0 .3cqw var(--bronze2); }
.person .face img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.person .pm { flex: 1; min-width: 0; display: grid; gap: .7cqw; }
.person .pn { display: flex; align-items: center; gap: 1.2cqw; flex-wrap: wrap; font-weight: 700; font-size: 3.3cqw; }
.person .ps { font-size: 2.5cqw; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.person .mini .meter { height: 1.3cqw; }
.wm-wrap { overflow-x: auto; margin: 0 -.6cqw; padding: 0 .6cqw; }
.wm { width: 100%; border-collapse: separate; border-spacing: 0 1cqw; }
.wm th { font-size: 2.1cqw; font-weight: 600; color: var(--mute); letter-spacing: .03em; text-align: center; padding: 0 0 .8cqw; vertical-align: bottom; }
.wm th .wh { display: grid; justify-items: center; gap: .3cqw; }
.wm th img { width: 4.6cqw; height: 4.6cqw; image-rendering: pixelated; } .wm th .uic { font-size: 5cqw; color: var(--gold); }
.wm td { padding: 0; text-align: center; }
.wm td.who { text-align: left; padding: 0 .8cqw 0 0; width: 21cqw; }
.wm tr.row td { background: rgba(255,255,255,.035); }
.wm tr.row td:first-child { border-radius: 1.6cqw 0 0 1.6cqw; padding-left: 1.4cqw; } .wm tr.row td:last-child { border-radius: 0 1.6cqw 1.6cqw 0; }
.wm .nm { display: flex; align-items: center; gap: 1.2cqw; min-width: 0; }
.wm .nm img { width: 7.2cqw; height: 7.2cqw; border-radius: 1.2cqw; background: #16231a; image-rendering: pixelated; flex: none; }
.wm .nm span { display: grid; line-height: 1.15; min-width: 0; } .wm .nm b { font-size: 2.7cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wm .nm small { font-size: 2.1cqw; color: var(--mute); }
.wc { width: 6.6cqw; height: 6.6cqw; margin: .5cqw auto; border-radius: 1.6cqw; display: grid; place-items: center; font-size: 3.2cqw; font-weight: 800; position: relative;
  background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.08); color: var(--dim); }
.wc.l1 { background: linear-gradient(180deg, #3a4e66, #263648); color: #c6d8ea; box-shadow: inset 0 0 0 .3cqw rgba(140,180,220,.45); }
.wc.l2 { background: linear-gradient(180deg, #ffdb84, #e3a63a); color: #1a1205; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.6), 0 0 1.8cqw rgba(246,198,92,.45); }
.wc.custom::after { content: ""; position: absolute; top: -.5cqw; right: -.5cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 .3cqw #04060a; }
.wc:active { transform: scale(.92); }
.wc.off { opacity: .8; }
.legend { display: flex; gap: 3cqw; flex-wrap: wrap; font-size: 2.5cqw; color: var(--mute); margin: 1.4cqw 0 2cqw; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 1cqw; } .legend .wc { width: 5cqw; height: 5cqw; margin: 0; font-size: 2.5cqw; border-radius: 1.2cqw; }

/* misc lists */
.goal { display: flex; gap: 2.2cqw; align-items: flex-start; padding: 1.6cqw 0; border-bottom: .3cqw dashed var(--line2); color: var(--ink2); line-height: 1.4; }
.goal .dot { width: 5cqw; height: 5cqw; border-radius: 50%; margin-top: -.3cqw; flex: none; display: grid; place-items: center; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 .4cqw var(--bronze2); color: transparent; }
.goal .dot .uic { font-size: 3cqw; stroke-width: 3; }
.goal.done { color: var(--mute); } .goal.done span:last-child { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.goal.done .dot { background: var(--good); box-shadow: none; color: #0c2a08; }
.loglines div { padding: .9cqw 0; color: #b5c6d2; font-size: 2.8cqw; line-height: 1.4; }
.loglines span { color: var(--dim); margin-right: 1.6cqw; font-variant-numeric: tabular-nums; }
.pbar { height: 1.8cqw; border-radius: 1cqw; background: #070a0f; overflow: hidden; margin-top: 1.1cqw; box-shadow: inset 0 0 0 .25cqw rgba(255,255,255,.08); }
.pbar > div { height: 100%; border-radius: 1cqw; background: linear-gradient(#ffdb84, #dc9a2c); }
.ring { --p: 0; width: 18cqw; height: 18cqw; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 1turn), rgba(255,255,255,.1) 0); position: relative; flex: none; }
.ring::before { content: ""; position: absolute; inset: 1.5cqw; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #25364b, #0b121a); }
.ring b { position: relative; font-family: var(--serif); font-size: 6cqw; color: var(--gold2); } .ring small { position: relative; display: block; font-size: 2.2cqw; color: var(--mute); text-align: center; margin-top: -.6cqw; }
.hero { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 2.6cqw; margin-bottom: 2cqw; border-radius: 2.2cqw; background: linear-gradient(180deg, rgba(40,52,72,.85), rgba(16,23,33,.9)); box-shadow: inset 0 0 0 .4cqw var(--bronze2); }
.hero h3 { margin: 0; font-family: var(--serif); font-size: 4.6cqw; color: var(--gold2); } .hero p { margin: .6cqw 0 0; color: var(--ink2); font-size: 2.8cqw; line-height: 1.4; }
.dead { opacity: .45; }

/* ages timeline */
.age { display: flex; gap: 2.4cqw; padding: 0 0 2.6cqw; position: relative; color: var(--mute); }
.age::before { content: ""; position: absolute; left: 2.6cqw; top: 6cqw; bottom: -.4cqw; width: .4cqw; background: var(--line); }
.age:last-child::before { display: none; }
.age .ag-dot { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--s3); box-shadow: inset 0 0 0 .4cqw var(--line); font-size: 2.6cqw; font-weight: 800; color: var(--dim); z-index: 1; }
.age.past .ag-dot { background: var(--good); color: #0c2a08; box-shadow: none; } .age.past::before { background: var(--good); }
.age.now .ag-dot { background: var(--gold); color: #1a1205; box-shadow: 0 0 2cqw rgba(246,198,92,.6); }
.age b { font-family: var(--serif); font-size: 3.4cqw; color: var(--ink2); } .age.now b { color: var(--gold2); }
.age small { color: var(--mute); margin-left: 1cqw; font-size: 2.5cqw; }
.age small.ul { display: block; margin: .6cqw 0 0; color: #8a9aa8; font-size: 2.5cqw; line-height: 1.45; }

/* council */
.seat .ic { color: var(--mute); } .seat.active .ic { color: var(--gold); background: radial-gradient(circle at 50% 30%, #3a3018, #140f06); }
.seat.locked { opacity: .5; } .seat small.lock { color: #c4902e; } .seat small.last { color: #aab6ff; font-style: italic; }
.seat-ic { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seatctl { display: flex; gap: 1.6cqw; align-items: center; margin-top: 1.4cqw; flex-wrap: wrap; }
.card.mind { background: linear-gradient(180deg, rgba(30,40,80,.75), rgba(14,20,40,.9)); box-shadow: inset 0 0 0 .4cqw #4a5fa8; }
.card.mind .ic { width: 16cqw; height: 16cqw; background: #070b14; } .card.mind .ic img { width: 88%; height: 88%; }
.card.prop { background: linear-gradient(180deg, rgba(56,46,22,.85), rgba(24,19,9,.92)); box-shadow: inset 0 0 0 .4cqw var(--gold), 0 0 3cqw rgba(246,198,92,.15); }
.card.prop .pt { color: var(--ink); font-size: 3cqw; }
.propbtn { display: grid; gap: 1.2cqw; }
.card.fc .fcrow { display: grid; grid-template-columns: 17cqw 1fr 15cqw; align-items: center; gap: 1.4cqw; font-size: 2.6cqw; margin-top: 1.1cqw; color: var(--mute); }
.fcrow.pick { color: var(--gold); } .fcrow.pick .bar > div { background: var(--gold); } .fcrow em { font-style: normal; text-align: right; }
.bar { height: 1.6cqw; background: #070a0f; border-radius: 1cqw; overflow: hidden; } .bar > div { height: 100%; background: var(--good); border-radius: 1cqw; }
.declog .dec { padding: 1.5cqw 0; border-bottom: .3cqw dashed var(--line2); font-size: 2.8cqw; color: #bccdd8; line-height: 1.4; }
.declog .dec span { color: var(--dim); margin-right: 1.4cqw; font-variant-numeric: tabular-nums; font-size: 2.4cqw; }
.declog .dec b { color: var(--gold); margin-right: 1cqw; font-weight: 700; }
.declog .dec small { display: block; color: var(--mute); font-size: 2.4cqw; margin-top: .4cqw; }
.card.llm input { display: block; width: 100%; margin-top: 1.4cqw; background: #070b10; border: 0; box-shadow: inset 0 0 0 .3cqw var(--line); color: var(--ink); border-radius: 1.6cqw; padding: 1.6cqw 2.2cqw; font-size: 2.8cqw; font-family: inherit; user-select: text; -webkit-user-select: text; }
code { background: #070b10; padding: .2cqw 1cqw; border-radius: .8cqw; font-size: 2.5cqw; color: #b9d2e2; }
.rolebtn { background: rgba(255,255,255,.07); border-radius: 1.6cqw; padding: 1.2cqw 2.2cqw; font-size: 2.8cqw; min-width: 22cqw; text-align: center; font-weight: 600; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.1); }

/* ═════ full-screen overlays ═════ */
#gameover { position: absolute; inset: 0; z-index: 22; background: rgba(2,4,8,.84); display: grid; place-items: center; padding: 8cqw; backdrop-filter: blur(3px); }
#gameover[hidden] { display: none; }
.go-card { padding: 8cqw 6cqw 7cqw; text-align: center; animation: sheetIn .4s ease both; }
.go-card h1 { margin: 0 0 2.4cqw; font-family: var(--serif); font-size: 7.4cqw; color: var(--bad); letter-spacing: .05em; text-shadow: 0 .4cqw 0 #000; }
.go-card p { color: #bccdd8; font-size: 3.3cqw; line-height: 1.7; margin: 0 0 5.4cqw; }
.go-card button { border-radius: 2cqw; padding: 2.6cqw 6.4cqw; font-size: 3.5cqw; font-weight: 700; }
.go-btns { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
.go-btns button:not(.primary) { background: linear-gradient(180deg, #2a384a, #18212d); box-shadow: inset 0 0 0 .3cqw rgba(201,154,74,.55); color: var(--ink); }
.go-btns button[hidden] { display: none; }
#gameover.win .go-card h1 { color: var(--gold); }
#era-card { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ec, #f0b445) 32%, #05080d) 0%, rgba(3,5,9,.95) 72%); animation: eraIn .9s ease both; padding: 8cqw; }
#era-card[hidden] { display: none; }
.era-inner { text-align: center; }
.era-inner small { letter-spacing: .34em; font-size: 2.8cqw; color: var(--ec, var(--gold)); font-weight: 700; }
.era-inner img { display: block; margin: 5cqw auto 3cqw; width: 34cqw; height: 30cqw; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 4cqw color-mix(in srgb, var(--ec, #f0b445) 70%, transparent)); animation: eraFloat 3s ease-in-out infinite; }
.era-inner h1 { margin: 0; font-family: var(--serif); font-size: 9cqw; letter-spacing: .03em; color: #fff; text-shadow: 0 0 5cqw var(--ec, #f0b445), 0 .5cqw 0 #000; }
.era-inner p { margin: 1.4cqw 0 3cqw; color: #c6d3dc; font-size: 3.6cqw; }
.era-inner ul { list-style: none; padding: 0; margin: 0 0 4cqw; color: #b3c6d2; font-size: 3cqw; line-height: 1.75; }
.era-hint { color: #6b7d8a; font-size: 2.4cqw; letter-spacing: .14em; text-transform: uppercase; }
@keyframes eraIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes eraFloat { 50% { transform: translateY(-1.6cqw); } }

#title { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; text-align: center; padding: 8cqw;
  background: radial-gradient(ellipse at 50% 62%, rgba(255,140,50,.22) 0%, rgba(6,10,18,.55) 38%, rgba(3,5,9,.93) 100%); backdrop-filter: blur(2px); animation: eraIn .8s ease both; }
#title[hidden] { display: none; }
.title-inner { display: grid; justify-items: center; gap: 2cqw; }
.title-flame { font-size: 17cqw; color: var(--ember); filter: drop-shadow(0 0 5cqw rgba(255,140,50,.85)); animation: flicker 1.2s ease-in-out infinite; }
.title-flame .uic { stroke-width: 1.4; }
#title h1 { margin: 0; font-family: var(--serif); font-size: 15cqw; letter-spacing: .06em; color: var(--gold2); text-shadow: 0 .8cqw 0 #000, 0 0 6cqw rgba(255,150,50,.5); font-weight: 700; }
.title-tag { margin: 0 0 6cqw; color: #c6d0da; font-size: 3.5cqw; letter-spacing: .04em; max-width: 70cqw; line-height: 1.5; }
.title-btns { display: grid; gap: 3cqw; width: 66cqw; }
.title-btns button { display: grid; gap: .4cqw; padding: 3.2cqw 4cqw; border-radius: 2.6cqw; font-size: 4.4cqw; background: linear-gradient(180deg, #2a384a, #18212d); box-shadow: inset 0 0 0 .4cqw rgba(201,154,74,.6), inset 0 .3cqw 0 rgba(255,232,180,.14), 0 .7cqw 0 #05070a, 0 2cqw 4cqw rgba(0,0,0,.5); }
.title-btns button[hidden] { display: none; }
.title-btns button b { font-family: var(--serif); letter-spacing: .08em; text-transform: uppercase; }
.title-btns button small { font-size: 2.5cqw; color: var(--mute); }
.title-btns button.primary { background: linear-gradient(180deg, #ffdd8c, #e4a63a); color: #1a1205; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.6), inset 0 0 0 .4cqw rgba(120,74,10,.5), 0 .7cqw 0 #6a4710, 0 2cqw 4cqw rgba(0,0,0,.5); }
.title-btns button.primary small { color: #6a4a10; }
.title-btns button:active { transform: translateY(.5cqw); }
.title-foot { margin-top: 7cqw; color: #79889a; font-size: 2.5cqw; letter-spacing: .05em; max-width: 72cqw; line-height: 1.6; }

/* hidden while a sheet is open: the selection card and the coach would only sit on top of it */
#phone.sheet-open #infocard, #phone.sheet-open #coach { display: none; }
#phone.sheet-open #notices { top: 27.4cqw; left: 50%; transform: translateX(-50%); width: 92cqw; justify-items: center; }

.hintline { display: flex; align-items: center; gap: 1.8cqw; color: var(--mute); font-size: 2.8cqw; padding: .4cqw 0; }
.hintline .uic { font-size: 4.4cqw; color: var(--dim); flex: none; }

/* ═════ phase announcer: NIGHT 3 / DAWN, big and brief ═════ */
#announce { position: absolute; left: 0; right: 0; top: 50cqw; z-index: 6; pointer-events: none; display: grid; justify-items: center; gap: 1.6cqw; text-align: center; }
#announce .an { display: grid; justify-items: center; gap: 1.2cqw; animation: announce 3.6s ease both; }
#announce .an .uic { font-size: 11cqw; }
#announce .an h2 { margin: 0; font-family: var(--serif); font-size: 12.5cqw; letter-spacing: .28em; text-indent: .28em; font-weight: 700; color: var(--gold2); text-shadow: 0 .8cqw 0 #000, 0 0 6cqw rgba(255,170,60,.7); }
#announce .an p { margin: 0; font-size: 3.6cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); text-shadow: 0 .3cqw 0 #000, 0 0 2cqw #000; }
#announce .an::before, #announce .an::after { content: ""; width: 62cqw; height: .5cqw; background: linear-gradient(90deg, transparent, var(--bronze), transparent); }
#announce .an.night h2 { color: #d4daff; text-shadow: 0 .8cqw 0 #000, 0 0 7cqw rgba(110,130,255,.8); } #announce .an.night .uic { color: #aab6ff; filter: drop-shadow(0 0 2cqw rgba(120,140,255,.8)); }
#announce .an.dawn .uic { color: #ffb45a; filter: drop-shadow(0 0 2cqw rgba(255,160,60,.9)); }
#announce .an.boss h2 { color: #ffb0a4; text-shadow: 0 .8cqw 0 #000, 0 0 7cqw rgba(255,60,50,.85); } #announce .an.boss .uic { color: var(--bad); }
@keyframes announce { 0% { opacity: 0; transform: scale(1.18); letter-spacing: .5em; } 14% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(.96) translateY(-2cqw); } }

/* ── Map sheet: the big map, the explored ring, the places list ── */
.mapwrap { display: flex; gap: 2.6cqw; align-items: flex-start; margin-bottom: 1cqw; }
#mapcv { width: 53cqw; aspect-ratio: 2 / 3; flex: none; display: block; border-radius: 1.8cqw; background: #0b120b; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .7cqw var(--bronze2), 0 1cqw 2.2cqw rgba(0,0,0,.55); }
.mapside { flex: 1; min-width: 0; display: grid; gap: 2.2cqw; justify-items: center; align-content: start; }
.mapstats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; width: 100%; }
.mapstats > div { text-align: center; padding: 1.6cqw .6cqw 1.3cqw; border-radius: 1.8cqw; background: linear-gradient(180deg, rgba(30,41,57,.85), rgba(16,23,33,.9)); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.07); }
.mapstats b { display: block; font-size: 4.4cqw; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold2); }
.mapstats b span { font-size: 2.6cqw; color: var(--mute); font-weight: 600; }
.mapstats small { font-size: 2.2cqw; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.card.poi.sel { box-shadow: inset 0 0 0 .4cqw var(--gold), 0 0 3cqw rgba(246,198,92,.18); }
.card.poi .ic { background: radial-gradient(circle at 50% 35%, #2c4a2c, #0d1a10); }
.card.poi .ic img { width: 88%; height: 88%; }
.pill.good { background: rgba(95,174,82,.22); color: #b6ecaa; }
.bdetail .row .btn.small { flex: none; }

/* ── Seasons: the badge on the clock, the camp-tab card, the year bar, the season banners ── */
#clock { cursor: pointer; }
#season-badge { position: absolute; right: -1.5cqw; bottom: -1.3cqw; width: 4.8cqw; height: 4.8cqw; border-radius: 50%; display: grid; place-items: center; z-index: 2; background: #0c131c; color: var(--sc, #9fe07a);
  font-size: 3.1cqw; box-shadow: 0 0 0 .35cqw #04060a, inset 0 0 0 .35cqw var(--sc, #9fe07a), 0 0 1.6cqw rgba(0,0,0,.6); font-style: normal; }
#season-badge[hidden] { display: none; }
#season-badge .uic { width: 1em; height: 1em; }
.hero.season { box-shadow: inset 0 0 0 .4cqw var(--sc, var(--bronze2)); }
.hero.season .sbadge { width: 15cqw; height: 15cqw; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 8cqw; color: var(--sc); background: radial-gradient(circle at 50% 30%, #25364b, #0b121a); box-shadow: inset 0 0 0 .5cqw var(--sc), 0 0 3cqw rgba(0,0,0,.5); }
.hero.season h3 { color: var(--sc); } .hero.season h3 small { font-family: var(--sans); font-size: 2.6cqw; color: var(--mute); margin-left: 1.4cqw; letter-spacing: .04em; }
.yearbar { position: relative; display: flex; height: 7cqw; border-radius: 1.8cqw; margin: 2.2cqw 0 1.6cqw; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.14), 0 0 0 .3cqw #04060a; }
.yearbar .ys { flex: 1; display: grid; place-items: center; font-size: 4cqw; color: rgba(255,255,255,.8); }
.yearbar .ys:first-child { border-radius: 1.8cqw 0 0 1.8cqw; } .yearbar .ys:nth-child(4) { border-radius: 0 1.8cqw 1.8cqw 0; }
.ys.spring { background: linear-gradient(90deg, #3d6a2c, #5e9a44); } .ys.summer { background: linear-gradient(90deg, #8a6e1e, #c69a2c); }
.ys.autumn { background: linear-gradient(90deg, #7a3c14, #b4641c); } .ys.winter { background: linear-gradient(90deg, #3a5478, #7096be); }
.ymark { position: absolute; top: -.9cqw; bottom: -.9cqw; width: 1cqw; margin-left: -.5cqw; border-radius: .6cqw; background: #fff; box-shadow: 0 0 0 .3cqw #04060a, 0 0 2cqw rgba(255,255,255,.9); }
.fx { margin: 0 0 2cqw; padding: 0 0 0 4.2cqw; color: var(--ink2); font-size: 2.7cqw; line-height: 1.55; } .fx li::marker { color: var(--gold); }
#announce .an.spring h2 { color: #c6f4a8; text-shadow: 0 .8cqw 0 #000, 0 0 7cqw rgba(120,230,100,.75); } #announce .an.spring .uic { color: #9fe07a; filter: drop-shadow(0 0 2cqw rgba(120,230,100,.8)); }
#announce .an.summer h2 { color: #ffe9a0; text-shadow: 0 .8cqw 0 #000, 0 0 7cqw rgba(255,200,60,.8); } #announce .an.summer .uic { color: #ffd45a; filter: drop-shadow(0 0 2cqw rgba(255,200,60,.9)); }
#announce .an.autumn h2 { color: #ffc27a; text-shadow: 0 .8cqw 0 #000, 0 0 7cqw rgba(240,130,30,.8); } #announce .an.autumn .uic { color: #f0a040; filter: drop-shadow(0 0 2cqw rgba(240,130,30,.8)); }
#announce .an.winter h2 { color: #e2f2ff; text-shadow: 0 .8cqw 0 #000, 0 0 7cqw rgba(140,200,255,.85); } #announce .an.winter .uic { color: #b4dcff; filter: drop-shadow(0 0 2cqw rgba(140,200,255,.9)); }

/* ── Bonds and the Saga ── */
.bchip { display: inline-flex; align-items: center; gap: .9cqw; font-size: 2.5cqw; color: var(--ink2); }
.bchip .uic { font-size: 3.2cqw; flex: none; } .bchip.fr .uic { color: #ff7a96; } .bchip.rv .uic { color: var(--bad); }
.person .ps2 { display: flex; gap: 2.4cqw; flex-wrap: wrap; }
.saga-day { font-family: var(--serif); font-size: 2.7cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); margin: 2.6cqw 0 .4cqw; }
.saga-item { display: flex; align-items: flex-start; gap: 1.8cqw; padding: 1cqw 0; color: #c4d2dc; font-size: 2.8cqw; line-height: 1.4; border-bottom: .3cqw dashed var(--line2); }
.saga-item .uic { font-size: 3.8cqw; flex: none; color: var(--gold); margin-top: .1cqw; }
.saga-item.death .uic { color: var(--bad); } .saga-item.bond .uic { color: #ff7a96; } .saga-item.place .uic { color: var(--blue); } .saga-item.boss .uic { color: #ffa08a; }
.saga-item small { margin-left: auto; padding-left: 1.4cqw; color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.notice.tale { color: #ffe8c8; box-shadow: 0 0 0 .3cqw #04060a, 0 0 0 .6cqw #b98a44, 0 1.2cqw 3cqw rgba(0,0,0,.6); }
.notice.tale img { box-shadow: 0 0 0 .3cqw #b98a44; background: #1a1205; } .notice.tale b { color: var(--gold2); }

/* ── Wonders ── */
.wcard .bi { width: 100%; height: 24cqw; overflow: hidden; padding: 1.2cqw 1cqw 1cqw; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; }
.wcard .bi img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; flex: none; }
.bcard.wcard { padding-bottom: 2.4cqw; }

/* ── Enemy camps ── */
.card.camp .ic { background: radial-gradient(circle at 50% 35%, #4a2a26, #170d0c); }
.card.camp .ic img { width: 88%; height: 88%; }
.card.camp.sel { box-shadow: inset 0 0 0 .4cqw #ff6a5a, 0 0 3cqw rgba(255,100,80,.2); }
.uc-portrait.struct.camp { background: radial-gradient(circle at 50% 35%, #4a2a26, #170d0c); }
.uc-portrait.struct.dog { background: radial-gradient(circle at 50% 35%, #4a3c24, #15100a); }
.uc-portrait.struct.dog img { width: 96%; height: 96%; margin: 2%; }
.saga-item.dog .uic { color: #e8b86a; }
.uc-portrait.struct.nbr { background: radial-gradient(circle at 50% 35%, #2a4a3a, #0c1812); }
.card.nbr .ic { background: radial-gradient(circle at 50% 35%, #2a4a3a, #0c1812); }
.card.nbr .ic img { width: 88%; height: 88%; }
.saga-item.nbr .uic { color: #8fe0a8; }
.btn.dim { opacity: .55; }
.saga-item.camp .uic { color: #ff7a6a; }

/* ── decor design bar and the beauty card ── */
#designbar { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: calc(var(--dock-h) + 19.4cqw); z-index: 7; display: flex; gap: 1.6cqw; flex-wrap: wrap; justify-content: center; }
#designbar[hidden] { display: none; }
#designbar button { border-radius: 2cqw; font-weight: 700; padding: 1.3cqw 3cqw; font-size: 3cqw; background: linear-gradient(#27323f, #18212c); color: var(--gold2); box-shadow: inset 0 0 0 .3cqw var(--bronze2), 0 .4cqw 1cqw rgba(0,0,0,.45); }
#designbar button.on { background: linear-gradient(#ffd77a, #e3a63a); color: #1a1205; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.5), 0 .4cqw 0 #6a4710; }
#designbar button:disabled { opacity: .4; }
#designbar button[hidden] { display: none; }
.beauty { display: flex; gap: 3cqw; align-items: center; padding: 2.4cqw 3cqw; margin-bottom: 2cqw; border-radius: 2.4cqw; background: linear-gradient(#2a3a2c, #151f18); box-shadow: inset 0 0 0 .3cqw var(--bronze2); }
.beauty .bm { width: 15cqw; text-align: center; flex: none; }
.beauty .bm b { display: block; font-size: 9cqw; line-height: 1; color: #f4d27a; font-family: var(--serif, inherit); }
.beauty .bm small { color: var(--mute); font-size: 2.6cqw; letter-spacing: .1em; text-transform: uppercase; }
.beauty .bt { flex: 1; display: flex; flex-direction: column; gap: .6cqw; }
.beauty .bt b { font-size: 4cqw; color: var(--gold2); }
.beauty .bt small { color: var(--ink2); font-size: 2.7cqw; }
.uc-portrait.struct.decor { background: radial-gradient(circle at 50% 35%, #2f4a2c, #101a12); }

/* ── showcase and photo mode ── */
#showbar { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: calc(var(--dock-h) + 5.4cqw); z-index: 6; display: flex; flex-direction: column; gap: 1.4cqw; padding: 2cqw 2.4cqw; border-radius: 2.4cqw; background: linear-gradient(#1b2530, #10161e); box-shadow: inset 0 0 0 .3cqw var(--bronze2), 0 .6cqw 2cqw rgba(0,0,0,.5); }
#showbar[hidden] { display: none; }
#showbar .sb-row { display: flex; gap: 1.2cqw; align-items: center; flex-wrap: wrap; }
#showbar .sb-tag { font-weight: 800; letter-spacing: .14em; color: var(--gold2); font-size: 2.8cqw; }
#showbar small { color: var(--ink2); font-size: 2.7cqw; flex: 1; }
#showbar button { border-radius: 1.6cqw; font-weight: 700; padding: 1cqw 2.2cqw; font-size: 2.9cqw; background: linear-gradient(#27323f, #18212c); color: var(--gold2); box-shadow: inset 0 0 0 .3cqw var(--bronze2); }
#showbar #sb-eras button { min-width: 6.4cqw; padding: 1cqw 0; }
#showbar button.on { background: linear-gradient(#ffd77a, #e3a63a); color: #1a1205; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.5), 0 .4cqw 0 #6a4710; }
#photobar { position: absolute; left: 0; right: 0; bottom: 7cqw; z-index: 40; display: flex; justify-content: center; gap: 3cqw; }
#photobar[hidden] { display: none; }
#photobar button { border-radius: 2.4cqw; font-weight: 800; padding: 2cqw 5cqw; font-size: 3.6cqw; background: linear-gradient(#ffd77a, #e3a63a); color: #1a1205; box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.5), 0 .4cqw 0 #6a4710; }
#photobar #pb-close { background: rgba(10,14,20,.78); color: #f0e6c8; box-shadow: inset 0 0 0 .3cqw var(--bronze2); }
#phone.photo > *:not(#cv):not(#photobar) { display: none !important; }

#phone.showing #banner { bottom: calc(var(--dock-h) + 33cqw); }
#phone.showing #designbar { bottom: calc(var(--dock-h) + 47cqw); }

/* crew slots on a building card (works.js) */
.crew-h { font-size: 2.3cqw; color: var(--mute); margin-top: .8cqw; letter-spacing: .06em; text-transform: uppercase; }
.crew { display: flex; flex-wrap: wrap; gap: 1.2cqw; margin: .6cqw 0 .8cqw; }
.crew .slot { display: grid; justify-items: center; gap: .3cqw; width: 12.4cqw; padding: .8cqw .4cqw; border-radius: 1.6cqw; background: linear-gradient(180deg, rgba(30,41,57,.9), rgba(16,23,33,.95)); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.1); color: var(--ink2); font: inherit; }
.crew .slot img { width: 9.4cqw; height: 9.4cqw; image-rendering: pixelated; object-fit: contain; border-radius: 1.2cqw; background: radial-gradient(circle at 50% 30%, #2f4a32, #121d14); }
.crew .slot small { font-size: 2cqw; max-width: 12cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew .slot.empty { box-shadow: inset 0 0 0 .3cqw rgba(240,180,69,.5); color: var(--gold, #f0b445); min-height: 15cqw; align-content: center; }
.crew .slot.empty svg, .crew .slot.empty .uic { width: 6cqw; height: 6cqw; }
.crew .slot:active { filter: brightness(1.3); }
.card.wp .ic img { image-rendering: pixelated; object-fit: contain; width: 100%; height: 100%; }

/* the blacksmith and the guards' kit (gear.js) */
.gkl { display: grid; gap: 1cqw; margin: .6cqw 0 .8cqw; }
.gk { display: flex; align-items: center; gap: 1.2cqw; padding: 1cqw 1.4cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.04); }
.gk .gt { flex: 1; min-width: 0; display: grid; gap: .4cqw; } .gk .gt b { font-size: 2.7cqw; }
.gq { display: grid; grid-template-columns: 1fr auto; gap: .6cqw 1.2cqw; align-items: center; padding: 1cqw 1.4cqw; border-radius: 1.6cqw; background: rgba(240,180,69,.08); margin-bottom: .8cqw; }
.gq b { font-size: 2.6cqw; } .gq .meter { grid-column: 1 / 2; } .gq small { grid-column: 1 / 2; font-size: 2.1cqw; color: var(--mute); } .gq .btn { grid-column: 2; grid-row: 1 / 4; }
.gslots { display: flex; gap: 1.2cqw; margin: .6cqw 0; }
.gslot { display: grid; grid-template-columns: auto 1fr; column-gap: 1cqw; align-items: center; flex: 1; padding: 1cqw 1.4cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.05); color: var(--ink2); font: inherit; text-align: left; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.1); }
.gslot.on { box-shadow: inset 0 0 0 .3cqw rgba(240,180,69,.7); background: rgba(240,180,69,.1); }
.gslot .uic { width: 5cqw; height: 5cqw; grid-row: 1 / 3; } .gslot small { font-size: 2cqw; color: var(--mute); } .gslot b { font-size: 2.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* eight resources on one line: smaller chips */
#resbar.many { gap: .6cqw; }
#resbar.many .res { gap: .5cqw; padding: .6cqw .5cqw; }
#resbar.many .res b { font-size: 3cqw; } #resbar.many .res img { width: 4.2cqw; height: 4.2cqw; } #resbar.many .res small { display: none; } #resbar.many .res .duo img { width: 3.4cqw; height: 3.4cqw; }