/* ═══════════════════════════════════════════════════════════════════════════
   Till Dawn — the LIGHT "cozy" HUD (loaded after ui-game.css, overriding its dark navy).
   The same layout and the same chunky recipe (outline, light top edge, hard shadow underneath), but warm: cream and tan surfaces, a warm brown outline,
   dark brown text. The coloured buttons and the colour of each area (Build orange, People blue, War red, Council purple, Age gold, Map green) stay.
   Delete this file's <link> in index.html to get the dark navy skin back.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --edge: #6a4325; --line: #6a4325;
  --ink: #4a2f1f; --ink2: #5e3f2a; --mute: #8a6a4a; --dim: #a78a68;
  --panel-a: #fff8e6; --panel-b: #f6e4b8;
  --cream: #fff8e6; --cream2: #f6e4b8; --tan: #ead3a0; --tan2: #d9bb7e; --brown: #6a4325; --brown2: #4a2f1f; --soft: rgba(106,67,37,.34);
}
html, body { background: #2f5a30; }
#stage { background: radial-gradient(ellipse at 50% 30%, #7fbf62 0%, #3f7a40 60%, #234a28 100%); }
#phone { box-shadow: none; }                                              /* (no frame: the world fills the whole window; the column only holds the interface) */
button:focus-visible { outline-color: #e09a1a; }

/* ───────── panels and the little pills of the top bar ───────── */
.plate { background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  box-shadow: 0 0 0 .6cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.85), inset 0 -.7cqw 0 rgba(106,67,37,.1), 0 1.5cqw 0 .6cqw var(--soft); }
.rbtn, .pill-btn, .btn, .tab.on, .bcard, #banner button, .title-btns button, .go-card button, .go-btns button { --sd: var(--soft); }
.rbtn { box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.5), inset 0 -.6cqw 0 rgba(0,0,0,.16), 0 1.1cqw 0 .55cqw var(--soft); }
.rbtn:active { box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.3), 0 .3cqw 0 .55cqw var(--soft); }
.rbtn.muted { color: #fff; }
.pill-btn { box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.5), 0 1.1cqw 0 .55cqw var(--soft); }
.res, #fire, #clock { background: linear-gradient(180deg, #fffaec, #f4e2b4); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.9), 0 1cqw 0 .5cqw var(--soft); }
.res b { color: var(--brown2); text-shadow: 0 .3cqw 0 rgba(255,255,255,.8); }
.res small { color: #3f9a4a; } .res.low small { color: #d6402f; } .res.low b { color: #d6402f; }
.res img { box-shadow: inset 0 .4cqw 0 rgba(255,255,255,.5), inset 0 -.4cqw 0 rgba(0,0,0,.2), 0 0 0 .3cqw var(--edge); }
#fire-ico { color: #f08a1c; }
#fuel-wrap .cap { color: #b8651a; } #fire.low #fuel-wrap .cap { color: #d6402f; }
#fuel { background: #d9c08a; box-shadow: inset 0 0 0 .3cqw rgba(106,67,37,.3); } #fuel i { background: #c2a468; }
#fuel i.on { background: linear-gradient(#ffe27a, #ff9a22 65%, #e2640f); }
#fuel-pct { color: var(--brown2); }
#clock-ring { background: conic-gradient(#ffb52e calc(var(--p) * 1turn), rgba(106,67,37,.2) 0); }
#clock-ring::before { background: radial-gradient(circle at 50% 28%, #fffdf3, #f1dca8); }
#clock-ico { color: #e8962a; }
#clock.night #clock-ring { background: conic-gradient(#6f7fe0 calc(var(--p) * 1turn), rgba(106,67,37,.2) 0); }
#day-label { color: var(--brown2); text-shadow: 0 .3cqw 0 rgba(255,255,255,.8); }
#clock-time { color: var(--mute); } #phase-sub { color: #c07a10; }
#clock.night #day-label { color: #3a4694; } #clock.night #phase-sub { color: #5a68c4; }
#season-badge { background: #fff8e6; }
#btn-dots { background: radial-gradient(circle at 50% 18%, #c9b08a 0%, #a08560 55%, #84694a 100%); }

/* minimap and camera tools */
#minimap-wrap.plate { background: #fff8e6; box-shadow: 0 0 0 .5cqw var(--edge), 0 0 0 1cqw #ecd196, 0 1.5cqw 0 1cqw var(--soft); }

/* notices */
.notice { color: var(--brown2); background: linear-gradient(180deg, #fffaec, #f4e2b4); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.85), 0 1.2cqw 0 .55cqw var(--soft); }
.notice.bad { color: #7a2a22; background: linear-gradient(180deg, #ffe6df, #f7c4b8); }
.notice.agent { color: #3a2a70; background: linear-gradient(180deg, #f1ebff, #d9ccf6); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.85), 0 1.2cqw 0 .55cqw var(--soft); }
.notice.agent img { background: #e6dcfa; }
.notice.tale { color: var(--brown2); background: linear-gradient(180deg, #f7e6bc, #e4c47e); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.7), 0 1.2cqw 0 .55cqw var(--soft); }
.notice.tale b { color: #a8620a; } .notice b { color: var(--brown2); }
#pause-badge { color: var(--brown2); background: linear-gradient(180deg, rgba(255,250,236,.97), rgba(246,228,184,.97)); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.85), 0 1.2cqw 0 .55cqw var(--soft); text-shadow: 0 .3cqw 0 rgba(255,255,255,.8); }
#pause-badge small { color: var(--mute); }

/* the dock */
#dock.plate { background: linear-gradient(180deg, #f9e9bd, #e5c98c); }
.dk-ico { box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.5), inset 0 -.6cqw 0 rgba(0,0,0,.16), 0 .9cqw 0 .5cqw var(--soft); }
.dk-lbl, .dk:not(.active):not(.main) .dk-lbl { color: var(--brown2); text-shadow: 0 .3cqw 0 rgba(255,255,255,.75); }
.dk.active { background: rgba(106,67,37,.12); } .dk.active .dk-lbl { color: var(--brown2); }
.dk.active .dk-ico { box-shadow: 0 0 0 .5cqw #fff, 0 0 0 1cqw var(--edge), 0 1.2cqw 0 1cqw var(--soft); }
.dk i { color: #fff; }

/* selection card */
.uc-name { color: var(--brown2); text-shadow: 0 .3cqw 0 rgba(255,255,255,.8); } .uc-name small { color: var(--mute); }
.chip-trait { color: var(--mute); }
.meter, .pbar { background: #dcc48e; box-shadow: inset 0 0 0 .3cqw rgba(106,67,37,.3); }
.uc-task { color: var(--brown2); } .uc-task .uic { color: #e08a1a; } .uc-why, .uc-hp small { color: var(--mute); }
.uc-portrait .lvl { background: #6a4325; color: #ffe08a; }

/* ───────── the menu sheet ───────── */
#sheet.plate { background: linear-gradient(180deg, #fff8e6 0%, #f6e4b8 100%); }
.sheet-head { box-shadow: 0 .6cqw 0 var(--edge); }
#sheet-close, #infocard .x { box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.5), 0 .9cqw 0 .5cqw var(--soft); }
#sheet-tabs { background: #f3e2b4; }
.tab { color: var(--brown); background: #e7cf9a; box-shadow: 0 0 0 .4cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.55); }
.tab.on { color: #fff; box-shadow: 0 0 0 .4cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.5); }
#sheet-body { background: #fff8e8; color: var(--brown2); scrollbar-color: #c9a560 transparent; }
#sheet-foot { background: #f3e2b4; color: var(--brown2); }
.sec { color: color-mix(in srgb, var(--ac) 82%, #3a2410); text-shadow: none; }
.sec small { color: var(--mute); }
.note { color: var(--mute); } .note b { color: var(--brown2); }
.empty { color: var(--mute); } .empty .uic { color: #c9a560; }

/* cards and rows */
.card, .person, .tile, .hero, .mapstats > div, .crew .slot, .gk, .gslot, .gq { background: linear-gradient(180deg, #fffdf5 0%, #f8ebc8 100%); color: var(--brown2);
  box-shadow: 0 0 0 .45cqw var(--edge), inset 0 .45cqw 0 rgba(255,255,255,.9), 0 .9cqw 0 .45cqw rgba(106,67,37,.24); }
.card .ic { background: radial-gradient(circle at 50% 30%, #fff1c8, #e8c984); box-shadow: 0 0 0 .4cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.6); }
.card .ic .uic { color: var(--brown); }
.card .tx b { color: var(--brown2); text-shadow: none; } .card .tx small { color: var(--mute); }
.card.era-now { box-shadow: 0 0 0 .6cqw #e8a020, 0 0 0 1.1cqw var(--edge), 0 1.1cqw 0 1.1cqw var(--soft); }
.chip { color: var(--brown2); background: #f3e1b0; box-shadow: 0 0 0 .35cqw var(--edge), inset 0 .3cqw 0 rgba(255,255,255,.7); }
.chip.no { color: #c0392b; background: #ffdcd2; box-shadow: 0 0 0 .35cqw var(--edge), inset 0 0 0 .3cqw rgba(214,64,47,.5); }
.pill { background: rgba(106,67,37,.13); color: var(--brown2); }
.pill.lv { background: #5d6bd8; color: #fff; } .pill.gold { background: #ffcf3f; color: #3a2503; } .pill.red { background: #e04a40; color: #fff; } .pill.good { background: #3fb85a; color: #fff; }

/* buttons keep their colours; only the shadows are warmed */
.btn { box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.5), inset 0 -.5cqw 0 rgba(0,0,0,.16), 0 1cqw 0 .5cqw var(--soft); }
.btn:active { box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.3), 0 .2cqw 0 .5cqw var(--soft); }
.btn.primary, button.primary { box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.55), inset 0 -.5cqw 0 rgba(0,0,0,.16), 0 1cqw 0 .5cqw var(--soft); }
.btn.on { box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.6), 0 1cqw 0 .5cqw var(--soft); }
.stepper b { color: var(--brown2); }
.seg { background: #f1dfb0; box-shadow: 0 0 0 .45cqw var(--edge); } .seg button { color: var(--brown); } .seg button.on { color: #3a2503; }
.seg.mini button.on { color: #fff; }
.rolebtn { background: #f3e1b0; color: var(--brown2); box-shadow: 0 0 0 .4cqw var(--edge); }

/* stat tiles and lists */
.tile .uic { color: #e08a1a; } .tile.red .uic { color: #d6402f; } .tile.blue .uic { color: #3f86d8; } .tile.green .uic { color: #3fae2a; }
.tile b { color: var(--brown2); text-shadow: none; } .tile small { color: var(--mute); }
.kv { color: var(--brown2); border-bottom-color: rgba(106,67,37,.16); } .kv b { color: var(--brown2); }
.hero h3 { color: var(--brown2); text-shadow: none; } .hero p { color: var(--mute); }
.goal { color: var(--brown2); border-bottom-color: rgba(106,67,37,.16); }
.goal .dot { background: #ead3a0; box-shadow: 0 0 0 .4cqw var(--edge), inset 0 0 0 .4cqw #c9a560; } .goal.done .dot { background: #3fb85a; color: #fff; }
.loglines div, .declog .dec, .saga-item { color: var(--brown2); } .declog .dec b, .saga-day { color: #b0680a; }
.ring { background: conic-gradient(#ffb52e calc(var(--p) * 1turn), rgba(106,67,37,.2) 0); } .ring::before { background: radial-gradient(circle at 50% 30%, #fffdf3, #f1dca8); } .ring b { color: var(--brown2); }
.age b { color: var(--brown2); } .age.now b { color: #b0680a; } .age small.ul { color: var(--mute); }
.age .ag-dot { background: #ead3a0; color: var(--brown); } .age.now .ag-dot { background: #ffcf3f; color: #3a2503; } .age::before { background: rgba(106,67,37,.25); }
.seat .ic { color: var(--brown); }
.card.mind { background: linear-gradient(180deg, #f3edff, #dccff7); } .card.prop { background: linear-gradient(180deg, #fff3d0, #f0d28a); } .card.camp { background: linear-gradient(180deg, #ffe7e0, #f4c2b6); }
.card.poi.sel, .card.camp.sel { box-shadow: 0 0 0 .6cqw #e8a020, 0 0 0 1.1cqw var(--edge); }
.mapstats b { color: var(--brown2); } .mapstats small, .fcrow, .card.fc .fcrow, .crew-h, .hintline, .legend { color: var(--mute); }
#mapcv { box-shadow: 0 0 0 .5cqw var(--edge), 0 0 0 1cqw #ecd196, 0 1.2cqw 0 1cqw var(--soft); }
.crew .slot.empty { box-shadow: 0 0 0 .45cqw var(--edge), inset 0 0 0 .4cqw #e8a020; color: #c07a10; }
code { background: #f1dfb0; color: var(--brown); }
.person .pn { color: var(--brown2); text-shadow: none; } .person .ps { color: var(--mute); }
.wm th { color: var(--mute); } .wm th .uic { color: #e08a1a; } .wm tr.row td { background: rgba(106,67,37,.07); } .wm .nm small { color: var(--mute); }
.wc { background: #ead7a4; color: #a78a68; box-shadow: 0 0 0 .35cqw var(--edge); } .wc.l1 { color: #fff; } .wc.l2 { color: #3a2503; }

/* build grid */
.bcard { background: linear-gradient(180deg, #fffdf5, #f8ebc8); color: var(--brown2); box-shadow: 0 0 0 .45cqw var(--edge), inset 0 .45cqw 0 rgba(255,255,255,.9), 0 .9cqw 0 .45cqw rgba(106,67,37,.24); }
.bcard .bi { background: radial-gradient(ellipse at 50% 80%, #8fdc78 0%, #5cba58 60%, #3f9a46 100%); box-shadow: inset 0 0 0 .4cqw rgba(60,100,40,.45), inset 0 .5cqw 0 rgba(255,255,255,.3); }
.bcard .bi img { filter: drop-shadow(0 .6cqw 0 rgba(40,70,30,.3)); }
.bcard b { color: var(--brown2); text-shadow: none; }
.bcard .cnt { color: var(--brown2); background: #f3e1b0; box-shadow: 0 0 0 .35cqw var(--edge); }
.bcard.sel { background: linear-gradient(180deg, #fff3c8, #f6dc8c); box-shadow: 0 0 0 .7cqw #e8a020, 0 0 0 1.2cqw var(--edge), 0 1.2cqw 0 1.2cqw var(--soft); }
.bcard .lockmsg { color: var(--mute); }
.bdetail b { color: var(--brown2); text-shadow: none; } .bdetail p { color: var(--mute); }

/* the banner, design bar and the first-game coach */
#banner-text { color: var(--brown2); }
#showbar { background: linear-gradient(180deg, #fff8e6, #f6e4b8); }
#coach-skip { color: #8a6a4a; }

/* title, announcements, game over */
#title { background: radial-gradient(ellipse at 50% 60%, rgba(255,200,90,.3) 0%, rgba(70,46,24,.68) 45%, rgba(38,24,12,.93) 100%); }
#title h1 { -webkit-text-stroke-color: #4a2f1f; text-shadow: 0 1.6cqw 0 #4a2f1f, 0 0 8cqw rgba(255,170,60,.6); }
.title-tag { color: #f6e8c8; } .title-foot { color: #e8d8b8; }
#announce .an h2, #announce .an p { -webkit-text-stroke-color: #4a2f1f; }
#announce .an h2 { text-shadow: 0 1.2cqw 0 #4a2f1f, 0 0 6cqw rgba(0,0,0,.4); }
.go-card h1 { -webkit-text-stroke-color: #4a2f1f; text-shadow: 0 1cqw 0 #4a2f1f; } .go-card p { color: var(--brown2); }
.era-inner h1 { -webkit-text-stroke-color: #4a2f1f; }

/* the campfire percentage sits on top of the orange bar: white with a brown outline so it reads on every segment */
#fuel-pct { color: #fff; -webkit-text-stroke: .7cqw #6a4325; paint-order: stroke fill; text-shadow: none; }

/* placing a building: the cost pill under the plot */
.plot-cost { background: rgba(255,248,230,.96); box-shadow: 0 0 0 .6cqw var(--edge), 0 1cqw 0 .6cqw var(--soft); }
.plot-cost b { color: var(--brown2); text-shadow: 0 .3cqw 0 rgba(255,255,255,.8); }

/* ───────── upgrading: the preview on a building's card, the chevrons, "upgrade all" ───────── */
.up-card { margin-top: 1.6cqw; padding: 1.6cqw 1.8cqw 1.8cqw; border-radius: 2.6cqw; background: linear-gradient(180deg, #f2ffe0, #d7f0b4); box-shadow: 0 0 0 .4cqw #5f8f3a, inset 0 .4cqw 0 rgba(255,255,255,.8); }
.up-card.key { background: linear-gradient(180deg, #fff6d0, #fbe08a); box-shadow: 0 0 0 .4cqw #b8801a, inset 0 .4cqw 0 rgba(255,255,255,.8); }
.up-row { display: flex; align-items: center; gap: 1.2cqw; }
.up-pic { position: relative; width: 12cqw; height: 12cqw; flex: none; border-radius: 2.2cqw; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #fff6dc, #e9cf92); box-shadow: 0 0 0 .35cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.7); }
.up-pic img { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; }
.up-pic.nu { background: radial-gradient(circle at 50% 30%, #f6ffd8, #a9e068); animation: upGlow 1.6s ease-in-out infinite; }
.up-pic.nu u { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); animation: upShine 2.6s ease-in-out infinite; }
.up-chev { display: flex; flex: none; align-items: center; }
.up-chev i { width: 2.8cqw; height: 4.6cqw; margin-left: -.7cqw; background: #4eb02e; clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); opacity: .25; animation: upChev 1.2s infinite; }
.up-chev i:nth-child(2) { animation-delay: .15s; } .up-chev i:nth-child(3) { animation-delay: .3s; }
.up-chev.mini { margin: 0 -.4cqw; } .up-chev.mini i { width: 2.2cqw; height: 3.8cqw; }
.up-tx { min-width: 0; margin-left: 1cqw; display: flex; flex-direction: column; gap: .3cqw; }
.up-tx b { font-size: 3.7cqw; font-weight: 900; color: var(--brown2); line-height: 1.1; }
.up-tx small { font-size: 2.9cqw; color: #3f7a24; font-weight: 800; }
.up-gains { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.4cqw; }
.up-gains .gain { font-size: 2.8cqw; font-weight: 800; padding: .4cqw 1.5cqw; border-radius: 2cqw; background: rgba(255,255,255,.72); color: var(--brown2); box-shadow: 0 0 0 .3cqw rgba(106,67,37,.35); }
.up-gains .gain b { color: #2f8a1f; } .up-gains .gain.key { background: #fff0b0; }
.up-warn { margin-top: 1.2cqw; font-size: 2.7cqw; font-weight: 700; color: #b8561a; }
.up-go { margin-top: 1.8cqw; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; }
.up-go .chips { margin: 0; display: inline-flex; }
.up-go.primary { animation: upPulse 1.8s ease-in-out infinite; }
.card.up-all { background: linear-gradient(180deg, #f2ffe0, #d7f0b4); box-shadow: 0 0 0 .5cqw #5f8f3a, 0 1.2cqw 0 .5cqw var(--soft); }
@keyframes upChev { 0%, 100% { opacity: .22; transform: translateX(0); } 50% { opacity: 1; transform: translateX(.7cqw); } }
@keyframes upShine { 0%, 45% { left: -60%; } 100% { left: 140%; } }
@keyframes upGlow { 0%, 100% { box-shadow: 0 0 0 .35cqw var(--edge), 0 0 0 0 rgba(120,220,60,0), inset 0 .4cqw 0 rgba(255,255,255,.7); } 50% { box-shadow: 0 0 0 .35cqw var(--edge), 0 0 2.4cqw .6cqw rgba(120,220,60,.7), inset 0 .4cqw 0 rgba(255,255,255,.7); } }
@keyframes upPulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.09); } }
.up-go { flex-wrap: nowrap; padding: 2.2cqw 2.6cqw; }
.up-go .chips { gap: .8cqw; flex-wrap: nowrap; }
.up-go .chip { font-size: 2.7cqw; padding: .3cqw 1.2cqw .3cqw .7cqw; gap: .6cqw; }
.up-go .chip img { width: 3.6cqw; height: 3.6cqw; }

/* ───────── the title screen: a living postcard (title.js) with the name on a swinging wooden sign ───────── */
#title { background: none; backdrop-filter: none; padding: 0; place-items: stretch; overflow: hidden; }
#title-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }          /* (title.js moves it out of the column to the stage and sizes it like the world canvas: the picture fills the window) */
.title-inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 14cqw 8cqw 7cqw; }
.title-sign { position: relative; transform-origin: 50% -14cqw; animation: signDrop 1.1s cubic-bezier(.25,1.5,.45,1) both, signSway 6s ease-in-out 1.1s infinite; filter: drop-shadow(0 2cqw 1.6cqw rgba(0,0,0,.35)); }
.title-sign .rope { position: absolute; top: -17cqw; width: 1cqw; height: 18cqw; background: #e6d29c; box-shadow: 0 0 0 .4cqw #4a2f1f; border-radius: 1cqw; }
.title-sign .rope.l { left: 15cqw; } .title-sign .rope.r { right: 15cqw; }
.title-sign .board { position: relative; display: grid; justify-items: center; gap: .4cqw; padding: 2.4cqw 8cqw 3.4cqw; border-radius: 4.4cqw; background: repeating-linear-gradient(180deg, transparent 0 8.6cqw, rgba(90,50,20,.22) 8.6cqw 9cqw), linear-gradient(180deg, #e8b27a, #d09a62 50%, #b98250);
  box-shadow: 0 0 0 .9cqw #4a2f1f, inset 0 .9cqw 0 rgba(255,238,204,.6), inset 0 -1.2cqw 0 rgba(90,50,20,.38); }
.title-sign .board::before, .title-sign .board::after { content: ''; position: absolute; top: 2.2cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #6a4325; box-shadow: inset 0 .4cqw 0 rgba(255,255,255,.4); }
.title-sign .board::before { left: 2.6cqw; } .title-sign .board::after { right: 2.6cqw; }
.title-sign .title-flame { font-size: 8cqw; margin-bottom: -1.2cqw; }
#title .title-sign h1 { font-size: 13.5cqw; line-height: 1; white-space: nowrap; -webkit-text-stroke-width: 1.3cqw; }
#title .title-sign .title-tag { margin: .6cqw 0 0; color: #5a3a22; font-size: 3cqw; font-weight: 800; max-width: 62cqw; line-height: 1.35; text-shadow: 0 .4cqw 0 rgba(255,240,210,.7); }
.title-btns { margin-top: auto; width: 64cqw; gap: 2.4cqw; }
#title .title-btns button { padding: 2.4cqw 4cqw; font-size: 4.6cqw; }
#title .title-btns button small { font-size: 2.7cqw; }
.title-foot { margin-top: 3cqw; font-size: 2.6cqw; color: #fff4d6; text-shadow: 0 .5cqw 0 rgba(40,24,12,.75); }
@keyframes signDrop { 0% { transform: translateY(-70cqw) rotate(-5deg); } 100% { transform: translateY(0) rotate(0); } }
.title-btns, .title-foot { animation: titleUp .8s ease .7s both; }
@keyframes titleUp { 0% { opacity: 0; transform: translateY(6cqw); } 100% { opacity: 1; transform: none; } }
@keyframes signSway { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(1.5deg); } 75% { transform: rotate(-1.5deg); } }

/* the beauty card (Build > Decor): a soft meadow green with light text, so it reads on the cream sheet */
.beauty { background: linear-gradient(180deg, #8fdc78, #5cb85a); box-shadow: 0 0 0 .45cqw var(--edge), inset 0 .45cqw 0 rgba(255,255,255,.45); }
.beauty .bt b { color: #3a2a18; text-shadow: 0 .3cqw 0 rgba(255,255,255,.55); } .beauty .bt small { color: #3f5a2a; font-weight: 700; }
.beauty .bm b { color: #fff8d8; -webkit-text-stroke: .9cqw #4a6a2a; paint-order: stroke fill; } .beauty .bm small { color: #3f5a2a; }

/* the places in the fog, the enemy camps and the neighbour: their pictures are painted for grass, so the tiles are soft meadow green (the old dark tiles were for the painterly art) */
.card.poi .ic, .card.nbr .ic, .uc-portrait.struct.nbr, .uc-portrait.struct.poi { background: radial-gradient(circle at 50% 35%, #d8f0a8, #98cc6a); }
.card.camp .ic, .uc-portrait.struct.camp { background: radial-gradient(circle at 50% 35%, #f6d8b0, #d9a974); }
.card.poi .ic img, .card.camp .ic img { filter: drop-shadow(0 .5cqw 0 rgba(60,90,30,.25)); }

/* the dog's portrait: the dogs are painted for grass too (a black dog was lost on the old dark tile) */
.uc-portrait.struct.dog { background: radial-gradient(circle at 50% 35%, #fbeab8, #e0bd7c); }


/* ── the new-age celebration (eracard.js draws the sky, island and confetti on #era-fx; these are the texts over it) ── */
#era-card { background: linear-gradient(180deg, color-mix(in srgb, var(--ec, #f0b445) 34%, #fff1cc) 0%, color-mix(in srgb, var(--ec, #f0b445) 70%, #3c2c44) 58%, color-mix(in srgb, var(--ec, #f0b445) 44%, #1c1424) 100%); padding: 0; place-items: stretch; overflow: hidden; animation: eraIn .4s ease both; }
#era-fx { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 1; }
#era-card .era-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 10cqw 6cqw 7cqw; }
.era-ribbon { position: relative; filter: drop-shadow(0 1.2cqw 0 rgba(60,30,10,.35)); animation: ribbonIn .8s cubic-bezier(.2,1.5,.4,1) .12s both; }
.era-ribbon span { display: block; padding: 2.1cqw 11cqw; border-radius: 1.4cqw; background: linear-gradient(180deg, #fff7d6, #f4d98e); color: #5a3a22; font-weight: 900; letter-spacing: .26em; font-size: 3.5cqw; box-shadow: 0 0 0 .8cqw #4a2f1f, inset 0 .7cqw 0 rgba(255,255,255,.7); text-indent: .26em; }
.era-ribbon::before, .era-ribbon::after { content: ''; position: absolute; top: 1.6cqw; width: 9cqw; height: 100%; background: #d9b560; z-index: -1; box-shadow: 0 0 0 .8cqw #4a2f1f; }
.era-ribbon::before { left: -7cqw; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26% 50%); } .era-ribbon::after { right: -7cqw; clip-path: polygon(0 0, 100% 0, 74% 50%, 100% 100%, 0 100%); }
.era-stage { height: 76cqw; flex: none; }
.era-sign { position: relative; transform-origin: 50% -9cqw; animation: signDrop 1.1s cubic-bezier(.25,1.5,.45,1) .55s both, signSway 6s ease-in-out 1.7s infinite; filter: drop-shadow(0 1.8cqw 1.4cqw rgba(0,0,0,.33)); }
.era-sign .rope { position: absolute; top: -13cqw; width: 1cqw; height: 14cqw; background: #e6d29c; box-shadow: 0 0 0 .4cqw #4a2f1f; border-radius: 1cqw; }
.era-sign .rope.l { left: 13cqw; } .era-sign .rope.r { right: 13cqw; }
.era-sign .board { position: relative; display: grid; justify-items: center; gap: .6cqw; min-width: 76cqw; padding: 2.8cqw 9cqw 3.4cqw; border-radius: 4.4cqw; background: repeating-linear-gradient(180deg, transparent 0 8.6cqw, rgba(90,50,20,.22) 8.6cqw 9cqw), linear-gradient(180deg, #e8b27a, #d09a62 50%, #b98250); box-shadow: 0 0 0 .9cqw #4a2f1f, inset 0 .9cqw 0 rgba(255,238,204,.6), inset 0 -1.2cqw 0 rgba(90,50,20,.38); }
.era-sign .board::before, .era-sign .board::after { content: ''; position: absolute; top: 2.2cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #6a4325; box-shadow: inset 0 .4cqw 0 rgba(255,255,255,.4); }
.era-sign .board::before { left: 2.6cqw; } .era-sign .board::after { right: 2.6cqw; }
#era-card .era-inner h1 { margin: 0; font-size: 11.5cqw; line-height: 1.05; white-space: nowrap; color: #fff; -webkit-text-stroke: 1.3cqw #4a2f1f; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #4a2f1f; }
#era-card .era-inner p#era-tag { margin: 0; color: #5a3a22; font-size: 3.4cqw; font-weight: 800; text-shadow: 0 .4cqw 0 rgba(255,240,210,.7); }
#era-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; width: 100%; max-width: 92cqw; margin: 4.4cqw 0 0; padding: 0; }
#era-list li { display: flex; align-items: center; gap: 1.4cqw; padding: 1.7cqw 2.4cqw; border-radius: 2.4cqw; background: linear-gradient(180deg, #fffaf0, #f6e8c4); color: #5a3a22; font-weight: 800; font-size: 2.9cqw; line-height: 1.2; text-align: left; box-shadow: 0 0 0 .6cqw #4a2f1f, 0 .9cqw 0 .6cqw rgba(60,30,10,.35); opacity: 0; animation: chipIn .55s cubic-bezier(.2,1.6,.4,1) both; }
#era-list li::before { content: '★'; flex: none; color: #e8a020; font-size: 3.8cqw; text-shadow: 0 .3cqw 0 #8a5a14; }
#era-list li:nth-child(1) { animation-delay: 1.5s; } #era-list li:nth-child(2) { animation-delay: 1.7s; } #era-list li:nth-child(3) { animation-delay: 1.9s; } #era-list li:nth-child(4) { animation-delay: 2.1s; } #era-list li:nth-child(5) { animation-delay: 2.3s; } #era-list li:nth-child(6) { animation-delay: 2.5s; }
#era-card .era-hint { margin-top: auto; color: #fff4d6; font-weight: 900; letter-spacing: .22em; font-size: 2.8cqw; text-shadow: 0 .5cqw 0 rgba(40,24,12,.75); animation: hintPulse 1.6s ease-in-out 3s infinite both; opacity: 0; }
@keyframes ribbonIn { 0% { transform: translateY(-20cqw) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes chipIn { 0% { transform: translateY(5cqw) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hintPulse { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .35; } }


/* ── the end cards (endcard.js paints the sky, the camp and its people on #end-fx; these are the texts over it) ── */
#gameover { background: #101626; padding: 0; place-items: stretch; backdrop-filter: none; overflow: hidden; }
#end-fx { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 1; }
#gameover .go-card.end-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 8cqw 6cqw 5.5cqw; background: none; box-shadow: none; border: 0; animation: none; text-align: center; }
#gameover .era-stage { height: 71cqw; flex: none; }
#gameover .go-card h1 { margin: 0; font-size: 11.5cqw; line-height: 1.05; white-space: nowrap; color: #ffe0d2; -webkit-text-stroke: 1.3cqw #4a2f1f; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #4a2f1f; }
#gameover.win .go-card h1 { color: #ffe27a; } #gameover.asc .go-card h1 { color: #efe2ff; }
#gameover .go-card p#go-text { margin: 0; max-width: 64cqw; color: #5a3a22; font-size: 3.2cqw; font-weight: 800; line-height: 1.35; text-shadow: 0 .4cqw 0 rgba(255,240,210,.7); }
.end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; width: 100%; max-width: 90cqw; margin-top: 3.6cqw; }
.est { display: flex; align-items: center; gap: 2.2cqw; padding: 1.3cqw 2.4cqw; border-radius: 2.4cqw; background: linear-gradient(180deg, #fffaf0, #f6e8c4); text-align: left; box-shadow: 0 0 0 .6cqw #4a2f1f, 0 .9cqw 0 .6cqw rgba(60,30,10,.35); opacity: 0; animation: chipIn .55s cubic-bezier(.2,1.6,.4,1) both; }
.est .ei { flex: none; display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: #f4cf6a; box-shadow: 0 0 0 .5cqw #4a2f1f, inset 0 .6cqw 0 rgba(255,255,255,.6); color: #4a2f1f; font-size: 4.4cqw; }
.est b { display: block; font-size: 4.6cqw; line-height: 1.05; color: #4a2f1f; font-weight: 900; } .est b small { font-size: 3cqw; opacity: .7; }
.est .el { display: block; font-size: 2.6cqw; font-weight: 800; color: #7a5a3a; line-height: 1.15; }
.end-saga { margin: 2.4cqw 0 0; max-width: 88cqw; min-height: 3cqw; font-size: 2.5cqw; font-weight: 800; line-height: 1.4; color: #fff4d6; text-shadow: 0 .5cqw 0 rgba(40,24,12,.8); animation: chipIn .6s ease 2.7s both; opacity: 0; }
#gameover .go-btns { margin-top: auto; animation: titleUp .8s ease 2.5s both; }

/* the end cards: a title that fits the sign, readable saga text, a quiet third button */
#gameover .go-card h1 { font-size: 9.6cqw; }
#gameover .end-saga { color: #fff4d6; }
#gameover .go-btns { flex-wrap: wrap; justify-content: center; gap: 2cqw; max-width: 90cqw; }
#gameover .go-btns button.ghost { background: none; box-shadow: none; color: #fff4d6; font-size: 3cqw; font-weight: 800; text-decoration: underline; text-shadow: 0 .5cqw 0 rgba(40,24,12,.8); padding: 1cqw 3cqw; }


/* ── defence: the card in the War panel, the dawn report, the ruin's portrait ── */
.defcard { margin: 0 0 3cqw; padding: 3cqw 3.4cqw; border-radius: 3cqw; background: linear-gradient(180deg, #fffaf0, #f6e8c4); box-shadow: 0 0 0 .6cqw var(--edge, #4a2f1f), 0 .9cqw 0 .6cqw rgba(60,30,10,.28); }
.defcard .df-head { display: flex; align-items: center; gap: 2.4cqw; } .defcard .df-head .uic { font-size: 7cqw; color: #4a2f1f; }
.defcard .df-head b { display: block; font-size: 4.6cqw; color: #4a2f1f; font-weight: 900; } .defcard .df-head small { display: block; font-size: 2.9cqw; font-weight: 800; color: #7a5a3a; }
.defcard.exposed .df-head b { color: #c83c32; } .defcard.strained .df-head b { color: #c87a14; } .defcard.holding .df-head b { color: #6a8a1e; } .defcard.secure .df-head b { color: #2e8a3e; }
.df-bar { position: relative; height: 3.6cqw; margin: 2.4cqw 0 .6cqw; border-radius: 2cqw; background: #e0cfa4; box-shadow: inset 0 .5cqw 0 rgba(90,50,20,.25), 0 0 0 .4cqw #4a2f1f; overflow: hidden; }
.df-bar i { display: block; height: 100%; border-radius: 2cqw; transition: width .6s ease; box-shadow: inset 0 .7cqw 0 rgba(255,255,255,.35); } .df-bar em { position: absolute; left: 50%; top: 0; bottom: 0; width: .5cqw; background: #4a2f1f; }
.df-sub { display: flex; justify-content: space-between; font-size: 2.3cqw; font-weight: 800; color: #9a7a52; margin-bottom: 1.6cqw; }
.df-tips { margin: 0 0 1.6cqw; padding: 0 0 0 4cqw; font-size: 2.9cqw; font-weight: 800; color: #5a3a22; line-height: 1.35; } .df-tips li { margin: .4cqw 0; } .df-ok { margin: 0 0 1.6cqw; font-size: 2.9cqw; font-weight: 800; color: #3f7a30; }
#nreport { position: relative; margin: 0 0 2cqw; padding: 3cqw 3.4cqw 3cqw; border-radius: 3cqw; background: linear-gradient(180deg, #fffaf0, #f6e8c4); box-shadow: 0 0 0 .7cqw #4a2f1f, 0 1cqw 0 .7cqw rgba(60,30,10,.35); animation: chipIn .5s cubic-bezier(.2,1.5,.4,1) both; }
#nreport[hidden] { display: none; }
.nr-head { display: flex; align-items: center; gap: 2.4cqw; } .nr-head .uic { font-size: 8cqw; } .nr-head b { display: block; font-size: 4.6cqw; font-weight: 900; letter-spacing: .04em; } .nr-head small { display: block; font-size: 2.9cqw; font-weight: 800; color: #7a5a3a; }
.nr-head.breached b, .nr-head.breached .uic { color: #c83c32; } .nr-head.rough b, .nr-head.rough .uic { color: #c87a14; } .nr-head.held b, .nr-head.held .uic { color: #2e8a3e; }
.nr-chips { display: flex; gap: 1.6cqw; margin: 2.2cqw 0 1.4cqw; } .nrc { flex: 1; display: grid; justify-items: center; padding: 1.2cqw .6cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 0 0 .4cqw #d9bf8a; } .nrc span .uic { font-size: 4cqw; color: #4a2f1f; } .nrc b { font-size: 4.4cqw; color: #4a2f1f; line-height: 1.1; } .nrc small { font-size: 2.2cqw; font-weight: 800; color: #7a5a3a; text-align: center; }
.nr-line { margin: 1cqw 0 0; font-size: 2.9cqw; font-weight: 800; color: #5a3a22; line-height: 1.35; } .nr-line.tip { color: #8a5a14; }
#nreport .btnrow { margin-top: 2.4cqw; }
.uc-portrait.struct.ruin { background: radial-gradient(circle at 50% 35%, #8a8078, #4a423c); }


/* ── "welcome back": the catch-up loading card and the report ── */
#away { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 8cqw; background: radial-gradient(circle at 50% 40%, rgba(255,222,150,.55), rgba(24,16,40,.88) 70%); backdrop-filter: blur(3px); }
#away[hidden] { display: none; }
#away .aw-card { width: 82cqw; padding: 6cqw 5cqw 5cqw; text-align: center; border-radius: 4.4cqw; background: linear-gradient(180deg, #fffaf0, #f6e8c4); box-shadow: 0 0 0 .9cqw #4a2f1f, 0 1.6cqw 0 .9cqw rgba(60,30,10,.4); animation: chipIn .6s cubic-bezier(.2,1.5,.4,1) both; }
#away .aw-sun { width: 17cqw; height: 17cqw; margin: -14cqw auto 2cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6c0, #ffd45a 60%, #f0a030); box-shadow: 0 0 0 1cqw #4a2f1f, 0 0 8cqw 2cqw rgba(255,200,80,.7); animation: awSun 3s ease-in-out infinite; }
#away h2 { margin: 0 0 1.4cqw; font-size: 8cqw; color: #4a2f1f; font-weight: 900; } #away p { margin: 0 0 4cqw; font-size: 3.4cqw; font-weight: 800; color: #6a4a2a; line-height: 1.35; } #away small { display: block; margin-top: 3.4cqw; font-size: 2.7cqw; font-weight: 700; color: #9a7a52; }
#away-bar { height: 4.4cqw; border-radius: 2.4cqw; background: #e0cfa4; box-shadow: inset 0 .6cqw 0 rgba(90,50,20,.25), 0 0 0 .5cqw #4a2f1f; overflow: hidden; } #away-bar i { display: block; width: 0; height: 100%; border-radius: 2.4cqw; background: linear-gradient(180deg, #8fe06a, #3fae48); box-shadow: inset 0 .8cqw 0 rgba(255,255,255,.4); transition: width .15s linear; }
@keyframes awSun { 50% { transform: scale(1.08); } }
.nr-raids { margin: 0; } .nr-raids .nr-line { margin-top: .6cqw; } .nr-line .ok { color: #2e8a3e; } .nr-line .bad { color: #c83c32; }


/* ── the raid replay (replay.js paints the night on #replay-fx; the ribbon, the verdict sign and the buttons are DOM) ── */
#replay { position: absolute; inset: 0; z-index: 38; overflow: hidden; background: #070b22; }
#replay[hidden] { display: none; }
#replay-fx { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#replay .rp-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 8cqw 6cqw 6cqw; pointer-events: none; }
#replay .rp-inner button { pointer-events: auto; }
#rp-time { margin-top: 3cqw; padding: 1.2cqw 4cqw; border-radius: 2cqw; background: rgba(10,14,40,.7); color: #fff4d6; font-weight: 900; font-size: 3.3cqw; letter-spacing: .08em; box-shadow: 0 0 0 .5cqw rgba(255,255,255,.18); }
#replay .rp-sign { position: absolute; left: 50%; bottom: 18.5cqw; margin-left: -37cqw; width: 74cqw; opacity: 0; transform: translateY(8cqw) scale(.8); transition: opacity .4s ease, transform .6s cubic-bezier(.2,1.6,.4,1); animation: none; }
#replay .rp-sign.show { opacity: 1; transform: none; }
#replay .rp-sign .rope { display: none; } #replay .rp-sign .board { min-width: 0; padding: 2.4cqw 6cqw 3cqw; }
#replay .rp-sign h1 { margin: 0; font-size: 9cqw; color: #fff; -webkit-text-stroke: 1.2cqw #4a2f1f; paint-order: stroke fill; text-shadow: 0 1cqw 0 #4a2f1f; white-space: nowrap; } #replay .rp-sign.breached h1 { color: #ffb4a8; } #replay .rp-sign.held h1 { color: #ffe27a; }
#replay .rp-sign p { margin: 0; color: #5a3a22; font-size: 3.1cqw; font-weight: 800; }
#replay .rp-btns { margin-top: auto; display: flex; gap: 2cqw; } #replay .rp-btns .btn { font-size: 3.6cqw; padding: 2cqw 4cqw; }
.rp-watch { margin-left: 1.4cqw; padding: .4cqw 2cqw; border-radius: 2cqw; border: 0; font-size: 2.4cqw; font-weight: 900; color: #fff; background: linear-gradient(180deg, #5b90e8, #3a6cc4); box-shadow: 0 0 0 .4cqw #4a2f1f; cursor: pointer; }

/* ── raiding other kingdoms (assault.js): the hub, the visit, the battle, the result ── */
#assault { position: absolute; inset: 0; z-index: 40; overflow: hidden; background: #1c2a2a; color: #4a2f1f; }
#assault[hidden] { display: none; }
#as-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#as-ui { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; }
#as-ui button, #as-ui .as-panel, #as-ui .as-sheet, #as-ui .as-result, #as-ui .as-plate, #as-ui .as-scoutinfo > *, #as-ui .as-army { pointer-events: auto; }
#as-ui button { font: inherit; cursor: pointer; }
#assault .as-top { position: relative; flex: none; display: flex; justify-content: center; padding: 7cqw 6cqw 0; }
#assault .as-top.scout { padding: 4cqw 3cqw 0; }
#assault .as-x { position: absolute; right: 4cqw; top: 6cqw; width: 10cqw; height: 10cqw; border-radius: 50%; border: 0; background: linear-gradient(180deg, #fff7d6, #f4d98e); box-shadow: 0 0 0 .6cqw #4a2f1f, inset 0 .5cqw 0 rgba(255,255,255,.7); color: #5a3a22; display: grid; place-items: center; padding: 0; }
#assault .as-x .uic { width: 5.4cqw; height: 5.4cqw; } #assault .as-x.small { position: static; width: 8cqw; height: 8cqw; }
#assault .as-panel { margin: 5cqw 4cqw 0; flex: 1; min-height: 0; overflow-y: auto; padding: 4cqw; border-radius: 4cqw; background: linear-gradient(180deg, #fff8e6, #f6e4b8); box-shadow: 0 0 0 .8cqw #6a4325, 0 1.4cqw 0 .8cqw rgba(106,67,37,.34); }
#assault .as-league { display: flex; gap: 3.4cqw; align-items: center; }
#assault .as-badge { flex: none; width: 15cqw; height: 15cqw; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #fff, var(--lc)); box-shadow: 0 0 0 .7cqw #4a2f1f, inset 0 -1cqw 0 rgba(0,0,0,.18); display: grid; place-items: center; color: #4a2f1f; }
#assault .as-badge .uic { width: 8cqw; height: 8cqw; }
#assault .as-lg { flex: 1; min-width: 0; } #assault .as-lg b { display: block; font-size: 4.8cqw; } #assault .as-lg small { color: #8a6a4a; font-size: 3cqw; font-weight: 800; }
#assault .as-bar { height: 2.6cqw; border-radius: 2cqw; background: rgba(106,67,37,.16); margin-top: 1.4cqw; overflow: hidden; box-shadow: inset 0 0 0 .4cqw rgba(106,67,37,.4); }
#assault .as-bar i { display: block; height: 100%; border-radius: 2cqw; background: var(--lc); box-shadow: inset 0 -.6cqw 0 rgba(0,0,0,.18), inset 0 .5cqw 0 rgba(255,255,255,.5); }
#assault .as-chips { display: flex; gap: 2cqw; margin: 3.2cqw 0 1cqw; }
#assault .as-chips span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1.6cqw 1cqw; border-radius: 2.6cqw; background: #f3e1b0; box-shadow: 0 0 0 .4cqw #6a4325, inset 0 .4cqw 0 rgba(255,255,255,.7); }
#assault .as-chips .uic { width: 4.4cqw; height: 4.4cqw; color: #8a5a22; } #assault .as-chips b { font-size: 4.4cqw; line-height: 1.1; } #assault .as-chips small { font-size: 2.4cqw; font-weight: 800; color: #8a6a4a; }
#assault .as-sec { margin: 4cqw 0 2cqw; font-weight: 900; font-size: 3.8cqw; letter-spacing: .02em; display: flex; justify-content: space-between; align-items: baseline; } #assault .as-sec small { font-size: 2.8cqw; color: #8a6a4a; font-weight: 800; }
#assault .as-note { margin: 2cqw 0; font-size: 2.9cqw; line-height: 1.45; color: #8a6a4a; font-weight: 700; }
#assault .as-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
#assault .as-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5cqw; padding: 2.4cqw 1cqw 2cqw; border-radius: 3cqw; border: 0; background: linear-gradient(180deg, #fffdf5, #f8ebc8); box-shadow: 0 0 0 .5cqw #6a4325, 0 .9cqw 0 .5cqw rgba(106,67,37,.3); color: #4a2f1f; min-width: 0; }
#assault .as-slot:active { transform: translateY(.6cqw); }
#assault .as-slot b { font-size: 3.5cqw; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #assault .as-slot small { font-size: 2.5cqw; color: #8a6a4a; font-weight: 800; } #assault .as-slot em { font-style: normal; font-size: 2.3cqw; color: #8a6a4a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#assault .as-slot.empty, #assault .as-slot.locked { justify-content: center; min-height: 31cqw; background: rgba(106,67,37,.08); box-shadow: 0 0 0 .5cqw rgba(106,67,37,.4); border: 0; }
#assault .as-slot.empty i { width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(106,67,37,.14); color: #8a6a4a; } #assault .as-slot.empty .uic, #assault .as-slot.locked .uic { width: 6cqw; height: 6cqw; }
#assault .as-slot.locked { color: #a78a68; box-shadow: 0 0 0 .5cqw rgba(106,67,37,.25); } #assault .as-slot.hurt { filter: saturate(.5); }
#assault .as-face { position: relative; width: 13cqw; height: 13cqw; flex: none; } #assault .as-face img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #fff1c8, #e8c984); box-shadow: 0 0 0 .5cqw #6a4325; image-rendering: pixelated; }
#assault .as-cls { position: absolute; right: -1.2cqw; bottom: -1cqw; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #5d6bd8; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 .4cqw #fff7e0, 0 0 0 .8cqw #4a2f1f; } #assault .as-cls .uic { width: 3.2cqw; height: 3.2cqw; }
#assault .as-hp { width: 100%; height: 1.5cqw; border-radius: 1cqw; background: rgba(0,0,0,.2); overflow: hidden; margin-top: .6cqw; } #assault .as-hp i { display: block; height: 100%; background: #6fbf5a; border-radius: 1cqw; transition: width .15s linear; }
#assault .as-hist { display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 2.4cqw; margin-bottom: 1.6cqw; border-radius: 2.6cqw; background: rgba(106,67,37,.08); } #assault .as-hist b { font-size: 3.4cqw; } #assault .as-hist small { flex: 1; font-size: 2.8cqw; color: #8a6a4a; font-weight: 800; } #assault .as-hist em { font-style: normal; font-weight: 900; font-size: 3.6cqw; } #assault em.up, #assault b.up { color: #2f9a4a; } #assault em.down, #assault b.down { color: #d04a3a; }
#assault .st { display: inline-flex; gap: .4cqw; } #assault .st i, #assault .as-stars i, #assault .as-bigstars i { display: inline-block; width: 4.2cqw; height: 4.2cqw; background: rgba(60,40,24,.35); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } #assault .st i.on, #assault .as-stars i.on, #assault .as-bigstars i.on { background: linear-gradient(180deg, #fff3a0, #ffb92a); }
#assault .as-bottom { margin-top: auto; flex: none; padding: 3cqw 3.4cqw 4cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
#assault .as-bottom .btnrow { display: flex; gap: 2.4cqw; justify-content: center; margin: 0; } #assault .as-bottom .btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4cqw; font-size: 3.8cqw; padding: 2.6cqw 2cqw; } #assault .as-bottom .btn small { font-size: 2.4cqw; font-weight: 800; opacity: .75; } #assault .as-bottom .btn.primary { flex: 1.5; } #assault .btn.dim { opacity: .55; }
#assault .as-bottom .btn .uic { width: 5cqw; height: 5cqw; }
#assault .as-go { width: 100%; font-size: 4.8cqw !important; padding: 3.6cqw 2cqw !important; }
#assault .as-army { position: relative; display: flex; flex-wrap: wrap; gap: 1.5cqw; justify-content: center; padding: 2cqw 2.4cqw; border-radius: 4cqw; background: rgba(40,26,18,.82); box-shadow: 0 0 0 .5cqw rgba(255,240,200,.25); }
#assault .as-card { position: relative; width: 9.8cqw; border: 0; border-radius: 2.4cqw; background: linear-gradient(180deg, #fffdf5, #f1dfae); box-shadow: 0 0 0 .45cqw #6a4325; padding: .8cqw .7cqw .9cqw; transition: transform .12s ease; color: #4a2f1f; }
#assault .as-card img { display: block; width: 100%; height: 8.4cqw; object-fit: contain; image-rendering: pixelated; } #assault .as-card .as-cls { width: 4.2cqw; height: 4.2cqw; right: -.8cqw; bottom: 2.4cqw; } #assault .as-card .as-cls .uic { width: 2.6cqw; height: 2.6cqw; }
#assault .as-card.empty { background: rgba(255,255,255,.08); box-shadow: 0 0 0 .4cqw rgba(255,240,200,.25); height: 12.4cqw; } #assault .as-card.hurt { filter: saturate(.3); opacity: .6; }
#assault .as-card.sel { transform: translateY(-2.4cqw); box-shadow: 0 0 0 .8cqw #ffd45a, 0 0 4cqw rgba(255,212,90,.85); } #assault .as-card.out { opacity: .45; filter: grayscale(.35); } #assault .as-card.down { opacity: .35; filter: grayscale(1); }
#assault .as-edit { position: absolute; right: -1.4cqw; top: -3.2cqw; width: 8cqw; height: 8cqw; border-radius: 50%; border: 0; background: linear-gradient(180deg, #fff7d6, #f4d98e); box-shadow: 0 0 0 .5cqw #4a2f1f; color: #5a3a22; display: grid; place-items: center; padding: 0; } #assault .as-edit .uic { width: 4.4cqw; height: 4.4cqw; }
#assault .as-plate { display: flex; align-items: center; gap: 3cqw; width: 100%; padding: 2.4cqw 3.4cqw; border-radius: 4cqw; background: linear-gradient(180deg, #fff8e6, #f6e4b8); box-shadow: 0 0 0 .7cqw #6a4325, 0 1.2cqw 0 .7cqw rgba(106,67,37,.34); animation: asDrop .6s cubic-bezier(.2,1.5,.4,1) both; }
#assault .as-emblem { flex: none; width: 12cqw; height: 12cqw; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, hsl(var(--h),70%,78%), hsl(var(--h),55%,46%)); box-shadow: 0 0 0 .6cqw #4a2f1f; color: #fff; } #assault .as-emblem .uic { width: 6.4cqw; height: 6.4cqw; }
#assault .as-pl { flex: 1; min-width: 0; } #assault .as-pl b { display: block; font-size: 5.2cqw; line-height: 1.1; } #assault .as-pl small { font-size: 2.9cqw; font-weight: 800; color: #8a6a4a; }
#assault .as-lv { text-align: center; padding: 1.4cqw 3cqw; border-radius: 3cqw; background: #5d6bd8; color: #fff; box-shadow: 0 0 0 .4cqw #4a2f1f; } #assault .as-lv b { display: block; font-size: 4.2cqw; line-height: 1.1; } #assault .as-lv small { font-size: 2.4cqw; font-weight: 800; opacity: .85; }
#assault .as-scoutinfo { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; padding: 2.4cqw 3cqw 0; pointer-events: none; }
#assault .as-chips2 { display: flex; flex-wrap: wrap; gap: 1.4cqw; justify-content: center; } #assault .as-chips2 .pill { display: inline-flex; align-items: center; gap: .8cqw; padding: .9cqw 2.2cqw; font-size: 2.8cqw; font-weight: 900; box-shadow: 0 0 0 .35cqw #4a2f1f; background: #fff8e6; } #assault .as-chips2 .pill .uic { width: 3.2cqw; height: 3.2cqw; }
#assault .as-chips2 .pill.red { background: #e04a40; color: #fff; } #assault .as-chips2 .pill.gold { background: #ffcf3f; color: #3a2503; } #assault .as-chips2 .pill.good { background: #3fb85a; color: #fff; }
#assault .as-offer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1cqw 3cqw; max-width: 92cqw; padding: 1.4cqw 3cqw; border-radius: 3.4cqw; background: rgba(40,26,18,.82); color: #fff4d6; font-size: 3cqw; font-weight: 800; } #assault .as-offer .win b { color: #8aeaa0; } #assault .as-offer .lose b { color: #ff9a8a; } #assault .as-offer .loot { display: flex; flex-wrap: wrap; justify-content: center; flex-basis: 100%; gap: 1cqw 1.4cqw; align-items: center; } #assault .as-offer .chip { background: rgba(255,255,255,.14); color: #fff4d6; box-shadow: none; padding: .4cqw 1.6cqw; font-size: 3cqw; } #assault .as-offer .chip img { width: 4cqw; height: 4cqw; }
#assault .as-warn, #assault .as-hint2 { font-size: 2.6cqw; font-weight: 800; color: #fff4d6; text-shadow: 0 .3cqw 0 rgba(0,0,0,.6); background: rgba(40,26,18,.55); padding: .5cqw 2.4cqw; border-radius: 2cqw; }
#assault .as-hud { display: flex; justify-content: space-between; align-items: flex-start; padding: 4.6cqw 3.6cqw 0; pointer-events: none; }
#assault .as-surr { pointer-events: auto; border: 0; border-radius: 3cqw; padding: 2cqw 3.4cqw; background: linear-gradient(180deg, #ff8a7a, #e0483a); color: #fff; font-weight: 900; font-size: 3cqw; box-shadow: 0 0 0 .6cqw #4a2f1f, inset 0 .5cqw 0 rgba(255,255,255,.4); }
#assault .as-clock { text-align: center; padding: 1cqw 5cqw 1.2cqw; border-radius: 3.4cqw; background: rgba(40,26,18,.84); color: #fff4d6; box-shadow: 0 0 0 .5cqw rgba(255,240,200,.3); } #assault .as-clock small { display: block; font-size: 2cqw; font-weight: 900; letter-spacing: .12em; opacity: .75; } #assault .as-clock b { font-size: 8cqw; line-height: 1; font-variant-numeric: tabular-nums; } #assault .as-clock b.low { color: #ff8a7a; animation: asPulse .6s infinite alternate; }
#assault .as-score { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .6cqw; padding: 1.4cqw 2.4cqw; border-radius: 3cqw; background: rgba(40,26,18,.84); box-shadow: 0 0 0 .5cqw rgba(255,240,200,.3); } #assault .as-score b { color: #fff4d6; font-size: 5cqw; line-height: 1; } #assault .as-stars i { width: 6.2cqw; height: 6.2cqw; background: rgba(255,255,255,.3); } #assault .as-stars i.pop, #assault .as-bigstars i.pop { animation: asStar .5s cubic-bezier(.2,1.8,.4,1); }
#assault .as-lootbar { display: flex; gap: 1.6cqw; justify-content: center; min-height: 7cqw; padding: 1.6cqw 3cqw 0; pointer-events: none; } #assault .as-lootbar .chip { background: rgba(40,26,18,.78); color: #fff4d6; box-shadow: none; padding: .6cqw 2cqw; font-size: 3.2cqw; } #assault .as-lootbar .chip img { width: 4.2cqw; height: 4.2cqw; } #assault .as-lootbar small { font-size: 2.6cqw; font-weight: 800; color: #fff4d6; background: rgba(40,26,18,.5); padding: .4cqw 2cqw; border-radius: 2cqw; }
#assault .as-hint { align-self: center; margin-top: 4cqw; padding: 1.6cqw 4cqw; border-radius: 3cqw; background: rgba(255,248,230,.94); color: #4a2f1f; font-weight: 800; font-size: 3.2cqw; box-shadow: 0 0 0 .5cqw #6a4325; transition: opacity .4s ease, transform .4s ease; pointer-events: none; } #assault .as-hint.gone { opacity: 0; transform: translateY(-3cqw); } #assault .as-hint b { color: #d04a3a; }
#assault .as-tools { display: flex; justify-content: flex-end; gap: 2cqw; margin-top: -1cqw; } #assault .as-tools button { border: 0; border-radius: 3cqw; padding: 1.6cqw 3.4cqw; background: linear-gradient(180deg, #fff7d6, #f4d98e); color: #5a3a22; font-weight: 900; font-size: 3.4cqw; box-shadow: 0 0 0 .5cqw #4a2f1f, inset 0 .5cqw 0 rgba(255,255,255,.7); display: flex; align-items: center; gap: 1.2cqw; } #assault .as-horn .uic { width: 5cqw; height: 5cqw; } #assault .as-horn small { font-size: 2.8cqw; font-weight: 900; } #assault .as-horn.used { opacity: .45; filter: grayscale(.6); }
#assault .as-sheet { position: absolute; left: 3cqw; right: 3cqw; bottom: 3cqw; top: 22cqw; display: flex; flex-direction: column; border-radius: 4cqw; padding: 3.4cqw; background: linear-gradient(180deg, #fff8e6, #f6e4b8); box-shadow: 0 0 0 .8cqw #6a4325, 0 0 0 100cqw rgba(10,14,28,.55); animation: asUp .25s ease both; pointer-events: auto; z-index: 3; }
#assault .as-sh-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2cqw; } #assault .as-sh-head b { font-size: 4.4cqw; }
#assault .as-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1.8cqw; } #assault .as-sheet .btnrow { margin-top: 2cqw; display: flex; justify-content: center; }
#assault .as-row { display: flex; align-items: center; gap: 3cqw; padding: 2cqw 2.6cqw; border-radius: 3cqw; background: linear-gradient(180deg, #fffdf5, #f8ebc8); box-shadow: 0 0 0 .45cqw #6a4325; cursor: pointer; } #assault .as-row.cur { box-shadow: 0 0 0 .7cqw #e8a020, 0 0 0 1.2cqw #6a4325; } #assault .as-row.hurt { opacity: .6; }
#assault .as-rx { flex: 1; min-width: 0; } #assault .as-rx b { font-size: 3.5cqw; display: flex; flex-wrap: wrap; gap: 1cqw; align-items: center; } #assault .as-rx small { display: block; font-size: 2.6cqw; color: #8a6a4a; font-weight: 800; margin-top: .4cqw; } #assault .as-ra { display: flex; flex-direction: column; gap: 1cqw; align-items: flex-end; } #assault .as-ra .btn.small { font-size: 2.8cqw; padding: 1cqw 2.4cqw; }
#assault .pill { display: inline-block; padding: .3cqw 1.6cqw; border-radius: 2cqw; font-size: 2.4cqw; font-weight: 900; background: rgba(106,67,37,.14); } #assault .pill.lv { background: #5d6bd8; color: #fff; } #assault .pill.gold { background: #ffcf3f; color: #3a2503; } #assault .pill.red { background: #e04a40; color: #fff; }
#assault .as-search { margin: auto; text-align: center; padding: 7cqw 9cqw; border-radius: 5cqw; background: rgba(255,248,230,.95); box-shadow: 0 0 0 .8cqw #6a4325; pointer-events: auto; } #assault .as-search b { display: block; font-size: 5cqw; margin-top: 2cqw; } #assault .as-search small { font-size: 3cqw; color: #8a6a4a; font-weight: 800; }
#assault .as-spin { width: 18cqw; height: 18cqw; margin: 0 auto; color: #c9822a; animation: asSpin 1.1s cubic-bezier(.5,0,.5,1) infinite; } #assault .as-spin .uic { width: 100%; height: 100%; }
#assault[data-scr="result"] #as-ui { background: rgba(10,14,28,.6); justify-content: center; align-items: center; }
#assault .as-result { width: 88cqw; max-height: 160cqw; overflow-y: auto; padding: 5cqw 5cqw 4cqw; border-radius: 5cqw; background: linear-gradient(180deg, #fff8e6, #f6e4b8); box-shadow: 0 0 0 .9cqw #6a4325, 0 1.6cqw 0 .9cqw rgba(106,67,37,.34); text-align: center; animation: asDrop .6s cubic-bezier(.2,1.4,.4,1) both; }
#assault .as-rt b { display: block; font-size: 8cqw; letter-spacing: .04em; color: #fff; -webkit-text-stroke: 1.2cqw #4a2f1f; paint-order: stroke fill; text-shadow: 0 1cqw 0 #4a2f1f; } #assault .as-result.win .as-rt b { color: #ffe27a; } #assault .as-result.lose .as-rt b { color: #ffb4a8; } #assault .as-rt small { display: block; margin-top: 1cqw; color: #8a6a4a; font-weight: 800; font-size: 3.2cqw; }
#assault .as-bigstars { display: flex; gap: 2cqw; justify-content: center; margin: 3cqw 0; } #assault .as-bigstars i { width: 17cqw; height: 17cqw; filter: drop-shadow(0 1cqw 0 rgba(74,47,31,.4)); } #assault .as-bigstars i:nth-child(2) { margin-top: -3cqw; }
#assault .as-rrow { display: flex; justify-content: space-around; gap: 2cqw; margin: 1cqw 0 2cqw; } #assault .as-rrow b { display: block; font-size: 6cqw; line-height: 1.1; } #assault .as-rrow small { font-size: 2.8cqw; font-weight: 800; color: #8a6a4a; }
#assault .as-promo { margin: 1cqw 0 2cqw; padding: 1.8cqw 3cqw; border-radius: 3cqw; background: linear-gradient(180deg, #fff3a0, #ffc23a); font-weight: 900; font-size: 3.4cqw; box-shadow: 0 0 0 .5cqw #6a4325; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; } #assault .as-promo .uic { width: 4.6cqw; height: 4.6cqw; } #assault .as-promo.bad { background: #ffd8cf; }
#assault .as-lootrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8cqw; } #assault .as-lootrow .chip small.warn { color: #c0392b; margin-left: 1cqw; font-size: 2.4cqw; }
#assault .as-fates { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4cqw; } #assault .as-fate { width: 15cqw; display: flex; flex-direction: column; align-items: center; } #assault .as-fate b { font-size: 2.8cqw; } #assault .as-fate small { font-size: 2.2cqw; color: #8a6a4a; font-weight: 800; } #assault .as-fate.down { opacity: .6; } #assault .as-fate .as-face { width: 10cqw; height: 10cqw; }
#assault .as-result .btnrow { display: flex; gap: 2cqw; justify-content: center; margin-top: 4cqw; } #assault .as-result .btn { flex: 1; font-size: 3.4cqw; padding: 2.4cqw 1cqw; display: flex; align-items: center; justify-content: center; gap: 1cqw; } #assault .as-result .btn .uic { width: 4.2cqw; height: 4.2cqw; }
.raidcard { display: flex; align-items: center; gap: 3cqw; padding: 3cqw; margin: 0 0 3cqw; border-radius: 3.4cqw; background: linear-gradient(180deg, #fff3d6, #f6cf94); box-shadow: 0 0 0 .5cqw var(--edge), 0 1cqw 0 .5cqw var(--soft); } .raidcard .rc-badge { flex: none; width: 12cqw; height: 12cqw; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #fff, var(--c)); box-shadow: 0 0 0 .5cqw var(--edge); color: #4a2f1f; } .raidcard .rc-badge .uic { width: 6.4cqw; height: 6.4cqw; } .raidcard .rc-tx { flex: 1; min-width: 0; } .raidcard .rc-tx b { display: block; font-size: 4cqw; } .raidcard .rc-tx small { color: var(--mute); font-size: 2.8cqw; font-weight: 800; }
@keyframes asDrop { from { transform: translateY(-8cqw) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes asUp { from { transform: translateY(10cqw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes asSpin { from { transform: rotate(-20deg); } 50% { transform: rotate(160deg) scale(1.1); } to { transform: rotate(340deg); } }
@keyframes asStar { 0% { transform: scale(0.2) rotate(-40deg); } 60% { transform: scale(1.5) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes asPulse { from { opacity: 1; } to { opacity: .55; } }

#assault .as-peek { display: block; margin: 3cqw auto 0; border: 0; background: none; color: #5d6bd8; font-weight: 900; font-size: 3cqw; text-decoration: underline; }
#assault.peek .as-result { display: none; } #assault.peek[data-scr="result"] #as-ui { background: transparent; }
#assault.peek[data-scr="result"] #as-ui::after { content: 'Tap the grass to come back'; position: absolute; left: 50%; bottom: 8cqw; transform: translateX(-50%); padding: 2cqw 4cqw; border-radius: 3cqw; background: rgba(40,26,18,.85); color: #fff4d6; font-weight: 900; font-size: 3.2cqw; }

#assault .as-zoom { position: absolute; right: 3cqw; top: 46%; display: flex; flex-direction: column; gap: 2cqw; z-index: 2; }
#assault .as-zoom button { width: 10.5cqw; height: 10.5cqw; border-radius: 50%; border: 0; background: rgba(255,248,230,.95); color: #5a3a22; box-shadow: 0 0 0 .5cqw #6a4325, 0 .8cqw 0 .5cqw rgba(0,0,0,.25); display: grid; place-items: center; padding: 0; }
#assault .as-zoom button:active { transform: translateY(.5cqw); } #assault .as-zoom .uic { width: 5.2cqw; height: 5.2cqw; }
#assault .as-bottom .as-hint2 { align-self: center; pointer-events: none; margin-bottom: -.6cqw; }

/* ── raids on your kingdom (siege.js): the defence card, the log, the dawn card ── */
#assault .as-def { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 3cqw; border-radius: 3cqw; background: rgba(106,67,37,.08); box-shadow: inset 0 0 0 .5cqw var(--c); }
#assault .as-dl { flex: 1; min-width: 0; } #assault .as-dl b { display: block; font-size: 4.2cqw; color: var(--c); filter: brightness(.72); } #assault .as-dl small { font-size: 2.7cqw; color: #8a6a4a; font-weight: 800; }
#assault .as-tips { margin: 1.6cqw 0 0; padding-left: 5cqw; font-size: 2.8cqw; color: #8a6a4a; font-weight: 700; line-height: 1.45; }
#assault .as-defrow { flex-wrap: wrap; }
.rp-watch.rev { background: linear-gradient(180deg, #ff9a6a, #e0583a); }
.nr-siege { margin: 2cqw 0 1cqw; padding: 2cqw 3cqw; border-radius: 2.6cqw; background: rgba(106,67,37,.08); box-shadow: inset .8cqw 0 0 #e0583a; } .nr-siege.ok { box-shadow: inset .8cqw 0 0 #58b858; }
.nr-siege b { display: block; font-size: 3.4cqw; } .nr-siege small { display: block; font-size: 2.6cqw; color: var(--mute); font-weight: 800; margin-top: .4cqw; } .nr-sgb { display: flex; gap: 2cqw; margin-top: 1.4cqw; } .nr-sgb .rp-watch { margin-left: 0; }
#assault .rp-watch { font-size: 2.7cqw; padding: .7cqw 2.2cqw; margin-left: auto; } #assault .rp-watch + .rp-watch { margin-left: 1.4cqw; } #assault .as-def .btn.small { font-size: 3cqw; padding: 1.6cqw 3cqw; }
.raidcard .rc-tx small { display: block; line-height: 1.35; }

/* ── the hearth: the fire card (hearth.js) ── */
.card.hearth .hearth-ic { display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #fff0b8, #f2c978 70%); border-radius: 2.4cqw; }
.card.hearth .hearth-ic img { width: 86%; image-rendering: pixelated; }
.card.hearth.dead { background: #f1d6c4; box-shadow: inset 0 0 0 .5cqw #c2563a; }
.card.hearth.dead .hearth-ic { background: radial-gradient(circle at 50% 60%, #cfc6bd, #8f867d 75%); }
.card.hearth.up { opacity: .96; }
.hbar { display: grid; grid-template-columns: 11cqw 1fr auto; align-items: center; gap: 1.6cqw; margin-top: 1.2cqw; font-size: 2.7cqw; }
.hbar > span { color: #7a5a3a; font-weight: 700; }
.hbar > b { font-variant-numeric: tabular-nums; color: #6a4325; }
.meter.ward > div { background: linear-gradient(90deg, #ffe08a, #ffb23a); }
.hbens .chip.ben svg { width: 3.4cqw; height: 3.4cqw; margin-right: .8cqw; vertical-align: -.5cqw; }

/* ── $TDG: the coin pill and the Vault (tdg.js, vault.js) ── */
#hud-sub { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqw; pointer-events: none; }
#hud-sub > * { pointer-events: auto; }
.tdg-pill { margin-left: auto; position: relative; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.1cqw 3.2cqw 1.1cqw 1.8cqw; border-radius: 6cqw; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 3.7cqw; color: #5a3406;
  background: linear-gradient(180deg, #ffe08a, #f3b230); box-shadow: 0 0 0 .55cqw #7a4a14, inset 0 .5cqw 0 rgba(255,255,255,.65), 0 1.1cqw 0 .55cqw #b47a24; }
.tdg-pill img { width: 5.4cqw; height: 5.4cqw; image-rendering: pixelated; }
.tdg-pill.ready::after { content: ''; position: absolute; top: -.6cqw; right: -.4cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #e8452e; box-shadow: 0 0 0 .5cqw #fff3d0; animation: tdgpulse 1.2s ease-in-out infinite; }
.tdg-pill.bump { animation: tdgbump .45s ease; }
@keyframes tdgbump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes tdgpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.tdg-fly { position: absolute; right: 1cqw; top: 100%; font-weight: 900; font-size: 4cqw; text-shadow: 0 .3cqw 0 #fff7; pointer-events: none; animation: tdgfly 1.4s ease-out forwards; }
.tdg-fly.up { color: #2f8a3a; } .tdg-fly.down { color: #c24a2c; }
@keyframes tdgfly { 0% { opacity: 0; transform: translateY(-2cqw); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(7cqw); } }
.tdg-coin { width: 5.4cqw; height: 5.4cqw; image-rendering: pixelated; vertical-align: -1cqw; } .tdg-coin.s { width: 3.8cqw; height: 3.8cqw; vertical-align: -.6cqw; margin-right: .6cqw; } .tdg-coin.l { width: 100%; height: 100%; }
.tdg-big { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff0b8, #f2c978 75%); border-radius: 2.4cqw; width: 15cqw !important; height: 15cqw !important; padding: 2cqw; box-sizing: border-box; }
.tdg-unit { font-size: 2.8cqw; color: #8a6a3a; font-weight: 700; margin-left: 1cqw; }
.tdg-price { display: inline-flex; align-items: center; font-weight: 800; } .tdg-price.no { opacity: .55; }
.tdg-days { display: flex; gap: 1.2cqw; margin: 1.2cqw 0; } .tdg-days span { flex: 1; text-align: center; border-radius: 1.6cqw; background: #e6d0a0; padding: .8cqw 0; font-size: 3cqw; color: #8a6a3a; box-shadow: inset 0 0 0 .3cqw rgba(106,67,37,.25); }
.tdg-days span.got { background: #f4c84a; color: #5a3406; } .tdg-days span.next { background: #ffe9a6; box-shadow: 0 0 0 .5cqw #e8a020; color: #5a3406; } .tdg-days i { font-style: normal; font-weight: 800; }
.tdg-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(26cqw, 1fr)); gap: 2cqw; margin: 1cqw 0 2cqw; }
.tdg-skin { display: grid; justify-items: center; gap: .6cqw; padding: 2cqw 1cqw; border-radius: 3cqw; border: 0; background: #f6e7bf; font: inherit; color: #5a3b1e; cursor: pointer; box-shadow: inset 0 0 0 .4cqw rgba(106,67,37,.3); }
.tdg-skin.on { background: #fff0b8; box-shadow: 0 0 0 .6cqw #e8a020; } .tdg-skin:disabled { opacity: .5; cursor: default; }
.tdg-skin .sw { width: 13cqw; height: 13cqw; display: grid; place-items: center; background: #3a2c1c; border-radius: 2.4cqw; } .tdg-skin .sw img { width: 86%; image-rendering: pixelated; } .tdg-skin small { font-size: 2.6cqw; color: #8a6a3a; }
.tdg-earn { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; font-size: 3cqw; margin-bottom: 2cqw; } .tdg-earn span { background: #f3e2b4; border-radius: 2cqw; padding: 1.4cqw 2cqw; } .tdg-earn b { color: #9a5a0a; }
.tdg-led { font-size: 3cqw; display: grid; gap: .6cqw; margin-bottom: 2cqw; } .tdg-led div { display: grid; grid-template-columns: 1fr auto 9cqw; gap: 2cqw; padding: .8cqw 2cqw; background: #f3e2b4; border-radius: 1.6cqw; }
.tdg-led b.in { color: #2f8a3a; } .tdg-led b.out { color: #c24a2c; } .tdg-led i { font-style: normal; color: #8a6a3a; text-align: right; }
.card.hearth.dead .hbtns { display: grid; gap: 1.4cqw; justify-items: stretch; }

/* ── the camp guide in the coach bar: tips, the next step (tips.js) ── */
#coach-go { background: linear-gradient(180deg, #7bd24a, #3f9a2c); color: #fff; font-size: 3.1cqw; font-weight: 800; padding: 1.4cqw 3cqw; border-radius: 2.4cqw; border: 0; cursor: pointer; text-shadow: 0 .25cqw 0 rgba(0,0,0,.3); box-shadow: 0 0 0 .4cqw #2a6a1c, inset 0 .4cqw 0 rgba(255,255,255,.4); white-space: nowrap; }
#coach .step.tip { background: #3f9a2c; }
.btn.small.ghost { background: #f1e3bf; color: #7a5a3a; padding-left: 2.4cqw; padding-right: 2.4cqw; box-shadow: 0 0 0 .4cqw rgba(106,67,37,.25); }
.btn.small.ghost .uic { font-size: 4cqw; }

/* ── build cards: the picture is a fitted thumbnail (ui.js structThumb), always inside its frame ── */
.bcard .bi { overflow: hidden; display: block; position: relative; }
.bcard:not(.wcard) .bi img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.bcard.locked .bi img { filter: brightness(0) opacity(.45); }

/* ── a clean resource bar: ONE plate with naked icons, four to a row, instead of up to eight outlined bubbles squeezed into one line ── */
#resbar, #resbar.many { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4cqw 0; padding: 1.1cqw 1.4cqw; border-radius: 4cqw;
  background: linear-gradient(180deg, #fffaec, #f4e2b4); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.9), 0 1cqw 0 .5cqw var(--soft); }
#resbar .res, #resbar.many .res { height: auto; min-height: 7.4cqw; padding: .5cqw .4cqw; border-radius: 2cqw; background: none; box-shadow: none; justify-content: center; gap: 1.1cqw; min-width: 0; }
#resbar .res img, #resbar.many .res img { width: 6cqw; height: 6cqw; padding: 0; border-radius: 0; background: none !important; box-shadow: none; filter: drop-shadow(0 .35cqw 0 rgba(106,67,37,.25)); }
#resbar .res .duo, #resbar.many .res .duo { gap: 0; } #resbar .res .duo img, #resbar.many .res .duo img { width: 4.8cqw; height: 4.8cqw; margin-right: -1cqw; }
#resbar .res b, #resbar.many .res b { font-size: 4cqw; font-weight: 900; color: var(--brown2); text-shadow: none; white-space: nowrap; }
#resbar .res small, #resbar.many .res small { display: inline; font-size: 2.4cqw; font-weight: 800; margin-left: -.2cqw; color: #3f9a4a; }
#resbar .res.low small { color: #d6402f; } #resbar .res.low b { color: #d6402f; }
#fuel-wrap .cap { white-space: nowrap; font-size: 2.2cqw; letter-spacing: .05em; }

/* ── gift pets: the Pet Den (pets.js) ── */
.petgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4cqw; margin-bottom: 2cqw; }
.petcard { position: relative; display: grid; justify-items: center; gap: 1cqw; padding: 2cqw 1.8cqw 2.2cqw; border-radius: 3.2cqw; text-align: center; background: linear-gradient(180deg, #fffdf5, #f8ebc8); color: #4a2f1f;
  box-shadow: 0 0 0 .45cqw var(--edge), inset 0 .45cqw 0 rgba(255,255,255,.9), 0 .9cqw 0 .45cqw rgba(106,67,37,.24); }
.petcard.eq { box-shadow: 0 0 0 .7cqw #e8a020, 0 0 0 1.2cqw var(--edge), 0 1.2cqw 0 1.2cqw rgba(106,67,37,.24); background: linear-gradient(180deg, #fff3c8, #f6dc8c); }
.petcard .pbg { position: relative; width: 100%; aspect-ratio: 1.15; border-radius: 2.6cqw; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 .4cqw rgba(0,0,0,.28), inset 0 .5cqw 0 rgba(255,255,255,.18); }
.petcard .pbg::before { content: ''; position: absolute; inset: 0; opacity: .13; background: radial-gradient(circle, #fff 0 .55cqw, transparent .6cqw) 0 0 / 5cqw 5cqw; }
.petcard .pbg img { position: relative; width: 78%; height: 78%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 .7cqw 0 rgba(0,0,0,.28)); }
.petcard.lock .pbg img { filter: drop-shadow(0 .7cqw 0 rgba(0,0,0,.28)) saturate(.55) brightness(.85); }
.petcard .pbg .soon { font-size: 9cqw; font-weight: 900; color: rgba(255,255,255,.5); }
.petcard .pnum { position: absolute; right: 1.4cqw; bottom: 1cqw; font-style: normal; font-weight: 800; font-size: 2.6cqw; color: #fff; text-shadow: 0 .3cqw 0 rgba(0,0,0,.5); }
.petcard b { font-size: 3.6cqw; font-weight: 900; line-height: 1.1; }
.petcard .ptier { font-size: 2.5cqw; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--tc, #a89c88); padding: .3cqw 2cqw; border-radius: 2cqw; text-shadow: 0 .25cqw 0 rgba(0,0,0,.35); }
.petcard small { font-size: 2.6cqw; line-height: 1.3; color: #7a5a3a; font-weight: 700; } .petcard small strong { color: #4a2f1f; }
.petsoon .chip { font-size: 2.6cqw; opacity: .8; }
.card.petsign { opacity: .92; }

/* ── soldiers and the Barracks sheet (barracks.js) ── */
.soldier-face { width: 11cqw; height: 11cqw; overflow: hidden; border-radius: 50%; }
.soldier-face img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.card.course.lock { opacity: .55; filter: saturate(.5); }
.card.course small .short { color: #c0392b; font-weight: 800; }
.card .tx .uc-bar { margin: .8cqw 0; }
#assault .as-nosol { display: flex; align-items: center; gap: 2.4cqw; margin: 0 0 2cqw; padding: 2cqw 2.4cqw; border-radius: 3cqw; background: linear-gradient(180deg, #fff3d0, #f6dc9a); box-shadow: 0 0 0 .5cqw #6a4325; color: #4a2f1f; }
#assault .as-nosol > .uic { width: 7cqw; height: 7cqw; flex: none; color: #8a5a2a; } #assault .as-nosol div { flex: 1; min-width: 0; } #assault .as-nosol b { display: block; font-size: 3.6cqw; } #assault .as-nosol small { font-size: 2.7cqw; font-weight: 700; color: #8a6a4a; }
/* ── gift pets: slots, rest and the raid (pets.js) ── */
.petslots .pips { display: flex; gap: 1cqw; margin: 1.2cqw 0 1cqw; }
.petslots .pips i { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: rgba(106,67,37,.16); box-shadow: inset 0 0 0 .4cqw rgba(106,67,37,.35); }
.petslots .pips i.on { background: radial-gradient(circle at 40% 35%, #ffe27a, #e8a020); box-shadow: 0 0 0 .4cqw #8a5a14; }
.petcard .pbar { width: 100%; height: 1.8cqw; border-radius: 1cqw; background: rgba(106,67,37,.22); overflow: hidden; } .petcard .pbar i { display: block; height: 100%; background: linear-gradient(#b8f08a, #5fae3e); border-radius: 1cqw; }
.petcard .pbar.low i { background: linear-gradient(#ff9a8a, #e23c30); }
.petcard small.praid { color: #6a4a8a; } .petcard small.prest { color: #5a8a3a; }
.petcard .btn + .btn { margin-top: .6cqw; }
#assault .as-face.pet img { background: radial-gradient(circle at 50% 35%, #ffe9a8, #f0a850); }
#assault .as-cls.pet { background: #e0568a; }
#assault .as-card.pet { background: linear-gradient(180deg, #fff2d8, #f4c98a); }
#assault .as-slots.pets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#assault .as-slot.pet em { font-style: normal; font-size: 2.4cqw; font-weight: 800; color: #8a5a2a; }
#assault .as-fate.pet .as-face img { background: radial-gradient(circle at 50% 35%, #ffe9a8, #f0a850); }

/* ═════ CALM HUD: smaller, quieter, out of the way of the map ═════
   The things that talk to you (the resource bar, the notices, the dawn report, the coach bar) used to be big, loud plates that covered a third of the camp. Now they are slim: one line where one line will do,
   thin borders, a little see-through, and they leave quickly. */
#resbar, #resbar.many { padding: .6cqw 1.2cqw; gap: 0; border-radius: 3.4cqw; box-shadow: 0 0 0 .4cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.9), 0 .6cqw 0 .4cqw var(--soft); }
#resbar .res, #resbar.many .res { min-height: 5.6cqw; padding: .2cqw .2cqw; gap: .8cqw; }
#resbar .res img, #resbar.many .res img { width: 4.6cqw; height: 4.6cqw; }
#resbar .res .duo img, #resbar.many .res .duo img { width: 3.8cqw; height: 3.8cqw; margin-right: -.8cqw; }
#resbar .res b, #resbar.many .res b { font-size: 3.2cqw; }
#resbar .res small, #resbar.many .res small { font-size: 2cqw; }
#notices { left: 2.4cqw; top: 31cqw; width: 62cqw; gap: .9cqw; }
.notice { padding: .8cqw 2.4cqw .8cqw 1.1cqw; border-radius: 3cqw; font-size: 2.8cqw; font-weight: 700; line-height: 1.2; gap: 1.2cqw; opacity: .95;
  box-shadow: 0 0 0 .3cqw var(--edge), 0 .5cqw 1.4cqw rgba(60,35,15,.25) !important; }
.notice span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice .uic { font-size: 3.4cqw; padding: .7cqw; box-shadow: 0 0 0 .25cqw var(--edge); }
.notice.agent img { width: 6cqw; height: 6cqw; box-shadow: 0 0 0 .25cqw var(--edge); }
#nreport { margin: 0 0 1.2cqw; padding: 1.6cqw 2.2cqw 1.6cqw; border-radius: 3cqw; opacity: .97; box-shadow: 0 0 0 .4cqw #4a2f1f, 0 .7cqw 0 .4cqw rgba(74,47,31,.3), 0 1cqw 2.4cqw rgba(0,0,0,.25); }
.nr-head { gap: 1.6cqw; } .nr-head .uic { font-size: 5.4cqw; } .nr-head b { font-size: 3.2cqw; letter-spacing: .03em; } .nr-head small { font-size: 2.5cqw; }
.nr-chips { margin: 1cqw 0 .4cqw; gap: .8cqw; flex-wrap: wrap; }
.nrc { flex: none; display: inline-flex; align-items: center; gap: .7cqw; padding: .3cqw 1.5cqw; border-radius: 3cqw; }
.nrc span .uic { font-size: 2.8cqw; } .nrc b { font-size: 2.8cqw; } .nrc small { font-size: 2.3cqw; }
.nr-line { font-size: 2.5cqw; margin: .5cqw 0 0; }
.nr-siege { margin: 1cqw 0 .4cqw; padding: 1cqw 2cqw; } .nr-siege b { font-size: 2.9cqw; } .nr-siege small { font-size: 2.3cqw; }
#nreport .btnrow { margin-top: 1cqw; gap: 1.2cqw; justify-content: flex-end; }
#nreport .btnrow .btn { min-height: 0; padding: .8cqw 3cqw; font-size: 2.8cqw; border-radius: 2.4cqw; }
#coach.plate { padding: 1.3cqw 2.2cqw; font-size: 2.9cqw; line-height: 1.28; border-radius: 3cqw; gap: 1.8cqw; opacity: .96; box-shadow: 0 0 0 .4cqw var(--edge), 0 .6cqw 0 .4cqw var(--soft), 0 .8cqw 2cqw rgba(0,0,0,.2); }
#coach .step { font-size: 2.4cqw; padding: .2cqw 1.4cqw; margin-right: 1.2cqw; }
#coach-go { font-size: 2.7cqw; padding: .9cqw 2.4cqw; border-radius: 2cqw; }
#coach-skip { font-size: 2.5cqw; padding: .9cqw 1.8cqw; border-radius: 2cqw; }
#nreport .btnrow { display: flex; }
#nreport .btnrow .btn { flex: 0 0 auto !important; width: auto !important; }
.floorcard .floorchips { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.4cqw; } .floorcard .floorchips .btn { padding: .8cqw 2cqw; font-size: 2.6cqw; }
/* the big announcements (dawn, dusk, a season, a boss) are a slim banner now, not a sign across the middle of the camp */
#announce { top: 29cqw; gap: 0; }
#announce .an { grid-template-columns: auto auto; align-items: center; column-gap: 1.8cqw; row-gap: 0; padding: 1.2cqw 3.6cqw 1.2cqw 2.4cqw; border-radius: 4cqw; animation-duration: 2.6s;
  background: linear-gradient(180deg, rgba(255,250,236,.95), rgba(244,226,180,.95)); box-shadow: 0 0 0 .35cqw var(--edge), 0 .6cqw 1.6cqw rgba(60,35,15,.25); }
#announce .an::before, #announce .an::after { display: none; }
#announce .an .uic { font-size: 6cqw; grid-row: 1 / 3; color: #c8841a; filter: none; }
#announce .an h2 { font-size: 4.2cqw; letter-spacing: .14em; text-indent: 0; color: var(--brown2); text-shadow: none; text-align: left; }
#announce .an p { font-size: 2.3cqw; letter-spacing: .06em; color: var(--mute); text-shadow: none; text-align: left; }
#announce .an.night h2, #announce .an.spring h2, #announce .an.boss h2 { color: var(--brown2); text-shadow: none; } #announce .an.night .uic { color: #5a6ad8; filter: none; } #announce .an.boss .uic { color: #d6402f; filter: none; } #announce .an.spring .uic { color: #3f9a2c; filter: none; } #announce .an.dawn .uic { color: #e0831f; filter: none; }

/* ───────── naming your base (campname.js): a wooden sign over the title screen ───────── */
#namecard { position: absolute; inset: 0; z-index: 31; display: grid; place-items: center; padding: 6cqw; background: rgba(14,10,30,.62); backdrop-filter: blur(.6cqw); }
#namecard[hidden] { display: none; }
.nc-sign { position: relative; width: 100%; max-width: 86cqw; animation: signDrop .8s cubic-bezier(.25,1.5,.45,1) both; filter: drop-shadow(0 2cqw 1.6cqw rgba(0,0,0,.4)); }
#namecard.shake .nc-sign { animation: ncShake .35s ease; }
@keyframes ncShake { 0%, 100% { transform: none; } 20% { transform: translateX(-2cqw); } 50% { transform: translateX(2cqw); } 80% { transform: translateX(-1cqw); } }
.nc-sign .rope { position: absolute; top: -12cqw; width: 1cqw; height: 13cqw; background: #e6d29c; box-shadow: 0 0 0 .4cqw #4a2f1f; border-radius: 1cqw; }
.nc-sign .rope.l { left: 14cqw; } .nc-sign .rope.r { right: 14cqw; }
.nc-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; box-sizing: border-box; gap: 1.6cqw; padding: 5cqw 6cqw 5cqw; border-radius: 4.4cqw; text-align: center;
  background: repeating-linear-gradient(180deg, transparent 0 8.6cqw, rgba(90,50,20,.22) 8.6cqw 9cqw), linear-gradient(180deg, #e8b27a, #d09a62 50%, #b98250);
  box-shadow: 0 0 0 .9cqw #4a2f1f, inset 0 .9cqw 0 rgba(255,238,204,.6), inset 0 -1.2cqw 0 rgba(90,50,20,.38); }
.nc-board::before, .nc-board::after { content: ''; position: absolute; top: 2.2cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #6a4325; box-shadow: inset 0 .4cqw 0 rgba(255,255,255,.4); }
.nc-board::before { left: 2.6cqw; } .nc-board::after { right: 2.6cqw; }
.nc-flame { font-size: 7cqw; margin-bottom: -1cqw; }
.nc-board h2 { margin: 0; font-size: 8.6cqw; line-height: 1.05; color: #fff1dc; -webkit-text-stroke: 1.1cqw #4a2f1f; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #4a2f1f; }
.nc-sub { margin: 0; max-width: 64cqw; font-size: 3cqw; font-weight: 800; line-height: 1.35; color: #5a3a22; text-shadow: 0 .4cqw 0 rgba(255,240,210,.7); }
.nc-field { display: flex; align-items: center; gap: 2cqw; width: 100%; margin-top: 1cqw; box-sizing: border-box; padding: 0 1cqw; }
.nc-field input { flex: 1; min-width: 0; padding: 2.2cqw 3cqw; font: inherit; font-size: 5cqw; font-weight: 900; text-align: center; color: #4a2f1f; background: #fff6e2; border: 0; border-radius: 2.6cqw; outline: none; box-shadow: 0 0 0 .7cqw #4a2f1f, inset 0 .8cqw 0 rgba(120,80,40,.25); }
.nc-field input:focus { box-shadow: 0 0 0 .7cqw #4a2f1f, 0 0 0 1.5cqw rgba(255,214,120,.9), inset 0 .8cqw 0 rgba(120,80,40,.25); }
.nc-hint { min-height: 3.4cqw; font-size: 2.7cqw; font-weight: 800; color: #6a4a2c; }
.nc-hint.bad { color: #a8281c; }
.nc-btns { display: grid; gap: 2.2cqw; width: 100%; margin-top: .6cqw; box-sizing: border-box; padding: 0 1cqw 1.6cqw; }
.nc-btns .btn { box-sizing: border-box; width: 100%; padding: 2.4cqw 4cqw; font-size: 4.6cqw; }
.nc-btns .btn[hidden] { display: none; }
/* the base's name on the Menu card */
.card.namecard .tx b { font-size: 4.4cqw; }

/* ───────── the Den with three collections: tabs, your team, several boost lines, the dawn gift ───────── */
.petcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; margin: 1cqw 0 2cqw; }
.petcols .btn { padding: 1.6cqw 1cqw; font-size: 3.1cqw; white-space: nowrap; }
.pteam .ptrow { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: 1.2cqw; }
.pteam .pt { width: 11cqw; height: 11cqw; padding: .6cqw; border: 0; border-radius: 2.4cqw; background: #fff3d2; box-shadow: 0 0 0 .5cqw var(--edge), 0 .8cqw 0 .5cqw rgba(106,67,37,.28); cursor: pointer; }
.pteam .pt img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.petcard small.pb { display: block; text-align: left; justify-self: stretch; padding-left: 1.6cqw; position: relative; }
.petcard small.pb::before { content: ''; position: absolute; left: 0; top: .9cqw; width: .8cqw; height: .8cqw; border-radius: 50%; background: #e8a020; }
.petcard small.pgift { color: #6a4a10; background: rgba(255, 214, 96, .35); border-radius: 1.6cqw; padding: .6cqw 1.4cqw; }

/* ───────── Till Dawn - Genesis: the second line of the title sign, and the title's wait for the loading screen ───────── */
.title-genesis { display: flex; align-items: center; justify-content: center; gap: 2.2cqw; margin-top: .2cqw; }
.title-genesis b { font-size: 4.8cqw; letter-spacing: 1.5cqw; padding-left: 1.5cqw; color: #fff2cc; -webkit-text-stroke: .7cqw #4a2f1f; paint-order: stroke fill; text-shadow: 0 .6cqw 0 #4a2f1f; }
.title-genesis i { position: relative; width: 11cqw; height: .8cqw; border-radius: 1cqw; background: #4a2f1f; }
.title-genesis i::after { content: ''; position: absolute; top: 50%; width: 1.6cqw; height: 1.6cqw; background: #4a2f1f; transform: translateY(-50%) rotate(45deg); }
.title-genesis i:first-child::after { right: -.6cqw; } .title-genesis i:last-child::after { left: -.6cqw; }
/* the title's animations wait (paused) under the loading screen and start as it fades (ui.js adds and removes .withsplash) */
#title.withsplash *, #title.withsplash *::before, #title.withsplash *::after { animation-play-state: paused !important; }

/* ───────── full-screen screens on any shape of window ───────── */
/* The scene canvases are drawn at one shape (176 x 312 units, 704 x 1248 px). A taller phone crops their sides (cover) instead of stretching the picture; a wider window shows the live world (or, on the title, a blurred copy of the scene) beside them. */
#title-cv, #era-fx, #end-fx, #replay-fx, #as-cv { object-fit: cover; }

/* ───────── THE DESKTOP LAYOUT (game.js fitView adds .wide to #phone when the window is much wider than the interface column, .roomy when wider still) ─────────
   The interface no longer huddles in a phone-shaped strip in the middle: the status card (resources, fire, clock, menu) goes top-left, the gold pill, the minimap and the home button go
   top-right, the notices stack under the status card; the dock, the coach and the menus stay in the middle, bottom. --ex is the distance from the column's edge to the window's edge. */
#phone.wide { overflow: visible; --ex: calc(50cqw - 50vw + 2.6cqw); }
#phone.wide #hud { left: var(--ex); right: auto; width: max(82cqw, min(95.2cqw, calc(50vw - 50cqw - 5.2cqw))); }
#phone.wide #tools { right: var(--ex); top: 2cqw; gap: 2.2cqw; }
#phone.wide #minimap-wrap.plate { width: 27cqw; }
#phone.wide #notices, #phone.wide.sheet-open #notices { left: var(--ex); top: 36cqw; width: 60cqw; transform: none; justify-items: start; }
#phone.roomy #sheet { top: 3cqw; }
/* key caps on the dock buttons: 1 to 6 open them */
#phone.wide .dk[data-key]::after { content: attr(data-key); position: absolute; top: .5cqw; left: .9cqw; min-width: 2.6cqw; padding: .25cqw .6cqw; border-radius: .8cqw; font: 800 2cqw/1.2 var(--sans); text-align: center; color: var(--brown2); background: rgba(106,67,37,.14); pointer-events: none; }
/* around a full-screen card (the end card, the new age, the raid replay and battle, welcome back) the world is softened and dimmed */
#cv { transition: filter .5s ease; }
#stage.veil #cv { filter: brightness(.4) saturate(.7) blur(3px); }
/* while the title is up the game's own interface stays out of sight (the title picture is drawn beneath the whole column, not inside it) */
#phone.intitle #hud, #phone.intitle #tools, #phone.intitle #hud-bottom, #phone.intitle #notices, #phone.intitle #announce, #phone.intitle #banner, #phone.intitle #sheet { visibility: hidden; }
/* on a wide window the corner pieces of the interface step aside too while a full-screen card is open */
#stage.veil #phone.wide #hud, #stage.veil #phone.wide #tools, #stage.veil #phone.wide #notices { visibility: hidden; }