/* Clanfall UI: chunky display type (Lilita One) in white with a thick dark outline and a hard drop shadow, glossy 3D
   buttons with a near-black outline, tan title bands over parchment windows, dark translucent HUD bars. The layout
   follows the genre's conventions (resources top right, builders top centre, attack bottom left, shop bottom right);
   every picture in it is Clanfall's own (client/assets/art, client/ui/icons.js). Everything is sized in rem; the root
   size follows the viewport so phones and desktops share one layout. Motion is transform / opacity only (no animated
   filters or shadows, no backdrop blur). The fonts are declared in fonts/fonts.css. */

:root {
  --parch: #ede5d1; --parch-hi: #faf6ec; --parch-lo: #ddd1b4; --parch-edge: #c8b893; --parch-deep: #ad9a72;
  --wood: #3a2815; --wood-2: #6b4a28; --wood-3: #8f6a3d;
  --band-hi: #b89667; --band: #9a784b; --band-lo: #7d5e37;
  --ink: #3a2a17; --ink-2: #6b573c; --ink-3: #978463;
  --green: #86d13a; --green-hi: #c4f36c; --green-lo: #4c8f1a;
  --blue: #3fa6ee; --blue-hi: #9ddcff; --blue-lo: #1c5f9c;
  --gold: #f9c22f; --gold-hi: #ffe98a; --gold-lo: #b57608;
  --elixir: #c64ee0; --elixir-hi: #f1a6ff; --elixir-lo: #7c2a9e;
  --gem: #3fcf78; --gem-hi: #a6f7c2; --gem-lo: #1b8a48;
  --trophy: #ffcc33;
  --danger: #ea4433; --danger-hi: #ff9280; --danger-lo: #931f15;
  --orange: #f7962b; --orange-hi: #ffcd78; --orange-lo: #a4560c;
  --o: #140d06;                                            /* the CoC outline colour */
  --stroke: var(--o);
  --track: rgba(16, 10, 5, .62);
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --shadow-panel: 0 .5rem 0 rgba(0, 0, 0, .28), 0 1.4rem 3rem rgba(8, 5, 2, .5);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
  --font-d: 'Lilita One', 'Trebuchet MS', system-ui, sans-serif;
  --font-b: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* outlined display text: 8-way outline + a hard drop (em based, so every size gets a proportional outline) */
  --ow: max(1.2px, .085em); --owd: max(.9px, .062em); --od: max(2px, .15em);
  --ts: 0 calc(-1 * var(--ow)) 0 var(--o), var(--ow) 0 0 var(--o), calc(-1 * var(--ow)) 0 0 var(--o), 0 var(--ow) 0 var(--o),
        var(--owd) var(--owd) 0 var(--o), calc(-1 * var(--owd)) var(--owd) 0 var(--o), var(--owd) calc(-1 * var(--owd)) 0 var(--o), calc(-1 * var(--owd)) calc(-1 * var(--owd)) 0 var(--o),
        0 var(--od) 0 var(--o), var(--owd) var(--od) 0 var(--o), calc(-1 * var(--owd)) var(--od) 0 var(--o);
  --ts-sm: var(--ts);
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --edge: .75rem;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
/* the whole UI is sized in rem and the root follows the screen: 12.5 px on a phone, ~17 px at 1366x768, ~22 px at
   1920x1080, ~28 px at 2560x1440 (before, it stopped growing at 18 px and big monitors got a tiny HUD) */
html { font-size: clamp(12.5px, .42vw + .8vh + 5.5px, 30px); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2d5a1c; }
body { font-family: var(--font-b); color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
input, textarea, select { font: inherit; user-select: text; -webkit-user-select: text; }
svg { display: block; overflow: visible; }
.hidden { display: none !important; }
.n { font-variant-numeric: tabular-nums; }
.disp { font-family: var(--font-d); font-weight: 400; }
.stroke, .stroke-sm { color: #fff; text-shadow: var(--ts); }
.ic { display: inline-block; flex: none; width: 1.4em; height: 1.4em; line-height: 0; }
.ic svg { width: 100%; height: 100%; }
.muted { color: var(--ink-2); }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: .5rem; }
.col { display: flex; flex-direction: column; gap: .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-size: 1rem; }
#ui .safe { position: absolute; top: var(--sat); right: var(--sar); bottom: var(--sab); left: var(--sal); pointer-events: none; }
/* each layer in the safe area is its own stacking context: nothing with a z-index in the HUD (badges, key hints, the
   gem +) may show through a window that lies over it. (The world layer outside it holds the tutorial pointer, which
   must stay above everything.) */
.layer { position: absolute; inset: 0; pointer-events: none; }
#safe > .layer { isolation: isolate; z-index: 0; }

/* ---------------------------------------------------------------- buttons
   Face gradient + a glossy top band (::before, behind the label thanks to isolation), a darker 3D edge under it, all
   wrapped in the near-black outline. Pressing moves the face down onto its edge. */
.btn {
  --bc: var(--green); --bh: var(--green-hi); --bl: var(--green-lo); --bd: var(--bc);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 2.9rem; padding: .4rem 1.05rem; flex: none;
  font: .95rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); white-space: nowrap;
  background: linear-gradient(180deg, var(--bh) 0%, var(--bc) 50%, var(--bd) 100%);
  border: 2.5px solid var(--o); border-radius: 13px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13), 0 4px 0 var(--bl), 0 4px 0 2.5px var(--o), 0 8px 12px rgba(0, 0, 0, .28);
  transition: transform .09s ease-out;
  cursor: pointer; user-select: none;
}
.btn::before { content: ''; position: absolute; z-index: -1; left: 4px; right: 4px; top: 3px; height: 44%; border-radius: 9px 9px 16px 16px / 9px 9px 7px 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .14)); pointer-events: none; }
.btn .ic { width: 1.55em; height: 1.55em; margin: -.3em 0; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.btn:active:not(:disabled):not(.off), .btn.pressed {
  transform: translateY(3px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .13), 0 1px 0 var(--bl), 0 1px 0 2.5px var(--o), 0 3px 5px rgba(0, 0, 0, .22);
}
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.btn.blue { --bc: var(--blue); --bh: var(--blue-hi); --bl: var(--blue-lo); --bd: #2b8bd6; }
.btn.red { --bc: var(--danger); --bh: var(--danger-hi); --bl: var(--danger-lo); --bd: #d4301f; }
.btn.gold { --bc: #fbc531; --bh: var(--gold-hi); --bl: var(--gold-lo); --bd: #f2a31a; }
.btn.orange { --bc: var(--orange); --bh: var(--orange-hi); --bl: var(--orange-lo); --bd: #ee7f18; }
.btn.gem { --bc: var(--gem); --bh: var(--gem-hi); --bl: var(--gem-lo); --bd: #28b862; }
.btn.purple { --bc: var(--elixir); --bh: var(--elixir-hi); --bl: var(--elixir-lo); --bd: #a93fcf; }
.btn.ghost { --bc: #eee4cc; --bh: #fffdf6; --bl: #a8916a; --bd: #e2d4b2; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.btn.ghost .ic { filter: none; }
.btn:disabled, .btn.off { --bc: #b9b4a8; --bh: #e2ded5; --bl: #7a7468; --bd: #a39d90; cursor: not-allowed; }
.btn:disabled .ic, .btn.off .ic { filter: grayscale(.8) drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.btn.sm { min-height: 2.25rem; padding: .26rem .7rem; font-size: .76rem; border-radius: 11px; border-width: 2px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .13), 0 3px 0 var(--bl), 0 3px 0 2px var(--o), 0 5px 8px rgba(0, 0, 0, .22); }
.btn.sm:active:not(:disabled):not(.off) { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .13), 0 1px 0 var(--bl), 0 1px 0 2px var(--o); }
.btn.sm::before { left: 3px; right: 3px; top: 2px; border-radius: 7px 7px 12px 12px / 7px 7px 5px 5px; }
.btn.lg { min-height: 3.5rem; padding: .45rem 1.5rem; font-size: 1.18rem; border-radius: 16px; }
.btn.wide { width: 100%; }
.btn.sq { width: 2.9rem; padding: 0; }
.btn.sm.sq { width: 2.25rem; }
.btn .sub { display: block; font-size: .72em; opacity: .95; }
.btn.busy { pointer-events: none; }
.btn.busy::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: rgba(255, 255, 255, .28); animation: busy 1s ease-in-out infinite; }
@media (hover: hover) { .btn:hover:not(:disabled):not(.off) { filter: brightness(1.06); } }

/* cost chip used inside buttons and cards: icon + number, red when you can't afford it */
.cost { display: inline-flex; align-items: center; gap: .22em; font-family: var(--font-d); white-space: nowrap; }
.cost .ic { width: 1.3em; height: 1.3em; margin: -.25em 0; }
.cost.short { color: #ff5a48; }
.cost.free { color: #b8ff7a; }

/* close button: the red rounded square with the white X */
.x { position: absolute; right: .5rem; top: .45rem; z-index: 3; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; transition: transform .08s; }
.x .ic { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.x:active { transform: translateY(2px) scale(.94); }
@media (hover: hover) { .x:hover { transform: scale(1.05); } }

/* key hints: shown only with a real mouse + keyboard */
.kbd { display: none; position: absolute; top: -.5rem; left: -.5rem; z-index: 2; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem;
  place-items: center; font: .6rem/1 var(--font-d); color: #fff; background: rgba(16, 10, 5, .85); border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 6px; text-shadow: none; }
@media (hover: hover) and (pointer: fine) { .kbd { display: inline-grid; } body.no-keys .kbd { display: none; } }

/* red notification dot with count */
.dot { position: absolute; top: -.45rem; right: -.45rem; z-index: 2; min-width: 1.45rem; height: 1.45rem; padding: 0 .3rem; display: grid; place-items: center;
  font: .72rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); background: linear-gradient(#ff7a66, #e2301f); border: 2px solid var(--o); border-radius: 99px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35); animation: pop .4s var(--spring) both; }

/* Baked art (ui/icons.js): <span class="ci"><img><svg></span> fills the same box as the SVG it replaces; the SVG
   only shows when the image failed (.nf). Portrait cards (.pt.art) show the picture edge to edge on the kind's tint. */
.ci { position: relative; display: block; width: 100%; height: 100%; }
.ci > img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ci > svg { display: none; }
.ci.nf > img { display: none; }
.ci.nf > svg { display: block; width: 100%; height: 100%; }

/* troop / spell / hero portrait card */
.pt { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 22%;
  background-color: var(--pc); background-image: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .22));
  border: 2px solid var(--o); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.pt svg { position: absolute; left: 6%; top: 8%; width: 88%; height: 92%; }
.pt.art > .ci { position: absolute; inset: 0; }
.pt.art > .ci > img { object-fit: cover; object-position: 50% 50%; }
.pt .ci.nf > svg { width: 88%; height: 92%; }
.pt > .ci.fit { position: absolute; inset: 7%; width: auto; height: auto; }

/* ---------------------------------------------------------------- HUD */
.hud { position: absolute; inset: 0; pointer-events: none; transition: opacity .25s; }
.hud.away { opacity: 0; pointer-events: none !important; }
.hud.away * { pointer-events: none !important; }
.hud-tl { position: absolute; top: .55rem; left: var(--edge); display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.hud-tc { position: absolute; top: 1.35rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1.1rem; }
.hud-tr { position: absolute; top: 1.25rem; right: var(--edge); display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem; }
.hud-bl { position: absolute; left: var(--edge); bottom: .9rem; display: flex; align-items: flex-end; gap: .7rem; }
.hud-br { position: absolute; right: var(--edge); bottom: .9rem; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.hud * { pointer-events: auto; }
.hud .pe-none, .hud .pe-none * { pointer-events: none; }

/* XP star + name + XP bar */
.profile { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.lvl { position: relative; width: 3.4rem; height: 3.4rem; flex: none; transition: transform .2s var(--spring); }
.lvl > .ci, .lvl > svg { position: absolute; inset: 0; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.lvl b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding-top: .1rem; font: 400 1.02rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.profile:active .lvl { transform: scale(.93); }
.pinfo { display: flex; flex-direction: column; gap: .32rem; }
.pname { max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .12em .12em .36em; font: .95rem/1.05 var(--font-d); color: #fff; text-shadow: var(--ts); }
.xpbar { position: relative; width: 8.4rem; height: .78rem; background: var(--track); border: 2px solid rgba(0, 0, 0, .8); border-radius: 5px; overflow: hidden; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .4); }
.xpbar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, #b8e6ff, #45aef0 55%, #2379c2); transition: width .7s var(--out); }
.xpbar i::after { content: ''; position: absolute; left: 3px; right: 3px; top: 1px; height: 30%; border-radius: 3px; background: rgba(255, 255, 255, .45); }

/* dark HUD pills (trophies, builders, shield): a big icon hangs over the left end */
.pill { position: relative; display: inline-flex; align-items: center; gap: .3rem; height: 2rem; padding: 0 .7rem 0 .15rem;
  background: var(--track); border: 2px solid rgba(0, 0, 0, .8); border-radius: .6rem; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .25);
  font: .92rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); white-space: nowrap; cursor: pointer; transition: transform .12s var(--spring); }
.pill:active { transform: scale(.95); }
.pill > .ic { width: 2.45rem; height: 2.45rem; margin: -.4rem .05rem -.4rem -.55rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.pill .v { display: inline-block; width: 2.9em; text-align: left; white-space: nowrap; }
.pill .v.w4 { width: auto; min-width: 4em; }
.pill .v.w7 { width: 6.1em; }
.pill.dim .v { color: #d9d2c4; }
.pill small { font-size: .78rem; opacity: .9; }
.pill .cap-t { position: absolute; left: .55rem; top: -1.02rem; font: .56rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); pointer-events: none; }
.tro-row { display: flex; align-items: center; }
.tro-row .league { position: relative; z-index: 1; width: 2.75rem; height: 2.75rem; margin-right: -1.35rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); pointer-events: none; }
.tro-row .pill { padding-left: 1.4rem; }
.tro-row .pill > .ic { width: 1.7rem; height: 1.7rem; margin: 0 .1rem 0 0; }

/* resource bars: dark translucent bar, coloured capacity fill, big icon over the right end, "Max:" caption above */
.res { position: relative; width: 13.2rem; height: 2.15rem; cursor: pointer; }
.res .track { position: absolute; left: 0; right: 1.35rem; top: .12rem; bottom: .03rem; background: var(--track); border: 2px solid rgba(0, 0, 0, .8); border-radius: .55rem; overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.res .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); transition: width .8s var(--out);
  background: linear-gradient(180deg, var(--rh) 0%, var(--rc) 50%, var(--rl) 100%); }
.res .fill::after { content: ''; position: absolute; left: 3px; right: 3px; top: 2px; height: 32%; border-radius: 4px; background: rgba(255, 255, 255, .42); }
.res .val { position: absolute; right: 3.05rem; top: .66rem; font: .98rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); text-align: right; white-space: nowrap; }
.res .max { position: absolute; left: .55rem; top: -.95rem; font: .56rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); white-space: nowrap; }
.res > .ic { position: absolute; right: -.5rem; top: -.5rem; width: 3.05rem; height: 3.05rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); transition: transform .25s var(--spring); }
.res.gold { --rc: #f6c12d; --rh: #fff09a; --rl: #d98f0c; }
.res.elixir { --rc: #d052e8; --rh: #f7b9ff; --rl: #9a2cc0; }
.res.gems { --rc: #57d15e; --rh: #b9f59a; --rl: #2c9a3a; width: 9.6rem; }
.res.gems .fill { width: 100%; }
.res.gems > .ic { width: 2.7rem; height: 2.7rem; right: -.35rem; top: -.35rem; }
.res.full .max { color: #ffe27a; }
.res.full .fill::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); width: 40%; animation: shine 2.2s ease-in-out infinite; }
.res .plus { position: absolute; left: -.85rem; top: -.02rem; z-index: 1; width: 2.2rem; height: 2.2rem; border-radius: .55rem; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--green-hi), var(--green) 55%, #6cb82a); border: 2px solid var(--o); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--green-lo), 0 3px 0 2px var(--o); }
.res .plus .ic { width: 1.15rem; height: 1.15rem; }
.res.bump > .ic { transform: scale(1.22) rotate(-6deg); }

/* big Attack! / Shop tiles */
.bigbtn { position: relative; width: 5.6rem; height: 5.6rem; border-radius: 1.3rem; flex-direction: column; padding: 0; gap: 0; border-width: 3px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 5px 0 var(--bl), 0 5px 0 3px var(--o), 0 10px 16px rgba(0, 0, 0, .35); }
.bigbtn:active:not(:disabled):not(.off) { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 1px 0 var(--bl), 0 1px 0 3px var(--o), 0 3px 6px rgba(0, 0, 0, .3); }
.bigbtn::before { left: 5px; right: 5px; top: 4px; height: 40%; border-radius: 1rem 1rem 1.4rem 1.4rem / 1rem 1rem .7rem .7rem; }
.bigbtn > .ic { width: 3.8rem; height: 3.8rem; margin: -.95rem 0 0; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.bigbtn .lbl { position: absolute; left: 50%; bottom: .32rem; transform: translateX(-50%); font-size: .92rem; text-shadow: var(--ts); }
.bigbtn.attack { --bc: #fbb52c; --bh: #ffe07a; --bl: #9c5a08; --bd: #f08d17; }
.bigbtn.shop { --bc: #eee2c4; --bh: #fffcf2; --bl: #a0845a; --bd: #dcc9a0; }

/* round side buttons (settings, leaderboard, log, clan) */
.rail { display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; }
.rbtn { position: relative; width: 3.35rem; height: 3.35rem; border-radius: 50%; flex-direction: column; padding: 0; gap: 0; --bc: #efe4c8; --bh: #fffdf6; --bl: #9d8358; --bd: #e0cfa6; }
.rbtn::before { border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%; left: 5px; right: 5px; }
.rbtn > .ic { width: 2.2rem; height: 2.2rem; margin: -.3rem 0 0; }
.rbtn[data-tut="top"] > .ic { width: 2.6rem; }
.rbtn .lbl { position: absolute; bottom: -.28rem; left: 50%; transform: translateX(-50%); font-size: .56rem; color: #fff; text-shadow: var(--ts); }
.rbtn.war { --bc: #ffd9b0; --bd: #f2b071; }                 /* clan button while the clan is at war */
.rbtn.war .dot { background: linear-gradient(#ff9d6a, #d23b1f); }

/* chat tab on the left edge: wooden pull tab with an orange arrow */
.chat-tab { position: absolute; pointer-events: auto; left: 0; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 5.8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  background: linear-gradient(90deg, #7a5230, #a3743f 60%, #8a6035); border: 2.5px solid var(--o); border-left: 0; border-radius: 0 1.1rem 1.1rem 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset -3px 0 0 rgba(0, 0, 0, .18), 3px 4px 0 rgba(0, 0, 0, .25); transition: transform .12s; }
.chat-tab .ic { width: 1.75rem; height: 1.75rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.chat-tab::after { content: ''; width: .75rem; height: .95rem; background: linear-gradient(180deg, #ffd27d, #f5891c); clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.chat-tab:active { transform: translateY(-50%) translateX(-2px); }
.chat-tab .dot { top: -.4rem; right: -.55rem; }

.net-banner { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: .55rem;
  padding: .5rem 1.1rem; border-radius: .7rem; background: linear-gradient(var(--danger-hi), var(--danger) 55%, #cf3121); border: 2.5px solid var(--o);
  font: .9rem var(--font-d); color: #fff; text-shadow: var(--ts); box-shadow: 0 3px 0 var(--danger-lo), 0 3px 0 2.5px var(--o), 0 8px 16px rgba(0, 0, 0, .3); animation: drop-in .35s var(--spring) both; pointer-events: none; }
.net-banner .spin { width: 1rem; height: 1rem; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }

.mode-banner { position: absolute; pointer-events: auto; top: .7rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem 1rem;
  background: var(--track); border: 2px solid rgba(0, 0, 0, .8); border-radius: .8rem; font: .98rem var(--font-d); color: #fff; text-shadow: var(--ts); animation: drop-in .35s var(--spring) both; white-space: nowrap; }
.mode-banner > .ic { width: 1.7rem; height: 1.7rem; }

/* ---------------------------------------------------------------- selected-building bar: "Cannon (Level 2)" + actions */
.abar { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem;
  max-width: calc(100% - 2 * var(--edge) - 14.5rem); pointer-events: none; }
.abar.enter { animation: abar-in .18s var(--out) both; }
.abar-title { display: flex; align-items: baseline; gap: .4rem; padding-bottom: .15rem; font: 1.15rem/1.1 var(--font-d); color: #fff; text-shadow: var(--ts); white-space: nowrap; }
.abar-title small { font-size: .82em; color: #fff; }
.abar-sub { display: flex; align-items: center; gap: .5rem; min-width: 14rem; font: .8rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.abar-sub .bar { flex: 1; min-width: 7rem; }
.abar-sub .n { min-width: 6.1em; text-align: right; }
.abar-row { display: flex; gap: .65rem; padding: 1.1rem .7rem 1.5rem; margin: -.5rem -.5rem -1.5rem; pointer-events: auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; max-width: calc(100% + 1rem); }
/* the row scrolls sideways, which clips vertically too: the padding keeps the tags, 3D edges and shadows inside it */
.abar-row::-webkit-scrollbar { display: none; }
.act { position: relative; width: 4.6rem; height: 4.6rem; border-radius: 1.05rem; flex-direction: column; padding: 0 0 .3rem; gap: .05rem;
  --bc: #efe4c8; --bh: #fffdf6; --bl: #9d8358; --bd: #e2d2aa; }
.abar.enter .act { animation: act-in .2s var(--out) both; animation-delay: calc(var(--i, 0) * 22ms); }
.act > .ic { width: 2.4rem; height: 2.4rem; margin: 0; }
.act .lbl { font-size: .56rem; line-height: 1.05; color: #fff; text-shadow: var(--ts); max-width: 4.35rem; white-space: normal; text-align: center; padding: 0 .1rem .12rem; }
.act .tag { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .15rem; padding: .16rem .45rem .16rem .18rem;
  background: rgba(16, 10, 5, .88); border: 2px solid var(--o); border-radius: .5rem; font-size: .7rem; color: #fff; text-shadow: var(--ts); white-space: nowrap; }
.act .tag .ic { width: 1.1rem; height: 1.1rem; margin: 0; filter: none; }
.act .tag.short { color: #ff6a58; }
.act .kbd { top: auto; bottom: -.45rem; left: auto; right: -.45rem; }
.act.green { --bc: var(--green); --bh: var(--green-hi); --bl: var(--green-lo); --bd: #6cbf22; }
.act.gem { --bc: var(--gem); --bh: var(--gem-hi); --bl: var(--gem-lo); --bd: #28b862; }
.act.red { --bc: var(--danger); --bh: var(--danger-hi); --bl: var(--danger-lo); --bd: #d4301f; }
.act.blue { --bc: var(--blue); --bh: var(--blue-hi); --bl: var(--blue-lo); --bd: #2b8bd6; }
.act.gold { --bc: #fbc531; --bh: var(--gold-hi); --bl: var(--gold-lo); --bd: #f2a31a; }
.act.purple { --bc: var(--elixir); --bh: var(--elixir-hi); --bl: var(--elixir-lo); --bd: #a93fcf; }
.act.off { --bc: #b9b4a8; --bh: #e2ded5; --bl: #7a7468; --bd: #a39d90; }
.act.off > .ic { opacity: .75; }
.why { font: .72rem var(--font-d); color: #ff8a78; text-shadow: var(--ts); white-space: nowrap; }

/* ---------------------------------------------------------------- placement confirm */
.place-ctl { position: absolute; display: flex; gap: 1.5rem; transform: translate(-50%, 0); pointer-events: auto; transition: opacity .15s; animation: pop-in .3s var(--spring) both; }
.place-ctl .btn { width: 3.5rem; height: 3.5rem; border-radius: 50%; padding: 0; }
.place-ctl .btn::before { border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%; }
.place-ctl .btn .ic { width: 1.8rem; height: 1.8rem; }
.place-ctl .btn.off { opacity: .8; }
.place-info { position: absolute; left: 50%; bottom: -1.95rem; transform: translateX(-50%); white-space: nowrap; font: .9rem var(--font-d); color: #fff; text-shadow: var(--ts); display: flex; gap: .4rem; align-items: center; }
.place-bar { position: absolute; pointer-events: none; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem .5rem .7rem;
  background: var(--track); border: 2px solid rgba(0, 0, 0, .8); border-radius: .8rem; font: .9rem var(--font-d); color: #fff; text-shadow: var(--ts); animation: rise .3s var(--out) both; white-space: nowrap; }
.place-bar .ic { width: 1.6rem; height: 1.6rem; }

/* ---------------------------------------------------------------- windows (panels) */
/* (one cell exactly as big as the screen: without it a window with a lot of content makes the cell grow as tall as that
   content, and the window, centred in it, slides down and off the bottom of the screen) */
.scrim { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; pointer-events: auto;
  padding: calc(var(--sat) + 1rem) calc(var(--sar) + 1rem) calc(var(--sab) + 1rem) calc(var(--sal) + 1rem);
  background: rgba(10, 7, 3, .58); animation: fade-in .2s both; }
.scrim.closing { animation: fade-out .18s both; }
.scrim.clear { background: rgba(10, 7, 3, .2); }
.panel { position: relative; width: min(58rem, 100%); max-height: 100%; min-height: 0; display: flex; flex-direction: column;
  background: var(--parch); border: 3px solid var(--o); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), var(--shadow-panel);
  animation: panel-in .42s var(--spring) both; }
.scrim.closing .panel { animation: panel-out .18s ease-in both; }
.panel.sm { width: min(27rem, 100%); }
.panel.md { width: min(40rem, 100%); }
.panel.lg { width: min(66rem, 100%); }
.panel.tall { height: min(46rem, 100%); }
/* title band: tan leather, the title centred in big outlined white type, subtitle under it, back arrow on the left */
.panel-head { position: relative; flex: none; display: grid; grid-template-columns: minmax(3.2rem, 1fr) minmax(0, auto) minmax(3.2rem, 1fr); align-items: center; row-gap: .1rem;
  min-height: 3.65rem; padding: .5rem .8rem .55rem;
  background: linear-gradient(180deg, var(--band-hi) 0%, var(--band) 55%, var(--band-lo) 100%); border-bottom: 3px solid var(--o);
  border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .32), inset 0 -3px 0 rgba(0, 0, 0, .15); }
.panel-title { grid-column: 2; grid-row: 1; min-width: 0; padding: .12em .2em .36em; font: 1.38rem/1.1 var(--font-d); color: #fff; text-shadow: var(--ts); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-head .hsub { grid-column: 2; grid-row: 2; justify-self: center; font: .66rem/1 var(--font-d); color: #fff4d6; text-shadow: var(--ts); white-space: nowrap; }
.panel-head .hsub:empty { display: none; }
.pback { grid-column: 1; grid-row: 1 / span 2; justify-self: start; width: 2.3rem; height: 2.9rem; display: grid; place-items: center; transition: transform .08s; }
.pback .ic { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.pback:active { transform: translateX(-2px) scale(.94); }
/* tabs sit on the lower edge of the band; the active one is body-coloured and joins the window */
.tabs { flex: none; display: flex; align-items: flex-end; gap: .3rem; padding: .45rem .9rem 0; background: linear-gradient(180deg, var(--band-lo), #6c512f); box-shadow: inset 0 -3px 0 var(--o);
  overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 3px; padding: .5rem .95rem .55rem;
  font: .82rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); background: linear-gradient(180deg, #c9b28a, #a88e63); border: 2.5px solid var(--o); border-bottom: 0; border-radius: .8rem .8rem 0 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); }
.tab .ic { width: 1.4rem; height: 1.4rem; margin: -.2rem 0; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.tab.on { background: linear-gradient(180deg, #fbf6ea, var(--parch)); margin-bottom: 0; padding-bottom: calc(.72rem + 3px); z-index: 1; box-shadow: inset 0 2px 0 #fff; }
.tab .cnt { font-size: .8em; opacity: .9; }
.tab .dot { top: -.55rem; right: -.55rem; }
@media (hover: hover) { .tab:not(.on):hover { background: linear-gradient(180deg, #d6c19b, #b69d71); } }
.panel-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem 1.1rem 1.2rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background-color: var(--parch); background-image: radial-gradient(rgba(120, 90, 40, .07) 1px, transparent 1.5px), linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 4rem);
  background-size: 12px 12px, 100% 100%;
  scrollbar-width: thin; scrollbar-color: var(--parch-deep) transparent; user-select: none; }
/* the body paints its own background, so it rounds the window's bottom corners unless a footer follows it */
.panel-body { border-radius: 0 0 calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px); }
.panel-body:has(+ .panel-foot:not(.hidden)), .shop .panel-body { border-radius: 0; }
.panel-body::-webkit-scrollbar { width: 10px; height: 10px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--parch-deep); border-radius: 99px; border: 3px solid var(--parch); }
.panel-foot { flex: none; display: flex; align-items: center; gap: .7rem; justify-content: flex-end; padding: .75rem 1.1rem .95rem;
  border-top: 2.5px solid var(--parch-edge); background: linear-gradient(180deg, #e2d6b9, #d8caa8); border-radius: 0 0 calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px); }
.panel-foot .note { margin-right: auto; font: 800 .85rem var(--font-b); color: var(--ink-2); }
.section-title { display: flex; align-items: center; gap: .5rem; margin: 1.15rem 0 .65rem; font: .95rem/1.1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.section-title:first-child { margin-top: 0; }
.section-title .ic { width: 1.7rem; height: 1.7rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.section-title .aside { margin-left: auto; font: 800 .8rem var(--font-b); color: var(--ink-2); text-shadow: none; }
.sheet { background: var(--parch-hi); border: 2px solid var(--parch-edge); border-radius: var(--r); box-shadow: 0 3px 0 var(--parch-edge); padding: .8rem .9rem; }
.hint { font: 700 .88rem/1.4 var(--font-b); color: var(--ink-2); }
.warn-line { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: .7rem; background: #fbe0d4; border: 2px solid #e2a489; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6); font: 800 .86rem var(--font-b); color: #8e2d12; }
.warn-line .ic { width: 1.5rem; height: 1.5rem; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; padding: 2.2rem 1rem; text-align: center; color: var(--ink-2); animation: rise .4s var(--out) both; }
.empty .ic { width: 4.8rem; height: 4.8rem; filter: drop-shadow(0 4px 0 rgba(80, 55, 20, .2)); }
.empty h4 { margin: 0; font: 1.1rem var(--font-d); color: #fff; text-shadow: var(--ts); font-weight: 400; }
.empty p { margin: 0; max-width: 24rem; font: 700 .92rem/1.4 var(--font-b); }
.loading-row { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2.4rem 1rem; font: .9rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.loading-row .spin, .spin.dark { width: 1.5rem; height: 1.5rem; border: 3.5px solid rgba(59, 42, 26, .18); border-top-color: var(--wood-3); border-radius: 50%; animation: spin .8s linear infinite; }

/* ---------------------------------------------------------------- cards + grids */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr)); gap: .95rem; padding-bottom: .4rem; }
.grid.tight { grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr)); gap: .8rem; }
.card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .32rem; padding: .6rem .5rem .5rem; text-align: center;
  background: linear-gradient(180deg, #fffdf7 0%, #f4ecd9 100%); border: 2.5px solid #4b3a24; border-radius: .95rem;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #b3a07a, 0 4px 0 2.5px #4b3a24, 0 8px 12px rgba(60, 40, 15, .16);
  transition: transform .2s var(--spring); cursor: pointer; animation: rise .38s var(--out) both; animation-delay: calc(var(--i, 0) * 26ms); }
.card:active:not(.locked) { transform: translateY(3px); }
@media (hover: hover) { .card:not(.locked):hover { transform: translateY(-3px); } }
.card.locked { cursor: default; background: linear-gradient(180deg, #e9e5dc, #d8d2c5); }
.card.locked .art, .card.locked .name { filter: grayscale(1) brightness(.85); }
.card.locked .art { opacity: .75; }
.card.sel { box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--green-lo), 0 4px 0 2.5px #4b3a24, 0 0 0 5px rgba(134, 209, 58, .55); }
.card .art { position: relative; width: 5.4rem; height: 5.4rem; }
.card .art > svg, .card .art > .pt { width: 100%; height: 100%; }
.card .art > .ci > img { filter: drop-shadow(0 4px 3px rgba(40, 25, 5, .3)); }
.card .name { font: .8rem/1.12 var(--font-d); color: #fff; text-shadow: var(--ts); padding: 0 .1rem .12rem; }
.card .meta { display: flex; align-items: center; justify-content: center; gap: .3rem; font: 800 .76rem var(--font-b); color: var(--ink-2); white-space: nowrap; }
.card .meta .ic { width: 1.15rem; height: 1.15rem; }
.card .meta .ic ~ .ic { margin-left: .35rem; }
.card .costrow { width: 100%; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem .4rem .38rem; min-height: 2.1rem;
  background: linear-gradient(180deg, rgba(40, 27, 13, .88), rgba(22, 14, 6, .92)); border-radius: .6rem; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1);
  font: .86rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.card .costrow .muted { color: #bbb; }
.card .lockmsg { width: 100%; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2.1rem; padding: .25rem .4rem;
  border-radius: .6rem; background: rgba(147, 31, 21, .1); border: 1.5px dashed rgba(147, 31, 21, .35); font: 800 .72rem/1.15 var(--font-b); color: #9b2415; }
.card .lockmsg .ic { width: 1.1rem; height: 1.1rem; }
.card .count { font: .8rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.card .count.full { color: #b8ff7a; }
.card .lvb, .lvb { position: absolute; left: .2rem; bottom: .2rem; z-index: 2; min-width: 1.35rem; padding: .16rem .3rem .2rem; text-align: center; font: .68rem/1 var(--font-d); color: #fff; text-shadow: var(--ts);
  background: #1a130b; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: .35rem; }
.card .ibtn { position: absolute; top: .3rem; left: .3rem; width: 1.75rem; height: 1.75rem; z-index: 3; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.card .ibtn .ic { width: 100%; height: 100%; }
.card .flag { position: absolute; top: .45rem; left: .5rem; padding: .1rem .45rem; font: .66rem var(--font-d); color: #fff; text-shadow: var(--ts); background: var(--green); border-radius: .4rem; }

/* troop / spell cards: the portrait fills the top, level badge on it, info (i) top-right, cost strip at the bottom */
.card.unit { padding: 0 0 .45rem; gap: .28rem; overflow: hidden; }
.card.unit .art { width: 100%; height: auto; aspect-ratio: 1; border-bottom: 2.5px solid #4b3a24; }
.card.unit .art .pt { border: 0; border-radius: 0; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .2); }
.card.unit .art .ci > img { filter: none; }
.card.unit .ibtn { left: auto; right: .3rem; }
.card.unit .costrow, .card.unit .lockmsg { width: calc(100% - .8rem); }
.card.unit .name { font-size: .74rem; }
.card.unit.sel { background: linear-gradient(180deg, #f1fbe4, #dcefc4); }

/* stat sheet (info window) */
.info-top { display: grid; grid-template-columns: 9rem 1fr; gap: 1.1rem; align-items: start; }
.info-art { width: 9rem; height: 9rem; padding: .6rem; background: radial-gradient(circle at 50% 42%, #fffef8, #e7dbbd 72%); border: 2.5px solid #4b3a24; border-radius: 1rem;
  box-shadow: inset 0 2px 0 #fff, inset 0 -4px 8px rgba(120, 90, 40, .2), 0 3px 0 #b3a07a; }
.info-art svg, .info-art .pt { width: 100%; height: 100%; }
.info-art > .ci > img { filter: drop-shadow(0 5px 4px rgba(40, 25, 5, .3)); }
.info-desc { margin: 0 0 .8rem; font: 700 .95rem/1.45 var(--font-b); color: var(--ink-2); }
.stats { display: flex; flex-direction: column; gap: .4rem; }
.stat { display: grid; grid-template-columns: 1.9rem 1fr auto; align-items: center; gap: .6rem; padding: .42rem .75rem; background: linear-gradient(180deg, #fbf8ef, #f0e8d5);
  border: 2px solid var(--parch-edge); border-radius: .7rem; box-shadow: 0 2px 0 var(--parch-edge); animation: rise .35s var(--out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.stat .ic { width: 1.75rem; height: 1.75rem; }
.stat .k { font: 800 .88rem var(--font-b); color: var(--ink-2); }
.stat .v { font: .9rem var(--font-d); color: var(--ink); text-align: right; white-space: nowrap; }
.stat .up { color: #b8ff7a; text-shadow: var(--ts); margin-left: .4rem; }
/* every level of a building at a glance (info sheet): the level you have is green, the next one gold, levels beyond the town hall faded */
.lvl-wrap { margin-top: .95rem; max-height: 15.6rem; overflow: auto; background: #fbf8ef; border: 2.5px solid #4b3a24; border-radius: var(--r-sm);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(75, 58, 36, .35); scrollbar-width: thin; scrollbar-color: var(--parch-deep) transparent; }
.lvl-table { width: 100%; border-collapse: collapse; font: 800 .8rem/1.2 var(--font-b); color: var(--ink); font-variant-numeric: tabular-nums; }
.lvl-table th { position: sticky; top: 0; z-index: 1; padding: .5rem .6rem .55rem; text-align: right; white-space: nowrap; font: .7rem/1 var(--font-d); color: #fff; text-shadow: var(--ts);
  background: linear-gradient(180deg, var(--band-hi), var(--band)); box-shadow: inset 0 -2px 0 var(--band-lo); }
.lvl-table td { padding: .36rem .6rem; text-align: right; white-space: nowrap; border-top: 1px solid #e6dcc3; }
.lvl-table th:first-child, .lvl-table td:first-child { text-align: center; width: 3.2rem; }
.lvl-table tr.cur td { background: #dcf3bd; color: #2f5d0d; border-top-color: #b9dc8f; }
.lvl-table tr.cur td:first-child { box-shadow: inset .3rem 0 0 var(--green-lo); }
.lvl-table tr.next td { background: #fff1c2; border-top-color: #ecd68a; }
.lvl-table tr.next td:first-child { box-shadow: inset .3rem 0 0 var(--gold-lo); }
.lvl-table tr.far td { color: var(--ink-3); }

/* ---------------------------------------------------------------- train / brew / lab / heroes */
.army-strip { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; margin-bottom: .95rem; background: linear-gradient(180deg, #ddd0b1, #e6dbc0);
  border: 2px solid #bfad85; border-radius: var(--r); box-shadow: inset 0 3px 0 rgba(100, 75, 35, .16), 0 2px 0 rgba(255, 255, 255, .6); }
.army-cap { display: flex; flex-direction: column; gap: .35rem; width: 11rem; flex: none; }
.army-cap .lab { display: flex; justify-content: space-between; gap: .4rem; font: .9rem var(--font-d); color: #fff; text-shadow: var(--ts); text-transform: none; letter-spacing: 0; }
.army-cap .lab .n { color: #fff; }
.army-cap .bar { height: 1.05rem; background: var(--track); border: 2px solid rgba(0, 0, 0, .75); }
.chips { display: flex; gap: .5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-height: 3.7rem; align-items: center; flex: 1; padding: .5rem .3rem .25rem; }
.chips::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: none; width: 3.3rem; height: 3.3rem; animation: pop-in .3s var(--spring) both; }
.chip .pt { border-radius: .6rem; }
.chip .cnt { position: absolute; top: -.4rem; left: -.3rem; z-index: 2; font: .72rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.chip .rm { position: absolute; top: -.5rem; right: -.5rem; z-index: 3; width: 1.6rem; height: 1.6rem; border-radius: .45rem; display: grid; place-items: center;
  background: linear-gradient(var(--danger-hi), var(--danger) 55%); border: 2px solid var(--o); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--danger-lo), 0 2px 0 2px var(--o); }
.chip .rm .ic { width: .85rem; height: .85rem; }
.chip .prog { position: absolute; left: 3px; right: 3px; bottom: 3px; height: .45rem; border-radius: 3px; background: rgba(0, 0, 0, .55); overflow: hidden; z-index: 2; }
.chip .prog i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(#d2ff95, #6cc22a); transition: width .9s linear; }
.chip.head { outline: 3px solid #b8ff7a; outline-offset: 1px; border-radius: .65rem; }
.chips-empty { font: 800 .85rem var(--font-b); color: var(--ink-3); padding: 0 .3rem; }
/* quick train: three saved armies + the last army that went into battle */
.presets { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .95rem; }
.lrow.preset { --stripe: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); padding: .45rem .7rem .45rem 1rem; }
.lrow.preset .who { flex: 0 0 7.6rem; }
.lrow.preset .chips { min-height: 3rem; padding: .4rem .2rem .1rem; gap: .4rem; }
.lrow.preset .chip { width: 2.6rem; height: 2.6rem; animation: none; }
.lrow.preset .chip .cnt { font-size: .62rem; }
.lrow.preset .sub .stall { color: var(--danger); }
.lrow.preset.empty-slot { --stripe: transparent; background: linear-gradient(180deg, #f1ead8, #e6dcc3); border-style: dashed; box-shadow: none; }
.lrow.preset.empty-slot .who { flex: 1 1 auto; }
.lrow.preset.empty-slot .nm { opacity: .85; }
.queue-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.queue-side .t { font: .86rem var(--font-d); color: #fff; text-shadow: var(--ts); display: flex; align-items: center; gap: .3rem; }
.queue-side .t .ic { width: 1.3rem; height: 1.3rem; }
.stall { color: var(--danger-lo) !important; }

.research-now { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; margin-bottom: 1rem; background: linear-gradient(90deg, #d8ecfb, #eef4f4 60%, var(--parch-hi));
  border: 2px solid #8fb8d8; border-radius: var(--r); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 #8fb8d8; }
.research-now .art { width: 4.4rem; height: 4.4rem; flex: none; }
.research-now .grow { display: flex; flex-direction: column; gap: .35rem; }
.research-now .ttl { font: .98rem var(--font-d); color: #fff; text-shadow: var(--ts); }

.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.hero { position: relative; display: grid; grid-template-columns: 7rem 1fr; gap: .9rem; padding: .9rem; background: linear-gradient(180deg, #fffdf7, #f1e8d4);
  border: 2.5px solid #4b3a24; border-radius: var(--r-lg); box-shadow: inset 0 2px 0 #fff, 0 4px 0 #b3a07a, 0 4px 0 2.5px #4b3a24; animation: rise .4s var(--out) both; }
.hero .art { width: 7rem; height: 7rem; }
.hero .nm { font: 1.15rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.hero .lv { font: 800 .85rem var(--font-b); color: var(--ink-2); }
.hero .ab { display: flex; align-items: center; gap: .4rem; font: 800 .82rem var(--font-b); color: var(--ink-2); }
.hero .ab .ic { width: 1.2rem; height: 1.2rem; }
.hero.locked .art { filter: grayscale(1); opacity: .6; }
.hero .col { gap: .45rem; }

/* ---------------------------------------------------------------- attack window: Single Player map | Multiplayer */
.attack-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr); gap: 1.1rem; align-items: start; }
.sp-card { border: 3px solid var(--o); border-radius: var(--r-lg); overflow: hidden; background: #6aa83e; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.camp-legend { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .55rem .8rem .6rem; font: 1.05rem var(--font-d); color: #fff; text-shadow: var(--ts);
  background: linear-gradient(180deg, #8d6a3f, #6c4f2c); border-bottom: 3px solid var(--o); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.camp-legend > .ic { width: 1.9rem; height: 1.9rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.camp-legend .stars-tot { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem .2rem .25rem; font-size: .82rem; background: rgba(0, 0, 0, .35); border-radius: .5rem; }
.camp-legend .stars-tot .ic { width: 1.4rem; height: 1.4rem; }
.camp { position: relative; width: 100%; aspect-ratio: 500 / 560; overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #a9dc72 0%, rgba(169, 220, 114, 0) 40%), radial-gradient(circle at 80% 70%, #86c653 0%, rgba(134, 198, 83, 0) 45%),
    radial-gradient(circle at 12% 88%, #5b9a33 0%, rgba(91, 154, 51, 0) 30%), linear-gradient(180deg, #8fcd5d, #69ab3b);
  box-shadow: inset 0 0 50px rgba(20, 50, 5, .35); }
.camp > svg.path { position: absolute; inset: 0; width: 100%; height: 100%; }
.camp .deco { position: absolute; width: 9%; height: 9%; transform: translate(-50%, -60%); opacity: .95; pointer-events: none; }
.camp .deco svg { width: 100%; height: 100%; }
.node { position: absolute; transform: translate(-50%, -50%); width: 12.5%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #fff4cf, #e6c27a 72%); border: 3px solid var(--o);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), inset 0 3px 0 rgba(255, 255, 255, .6), 0 4px 0 #5a3d17, 0 4px 0 3px var(--o), 0 8px 10px rgba(0, 0, 0, .3);
  font: clamp(.7rem, 1.9vw, 1.05rem)/1 var(--font-d); color: #fff; text-shadow: var(--ts); transition: transform .15s var(--spring); animation: pop-in .4s var(--spring) both; animation-delay: calc(var(--i, 0) * 22ms); }
.node:active { transform: translate(-50%, -46%) scale(.95); }
@media (hover: hover) { .node:not(.locked):hover { transform: translate(-50%, -54%) scale(1.06); } }
.node.done { background: radial-gradient(circle at 50% 30%, #fff3a8, #f5b822 72%); }
.node.cur { background: radial-gradient(circle at 50% 30%, #e2ffc4, #7fd23e 72%); animation: pop-in .4s var(--spring) both, bob-node 1.4s ease-in-out .5s infinite; }
.node.locked { background: radial-gradient(circle at 50% 30%, #d9d4c8, #9f978a 72%); cursor: default; }
.node .ic { width: 50%; height: 50%; }
.node .stars { position: absolute; left: 50%; top: -38%; transform: translateX(-50%); display: flex; gap: 0; }
.node .stars .ic { width: clamp(.8rem, 2.1vw, 1.15rem); height: clamp(.8rem, 2.1vw, 1.15rem); }
.node .stars .ic:nth-child(2) { margin-top: -.28rem; }

.match-card { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; padding: 0 0 1rem; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #fff7e2, #f0e0b9); border: 3px solid var(--o); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 4px 0 rgba(0, 0, 0, .3); }
.match-card > :not(.mc-head) { margin-left: 1rem; margin-right: 1rem; }
.mc-head { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .8rem .6rem; font: 1.05rem var(--font-d); color: #fff; text-shadow: var(--ts);
  background: linear-gradient(180deg, #e0582f, #b8391b); border-bottom: 3px solid var(--o); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); }
.mc-head .ic { width: 1.9rem; height: 1.9rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.mc-league { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.mc-league .league { width: 3.6rem; height: 3.6rem; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25)); }
.mc-league .col { align-items: flex-start; gap: .3rem; }
.mc-league .lg-name { font: .88rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.mc-league .lg-tro { display: inline-flex; align-items: center; gap: .2rem; padding: .18rem .6rem .2rem .2rem; font: .85rem var(--font-d); color: #fff; text-shadow: var(--ts); background: var(--track); border: 2px solid rgba(0, 0, 0, .75); border-radius: .5rem; }
.mc-league .lg-tro .ic { width: 1.4rem; height: 1.4rem; }
.match-card p { margin: 0; font: 800 .86rem/1.35 var(--font-b); color: #6b4414; }
.army-box { display: flex; flex-direction: column; gap: .4rem; padding: .55rem .6rem .6rem; background: linear-gradient(180deg, #e3d3ad, #ecdfbf); border: 2px solid #c2a870; border-radius: .8rem; box-shadow: inset 0 3px 0 rgba(100, 75, 35, .15); }
.army-box .ab-lab { display: flex; align-items: center; justify-content: space-between; font: .85rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.army-box .chips-empty { text-align: center; }
.army-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; min-height: 2.8rem; padding-top: .3rem; }
.army-mini:empty { display: none; }
.army-mini .chip { width: 2.7rem; height: 2.7rem; }
.army-mini .chip .cnt { font-size: .64rem; }
.match-card .btn.wide { width: auto; }
.btn.find { min-height: 4.1rem; flex-direction: column; gap: .15rem; font-size: 1.32rem; border-radius: 18px; margin-top: .2rem;
  --bc: #fbc02a; --bh: #fff08e; --bl: #a8620a; --bd: #f29a17; }
.btn.find .cost { font-size: .72em; }
.btn.find .find-t { display: block; }

/* ---------------------------------------------------------------- battle HUD */
.bhud { position: absolute; inset: 0; pointer-events: none; }
.bhud * { pointer-events: auto; }
.bh-tl { position: absolute; top: .6rem; left: var(--edge); display: flex; flex-direction: column; gap: .3rem; pointer-events: none; }
.bh-tl * { pointer-events: none; }
.bh-opp { display: flex; align-items: center; gap: .45rem; font: 1.08rem/1.1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.bh-opp .th { font: .62rem/1 var(--font-d); padding: .22rem .42rem .26rem; border-radius: .4rem; background: var(--track); border: 1.5px solid rgba(0, 0, 0, .7); }
.bh-opp .ic { width: 1.6rem; height: 1.6rem; }
.bh-cap { margin-top: .35rem; font: .72rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.bh-loot { display: flex; flex-direction: column; gap: .2rem; }
.bh-loot .r { display: flex; align-items: center; gap: .35rem; font: 1.05rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.bh-loot .r .ic { width: 1.9rem; height: 1.9rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.bh-loot .r .v { min-width: 5.6em; }
.bh-loot .r .got { font-size: .76rem; color: #b8ff7a; min-width: 5em; }
.bh-loot .r.bump .ic { animation: bump .35s var(--spring); }
.bh-offer { display: flex; flex-direction: column; gap: .2rem; margin-top: .35rem; font: .74rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.bh-offer span { display: inline-flex; align-items: center; gap: .25rem; }
.bh-offer .k { min-width: 4.6em; }
.bh-offer .ic { width: 1.35rem; height: 1.35rem; }
.bh-offer .win { color: #c6ff8a; }
.bh-offer .lose { color: #ff9a8a; }
.bh-offer .k { color: #fff; }
.bh-tc { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .2rem; pointer-events: none; }
.bh-tc * { pointer-events: none; }
.bh-tc .lab { font: .76rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.bh-clock { width: 5.4em; text-align: center; font: 1.65rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.bh-clock.scout { color: #fff; }
.bh-clock.low { color: #ff7a66; animation: tick .5s ease-in-out infinite alternate; }
.bh-tr { position: absolute; top: .6rem; right: var(--edge); display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; pointer-events: none; }
.bh-tr * { pointer-events: none; }
.bh-stars { display: flex; align-items: flex-end; gap: .05rem; margin-bottom: .1rem; }
.bh-stars .s { width: 2.4rem; height: 2.4rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.bh-stars .s:not(.on) { opacity: .85; }
.bh-stars .s:nth-child(2) { width: 2.9rem; height: 2.9rem; margin-bottom: .35rem; }
.bh-stars .s.on { animation: star-pop .6s var(--spring) both; }
.bh-pct { font: 1.8rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); min-width: 3.5em; text-align: right; }
.bh-pct-lab { font: .72rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.bh-side { position: absolute; left: var(--edge); bottom: 7.9rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.bh-side.r { left: auto; right: var(--edge); align-items: flex-end; }
.bh-next { flex-direction: row; min-height: 3.3rem; font-size: 1.05rem; }
.bh-next .sub { display: flex; align-items: center; gap: .2rem; font-size: .68rem; margin-top: .2rem; }
.bh-next .sub .ic { width: 1.05rem; height: 1.05rem; }
.tray-wrap { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem var(--edge) .6rem; background: linear-gradient(180deg, rgba(8, 5, 2, 0), rgba(8, 5, 2, .55)); pointer-events: none; }
.tray { display: flex; gap: .45rem; justify-content: safe center; overflow-x: auto; overflow-y: visible; padding: 1.45rem .6rem .35rem; scrollbar-width: none; pointer-events: auto; }
.tray::-webkit-scrollbar { display: none; }
.tray .sep { flex: none; width: 3px; margin: .7rem .2rem; background: rgba(255, 255, 255, .3); border-radius: 2px; }
.ucard { position: relative; flex: none; width: 4.6rem; height: 5.6rem; border-radius: .8rem; padding: 0; background: #1a120a; border: 2.5px solid var(--o);
  box-shadow: 0 4px 0 #000, 0 8px 12px rgba(0, 0, 0, .35); transition: transform .18s var(--spring); animation: pop-in .35s var(--spring) both; animation-delay: calc(var(--i, 0) * 30ms); }
.ucard .pt { position: absolute; inset: 0; border: 0; border-radius: .6rem; }
.ucard .cnt { position: absolute; top: .22rem; left: .3rem; z-index: 2; font: .9rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.ucard .lvb { left: .22rem; bottom: .22rem; }
.ucard.sel { transform: translateY(-.75rem); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ffc933, 0 0 0 8.5px var(--o), 0 12px 18px rgba(0, 0, 0, .45); }
.ucard.empty { filter: grayscale(1) brightness(.6); }
.ucard.empty .cnt { opacity: .75; }
.ucard .kbd { top: auto; bottom: -.4rem; left: auto; right: -.4rem; }
.ucard.ability { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #c052e8, 0 0 0 8.5px var(--o), 0 8px 14px rgba(0, 0, 0, .4); }
.ucard.ability::after { content: ''; position: absolute; inset: -9px; border-radius: 1.2rem; box-shadow: 0 0 18px 6px rgba(214, 120, 255, .75); opacity: 0; animation: glow-fade 1.2s ease-in-out infinite; pointer-events: none; }
.ucard.ability .ablab { position: absolute; left: 0; right: 0; bottom: .35rem; z-index: 2; text-align: center; font: .6rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.ucard.used { filter: grayscale(.9) brightness(.55); }
.ucard .hp { position: absolute; left: .3rem; right: .3rem; top: .3rem; height: .45rem; z-index: 2; background: rgba(0, 0, 0, .6); border-radius: 3px; overflow: hidden; }
.ucard .hp i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: linear-gradient(#d2ff95, #6cc22a); }
.ucard.hero .cnt { top: .85rem; }
.bhud.replay .tray-wrap { bottom: 4.4rem; background: none; }
.deploy-hint { position: absolute; left: 50%; bottom: 8.6rem; transform: translateX(-50%); padding: .45rem 1rem; border-radius: .7rem; background: var(--track); font: .85rem var(--font-d); color: #fff; text-shadow: var(--ts); white-space: nowrap; pointer-events: none; animation: rise .35s var(--out) both; }
.replay-bar { position: absolute; pointer-events: auto; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(40rem, calc(100% - 2 * var(--edge))); display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  background: rgba(20, 13, 6, .86); border: 2.5px solid var(--o); border-radius: 1rem; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); animation: rise .35s var(--out) both; }
.replay-bar .scrub { flex: 1; height: 1.1rem; cursor: pointer; }
.replay-bar .scrub.bar { background: rgba(255, 255, 255, .15); }
.replay-bar .t { min-width: 3.4em; font: .9rem var(--font-d); color: #fff; text-shadow: var(--ts); text-align: right; }
.replay-bar .seg { background: rgba(255, 255, 255, .1); border-color: rgba(0, 0, 0, .6); }
.replay-bar .seg button { color: #ddd; }

/* ---------------------------------------------------------------- result screen */
.result { position: absolute; inset: 0; z-index: 40; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: calc(var(--sat) + 1rem) 1rem calc(var(--sab) + 1rem); pointer-events: auto;
  background: radial-gradient(circle at 50% 30%, rgba(70, 48, 16, .55), rgba(6, 4, 2, .88)); animation: fade-in .35s both; overflow: hidden auto; }
.result.lose { background: radial-gradient(circle at 50% 30%, rgba(70, 20, 12, .55), rgba(6, 3, 2, .9)); }
.result-in { display: flex; flex-direction: column; align-items: center; gap: .8rem; width: min(36rem, 100%); }
.rhead { position: relative; display: grid; place-items: center; width: 100%; min-height: 7.6rem; }
.rays { position: absolute; z-index: -1; left: 50%; top: 50%; width: 26rem; height: 26rem; margin: -13rem 0 0 -13rem; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 120, .34) 0deg 9deg, rgba(255, 226, 120, 0) 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: fade-in .6s .3s both, spin 40s linear infinite; will-change: transform; }
.result.lose .rays { display: none; }
.ribbon { position: relative; padding: .55rem 3rem .7rem; font: 2.2rem/1 var(--font-d); color: #fff; text-shadow: var(--ts);
  background: linear-gradient(180deg, var(--green-hi), var(--green) 50%, #5ea521); border: 3px solid var(--o); border-radius: 12px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 6px 0 #2e5a0c, 0 6px 0 3px var(--o), 0 14px 30px rgba(0, 0, 0, .45); animation: ribbon-in .6s var(--spring) both; }
.ribbon::before, .ribbon::after { content: ''; position: absolute; top: .65rem; width: 2.2rem; height: 100%; z-index: -1; background: #4d8a1a; border: 3px solid var(--o); }
.ribbon::before { left: -1.65rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); }
.ribbon::after { right: -1.65rem; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.ribbon.lose { background: linear-gradient(180deg, #ff9b8c, var(--danger) 50%, #c52f20); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 6px 0 #6e1b13, 0 6px 0 3px var(--o), 0 14px 30px rgba(0, 0, 0, .45); }
.ribbon.lose::before, .ribbon.lose::after { background: var(--danger-lo); }
.rstars { position: relative; display: flex; align-items: flex-end; gap: .2rem; }
.rstars .s { width: 5rem; height: 5rem; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)); }
.rstars .s:nth-child(2) { width: 6.4rem; height: 6.4rem; margin-bottom: 1rem; }
.rstars .s.on { animation: star-land .55s var(--spring) both; }
.rpct { font: 1rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.rpct b { font-weight: 400; font-size: 1.5rem; }
.rtitle { color: #ffe07a; }
.rbox { width: 100%; padding: .9rem 1.1rem 1rem; background: var(--parch); border: 3px solid var(--o); border-radius: var(--r-lg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), var(--shadow-panel); animation: rise .45s var(--out) .25s both; }
.rbox h4 { margin: 0 0 .6rem; font: .92rem var(--font-d); font-weight: 400; color: #fff; text-shadow: var(--ts); text-align: center; }
.rbox h4.rused-t { margin: .9rem 0 .2rem; }
.rloot { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.rloot .it { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .3rem .55rem; background: linear-gradient(180deg, #e0d3b3, #eadfc4); border: 2px solid #c2ae84; border-radius: .8rem; box-shadow: inset 0 3px 0 rgba(100, 75, 35, .14); }
.rloot .it .ic { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.rloot .it .v { font: 1.12rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); min-width: 5.4em; text-align: center; }
.rloot .it .v.neg { color: #ff6a58; }
.rloot .it .v.pos { color: #b8ff7a; }
.rloot .it .hint { font-size: .8rem; }
.rused { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .6rem; }
.rused .chip { width: 2.9rem; height: 2.9rem; }
.result .acts { display: flex; gap: .8rem; margin-top: .3rem; animation: rise .4s var(--out) .5s both; }
.rnote { font: .8rem var(--font-d); color: #ffd98a; text-shadow: var(--ts); text-align: center; }

/* ---------------------------------------------------------------- logs, lists, leaderboards */
.list { display: flex; flex-direction: column; gap: .55rem; }
.lrow { position: relative; display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem .6rem 1rem; background: linear-gradient(180deg, #fbf8ef, #efe6d1);
  border: 2px solid #bfae87; border-radius: .85rem; box-shadow: inset 0 2px 0 #fff, 0 3px 0 #bfae87; overflow: hidden; animation: rise .35s var(--out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.lrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .4rem; background: var(--stripe, transparent); }
.lrow.win { --stripe: linear-gradient(180deg, var(--green-hi), var(--green-lo)); }
.lrow.loss { --stripe: linear-gradient(180deg, var(--danger-hi), var(--danger-lo)); }
.lrow.me { background: linear-gradient(180deg, #effbe0, #d9efbf); border-color: #9cc873; box-shadow: inset 0 2px 0 #fff, 0 3px 0 #9cc873; }
.lrow[role="button"] { cursor: pointer; }
.lrow[role="button"]:active { transform: translateY(2px); }
.lrow .who { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1 1 auto; }
.lrow .nm { font: .9rem/1.1 var(--font-d); color: #fff; text-shadow: var(--ts); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .12em .12em .36em; margin: -.12em 0 -.3em; }
.lrow .sub { display: flex; align-items: center; gap: .45rem; font: 800 .78rem var(--font-b); color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.lrow .sub .ic { width: 1rem; height: 1rem; }
.lrow .sub .xpb { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.3rem; padding: 0 .25rem; font: .6rem/1 var(--font-d); color: #fff; text-shadow: var(--ts);
  background: linear-gradient(#8ed2ff, #2f8fd8); border: 1.5px solid var(--o); border-radius: .35rem; }
.lrow .sub .cl { display: inline-flex; align-items: center; gap: .25rem; }
.lrow .bdg.sm { width: 1.2rem; height: 1.2rem; flex: none; }
.lrow .stars3 { display: flex; gap: 0; }
.lrow .stars3 .ic { width: 1.45rem; height: 1.45rem; }
.lrow .stars3 .ic:nth-child(2) { margin-top: -.3rem; }
.lrow .big { font: .95rem var(--font-d); color: #fff; text-shadow: var(--ts); min-width: 3em; text-align: center; }
.lrow .loot { display: flex; flex-direction: column; gap: .2rem; min-width: 6.4rem; }
.lrow .loot .cost { font-size: .8rem; color: #fff; text-shadow: var(--ts); }
.lrow .tro { display: flex; align-items: center; gap: .2rem; min-width: 4.6rem; justify-content: flex-end; padding: .28rem .55rem .3rem .25rem; font: .82rem var(--font-d); color: #fff; text-shadow: var(--ts);
  background: var(--track); border: 2px solid rgba(0, 0, 0, .75); border-radius: .55rem; white-space: nowrap; }
.lrow .tro .ic { width: 1.35rem; height: 1.35rem; }
.lrow .tro .lgi { display: inline-block; width: 1.5rem; height: 1.5rem; margin: -.2rem 0; }
.lrow .tro.pos { color: #b8ff7a; }
.lrow .tro.neg { color: #ff7a66; }
.lrow .btns { display: flex; gap: .45rem; flex: none; }
.lrow .rank { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font: .9rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.lrow .rank.m1, .lrow .rank.m2, .lrow .rank.m3 { border-radius: 50%; border: 2.5px solid var(--o); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 2px 0 rgba(0, 0, 0, .3); }
.lrow .rank.m1 { background: linear-gradient(#fff08a, #f6b91c); }
.lrow .rank.m2 { background: linear-gradient(#f4f6f9, #9fabb8); }
.lrow .rank.m3 { background: linear-gradient(#f7c9a0, #c47b3a); }
.lrow .lg { flex: none; width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.lrow .bdg { flex: none; width: 2.6rem; height: 2.6rem; }
.lrow .bdg svg { width: 100%; height: 100%; }
.lrow .new { position: absolute; top: .3rem; right: .45rem; padding: .12rem .4rem .16rem; font: .56rem var(--font-d); color: #fff; text-shadow: var(--ts); background: var(--danger); border: 1.5px solid var(--o); border-radius: .35rem; }

/* ---------------------------------------------------------------- clan */
.clan-head { display: grid; grid-template-columns: 5.4rem 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1rem; margin-bottom: 1rem;
  background: linear-gradient(135deg, #fffdf6, #efe2c2); border: 2.5px solid #4b3a24; border-radius: var(--r-lg); box-shadow: inset 0 2px 0 #fff, 0 4px 0 #b3a07a, 0 4px 0 2.5px #4b3a24; }
.clan-head .bdg { width: 5.4rem; height: 5.4rem; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.clan-head .bdg svg { width: 100%; height: 100%; }
.clan-head .lvl { position: relative; }
.clan-head .nm { font: 1.35rem/1.1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.clan-head .desc { margin-top: .3rem; font: 700 .9rem/1.35 var(--font-b); color: var(--ink-2); }
.facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.fact { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem .22rem .3rem; background: rgba(59, 42, 26, .1); border: 1.5px solid rgba(59, 42, 26, .15); border-radius: .5rem; font: 800 .8rem var(--font-b); color: var(--ink-2); }
.fact .ic { width: 1.25rem; height: 1.25rem; }
.role { display: inline-block; padding: .1rem .45rem .12rem; border-radius: .35rem; font: .54rem/1.3 var(--font-d); color: #fff; text-shadow: var(--ts); background: #8d7a5c; border: 1.5px solid var(--o); }
.role.leader { background: #d4a21e; }
.role.coleader { background: #c06a2a; }
.role.elder { background: #5c9a36; }
.online { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; background: #7fe03a; box-shadow: 0 0 0 2px var(--o); vertical-align: .1em; }
.badge-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem; }
.badge-pick button { aspect-ratio: 1; padding: .3rem; border-radius: .7rem; background: var(--parch-hi); border: 2px solid var(--parch-edge); transition: transform .15s var(--spring); }
.badge-pick button svg { width: 100%; height: 100%; }
.badge-pick button.on { border-color: var(--o); background: #eaf7d8; box-shadow: 0 0 0 3px var(--green); transform: scale(1.06); }
.swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.swatches button { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--o); transition: transform .15s var(--spring); }
.swatches button.on { box-shadow: 0 0 0 2px var(--o), 0 0 0 5px var(--green); transform: scale(1.12); }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem 1.1rem; }
.form .full { grid-column: 1 / -1; }
.fl { display: flex; flex-direction: column; gap: .35rem; }
.lab { font: .66rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.field { width: 100%; min-height: 2.8rem; padding: .55rem .8rem; font: 700 1rem var(--font-b); color: var(--ink); background: #fffef9; border: 2.5px solid #7d6743; border-radius: .7rem;
  box-shadow: inset 0 3px 3px rgba(80, 55, 20, .14); outline: none; transition: border-color .15s; }
.field:focus { border-color: var(--blue-lo); }
.field::placeholder { color: #b3a078; }
textarea.field { resize: none; min-height: 4.4rem; line-height: 1.35; }
.field.bad { border-color: var(--danger); }
.seg { display: inline-flex; gap: 3px; padding: 3px; background: #d6c7a3; border: 2.5px solid #7d6743; border-radius: .8rem; box-shadow: inset 0 2px 3px rgba(80, 55, 20, .2); }
.seg button { padding: .5rem .8rem .55rem; border-radius: .55rem; font: .78rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.seg button.on { background: linear-gradient(180deg, var(--green-hi), var(--green) 55%, #6cbf22); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--green-lo), 0 0 0 2px var(--o); }
.stepper { display: inline-flex; align-items: center; gap: .5rem; }
.stepper .v { min-width: 4.6em; text-align: center; font: 1rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 2rem; background: transparent; }
.slider::-webkit-slider-runnable-track { height: .8rem; border-radius: .4rem; border: 2px solid var(--o); background: linear-gradient(90deg, var(--green) calc(var(--p, .5) * 100%), rgba(20, 13, 6, .55) 0); }
.slider::-moz-range-track { height: .8rem; border-radius: .4rem; border: 2px solid var(--o); background: linear-gradient(90deg, var(--green) calc(var(--p, .5) * 100%), rgba(20, 13, 6, .55) 0); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1.7rem; height: 1.7rem; margin-top: -.55rem; border-radius: .45rem; background: linear-gradient(#fffdf6, #e6d6ae); border: 2.5px solid var(--o); box-shadow: 0 2px 0 var(--o); }
.slider::-moz-range-thumb { width: 1.4rem; height: 1.4rem; border-radius: .4rem; background: linear-gradient(#fffdf6, #e6d6ae); border: 2.5px solid var(--o); }
.setting { display: grid; grid-template-columns: 2.4rem 1fr minmax(8rem, 14rem); align-items: center; gap: .8rem; padding: .7rem .9rem; background: linear-gradient(180deg, #fbf8ef, #efe6d1);
  border: 2px solid #bfae87; border-radius: .85rem; box-shadow: inset 0 2px 0 #fff, 0 3px 0 #bfae87; }
.setting .ic { width: 2.3rem; height: 2.3rem; }
.setting .k { font: .9rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.setting .k small { display: block; margin-top: .25rem; font: 700 .78rem var(--font-b); color: var(--ink-3); text-shadow: none; }
.dev { margin-top: 1.1rem; padding: .9rem; border: 2px dashed #b98a3e; border-radius: var(--r); background: repeating-linear-gradient(45deg, rgba(246, 195, 60, .08) 0 12px, transparent 12px 24px); }
.dev .row { flex-wrap: wrap; }

/* ---------------------------------------------------------------- chat drawer */
.chat { position: absolute; top: 0; bottom: 0; left: 0; z-index: 25; width: min(25rem, 90vw); display: flex; flex-direction: column;
  padding: var(--sat) 0 var(--sab) var(--sal); background: rgba(24, 16, 8, .9); border-right: 3px solid var(--o);
  box-shadow: 10px 0 30px rgba(0, 0, 0, .4); transform: translateX(-104%); transition: transform .34s var(--out); pointer-events: auto; }
.chat.open { transform: none; }
.chat-head { flex: none; display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; background: linear-gradient(180deg, var(--band-hi), var(--band-lo)); border-bottom: 3px solid var(--o); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); }
.chat-head .bdg { width: 2.7rem; height: 2.7rem; }
.chat-head .bdg svg { width: 100%; height: 100%; }
.chat-head .t { flex: 1; min-width: 0; font: 1.02rem/1.15 var(--font-d); color: #fff; text-shadow: var(--ts); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .12em .12em .36em; }
.chat-head .t small { display: block; margin-top: .1rem; font: .56rem var(--font-d); color: #fff4d6; }
.chat-close { width: 2.5rem; height: 2.5rem; border-radius: .7rem; display: grid; place-items: center; background: rgba(0, 0, 0, .28); border: 2px solid rgba(0, 0, 0, .5); }
.chat-close .ic { width: 1.3rem; height: 1.3rem; }
.msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .8rem .75rem; display: flex; flex-direction: column; gap: .55rem; overscroll-behavior: contain; user-select: text; -webkit-user-select: text; }
.msg { max-width: 86%; align-self: flex-start; padding: .38rem .65rem .48rem; background: linear-gradient(180deg, #fbf8ef, #ece2cc); border: 2px solid var(--o); border-radius: 4px .9rem .9rem .9rem; animation: msg-in .3s var(--out) both; }
.msg.me { align-self: flex-end; background: linear-gradient(180deg, #effbe0, #d6ecbb); border-radius: .9rem 4px .9rem .9rem; }
.msg .hd { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.msg .who { font: .74rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.msg time { margin-left: auto; font: 700 .66rem var(--font-b); color: var(--ink-3); }
.msg .t { font: 650 .95rem/1.35 var(--font-b); color: var(--ink); overflow-wrap: anywhere; }
.msg.sys { align-self: center; max-width: 94%; padding: .25rem .8rem; background: rgba(255, 255, 255, .1); border: 0; border-radius: .5rem; font: 800 .78rem var(--font-b); color: #e9dcbc; text-align: center; }
.msg.req { width: 86%; background: linear-gradient(180deg, #fff6dc, #f5e2ae); }
.msg.req.me { background: linear-gradient(180deg, #effbe0, #d6ecbb); }
.msg.req .rq { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.msg.req .rq .bar { flex: 1; }
.msg.req .rq .n { font: .8rem var(--font-d); color: #fff; text-shadow: var(--ts); min-width: 3.4em; text-align: right; }
.msg.req .donors { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.msg.req .donors .chip { width: 2rem; height: 2rem; }
.msg.req .donors .chip .cnt { font-size: .58rem; }
.composer { flex: none; display: flex; gap: .45rem; padding: .6rem .7rem; border-top: 3px solid var(--o); background: linear-gradient(180deg, var(--band), var(--band-lo)); }
.composer .field { min-height: 2.6rem; }
.chat .empty { color: #e9dcbc; }
.chat-empty { flex: 1; display: flex; }
.donate-pop { position: absolute; left: .7rem; right: .7rem; bottom: 4.4rem; z-index: 3; padding: .8rem; background: var(--parch); border: 3px solid var(--o); border-radius: 1rem; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), var(--shadow-panel); animation: pop-in .3s var(--spring) both; }
.donate-pop h5 { margin: 0 0 .55rem; font: .95rem var(--font-d); font-weight: 400; color: #fff; text-shadow: var(--ts); display: flex; justify-content: space-between; align-items: center; }
.donate-pop h5 .muted { color: #fff; }
.donate-pop .grid { grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: .5rem; }
.donate-pop .chip { width: 100%; height: auto; aspect-ratio: 1; cursor: pointer; }
.donate-pop .chip.off { filter: grayscale(1) opacity(.5); cursor: default; }

/* ---------------------------------------------------------------- war */
.war-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 1rem; border: 2.5px solid #4b3a24; border-radius: var(--r-lg);
  background: linear-gradient(90deg, #cfe7ff 0%, var(--parch-hi) 40%, var(--parch-hi) 60%, #ffd7cf 100%); box-shadow: inset 0 2px 0 #fff, 0 4px 0 #b3a07a, 0 4px 0 2.5px #4b3a24; }
.war-side { display: flex; align-items: center; gap: .7rem; }
.war-side.them { flex-direction: row-reverse; text-align: right; }
.war-side .bdg { width: 3.6rem; height: 3.6rem; }
.war-side .bdg svg { width: 100%; height: 100%; }
.war-side .nm { font: 1rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.war-mid { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.war-mid .sc { display: flex; align-items: center; gap: .5rem; font: 1.7rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.war-mid .sc .ic { width: 2rem; height: 2rem; }
.war-mid .st { font: .7rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.war-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.war-cols h5 { margin: 0 0 .5rem; font: .9rem var(--font-d); font-weight: 400; color: #fff; text-shadow: var(--ts); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.pick { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; background: linear-gradient(180deg, #fbf8ef, #efe6d1); border: 2px solid #bfae87; border-radius: .7rem; box-shadow: 0 2px 0 #bfae87; font: .82rem var(--font-d); color: #fff; text-shadow: var(--ts); text-align: left; }
.pick .muted { color: #fff; }
.pick .box { width: 1.6rem; height: 1.6rem; border-radius: .45rem; border: 2px solid var(--o); background: #fff; display: grid; place-items: center; flex: none; }
.pick .box .ic { width: 1rem; height: 1rem; opacity: 0; }
.pick.on { border-color: #9cc873; background: linear-gradient(180deg, #effbe0, #d9efbf); }
.pick.on .box { background: var(--green); }
.pick.on .box .ic { opacity: 1; }

/* ---------------------------------------------------------------- toasts, confirm, coach, overlays */
.toasts { position: absolute; top: 5.4rem; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: .45rem; pointer-events: none; width: max-content; max-width: 92vw; }
.toast { display: flex; align-items: center; gap: .5rem; max-width: 92vw; padding: .5rem 1.1rem .55rem .8rem; border-radius: .8rem; background: rgba(14, 9, 4, .8); border: 2px solid rgba(0, 0, 0, .8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .3); font: .9rem/1.2 var(--font-d); color: #fff; text-shadow: var(--ts); animation: toast-in .4s var(--spring) both; pointer-events: none; text-align: center; }
.toast .ic { width: 1.6rem; height: 1.6rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.toast.error { color: #ff6a58; }
.toast.good { color: #b8ff7a; }
.toast.warn { color: #ffc15a; }
.toast.gem { color: #8ff5b0; }
.toast.out { animation: toast-out .28s ease-in both; }
.toast .x2 { font-size: .8rem; color: #fff; }
.confirm .panel-body { text-align: center; }
.confirm .big-ic { width: 4.8rem; height: 4.8rem; margin: .3rem auto .7rem; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.confirm p { margin: 0; font: 700 1rem/1.45 var(--font-b); color: var(--ink-2); }
.confirm .panel-foot { justify-content: center; }
.panel .mascot { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.panel .mascot .pt { border-radius: 50%; border-width: 3px; }

.coach { position: absolute; left: 50%; bottom: 8.6rem; z-index: 45; display: flex; align-items: flex-end; gap: .4rem; width: min(31rem, calc(100% - 2 * var(--edge)));
  transform: translateX(-50%); pointer-events: auto; animation: coach-in .45s var(--spring) both; }
.coach.top { bottom: auto; top: 6.5rem; }
.coach .mascot { flex: none; width: 5.2rem; height: 5.2rem; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); animation: float 2.8s ease-in-out infinite; }
.coach .mascot .pt { border-radius: 50%; border-width: 3px; }
.coach .bubble { position: relative; flex: 1; padding: .75rem .95rem .8rem; background: linear-gradient(180deg, #fffdf6, var(--parch)); border: 3px solid var(--o); border-radius: 1rem 1rem 1rem 4px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), var(--shadow-panel); }
.coach .bubble h5 { margin: 0 0 .3rem; font: .98rem var(--font-d); font-weight: 400; color: #fff; text-shadow: var(--ts); }
.coach .bubble p { margin: 0; font: 700 .95rem/1.4 var(--font-b); color: var(--ink-2); }
.coach .bubble .row { justify-content: space-between; margin-top: .55rem; }
.coach .steps { display: flex; gap: .3rem; }
.coach .steps i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--parch-deep); border: 1.5px solid rgba(0, 0, 0, .35); }
.coach .steps i.on { background: var(--green); }
.coach .skip { font: 800 .78rem var(--font-b); color: var(--ink-3); text-decoration: underline; }
.pointer { position: absolute; z-index: 46; width: 3.2rem; height: 3.2rem; margin: -3.4rem 0 0 -1.6rem; pointer-events: none; animation: bob .9s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.pointer svg { width: 100%; height: 100%; }
.tut-glow { animation: tut-glow 1.3s ease-in-out infinite !important; }

.attack-alert { position: absolute; inset: 0; z-index: 55; display: grid; place-items: center; background: rgba(60, 8, 4, .66); pointer-events: auto; animation: fade-in .3s both; }
.attack-alert .box { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: 0 1rem; }
.attack-alert .ic { width: 6rem; height: 6rem; animation: tick .6s ease-in-out infinite alternate; }
.attack-alert h2 { margin: 0; font: 1.8rem var(--font-d); font-weight: 400; color: #fff; text-shadow: var(--ts); }
.attack-alert p { margin: 0; font: 1.3rem var(--font-d); color: #ffc9bf; text-shadow: var(--ts); }

/* ---------------------------------------------------------------- shop: category tiles, card rows, wallet */
.shop .panel-body { background-color: #4a321c; background-image: radial-gradient(rgba(0, 0, 0, .18) 1px, transparent 1.6px), radial-gradient(120% 80% at 50% 0%, rgba(255, 210, 140, .16), rgba(0, 0, 0, 0) 60%);
  background-size: 10px 10px, 100% 100%; box-shadow: inset 0 6px 14px rgba(0, 0, 0, .35); scrollbar-color: #8a6a44 transparent; }
.shop .panel-body::-webkit-scrollbar-thumb { background: #8a6a44; border-color: #4a321c; }
.shop .tabs { display: none; }
.shop .section-title .aside { color: #e9d7b0; }
.shop-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 42%), 1fr)); gap: 1rem; padding: .3rem .2rem .6rem; }
.cat { position: relative; aspect-ratio: 4 / 5; border: 3px solid var(--o); border-radius: 1.1rem; overflow: visible; isolation: isolate;
  background: radial-gradient(90% 70% at 50% 38%, var(--c1, #ffe6a8) 0%, var(--c2, #d9a24a) 70%, var(--c3, #9a6424) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -5rem 3rem -3rem rgba(0, 0, 0, .25), 0 5px 0 rgba(0, 0, 0, .5), 0 12px 18px rgba(0, 0, 0, .35);
  transition: transform .2s var(--spring); animation: pop-in .4s var(--spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
.cat:active { transform: translateY(3px) scale(.98); }
@media (hover: hover) { .cat:hover { transform: translateY(-4px); } }
.cat-art { position: absolute; left: 6%; right: 6%; top: 6%; bottom: 3.1rem; pointer-events: none; }
.cat-art .spr { position: absolute; }
.cat-art .spr > .ci, .cat-art .spr > svg { width: 100%; height: 100%; }
.cat-art .spr > .ci > img, .cat-art .spr > svg { object-position: 50% 100%; filter: drop-shadow(0 5px 3px rgba(30, 15, 0, .4)); }
.cat-art .spr.c { left: 17%; right: 17%; bottom: 0; height: 70%; z-index: 2; }
.cat-art .spr.l { left: -2%; width: 50%; bottom: 22%; height: 52%; }
.cat-art .spr.r { right: -2%; width: 50%; bottom: 22%; height: 52%; }
.cat-treasure .cat-art .spr.l, .cat-treasure .cat-art .spr.r { width: 40%; height: 40%; bottom: 30%; }
.cat-treasure .cat-art .spr.c { left: 24%; right: 24%; height: 64%; bottom: 4%; }
.cat-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: .55rem .3rem .6rem; border-radius: 0 0 .85rem .85rem; text-align: center;
  font: 1.02rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); background: linear-gradient(180deg, rgba(20, 12, 5, 0), rgba(20, 12, 5, .78) 45%); }
.cat .dot { z-index: 4; top: -.6rem; right: -.6rem; min-width: 1.7rem; height: 1.7rem; font-size: .8rem; background: linear-gradient(#b4f26a, #4fae1c); }
.cat-treasure { --c1: #ffe9ff; --c2: #c47be8; --c3: #6f2e99; }
.cat-economy { --c1: #fff4b8; --c2: #f0b43a; --c3: #a3620d; }
.cat-army { --c1: #ffd9c4; --c2: #de6a45; --c3: #8c2a17; }
.cat-defense { --c1: #e3f1ff; --c2: #6ea6d8; --c3: #2d5a8c; }
.cat-traps { --c1: #eef3d6; --c2: #9aa66a; --c3: #525c2c; }
.shop-row { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: .6rem .3rem 1rem; margin: 0 -.3rem;
  scrollbar-width: thin; scrollbar-color: #8a6a44 transparent; overscroll-behavior-x: contain; }
.shop-row::-webkit-scrollbar { height: 8px; }
.shop-row::-webkit-scrollbar-thumb { background: #8a6a44; border-radius: 99px; }
.scard { flex: none; width: 10.4rem; min-height: 14.2rem; scroll-snap-align: start; padding: .6rem .55rem .55rem; gap: .28rem;
  background: radial-gradient(90% 55% at 50% 42%, #fffef9 0%, #f5ecd6 60%, #e6d6b2 100%); }
.scard .name { font-size: .86rem; min-height: 2.1em; display: grid; place-items: center; }
.scard .built { display: flex; align-items: center; gap: .3rem; font: 800 .74rem var(--font-b); color: var(--ink-2); }
.scard .art { width: 7.2rem; height: 6.4rem; }
.scard .art > .ci > img { object-position: 50% 80%; }
.scard .busyb { width: 1.4rem; height: 1.4rem; margin-left: .15rem; }
.card.scard.locked { background: radial-gradient(90% 55% at 50% 42%, #efece6 0%, #d9d4c9 70%, #c7c0b2 100%); }
.pack .art { display: flex; align-items: flex-end; justify-content: center; }
.pack .pk { position: absolute; width: 58%; height: 58%; }
.pack .pk.k0 { left: 21%; bottom: 8%; z-index: 3; }
.pack .pk.k1 { left: 2%; bottom: 26%; z-index: 2; width: 48%; height: 48%; }
.pack .pk.k2 { right: 2%; bottom: 26%; z-index: 1; width: 48%; height: 48%; }
.pack .pk > .ci > img { filter: drop-shadow(0 3px 2px rgba(30, 15, 0, .35)); }
.pack .amt { font: .86rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.wallet { display: flex; align-items: center; gap: 1.1rem; margin-right: auto; }
.wal { display: inline-flex; align-items: center; gap: .15rem; height: 1.85rem; padding: 0 .6rem 0 .1rem; font: .82rem var(--font-d); color: #fff; text-shadow: var(--ts); background: var(--track); border: 2px solid rgba(0, 0, 0, .8); border-radius: .5rem; }
.wal .ic { width: 1.9rem; height: 1.9rem; margin: -.3rem .05rem -.3rem -.45rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.wal .v { display: inline-block; min-width: 7.3em; }
.wal.gems .v { min-width: 4.7em; }

/* ---------------------------------------------------------------- loading screen */
.loading { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  padding: calc(var(--sat) + 1rem) 1rem calc(var(--sab) + 1rem); overflow: hidden;
  /* the backdrop is a picture of the game itself (art/out -> assets/art/loading.jpg), dimmed toward the edges; the
     green gradient shows until it has arrived */
  background: radial-gradient(ellipse at 50% 40%, rgba(12, 28, 6, .18) 0%, rgba(8, 20, 4, .62) 62%, rgba(4, 10, 2, .86) 100%),
    url(assets/art/loading.jpg) center / cover no-repeat, radial-gradient(ellipse at 50% 38%, #86cf57 0%, #4f9d31 42%, #1d4411 100%);
  transition: opacity .6s ease, visibility .6s; }
.loading::before { content: ''; position: absolute; left: 50%; top: 38%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; opacity: .09; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .6) 0deg 8deg, transparent 8deg 22deg); animation: spin 90s linear infinite; will-change: transform; }
.loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; transform: rotate(-3deg); animation: logo-in .9s var(--spring) both; }
.logo .ic { width: 6rem; height: 6rem; margin-bottom: -.9rem; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .3)); }
.logo h1 { margin: 0; padding: 0 .1em .12em; font: clamp(2.6rem, 9vw, 5.2rem)/1.05 var(--font-d); font-weight: 400; color: #ffd640; text-shadow: var(--ts), 0 .3em .5em rgba(0, 0, 0, .35); }
.logo .tag { font: clamp(.7rem, 2.2vw, .95rem) var(--font-d); letter-spacing: .12em; color: #fff; text-shadow: var(--ts); }
.load-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: .65rem; width: min(24rem, 78vw); }
.load-bar { position: relative; width: 100%; height: 1.5rem; background: rgba(0, 0, 0, .5); border: 3px solid var(--o); border-radius: .6rem; overflow: hidden; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.load-bar i { position: absolute; inset: 0 auto 0 0; overflow: hidden; width: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, #d8ff98, #86d13a 50%, #4c8f1a); transition: width .45s var(--out); }
.load-bar i::after { content: ''; position: absolute; inset: 0 0 0 -28px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 20px); animation: stripes .8s linear infinite; }
.load-status { font: 1rem var(--font-d); color: #fff; text-shadow: var(--ts); }
.load-tip { max-width: 26rem; text-align: center; font: 700 .92rem/1.4 var(--font-b); color: #eaffda; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); min-height: 2.6em; }
.load-err { display: none; flex-direction: column; align-items: center; gap: .7rem; }
.loading.failed .load-err { display: flex; }
.loading.failed .load-bar i { background: linear-gradient(var(--danger-hi), var(--danger)); }

/* ---------------------------------------------------------------- generic bars */
.bar { position: relative; height: .95rem; background: rgba(59, 42, 26, .2); border-radius: .4rem; overflow: hidden; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .2); }
.bar > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, #d2ff95, var(--green) 55%, var(--green-lo)); transition: width .9s linear; }
.bar > i::after { content: ''; position: absolute; left: 3px; right: 3px; top: 2px; height: 28%; border-radius: 3px; background: rgba(255, 255, 255, .4); }
.bar.blue > i { background: linear-gradient(180deg, #c4ebff, var(--blue) 55%, var(--blue-lo)); }
.bar.gold > i { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); }
.bar.red > i { background: linear-gradient(180deg, var(--danger-hi), var(--danger) 55%, var(--danger-lo)); }
.bar.purple > i { background: linear-gradient(180deg, var(--elixir-hi), var(--elixir) 55%, var(--elixir-lo)); }
.bar.dark { background: var(--track); border: 2px solid rgba(0, 0, 0, .8); }
.bar .bl { position: absolute; inset: 0; display: grid; place-items: center; font: .66rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }

/* ---------------------------------------------------------------- responsive */
/* ---------------------------------------------------------------- the Bank (gems are the game's coin) */
.bank .bal { display: flex; flex-direction: column; gap: .45rem; }
.bank .bal .big { display: flex; align-items: center; gap: .55rem; font: 2.1rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); }
.bank .bal .big .ic { width: 2.9rem; height: 2.9rem; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.bank .bal .big .tk { font-size: 1rem; color: #b8ff7a; align-self: flex-end; padding-bottom: .25rem; }
.bank .hint b { font-family: var(--font-d); font-weight: 400; color: var(--ink); }
.bank .soon { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; font: 800 .86rem/1.35 var(--font-b); color: #6b4a12; background: #ffe9a8; border: 2px solid #d9a93a; border-radius: .7rem; }
.bank .soon .ic { width: 1.5rem; height: 1.5rem; flex: none; }
.bank .wd { display: flex; flex-direction: column; gap: .7rem; }
.bank .wd .row { align-items: stretch; }
.bank .wd .row .field { flex: 1 1 auto; min-width: 0; }
.bank .wdl { margin-top: .6rem; }
.bank .wdr { padding: .45rem .7rem .45rem .9rem; }
.bank .wdr .amt { font: .9rem var(--font-d); color: var(--ink); white-space: nowrap; }
.bank .tag { flex: none; padding: .28rem .6rem; font: .72rem/1 var(--font-d); color: #fff; text-shadow: var(--ts); text-decoration: none; background: #9a8a6a; border: 2px solid var(--o); border-radius: .55rem; white-space: nowrap; }
.bank .tag.ok, .bank .tag.sent { background: linear-gradient(180deg, var(--green-hi), var(--green)); }
.bank .tag.queued, .bank .tag.sending { background: linear-gradient(180deg, var(--gold-hi), #f2a31a); }
.bank .tag.failed, .bank .tag.refunded { background: linear-gradient(180deg, #c9c2b3, #9d9585); }
.bank .paytable { display: grid; grid-template-columns: repeat(8, 1fr); gap: .35rem; margin-bottom: .7rem; }
.bank .pc { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem .1rem .5rem; background: linear-gradient(180deg, #fbf8ef, #efe6d1); border: 2px solid var(--parch-edge); border-radius: .6rem; }
.bank .pc .th { font: 800 .66rem var(--font-b); color: var(--ink-3); white-space: nowrap; }
.bank .pc b { font: .92rem/1 var(--font-d); font-weight: 400; color: var(--ink); }
.bank .pc.me { background: linear-gradient(180deg, #d9f7b0, #b6e67a); border-color: var(--green-lo); box-shadow: 0 2px 0 var(--green-lo); }
.bank .stats2 { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.bank .stats2:last-child { margin-bottom: 0; }
.bank .hint a { color: var(--blue-lo); font-weight: 800; }
@media (max-width: 600px) { .bank .paytable { grid-template-columns: repeat(4, 1fr); } }

.intro-list { display: flex; flex-direction: column; gap: .6rem; }
.intro-row { display: grid; grid-template-columns: 2.6rem 1fr; gap: .7rem; align-items: center; padding: .55rem .7rem; background: linear-gradient(180deg, #fbf8ef, #efe6d1); border: 2px solid var(--parch-edge); border-radius: var(--r-sm); }
.intro-row .ic { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.intro-row b { display: block; font: .98rem/1.2 var(--font-d); font-weight: 400; color: var(--ink); }
.intro-row p { margin: .15rem 0 0; font: 700 .84rem/1.35 var(--font-b); color: var(--ink-2); }

@media (max-width: 760px) {
  :root { --edge: .6rem; }
  .hud-tc { top: 8.5rem; left: var(--edge); transform: none; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .res { width: 10.4rem; }
  .res.gems { width: 7.8rem; }
  .res .val { font-size: .9rem; }
  .bigbtn { width: 4.9rem; height: 4.9rem; border-radius: 1.15rem; }
  .bigbtn > .ic { width: 3.3rem; height: 3.3rem; }
  .bigbtn .lbl { font-size: .82rem; }
  .abar { bottom: 6.6rem; max-width: calc(100% - 2 * var(--edge)); }
  #ui.has-sel .rail { opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
  .attack-grid { grid-template-columns: 1fr; }
  .match-card { order: -1; }
  .info-top { grid-template-columns: 6.5rem 1fr; }
  .info-art { width: 6.5rem; height: 6.5rem; }
  .war-cols { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .setting { grid-template-columns: 2.2rem 1fr; }
  .setting > :last-child { grid-column: 1 / -1; }
  .lrow .loot { display: none; }
  .bh-side { bottom: 7.4rem; }
  .wallet { gap: .9rem; }
}
@media (max-width: 600px) {
  .scrim { padding: calc(var(--sat) + .6rem) 0 0; place-items: end center; }
  .panel, .panel.sm, .panel.md, .panel.lg { width: 100%; max-height: 100%; border-radius: 20px 20px 0 0; border-bottom: 0; animation: sheet-in .4s var(--out) both; }
  .panel.tall { height: 100%; }
  .scrim.closing .panel { animation: sheet-out .2s ease-in both; }
  .panel-head { border-radius: 17px 17px 0 0; }
  .panel-title { font-size: 1.2rem; }
  .panel-body { padding-bottom: calc(1.2rem + var(--sab)); border-radius: 0; }
  .panel-foot { border-radius: 0; padding-bottom: calc(.9rem + var(--sab)); }
  .scrim.center { place-items: center; padding: 1rem; }
  .scrim.center .panel { border-radius: var(--r-lg); border-bottom: 3px solid var(--o); animation: panel-in .42s var(--spring) both; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: .75rem; }
  .grid.tight { grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: .65rem; }
  .card .art { width: 4.6rem; height: 4.6rem; }
  .card.unit .art { width: 100%; height: auto; }
  .scard { width: 9.4rem; min-height: 13.2rem; }
  .scard .art { width: 6.4rem; height: 5.6rem; }
  .army-strip { flex-wrap: wrap; }
  .army-cap { width: 100%; }
  .queue-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .lrow { gap: .55rem; padding: .55rem .6rem .55rem .9rem; }
  .lrow .lg { width: 2.2rem; height: 2.2rem; }
  .clan-head { grid-template-columns: 4rem 1fr; }
  .clan-head .bdg { width: 4rem; height: 4rem; }
  .clan-head > :last-child { grid-column: 1 / -1; }
  .rstars .s { width: 4.2rem; height: 4.2rem; }
  .rstars .s:nth-child(2) { width: 5.3rem; height: 5.3rem; }
  .ribbon { font-size: 1.8rem; padding: .5rem 2.2rem .65rem; }
  .wallet { gap: .7rem; }
  .wal { font-size: .74rem; }
  .panel-foot:has(.wallet) { justify-content: center; }
}
/* tall narrow screens: the action bar rides above the bottom buttons */
@media (max-aspect-ratio: 4/5) {
  .abar { bottom: 7rem; }
}
/* short landscape phones */
@media (max-height: 460px) and (orientation: landscape) {
  .hud-tc { top: 1.3rem; left: 50%; transform: translateX(-50%); flex-direction: row; }
  .hud-br { flex-direction: row; }
  .rail { display: grid; grid-template-columns: repeat(2, auto); gap: .5rem; }
  .rbtn { width: 3.1rem; height: 3.1rem; }
  .abar { bottom: .8rem; max-width: calc(100% - 2 * var(--edge) - 30rem); }
  .coach { bottom: 6.8rem; }
  .bh-side { bottom: 6.8rem; }
  .toasts { top: 3.8rem; }
  .cat { aspect-ratio: 5 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- motion (transform / opacity only) */
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(1.2rem) scale(.88); } }
@keyframes panel-out { to { opacity: 0; transform: translateY(.6rem) scale(.95); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } }
@keyframes abar-in { from { opacity: 0; transform: translate(-50%, .9rem); } }
@keyframes act-in { from { opacity: 0; transform: translate3d(0, .6rem, 0) scale(.85); } }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } }
@keyframes rise { from { opacity: 0; transform: translateY(.7rem); } }
@keyframes drop-in { from { opacity: 0; transform: translate(-50%, -1rem); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-.8rem) scale(.85); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-.5rem) scale(.95); } }
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, 1.2rem) scale(.92); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(.4rem); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes busy { 50% { opacity: .1; } }
@keyframes stripes { to { transform: translateX(28px); } }
@keyframes float { 50% { transform: translateY(-.35rem); } }
@keyframes bob { 50% { transform: translateY(-.55rem); } }
@keyframes bob-node { 50% { transform: translate(-50%, -58%); } }
@keyframes tick { to { transform: scale(1.08); } }
@keyframes bump { 50% { transform: scale(1.3); } }
@keyframes shine { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes glow-fade { 50% { opacity: 1; } }
@keyframes star-pop { 0% { transform: scale(2.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(.9) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes star-land { 0% { transform: translateY(-3rem) scale(2.6) rotate(-30deg); opacity: 0; } 55% { transform: scale(.88) rotate(6deg); opacity: 1; } 75% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes ribbon-in { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } }
@keyframes logo-in { from { transform: rotate(-3deg) scale(.4); opacity: 0; } }
@keyframes tut-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 80, 0), 0 4px 0 var(--bl, #9d8358), 0 4px 0 2.5px var(--o); } 50% { box-shadow: 0 0 0 .45rem rgba(255, 214, 80, .8), 0 4px 0 var(--bl, #9d8358), 0 4px 0 2.5px var(--o); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.shake { animation: shake .35s ease-in-out; }
.pop { animation: pop .4s var(--spring); }