/* =====================================================================================================
   Chaos Barricade design system. Every stylesheet takes its colours, sizes, shadows and textures from the
   tokens below and its buttons, cards, tabs, chips, rows, bars and badges from the shared classes at the end
   of this file (.ui-*). ui-unify.css (loaded last) maps the older per-panel classes onto the same look.
   Textures are CSS only: layered gradients, inner bevels, one tiny SVG noise tile and one SVG rivet frame.
   html.gfx-low (low graphics quality) swaps the shadows and textures for flat ones; html.no-motion (reduced
   motion, or the graphics setting) stops every animation. Both classes are set by ui-fx.js.
   ===================================================================================================== */
:root {
  /* --- palette: ground --- */
  --c-ink: #0b110d;            /* wells, inputs, the darkest layer */
  --c-bg: #0f1711;             /* screen background */
  --c-panel: #1b2520;          /* cards, sheets */
  --c-panel-2: #243129;        /* raised parts, plain buttons */
  --c-panel-3: #2f4036;        /* pressed-in highlights, hover */
  --c-line: #33453a;           /* hairlines */
  --c-line-hi: #4a6352;        /* borders of raised parts */
  --c-text: #e9f0e6; --c-text-2: #c3d0c5; --c-muted: #9fb3a4; --c-faint: #74877a;
  /* --- palette: materials --- */
  --c-olive-1: #2a3524; --c-olive-2: #3d4a2f; --c-olive-3: #56653c; --c-olive-4: #7d8c55;   /* worn olive (canvas, uniforms) */
  --c-rust-1: #241808; --c-rust-2: #3a2a17; --c-rust-3: #5a3c20; --c-rust-4: #8a6038; --c-rust-5: #b88a5a; --c-rust-6: #e8c79a; /* rusted metal, wood */
  --c-steel-1: #1c2126; --c-steel-2: #2a3036; --c-steel-3: #3a434b; --c-steel-4: #59636d; --c-steel-5: #aab4bd; /* bare metal */
  --c-parch: #f1e2c6; --c-parch-ink: #3a2e22;                                               /* paper cards on the map */
  /* --- palette: signals --- */
  --c-amber: #f0b43c; --c-amber-hi: #ffd76a; --c-amber-pale: #ffe39a; --c-amber-lo: #c8912a; --c-amber-deep: #7a4f10; --c-amber-ink: #241a05; /* warning amber: the main action colour */
  --c-blood: #e0574c; --c-blood-hi: #ff7a62; --c-blood-lo: #a33a32; --c-blood-deep: #4a1f1f;  /* blood red: danger, enemies, alerts */
  --c-ruby: #ff4f8b; --c-ruby-lo: #a3124a; --c-ruby-deep: #3a0f22;                           /* rubies, paid things */
  --c-good: #5ec46b; --c-good-hi: #8fe35a; --c-good-deep: #1f4a2a;                          /* done, safe, ready */
  --c-blue: #4e8fe0; --c-blue-hi: #7fd4ff; --c-blue-deep: #1d3f6e;                          /* info, allies, shields */
  /* --- palette: rarity --- */
  --c-r-common: #9fb3a4; --c-r-rare: #4e8fe0; --c-r-epic: #b56ee0; --c-r-legendary: #f0b43c; --c-r-mythic: #e0574c;
  /* --- spacing scale (4 px grid) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  /* --- radii --- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;
  /* --- type scale --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;
  /* --- sizes --- */
  --tap: 44px;                 /* height of every main button */
  --tap-sm: 40px;              /* the smallest allowed tap target */
  /* --- elevation --- */
  --sh-1: 0 2px 4px rgba(0,0,0,.35);
  --sh-2: 0 4px 12px rgba(0,0,0,.45);
  --sh-3: 0 10px 28px rgba(0,0,0,.55);
  --sh-glow: 0 0 14px rgba(240,180,60,.4);
  --bevel: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.35);       /* raised edge of dark parts */
  --bevel-hi: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.18);    /* raised edge of bright parts */
  --well: inset 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);       /* sunken parts */
  /* --- textures --- */
  --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 -.14'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --tex-scratch: repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px), repeating-linear-gradient(65deg, rgba(0,0,0,.05) 0 2px, transparent 2px 11px);
  --tex-hazard: repeating-linear-gradient(-45deg, var(--c-amber) 0 8px, #1a1408 8px 16px);
  /* riveted metal frame for border-image (slice 16, corners carry the rivets) */
  --frame-rivet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e2b46a'/%3E%3Cstop offset='.45' stop-color='%23946028'/%3E%3Cstop offset='1' stop-color='%235a3a14'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='46' height='46' rx='12' fill='none' stroke='%23120b04' stroke-width='2'/%3E%3Crect x='5' y='5' width='38' height='38' rx='9' fill='none' stroke='url(%23g)' stroke-width='6'/%3E%3Crect x='9.25' y='9.25' width='29.5' height='29.5' rx='6' fill='none' stroke='%23120b04' stroke-opacity='.85' stroke-width='1.5'/%3E%3Cg fill='%23f6dfae' stroke='%233a2208' stroke-width='.9'%3E%3Ccircle cx='8.5' cy='8.5' r='2.5'/%3E%3Ccircle cx='39.5' cy='8.5' r='2.5'/%3E%3Ccircle cx='8.5' cy='39.5' r='2.5'/%3E%3Ccircle cx='39.5' cy='39.5' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --frame-steel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2396a39a'/%3E%3Cstop offset='.45' stop-color='%234a5a50'/%3E%3Cstop offset='1' stop-color='%23232d27'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='46' height='46' rx='12' fill='none' stroke='%23060a07' stroke-width='2'/%3E%3Crect x='5' y='5' width='38' height='38' rx='9' fill='none' stroke='url(%23g)' stroke-width='6'/%3E%3Crect x='9.25' y='9.25' width='29.5' height='29.5' rx='6' fill='none' stroke='%23060a07' stroke-opacity='.85' stroke-width='1.5'/%3E%3Cg fill='%23c9d3cb' stroke='%23141a16' stroke-width='.9'%3E%3Ccircle cx='8.5' cy='8.5' r='2.5'/%3E%3Ccircle cx='39.5' cy='8.5' r='2.5'/%3E%3Ccircle cx='8.5' cy='39.5' r='2.5'/%3E%3Ccircle cx='39.5' cy='39.5' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  /* --- surfaces (texture + colour, ready to use as `background`) --- */
  --surf-screen: var(--tex-noise), radial-gradient(120% 60% at 50% 0%, #18241b, transparent 70%), var(--c-bg);
  --surf-card: linear-gradient(#202c25, #18211c);
  --surf-raised: linear-gradient(#2c3b31, #1f2a23);
  --surf-wood: var(--tex-scratch), linear-gradient(#42301a, #2a1c0c 60%, #20150a);
  --surf-steel: var(--tex-scratch), linear-gradient(#2a352d, #171f1a);
  --surf-amber: linear-gradient(#ffdc82, #eeaa33 52%, #c07d1c);
  --surf-blood: linear-gradient(#ff8068, #d4432f 52%, #942519);
  --surf-good: linear-gradient(#8fe27c, #3fa652 55%, #25783a);
  --surf-blue: linear-gradient(#7cc0f5, #3a84d6 55%, #23579c);
  --surf-ruby: linear-gradient(#ff7aa6, #e02f6c 52%, #9a1447);
  /* --- motion --- */
  --ease-out: cubic-bezier(.2, .8, .3, 1); --ease-pop: cubic-bezier(.2, 1.5, .4, 1);
  --t-press: .08s; --t-fast: .16s; --t-med: .24s;
  /* --- the older names, kept so every panel stylesheet keeps working --- */
  --bg: var(--c-bg); --panel: var(--c-panel); --panel2: var(--c-panel-2); --line: var(--c-line); --text: var(--c-text); --muted: var(--c-muted);
  --accent: var(--c-amber); --good: var(--c-good); --bad: var(--c-blood); --blue: var(--c-blue);
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* low graphics quality: flat shadows, no textures (ui-fx.js sets the class from window.GFX) */
html.gfx-low {
  --sh-1: 0 1px 0 rgba(0,0,0,.5); --sh-2: 0 2px 0 rgba(0,0,0,.5); --sh-3: 0 0 0 1px rgba(0,0,0,.6); --sh-glow: 0 0 0 1px var(--c-amber-lo);
  --tex-noise: none; --tex-scratch: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: var(--fs-base)/1.35 var(--font); overscroll-behavior: none; }
.hidden { display: none !important; }

/* ---------- buttons: one family ----------
   plain <button> = secondary; .primary = the main action (amber); .danger = destructive (blood red);
   .ghost = quiet; :disabled = greyed. Main buttons are 44 px tall. Pressing moves the face down one step
   (`translate`, so buttons that are placed with `transform` keep their place). */
button { font: inherit; color: inherit; background: var(--surf-raised); border: 1px solid var(--c-line-hi); border-radius: var(--r-md); padding: 8px 12px; cursor: pointer;
  transition: translate var(--t-press), filter var(--t-fast), box-shadow var(--t-press); touch-action: manipulation; }
button:active:not(:disabled) { translate: 0 1px; filter: brightness(.92); }
button:disabled { opacity: .5; cursor: default; filter: saturate(.35); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--c-amber-hi); outline-offset: 2px; }
button.primary, button.danger, button.good, .ui-btn { min-height: var(--tap); padding: 8px 16px; border-radius: var(--r-lg); font-weight: 800; letter-spacing: .01em; }
button.primary { background: var(--surf-amber); color: var(--c-amber-ink); border-color: #ffe7a6 #e0a030 #9a6414; text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: var(--bevel-hi), 0 3px 0 var(--c-amber-deep), var(--sh-1); }
button.danger { background: var(--surf-blood); color: #fff; border-color: #ffab9c #c23a28 #6e1a10; text-shadow: 0 1px 1px rgba(0,0,0,.5); box-shadow: var(--bevel-hi), 0 3px 0 #5a1810, var(--sh-1); }
button.good { background: var(--surf-good); color: #062b0e; border-color: #c9ffd0 #3fa652 #1c5a2a; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: var(--bevel-hi), 0 3px 0 #17461f, var(--sh-1); }
button.primary:active:not(:disabled), button.danger:active:not(:disabled), button.good:active:not(:disabled) { translate: 0 2px; box-shadow: var(--bevel-hi), 0 1px 0 rgba(0,0,0,.6); }
button.primary:disabled, button.danger:disabled, button.good:disabled { opacity: 1; color: #b9c2bb; text-shadow: none; background: linear-gradient(#56605a, #3b443f); border-color: #6b766f #49524c #2c332f; box-shadow: var(--bevel), 0 2px 0 #1b211d; filter: none; }
button.ghost { background: rgba(0,0,0,.28); border-color: var(--c-line); box-shadow: none; }
input, select, textarea { font: inherit; color: inherit; background: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 8px 10px; box-shadow: var(--well); }
input:focus, select:focus, textarea:focus { border-color: var(--c-amber-lo); outline: 0; }
input::placeholder, textarea::placeholder { color: var(--c-faint); }
input[type=checkbox], input[type=radio], input[type=range] { box-shadow: none; accent-color: var(--c-amber); }
select option { background: #141d17; color: var(--text); }
b { font-weight: 600; }
.muted { color: var(--muted); font-size: var(--fs-md); }
.err { color: #ff8a7e; min-height: 1.2em; font-size: var(--fs-md); }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
/* on wide screens behave like a phone in the middle of the page */
@media (min-width: 700px) {
  html:not(.land) #game { left: 50%; width: 520px; transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  body { background: #0a100c radial-gradient(circle at 50% 30%, #16241a, #0a100c 70%); }
}

/* login */
#login { align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
  background: var(--tex-noise), radial-gradient(90% 55% at 50% 12%, rgba(240,180,60,.16), transparent 70%), radial-gradient(120% 80% at 50% 100%, rgba(120,30,20,.28), transparent 65%), linear-gradient(#1a2a1e, #0c120e 70%); }
#login::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--tex-hazard); opacity: .85; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
#login::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--tex-hazard); opacity: .85; }
.login-card { position: relative; width: min(372px, 100%); padding: 96px 18px 16px; display: grid; gap: 12px; text-align: center;
  background: var(--tex-noise), var(--surf-card); border: 9px solid transparent; border-image: var(--frame-rivet) 16 / 9px / 0 stretch; border-radius: 8px; box-shadow: var(--sh-3); }
.login-card::before { content: ''; position: absolute; left: 50%; top: -34px; width: 116px; height: 116px; margin-left: -58px; border-radius: 26px; background: url(icon-192.png) center / cover; box-shadow: 0 0 0 3px var(--c-amber-deep), 0 0 0 5px #120b04, 0 10px 24px rgba(0,0,0,.6), 0 0 34px rgba(240,180,60,.25); }
.login-card h1 { margin: 0; font: 900 28px/1.1 var(--font); letter-spacing: .02em; color: var(--c-amber-hi); text-shadow: 0 2px 0 #4a2f08, 0 0 18px rgba(240,180,60,.35); }
.login-card h1 small { display: block; margin-top: 4px; font: 700 var(--fs-sm)/1 var(--font-mono); letter-spacing: .12em; color: var(--c-muted); text-shadow: none; }
.login-card p { margin: 0 0 2px; color: var(--c-text-2); font-size: var(--fs-md); }
.login-card input { min-height: 46px; padding: 10px 12px; font-size: var(--fs-lg); text-align: left; min-width: 0; width: 100%; } .login-card input::placeholder { font-size: var(--fs-md); }
.login-card button.primary { min-height: 52px; font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }
.login-card .err:empty { display: none; }
.login-card .err { padding: 8px 10px; border-radius: var(--r-md); background: rgba(224,87,76,.14); border: 1px solid var(--c-blood-lo); }
@media (max-height: 520px) { .login-card { padding-top: 14px; } .login-card::before { display: none; } }

/* header: a steel plate with sunken resource wells */
#top { position: relative; z-index: 2; padding: calc(6px + var(--safe-top)) 10px 7px; background: var(--surf-steel); border-bottom: 1px solid #0a0f0b; box-shadow: inset 0 -1px 0 rgba(240,180,60,.28), inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.5); display: grid; gap: 5px; }
#top .who { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
#top #p-name { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 #000; }
#top .power { color: var(--c-amber-hi); font-weight: 600; white-space: nowrap; } #top .power b { font-weight: 800; }
#top .res { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: var(--fs-sm); }
#top .res span { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; background: linear-gradient(#070b08, #101812); border: 1px solid #2c3a31; border-radius: var(--r-pill); padding: 1px 8px 1px 4px; white-space: nowrap; flex: 0 0 auto; box-shadow: var(--well); }
#top .res b { font-weight: 800; font-variant-numeric: tabular-nums; color: #f3f6ee; }
#top .res b.ui-up { color: var(--c-good-hi); } #top .res b.ui-down { color: #ffb3aa; }
#top .res b .st-max { font-size: 1em; font-weight: 700; color: #c9d2c4; }
@media (max-width: 430px) { #top .res { gap: 3px; font-size: var(--fs-xs); justify-content: space-between; } #top .res span { padding: 1px 6px 1px 3px; gap: 3px; } } /* five chips with "16.76M" values fit a 360-430 px phone without scrolling */
@media (max-width: 374px) { #top .res { gap: 2px; } #top .res > span { padding: 1px 4px 1px 2px; gap: 2px; } #top .res .ico { width: 15px; height: 15px; } #top .res b { letter-spacing: -.02em; } } /* 360 px: a little tighter */
@media (max-width: 359px) { #top .res b .st-max { display: none; } } /* 320 px: energy shows "100" (the chip title keeps "100/100") */

/* main */
#view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#panel { position: absolute; inset: 0; overflow-y: auto; padding: 12px 12px 24px; background: var(--surf-screen); }
#queue { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
#queue .chip { pointer-events: auto; background: rgba(20, 30, 24, .92); border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; font-size: 12px; display: flex; gap: 6px; align-items: center; }
#queue .chip button { padding: 2px 6px; font-size: 11px; border-radius: 6px; }

/* map UI */
#map-ui > * { position: absolute; }
#minimap { top: 8px; right: 8px; border: 1px solid var(--line); border-radius: 8px; background: #2d3f2a; }
#legend { top: 8px; left: 8px; background: rgba(20, 30, 24, .85); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 11px; display: grid; gap: 2px; }
#legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
#coord-bar { bottom: 10px; left: 8px; right: 8px; display: flex; gap: 6px; align-items: center; }
#coord-bar input { width: 90px; padding: 6px 8px; }
#coord-bar button { padding: 6px 10px; }
#coord-now { font: 700 12px/1 system-ui; color: #fff; background: rgba(20, 30, 24, .85); border: 1px solid #c8a46a; border-radius: 999px; padding: 8px 10px; min-height: 28px; margin-left: auto; }
#btn-home { border-radius: 50%; width: 34px; height: 34px; padding: 0; border: 1px solid #c8a46a; background: rgba(20, 30, 24, .85); }

/* nav */
#nav { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: #141d17; padding-bottom: var(--safe-bottom); }
#nav button { border: 0; border-radius: 0; background: none; padding: 8px 0 6px; font-size: 22px; display: grid; justify-items: center; gap: 1px; color: var(--muted); }
#nav button span { font-size: 11px; }
#nav button.active { color: var(--accent); }
#nav button { position: relative; }
#nav .nav-bdg { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad); color: #fff; font: 700 10px/16px system-ui; font-style: normal; }

/* bottom sheet */
#sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 82%; background: var(--tex-noise), var(--surf-card); border-top: 2px solid var(--c-amber-lo); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,160,.18); display: flex; flex-direction: column; z-index: 20; }
#sheet:not(.hidden):not(.popup) { animation: sheetUp var(--t-med) var(--ease-out); }
@keyframes sheetUp { from { translate: 0 36px; opacity: 0; } }
/* wide screens: the sheet sits under the phone-sized game column (after the base rule so left/right don't win) */
@media (min-width: 700px) { #sheet { left: 50%; right: auto; width: 520px; transform: translateX(-50%); } }
/* popup variant: a centered card (Settings, Account, Details…) */
#sheet.popup { top: 50%; bottom: auto; left: 50%; right: auto; width: min(440px, calc(100% - 32px)); max-height: min(78%, 640px); transform: translate(-50%, -50%);
  border: 8px solid transparent; border-image: var(--frame-rivet) 16 / 8px / 0 stretch; border-radius: 7px; box-shadow: 0 0 0 100vmax rgba(4,7,5,.66), 0 18px 40px rgba(0,0,0,.6); animation: popIn var(--t-fast) var(--ease-out); }
#sheet.popup #sheet-body { padding-bottom: 16px; border-radius: 0; }
#sheet.popup .sheet-head { border-radius: 0; }
@keyframes popIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
#sheet-body { overflow-y: auto; padding: 12px 14px calc(16px + var(--safe-bottom)); border-radius: inherit; }
#sheet h2 { margin: 0 0 4px; font-size: var(--fs-xl); display: flex; align-items: center; gap: 8px; }
#sheet h3 { margin: 14px 0 6px; font-size: var(--fs-md); font-weight: 800; color: var(--c-amber); text-transform: uppercase; letter-spacing: .06em; }
/* sheet header: a bar that stays in place while the sheet scrolls, title left, close button right */
.sheet-head { position: sticky; top: -12px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; margin: -12px -14px 12px; padding: 6px 8px 6px 14px;
  background: var(--surf-wood); border-bottom: 1px solid #120b04; box-shadow: inset 0 -1px 0 rgba(240,180,60,.45), 0 3px 8px rgba(0,0,0,.4); border-radius: calc(var(--r-xl) - 2px) calc(var(--r-xl) - 2px) 0 0; }
.sheet-head > div { min-width: 0; }
#sheet .sheet-head h2 { margin: 0; color: var(--c-amber-hi); font-weight: 800; letter-spacing: .01em; text-shadow: 0 1px 0 #000; overflow-wrap: anywhere; }
.sheet-head .muted { color: #d9c9a8; font-size: var(--fs-sm); }
.sheet-head button { flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 16px; font-weight: 900; color: var(--c-amber-pale); background: rgba(0,0,0,.38); border: 1px solid var(--c-rust-3); border-radius: var(--r-md); box-shadow: var(--bevel); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.cost { display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--fs-md); }
.cost .no { color: #ff8a7e; font-weight: 700; }
.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.actions button { flex: 1; min-height: var(--tap); }
.map-action-prompt { position: fixed; z-index: 80; width: min(310px, calc(100vw - 24px)); padding: 8px; transform: translate(-50%, -100%); border: 1px solid #d6a345; border-radius: 12px; color: #f5edda; background: linear-gradient(155deg, rgba(49,57,43,.98), rgba(17,24,19,.98)); box-shadow: 0 8px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,235,175,.18); }
.map-action-prompt::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); border-right: 1px solid #d6a345; border-bottom: 1px solid #d6a345; background: #20291f; }
.map-action-prompt.below { transform: translate(-50%, 0); }
.map-action-prompt.below::after { top: -8px; bottom: auto; transform: translateX(-50%) rotate(225deg); }
.map-action-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 1px 2px 7px; }
.map-action-title > div { display: grid; gap: 2px; min-width: 0; }
.map-action-title b { color: var(--c-amber-hi); font-size: 15px; line-height: 1.2; }
.map-action-title small { color: #d6d0bd; font-size: 11px; }
.map-action-close { flex: none; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #f4e9ce; background: rgba(0,0,0,.3); font-size: 20px; line-height: 1; }
.map-action-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.map-action-button { flex: 1 1 42%; min-height: 38px; padding: 6px 9px; border: 1px solid rgba(240,190,85,.5); border-radius: 8px; color: #f4e9ce; background: rgba(0,0,0,.28); font: 800 13px/1.2 system-ui; }
.map-action-button.primary { color: #24190a; background: linear-gradient(#ffdc83, #d99126); }
.map-action-button.danger { color: #fff0e9; background: linear-gradient(#b74c39, #76251e); }
.map-action-button:disabled { opacity: .5; }
.map-action-details { display: block; margin: 6px auto 0; padding: 3px 8px; border: 0; color: #cfbea0; background: transparent; font: 700 11px system-ui; }
.troop-pick { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 4px 0; }
.troop-pick input { width: 84px; text-align: right; }
.hero-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hero-pick label { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.hero-pick input { margin-right: 4px; }
.card { background: var(--surf-card); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 12px; margin-bottom: 10px; box-shadow: var(--bevel), var(--sh-1); }
.card h3 { margin: 0 0 8px; font-size: var(--fs-base); font-weight: 800; }
.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: var(--panel2); border: 1px solid var(--c-line-hi); }
.badge.win { background: var(--c-good-deep); border-color: var(--good); color: #c9f5d0; }
.badge.loss { background: var(--c-blood-deep); border-color: var(--bad); color: #ffc9c2; }
.bar { height: 8px; background: var(--c-ink); border-radius: 4px; overflow: hidden; margin-top: 4px; box-shadow: var(--well); }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(var(--c-good-hi), #3fa652); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: width var(--t-med) var(--ease-out); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#music-btn { border: 0; background: none; padding: 7px 6px 7px 2px; margin: -7px 0 -7px -2px; font-size: 15px; line-height: 1; cursor: pointer; } /* 28 px tall tap area, same row height */
#music-btn.off { opacity: .45; }
/* server restart: "back in a moment" over everything, until the game reloads itself */
#restart { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(8,12,9,.84); backdrop-filter: blur(3px); touch-action: none; }
.rst-card { width: min(310px, 86vw); padding: 22px 18px 20px; border-radius: 18px; text-align: center; color: #eef2ea; background: linear-gradient(#24321f, #131a13); border: 2px solid #d9a63a; box-shadow: 0 12px 44px rgba(0,0,0,.65); }
.rst-ico { display: inline-block; font-size: 40px; animation: rstWork 1.6s ease-in-out infinite; }
.rst-card h2 { margin: 6px 0 2px; font-size: 20px; color: #f3c75a; }
.rst-sub { font-size: 13px; opacity: .85; }
.rst-num { display: block; margin: 10px 0 6px; font-size: 56px; line-height: 1; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.rst-note { font-size: 13px; opacity: .8; }
@keyframes rstWork { 50% { transform: rotate(-38deg); } }
#toast { position: fixed; left: 50%; bottom: calc(92px + var(--safe-bottom)); transform: translateX(-50%); z-index: 70; width: max-content; max-width: min(92%, 440px); padding: 10px 16px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--c-text);
  background: var(--surf-wood); border: 1px solid var(--c-amber-lo); border-left: 4px solid var(--c-amber); border-radius: var(--r-lg); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,230,160,.2); pointer-events: none; animation: toastIn var(--t-med) var(--ease-pop); }
#toast[data-kind='warn'] { border-color: var(--c-blood-lo); border-left-color: var(--c-blood); background: var(--tex-scratch), linear-gradient(#4a1c16, #2a100c); color: #ffe1dc; }
#toast[data-kind='good'] { border-color: #2f7d42; border-left-color: var(--c-good); background: var(--tex-scratch), linear-gradient(#1f3d26, #122317); color: #e2f8e4; }
@keyframes toastIn { from { translate: 0 14px; opacity: 0; scale: .94; } }
.report-round { font-size: 12px; color: var(--muted); }

/* ---------- building action ring (tap a building) ---------- */
#bring { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 7; pointer-events: none; --r: 40px; } /* above the HUD: a four-button ring reaches its side rails */
#bring > * { pointer-events: auto; }
#bring.pop .rb-plate, #bring.pop .rb-timer { animation: rb-in .18s ease-out both; }
#bring.pop .rb { animation: rb-pop .26s cubic-bezier(.2, 1.6, .4, 1) both; }
#bring.pop .rb:nth-child(2) { animation-delay: .03s; } #bring.pop .rb:nth-child(3) { animation-delay: .06s; } #bring.pop .rb:nth-child(4) { animation-delay: .09s; }
@keyframes rb-in { from { opacity: 0; transform: translate(-50%, -100%) scale(.85); } }
@keyframes rb-pop { from { opacity: 0; transform: translate(calc(-50% + var(--dx) * .3), calc(var(--dy) - 30px)) scale(.4); } }
.rb-plate { position: absolute; left: 0; top: calc(var(--r) * -1.25 - 34px); transform: translate(-50%, -100%); display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 3px 14px 3px 4px; border-radius: 999px; background: linear-gradient(rgba(30,24,16,.92), rgba(16,12,8,.92)); border: 1px solid rgba(240,180,60,.45); box-shadow: 0 4px 14px rgba(0,0,0,.5);
  font: 800 15px/1 system-ui; color: #fff; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.6); }
.rb-lv { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 900 13px/1 system-ui; color: #fff; background: radial-gradient(circle at 35% 30%, #ff8a4a, #c2351c 70%); border: 2px solid #ffd27a; box-shadow: 0 0 0 2px #6b2a10, 0 2px 4px rgba(0,0,0,.5); }
.rb-timer { position: absolute; left: 0; top: calc(var(--r) * -1.25 - 2px); transform: translate(-50%, -100%); display: flex; align-items: center; gap: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.rb-builder { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 19px; background: linear-gradient(#ffb15a, #d7642a); border: 2px solid #fff3; position: relative; z-index: 1; margin-right: -6px; }
.rb-bar { position: relative; width: 150px; height: 26px; border-radius: 0 8px 8px 0; background: #1c1c1c; border: 2px solid #0b0b0b; overflow: hidden; display: grid; place-items: center; }
.rb-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#8fe35a, #4fa52b); transition: width .5s linear; }
.rb-bar b { position: relative; font: 900 15px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; letter-spacing: .02em; }
.rb-speed { margin-left: 6px; width: 32px; height: 30px; padding: 0; border-radius: 8px; background: linear-gradient(#7fd4ff, #2f86d8); border: 2px solid #ffffff55; font-size: 14px; }
.rb-row { position: absolute; left: 0; top: calc(var(--r) * .35); }
.rb { position: absolute; left: 0; top: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)); width: 78px; padding: 0; border: 0; background: none; display: grid; justify-items: center; gap: 2px; cursor: pointer; }
.rb:active .rb-ico { transform: scale(.92); }
.rb-ico { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; transition: transform .08s;
  background: radial-gradient(circle at 50% 30%, #f6b678 0%, #e08a45 45%, #b85a24 100%); border: 3px solid #f9d3a6;
  box-shadow: 0 0 0 2px #7a3a14, 0 5px 0 #6b3010, 0 8px 14px rgba(0,0,0,.55), inset 0 -6px 10px rgba(120,50,10,.35), inset 0 4px 6px rgba(255,255,255,.35); }
.rb-ico svg { width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 2px 0 rgba(110,45,10,.7)); }
.rb-up .rb-ico { width: 68px; height: 68px; background: radial-gradient(circle at 50% 30%, #ffcf86 0%, #ee9a45 45%, #c0601f 100%); }
.rb-up .rb-ico svg { width: 34px; height: 34px; }
.rb-lb { font: 800 15px/1.1 system-ui; color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000, 1px 0 0 #000, -1px 0 0 #000; white-space: nowrap; }
.rb.rb-off .rb-ico { filter: grayscale(1) brightness(.72); } .rb.rb-off .rb-lb { color: #c9c9c9; } /* blocked by a shield: tapping tells why */
/* "More" sheet of a ring: the actions that did not fit its four buttons */
.ring-more { display: grid; gap: 8px; margin-top: 10px; }
.ring-more button { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; font-size: 16px; }
.ring-more .rm-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #f6b678, #b85a24); }
.ring-more .rm-ico svg { width: 22px; height: 22px; fill: #fff; } .ring-more i { font-style: normal; font-size: 20px; color: var(--accent); }
.ring-more-bdg { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: #c8392e; color: #fff; font: 800 11px/1 system-ui; }
/* upgrade sheet */
.up-hero { display: grid; justify-items: center; gap: 4px; padding: 6px 0 10px; text-align: center; }
.up-lv { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.up-lv span { color: var(--muted); font-weight: 700; } .up-lv i { color: var(--accent); font-style: normal; } .up-lv b { color: var(--accent); font-weight: 900; font-size: 24px; }
.row.locked { opacity: .5; }

/* ---------- chat ticker (bottom strip on Base / Map) ---------- */
#ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 62px; padding: 6px 14px 6px 12px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 8px;
  background: linear-gradient(rgba(10,14,12,0), rgba(10,14,12,.78) 22%, rgba(10,14,12,.9)); border-top: 1px solid rgba(255,255,255,.06); cursor: pointer; touch-action: pan-y; }
#ticker .tk-dots { grid-column: 1 / -1; justify-self: center; display: flex; gap: 4px; margin: -2px 0 2px; }
#ticker .tk-dots button { width: 18px; height: 5px; padding: 0; border: 0; border-radius: 1px; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); position: relative; }
#ticker .tk-dots button::after { content: ""; position: absolute; inset: -12px -2px; } /* the dot stays small, the tap area is 22 x 29 */
#ticker .tk-dots button.on { background: #ffd23a; box-shadow: 0 0 6px rgba(255,210,58,.6); }
#ticker .tk-ch { grid-row: 2; align-self: center; font: 800 10px/1 system-ui; color: #9fb3a4; text-transform: uppercase; letter-spacing: .06em; writing-mode: vertical-rl; transform: rotate(180deg); opacity: .8; }
#ticker .tk-body { grid-row: 2; grid-column: 2; min-width: 0; display: grid; align-content: center; gap: 2px; }
#ticker .tk-line { font: 700 14px/1.25 system-ui; color: #e9f4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
#ticker .tk-from { color: #6fd0ff; font-weight: 800; }
#ticker .tk-at { color: #ff9a3c; font-weight: 800; } #ticker .tk-at.me { color: #ffb23c; text-decoration: underline; }
#ticker .tk-empty { color: var(--muted); font-weight: 600; font-style: italic; }
#ticker .tk-mention { position: absolute; right: 10px; top: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #c62e2e; color: #fff; font: 800 12px/1 system-ui; box-shadow: 0 0 0 2px #fff4; }
#ticker .tk-dot { position: absolute; right: 12px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); }
#view.has-ticker #coord-bar { bottom: 70px; }
#view.has-ticker #queue { bottom: auto; }

/* ---------- world map: base card ---------- */
#bcard { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 7; pointer-events: none; --t: 52px; }
#bcard > * { pointer-events: auto; }
.bc-pop { position: absolute; left: 0; bottom: calc(var(--t) * .55 + 18px); width: 300px; transform: translateX(calc(-50% + var(--sx, 0px))); padding: 10px 10px 12px; border-radius: 14px;
  background: linear-gradient(#fbf3e4, #f1e2c6); color: #3a2e22; box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 2px #d9c39b; animation: rb-in .18s ease-out both; }
.bc-pop::after { content: ''; position: absolute; left: calc(50% - var(--sx, 0px)); bottom: -9px; width: 18px; height: 18px; transform: translateX(-50%) rotate(45deg); background: #f1e2c6; box-shadow: 2px 2px 0 #d9c39b; }
.bc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.bc-warnic { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 5px; display: grid; place-items: center; font: 900 13px/1 system-ui; color: #fff; background: #6b4a2e; }
.bc-name { flex: 1; min-width: 0; font: 900 16px/1.1 system-ui; color: #2c2218; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-ib { width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 0; color: #fff; display: grid; place-items: center; font-size: 17px; box-shadow: 0 3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35); }
.bc-ib.flag { background: linear-gradient(#b48cf0, #7a4fc4); } .bc-ib.flag::before { content: '🚩'; }
.bc-ib.star { background: linear-gradient(#7fd8cf, #3aa79c); } .bc-ib.star::before { content: '☆'; font-weight: 900; } .bc-ib.star.on::before { content: '★'; color: #ffe066; }
.bc-ib.share { background: linear-gradient(#7fd8cf, #3aa79c); } .bc-ib.share::before { content: '⤴'; font-weight: 900; }
.bc-ib.on { box-shadow: 0 0 0 2px #fff, 0 3px 0 rgba(0,0,0,.25); }
.bc-banner { position: relative; height: 92px; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 75% 40%, rgba(255,255,255,.25), transparent 40%), linear-gradient(135deg, #e7a874, #d98a54); }
.bc-banner.ally { background: radial-gradient(circle at 75% 40%, rgba(255,255,255,.25), transparent 40%), linear-gradient(135deg, #e7b874, #c99a44); }
.bc-banner.mine { background: linear-gradient(135deg, #8fc0e8, var(--c-blue)); }
.bc-emblem { width: 66px; height: 66px; border-radius: 10px; display: grid; place-items: center; font-size: 34px; background: linear-gradient(#f6e3c4, #d9b88a); border: 3px solid #fff3dc; box-shadow: 0 3px 8px rgba(0,0,0,.3); overflow: hidden; }
.bc-emblem .pn-portrait, .bc-emblem img { width: 100% !important; height: 100% !important; border-radius: 0 !important; border: 0 !important; object-fit: cover; }
.bc-xy { position: absolute; left: 8px; bottom: 6px; font: 900 15px/1 system-ui; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.bc-rows { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(120,90,50,.1); }
.bc-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 15px; color: #6b5a46; } .bc-row b { color: #2c2218; font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.bc-row.bc-tap { width: 100%; min-height: 28px; align-items: center; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: inherit; cursor: pointer; } .bc-tap b { flex: 1; text-decoration: underline dotted; text-underline-offset: 3px; } .bc-tap i { font-style: normal; font-weight: 900; color: #b8742a; }
.bc-prot { margin: 4px -4px 0; padding: 4px 8px; border-radius: 999px; font-weight: 800; background: rgba(63,143,217,.18); color: #1f4f86; } .bc-prot b { color: #1f4f86; font-variant-numeric: tabular-nums; }
.bc-prot.newbie { background: rgba(60,170,100,.2); color: #1d6a3c; } .bc-prot.newbie b { color: #1d6a3c; } .bc-prot.looted { background: rgba(220,150,40,.22); color: #8a5a10; } .bc-prot.looted b { color: #8a5a10; }
.bc-like { display: grid; justify-items: center; gap: 2px; margin: 8px auto 0; padding: 0; border: 0; background: none; color: #3a2e22; }
.bc-thumb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: radial-gradient(circle at 50% 35%, #ff8a8a, #d63a3a); box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0,0,0,.3); }
.bc-like small { font: 800 13px/1 system-ui; } .bc-like.done .bc-thumb { filter: grayscale(.6); } .bc-like:disabled { opacity: 1; }
.bc-warn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.1); font: 700 13px/1.2 system-ui; color: #4a3a2a; }
.bc-plate { position: absolute; left: 0; top: calc(var(--t) * .45); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; white-space: nowrap; padding: 2px 10px; border-radius: 4px;
  background: rgba(0,0,0,.6); color: #8fd0ff; font: 800 13px/1.3 system-ui; text-shadow: 0 1px 0 #000; }
.bc-lv { font: 900 11px/1 system-ui; font-style: normal; padding: 2px 5px; border-radius: 6px; background: #c2351c; color: #fff; }
.bc-ring { top: calc(var(--t) * .45 + 30px) !important; }
/* a four-button ring (base or map card) spans a phone screen: the HUD side rails step aside while it is open */
#view.ring-wide .hud-left, #view.ring-wide .hud-right, #view.card-wide .hud-left, #view.card-wide .hud-right, #view.ring-wide #qp-tab:not(.open), #view.card-wide #qp-tab:not(.open) { opacity: 0; pointer-events: none; }
/* short landscape screens (phones): the popup does not fit above the base, so it stands to its left (app.js frames the base higher) */
@media (max-height: 560px) {
  html.land .bc-pop { bottom: auto; top: 0; padding: 8px 10px 10px; transform: translate(calc(-100% - 176px), -36%); animation: none; }
  html.land .bc-pop::after, html.land .bc-banner { display: none; }
  html.land .bc-like { margin-top: 4px; } html.land .bc-thumb { width: 36px; height: 36px; font-size: 18px; }
}

/* ---------- world map: search ---------- */
#map-search-btn { position: absolute; left: 10px; bottom: 118px; width: 52px; height: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: radial-gradient(circle at 50% 35%, #a4785a, #6b4a2e); border: 3px solid #e8c79a; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
#map-search { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; padding: 12px 10px calc(14px + var(--safe-bottom)); border-radius: 16px 16px 0 0;
  background: linear-gradient(#f3e6cf, #e6d3b0); color: #3a2e22; box-shadow: 0 -10px 30px rgba(0,0,0,.55); animation: ms-up .22s ease-out; }
@keyframes ms-up { from { transform: translateY(40px); opacity: 0; } }
.ms-close { position: absolute; right: 8px; top: -44px; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 1px solid #fff4; }
.ms-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; scroll-snap-type: x mandatory; }
.ms-kind { position: relative; flex: 0 0 96px; height: 112px; padding: 0; border: 0; background: none; display: grid; justify-items: center; align-content: end; gap: 2px; scroll-snap-align: center; filter: grayscale(1) brightness(.95); opacity: .8; }
.ms-kind.on { filter: none; opacity: 1; }
.ms-kind.on::before, .ms-kind.on::after { content: ''; position: absolute; inset: 4px; border: 4px solid var(--c-amber); border-radius: 2px; clip-path: polygon(0 0, 22% 0, 22% 8%, 8% 8%, 8% 22%, 0 22%, 0 78%, 8% 78%, 8% 92%, 22% 92%, 22% 100%, 0 100%); }
.ms-kind.on::after { transform: scaleX(-1); }
.ms-art { display: grid; place-items: center; height: 80px; } .ms-art canvas { width: 74px; height: 74px; } .ms-emo { font-size: 46px; }
.ms-lb { font: 900 13px/1.05 system-ui; color: #fff; text-align: center; text-shadow: 0 2px 0 #3a2e22, 1px 0 0 #3a2e22, -1px 0 0 #3a2e22, 0 -1px 0 #3a2e22; max-width: 94px; }
.ms-box { margin: 6px 0 4px; padding: 8px; border-radius: 10px; background: rgba(120,90,50,.14); }
.ms-title { text-align: center; font: 800 15px/1 system-ui; color: #6b5a46; margin-bottom: 8px; }
.ms-rewards { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ms-rw { position: relative; width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(#5fb8ef, #2f7fc4); box-shadow: 0 0 0 2px #1d4f8f, inset 0 2px 0 rgba(255,255,255,.35); }
.ms-rw:first-child { background: linear-gradient(#ffb15a, #e0782a); box-shadow: 0 0 0 2px #8a4a10, inset 0 2px 0 rgba(255,255,255,.35); }
.ms-rw b { position: absolute; right: 3px; bottom: 1px; font: 900 12px/1 system-ui; color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.ms-lv { text-align: center; font: 800 15px/1 system-ui; color: #5a4a36; margin: 6px 0 4px; }
.ms-ctrl { display: grid; grid-template-columns: 44px 1fr 44px auto; gap: 8px; align-items: center; }
.ms-pm { width: 44px; height: 40px; padding: 0; border-radius: 10px; font: 900 24px/1 system-ui; color: #fff; background: linear-gradient(#6fc7c0, #3a978f); border: 0; box-shadow: 0 3px 0 #2a6b65; }
.ms-range { width: 100%; accent-color: #3a978f; height: 22px; }
.ms-go { min-width: 110px; height: 46px; border-radius: 12px; font: 900 20px/1 system-ui; color: #fff; background: linear-gradient(#6fc7c0, #3a978f); border: 0; box-shadow: 0 4px 0 #2a6b65, inset 0 2px 0 rgba(255,255,255,.35); text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.ms-go.locked { opacity: 1; color: #fff; min-width: 0; max-width: 124px; padding: 0 8px; font: 800 12px/1.15 system-ui; background: linear-gradient(#a19a90, #736d65); box-shadow: 0 4px 0 #4a4640; text-shadow: none; }
.ms-note { text-align: center; font: 700 12px/1.2 system-ui; color: #7a6a56; margin-top: 2px; }
/* world map chrome */
#legend { display: none; }
#minimap { border-radius: 12px; border: 2px solid #c8a46a !important; box-shadow: 0 4px 12px rgba(0,0,0,.5); background: #6d6733 !important; }

/* =================== game HUD (Base + Map) =================== */
#nav { display: none !important; }
#map-search-btn { display: none !important; }
#hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-ava { position: absolute; left: 8px; top: 8px; width: 66px; height: 70px; padding: 3px 3px 9px; border-radius: 12px; border: 0;
  background: linear-gradient(var(--c-amber-pale), var(--c-amber) 45%, #b8741f); box-shadow: 0 0 0 2px #6b3f0e, 0 4px 10px rgba(0,0,0,.5); }
.hud-ava-img, .hud-ava .pn-portrait { width: 60px !important; height: 56px !important; border-radius: 9px !important; border: 0 !important; object-fit: cover; object-position: top; display: block; }
.hud-ava-txt { display: grid; place-items: center; width: 60px; height: 56px; border-radius: 9px; background: radial-gradient(circle at 50% 35%, #3a4a3e, #121814); color: var(--accent); font: 900 22px/1 system-ui; }
.hud-ava-bar { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 5px; border-radius: 3px; background: #2a1a06; overflow: hidden; } .hud-ava-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4fd06a, #9be86b); }
.hud-stats { position: absolute; left: 80px; top: 10px; display: grid; gap: 4px; }
.hud-stats > div { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 8px; background: rgba(0,0,0,.55); font-size: 13px; }
.hud-stats b { font: 900 15px/1 system-ui; color: #fff; text-shadow: 0 1px 0 #000; letter-spacing: .02em; }
.hud-stats .pw b { color: #ffe9b0; }
.hud-shop { position: absolute; right: 8px; top: 8px; min-width: 92px; height: 56px; padding: 4px 8px; border-radius: 12px; border: 0; display: grid; justify-items: center; align-content: center;
  background: linear-gradient(#ffe8a8, #f2c24c 55%, #c98a1f); box-shadow: 0 0 0 2px var(--c-amber-deep), 0 4px 10px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.6); color: #3a2304; }
.hud-shop .cart { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); } .hud-shop b { font: 900 13px/1.1 system-ui; }
.hud-dot { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: #e33; box-shadow: 0 0 0 2px #fff; }
.hud-edge { position: absolute; left: 0; top: 150px; width: 26px; height: 64px; padding: 0; border-radius: 0 12px 12px 0; border: 0; color: #f3e6cf; font-size: 16px;
  background: linear-gradient(90deg, #4a3520, #6b4a2e); box-shadow: 2px 0 0 #2a1a0c, 0 4px 10px rgba(0,0,0,.5); }
.hud-left, .hud-right { position: absolute; bottom: 136px; display: grid; gap: 10px; }
.hud-left { left: 8px; } .hud-right { right: 8px; }
.hud-ic { position: relative; width: 56px; padding: 0; border: 0; background: none; display: grid; justify-items: center; gap: 1px; }
.hud-ic .emo { width: 52px; height: 52px; display: grid; place-items: center; font-size: 26px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.hud-left .hud-ic .emo { border-radius: 50%; background: radial-gradient(circle at 50% 35%, #b98a64, #7a5434 70%); border: 3px solid #e8c79a; box-shadow: 0 4px 8px rgba(0,0,0,.45); }
.hud-right .hud-ic .emo { border-radius: 12px; background: linear-gradient(#a8784e, #6e4a2c); border: 3px solid #e1bd8c; box-shadow: 0 4px 0 #3e2814, 0 6px 10px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.25); }
.hud-ic b { font: 800 11px/1 system-ui; color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.hud-ic:active .emo { transform: scale(.92); }
.hud-bdg { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: #e33; color: #fff; font: 800 11px/1 system-ui; font-style: normal; box-shadow: 0 0 0 2px #fff; }
.hud-bdg.txt { background: var(--c-amber); color: #2a1a04; }
.hud-heroes, .hud-world { position: absolute; bottom: 0; width: 92px; height: 88px; padding: 0 0 6px; border: 0; display: grid; justify-items: center; align-content: end;
  background: linear-gradient(#8a6038, #5a3c20); box-shadow: inset 0 3px 0 #b88a5a, 0 -2px 10px rgba(0,0,0,.4); }
.hud-heroes { left: 0; border-radius: 0 14px 0 0; } .hud-world { right: 0; border-radius: 14px 0 0 0; }
.hud-heroes b, .hud-world b { font: 900 18px/1 system-ui; color: #fff; text-shadow: 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.hud-heroes .cards { position: relative; width: 64px; height: 56px; margin-bottom: 2px; }
.hud-heroes .cards i { position: absolute; left: 50%; bottom: 0; width: 36px; height: 50px; margin-left: -18px; border-radius: 6px; border: 2px solid #fff; font-style: normal; font-size: 20px; display: grid; place-items: center; }
.hud-heroes .cards i:nth-child(1) { background: linear-gradient(#c48cf0, #7a3fb0); transform: rotate(-16deg) translateX(-12px); }
.hud-heroes .cards i:nth-child(2) { background: linear-gradient(#7fd4ff, #2f86d8); transform: rotate(14deg) translateX(12px); }
.hud-heroes .cards i:nth-child(3) { background: linear-gradient(var(--c-amber-pale), var(--c-amber)); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.hud-heroes .hud-bdg { top: 4px; right: 10px; }
.hud-world .emo { font-size: 42px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
#view.has-hud #ticker { left: 92px; right: 92px; height: 64px; }
#view.has-hud #queue { top: 86px; right: 108px; }
#view.has-hud #minimap { top: 72px; }
#view.has-hud #coord-bar { top: 192px; bottom: auto; left: auto; right: 8px; flex-direction: row-reverse; }
.bag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.bag-it { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: linear-gradient(#5fb8ef, #2f7fc4); box-shadow: 0 0 0 2px #1d4f8f; text-align: center; }
.bag-it .ic { font-size: 26px; } .bag-it b { font: 900 14px/1 system-ui; color: #fff; text-shadow: 0 1px 0 #000; } .bag-it small { font-size: 10px; color: #e6f3ff; line-height: 1.1; }
.hud-left, .hud-right { bottom: 140px; gap: 6px; }
.hud-ic { width: 50px; } .hud-ic .emo { width: 46px !important; height: 46px !important; font-size: 22px; }

/* ---------- landscape layout (html.land, client/orient.js): full width, rails tucked into two columns ---------- */
html.land #panel .pn-wrap { max-width: 880px; margin: 0 auto; }
html.land .hud-left, html.land .hud-right { top: 80px; bottom: auto; grid-template-columns: repeat(2, auto); gap: 4px 6px; }
html.land .hud-ic { width: 48px; } html.land .hud-ic .emo { width: 42px !important; height: 42px !important; font-size: 20px; }
html.land .hud-heroes, html.land .hud-world { width: 84px; height: 70px; }
html.land .hud-heroes .cards { transform: scale(.82); transform-origin: bottom center; margin-bottom: 0; } html.land .hud-world .emo { font-size: 34px; }
html.land #view.has-hud #ticker { left: 84px; right: 84px; height: 54px; }
html.land #view.has-hud #minimap { top: 8px; right: 112px; }
html.land #view.has-hud #coord-bar { top: 124px; right: 112px; }
html.land #view.has-hud #queue { top: 72px; left: 120px; right: 230px; }
/* landscape is short: the ring's name plate and upgrade timer stay close to the building instead of climbing under the top bar,
   and the Search drawer (which fills the screen there) keeps its close button inside its own corner */
html.land .rb-plate { top: calc(min(var(--r), 40px) * -1.25 - 34px); }
html.land .rb-timer { top: calc(min(var(--r), 40px) * -1.25 - 2px); }
html.land .ms-close { top: 6px; right: 6px; z-index: 2; }
/* the own-base card stands on the coordinates pill on narrow or short screens: the pill waits until the card closes */
#view.card-on-coords #coord-bar { opacity: 0; pointer-events: none; }
@media (max-height: 460px) { html.land #sheet { max-height: 92%; } html.land #sheet.popup { max-height: 94%; width: min(560px, calc(100% - 32px)); } }
/* rotate hint (explicit orientation chosen, phone held the other way) */
#orient-hint { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5,8,6,.92); }
#orient-hint .oh-card { display: grid; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--text); }
#orient-hint b { font: 900 20px/1.2 system-ui; color: var(--accent); } #orient-hint small { color: var(--muted); }
#orient-hint .oh-phone { width: 46px; height: 78px; border: 4px solid var(--accent); border-radius: 10px; animation: ohTurn 1.8s ease-in-out infinite; }
#orient-hint[data-want='portrait'] .oh-phone { animation-direction: reverse; }
@keyframes ohTurn { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
html.land #top { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding-top: calc(4px + var(--safe-top)); padding-bottom: 4px; }
html.land #top .who { gap: 12px; } html.land #top .res { justify-content: flex-end; }

/* events column: under the shop on the base, under the minimap + coordinates on the map */
.hud-events { position: absolute; right: 8px; top: 72px; display: grid; gap: 6px; justify-items: center; }
.hud-events.on-map { top: 236px; }
.hud-events .hud-ic .emo { width: 50px; height: 50px; border-radius: 50%; font-size: 24px; background: radial-gradient(circle at 50% 35%, var(--c-amber-hi), #c8721a 75%); border: 3px solid #fff1c4;
  box-shadow: 0 0 0 2px var(--c-amber-deep), 0 0 14px rgba(255,190,70,.55), 0 4px 8px rgba(0,0,0,.45); animation: evGlow 2.8s ease-in-out infinite; }
@keyframes evGlow { 50% { box-shadow: 0 0 0 2px var(--c-amber-deep), 0 0 22px rgba(255,200,90,.85), 0 4px 8px rgba(0,0,0,.45); } }
html.land .hud-events { top: 6px; right: 112px; grid-auto-flow: column; }
html.land .hud-events.on-map { right: 232px; }
html.land .hud-events .hud-ic .emo { width: 40px; height: 40px; font-size: 19px; }

/* the HUD already shows the exact power under the clock: the top bar keeps its copy only on screens without the HUD */
body.hud-on #top .who .power { display: none; }

/* =====================================================================================================
   Shared classes (.ui-*). New screens should be built from these; ui-unify.css gives the older per-panel
   classes the same look.
   ===================================================================================================== */
/* --- buttons: .ui-btn alone = secondary; add .primary / .danger / .good / .ghost, .sm (40 px) or .wide --- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--surf-raised); border: 1px solid var(--c-line-hi); color: var(--c-text); box-shadow: var(--bevel), 0 3px 0 #0a0f0b, var(--sh-1); white-space: nowrap; }
.ui-btn:active:not(:disabled) { translate: 0 2px; box-shadow: var(--bevel), 0 1px 0 #0a0f0b; }
.ui-btn.sm { min-height: var(--tap-sm); padding: 6px 12px; font-size: var(--fs-md); border-radius: var(--r-md); }
.ui-btn.wide { width: 100%; min-height: 52px; font-size: 17px; }
.ui-btn.ghost { box-shadow: none; }
/* --- cards --- */
.ui-card { background: var(--surf-card); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-3); margin-bottom: 10px; box-shadow: var(--bevel), var(--sh-1); }
.ui-card.gold { border-color: var(--c-amber-lo); box-shadow: inset 0 1px 0 rgba(255,220,140,.14), var(--sh-1); }
.ui-card.steel { background: var(--surf-steel); border-color: var(--c-steel-3); }
.ui-card.wood { background: var(--surf-wood); border-color: var(--c-rust-3); }
/* a riveted metal frame around anything (popups, featured cards). .steel = grey metal */
.ui-frame { border: 8px solid transparent; border-image: var(--frame-rivet) 16 / 8px / 0 stretch; border-radius: 7px; }
.ui-frame.steel { border-image-source: var(--frame-steel); }
.ui-well { background: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--well); }
/* --- tabs: a sunken rail with one raised amber tab. The active button carries .active or .on --- */
.ui-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: var(--r-lg); background: var(--c-ink); border: 1px solid var(--c-line); box-shadow: var(--well); overflow-x: auto; scrollbar-width: none; }
.ui-tabs > button { position: relative; flex: 1 0 auto; min-height: var(--tap-sm); padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: none; box-shadow: none; font-size: var(--fs-md); font-weight: 800; color: var(--c-muted); white-space: nowrap; }
.ui-tabs > button.active, .ui-tabs > button.on { background: var(--surf-amber); color: var(--c-amber-ink); border-color: #ffe7a6 #e0a030 #9a6414; box-shadow: var(--bevel-hi), var(--sh-1); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
/* --- chips / pills --- */
.ui-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 9px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; color: var(--c-text-2); background: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-pill); }
.ui-chip.amber { color: var(--c-amber-hi); border-color: var(--c-amber-lo); } .ui-chip.good { color: #b9f0c0; border-color: #2f7d42; } .ui-chip.blood { color: #ffb3aa; border-color: var(--c-blood-lo); } .ui-chip.blue { color: #bfe0ff; border-color: #2f5f9a; } .ui-chip.ruby { color: #ffd1e1; border-color: var(--c-ruby-lo); }
/* --- list rows --- */
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--tap); padding: 8px 0; border-bottom: 1px solid var(--c-line); }
.ui-row:last-child { border-bottom: 0; }
.ui-row > .grow { flex: 1; min-width: 0; }
/* --- progress bars --- */
.ui-bar { height: 10px; background: var(--c-ink); border: 1px solid #000; border-radius: 6px; overflow: hidden; box-shadow: var(--well); }
.ui-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(var(--c-good-hi), #3fa652); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: width var(--t-med) var(--ease-out); }
.ui-bar.amber > i { background: linear-gradient(var(--c-amber-hi), var(--c-amber-lo)); } .ui-bar.blue > i { background: linear-gradient(var(--c-blue-hi), #2f86d8); } .ui-bar.blood > i { background: linear-gradient(var(--c-blood-hi), var(--c-blood-lo)); }
/* --- badges (counters on icons) --- */
.ui-badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; font: 800 var(--fs-xs)/1 var(--font); font-style: normal; color: #fff; background: linear-gradient(var(--c-blood-hi), #c8392e); border: 1.5px solid #fff; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.ui-badge.amber { background: linear-gradient(#ffe08a, var(--c-amber-lo)); color: var(--c-amber-ink); border-color: #fff6d8; }
.ui-badge.pulse { animation: uiPulse 2.4s ease-in-out infinite; }
@keyframes uiPulse { 0%, 84%, 100% { scale: 1; } 92% { scale: 1.18; } }
/* --- section headers --- */
.ui-sec { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: var(--fs-md); font-weight: 800; color: var(--c-amber); text-transform: uppercase; letter-spacing: .06em; }
.ui-sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,145,42,.55), transparent); }
/* --- empty states --- */
.ui-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--c-muted); font-size: var(--fs-md); border: 1px dashed var(--c-line-hi); border-radius: var(--r-lg); background: rgba(0,0,0,.18); }
.ui-empty b { color: var(--c-text-2); font-size: var(--fs-base); }
/* --- rarity: sets --rc for borders and glows --- */
.ui-r-common { --rc: var(--c-r-common); } .ui-r-rare { --rc: var(--c-r-rare); } .ui-r-epic { --rc: var(--c-r-epic); } .ui-r-legendary { --rc: var(--c-r-legendary); } .ui-r-mythic { --rc: var(--c-r-mythic); }
/* --- reward pop (items appearing after a claim) and the number that just changed --- */
.ui-pop { animation: uiPop .36s var(--ease-pop) both; }
@keyframes uiPop { from { scale: .4; opacity: 0; } }
.ui-tick { animation: uiTick .5s var(--ease-out); }
@keyframes uiTick { 30% { scale: 1.18; } }

/* painted icons standing in for emoji (client/icons.js, Icons) */
.ico { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.28em; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#top .res .ico { width: 18px; height: 18px; vertical-align: middle; margin: -2px 0; }
#toast .ico { width: 1.5em; height: 1.5em; vertical-align: -.38em; }

/* =================== HUD finish =================== */
.hud-stats > div { padding: 3px 10px 3px 6px; border-radius: var(--r-sm); background: linear-gradient(rgba(14,20,16,.82), rgba(6,9,7,.82)); border: 1px solid rgba(255,230,170,.16); box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
.hud-stats b { font-variant-numeric: tabular-nums; }
.hud-ava { box-shadow: 0 0 0 2px #6b3f0e, 0 0 0 3px #120b04, 0 4px 10px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5); }
.hud-shop { box-shadow: 0 0 0 2px var(--c-amber-deep), 0 0 0 3px #120b04, 0 4px 10px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.6); }
.hud-ic .emo { transition: scale var(--t-press); }
.hud-ic:active { translate: none; filter: none; } .hud-ic:active .emo { transform: none; scale: .9; }
.hud-ic .emo .ico { width: 82%; height: 82%; margin: 0; vertical-align: 0; filter: drop-shadow(0 2px 1px rgba(0,0,0,.45)); }
.hud-left .hud-ic .emo { background: radial-gradient(circle at 50% 30%, #c79a70, #8a5e38 62%, #5e3d20); border-color: var(--c-rust-6); box-shadow: 0 0 0 1.5px #2a1a0c, 0 4px 8px rgba(0,0,0,.45), inset 0 3px 4px rgba(255,255,255,.28), inset 0 -5px 8px rgba(40,20,5,.45); }
.hud-right .hud-ic .emo { background: var(--tex-scratch), linear-gradient(#b48556, #6e4a2c); box-shadow: 0 0 0 1.5px #2a1a0c, 0 4px 0 #3e2814, 0 6px 10px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -4px 6px rgba(40,20,5,.4); }
.hud-ic b { font-size: var(--fs-xs); letter-spacing: .01em; }
.hud-bdg { background: linear-gradient(var(--c-blood-hi), #c8392e); box-shadow: 0 0 0 1.5px #fff, 0 2px 4px rgba(0,0,0,.5); }
.hud-bdg.txt { background: linear-gradient(#ffe08a, var(--c-amber-lo)); }
.hud-dot { background: linear-gradient(var(--c-blood-hi), #c8392e); box-shadow: 0 0 0 1.5px #fff, 0 2px 4px rgba(0,0,0,.5); }
.hud-heroes, .hud-world { background: var(--tex-scratch), linear-gradient(#93683e, #5a3c20 70%, #47301a); box-shadow: inset 0 3px 0 #c4976a, inset 0 4px 0 rgba(0,0,0,.25), 0 -2px 10px rgba(0,0,0,.45); }
.hud-heroes:active, .hud-world:active { translate: none; filter: brightness(.9); }
.hud-world .emo .ico { width: 54px; height: 54px; vertical-align: 0; } html.land .hud-world .emo .ico { width: 44px; height: 44px; }
.hud-heroes .cards .ico { width: 24px; height: 24px; }
.hud-shop .cart .ico { width: 30px; height: 30px; vertical-align: 0; } .hud-shop b .ico { width: 15px; height: 15px; vertical-align: -3px; }
.hud-edge { background: var(--tex-scratch), linear-gradient(90deg, #4a3520, #6b4a2e); }
#coord-now { border-color: var(--c-rust-5); box-shadow: var(--sh-1); } #btn-home { width: 40px; height: 40px; border-color: var(--c-rust-5); box-shadow: var(--sh-1); }
#queue .chip { background: linear-gradient(rgba(27,37,32,.94), rgba(15,23,17,.94)); border-color: var(--c-line-hi); box-shadow: var(--sh-1); }
#ticker { background: linear-gradient(rgba(10,14,12,0), rgba(10,14,12,.8) 22%, rgba(10,14,12,.94)); }
/* the HUD badge may pulse once in a while; cheap (scale only) */
.hud-ic > .hud-bdg, .hud-heroes > .hud-bdg { animation: uiPulse 3.2s ease-in-out infinite; }

/* =================== motion switch ===================
   html.no-motion is set by ui-fx.js when the device asks for reduced motion or the graphics setting turns UI motion
   off (window.GFX.q.uiMotion === false). Animations jump to their end state instead of being removed, so
   anything that fades itself in still ends up visible. */
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
/* low graphics quality: no blur, no glow filters, no large soft shadows */
html.gfx-low *, html.gfx-low *::before, html.gfx-low *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.gfx-low #sheet:not(.popup), html.gfx-low #toast, html.gfx-low .card, html.gfx-low .ui-card, html.gfx-low #top, html.gfx-low .pn-title, html.gfx-low .pn-hub-card, html.gfx-low .pn-hub-head, html.gfx-low .ec-pop-card { box-shadow: none !important; }
html.gfx-low #sheet.popup { box-shadow: 0 0 0 100vmax rgba(4,7,5,.7) !important; } /* the dim behind a popup is a flat fill, it stays */
html.gfx-low [class*='rays'], html.gfx-low [class*='beam'], html.gfx-low [class*='shine'], html.gfx-low [class*='spark'] { display: none !important; }
/* decorative drop-shadow filters on icons go; greyed (locked, disabled) states keep their filter */
html.gfx-low .ico, html.gfx-low .emo, html.gfx-low .hud-ic .emo, html.gfx-low .cart { filter: none !important; }
/* a hero who is away with another system: greyed out in every picker, with the reason (window.heroAwayTag, app.js) */
label.hero-off { opacity: .55; }
.hero-away { color: var(--muted); font-size: var(--fs-sm); }