/* ═══════════════════════════════════════════════════════════════════════════
   Till Dawn — "game UI" skin (loaded after style.css and overriding it).
   Goals: clean, bold, easy to read at a glance. Solid panels (nothing bleeds through), big readable type, one colour per area:
     Build orange · People blue · War red · Council purple · Age gold · Map green.
   Recipe (the same one every big mobile game uses): a dark outline, a light inner top edge, a hard shadow underneath, saturated fills.
   Everything is still sized in cqw, so it scales with the phone.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Fredoka (SIL Open Font License, fonts/OFL.txt): a rounded, friendly game face. One variable file covers every weight we use (heavier weights clamp to 700). */
@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka-Variable.ttf") format("truetype"); font-weight: 300 700; font-stretch: 75% 125%; font-display: swap; }
:root {
  --s0: #0a1220; --s1: #101c33; --s2: #17264a; --s3: #1f3360; --s4: #2a4378; --line: #0a1220; --line2: rgba(255,255,255,.1);
  --ink: #ffffff; --ink2: #e2ebfb; --mute: #a9bbdc; --dim: #7e93b9;
  --gold: #ffd33f; --gold2: #fff0b0; --bronze: #ffb52e; --bronze2: #c98a22; --ember: #ff9a3a;
  --good: #5fdc70; --warn: #ffbd3d; --bad: #ff5d52; --mind: #b49cff; --blue: #58a8ff;
  --c-build: #ff9d2e; --c-people: #3f95ff; --c-war: #f2574f; --c-council: #9d70ff; --c-age: #ffc93c; --c-map: #3fc977; --c-menu: #8aa0c8;
  --sans: "Fredoka", "Trebuchet MS", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; --serif: var(--sans);
  --dock-h: 18.4cqw;
  --panel-a: #35517f; --panel-b: #27406a; --edge: #0a1220;
  --ac: var(--c-build);
}
html, body { background: #0a1220; }
#stage { background: radial-gradient(ellipse at 50% 30%, #1d3a63 0%, #0d1a30 60%, #070d18 100%); }
#stage::before { opacity: .35; }
#phone { box-shadow: none; font-size: 3.6cqw; }
button:focus-visible { outline: .6cqw solid var(--gold); outline-offset: .3cqw; }
.uic { stroke-width: 2.3; }

/* ───────── panels ───────── */
.plate { border-radius: 3.6cqw; 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,.22), inset 0 -.7cqw 0 rgba(0,0,0,.2), 0 1.5cqw 0 .6cqw rgba(0,0,0,.38); }

/* ───────── round buttons ───────── */
.rbtn { width: 10.4cqw; height: 10.4cqw; font-size: 5.4cqw; color: #fff; border-radius: 50%;
  background: radial-gradient(circle at 50% 18%, #6a8fd0 0%, #3a5a98 55%, #2c4780 100%);
  box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.4), inset 0 -.6cqw 0 rgba(0,0,0,.22), 0 1.1cqw 0 .55cqw rgba(0,0,0,.4); }
.rbtn:active { transform: translateY(.8cqw); filter: brightness(1.12); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.3), 0 .3cqw 0 .55cqw rgba(0,0,0,.4); }
.rbtn.sm { width: 10.4cqw; height: 10.4cqw; font-size: 5.4cqw; }
.rbtn.txt { font-size: 3.5cqw; font-weight: 900; letter-spacing: 0; text-shadow: 0 .3cqw 0 rgba(0,0,0,.4); }
.rbtn.muted { color: var(--mute); }
.pill-btn { padding: 1.6cqw 4cqw 1.6cqw 2.8cqw; font-size: 3.6cqw; font-weight: 800; color: #fff; border-radius: 6cqw; gap: 1.8cqw;
  background: linear-gradient(180deg, #5a7ec2, #35538f); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.35), 0 1.1cqw 0 .55cqw rgba(0,0,0,.4); text-shadow: 0 .3cqw 0 rgba(0,0,0,.4); }
.pill-btn .uic { font-size: 5cqw; }
.pill-btn .more { background: rgba(0,0,0,.28); padding: .2cqw 1.6cqw; font-size: 3cqw; }
.pill-btn.lv0 { color: #fff; }
.pill-btn.lv1 { background: linear-gradient(180deg, #ffc94a, #e69a1c); color: #3a2503; text-shadow: 0 .25cqw 0 rgba(255,255,255,.4); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.6), 0 1.1cqw 0 .55cqw rgba(0,0,0,.4); }
.pill-btn.lv2 { background: linear-gradient(180deg, #ff7a6e, #d63a30); color: #fff; box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.4), 0 1.1cqw 0 .55cqw rgba(0,0,0,.4); }
@keyframes alertGlow { 50% { filter: brightness(1.25); } }

/* ═════ top bar ═════ */
#hud { left: 2.4cqw; right: 2.4cqw; top: 2cqw; }
#hud-card.plate { background: none; box-shadow: none; padding: 0; border-radius: 0; }
#resbar { gap: 1.4cqw; }
.res { height: 9cqw; padding: 0 2.2cqw 0 .7cqw; border-radius: 4.5cqw; justify-content: flex-start; gap: 1.4cqw;
  background: linear-gradient(180deg, #14233f, #0d182d); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.08), 0 1cqw 0 .5cqw rgba(0,0,0,.35); }
.res img { width: 7.4cqw; height: 7.4cqw; padding: 1cqw; border-radius: 50%; background: #6c7b92; box-shadow: inset 0 .4cqw 0 rgba(255,255,255,.35), inset 0 -.4cqw 0 rgba(0,0,0,.25), 0 0 0 .3cqw var(--edge); }
#res-wood img { background: #b87a3c; } #res-stone img { background: #8d9bb0; } #res-metal img { background: #7aa6d6; } #res-coal img { background: #5b6272; }
#res-power img { background: #f1c232; } #res-medicine img { background: #ee7b9b; } #res-science img { background: #8f7cff; }
.res .duo { gap: 0; } .res .duo img { width: 6cqw; height: 6cqw; padding: .8cqw; margin-right: -1.4cqw; } .res .duo img:first-child { background: #e0523d; } .res .duo img:last-child { background: #c76f4a; }
.res b { font-size: 4.8cqw; font-weight: 900; text-shadow: 0 .35cqw 0 rgba(0,0,0,.55); letter-spacing: .01em; }
.res small { font-size: 2.8cqw; font-weight: 800; color: #9fe39f; margin-left: -.4cqw; }
.res.low small { color: #ff9a8a; }
.res.low b { color: #ff6a5e; }
#resbar.many { gap: .8cqw; }
#resbar.many .res { height: 8.2cqw; padding: 0 1.2cqw 0 .5cqw; gap: .8cqw; }
#resbar.many .res b { font-size: 3.7cqw; } #resbar.many .res img { width: 6.2cqw; height: 6.2cqw; padding: .8cqw; } #resbar.many .res .duo img { width: 5cqw; height: 5cqw; }
.res .delta { font-size: 3.4cqw; font-weight: 900; }

#hud-row { gap: 1.6cqw; margin-top: 2.4cqw; align-items: center; }
#fire { flex: 1.2; height: 11cqw; padding: 0 2cqw 0 1.4cqw; gap: 1.4cqw; border-radius: 5.5cqw;
  background: linear-gradient(180deg, #14233f, #0d182d); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.08), 0 1cqw 0 .5cqw rgba(0,0,0,.35); }
#fire-ico { font-size: 7.4cqw; color: #ffa23c; }
#fuel-wrap { display: grid; gap: .5cqw; }
#fuel-wrap .cap { font-size: 2.5cqw; font-weight: 900; letter-spacing: .12em; color: #ffb872; line-height: 1; }
#fire.low #fuel-wrap .cap { color: #ff8a7c; }
.fuelbar { position: relative; }
#fuel { height: 5cqw; padding: .6cqw; gap: .35cqw; border-radius: 1.8cqw; background: #070d1a; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.1); }
#fuel i { background: #1c2b48; border-radius: .4cqw; }
#fuel i.on { background: linear-gradient(#ffe27a, #ff9a22 65%, #e2640f); box-shadow: none; }
#fuel.low i.on { background: linear-gradient(#ffb09a, #f0402e); }
#fuel-pct { font-size: 3cqw; font-weight: 900; }
#clock { flex: 1.35; height: 11cqw; padding: 0 2cqw 0 .8cqw; gap: 1.6cqw; border-radius: 5.5cqw;
  background: linear-gradient(180deg, #14233f, #0d182d); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.08), 0 1cqw 0 .5cqw rgba(0,0,0,.35); }
#clock-ring { width: 9.2cqw; height: 9.2cqw; background: conic-gradient(#ffd33f calc(var(--p) * 1turn), rgba(255,255,255,.14) 0); }
#clock-ring::before { inset: .9cqw; background: radial-gradient(circle at 50% 28%, #3a5688, #16253f); }
#clock-ico { font-size: 5cqw; color: #ffd84a; }
#clock.night #clock-ring { background: conic-gradient(#8fa0ff calc(var(--p) * 1turn), rgba(255,255,255,.14) 0); }
#clock-txt { gap: .2cqw; }
#day-label { font-family: var(--sans); font-size: 4.6cqw; font-weight: 900; letter-spacing: .02em; color: #fff; text-shadow: 0 .35cqw 0 rgba(0,0,0,.55); }
#clock-time { font-size: 3cqw; font-weight: 800; color: #b7c8ea; margin-left: 1.4cqw; letter-spacing: 0; }
#phase-sub { font-size: 3cqw; font-weight: 800; color: #ffd978; text-transform: capitalize; }
#clock.night #day-label { color: #dfe5ff; } #clock.night #phase-sub { color: #aab8ff; }
#season-badge { width: 5.4cqw; height: 5.4cqw; right: -1.2cqw; bottom: -1cqw; font-size: 3.5cqw; background: #14233f; box-shadow: 0 0 0 .4cqw var(--edge), inset 0 0 0 .4cqw var(--sc, #9fe07a); }
#btn-pause { background: radial-gradient(circle at 50% 18%, #7fe38c 0%, #3ea84e 60%, #2d8a3c 100%); }
#btn-pause.paused { color: #fff; background: radial-gradient(circle at 50% 18%, #ffcf5a 0%, #f39a1e 60%, #d9780c 100%); animation: pulseglow 1.2s ease-in-out infinite; }
#btn-speed { background: radial-gradient(circle at 50% 18%, #6a8fd0 0%, #3a5a98 55%, #2c4780 100%); }
#btn-dots { background: radial-gradient(circle at 50% 18%, #9aa8c4 0%, #66789b 55%, #4d5f84 100%); }
@keyframes pulseglow { 50% { filter: brightness(1.3); } }
#hud-sub { margin-top: 3cqw; }

/* ═════ minimap and camera tools ═════ */
#tools { right: 2.4cqw; top: 36cqw; gap: 2.4cqw; }
#tools.idle { opacity: .8; }
#minimap-wrap.plate { width: 20cqw; padding: .5cqw; border-radius: 2.6cqw; background: #0d182d; box-shadow: 0 0 0 .5cqw var(--edge), 0 0 0 1cqw #4a6aa6, 0 1.5cqw 0 1cqw rgba(0,0,0,.35); }
#minimap { border-radius: 2cqw; }

/* ═════ notices ═════ */
#notices { left: 2.4cqw; top: 40cqw; width: 78cqw; gap: 2cqw; }
.notice { padding: 2cqw 4cqw 2cqw 2.4cqw; border-radius: 4.6cqw; font-size: 3.7cqw; font-weight: 700; line-height: 1.25; color: #fff; gap: 2.2cqw;
  background: linear-gradient(180deg, #3b5a92, #2b4676); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.25), 0 1.2cqw 0 .55cqw rgba(0,0,0,.4); }
.notice .uic { font-size: 6cqw; color: #fff; background: #4f8cf0; border-radius: 50%; padding: 1.1cqw; box-sizing: content-box; width: 1em; height: 1em; box-shadow: 0 0 0 .35cqw var(--edge); }
.notice.good .uic { background: #3fb85a; }
.notice.bad { background: linear-gradient(180deg, #9a3a3a, #6e2326); } .notice.bad .uic { background: #e04a40; color: #fff; }
.notice.agent { color: #fff; background: linear-gradient(180deg, #5b4aa6, #40327d); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.25), 0 1.2cqw 0 .55cqw rgba(0,0,0,.4); }
.notice.agent.ask { color: #3a2503; background: linear-gradient(180deg, #ffd461, #f0a824); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.6), 0 1.2cqw 0 .55cqw rgba(0,0,0,.4); }
.notice.agent.ask b { color: #3a2503; }
.notice.agent img { width: 9.4cqw; height: 9.4cqw; background: #1a1440; box-shadow: 0 0 0 .4cqw var(--edge); }
.notice.tale { color: #fff; background: linear-gradient(180deg, #8a5d2c, #5f3d1a); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.25), 0 1.2cqw 0 .55cqw rgba(0,0,0,.4); }
.notice.tale b { color: #ffe08a; }
#pause-badge { top: 52cqw; font-family: var(--sans); font-weight: 900; font-size: 6cqw; letter-spacing: .14em; color: #fff; text-indent: .14em; border-radius: 5cqw; padding: 2.2cqw 8cqw;
  background: linear-gradient(180deg, rgba(40,64,106,.94), rgba(24,40,72,.96)); box-shadow: 0 0 0 .55cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.22), 0 1.2cqw 0 .55cqw rgba(0,0,0,.4); backdrop-filter: none; text-shadow: 0 .4cqw 0 rgba(0,0,0,.5); }
#pause-badge small { font-family: var(--sans); font-size: 3cqw; font-weight: 700; letter-spacing: .02em; color: #cfdcf7; }

/* ═════ bottom: tip bar, selection card, the dock ═════ */
#hud-bottom { left: 2.4cqw; right: 2.4cqw; bottom: 2cqw; gap: 3cqw; }
#dock.plate { padding: 1.4cqw .8cqw 1.2cqw; gap: .4cqw; height: var(--dock-h); border-radius: 4cqw; background: linear-gradient(180deg, #243a60, #172a4a); }
.dk { gap: .7cqw; border-radius: 3cqw; color: #fff; }
.dk-ico { width: 10.6cqw; height: 10.6cqw; border-radius: 3.2cqw; display: grid; place-items: center; font-size: 6.4cqw; color: #fff; margin: 0; padding: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 82%, #fff) 0%, var(--dc) 55%, color-mix(in srgb, var(--dc) 78%, #000) 100%);
  box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.45), inset 0 -.6cqw 0 rgba(0,0,0,.2), 0 .9cqw 0 .5cqw rgba(0,0,0,.35); transition: transform .12s; }
.dk .uic { filter: drop-shadow(0 .3cqw 0 rgba(0,0,0,.3)); stroke-width: 2.4; }
.dk[data-panel="build"] { --dc: var(--c-build); } .dk[data-panel="colonists"] { --dc: var(--c-people); } .dk[data-panel="war"] { --dc: var(--c-war); }
.dk[data-panel="council"] { --dc: var(--c-council); } .dk[data-panel="research"] { --dc: var(--c-age); } .dk[data-panel="map"] { --dc: var(--c-map); }
.dk-lbl, .dk:not(.active):not(.main) .dk-lbl { display: block; font-size: 2.9cqw; letter-spacing: .02em; text-transform: none; font-weight: 800; color: #e2ebfb; text-shadow: 0 .3cqw 0 rgba(0,0,0,.5); }
.dk:not(.active):not(.main) { gap: .7cqw; }
.dk:active .dk-ico { transform: translateY(.6cqw) scale(.96); }
.dk.active { background: rgba(255,255,255,.12); color: #fff; }
.dk.active::after { content: none; }
.dk.active .dk-ico { transform: translateY(-.8cqw); box-shadow: 0 0 0 .5cqw #fff, 0 0 0 1cqw var(--edge), 0 1.2cqw 0 1cqw rgba(0,0,0,.35); }
.dk.active .dk-lbl { color: #fff; }
.dk.main .dk-ico { width: 10.6cqw; height: 10.6cqw; padding: 0; margin: 0; font-size: 6.4cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 82%, #fff) 0%, var(--dc) 55%, color-mix(in srgb, var(--dc) 78%, #000) 100%); color: #fff; box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.45), inset 0 -.6cqw 0 rgba(0,0,0,.2), 0 .9cqw 0 .5cqw rgba(0,0,0,.35); }
.dk.main .dk-lbl { margin-top: 0; }
.dk i { top: -.2cqw; right: 8%; min-width: 5cqw; font-size: 3cqw; font-weight: 900; padding: .1cqw 1.3cqw; background: #ff4d44; color: #fff; box-shadow: 0 0 0 .4cqw var(--edge); border-radius: 3cqw; }
.dk i.red { background: #ff4d44; }
.pulse { animation: pulseglow 1s ease-in-out infinite; }

/* tip bar (the first-game coach): a bright speech bubble that is hard to miss and easy to read */
#coach.plate { padding: 2.4cqw 3cqw; font-size: 3.7cqw; line-height: 1.32; font-weight: 700; color: #3a2a0c; border-radius: 3.6cqw;
  background: linear-gradient(180deg, #fff6d8, #ffe9a8); box-shadow: 0 0 0 .6cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.8), 0 1.4cqw 0 .6cqw rgba(0,0,0,.38); }
#coach b { color: #c25a00; font-weight: 900; }
#coach .step { background: #ff8a1f; color: #fff; font-size: 3cqw; font-weight: 900; padding: .3cqw 1.8cqw; border-radius: 2cqw; text-shadow: 0 .25cqw 0 rgba(0,0,0,.35); box-shadow: 0 0 0 .3cqw var(--edge); }
#coach-skip { color: #7a6a44; font-size: 3cqw; font-weight: 800; padding: 1.4cqw 2.6cqw; border-radius: 2.4cqw; background: rgba(0,0,0,.08); box-shadow: none; }

/* selection card */
#infocard.plate { padding: 2.6cqw; gap: 3cqw; min-height: 26cqw; }
.uc-portrait { width: 20cqw; border-radius: 2.8cqw; background: radial-gradient(circle at 50% 30%, #55a455, #2d6a3a); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.25); }
.uc-portrait.struct { background: radial-gradient(circle at 50% 35%, #4d79b8, #284a7e); }
.uc-portrait .lvl { background: #0a1220; color: #ffd33f; font-size: 3cqw; font-weight: 900; padding: .3cqw 1.4cqw; }
.uc-name { font-family: var(--sans); font-size: 5.4cqw; font-weight: 900; letter-spacing: 0; color: #fff; text-shadow: 0 .4cqw 0 rgba(0,0,0,.45); }
.uc-name small { font-size: 3cqw; color: #c3d3f0; font-weight: 700; }
.chip-role { background: #ffcf3f; color: #3a2503; font-size: 3.1cqw; font-weight: 900; padding: .5cqw 2cqw .5cqw 1cqw; border-radius: 3cqw; box-shadow: 0 0 0 .35cqw var(--edge); }
.chip-trait { color: #cfdcf7; font-size: 3cqw; font-style: normal; font-weight: 700; }
.uc-bar .uic { font-size: 4.2cqw; }
.meter { height: 2.4cqw; border-radius: 1.4cqw; background: #0a1220; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.1); }
.meter > div { border-radius: 1.4cqw; }
.uc-task { font-size: 3.3cqw; font-weight: 700; color: #fff; } .uc-task .uic { font-size: 4.2cqw; color: #ffd33f; }
.uc-why { font-size: 2.9cqw; color: #b7c8ea; }
.uc-hp small { font-size: 2.8cqw; color: #b7c8ea; }
#infocard .x { top: -2cqw; right: -1.6cqw; width: 8.4cqw; height: 8.4cqw; font-size: 4.2cqw; color: #fff; background: radial-gradient(circle at 50% 20%, #ff8478, #d8382e); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.4), 0 .9cqw 0 .5cqw rgba(0,0,0,.35); }

/* ═════ menu sheet ═════ */
#sheet.plate { background: linear-gradient(180deg, #2c4670 0%, #1e3357 100%); }
#sheet { left: 2.4cqw; right: 2.4cqw; top: 31cqw; bottom: calc(var(--dock-h) + 5.4cqw); overflow: hidden; }
.sheet-head { padding: 2.2cqw 2.6cqw 2.2cqw 3cqw; gap: 2cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 88%, #fff), var(--ac) 60%, color-mix(in srgb, var(--ac) 80%, #000)); box-shadow: 0 .6cqw 0 var(--edge); position: relative; z-index: 1; }
#sheet-ico { font-size: 7cqw; color: #fff; filter: drop-shadow(0 .3cqw 0 rgba(0,0,0,.35)); } #sheet-ico .uic { stroke-width: 2.4; }
.sheet-head h2 { font-family: var(--sans); font-size: 6cqw; font-weight: 900; letter-spacing: .02em; text-transform: none; color: #fff; text-shadow: 0 .45cqw 0 rgba(0,0,0,.4), 0 0 .6cqw rgba(0,0,0,.4); }
#sheet-close { width: 9.6cqw; height: 9.6cqw; font-size: 4.8cqw; color: #fff; background: radial-gradient(circle at 50% 20%, #ff8478, #d8382e); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.45), 0 .9cqw 0 .5cqw rgba(0,0,0,.35); }
#sheet-close .uic { stroke-width: 3; }
#sheet-close:active { transform: translateY(.6cqw); }
#sheet[data-p="build"] { --ac: var(--c-build); } #sheet[data-p="colonists"], #sheet[data-p="assign"] { --ac: var(--c-people); } #sheet[data-p="war"] { --ac: var(--c-war); }
#sheet[data-p="council"] { --ac: var(--c-council); } #sheet[data-p="research"] { --ac: var(--c-age); } #sheet[data-p="map"] { --ac: var(--c-map); } #sheet[data-p="menu"], #sheet[data-p="alerts"], #sheet[data-p="goals"] { --ac: var(--c-menu); }
#sheet[data-p="research"] .sheet-head h2, #sheet[data-p="research"] #sheet-ico { color: #3a2503; text-shadow: 0 .3cqw 0 rgba(255,255,255,.35); filter: none; }
#sheet-tabs { gap: 1.4cqw; padding: 2.2cqw 2.4cqw 1.8cqw; border-bottom: 0; background: #17284a; }
.tab { padding: 1.9cqw .6cqw; border-radius: 2.6cqw; font-size: 3.4cqw; font-weight: 800; color: #b7c8ea; background: #223a66; box-shadow: 0 0 0 .4cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.12); }
.tab.on { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 85%, #fff), var(--ac)); text-shadow: 0 .3cqw 0 rgba(0,0,0,.4); box-shadow: 0 0 0 .4cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.5); }
#sheet[data-p="research"] .tab.on { color: #3a2503; text-shadow: none; }
.tab i { background: #ff4d44; font-size: 2.8cqw; font-weight: 900; padding: 0 1.2cqw; box-shadow: 0 0 0 .3cqw var(--edge); }
#sheet-body { padding: 2.6cqw 2.6cqw 3.4cqw; font-size: 3.6cqw; background: #17284a; scrollbar-color: #5a7ec2 transparent; color: #fff; }
#sheet-foot { background: #1c3057; border-top: .5cqw solid var(--edge); padding: 2.2cqw 2.6cqw 2.6cqw; font-size: 3.3cqw; }
.sec { font-family: var(--sans); font-size: 3.3cqw; font-weight: 900; letter-spacing: .08em; color: color-mix(in srgb, var(--ac) 55%, #fff); margin: 3.4cqw 0 2cqw; text-shadow: 0 .3cqw 0 rgba(0,0,0,.4); }
.sec::after { height: .5cqw; border-radius: .3cqw; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 70%, transparent), transparent); }
.sec small { font-size: 3cqw; color: #b7c8ea; font-weight: 700; }
.note { color: #b7c8ea; font-size: 3.2cqw; line-height: 1.45; font-weight: 600; } .note b { color: #fff; }
.empty { color: #b7c8ea; font-size: 3.5cqw; } .empty .uic { color: #6f89b9; }

/* cards and rows */
.card, .person, .tile, .hero, .mapstats > div, .crew .slot, .gk, .gslot, .gq {
  background: linear-gradient(180deg, #34528a 0%, #2a4474 100%); box-shadow: 0 0 0 .45cqw var(--edge), inset 0 .45cqw 0 rgba(255,255,255,.16), 0 .9cqw 0 .45cqw rgba(0,0,0,.28); color: #fff; }
.card { gap: 2.8cqw; padding: 2.4cqw 2.6cqw; margin-bottom: 2.6cqw; border-radius: 3cqw; }
.card .ic { width: 14.4cqw; height: 14.4cqw; border-radius: 2.6cqw; background: radial-gradient(circle at 50% 30%, #4f7ec0, #243f6e); box-shadow: 0 0 0 .4cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.25); }
.card .ic .uic { font-size: 7.6cqw; color: #fff; }
.card .tx b { font-size: 4.1cqw; font-weight: 900; color: #fff; text-shadow: 0 .3cqw 0 rgba(0,0,0,.35); }
.card .tx small { font-size: 3.1cqw; color: #c3d3f0; font-weight: 600; margin-top: .7cqw; line-height: 1.35; }
.card.owned { opacity: .6; }
.card.era-now { box-shadow: 0 0 0 .6cqw #ffd33f, 0 0 0 1.1cqw var(--edge), 0 1.1cqw 0 1.1cqw rgba(0,0,0,.3); }
.chips { gap: 1.4cqw; margin-top: 1.4cqw; }
.chip { font-size: 3.2cqw; font-weight: 800; padding: .6cqw 1.8cqw .6cqw 1cqw; border-radius: 3cqw; color: #fff; background: #0f1c36; box-shadow: 0 0 0 .35cqw var(--edge), inset 0 .3cqw 0 rgba(255,255,255,.08); gap: 1cqw; }
.chip img { width: 4.6cqw; height: 4.6cqw; }
.chip.no { color: #ff9a8e; background: #44202a; box-shadow: 0 0 0 .35cqw var(--edge), inset 0 0 0 .3cqw rgba(255,93,82,.6); }
.pill { font-size: 2.9cqw; padding: .3cqw 1.6cqw; border-radius: 4cqw; font-weight: 800; background: rgba(255,255,255,.18); color: #fff; }
.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: big, chunky, one clear colour each */
.btn { padding: 2.2cqw 4.2cqw; border-radius: 3cqw; font-size: 3.6cqw; font-weight: 900; letter-spacing: .01em; color: #fff; text-shadow: 0 .35cqw 0 rgba(0,0,0,.4);
  background: linear-gradient(180deg, #5b90e8 0%, #3a6cc4 100%); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.45), inset 0 -.5cqw 0 rgba(0,0,0,.2), 0 1cqw 0 .5cqw rgba(0,0,0,.38); }
.btn .uic { font-size: 4.6cqw; }
.btn:active { transform: translateY(.8cqw); filter: brightness(1.1); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.3), 0 .2cqw 0 .5cqw rgba(0,0,0,.38); }
.btn.primary, button.primary { background: linear-gradient(180deg, #6fe07a 0%, #36a948 100%); color: #fff; 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,.2), 0 1cqw 0 .5cqw rgba(0,0,0,.38); }
.btn.danger { background: linear-gradient(180deg, #ff8478 0%, #d8382e 100%); }
.btn.small { padding: 1.6cqw 3cqw; font-size: 3.2cqw; border-radius: 2.6cqw; }
.btn.block { padding: 2.8cqw; font-size: 4cqw; }
.btn:disabled { opacity: .5; filter: grayscale(.6); }
.btn.on { color: #3a2503; text-shadow: 0 .25cqw 0 rgba(255,255,255,.4); background: linear-gradient(180deg, #ffd961 0%, #f0a824 100%); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.6), 0 1cqw 0 .5cqw rgba(0,0,0,.38); }
.btn.dim { opacity: .6; }
.btnrow { gap: 2.2cqw; margin-bottom: 2.4cqw; }
.stepper b { font-size: 3.8cqw; font-weight: 900; }
.seg { border-radius: 2.8cqw; background: #0f1c36; box-shadow: 0 0 0 .45cqw var(--edge); }
.seg button { color: #b7c8ea; padding: 1.6cqw 3cqw; font-size: 3.1cqw; font-weight: 800; border-right: .4cqw solid var(--edge); }
.seg button.on { background: linear-gradient(180deg, #ffd961, #f0a824); color: #3a2503; font-weight: 900; }
.seg.mini button.on { background: linear-gradient(180deg, #6f9cff, #3d68d8); color: #fff; }
.rolebtn { background: #0f1c36; color: #fff; font-size: 3.2cqw; font-weight: 800; border-radius: 2.4cqw; box-shadow: 0 0 0 .4cqw var(--edge); }

/* stat tiles */
.tile { padding: 2.6cqw 1cqw 2.2cqw; border-radius: 3cqw; gap: .6cqw; }
.tile .uic { font-size: 6.6cqw; color: #ffd33f; } .tile.red .uic { color: #ff7a6e; } .tile.blue .uic { color: #7ab6ff; } .tile.green .uic { color: #7fe38c; }
.tile b { font-size: 5cqw; font-weight: 900; text-shadow: 0 .35cqw 0 rgba(0,0,0,.4); } .tile small { font-size: 2.7cqw; font-weight: 800; color: #c3d3f0; letter-spacing: .04em; }
.kv { font-size: 3.5cqw; color: #e2ebfb; font-weight: 600; border-bottom: .4cqw solid rgba(255,255,255,.08); } .kv b { color: #fff; font-weight: 900; }
.hero { border-radius: 3.2cqw; } .hero h3 { font-family: var(--sans); font-size: 5.2cqw; font-weight: 900; color: #fff; text-shadow: 0 .4cqw 0 rgba(0,0,0,.4); } .hero p { font-size: 3.3cqw; color: #d5e0f7; font-weight: 600; }

/* build grid */
.bgrid { gap: 2.4cqw; }
.bcard { padding: 2.4cqw 1.6cqw 2.2cqw; border-radius: 3.2cqw; gap: 1cqw; background: linear-gradient(180deg, #34528a, #2a4474); box-shadow: 0 0 0 .45cqw var(--edge), inset 0 .45cqw 0 rgba(255,255,255,.16), 0 .9cqw 0 .45cqw rgba(0,0,0,.28); }
.bcard .bi { width: 100%; height: 19cqw; border-radius: 2.6cqw; background: radial-gradient(ellipse at 50% 80%, #6bbd5a 0%, #3f8a47 60%, #2e6a3b 100%); box-shadow: inset 0 0 0 .4cqw rgba(0,0,0,.35), inset 0 .5cqw 0 rgba(255,255,255,.18); }
.bcard .bi img { max-width: 80%; max-height: 86%; filter: drop-shadow(0 .6cqw 0 rgba(0,0,0,.3)); }
.bcard b { font-size: 3.8cqw; font-weight: 900; text-shadow: 0 .3cqw 0 rgba(0,0,0,.35); }
.bcard .cnt { font-size: 3cqw; font-weight: 900; color: #fff; background: #0f1c36; box-shadow: 0 0 0 .35cqw var(--edge); padding: .2cqw 1.5cqw; }
.bcard.sel { box-shadow: 0 0 0 .7cqw #ffd33f, 0 0 0 1.2cqw var(--edge), 0 1.2cqw 0 1.2cqw rgba(0,0,0,.3); background: linear-gradient(180deg, #4a6aa8, #36548c); }
.bcard.poor { opacity: .8; } .bcard.locked { opacity: .55; }
.bcard .lockmsg { font-size: 3cqw; color: #c3d3f0; font-weight: 700; } .bcard .lockmsg .uic { font-size: 3.8cqw; }
.bdetail b { font-family: var(--sans); font-size: 4.8cqw; font-weight: 900; color: #fff; text-shadow: 0 .4cqw 0 rgba(0,0,0,.4); }
.bdetail p { font-size: 3.4cqw; color: #d5e0f7; font-weight: 600; line-height: 1.4; }

/* people */
.person { gap: 2.6cqw; padding: 2.2cqw 2.6cqw; margin-bottom: 2.2cqw; border-radius: 3cqw; }
.person .face, .wm .nm img { background: radial-gradient(circle at 50% 30%, #55a455, #2d6a3a); box-shadow: 0 0 0 .4cqw var(--edge); border-radius: 2.4cqw; }
.person .face { width: 14.4cqw; height: 14.4cqw; }
.person .pn { font-size: 4cqw; font-weight: 900; gap: 1.4cqw; text-shadow: 0 .3cqw 0 rgba(0,0,0,.35); }
.person .ps { font-size: 3cqw; color: #c3d3f0; font-weight: 600; }
.person .mini .meter { height: 1.9cqw; }
.wm th { font-size: 2.6cqw; font-weight: 800; color: #c3d3f0; } .wm th .uic { color: #ffd33f; }
.wm tr.row td { background: rgba(255,255,255,.07); }
.wm .nm b { font-size: 3.2cqw; font-weight: 800; } .wm .nm small { font-size: 2.6cqw; color: #b7c8ea; }
.wc { background: #0f1c36; box-shadow: 0 0 0 .35cqw var(--edge); color: #7e93b9; font-weight: 900; border-radius: 2cqw; }
.wc.l1 { background: linear-gradient(180deg, #6f9cff, #3d68d8); color: #fff; box-shadow: 0 0 0 .35cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.4); }
.wc.l2 { background: linear-gradient(180deg, #ffd961, #f0a824); color: #3a2503; box-shadow: 0 0 0 .35cqw var(--edge), inset 0 .4cqw 0 rgba(255,255,255,.6); }
.legend { font-size: 3cqw; color: #c3d3f0; font-weight: 700; }

/* lists, ages, council, map */
.goal { font-size: 3.5cqw; color: #e2ebfb; font-weight: 600; border-bottom: .4cqw solid rgba(255,255,255,.08); }
.goal .dot { background: #0f1c36; box-shadow: 0 0 0 .4cqw var(--edge), inset 0 0 0 .4cqw #6f89b9; } .goal.done .dot { background: #3fb85a; box-shadow: 0 0 0 .4cqw var(--edge); color: #fff; }
.loglines div, .declog .dec, .saga-item { font-size: 3.2cqw; color: #e2ebfb; font-weight: 600; } .declog .dec b { color: #ffd33f; } .saga-day { font-family: var(--sans); font-size: 3.1cqw; font-weight: 900; color: #ffd33f; }
.pbar { height: 2.4cqw; background: #0a1220; border-radius: 1.4cqw; } .pbar > div { background: linear-gradient(#ffe27a, #f0a824); border-radius: 1.4cqw; }
.ring { background: conic-gradient(#ffd33f calc(var(--p) * 1turn), rgba(255,255,255,.14) 0); } .ring::before { background: radial-gradient(circle at 50% 30%, #3a5688, #16253f); } .ring b { font-family: var(--sans); font-weight: 900; color: #fff; }
.age b { font-family: var(--sans); font-size: 3.9cqw; font-weight: 900; color: #e2ebfb; } .age.now b { color: #ffd33f; } .age small.ul { font-size: 3cqw; color: #c3d3f0; }
.age .ag-dot { background: #0f1c36; box-shadow: 0 0 0 .4cqw var(--edge); color: #b7c8ea; } .age.now .ag-dot { background: #ffd33f; color: #3a2503; }
.age::before { background: rgba(255,255,255,.2); }
.seat .ic { color: #b7c8ea; } .seat.active .ic { color: #3a2503; background: radial-gradient(circle at 50% 30%, #ffe27a, #f0a824); } .seat.locked { opacity: .55; }
.card.mind { background: linear-gradient(180deg, #5b4aa6, #40327d); } .card.prop { background: linear-gradient(180deg, #c98a22, #8a5a10); } .card.camp { background: linear-gradient(180deg, #9a3a3a, #6e2326); }
.card.poi.sel, .card.camp.sel { box-shadow: 0 0 0 .6cqw #ffd33f, 0 0 0 1.1cqw var(--edge); }
.mapstats b { font-size: 5cqw; font-weight: 900; color: #fff; } .mapstats small { font-size: 2.7cqw; font-weight: 800; color: #c3d3f0; }
#mapcv { border-radius: 2.6cqw; box-shadow: 0 0 0 .5cqw var(--edge), 0 0 0 1cqw #4a6aa6, 0 1.2cqw 0 1cqw rgba(0,0,0,.35); }
.fcrow, .card.fc .fcrow { font-size: 3cqw; color: #c3d3f0; font-weight: 700; }
.crew .slot { border-radius: 2.4cqw; } .crew .slot.empty { box-shadow: 0 0 0 .45cqw var(--edge), inset 0 0 0 .4cqw #ffd33f; color: #ffd33f; } .crew-h { font-size: 2.9cqw; font-weight: 900; color: #c3d3f0; }
code { background: #0f1c36; color: #cfe0ff; font-size: 3cqw; }
.hintline { font-size: 3.3cqw; color: #c3d3f0; font-weight: 600; } .yearbar { border-radius: 2.4cqw; height: 8cqw; }
.beauty { background: linear-gradient(180deg, #3f8a47, #2e6a3b); box-shadow: 0 0 0 .45cqw var(--edge), inset 0 .45cqw 0 rgba(255,255,255,.2); } .beauty .bt b { font-size: 4.4cqw; color: #fff; } .beauty .bt small { font-size: 3cqw; }

/* the banner (placing a building), design bar, showcase */
#banner.plate { padding: 2.4cqw 3cqw; font-size: 3.7cqw; } #banner-text { color: #fff; font-weight: 800; }
#banner button, #designbar button, #showbar button { border-radius: 2.6cqw; font-weight: 900; font-size: 3.4cqw; padding: 1.6cqw 3.6cqw; color: #fff; background: linear-gradient(180deg, #5b90e8, #3a6cc4); box-shadow: 0 0 0 .45cqw var(--edge), inset 0 .45cqw 0 rgba(255,255,255,.4), 0 .9cqw 0 .45cqw rgba(0,0,0,.35); text-shadow: 0 .3cqw 0 rgba(0,0,0,.4); }
#banner #banner-cancel { background: linear-gradient(180deg, #6fe07a, #36a948); }
#banner #banner-break, #banner #banner-erase { background: linear-gradient(180deg, #5b90e8, #3a6cc4); color: #fff; }
#banner #banner-erase.on, #designbar button.on, #showbar button.on { background: linear-gradient(180deg, #ffd961, #f0a824); color: #3a2503; text-shadow: none; }
#showbar { background: linear-gradient(180deg, #35517f, #27406a); box-shadow: 0 0 0 .6cqw var(--edge); }

/* big announcements: white, fat, dark outline */
#announce .an h2 { font-family: var(--sans); font-weight: 900; font-size: 13cqw; letter-spacing: .08em; text-indent: .08em; color: #fff; -webkit-text-stroke: 1.1cqw #0a1220; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #0a1220, 0 0 6cqw rgba(255,210,100,.6); }
#announce .an p { font-size: 4.2cqw; font-weight: 900; letter-spacing: .06em; color: #fff; -webkit-text-stroke: .6cqw #0a1220; paint-order: stroke fill; }
#announce .an::before, #announce .an::after { background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .5; }
#announce .an.night h2 { color: #d6deff; text-shadow: 0 1.2cqw 0 #0a1220, 0 0 7cqw rgba(110,130,255,.9); } #announce .an.boss h2 { color: #ffb8ae; text-shadow: 0 1.2cqw 0 #0a1220, 0 0 7cqw rgba(255,60,50,.9); }
#announce .an.spring h2 { color: #d4ffb8; } #announce .an.summer h2 { color: #fff0a8; } #announce .an.autumn h2 { color: #ffd196; } #announce .an.winter h2 { color: #e8f6ff; }

/* title, age card, game over */
#title { background: radial-gradient(ellipse at 50% 60%, rgba(255,150,60,.3) 0%, rgba(10,18,32,.72) 42%, rgba(6,10,18,.95) 100%); }
#title h1 { font-family: var(--sans); font-weight: 900; font-size: 17cqw; letter-spacing: .02em; color: #ffd33f; -webkit-text-stroke: 1.6cqw #0a1220; paint-order: stroke fill; text-shadow: 0 1.6cqw 0 #0a1220, 0 0 8cqw rgba(255,150,50,.6); }
.title-tag { font-size: 4cqw; font-weight: 700; color: #e2ebfb; letter-spacing: 0; }
.title-btns { gap: 3.6cqw; width: 72cqw; }
.title-btns button { padding: 3.6cqw 4cqw; border-radius: 4cqw; font-size: 5cqw; color: #fff; background: linear-gradient(180deg, #5b90e8, #3a6cc4); box-shadow: 0 0 0 .6cqw var(--edge), inset 0 .6cqw 0 rgba(255,255,255,.45), inset 0 -.6cqw 0 rgba(0,0,0,.2), 0 1.4cqw 0 .6cqw rgba(0,0,0,.4); text-shadow: 0 .4cqw 0 rgba(0,0,0,.4); }
.title-btns button b { font-family: var(--sans); font-weight: 900; letter-spacing: .02em; text-transform: none; }
.title-btns button small { font-size: 3cqw; font-weight: 700; color: #dce8ff; text-shadow: none; }
.title-btns button.primary, #title-new { background: linear-gradient(180deg, #6fe07a, #36a948); }
.title-btns button.primary small, #title-new small { color: #e6ffe9; }
.title-foot { font-size: 3cqw; color: #b7c8ea; font-weight: 600; letter-spacing: 0; }
.go-card h1 { font-family: var(--sans); font-weight: 900; font-size: 9cqw; color: #ff7a6e; -webkit-text-stroke: 1cqw #0a1220; paint-order: stroke fill; text-shadow: 0 1cqw 0 #0a1220; } #gameover.win .go-card h1 { color: #ffd33f; }
.go-card p { font-size: 3.7cqw; font-weight: 600; color: #e2ebfb; }
.go-card button, .go-btns button:not(.primary) { border-radius: 3cqw; font-size: 4cqw; font-weight: 900; color: #fff; background: linear-gradient(180deg, #5b90e8, #3a6cc4); box-shadow: 0 0 0 .5cqw var(--edge), inset 0 .5cqw 0 rgba(255,255,255,.45), 0 1cqw 0 .5cqw rgba(0,0,0,.38); }
.go-btns button.primary { background: linear-gradient(180deg, #6fe07a, #36a948); }
.era-inner h1 { font-family: var(--sans); font-weight: 900; font-size: 10.5cqw; -webkit-text-stroke: 1.2cqw #0a1220; paint-order: stroke fill; }
.era-inner small { font-size: 3.4cqw; font-weight: 900; } .era-inner p { font-size: 4cqw; font-weight: 700; color: #e2ebfb; } .era-inner ul { font-size: 3.4cqw; font-weight: 600; color: #d5e0f7; }
.era-hint { font-size: 3cqw; font-weight: 700; color: #9db1d3; }

#clock-txt .dl { display: flex; align-items: baseline; white-space: nowrap; }

/* top row: fire · clock · three buttons must all fit on a small phone */
#hud-row { gap: 1.3cqw; }
#hud-row .rbtn, #hud-row .rbtn.sm { width: 9.4cqw; height: 9.4cqw; font-size: 4.9cqw; flex: none; }
#hud-row .rbtn.txt { font-size: 3.2cqw; }
#fire { flex: 1; padding: 0 1.6cqw 0 1.2cqw; gap: 1.1cqw; }
#fire-ico { font-size: 6.6cqw; }
#clock { flex: 1.6; padding: 0 1.4cqw 0 .8cqw; gap: 1.3cqw; }
#clock-ring { width: 8.8cqw; height: 8.8cqw; }
#clock-ico { font-size: 4.6cqw; }
#day-label { font-size: 4.2cqw; }
#clock-time { font-size: 2.7cqw; margin-left: 1cqw; }
#phase-sub { font-size: 2.8cqw; text-transform: none; white-space: nowrap; }

/* tabs wrap onto a second row instead of being cut off */
#sheet-tabs { flex-wrap: wrap; row-gap: 1.4cqw; }
.tab { flex: 1 0 auto; min-width: 20%; padding: 1.7cqw 1.4cqw; white-space: nowrap; }
#clock-txt { margin-left: 1.2cqw; }

/* title buttons: Continue is the big green one; New camp is blue (and green when there is nothing to continue) */
.title-btns button, .title-btns button.primary { color: #fff; background: linear-gradient(180deg, #5b90e8, #3a6cc4); }
.title-btns button.primary, #title-continue { background: linear-gradient(180deg, #6fe07a, #36a948); color: #fff; }
#title-continue[hidden] + #title-new { background: linear-gradient(180deg, #6fe07a, #36a948); }
.title-btns button.primary b, #title-new b { color: #fff; }
.title-btns button.primary small { color: #e6ffe9; }
.title-flame { font-size: 19cqw; } .title-flame .uic { fill: currentColor; fill-opacity: .28; stroke-width: 1.5; }

/* ── placing a building: the plot's ✓ ✕ buttons and cost pill (place.js) ── */
#plot-ui { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
#plot-ui[hidden] { display: none; }
.plot-btn { position: absolute; width: 12.6cqw; height: 12.6cqw; margin: -6.3cqw 0 0 -6.3cqw; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; pointer-events: auto; cursor: pointer;
  box-shadow: 0 0 0 .8cqw var(--edge), 0 1.5cqw 0 .8cqw var(--edge), inset 0 1cqw 0 rgba(255,255,255,.5), inset 0 -1.3cqw 0 rgba(0,0,0,.24); transition: transform .12s, filter .15s; -webkit-tap-highlight-color: transparent; }
.plot-btn svg { width: 64%; height: 64%; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 .6cqw 0 rgba(0,0,0,.35)); }
.plot-ok { background: linear-gradient(180deg, #9af060, #3fae2a); }
.plot-no { background: linear-gradient(180deg, #ff917f, #d6402f); }
.plot-ok.off { background: linear-gradient(180deg, #a9b4c2, #6b7684); filter: saturate(.55) brightness(.92); }
.plot-btn:active { transform: translateY(.9cqw) scale(.94); }
#plot-ui.pop .plot-btn { animation: plotPop .38s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes plotPop { from { transform: scale(.05); } to { transform: scale(1); } }
.plot-cost { position: absolute; transform: translate(-50%, 0); display: flex; align-items: center; gap: 1.6cqw; padding: 1.3cqw 3cqw 1.3cqw 3.2cqw; background: rgba(10,18,38,.86); border-radius: 5cqw;
  box-shadow: 0 0 0 .6cqw var(--edge), 0 1cqw 0 .6cqw rgba(0,0,0,.35); white-space: nowrap; pointer-events: none; }
.plot-cost b { color: #fff; font-size: 3.7cqw; font-weight: 800; margin-right: 1cqw; text-shadow: 0 .45cqw 0 var(--edge); }