/* Tokens from the approved mockup (docs/plan-web-puslapis.md §8). Dark only: the look is the design, not a theme. */
:root {
  --ground: #0D0E0C;
  --surface: #161814;
  --surface-2: #1F221C;
  --line: #2B2F27;
  --line-soft: #22251F;
  --text: #EDEBE0;
  --text-2: #A9AB9D;
  --muted: #8A8D7F;
  --accent: #F0B429;
  --warn: #EF6F50;
  --bar: #7F7A5A;
  --bar-past: #5E6352;
  /* The game's own colours (docs/plan-web-puslapis.md §10.6): rarity per tier (gameConfig rarity → gray … red), skill
     schemes (its skill map: orange, red, gray; health green, hunger deep orange — lightened for this ground), and the
     two sides of a battle as its cards draw them. */
  --r-common: #9CA3AF; --r-uncommon: #10B981; --r-rare: #3B82F6; --r-epic: #A855F7; --r-legendary: #EAB308; --r-mythic: #EF4444;
  --sk-orange: #E0784C; --sk-red: #E25B57; --sk-gray: #8FB5BD; --sk-green: #3FB768; --sk-deep-orange: #E26A4F;
  --side-d: #2F6F7E; --side-a: #B5443A;
  /* The game's money: the coin, a price beside it and every money line or chart, as the game's trade line draws them
     (user, 2026-10-07: one colour everywhere, the charts too), and its trade arrows ⇄ — both with the game's hard
     shadow. common.js wealthChart and game.js WEALTH spell it as #D1D29D (SVG attributes take no var). */
  --coin: #D1D29D; --trade: #7DADB5;
  /* The game's gem — its indigoText, the colour it draws "Your gems" in (bundle module 7634, as the coin is its
     yellowText), with the same hard shadow. */
  --gem: #B4ACDF;
  /* Rikiuotė's compared members, one colour each (roster.js PICK_MAX): none of them gold, which marks the best. */
  --pick-1: #7DADB5; --pick-2: #C4A7F0; --pick-3: #E8A0BF;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Any `display` below outranks the browser's own [hidden] rule, so without this a hidden .card still shows. */
[hidden] { display: none !important; }

body {
  margin: 0 auto;
  max-width: 480px;
  min-height: 100vh;
  padding: max(20px, env(safe-area-inset-top)) 16px 32px;
  background: var(--ground);
  color: var(--text);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* No grey-blue flash on whatever a finger taps: since the page listens for taps (game.js cards), Android painted it on
   everything (2026-10-04). Buttons and chips show their own pressed state. */
html { -webkit-tap-highlight-color: transparent; }
/* A page with a scrollbar and one without centre the same: the bar's place is kept either way. */
html { scrollbar-gutter: stable; }

/* Moving between pages (plan §10.18): the header and the tabs stay where they are and only the page under them
   changes — where the browser knows cross-document view transitions (Chrome, Edge, Safari 18.2+); elsewhere a page
   simply loads, as before. */
@view-transition { navigation: auto; }
header.top { view-transition-name: top; }
nav.tabs { view-transition-name: tabs; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #FFCB52; }

/* The unit's logo, as large as the page lets it (user, 2026-10-09: "kiek įmanoma didesnį", on a phone too): a line of
   its own, the whole width of a phone and its own 828 px centred on a computer. The time and the avatar go beside the
   page's name on a phone (.page-head), and into the tabs' bar on a computer (common.js pinTabs). */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.brand { flex: 1 1 100%; display: flex; justify-content: center; }
.brand .logo { display: block; width: 100%; max-width: 828px; height: auto; }
/* The unit's name, which every page writes, stays for a screen reader: the logo says it only in pictures. */
.brand #mu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fresh { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
/* The viewer's avatar, last in the bar: a tap opens their own member page (plan §10.15). */
.top .fresh { margin-left: auto; }
.top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.top-right .fresh { margin-left: 0; }
.me-link {
  position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
}
.top .fresh:not([hidden]) ~ .me-link { margin-left: 0; }
.me-link[aria-current="page"] { box-shadow: 0 0 0 2px var(--accent); }
.me-link img { width: 100%; height: 100%; object-fit: cover; }
/* The tab switch (common.js unitSwitch; docs/plan-mp-skirtukas.md §3): the other unit's shield in a small circle
   beside the avatar (user, 2026-10-13) — the avatar's size and ring, so the two read as one pair. */
.unit-switch {
  width: 30px; height: 30px; border-radius: 50%; flex: none; padding: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
}
.unit-switch:hover, .unit-switch:focus-visible { box-shadow: 0 0 0 2px var(--accent); outline: none; }
.unit-switch img { width: 22px; height: 22px; object-fit: contain; display: block; }
.me-initial { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14px; color: var(--accent); }
/* The phone layout (body ≤ 480 px wide, so below 900 px) — not only a 360 px phone: on 412–430 px the full time
   still pushed the avatar under the unit's name (2026-10-04). */
@media (max-width: 899.98px) {
  .top { column-gap: 8px; }
  .top-right { gap: 8px; }
  .top .fresh, .page-head .fresh { font-size: 11.5px; gap: 4px; }
  /* Room for the avatar: "kitas ~20:44" stays, the last pass's time goes. */
  .top .fresh-at, .page-head .fresh-at { display: none; }
  .me-link, .unit-switch { width: 26px; height: 26px; }
  .unit-switch img { width: 19px; height: 19px; }
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.fresh.stale { color: var(--warn); }
.fresh.stale .dot { background: var(--warn); }
/* The ring fills from the last pass towards the next; late or old, it turns the warning colour. */
.fresh-ring { flex: none; transform: rotate(-90deg); }
/* A card's clock: the ring alone beside its title, the times in its card (common.js freshDot). */
.fresh-dot { display: inline-flex; vertical-align: -3px; margin-left: 8px; cursor: help; }
.fresh-dot .fresh-t { display: none; }
.fresh-card { display: flex; flex-direction: column; gap: 2px; }
.fresh-card b { color: var(--text); font-weight: 600; }
.pc-best-head { display: inline-flex; align-items: center; }
.fresh-ring .bg { fill: none; stroke: var(--line); stroke-width: 2.5; }
.fresh-ring .fg { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.fresh.late, .fresh.stale { color: var(--warn); }
.fresh.late .fresh-ring .fg, .fresh.stale .fresh-ring .fg { stroke: var(--warn); }
.fresh.idle { color: var(--muted); }
/* A ring keeps filling between its redraws (common.js ringArc): from where it was drawn to full, over the time left. */
.fresh-ring .run, .dual-ring .run { animation: ring-fill linear forwards; }
@keyframes ring-fill { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fresh-ring .run, .dual-ring .run { animation: none; }
}
/* A card's own mark, beside its label: the same ring, smaller. */
.fresh-tag { display: inline-flex; gap: 5px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; }
/* A card label with its own time: on a narrow card the time takes the next line rather than breaking in two. */
.label-row:has(> .fresh-tag) { flex-wrap: wrap; row-gap: 4px; }
.fresh-tag .fresh-ring { width: 13px; height: 13px; }

h1 {
  margin: 12px 0 4px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: 0.02em;
}
/* Every page's name on a line of its own, and on a phone the pass's time and the avatar at its right, level with the
   name (common.js pinTabs; user, 2026-10-10: under the logo they hung "labai ore"). No subtitle beside it. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 12px 0 4px; }
.page-head h1 { margin: 0; min-width: 0; line-height: 1.25; }
/* As tall as the name's first line, its contents centred in it: a name long enough to take two lines (a contest's)
   keeps the two beside its first, not between its lines. */
.page-head .top-right { height: calc(30px * 1.25); }
.sa-head { max-width: 760px; margin-left: auto; margin-right: auto; }
.hello { margin: 0 0 16px; color: var(--text-2); }

.grid { display: flex; flex-direction: column; gap: 12px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.card p { margin: 0; line-height: 1.45; }
/* A battle opened from Discord (?musis=, showLinkedBattle in common.js; plan §10.22): a ring that holds, then fades. */
.card.linked { animation: linked 4s ease-in; scroll-margin-top: 12px; }
@keyframes linked {
  0%, 50% { outline: 2px solid var(--accent); outline-offset: 2px; }
  100% { outline: 2px solid transparent; outline-offset: 2px; }
}
/* A fixed place for a card its own watch draws (Apžvalga's contest and trade): no box of its own, so the card lays out
   as its parent's child — and a refresh finds the old card there to keep (redrawKeeping, common.js). */
.card-slot { display: contents; }
.label {
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.14em;
  color: var(--muted);
}
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.headline { display: flex; align-items: baseline; gap: 10px; }
.big { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 46px; line-height: 1; }
.delta { font-size: 15px; font-weight: 600; color: var(--accent); }
.delta.down { color: var(--warn); }
.rule { height: 1px; background: var(--line); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pair > div { display: flex; flex-direction: column; gap: 2px; }
.muted { font-size: 13px; color: var(--muted); }
.muted-2 { color: var(--text-2); }
.stat { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 20px; }

/* Bar heights are set in px by app.js (CHART_PX), so the tallest week is exactly the chart's height. */
.chart { display: flex; gap: 8px; align-items: flex-end; }
.chart .column {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px;
}
.chart .value { font-size: 13px; font-weight: 600; color: var(--text-2); }
.chart .bar { width: 100%; background: var(--bar-past); border-radius: 2px 2px 0 0; }
.chart .date { font-size: 12px; color: var(--muted); }
.chart .current .value { color: var(--accent); }
.chart .current .bar { background: var(--accent); }

.wide-only { display: none; }

/* One row per level: the number, a bar as long as its head count, and who is on it. */
.level-rows { display: flex; flex-direction: column; gap: 8px; }
.level-row { display: grid; grid-template-columns: 26px 56px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.level-row .lvl { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 16px; text-align: right; }
.level-row .count { align-self: center; }
.level-row .bar { display: block; height: 8px; border-radius: 2px; }
.level-row .names { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.level-row .names .me { color: var(--accent); font-weight: 600; }

.error { color: var(--warn); }
.warn { color: var(--warn); }
.accent { color: var(--accent); }
.strong { font-weight: 600; }

/* Pages: a bar pinned to the bottom on a phone, tabs under the header on a computer. */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  /* Eight tabs on a 360 px phone (seven until 2026-10-25, § Lenktynės): each as wide as its own label plus an equal
     share of what is left, so "Straipsniai" fits beside "Loot" where equal columns cut it (2026-10-02). */
  display: flex;
  height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: #121410; border-top: 1px solid var(--line);
}
.tabs > a {
  flex: 1 1 auto; min-width: 0; padding: 0 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.tabs > a[aria-current="page"] { color: var(--accent); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent); }
body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* Mūšiai */
.battle-grid { display: flex; flex-direction: column; gap: 12px; }
.battles { display: flex; flex-direction: column; gap: 12px; }
.battle-cards { display: flex; flex-direction: column; gap: 12px; }
.chip {
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  padding: 3px 8px; border-radius: 3px; background: var(--surface-2); color: var(--text-2);
}
.chip.war { background: #3A2019; color: #F28A70; }
.chip.resistance { background: #3A2F12; color: var(--accent); }
/* The game's icons (game.js): one size rule, colour from the text around them. */
.gi { width: 1em; height: 1em; fill: currentColor; flex: none; }
.gi.mirror { transform: scaleX(-1); }
/* A CC amount (game.js coinAmount, docs/plan-ikonos.md §2): the coin before it at 80 % of the text (user, 2026-10-08,
   from 100 / 80 / 65 %: at the text's full size it outweighed the digits), the number in the line's own font and
   colour — a green plus stays green. Two classes on the number, so a card's own `X b` rule further down (.pv-num b …)
   cannot recolour it; a card sizes the coin with its own `X .gi`, which comes later. */
/* the camel race's points (common.js CACTUS_SVG): the pixel saguaro at the text's own size */
.cactus { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; image-rendering: pixelated; }
.coin-amt { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; vertical-align: -1px; }
.coin-amt .gi { width: 0.8em; height: 0.8em; color: var(--coin); filter: drop-shadow(1px 1px 0 #000); }
.coin-amt .coin-n { font: inherit; color: inherit; }
.sk-orange { color: var(--sk-orange); }
.sk-red { color: var(--sk-red); }
.sk-gray { color: var(--sk-gray); }
.r-common { --rc: var(--r-common); } .r-uncommon { --rc: var(--r-uncommon); } .r-rare { --rc: var(--r-rare); }
.r-epic { --rc: var(--r-epic); } .r-legendary { --rc: var(--r-legendary); } .r-mythic { --rc: var(--r-mythic); }

/* A battle as the game's card draws it: defender left, attacker right. */
/* The rounds as the game draws them (battles.js roundTiles): a won one on its winner's colour, the live one dashed. */
.b-round-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: -4px 0 0; }
.b-rtile {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 5px;
  background: var(--surface-2); color: var(--text); font: 700 14px 'Chakra Petch', sans-serif;
}
.b-rtile.d { background: color-mix(in srgb, var(--side-d) 35%, transparent); box-shadow: inset 0 -2px 0 var(--side-d); }
.b-rtile.a { background: color-mix(in srgb, var(--side-a) 35%, transparent); box-shadow: inset 0 -2px 0 var(--side-a); }
.b-rtile-flag { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }
.b-rtile.live { background: none; border: 1px dashed #6B6E62; color: var(--text-2); }
.b-live { width: 7px; height: 7px; border-radius: 50%; background: #E5534B; }
.b-region { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; }
.b-region .gi { width: 16px; height: 16px; color: var(--accent); }
.b-from { text-align: center; margin-top: -8px; font-size: 13px; }
.b-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.b-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.b-side.right { justify-content: flex-end; }
.b-flag { width: 34px; height: 24px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); flex: none; }
.b-name { font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-rounds { display: flex; align-items: center; gap: 8px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; }
.b-type { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.b-type-shield { position: absolute; inset: 0; width: 30px; height: 30px; color: #343A30; }
.b-type-i { position: relative; width: 14px; height: 14px; color: var(--text-2); }
.b-points { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-2); }
.b-pts { display: flex; flex-direction: column; gap: 3px; width: 40%; }
.b-pts.right { align-items: flex-end; }
.b-pts-line { display: flex; align-items: center; gap: 4px; }
.b-pts-line .gi { width: 13px; height: 13px; color: var(--muted); }
.b-pts-line b { color: var(--text); }
.b-pts-track { display: flex; width: 100%; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.b-pts.right .b-pts-track { justify-content: flex-end; }
.b-pts-fill { display: block; height: 100%; }
.b-pts.d .b-pts-fill { background: var(--side-d); }
.b-pts.a .b-pts-fill { background: var(--side-a); }
.b-goal { font-size: 12px; }
.b-dmg { display: flex; flex-direction: column; gap: 5px; }
/* The numbers over the bar, each side over its own half: they always fit, however thin a share. */
.b-dmg-nums { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: 8px; }
.b-dmg-nums > .muted-2 { font-size: 12px; }
.b-dmg-n { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font-family: 'Chakra Petch', sans-serif; }
.b-dmg-n.right { justify-content: flex-end; }
.b-dmg-n b { font-size: 17px; font-weight: 700; }
.b-dmg-n .gi { width: 14px; height: 14px; align-self: center; color: var(--side-d); }
.b-dmg-n.right .gi { color: var(--side-a); }
.b-dmg-bar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--ground); }
.b-dmg-d, .b-dmg-a { min-width: 2px; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px); }
.b-dmg-d { background-color: var(--side-d); }
.b-dmg-a { flex: 1; background-color: var(--side-a); }
.b-pct { font-size: 13px; color: var(--text-2); }
/* Where to hit: the side our unit or country ordered. */
.b-side.ordered .b-name { color: var(--accent); font-weight: 600; }
.b-side.ordered .b-flag { box-shadow: 0 0 0 2px var(--accent); }
.b-orders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: -4px; }
.b-order { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.b-order.right { align-items: flex-end; text-align: right; }
.b-order-h { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--accent); }
.b-order-h .gi { width: 14px; height: 14px; flex: none; }
.b-order-who { font-size: 11.5px; color: var(--muted); }
.b-noorder { grid-column: 1 / -1; text-align: center; font-size: 13px; }
/* Our members under the side they hit for. */
.b-members { display: flex; flex-direction: column; gap: 8px; }
.b-mtoggle {
  min-height: 40px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.b-mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.b-mcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Each side under its own flag, the other half empty when nobody of ours hit for it (battles.js membersBlock). */
.b-mcol.d { grid-column: 1; }
.b-mcol.a { grid-column: 2; }
.b-mhead { font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; }
.b-mcol.d .b-mhead { color: color-mix(in srgb, var(--side-d) 60%, #fff); }
.b-mcol.a .b-mhead { color: color-mix(in srgb, var(--side-a) 60%, #fff); }
.b-mrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 34px; color: var(--text); text-decoration: none; border-top: 1px solid var(--line-soft); }
.b-mname { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-mrow b { font-family: 'Chakra Petch', sans-serif; font-size: 14px; }
.b-mface { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--muted); }
.b-mface-img { width: 100%; height: 100%; object-fit: cover; }
/* Half a 360 px card: a little closer, so an eleven-letter name ("StoraMiaska") stays whole. */
@media (max-width: 379.98px) {
  .b-mlist { column-gap: 8px; }
  .b-mrow { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 5px; }
  .b-mface { width: 22px; height: 22px; }
}
.card .legend { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); margin-top: -6px; }
.contract { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.contract-head { display: flex; justify-content: space-between; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.contract .track { height: 8px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.contract .fill { height: 100%; background: var(--accent); }
.battle-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border-top: 1px solid var(--line-soft); padding-top: 10px;
}
.ours { display: flex; flex-direction: column; gap: 1px; }
.ours .rank { font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-2); }
.battle-foot .button { min-height: 40px; }

.button {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 4px; font-weight: 600;
}

/* A computer: two columns, and Apžvalga's bands three and four across. One width for every page, so the header and the tabs stand still from page to page (user, 2026-10-04: "vaikštant per puslapius
   šokinėja vaizdas"); until then Apžvalga, Mūšiai and Straipsniai were 1120 px, the rest 1400. */
@media (min-width: 900px) {
  body { max-width: 1400px; padding-left: 32px; padding-right: 32px; }
  /* A page wider than that (Žvalgyba, Kontraktų rinka — 1760 px) widens only what is under the tabs: the logo and the
     tabs keep the common 1336 px in the middle (user, 2026-11-11: "nereikia tampyt menu juostos ir logotipo"). Their
     boxes must not change either — the move between pages (view transition above) stretches a box's picture to its
     new width, so a wider bar showed as the logo and the tabs growing and shrinking. */
  header.top, nav.tabs { max-width: 1336px; margin-left: auto; margin-right: auto; }
  .grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    grid-template-areas: "trade trade" "week levels";
  }
  #trade-card { grid-area: trade; }
  #week { grid-area: week; }
  #levels { grid-area: levels; }
  .wide-only { display: block; }
  .narrow-only { display: none !important; }

  body { padding-bottom: 32px; }
  .tabs {
    position: sticky; top: 0; display: flex; gap: 4px; height: auto; padding: 0; margin: 16px 0 0;
    background: none; border-top: none; border-bottom: 1px solid var(--line); transition: transform .2s ease;
  }
  .tabs > a { flex: none; flex-direction: row; gap: 8px; min-height: 44px; padding: 0 16px; font-size: 15px; }
  .tabs > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
  /* The tabs follow the page (common.js pinTabs, plan §10.21) and carry the time and the avatar at their right, the
     header being the logo's; pinned and away, a yellow line is left at the top, and the pointer on it (a band taller
     than the line) brings them back. The tabs' own rules reach only the nav's own links (`.tabs > a`): the avatar is a
     link too. */
  /* The second and third shadow: the bar's ground 180 px out on both sides — on a wider page ((1696 − 1336) / 2) the
     page's sides scroll under the pinned bar too; on the others it lies on empty ground. A shadow, not a wider box:
     it adds no sideways scroll. */
  .tabs-pinned .tabs {
    background: var(--ground);
    box-shadow: 0 10px 16px -12px #000, -180px 0 var(--ground), 180px 0 var(--ground);
  }
  .tabs .top-right { margin-left: auto; padding-left: 16px; }
  /* Seven tabs take 794 px, the whole time and the avatar another 200: below 1100 px the ring stands alone, and below
     960 the tabs close up, or the bar runs wider than the page (measured 2026-10-06). */
  @media (max-width: 1099.98px) {
    .tabs .fresh-t { display: none; }
  }
  @media (max-width: 959.98px) {
    .tabs > a { padding: 0 12px; }
    .tabs .top-right { padding-left: 8px; }
  }
  .tabs::after {
    content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 14px;
    border-top: 3px solid var(--accent); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .tabs-away .tabs { transform: translateY(-100%); box-shadow: none; }
  .tabs-away .tabs::after { opacity: 1; pointer-events: auto; }
  .tabs-away .tabs:hover, .tabs-away .tabs:has(:focus-visible) {
    transform: none; box-shadow: 0 10px 16px -12px #000, -180px 0 var(--ground), 180px 0 var(--ground);
  }
  .tabs-away .tabs:hover::after, .tabs-away .tabs:has(:focus-visible)::after { opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .tabs, .tabs::after { transition: none; }
  }
  .battle-cards { display: grid; gap: 12px; }
}

/* ── Rikiuotė ─────────────────────────────────────────────────────────────────────────────────
   One DOM for both sizes: on a phone a member is a card (grid areas), on a computer the same row is a table row —
   the two wrapper groups (.g-bars, .g-dmg) become `display: contents` so their cells join the table's columns. */
#roster-page { display: flex; flex-direction: column; gap: 12px; }
#roster-page[hidden] { display: none !important; }
.summary { gap: 12px; }
.summary-left { display: flex; flex-direction: column; gap: 6px; }
/* The unit's damage: GALI MUŠTI — one row, "Gali" by moment, the warriors' bars under it (2026-10-23) — and PADARĖ
   with the week by day, both named as the table's groups and underlined the same way. */
.sum-dmg { display: grid; gap: 20px; }
.sum-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sum-group { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); padding-bottom: 3px;
  border-bottom: 1px solid var(--line); }
/* GALI MUŠTI with the model's accuracy at the right of its line (plan §5a). */
.sum-group-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sum-acc { font-weight: 500; letter-spacing: 0; color: var(--muted); }
.sum-acc.low, .acc-low { color: var(--warn); }
/* "be 2 · ↺ visi" beside GALI MUŠTI while members are taken out of it — in the title's line, so the card keeps its
   height; the bonus reset's look. */
.sum-can-t { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.sum-skip {
  border: none; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 500; letter-spacing: 0;
  white-space: nowrap; cursor: pointer;
}
.sum-can { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 16px; align-items: baseline; }
.sum-can > * { text-align: right; }
.sum-can .stat { font-size: 26px; color: var(--accent); }
/* LIKUSI DIENA (.rest-day — .day is the week's columns) under it: the rest of the game day in steps of three hours — the same three columns, so a step stands under
   "Dabar", "Po regen", "Per 3 val."; its rows grow with the hours left (2026-11-03, user's pick A). */
.rest-day { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.rest-day[hidden] { display: none; }
.rest-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.rest-step { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.rest-step .stat { font-size: 20px; color: var(--accent); }
.sum-did { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.sum-did > div { display: flex; flex-direction: column; gap: 2px; }
.sum-did .stat { font-size: 26px; }
/* The warriors' HP and food together, the regen's share at the right, its words over the fill (user's reference: the
   game site's "Combat readiness"). */
.army { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.army[hidden] { display: none; }
.army-bar {
  position: relative; display: flex; justify-content: space-between; align-items: center; height: 26px;
  padding: 0 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; font-size: 13px;
}
.army-fill { position: absolute; inset: 0 auto 0 0; }
.army-bar.hp .army-fill { background: #3C6B3F; }
.army-bar.food .army-fill { background: #7A3A24; }
.army-l, .army-r { position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.army-l b { font-family: 'Chakra Petch', sans-serif; font-size: 14px; }
.army-of { color: var(--text-2); }
.army-r { color: var(--text-2); font-size: 12px; }
.army-i { width: 14px; height: 14px; }
.army-bar.hp .army-i { color: #8FE3A8; }
.army-bar.food .army-i { color: #F2A27E; }
/* Who a commander calls: the two groups' pills and the copy buttons on one row — icons, no words, so a phone keeps it
   one row too — the picked group's faces under them (user's pick B, 2026-10-24). */
.call { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.call[hidden] { display: none; }
.call-row { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.call-kind {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 16px;
  border: 1px solid var(--line); background: #12140F; color: var(--text-2); font: inherit; cursor: pointer;
}
.call-kind.on { background: rgba(240, 180, 41, .14); color: var(--accent); border-color: rgba(240, 180, 41, .45); }
.call-kind .gi { width: 16px; height: 16px; }
.call-kind.fresh .gi { color: var(--text-2); }
.call-kind.pill .gi { color: #4ADE80; }
/* The count in the DMG figures' face, a size up and bolder than the pills' words were (user, 2026-10-24). */
.call-kind b { font: 700 17px 'Chakra Petch', sans-serif; line-height: 1; }
/* One row of faces, each 8 px over the one before (CALL_STEP in roster.js), ringed in the card's colour. */
.call-faces { display: flex; align-items: center; height: 30px; overflow: hidden; }
.call-faces > .tr-face { border: 1px solid var(--line); box-sizing: border-box; }
.call-faces > * + * { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.call-more {
  display: inline-flex; align-items: center; justify-content: center; flex: none; height: 28px; min-width: 28px;
  padding: 0 8px; box-sizing: border-box; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line);
  font: 700 13px 'Chakra Petch', sans-serif; color: var(--text-2);
}
.call-none { min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-btns { display: flex; gap: 6px; flex: none; }
/* The last calls' promise and result — two rows' room always (RosterQuery.CALLS). */
.call-log { display: flex; flex-direction: column; gap: 3px; min-height: 40px; font-size: 12px; }
.call-log-row { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.call-btn {
  display: inline-flex; align-items: center; gap: 6px; background: #12140F; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 0 11px; font: 500 13px 'Barlow', sans-serif;
  cursor: pointer; min-height: 32px; white-space: nowrap;
}
.call-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.call-btn:disabled { opacity: .45; cursor: default; }
.call-btn-i { width: 15px; height: 15px; }
.call-btn-i.check { color: #4ADE80; }
/* Where the copy goes, in its own colours: Discord's blurple, the game's burning globe (/warera-logo.png). */
.call-logo { width: 18px; height: 18px; }
.call-logo.discord { color: #5865F2; }
/* The week by day: a column per day, its sum over it, today in the accent, a day to come an empty frame. */
.did-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; margin-top: 6px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.wd-b { width: 100%; max-width: 46px; height: 0; border-radius: 3px 3px 0 0; background: #5A5641; }
.wd.ahead .wd-b { height: 40px; background: none; border: 1px dashed var(--line); border-bottom: 0; }
.wd-v { font: 500 10px 'Chakra Petch', sans-serif; color: var(--text-2); white-space: nowrap; }
.wd-d { font-size: 11px; color: var(--muted); }
.wd.now .wd-b { background: var(--accent); }
.wd.now .wd-v, .wd.now .wd-d { color: var(--accent); }
.did-earned { display: inline-flex; align-items: baseline; gap: 4px; }
.did-num { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.did-rank {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.did-rank[hidden] { display: none; }
.did-rank .gi { width: 12px; height: 12px; color: var(--accent); }
.did-money { display: inline-flex; align-items: baseline; }
.did-earned[hidden] { display: none; }
.did-money.down { color: #EE8A84; }
/* Today by opponent: flag and name, a bar to the first, the sum. Two rows' room always, as TARGET_ROWS in roster.js. */
.sum-sub { font: 600 11px 'Chakra Petch', sans-serif; letter-spacing: 0.08em; color: var(--muted); margin-top: 6px; }
.did-targets { display: flex; flex-direction: column; gap: 6px; min-height: 46px; }
.tg { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.tg-n { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.tg-n > span { overflow: hidden; text-overflow: ellipsis; }
.tg-flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; flex: none; }
.tg-t { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tg-f { display: block; height: 100%; background: #B54A4A; }
.tg b { font-family: 'Chakra Petch', sans-serif; font-size: 14px; }
.chips, .sorts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* A filter pill (game.js filterChip): the game's icon in the filter's colour, as the sorts' pills are round; its name,
   then its count at the right — alike on every width. Tight, so "Nepanaudoti taškai" stays whole in a 360 px phone's
   half (measured 2026-10-10). */
.fchip {
  display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 36px; padding: 0 9px 0 8px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.fchip-i { width: 14px; height: 14px; margin-right: 1px; color: var(--muted); }
.fchip.accent .fchip-i { color: var(--accent); }
.fchip.warn .fchip-i { color: var(--warn); }
.fchip .fchip-l { order: 1; flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchip b { order: 2; font-family: 'Chakra Petch', sans-serif; }
/* Rikiuotė's ten: one row needs 1 282 px (measured 2026-10-10) — from 1360 px they fill it; 900–1359 two even rows of
   five, rather than one left alone on a second line. A phone's two columns are below. */
@media (min-width: 900px) and (max-width: 1359.98px) {
  #chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1360px) {
  #chips .fchip { flex: 1 1 auto; }
}
.fchip.on { border-color: var(--accent); background: #2A2513; color: var(--accent); }
.sorts .pill {
  min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: none;
  color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer;
}
.sorts .pill.on { border-color: var(--accent); color: var(--accent); }
.big-of { font-size: 24px; color: var(--text-2); white-space: nowrap; }
/* The commander's bonus (docs/plan-rikiuote-bonusas.md): − / the number / +, by 5 %. */
.bonus-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-top: 1px solid var(--line-soft);
  padding-top: 12px; }
.bonus-step, .bonus-quick { display: inline-flex; align-items: center; gap: 6px; }
.bonus-quick .pill {
  min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--line); background: none;
  color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bonus-quick .pill.on { border-color: var(--accent); background: #2A2513; color: var(--accent); }
.bstep {
  width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.bstep:disabled { opacity: .4; cursor: default; }
.bonus-box {
  display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--accent); background: #2A2513; color: var(--accent);
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 18px;
}
.bonus-box input {
  width: 2.4em; border: none; background: none; color: inherit; font: inherit; text-align: center; padding: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.bonus-box input::-webkit-inner-spin-button, .bonus-box input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bonus-box input:focus { outline: none; }
.bonus-box:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.bonus-row { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
/* The headquarters' bonus, what the page starts at — a way back to it once the commander set another. */
.bonus-reset { border: none; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 0; }
.bonus-reset:disabled { color: var(--muted); cursor: default; }
#ready-count { white-space: nowrap; }
/* The count over its clock at every width: beside it, the clock's two lines widened the left column and pushed the
   DMG block ~100 px right. Two colours, one per ring and its line — the scan outside, the regen inside. */
.summary .headline { flex-direction: column; align-items: flex-start; gap: 6px; }
.fresh.dual { gap: 8px; }
.dual-ring { flex: none; transform: rotate(-90deg); }
.dual-ring circle { fill: none; stroke-width: 4; }
.dual-ring .bg { stroke: var(--line); }
.dual-ring .scan { stroke: var(--trade); stroke-linecap: round; }
.dual-ring .regen { stroke: var(--accent); stroke-linecap: round; }
.dual-t { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.d-scan { color: var(--trade); }
.d-regen { color: var(--accent); }
.fresh.dual.late .scan, .fresh.dual.stale .scan { stroke: var(--warn); }
.fresh.dual.late .d-scan, .fresh.dual.stale .d-scan { color: var(--warn); }
/* "Skenuoti dabar" — the clock's third line, under its text: past the 34 px ring and its 8 px gap. */
.scan-now { margin: -4px 0 0 42px; text-align: left; }
.scan-now.error { max-width: 200px; color: var(--warn); }

/* A phone lines the controls up (user, 2026-10-01: "atrodo labai išsibarstę"): the count above its note, the filters
   in two even columns with the number on the right, the sorts in three — every button the width of its neighbours. */
@media (max-width: 899.98px) {
  /* The bonus's name over its buttons, the buttons one row across the card (user, 2026-10-10: the name beside them
     sent the quick ones to a line of their own). */
  .bonus-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .bonus-ctl > .bonus-reset { grid-column: 2; grid-row: 1; }
  .bonus-row { grid-column: 1 / -1; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px auto auto; gap: 6px; }
  .bonus-step, .bonus-quick { display: contents; }
  .bonus-row .bstep { width: 100%; }
  .bonus-row .bonus-box { justify-content: center; min-width: 0; }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sorts > .muted { grid-column: 1 / -1; }
  .sorts .pill { padding: 0 6px; }
}

.card.roster { padding: 4px 12px; gap: 0; }
.mrow { border-bottom: 1px solid var(--line-soft); }
.mrow:last-child { border-bottom: none; }
.mrow.open { background: #1B1E18; }
.mline {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px 10px; padding: 12px 4px; align-items: center; cursor: pointer;
}
.mline.mhead { display: none; }
/* The place number under the comparison's tick. */
.c-n { grid-area: n; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.c-num { font-size: 11px; }
.cmp-box {
  position: relative; width: 22px; height: 22px; padding: 0; border-radius: 5px; border: 1.5px solid #5E6352;
  background: transparent; color: var(--ground); font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* A finger's worth around the small box. */
.cmp-box::after { content: ''; position: absolute; inset: -7px; }
.cmp-box:hover:not(:disabled) { border-color: var(--text-2); }
.cmp-box.on { background: var(--pc); border-color: var(--pc); }
.cmp-box:disabled { opacity: 0.3; cursor: default; }
.mrow.picked { box-shadow: inset 3px 0 0 var(--pc); }
/* Armed (roster.js stepMark): an empty box goes straight to "−" — dashed in its colour. */
.cmp-box.armed { border-style: dashed; border-color: var(--warn); }
/* Taken out of GALI MUŠTI: a "−" in the box brings the member back; the rest of the line dimmed. .g-kit and .g-dmg lay
   out no box of their own on a computer, so their cells are dimmed one by one — never the wrapper, or a phone's would
   dim twice. */
.cmp-box.out { border-color: var(--warn); color: var(--warn); font-size: 18px; }
.mrow.skipped .mline > :not(.c-n, .g-kit, .g-dmg), .mrow.skipped :is(.g-kit, .g-dmg) > *, .mrow.skipped .c-num {
  opacity: 0.4;
}
.c-member { grid-area: member; display: flex; align-items: center; gap: 10px; min-width: 0; }
.c-status { grid-area: status; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.g-bars { grid-area: bars; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Its numbers are the line's own cells — the card's areas below, the table's columns. */
.g-dmg { display: contents; }
.g-kit { grid-area: kit; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.c-chev { display: none; }

/* The game's player icon: avatar, buff / debuff pill on its corner, level badge, citizenship flag. */
.ava { position: relative; flex-shrink: 0; width: 38px; height: 38px; margin-left: 8px; }
.ava .avatar { width: 38px; height: 38px; }
.ava-pill {
  position: absolute; top: -5px; left: -7px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #15301F; border: 1px solid #2E7D4A; color: #4ADE80;
}
.ava-pill.off { background: #371717; border-color: #8E2C2C; color: #F87171; }
.ava-pill .gi { width: 12px; height: 12px; }
.ava-lvl {
  position: absolute; left: -7px; bottom: -4px; min-width: 19px; height: 19px; padding: 0 3px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #231A31; border: 1px solid #8F67CB; color: #E9DDFB;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 10px;
}
.ava-flag {
  position: absolute; right: -5px; bottom: -3px; width: 17px; height: 12px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}

/* Variant A: the six stats as the game's icons, in the table. */
.c-stats { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.sc-row { display: flex; gap: 9px; }
.sc { display: inline-flex; align-items: center; gap: 3px; }
.sc .gi { width: 13px; height: 13px; }
.sc b { color: var(--text); font-weight: 600; }

/* Gear: six item icons in rarity frames, durability along the bottom. */
.c-gear { display: flex; gap: 3px; }
.gs {
  position: relative; width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent); background: color-mix(in srgb, var(--rc) 16%, transparent);
}
.gs-img { width: 18px; height: 18px; object-fit: contain; }
.gs-wear { position: absolute; left: 3px; bottom: 2px; height: 2px; border-radius: 1px; }
.gs-wear.ok { background: #8A8260; }
.gs-wear.mid { background: #B89A4A; }
.gs-wear.low { background: var(--warn); }
.bar-i { width: 12px; height: 12px; }
.bar-i.hp { color: var(--sk-green); }
.bar-i.food { color: var(--sk-deep-orange); }

.avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.who .name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow.me .who .name { color: var(--accent); }
.who .meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.who .pts { color: var(--accent); font-weight: 600; }
.chip.ready { background: #3A2F12; color: var(--accent); }
.chip.regen { background: #2A2513; color: #B89A4A; }
.chip.debuff { background: #3A2019; color: #F28A70; }
.chip.eco { background: var(--surface-2); color: var(--text-2); }
.chip.ready-buff { background: #15301F; color: #6FD39A; }
.c-status .sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); text-align: right; }
.sub-i { width: 12px; height: 12px; }
.sub-i.buff { color: #4ADE80; }
.sub-i.off { color: #F87171; }

.bar { display: block; flex-grow: 1; height: 6px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.bar .bar-fill { display: block; height: 100%; }
.bar.ok .bar-fill { background: #8A8260; }
.bar.mid .bar-fill, .bar.food .bar-fill { background: #B89A4A; }
.bar.low .bar-fill { background: var(--warn); }
.c-hp, .c-food { display: flex; align-items: center; gap: 6px; min-width: 0; }
.num-s { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.c-now, .c-h3, .c-today, .week-num { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.lbl { font-size: 11px; color: var(--muted); }
.val { font-family: 'Chakra Petch', sans-serif; font-weight: 600; white-space: nowrap; }
.c-week { margin-left: auto; display: flex; align-items: flex-end; gap: 8px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.spark span { width: 5px; background: #62654F; border-radius: 1px; }
.spark .today { background: var(--accent); }
.spark .gap { background: var(--line); }
/* The days of this week still to come: room kept, nothing drawn but a faint floor. */
.spark .later { background: var(--line-soft); }
/* A column's or a group's card (roster.js TIPS_OF): its name, then one plain sentence. */
.col-tip { display: flex; flex-direction: column; gap: 3px; }
.col-tip b { color: var(--text); font-size: 13px; }

/* The card — a phone's, and two a row below 1360 px (the table keeps its columns): the damage at the right, Dabar the
   biggest, Per 3 val. and Šiandien small under it; the gear and the week at the left (user, 2026-10-10: "čia visas fokusas
   į DMG skaičius" — mock-up C with Dabar on top). The six stats are the opened row's only. Named areas for the
   numbers live only here: the table has none, and an unknown name would make it columns of its own. */
@media (max-width: 1359.98px) {
  .mline { grid-template-areas: "n member status" ". bars bars" ". kit now" ". week now" ". week h3" ". week today"; row-gap: 3px; }
  .g-bars { margin: 5px 0 3px; }
  .g-kit .c-stats { display: none; }
  .c-now { grid-area: now; align-items: flex-end; }
  .c-now .val { font-size: 28px; line-height: 1; }
  .c-h3 { grid-area: h3; }
  .c-today { grid-area: today; }
  .c-h3, .c-today { flex-direction: row; justify-content: flex-end; align-items: baseline; gap: 6px; }
  .c-week { grid-area: week; margin-left: 0; align-self: end; }
}

.mdetail { display: flex; flex-direction: column; gap: 16px; padding: 4px 8px 16px 34px; cursor: default; }
.dcol { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
/* Variant B: one tile per stat in the opened row. */
.stiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stile { background: var(--surface-2); border-radius: 6px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.stile-i { width: 28px; height: 28px; border-radius: 50%; background: var(--ground); display: flex; align-items: center; justify-content: center; flex: none; }
.stile-i .gi { width: 16px; height: 16px; }
.stile-t { display: flex; flex-direction: column; min-width: 0; }
.stile-t .muted { font-size: 11px; }
.stile-t .stat { font-size: 17px; color: var(--text); }
.gtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.gtile {
  position: relative; border-radius: 7px; padding: 5px 4px 5px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
/* A piece of gear's frame in its rarity's colour: the member page's kit (ĮRANGA and EKIPUOTĖ rows) and Prekyba's
   pieces — one rule, phone and computer alike (plan-prekyba §0; user, 2026-10-07: icons one look everywhere). */
.gtile, .pk-it, .pv-item {
  border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, transparent), color-mix(in srgb, var(--rc) 4%, transparent) 70%);
}
.gtile-img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)); }
.gtile-r { font-size: 11px; font-weight: 600; color: var(--rc); }
.gtile-rolls { display: flex; gap: 5px; font-size: 11px; color: var(--text-2); }
/* Hidden kit: what was last seen in the slot, in a red frame (the title says when). */
.gtile.hidden-kit, .gs.hidden-kit { border-color: #D2524A; box-shadow: 0 0 0 1px #D2524A55; }
.gtile.hidden-kit { background: linear-gradient(180deg, #D2524A2E, #D2524A08 70%); }
.kit-tag {
  position: absolute; top: 3px; right: 3px; padding: 0 4px; border-radius: 3px; background: #3A1714; color: #F28A80;
  font-family: 'Chakra Petch', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
}
.kit-none { color: #F28A80; font-weight: 600; font-size: 13px; }
.chip.hiding { background: #3A1714; color: #F28A80; }
.kit-note { color: #F28A80; font-size: 12px; }
/* KOVOS GEARAS (2026-10-23): the battle kit over the worn one, dimmed and smaller, when they differ; the opened row's
   block — 3 hours in each, the week's damage by kit. */
.kit-two { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.kit-now { display: inline-flex; align-items: center; gap: 5px; }
.kit-now .c-gear { opacity: .5; }
.kit-now .gs { transform: scale(.8); transform-origin: left center; margin-right: -4px; }
.kit-now-l { font-size: 10px; color: var(--muted); }
.bkit { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.bkit-fig { display: grid; grid-template-columns: 6.5em auto 1fr; gap: 8px; align-items: center; font-size: 13px; }
.bkit-fig b { text-align: right; font-family: 'Chakra Petch', sans-serif; font-size: 15px; }
.bkit-fig.on b { color: var(--accent); }
.bkit-set { display: grid; grid-template-columns: auto 1fr 3.5em; gap: 8px; align-items: center; font-size: 12px; }
.bkit-set .muted { text-align: right; }
.bkit-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bkit-fill { display: block; height: 100%; background: #8A8260; }
.gtile-rolls span { display: inline-flex; align-items: center; gap: 2px; }
.gtile-rolls .gi { width: 11px; height: 11px; }
.gtile-wear { width: 100%; display: flex; align-items: center; gap: 5px; font-size: 10px; }
.gtile-wear .bar { height: 4px; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 130px; }
.day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 130px; font-size: 11px; }
.dbar { width: 100%; background: #8A8260; border-radius: 2px 2px 0 0; }
.day.today .dbar { background: var(--accent); }
.dbar.gap { background: var(--line); }

/* LYGINAMI NARIAI (plan-web-puslapis.md §10.24): the members' heads, then three panels — stats, gear, damage — each a
   label column and a column per member (--n). A line's highest figure gold, the lower ones "−N"; all the same — dimmed.
   A computer puts the panels side by side, their lines at one height, so Ataka meets Ginklas and Šiandien; a phone
   stacks them. */
#compare { scroll-margin-top: 12px; }
.cmp-clear { background: none; border: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 0; }
.cmp-who { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.cmp-m {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 6px;
  background: var(--surface-2); box-shadow: inset 3px 0 0 var(--pc);
}
.cmp-m .who { flex: 1; }
.cmp-x { background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 4px; }
.cmp-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.cmp-panel { display: flex; flex-direction: column; min-width: 0; }
.cmp-panel > .label { margin-bottom: 4px; }
.cmp-row {
  display: grid; grid-template-columns: 92px repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft); min-height: 36px;
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row.cmp-h { min-height: 0; padding: 2px 0 4px; }
.cmp-hn {
  font-size: 12px; font-weight: 600; color: var(--pc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 2px solid var(--pc); padding-bottom: 2px;
}
.cmp-l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); min-width: 0; line-height: 1.15; }
.cmp-l .gi { width: 14px; height: 14px; flex: none; }
.cmp-v { display: flex; flex-direction: column; min-width: 0; }
.cmp-v b { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; }
.cmp-v b.best { color: var(--accent); }
.cmp-d { font-size: 11px; font-weight: 600; color: var(--warn); white-space: nowrap; }
.cmp-row.same .cmp-v b, .cmp-row.same .cmp-l { color: var(--muted); }
.cmp-g { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-g .gs { width: 28px; height: 28px; }
.cmp-g .gs-img { width: 23px; height: 23px; }
.cmp-g .pk-it-stats { justify-content: flex-start; min-height: 0; gap: 0 6px; font-size: 12px; }
.cmp-g .pk-it-stats .gi { width: 11px; height: 11px; }
.cmp-g .pk-it-stats .best { color: var(--accent); }
.cmp-g .pk-it-stats .low { opacity: 0.6; }
.cmp-sub { margin-top: 12px; }
.cmp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; margin-top: 6px; }
.cmp-day { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; }
.cmp-day.today .muted { color: var(--accent); }
.cmp-dbars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 82px; width: 100%; }
.cmp-dbars span { flex: 1; max-width: 12px; border-radius: 2px 2px 0 0; background: var(--pc); }
.cmp-dbars .gap { background: var(--line); }
/* The foot bar while the card is out of sight: above a phone's tabs, at the foot of a computer's window. The page
   keeps room under its last row for it. */
.cmp-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 11;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid #3A3F33; box-shadow: 0 8px 24px -8px #000;
}
.cmp-bar-names { display: flex; gap: 8px; min-width: 0; flex: 1; overflow: hidden; }
.cmp-bar-n { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--pc); white-space: nowrap; }
.cmp-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--pc); flex: none; }
/* As the bonus's quick buttons: gold once there is something to show. */
.cmp-go {
  min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--accent); background: #2A2513;
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.cmp-go:disabled { border-color: var(--line); background: none; color: var(--muted); cursor: default; }
body:has(#cmp-bar:not([hidden])) { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
/* A phone: the members' heads one under another, a narrower label column, an item's rolls under it. */
@media (max-width: 899.98px) {
  .cmp-who { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cmp-row { grid-template-columns: 84px repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
  .cmp-l { font-size: 11px; gap: 4px; }
  .cmp-l .gi { width: 12px; height: 12px; }
  .cmp-g { flex-direction: column; align-items: flex-start; gap: 3px; }
  .cmp-g .pk-it-stats { gap: 0 4px; font-size: 11px; }
  .cmp-v b { font-size: 14px; }
  .cmp-bar-t { display: none; }
  .cmp-bar-names { gap: 6px; }
}
@media (min-width: 900px) {
  .cmp-row { min-height: 46px; }
  .cmp-row.cmp-h { min-height: 0; }
  .cmp-bar { left: 50%; right: auto; transform: translateX(-50%); bottom: 20px; min-width: 520px; }
  body:has(#cmp-bar:not([hidden])) { padding-bottom: 96px; }
}
/* 900–1099: stats and gear side by side, damage under them across the card; from 1100 all three in a row. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .cmp-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .cmp-panels > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .cmp-panels { grid-template-columns: 1fr 1.15fr 1.25fr; gap: 28px; }
}

/* 900–1359 px: the table's eleven columns do not fit yet (the name column collapses under the bars), so the phone's
   cards, two per row. */
@media (min-width: 900px) {
  .summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 24px 40px; }
  .sum-dmg { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
  .sum-can .stat { font-size: 30px; }
  .rest-step .stat { font-size: 22px; }
  .summary .bonus-ctl { grid-column: 1 / -1; }
  #roster-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .mrow:last-child { border-bottom: 1px solid var(--line-soft); }
  /* A card's members unfolded grows that card only, not its row's neighbours. */
  .battle-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* From 1360 px the table: the name column keeps 190 px, HP and food share one cell, the stats and the gear strip get
   their own (the gear column made 1280 too narrow). */
@media (min-width: 1360px) {
  .sorts { display: none; }
  #roster-rows { display: block; }
  .mrow:last-child { border-bottom: none; }
  .mline {
    grid-template-columns: 28px minmax(190px, 1.4fr) minmax(130px, 1fr) 140px 150px 146px 64px 76px 72px 116px 20px;
    grid-template-areas: none; gap: 10px; padding: 8px 0; min-height: 56px;
  }
  .mline > * { grid-area: auto; }
  .mline.mhead { display: grid; min-height: 40px; cursor: default; border-bottom: 1px solid var(--line); }
  .mline.mhead > * { display: flex; flex-direction: row; align-items: center; min-height: 32px; }
  .mhead > * { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
  .mhead button { background: none; border: none; padding: 0; text-align: left; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; min-height: 32px; }
  .mhead button.on { color: var(--accent); }
  .mhead .c-now, .mhead .c-h3, .mhead .c-today { text-align: right; justify-content: flex-end; }
  .mhead button { white-space: nowrap; }
  /* The damage columns' two groups (roster.js GROUPS) on a line of their own over their names, each underlined across
     both of its columns. */
  .mline.mhead { grid-template-rows: auto auto; row-gap: 0; padding-top: 4px; }
  .mline.mhead > * { grid-row: 2; }
  .mline.mhead > .mgroup {
    grid-row: 1; min-height: 0; justify-content: center; padding-bottom: 3px; border-bottom: 1px solid var(--line);
    font-size: 11px; letter-spacing: 0.08em; cursor: default;
  }
  .mline.mhead > .mgroup.can { grid-column: 7 / 9; }
  .mline.mhead > .mgroup.did { grid-column: 9 / 11; }
  /* "↺ nuimti žymes" over "# Narys" on the groups' line (2026-10-31), no taller than their labels. */
  .mline.mhead > .mreset {
    grid-row: 1; grid-column: 1 / 3; justify-self: start; align-self: end; padding: 0 0 3px; border: none;
    background: none; color: var(--accent); font: inherit; font-size: 12px; line-height: 1; white-space: nowrap;
    cursor: pointer;
  }
  .g-kit, .g-dmg { display: contents; }
  .g-bars { display: flex; flex-direction: column; gap: 6px; }
  .mhead .g-bars { flex-direction: row; gap: 6px; }
  .c-chev { display: block; background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; min-height: 32px; padding: 0; }
  .c-status { align-items: flex-start; }
  .c-status .sub { text-align: left; }
  .lbl { display: none; }
  .c-now, .c-h3, .c-today { flex-direction: row; align-items: baseline; justify-content: flex-end; font-size: 14px; }
  .c-week { margin-left: 0; }
  .mdetail { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr; gap: 24px; padding: 6px 12px 18px 48px; }
  .stiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mdetail .gtiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Nario puslapis (docs/plan-web-puslapis.md §10.6) ─────────────────────────────────────────────────────────────
   The game's player header — avatar with a small level ring, the prestige skull and the flag; the big level ring and
   the military rank ring with its insignia — then gear, rankings, skills, wealth and damage. */
.chip.build-eco { background: #15301F; color: #6FD39A; }
.member-top { display: flex; justify-content: space-between; font-size: 14px; margin: 4px 0 12px; }
#member-page { display: flex; flex-direction: column; gap: 12px; }
#member-page[hidden] { display: none !important; }
.mhero {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; padding: 20px;
  background: linear-gradient(135deg, var(--tint, #243034) 0%, var(--surface) 70%);
}
.ring { position: absolute; inset: 0; }
.ring svg { transform: rotate(-90deg); display: block; }
.hero-ava { position: relative; width: 96px; height: 96px; flex: none; }
.hero-face {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 24px; color: var(--text-2);
}
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-lvl { position: absolute; left: -6px; top: -4px; width: 30px; height: 30px; border-radius: 50%; background: #141414; }
.hero-lvl b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Chakra Petch', sans-serif; font-size: 12px;
}
.skull {
  position: absolute; display: flex; align-items: center; gap: 2px; padding: 1px 5px 1px 3px; border-radius: 9px;
  background: #141414; border: 1px solid; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 11px;
}
.skull .gi { width: 11px; height: 11px; }
.hero-ava .skull { left: 22px; bottom: -6px; }
.hero-flag {
  position: absolute; right: -2px; bottom: 4px; width: 24px; height: 17px; object-fit: cover; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.hero-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 320px; }
.hero-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-name { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.sponsor { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--accent); }
.sponsor .gi { width: 13px; height: 13px; }
.hero-quote { font-size: 15px; color: var(--text-2); font-style: italic; overflow-wrap: anywhere; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.info-chip {
  background: rgba(0, 0, 0, 0.28); border-radius: 6px; padding: 5px 9px; display: flex; flex-direction: column; gap: 1px;
}
.info-chip .muted { font-size: 11px; }
.info-chip b { font-family: 'Chakra Petch', sans-serif; font-size: 14px; }
.info-chip.mu { flex-direction: row; align-items: center; gap: 8px; padding-left: 5px; }
.mu-logo { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }
.mu-t { display: flex; flex-direction: column; gap: 1px; }
.mu-t .muted { font-size: 11px; }
.hero-rings { display: flex; gap: 24px; flex-wrap: wrap; padding-bottom: 8px; }
.big-ring { display: flex; align-items: center; gap: 12px; }
.big-ring-c { position: relative; width: 78px; height: 78px; flex: none; }
.big-ring-n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 28px;
}
.big-ring-c .skull { left: 50%; bottom: -8px; transform: translateX(-50%); }
.insignia {
  position: absolute; left: 17px; top: 17px; width: 44px; height: 44px;
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  filter: drop-shadow(1px 1px 0 #000);
}
.rank-tag {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 1px 7px; border-radius: 9px;
  background: #141414; border: 1px solid; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 11px;
}
.ring-cap { display: flex; flex-direction: column; gap: 2px; }
.ring-cap .muted, .ring-cap .muted-2 { font-size: 11px; }
.ring-cap b { font-family: 'Chakra Petch', sans-serif; font-size: 15px; }
.mgear { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* The game's ranking grid: a card per ranking in its league's colours, the place in a badge in the corner. */
.mrank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rkc {
  --tb: var(--muted); --tc: var(--text-2);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; min-width: 0; padding: 7px 8px 8px 10px;
  border-radius: 6px; border: 1px solid color-mix(in srgb, var(--tb) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tb) 22%, transparent), color-mix(in srgb, var(--tb) 6%, transparent));
}
.rkc.none { border-color: var(--line-soft); background: var(--surface-2); opacity: 0.55; }
.rkc-l { grid-column: 1 / -1; font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkc-v { display: inline-flex; align-items: center; gap: 5px; font-family: 'Chakra Petch', sans-serif; font-size: 17px; white-space: nowrap; }
.rkc-v .gi { width: 14px; height: 14px; color: var(--tc); }
.rkc.none .rkc-v .gi { color: var(--muted); }
.rkc-p {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px;
  border-radius: 9px; background: #0D0E0Ccc; color: var(--tc); font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 11px;
}
.rkc-p .gi { width: 12px; height: 12px; }
@media (min-width: 600px) { .mrank { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mrank { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } }
.mskills { display: flex; flex-direction: column; gap: 14px; }
.mskill-half { display: flex; align-items: flex-start; gap: 12px; }
.mskill-half > .chip { flex: none; margin-top: 2px; }
.mskill-row { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.msk { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }
.msk .gi { width: 16px; height: 16px; }
.w-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.w-total { display: inline-flex; align-items: center; gap: 6px; font-family: 'Chakra Petch', sans-serif; font-size: 22px; }
.w-total .gi { width: 18px; height: 18px; color: var(--coin); }
.w-change { font-size: 14px; font-weight: 600; color: #8FE3A8; }
.w-change.down { color: var(--warn); }
.w-chart { width: 100%; overflow: hidden; }
.w-chart svg { display: block; }
.w-chart .wk { stroke: var(--line); stroke-dasharray: 3 4; }
.w-chart .wk-t { fill: var(--muted); font-size: 10px; font-family: 'Barlow', sans-serif; }
.w-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.w-pill {
  background: var(--surface-2); border-radius: 14px; padding: 4px 10px 4px 8px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  border: 1px solid transparent; color: var(--text); font: inherit; cursor: pointer;
}
/* A part or the whole, chosen: the chart draws it (member.js renderWealth). */
.w-pill.on { border-color: #6B5420; background: #2A2513; }
.w-pill:hover { border-color: var(--line); }
.w-total { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font-weight: 700; }
.w-total.on { border-bottom-color: transparent; }
.w-total:not(.on) { opacity: .75; }
.w-empty { padding: 18px 0 8px; font-size: 13px; }
.w-pill .gi { width: 13px; height: 13px; color: var(--coin); }
.w-pill .muted { font-size: 12px; }
.w-pill b { font-family: 'Chakra Petch', sans-serif; font-size: 13px; }
#damage, #wealth { display: flex; flex-direction: column; gap: 8px; }
#damage > .muted-2, #wealth > .muted-2 { font-size: 12px; }
.mbars { display: grid; gap: 6px; align-items: end; margin-bottom: 6px; }
.mbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; font-size: 11px; min-height: 140px; }
.mbar .muted { white-space: nowrap; }
.mbar-b { width: 100%; background: #8A8260; border-radius: 2px 2px 0 0; }
.mbar.now .mbar-b { background: var(--accent); }
.mbar-b.gap { background: var(--line); }

/* A phone: the two rings side by side, each with its caption under it. */
@media (max-width: 899px) {
  .hero-rings { width: 100%; justify-content: space-around; gap: 12px; }
  .big-ring { flex-direction: column; text-align: center; gap: 14px; }
  .big-ring .ring-cap { align-items: center; }
}
@media (min-width: 900px) {
  .mgear { display: flex; gap: 8px; }
  .mgear .gtile { flex: none; }
  .mskills { flex-direction: row; gap: 24px; }
  .mskill-half { flex: 1; }
  .mskill-half + .mskill-half { border-left: 1px solid var(--line-soft); padding-left: 24px; }
}

/* Member page v2 (user's notes 2026-09-28): gear and skills side by side, the rankings grid across the page, wealth
   with its scale and a pointer readout, damage as two cards side by side. */
.mgrid2 { display: flex; flex-direction: column; gap: 12px; }
.mskills { flex-direction: column !important; gap: 10px; }
.mskill-half + .mskill-half { border-left: none !important; padding-left: 0 !important; }
.mskill-row { gap: 6px 12px; }
.msk { font-size: 14px; }
.msk .gi { width: 14px; height: 14px; }
.mskill-half > .chip { min-width: 52px; text-align: center; }
.w-head { flex-wrap: wrap; align-items: center; }
.w-pill .muted { text-align: left; }
/* A phone: the total and the week's change on one line, the five parts under them as a list — the name by its icon,
   the sum on the right — so none is left alone on a row of a two-column grid (user, 2026-10-04: "čia lygiavimo
   reikia"). The PC keeps them as pills on the total's line. */
@media (max-width: 899px) {
  .w-head .w-pills { order: 3; flex-basis: 100%; flex-direction: column; gap: 0; }
  .w-head .w-pill { padding: 7px 6px; gap: 8px; border-radius: 6px; background: none; }
  .w-head .w-pill + .w-pill { box-shadow: inset 0 1px 0 var(--line-soft); }
  .w-head .w-pill .muted { flex: 1; font-size: 13px; }
  .w-head .w-pill b { font-size: 14px; }
  .w-head .w-pill.on { background: #2A2513; }
}
@media (min-width: 900px) {
  .w-head .w-pills { flex: 1; }
}
/* attachTip's readout: the wealth chart's tooltip, for anything with a note (hidden gear, a tile's tier). */
.g-tip {
  position: absolute; z-index: 50; pointer-events: none; max-width: 260px; padding: 5px 9px; border-radius: 6px;
  background: #0D0E0Cee; border: 1px solid var(--line); color: var(--text); font-size: 12px; line-height: 1.35;
}
.g-tip[hidden] { display: none; }
/* Anything with a card: a held finger opens it rather than selecting the text under it (user, 2026-10-04). */
.has-tip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* The item card (game.js itemCard): the name in its rarity's colour, what it does, what it sells for. */
.ic-card { gap: 3px; min-width: 150px; }
.ic-name { font-family: 'Chakra Petch', sans-serif; font-size: 15px; color: color-mix(in srgb, var(--rc) 55%, #fff) !important; }
.ic-effect { color: #B6D1D5; }
.ic-heart { width: 13px; height: 13px; color: #6FD39A; vertical-align: -2px; }
.ic-attack { width: 13px; height: 13px; color: var(--sk-orange); vertical-align: -2px; }
.ic-label { color: #8FB5BD; }
.ic-ranges { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line); }
.ic-range { display: inline-flex; align-items: center; gap: 4px; font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
.ic-range .gi { width: 14px; height: 14px; }
.ic-price { display: flex; align-items: center; gap: 4px; margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--text-2); }
.ic-price .ic-label { margin-right: auto; }
.ic-price .gi { width: 14px; height: 14px; color: var(--coin); }
.ic-price b { color: #E1CEA5; }
.ic-extra { color: var(--text-2); }
/* A good inside the plan's words: its picture, a line high. */
.lt-tile.md-good { width: 18px; height: 18px; border-radius: 4px; vertical-align: -4px; margin: 0 1px; }
.md-tier { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 1px;
  background: color-mix(in srgb, var(--rc) 55%, transparent); border: 1px solid var(--rc); }
.w-chart { position: relative; touch-action: pan-y; }
.w-chart .w-gl { stroke: var(--line-soft); }
.w-chart .w-yl { fill: var(--muted); font-size: 10px; font-family: 'Barlow', sans-serif; text-anchor: end; }
.w-chart .w-cross { stroke: var(--coin); stroke-dasharray: 3 3; opacity: 0.7; }
.w-chart .w-dot { fill: var(--coin); stroke: #0D0E0C; stroke-width: 2; }
.w-chart .w-mark { fill: var(--ground); stroke: #6FB3BF; stroke-width: 2; }
.w-chart .w-mark-t { fill: #6FB3BF; font-size: 10px; font-family: 'Barlow', sans-serif; }
.w-tip {
  position: absolute; pointer-events: none; display: flex; flex-direction: column; gap: 1px; padding: 5px 9px;
  border-radius: 6px; background: #0D0E0Cee; border: 1px solid var(--line); white-space: nowrap;
}
.w-tip .muted { font-size: 11px; }
.w-tip b { font-family: 'Chakra Petch', sans-serif; font-size: 14px; color: var(--coin); }
.mdmg { display: flex; flex-direction: column; gap: 6px; }
.mdmg > .muted-2 { font-size: 12px; }
.mgear .gtile { min-width: 0; }
@media (min-width: 900px) {
  .mgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* One row when the card is wide enough; a narrowed window wraps the tiles instead of spilling onto the skills. */
  .mgear { flex-wrap: wrap; }
  .mgear .gtile { width: 78px; }
}

/* ── Loot (docs/plan-web-puslapis.md §10.7) ─────────────────────────────────────────────────────────────────────
   A tier is the game's weapon of that rarity on the rarity's own ground — never a "t6" word. */
.lt-page { display: flex; flex-direction: column; gap: 12px; }
.lt-list-label { padding: 6px 4px 0; }
.lt-cards { display: flex; flex-direction: column; gap: 12px; }
.lt-note { line-height: 1.45; padding: 0 4px; }
.accent.label { color: var(--accent); }
.lt-tile {
  width: 30px; height: 30px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  flex: none; border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, transparent), color-mix(in srgb, var(--rc) 4%, transparent) 70%);
}
.lt-tile.small { width: 20px; height: 20px; border-radius: 4px; }
.lt-tile-img { width: 80%; height: 80%; object-fit: contain; }

.lt-you { border-color: #5A4A1E; }
.lt-you-cap { display: flex; flex-direction: column; gap: 8px; }
.lt-cols { display: flex; gap: 18px; cursor: help; }
.lt-col { display: flex; flex-direction: column; gap: 2px; }
.lt-col .muted { font-size: 11px; }
.lt-col-v { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.1; }
.lt-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; margin: 0; }
.lt-go { min-height: 36px; padding: 0 12px; border-color: var(--accent); white-space: nowrap; }

.lt-battle { gap: 10px; }
.lt-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lt-head { display: flex; align-items: center; gap: 10px; }
.lt-head .lt-go { margin-left: auto; }
.lt-pos {
  width: 26px; height: 26px; border-radius: 50%; background: #2A2513; color: var(--accent); flex: none;
  display: flex; align-items: center; justify-content: center; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
}
.lt-region { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 18px; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px; }
.lt-trophy { width: 18px; height: 18px; color: #E0B64A; flex: none; }
.lt-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.lt-vs { width: 14px; height: 14px; color: var(--muted); margin-top: 3px; }
/* Rounds won either side of the swords (loot.js vsMark), on the name line; Mūšiai's round tiles and points above and
   below it are its own .b-round-row and .b-points. */
.lt-score { display: inline-flex; align-items: center; gap: 4px; height: 18px; font: 700 16px/1 'Chakra Petch', sans-serif; }
.lt-score .lt-vs { margin-top: 0; }
.lt-side { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; }
.lt-side.right { align-items: flex-end; }
.lt-who { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #D4D2C6; min-width: 0; }
.lt-flag { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.lt-flag.ours { box-shadow: 0 0 0 2px #3FB768; }
.lt-flag.rival { box-shadow: 0 0 0 2px #E25B57; }
.lt-emblem { width: 22px; height: 22px; border-radius: 4px; }
/* On a phone the orders' marks drop under the chip rather than squeeze it onto two lines. */
.lt-facts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lt-side.right .lt-facts { justify-content: flex-end; }
.lt-bonus-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 10px; font-size: 12px;
  font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap;
}
.lt-bonus-chip.hot { background: #3A2019; color: #F2A27A; }
.lt-bonus-chip .gi { width: 13px; height: 13px; }
.lt-orders { display: inline-flex; align-items: center; gap: 3px; }
.lt-target { width: 14px; height: 14px; color: #E26A4F; }
.lt-order-img { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; }
.lt-when { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #D4D2C6; }
.lt-when .gi { width: 14px; height: 14px; color: #B89A4A; }
.lt-mine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.lt-mine b { color: var(--text); font-weight: 600; }
.lt-mine-t { display: inline-flex; align-items: center; gap: 5px; color: #D4D2C6; }
.lt-bonus { display: flex; flex-direction: column; gap: 6px; }
.lt-bonus-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.lt-bonus-btn, .lt-preset {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer;
}
.lt-bonus-btn { font-weight: 600; }
.lt-bonus-btn .gi { width: 13px; height: 13px; }
.lt-bonus-btn .muted { font-weight: 400; }
.lt-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-preset { min-height: 36px; color: #D4D2C6; }
.lt-preset.on { background: #2A2513; border-color: var(--accent); color: var(--accent); }

.lt-pool { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 10px; min-width: 0; }
.lt-pool-sub { margin-top: -4px; font-size: 12px; }
/* The colours side by side, one column each (user's sketch, 2026-10-01): the cheapest item large on top, the colour's
   other items small below it — the pool is as tall as its longest colour, not one row per colour. */
.lt-tiers { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 6px; align-items: start; }
.lt-tcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lt-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 7px 2px 6px; border-radius: 6px; background: var(--surface-2);
}
.lt-cell > .lt-tile { width: 38px; height: 38px; margin-bottom: 2px; }
/* Out of reach: quieter, never so faint the items cannot be told apart. */
.lt-cell.far, .lt-mini.far { opacity: 0.5; }
.lt-price { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; }
.lt-count { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lt-ok { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; color: #6FD39A; }
.lt-minis { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.lt-mini { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lt-tile.mini { width: 18px; height: 18px; border-radius: 3px; }
.lt-mini-v { font-family: 'Chakra Petch', sans-serif; font-size: 12px; color: #D4D2C6; white-space: nowrap; }
.lt-mini.ok .lt-mini-v { color: #6FD39A; }
@media (min-width: 900px) {
  .lt-cell > .lt-tile { width: 44px; height: 44px; }
  .lt-price { font-size: 16px; }
  .lt-minis { gap: 4px; padding: 0 4px; }
  .lt-tile.mini { width: 22px; height: 22px; }
  .lt-mini { gap: 6px; }
  .lt-mini-v { font-size: 13px; }
}
.lt-pays { display: flex; flex-direction: column; gap: 6px; }
.lt-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.lt-net { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 14px; }
.lt-net.plus { color: #6FD39A; }
.lt-net.minus { color: #F28A70; }

/* A phone folds the battle pool behind its best tier; a computer shows both pools beside the battle. */
.lt-toggle {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: none;
  border-top: 1px solid var(--line-soft); background: none; color: #D4D2C6; font: inherit; font-size: 14px;
  cursor: pointer; text-align: left;
}
.lt-chevron { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.lt-battle.open .lt-chevron { transform: rotate(90deg); }
.lt-pool.battle { display: none; border-top: none; padding-top: 0; }
.lt-battle.open .lt-pool.battle { display: flex; }
/* Unfolded, the toggle above already names the pool. */
.lt-pool.battle > .label-row > .label { display: none; }
.lt-pool.battle > .label-row { justify-content: flex-end; }

@media (min-width: 900px) {
  .lt-cols { gap: 32px; }
  .lt-col-v { font-size: 30px; }
  .lt-col .muted { font-size: 12px; }
  .lt-you { flex-direction: row; align-items: center; gap: 36px; }
  .lt-pick { flex: 1; font-size: 16px; }
  .lt-pick .lt-go { margin-left: auto; }
}

@media (min-width: 1100px) {
  .lt-battle {
    display: grid; grid-template-columns: 330px minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start;
    grid-template-areas: "info round battle";
  }
  .lt-info { grid-area: info; }
  .lt-pool.round { grid-area: round; }
  .lt-pool.battle { grid-area: battle; display: flex; }
  .lt-pool { border-top: none; padding-top: 0; }
  .lt-pool.battle > .label-row > .label { display: inline; }
  .lt-pool.battle > .label-row { justify-content: space-between; }
  .lt-toggle { display: none; }
  /* Beside the pools the battle has room: larger, so it reads at a glance (user, 2026-10-01). */
  .lt-info { gap: 14px; }
  .lt-pos { width: 30px; height: 30px; font-size: 17px; }
  .lt-region { font-size: 20px; }
  .lt-who { font-size: 16px; }
  .lt-flag { width: 30px; height: 20px; }
  .lt-emblem { width: 26px; height: 26px; }
  .lt-score { gap: 6px; height: 20px; font-size: 20px; }
  .lt-bonus-chip { font-size: 13px; padding: 3px 8px; }
  .lt-when { font-size: 15px; }
  .lt-when .gi { width: 16px; height: 16px; }
  .lt-mine { font-size: 15px; }
  .lt-mine-t .lt-tile.small { width: 26px; height: 26px; }
  .lt-bonus-row { font-size: 14px; }
  .lt-bonus-btn { font-size: 14px; min-height: 36px; }
}

/* Ką gerinti — /planas on the member page (§10.15, 3), drawn: loadouts as their items, skills as the game's icons,
   every company with its workers; a round mark where the plan has something to say, its words in the mark's card. */
.mplan { display: flex; flex-direction: column; gap: 10px; }
.pl-top { padding: 4px 4px 0; flex-wrap: wrap; row-gap: 2px; }
.pl-grid { display: flex; flex-direction: column; gap: 10px; }
.pl-card { gap: 10px; container-type: inline-size; }
.pl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.pl-sub { font-size: 13.5px; color: var(--text-2); }
.mplan b { color: var(--text); font-weight: 600; }
.mplan b.up, .g-tip b.up { color: #6FD39A; }
.mplan b.down, .g-tip b.down { color: #F28A70; }
.mplan code, .pl-tip code { font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; padding: 0 4px; border-radius: 3px;
  background: var(--surface-2); color: var(--text-2); }
.pl-note { font-size: 12.5px; color: var(--muted); }
.pl-notes { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.pl-warn { font-size: 13.5px; color: #F28A70; }
.pl-mark {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font: 700 11px 'Chakra Petch', sans-serif; cursor: help; user-select: none;
}
.pl-mark.warn { background: #3A2F12; color: var(--accent); box-shadow: inset 0 0 0 1px #6B5420; }
.pl-mark.info { background: var(--surface-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.pl-mark.ok { background: #15301F; color: #6FD39A; }
.pl-mark.up { background: #15301F; color: #6FD39A; font-size: 8px; }
.pl-mark.down { background: #3A2019; color: #F28A70; font-size: 8px; }
.g-tip:has(.pl-tip) { max-width: 300px; padding: 8px 10px; font-size: 12.5px; background: #12140F; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.pl-tip { display: flex; flex-direction: column; gap: 5px; }
.pl-tip b { color: var(--coin); }

/* A loadout: "dabar" small over its six items in frames, the two numbers one over the other beside them (computer) or
   in one line under them (phone, below — since 2026-10-07 the phone draws the frames and icons too). */
.pv-list { display: flex; flex-direction: column; }
.pv-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 0 10px;
  grid-template-areas: "tag tag tag" "tiles dmg mark" "tiles net mark"; padding: 10px 8px;
  border-top: 1px solid var(--line-soft); border-radius: 6px;
}
.pv-list > .pv-row:first-child { border-top: none; }
.pl-skills > .pv-row { padding-bottom: 0; }
.pv-tag { grid-area: tag; margin-bottom: 6px; }
.pv-tag:empty { display: none; }
.pv-chip { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 3px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.pv-chip.allT4 { background: #2A1838; color: #D2A8FF; }
/* What a row's CC/d is made of, in its card (member.js splitCard): label left, signed amount right, the day last. */
.pv-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; }
.pv-split > b { text-align: right; font-family: 'Chakra Petch', sans-serif; }
.pv-split > .pv-split-sum { padding-top: 4px; border-top: 1px solid var(--line); font-weight: 600; }
.pv-foot { margin-top: 2px; }
/* What every row rests on: pills like the wealth card's leaks, each with its card (member.js factPill). */
.pv-facts-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 10px;
  font-size: 13px; }
.pv-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pv-fact { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 14px;
  background: var(--surface-2); cursor: help; }
.pv-fact b { font-family: 'Chakra Petch', sans-serif; color: var(--text); }
.pv-kit-pill { padding: 2px 10px 2px 3px; }
.pv-typed { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--accent); }
/* The gear card's contract, typed in (member.js rateControl) — the Rikiuotė bonus's box and pills, beside the title
   where the card is wide, under it on a phone. */
.pv-slot { display: contents; }
/* One line on a phone too (user, 2026-10-06: "sulygiuoti kontraktų laukus į vieną eilutę"): 329 px with the unit, so
   below a 340 px card the unit goes — the "Kontraktai" pill under the rows says it; a typed rate's ↺ takes the next line. */
.pv-calc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pv-calc .bonus-box input { width: 2.6em; }
.pv-calc .bonus-quick .pill { min-height: 32px; padding: 0 7px; font-size: 13px; }
.pv-calc .bonus-box { height: 32px; font-size: 16px; }
/* The coin before the rate's box says CC (docs/plan-ikonos.md): the unit after it is "už 1k" only. Below 340 px both
   go, as the unit did — the line stays one line, and the "Kontraktai" pill under the rows shows the coin. */
.pv-coin { width: 13px; height: 13px; color: var(--coin); filter: drop-shadow(1px 1px 0 #000); }
@container (max-width: 339.98px) {
  .pv-per, .pv-coin { display: none; }
}
@container (min-width: 540px) {
  .pv-calc { margin-left: auto; }
}
.lt-tile.pv-kit-tile { width: 22px; height: 22px; border-radius: 50%; }
/* A phone: three worded pills never fit one row, and two-and-one leaves one alone — so one under another, the figure
   right. The kit's three are a picture and a figure each, and fit side by side under their heading. */
@media (max-width: 899px) {
  .pv-facts:not(.pv-kit) { flex-direction: column; align-items: stretch; gap: 6px; }
  .pv-facts:not(.pv-kit) .pv-fact { justify-content: space-between; }
  .pv-facts-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.pv-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; gap: 4px; }
/* An item in its frame and its roll under it by the stats' icons (member.js variantRow) — the same on a phone as on a
   computer (user, 2026-10-07). The item and its roll are one target for the card, so the picture passes the pointer. */
.pv-item { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 3px; padding: 5px 2px 4px; border-radius: 8px; }
.pv-item .lt-tile { pointer-events: none; }
.pv-item .pv-tile { width: min(44px, 74%); height: auto; aspect-ratio: 1; border: none; background: none; }
.pv-item .lt-tile-img { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
.pv-none { --rc: var(--line); }
.pv-stats {
  flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0 3px;
  font: 600 11px/1.15 'Chakra Petch', sans-serif;
}
.pv-stat { display: inline-flex; align-items: center; gap: 2px; }
.pv-stat .gi { width: 10px; height: 10px; }
/* A phone's card (< 460 px): the six frames take the row's whole width — beside the figures they were 26 px, too
   narrow for an icon and "127" — and the two figures go under them, one line: DMG/d left, CC/d right. */
@container (max-width: 459.98px) {
  .pv-row { grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "tag tag tag" "tiles tiles tiles" "dmg net mark"; row-gap: 6px; }
  .pv-row .pv-dmg, .pv-row .pv-net { align-self: center; margin-top: 0; }
  .pv-row .pv-dmg { justify-self: start; }
  .pv-row .pv-num { flex-direction: row; align-items: baseline; gap: 4px; }
}
.pv-dmg { grid-area: dmg; align-self: end; }
.pv-net { grid-area: net; align-self: start; margin-top: 4px; min-width: 34px; }
.pv-mark { grid-area: mark; justify-self: end; }
.pv-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.pv-dmg { cursor: help; }
.pv-num b { font-family: 'Chakra Petch', sans-serif; font-size: 16px; white-space: nowrap; }
.pv-row .pv-num b { font-size: 18px; }
.pv-unit { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* The plan's pick: the yellow row (user, 2026-10-04: "pažymim geltonai, koks yra optimaliausias"). */
.pv-list > .pv-best { background: #2A2513; box-shadow: inset 0 0 0 1px #6B5420; border-top-color: transparent; }
.pv-list > .pv-best + .pv-row { border-top-color: transparent; }
/* Where the card is wide, the six items fill the row (user, 2026-10-06: "per vidurį per daug laisvos ertmės"), each in
   a frame with its roll by the stats' icons — as the ĮRANGA card's .gtile; the two figures stay one over the other. All
   rows share their columns, so the items line up from row to row whatever the figures' width. The weapon's two stats
   need a 63 px frame (a card of 546 px); in a narrower one they take two lines, the row's frames keep one height and
   the other items' roll sits in its middle. From a 460 px card (a 1060 px window) — narrower, the frames get smaller
   than the phone's tiles. */
@container (min-width: 460px) {
  .pv-list { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; column-gap: 16px; }
  .pv-list > .pv-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .pv-row { grid-template-columns: minmax(0, 1fr) auto 18px; column-gap: 16px; padding: 10px; }
  .pv-row .pv-num b { font-size: 19px; }
  .pv-tiles { gap: 6px; }
  .pv-item { gap: 4px; padding: 6px 2px 5px; }
  .pv-stats { gap: 0 4px; font-size: 11.5px; }
}

/* Skills: the game's icon and level, the plan's level beside it when it differs, a ▲/▼ whose card says what to do. */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.ps-tile {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 6px;
  padding: 7px 9px; border-radius: 5px; background: var(--surface-2); border: 1px solid transparent;
}
.ps-tile.up { border-color: #2D5A3A; cursor: help; }
.ps-tile.down { border-color: #5A2E24; cursor: help; }
.ps-icon { display: inline-flex; }
.ps-icon .gi { width: 18px; height: 18px; }
.ps-level { justify-self: end; display: inline-flex; align-items: baseline; gap: 3px; font-family: 'Chakra Petch', sans-serif; font-size: 16px; }
.ps-was { color: var(--muted); font-size: 13px; }
.ps-to { color: var(--muted); font-size: 11px; }
.ps-name { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-prestige { grid-column: 1 / -1; font-size: 11px; color: var(--accent); }
.ps-prestige.add { font-weight: 700; }
/* How far the skill is to 10: the level now, and lighter what the free points add. */
.ps-bar { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 2px; background: var(--line); margin-top: 3px; overflow: hidden; }
.ps-bar > span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; }
.ps-bar .now { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.ps-bar .add { background: #6FD39A; }
/* The level the free points are saved towards: dashed, not yet a ▲. */
.ps-tile.saving { border-style: dashed; border-color: #6B5420; cursor: help; }
.pl-mark.saving { background: none; color: var(--accent); box-shadow: inset 0 0 0 1px #6B5420; font-size: 8px; }
.pl-skills .pl-head .pl-sub { font-family: 'Chakra Petch', sans-serif; font-size: 11px; letter-spacing: .12em; }
/* The way into the build calculator (skaiciuokle.html), at the head's right — the comparison bar's gold pill. */
.pl-skills .pl-head { align-items: center; }
.pl-calc { margin-left: auto; display: inline-flex; align-items: center; text-decoration: none; }
.ps-tile > .pl-mark { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; }

/* The plan's money leaks, under the wealth curve (member.js findingsLine). */
.w-leaks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-soft); font-size: 13px; }
.w-leak { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 14px;
  background: var(--surface-2); cursor: help; }
.w-leak b { font-family: 'Chakra Petch', sans-serif; }
.w-leak b.down { color: #F28A70; }
/* A phone: the heading on its own line, the chips under it from the same edge — not one beside it, one under it. */
@media (max-width: 899px) { .w-leaks > .muted-2 { flex-basis: 100%; } }
/* An ECO build's five skills in three columns, so its card stands as tall as the gear beside it. */
.pl-skills.eco .ps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-skills.eco .ps-tile { padding: 10px 12px; }

/* Companies: the best pairs, then each company with its Break Room and advice, the holding's day at the bottom. */
.pc-best { display: flex; flex-direction: column; gap: 6px; }
/* Three across the card, each as wide as the third — the per-company day lines up at their right edges. */
.pc-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 6px; }
.pc-pair {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px; border-radius: 5px; font-size: 13px; background: var(--surface-2);
  border: 1px solid transparent; cursor: help;
}
.pc-pair.target { border-color: #6B5420; }
.pc-pair .lt-tile { width: 24px; height: 24px; }
.pc-pair-name { min-width: 0; line-height: 1.3; }
.pc-pair-name > .pl-flag { vertical-align: -2px; margin-right: 5px; }
.mplan .pc-place { font-family: 'Chakra Petch', sans-serif; color: var(--accent); }
.mplan .pc-pair.rival .pc-place { color: #F28A70; }
.pc-all { font-size: 13px; color: var(--text-2); }
/* A deposit: the good, the region and its bonus, CC/d on the right; under them how long it lasts and, for the member's
   own product, what the move adds and when it pays back (member.js chanceChip). */
.pc-chance { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 3px; }
.pc-chance-sub { grid-column: 1 / -1; font-size: 12px; color: var(--text-2); }
.pc-chance-sub b { font-family: 'Chakra Petch', sans-serif; }
.pc-left { color: #E1CEA5; }
.pl-flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; flex: none; }
/* A grid, rows of equal height (user, 2026-11-04: "lygiuojasi visos kortelės pagal aukščiausią", and four companies go
   two and two — member.js companyColumns). Until then CSS columns, so a company with three workers beside one with none
   would not stretch an empty box; with every company's employees listed under it the heights differ by a row or two, and
   the user found the uneven edge worse. On a phone the cards stack at their own height. */
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pc-grid.cols-1 { max-width: 560px; margin-inline: auto; }
@media (min-width: 720px) {
  .pc-grid { grid-auto-rows: 1fr; }
  .pc-grid.cols-2, .pc-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1140px) {
  .pc-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pc-co {
  display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 6px; background: #1A1C17;
  border: 1px solid var(--line-soft); min-width: 0; container-type: inline-size;
}
.pc-co.rival { border-color: #5A2E24; }
.pc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; }
.pl-good { width: 34px; height: 34px; }
.pc-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-title > b, .pc-nameline > b { overflow-wrap: anywhere; line-height: 1.25; }
/* The name, its place among the three and the rival's side: what does not fit wraps flush left, not indented. */
.pc-nameline { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.pc-nameline > b { min-width: 0; }
.pc-nameline > .pc-bloc, .pc-nameline > .pc-rank { margin-left: 0; }
.pc-nameline > .pc-rank { font-size: 12.5px; }
.pc-where { font-size: 12.5px; line-height: 1.4; }
.pc-where > .pl-flag { vertical-align: -2px; margin-right: 5px; }
/* The game's company chips: bonus (pickaxe, amber) and the tax on wages (flag, green). */
.pl-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 4px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap; vertical-align: 1px; margin-right: 4px; line-height: 18px;
}
.pl-chip .gi { width: 12px; height: 12px; }
.pl-chip.bonus { background: #3A2F12; color: #E1CEA5; }
.pl-chip.bonus .gi { color: var(--accent); }
.pl-chip.tax { background: #15301F; color: #8CD6A7; cursor: help; }
/* v0.27 (plan-planas-v027.md §2): a company's Break Room — its level and a person a place — and the plan's lines under
   it, each with its level's mark; the owner's home over the grid; the owner's own work under the total. */
.pl-chip.room { background: #1F2B2D; color: #9BCED4; }
.pl-chip.room .gi { color: #7FC0C8; }
.pc-room { display: flex; align-items: center; gap: 4px; }
.pc-people { display: inline-flex; color: var(--text-2); cursor: help; }
.pc-people .gi { width: 15px; height: 15px; }
/* The employees under a company (2026-11-04, the user's pick A): two lines a person — name, sex and age over the happiness,
   the bonus, the pension warning and the traits — and the day's net at the right across both. */
.wk-box { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); margin-top: 2px; }
.wk-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; }
.wk-row { padding: 6px 0; border-top: 1px solid var(--line-soft); min-width: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: center; }
.wk-head + .wk-row { border-top: 0; }
.wk-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wk-top .pl-flag { align-self: center; }
.wk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wk-sex { font-size: 12.5px; white-space: nowrap; }
.wk-net { grid-column: 2; grid-row: 1 / span 2; justify-self: end; white-space: nowrap; font-size: 13px; }
.wk-sub { grid-column: 1; display: flex; flex-wrap: wrap; gap: 3px 0; align-items: center; }
.wk-mgr { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.wk-empty { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.wk-empty .gi { width: 15px; height: 15px; color: var(--text-2); opacity: .6; }
.pl-chip.hap { background: #1B2B33; color: #9BC6D6; cursor: help; }
.pl-chip.hap .gi { color: #7DADB5; }
.pl-chip.hap.low { background: #3A1F19; color: #F0A58F; }
.pl-chip.hap.low .gi { color: var(--warn); }
.pl-chip.trait { background: #23261F; color: var(--text-2); font-weight: 500; }
.pl-chip.retire { background: #3A2318; color: #F0B08F; cursor: help; }
.pl-chip.train { background: #15301F; color: #8CD6A7; cursor: help; }
.pl-chip.event { background: #3A1F19; color: #F0A58F; cursor: help; }
.wk-slot { cursor: help; }
/* "DARBO JĖGA" — the game's card for the workforce (2026-11-04, the user's picture of it): counts and chips at the left,
   the day's net and the toolboxes found at the right, above the companies. */
.wf-wrap { display: flex; flex-direction: column; gap: 6px; }
.wf-head { display: flex; align-items: baseline; gap: 8px; }
.wf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 12px;
  border-radius: 6px; background: #1A1C17; border: 1px solid var(--line-soft); }
.wf-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wf-counts { display: flex; align-items: center; gap: 16px; }
.wf-count { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; cursor: help; }
.wf-count .gi { width: 20px; height: 20px; color: var(--text-2); }
.wf-chips { display: flex; flex-wrap: wrap; gap: 4px 0; }
.pl-chip.wage { background: #15301F; color: #8CD6A7; cursor: help; }
.wf-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wf-right > b { font-size: 17px; }
.wf-toolboxes { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); cursor: help; }
.wf-toolbox-img { width: 20px; height: 20px; object-fit: contain; }
/* margin-top: auto — in a row of equal-height cards the plan's lines sit at the bottom of each, level with one another. */
.pc-advice { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.pc-advice li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 6px; align-items: start; }
.pc-advice li > .pl-mark { width: 15px; height: 15px; font-size: 10px; margin-top: 1px; }
.pc-advice li > span:not(.pl-mark) { min-width: 0; }
.pc-advice b { color: var(--text); }
.pc-home { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; cursor: help;
  padding: 8px 12px; border-radius: 6px; background: rgba(213, 187, 131, .07); border: 1px solid rgba(213, 187, 131, .3); }
.pc-home > .gi { width: 22px; height: 22px; color: #D5BB83; }
.pc-home-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-home-name .pl-flag { vertical-align: -2px; margin-left: 4px; }
.pc-home-sub { font-size: 12.5px; color: var(--text-2); }
.pc-home-sub b { color: var(--text); }
.pc-self a { color: var(--accent); }
/* KĄ DARYTI at the top of the companies card (member.js todoBlock, 2026-10-27): three rows always — the card keeps its
   height whatever the member has to do — in the guide's row look (.gd-earn), then what does not pay. */
.pc-todo { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pc-todo-head { display: flex; align-items: baseline; gap: 8px; }
.pc-todo-rows { display: grid; grid-template-rows: repeat(var(--todo-rows, 3), minmax(44px, auto)); gap: 8px; }
.pc-todo-rows .gd-earn { border-top: 0; padding-top: 0; }
.pc-todo-rows .gd-earn + .gd-earn { border-top: 1px solid var(--line-soft); padding-top: 8px; }
.pc-todo-rows .gd-txt > span > span, .pc-todo-rows .gd-txt > span > b { display: inline; }
.pc-todo-rows .gd-txt > span .coin-amt { display: inline-flex; }
.pc-todo-good { width: 40px; height: 40px; }
.pc-todo-blank { visibility: hidden; }
.pc-dont { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; color: var(--text-2); }
.pc-dont li::before { content: '× '; color: #F28A70; font-weight: 600; }
.pc-dont li .coin-amt { display: inline-flex; }
.ps-gain { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 2px; font-size: 11.5px; white-space: nowrap; }
.ps-gain .coin-amt { font-size: 12px; }
.pc-bloc { color: #F28A70; font-size: 11.5px; margin-left: 6px; white-space: nowrap; display: inline-block; }
.pc-rank { color: var(--accent); font-family: 'Chakra Petch', sans-serif; font-weight: 600; margin-left: 6px; }
/* A phone's company box: the head keeps its CC a day; the engine's points are in its card. */
@container (max-width: 340px) {
  .pc-pp { display: none; }
}
/* Opened by a finger: larger and wider, so it reads at arm's length (game.js showTip also lifts it clear). */
.g-tip.touch, .g-tip.touch:has(.pl-tip) { font-size: 14px; padding: 9px 12px; max-width: min(330px, calc(100vw - 16px)); }
.g-tip.touch .ic-name { font-size: 16.5px; }
.g-tip.touch .pw-head > b { font-size: 15px; }
/* A finger's card closes by itself: the ring in its corner empties as the time runs out (game.js tipTimeout). */
.g-tip.touch { padding-right: 26px; }
.tip-timer { position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; transform: rotate(-90deg); }
.tip-timer circle { fill: none; stroke-width: 2.2; }
.tip-timer-track { stroke: var(--line); }
.tip-timer-left { stroke: var(--text-2); stroke-dasharray: 31.42; stroke-dashoffset: 0; animation: tip-timer linear forwards; }
@keyframes tip-timer { to { stroke-dashoffset: 31.42; } }
.pw-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 2px; }
.pw-head > b { color: var(--text); font-size: 13.5px; }
/* /gearas in the gear card's head: a chip per stat whose card is the command (member.js renderGearAdvice). */
.mgear-head { align-items: center; }
.mgear-stats { display: inline-flex; gap: 6px; }
.ga-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 3px 2px 7px; border-radius: 12px;
  background: var(--surface-2); font-size: 12.5px; cursor: help; user-select: none;
}
.ga-chip .gi { width: 13px; height: 13px; color: var(--sk-gray); }
.ga-chip > b { font-family: 'Chakra Petch', sans-serif; font-weight: 600; color: var(--text); }
.ga-chip > .pl-mark { width: 16px; height: 16px; font-size: 10px; }
.g-tip:has(.ga-card) { max-width: 310px; }
.ga-card { gap: 4px; }
.ga-card .pw-head .gi { width: 14px; height: 14px; color: var(--sk-gray); vertical-align: -2px; }
.ga-choice { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
/* The answer first (2026-10-19): green when nothing is to buy, yellow with what to buy. */
.ga-verdict { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; padding: 6px 8px; border-radius: 5px; }
.ga-verdict > b { font-size: 1.08em; }
.ga-verdict.ga-ok { background: #15301F; }
.ga-verdict.ga-ok > b { color: #6FD39A; }
.ga-verdict.ga-buy { background: #3A2F12; }
.ga-verdict.ga-buy > b { color: var(--accent); }
.ga-label { font-family: 'Chakra Petch', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.ga-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ga-rolls { display: inline-flex; gap: 6px; }
.ga-roll { display: inline-flex; align-items: center; gap: 3px; }
.ga-roll b { font-family: 'Chakra Petch', sans-serif; font-size: 14px; color: var(--text) !important; }
.lt-tile.ga-tile { width: 24px; height: 24px; }
.ga-rows {
  display: grid; grid-template-columns: auto auto auto 1fr; gap: 1px 12px; margin-top: 4px; padding-top: 5px;
  border-top: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.ga-rows-head { grid-column: 1 / -1; color: var(--text-2); margin-bottom: 2px; }
.ga-row { display: contents; color: var(--text-2); }
.ga-row > * { white-space: nowrap; }
.ga-row .ga-pct { font-family: 'Chakra Petch', sans-serif; font-weight: 600; text-align: right; }
.ga-row .ga-cc { text-align: right; }
.ga-row .ga-mine { grid-column: 2 / -1; }
.ga-row.now > * { color: var(--text); }
.ga-row.pick > * { color: var(--coin); }
.ga-foot { margin-top: 3px; font-size: 11px; color: var(--muted); }
/* The holding's day: engines, workers, and what is left — the portfolio's total row. */
.pc-total {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 22px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pc-total-nums { display: flex; align-items: flex-end; gap: 22px; }
.pc-total .pc-sum b { font-size: 19px; }
/* A phone: the label over three columns, so the sum does not drop alone onto a line of its own. Each column as wide as
   its figure, the room left between them: with the coin and "/d" the sum outgrew a third of a 360 px phone and lay over
   the workers' label (2026-10-08), so it is 17 px there. */
@container (max-width: 520px) {
  .pc-total { flex-direction: column; align-items: stretch; }
  .pc-total-nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; }
  .pc-total .pc-sum b { font-size: 17px; }
}
@media (min-width: 900px) {
  .pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* Gear and skills side by side at one height, the companies across (the money leaks moved under the wealth curve,
     2026-10-04). */
  .pl-grid { grid-template-areas: "gear skills" "companies companies"; }
  .pl-gear { grid-area: gear; align-self: stretch; }
  .pl-skills { grid-area: skills; align-self: stretch; }
  .pl-companies { grid-area: companies; }
}

/* The member page's two cards from §10.15: battles still going, and the member's articles. */
.mfights, .marticles { gap: 4px; }
.mfight {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "where dmg" "pools pools";
  gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--text); align-items: center;
}
.mfight:last-child { border-bottom: none; }
.mfight-where { grid-area: where; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mfight-where .muted { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.mfight-flag { width: 20px; height: 13px; object-fit: cover; border-radius: 2px; }
.mfight-dmg { grid-area: dmg; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mfight-dmg b { font-family: 'Chakra Petch', sans-serif; font-size: 17px; }
.mfight-dmg .muted-2 { font-size: 12px; }
.mfight-pools { grid-area: pools; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-2); }
.mfight-pools:empty { display: none; }
.mfight-pool { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.marticle {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); color: var(--text);
}
.marticle:last-child { border-bottom: none; }
.marticle-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.marticle-meta { white-space: nowrap; font-size: 12px; }
@media (min-width: 900px) {
  .mfight { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto; grid-template-areas: "where pools dmg"; }
}

/* ── Kontraktai: the Mūšiai page's second tab (docs/plan-web-puslapis.md §10.14) ──────────────────────────────────
   A phone reads it top to bottom; a computer keeps the long history on the left and the short cards on the right. */
.mu-tabs { margin: 0 0 14px; }
.kt-page { display: flex; flex-direction: column; gap: 12px; }
.kt-page .track { height: 8px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.kt-page .fill { height: 100%; background: var(--accent); }
.kt-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kt-week { gap: 6px; }
/* The week's sum to the cent ("1 974,07 CC") on one line even in half of a 360 px phone. */
.kt-big { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(19px, 5.6vw, 26px); line-height: 1.1;
  white-space: nowrap; }
.kt-cover { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); cursor: help; }
.kt-now { gap: 10px; }
.kt-empty { margin: 0; }
.kt-active { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.kt-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kt-go { margin-left: auto; min-height: 36px; padding: 0 12px; border-color: var(--accent); }
.kt-bar { height: 10px !important; }
.kt-progress { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; }
.kt-pay { margin-left: auto; color: var(--accent); font-weight: 600; }
.kt-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; flex: none; }
.kt-foot { font-size: 12px; }
/* CC by week: a column per week, its value on top and the week's coverage under it. */
.kt-trend { gap: 10px; }
.kt-bars { display: flex; gap: 4px; align-items: stretch; height: 190px; }
.kt-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: help; }
.kt-colbox { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.kt-colbar { width: min(34px, 80%); background: #8A8260; border-radius: 3px 3px 0 0; }
.kt-col.current .kt-colbar { background: var(--accent); }
.kt-colv { font-family: 'Chakra Petch', sans-serif; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.kt-coll { font-size: 11px; color: var(--muted); white-space: nowrap; }
.kt-colc { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.kt-payers { gap: 8px; }
/* On a phone the sum to the cent ("36 × · 25 824,70 CC") would leave the bar a sliver: the name gives up 20 px. */
.kt-payer { display: grid; grid-template-columns: 22px minmax(60px, 90px) minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13.5px; }
.kt-pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-pnum { color: var(--text-2); white-space: nowrap; font-family: 'Chakra Petch', sans-serif; font-size: 12px; }
.kt-earn { gap: 8px; }
.kt-earners { display: flex; flex-direction: column; gap: 4px; }
.kt-erow { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px; align-items: center; gap: 8px; font-size: 14px; }
.kt-ehead { font-size: 12px; }
.kt-ehead span, .kt-ecc { text-align: right; }
.kt-ewho { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.kt-ecc { font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
.kt-ecc.zero { color: var(--muted); font-weight: 400; }
/* The history: a row per contract — on a phone two lines (when, who, state · minimum, rate, pay). */
.kt-hist { gap: 2px; }
.kt-hrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date status" "who cc" "min perk";
  gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; align-items: center;
}
.kt-hhead { display: none; }
.kt-hdate { grid-area: date; font-size: 12.5px; }
.kt-hwho { grid-area: who; display: inline-flex; align-items: center; gap: 7px; color: var(--text); min-width: 0; }
.kt-hmin { grid-area: min; font-family: 'Chakra Petch', sans-serif; color: var(--text-2); }
.kt-hperk { grid-area: perk; text-align: right; font-size: 13px; }
.kt-hcc { grid-area: cc; text-align: right; font-family: 'Chakra Petch', sans-serif; font-weight: 600; white-space: nowrap; }
.kt-status { grid-area: status; justify-self: end; font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2); }
.kt-status.ok { background: #17301F; color: #6FD39A; }
.kt-status.bad { background: #3A1C19; color: #F28A70; }
.kt-status.run { background: #2A2513; color: var(--accent); }
/* The history's page (contracts.js histCard, pager): the rows as they were, the bar at the card's foot. */
.kt-hlist { display: flex; flex-direction: column; gap: 2px; }
.kt-hist .pager { margin-top: auto; }
@media (min-width: 900px) {
  /* Two tabs as wide as their words, not a bar across the page with its right half empty. */
  .tr-tabs.mu-tabs { display: inline-flex; }
  .tr-tabs.mu-tabs button { flex: none; padding: 0 22px; font-size: 15px; }
  /* The right column's cards stack at their own height; the row left over under them takes what the history is taller
     by — before, the history's height was shared out between the three, leaving gaps between them. */
  .kt-page { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start;
    grid-template-areas: "sum sum" "now now" "hist trend" "hist payers" "hist earn" "hist .";
    grid-template-rows: auto auto auto auto auto 1fr; }
  .kt-sum { grid-area: sum; }
  .kt-now { grid-area: now; }
  .kt-trend { grid-area: trend; }
  .kt-payers { grid-area: payers; }
  .kt-payer { grid-template-columns: 22px minmax(70px, 110px) minmax(0, 1fr) auto; }
  .kt-pnum { font-size: 13px; }
  .kt-earn { grid-area: earn; }
  .kt-hist { grid-area: hist; align-self: stretch; }
  .kt-hrow {
    grid-template-columns: 96px minmax(0, 1fr) 72px 56px 82px 132px; grid-template-areas: none; padding: 8px 0;
  }
  .kt-hrow > * { grid-area: auto; }
  .kt-hhead { display: grid; padding: 4px 0; }
  .kt-hhead span:nth-child(n+3) { text-align: right; }
  .kt-hmin, .kt-hperk { text-align: right; }
  .kt-status { justify-self: end; }
}

/* ── Straipsniai (docs/plan-articles.md) ───────────────────────────────────────────────────────────────────────────
   One card per article as the bot judged it: tone, title, the model's line, the quote it stands on, who wrote it. */
/* A reading column in the middle of the page's 1400 px, its heading with it (2026-10-04): the header and the tabs keep
   the width every page has, the text does not run 1300 px a line. */
main.reading { max-width: 960px; margin: 0 auto; }
/* "No access" (denied.html): one short card, in the middle — stretched over 1300 px its two buttons were bars. */
main.notice { max-width: 560px; margin: 0 auto; }
.st-page { display: flex; flex-direction: column; gap: 12px; }
.st-note { margin: -4px 4px 0; font-size: 12.5px; }
.st-list { display: flex; flex-direction: column; gap: 10px; }
.st-card { gap: 8px; }
.st-card.hostile { border-left: 3px solid #E25B57; }
.st-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-tag {
  padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-2); color: var(--text-2);
}
.st-tag.hostile { background: #3A1C19; color: #F28A70; }
.st-tag.supportive { background: #17301F; color: #6FD39A; }
.st-tag.mine { background: #2A2513; color: var(--accent); }
.st-tag.passing, .st-tag.own { color: var(--muted); }
.st-when { margin-left: auto; font-size: 12px; white-space: nowrap; }
.st-title { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--text); }
.st-claim { margin: 0; font-size: 15px; line-height: 1.45; }
.st-quote {
  margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); display: flex; flex-direction: column;
  gap: 4px; font-size: 13.5px; line-height: 1.45;
}
.st-q { font-style: italic; color: var(--text-2); }
.st-qt { color: var(--muted); }
.st-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 4px; font-size: 13px; }
.st-author { display: inline-flex; align-items: center; gap: 7px; color: #D4D2C6; min-width: 0; }
.st-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.st-flag { width: 20px; height: 13px; object-fit: cover; border-radius: 2px; }
.st-stats { display: inline-flex; align-items: center; gap: 4px; }
.st-stats span + .gi { margin-left: 8px; }
.st-i { width: 14px; height: 14px; }
.st-read { margin-left: auto; color: var(--accent); white-space: nowrap; }
.st-more { align-self: center; min-height: 40px; padding: 0 18px; }
.st-read { min-height: 36px; padding: 0 14px; }

/* The reader: one article, whole, at a reading width. */
/* A reading column in the middle of a wide screen, never left against the edge with the right half empty. */
.sa-back { display: block; max-width: 760px; margin: 4px auto 10px; color: var(--text-2); }
.sa-page { gap: 12px; max-width: 760px; margin: 0 auto; }
.sa-title { margin: 0; font-size: 26px; line-height: 1.25; }
.sa-lang { display: flex; gap: 6px; }
.sa-lang .pill {
  min-height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line); background: none;
  color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer;
}
.sa-lang .pill.on { border-color: var(--accent); background: #2A2513; color: var(--accent); }
.sa-note { margin: 0; }
.sa-summary { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 6px; background: var(--surface-2); }
.sa-summary p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.sa-body { display: flex; flex-direction: column; gap: 12px; font-size: 16.5px; line-height: 1.65; }
.sa-body p, .sa-body ul { margin: 0; white-space: pre-line; }
.sa-body ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.sa-body h2 { margin: 8px 0 0; font-size: 20px; }
.sa-body blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--line); color: var(--text-2); font-style: italic; white-space: pre-line; }
.sa-img { max-width: 100%; height: auto; border-radius: 6px; align-self: flex-start; }
.sa-video { color: var(--accent); }
.sa-game { align-self: flex-start; color: var(--accent); padding-top: 4px; }
/* A guest's article (plan §10.23): the first picture cut to the link card's shape, the summary, and a login instead of
   the text. On a computer the picture is lower, so the login is a short scroll away under the site's tall banner. */
.sa-cover { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 6px; }
@media (min-width: 900px) { .sa-cover { aspect-ratio: 2.6 / 1; } }
.sa-gate {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 4px;
  border-top: 1px solid var(--line); text-align: center;
}
.sa-gate p { margin: 0; color: var(--text-2); }
.sa-login { gap: 8px; background: var(--accent); border-color: var(--accent); color: #141414; }
.guest .sa-game { align-self: center; }
.guest nav.tabs, .guest .sa-back { display: none; }

/* ── Turtas ───────────────────────────────────────────────────────────────────────────────────────────────────────
   The unit's header as the game draws it, then three panels. One column on a phone; from 900 px the account and the
   members' sum side by side, and the member list becomes a table from 1100 px. */
.tr-page { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.tr-panel { display: flex; flex-direction: column; gap: 14px; }
.tr-card { gap: 12px; }

.tr-mu {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; align-items: center;
  padding: 14px; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(120deg, #2B3A3F 0%, #1B211E 45%, #141612 100%);
}
.tr-mu > .tr-logo { grid-column: 1; grid-row: 1; }
.tr-mu > .tr-mu-text { grid-column: 2; grid-row: 1; }
.tr-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
.tr-mu-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.tr-kind { display: inline-flex; align-items: center; gap: 6px; font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 13px; color: #B6D1D5; }
.tr-kind .gi { width: 15px; height: 15px; fill: #B6D1D5; }
.tr-mu-name { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.1; }
/* On a phone six columns: three small boxes, then two halves, then the owner across — every row ends at the edge. */
.tr-mu > .tr-stats { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tr-stat { display: flex; flex-direction: column; gap: 3px; background: rgba(0, 0, 0, .32); border-radius: 6px; padding: 6px 10px; min-width: 0; }
.tr-stat.sm { grid-column: span 2; }
.tr-stat.md { grid-column: span 3; }
.tr-stat.lg { grid-column: span 6; }
.tr-stat-l { font-size: 11.5px; color: var(--muted); }
.tr-stat-v { display: inline-flex; align-items: center; gap: 6px; font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 14px; min-width: 0; white-space: nowrap; }
.tr-stat-v .gi { width: 16px; height: 16px; fill: var(--text-2); }
.tr-deposit { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2); border-radius: 10px; padding: 1px 7px 1px 3px; font-size: 12px; color: #8FE3A8; font-family: 'Barlow', sans-serif; }
.tr-deposit-img { width: 18px; height: 18px; }
.tr-rep { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #6B5A2A; background: #2A2413; border-radius: 12px; padding: 1px 9px 1px 5px; color: var(--accent); }
.tr-rep .gi { width: 15px; height: 15px; fill: var(--accent); }
.tr-stat-v .muted-2 { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 12px; }
/* A longer name than ours runs past a phone's box — MP's "Saudi Arabia", "Central Norway" with its deposit (2026-10-13,
   the MP tab). It wraps inside its box instead; the flag, the deposit and the reputation stay whole beside it. */
@media (max-width: 899px) {
  .tr-mu .tr-stat-v { white-space: normal; line-height: 1.15; }
  .tr-mu .tr-stat-v > * { flex: none; white-space: nowrap; }
  .tr-mu .tr-stat-v > .muted-2 { flex: 0 1 auto; min-width: 0; white-space: normal; }
}

.tr-tabs { display: flex; gap: 6px; background: #12140F; border: 1px solid var(--line); border-radius: 9px; padding: 4px; }
.tr-tabs button, .tr-tabs a {
  flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 40px;
  background: transparent; color: var(--text-2); border: 0; border-radius: 6px; font: 600 14px 'Barlow', sans-serif; cursor: pointer;
}
.tr-tabs button[aria-selected="true"], .tr-tabs a[aria-current="page"] { background: var(--accent); color: #1A1405; }
/* The commanders' pages switch between themselves where the others have their name (zvalgyba.html,
   kontraktu-rinka.html; the menu's one tab "Vadams" opens the first — common.js commandTabs): the same switch, as
   links, as wide as its words, so a phone's time and avatar stay beside it. */
.tr-tabs.cmd-pages { flex: none; gap: 4px; padding: 3px; }
.tr-tabs.cmd-pages a { flex: none; min-height: 30px; padding: 0 12px; white-space: nowrap; text-decoration: none; }

.tr-big-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tr-big { display: inline-flex; align-items: center; gap: 7px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 26px; }
.tr-big .gi { width: 20px; height: 20px; fill: var(--coin); }
.tr-change { font-size: 14px; font-weight: 600; color: #8FE3A8; }
.tr-change.down, .tr-week.down, .tr-amount.down { color: #EE8A84; }

.tr-bars { position: relative; width: 100%; min-height: 160px; overflow: hidden; }
.tr-bars svg { position: absolute; left: 0; bottom: 0; display: block; }
.tr-zero { stroke: var(--line); }
.tr-in { fill: #3FB768; opacity: .85; }
.tr-out { fill: #E25B57; opacity: .85; }
.tr-in-t, .tr-out-t, .tr-wk-t { font-size: 9.5px; font-family: 'Barlow', sans-serif; text-anchor: middle; }
.tr-in-t { fill: #8FE3A8; }
.tr-out-t { fill: #EE8A84; }
.tr-wk-t { fill: var(--muted); }
.tr-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tr-flows { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.tr-flow { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 10px; border-radius: 5px; }
.tr-flow.in { background: rgba(63, 183, 104, .10); color: #8FE3A8; }
.tr-flow.out { background: rgba(226, 91, 87, .10); color: #EE8A84; }

.tr-parts { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); min-width: 60px; }
.tr-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.tr-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.tr-legend b { color: var(--text); font-weight: 600; }
.tr-sw { width: 9px; height: 9px; border-radius: 2px; }

.tr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* A card's title with its chips: side by side when they fit, else the title on its line and the chips, whole, on the next. */
.tr-card > .label-row { flex-wrap: wrap; row-gap: 10px; align-items: center; }
.tr-card > .label-row > .tr-chips { flex-wrap: nowrap; }
.tr-chip {
  background: #12140F; color: var(--text-2); border: 1px solid var(--line); border-radius: 14px; padding: 5px 12px;
  font: 500 13px 'Barlow', sans-serif; cursor: pointer; min-height: 32px;
}
.tr-chip.on { background: rgba(240, 180, 41, .14); color: var(--accent); border-color: rgba(240, 180, 41, .45); }
.tr-more {
  align-self: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px;
  padding: 9px 18px; font: 500 14px 'Barlow', sans-serif; cursor: pointer; min-height: 40px;
}

.tr-face {
  border-radius: 50%; flex: none; overflow: hidden; background: #2A2E26; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
}
.tr-face-img { width: 100%; height: 100%; object-fit: cover; }
.tr-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tr-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-name.idle { color: var(--muted); font-weight: 500; }
.tr-name.banned { color: #6B6E62; font-weight: 500; text-decoration: line-through; }
.tr-flag { width: 18px; height: 12px; border-radius: 2px; flex: none; object-fit: cover; }
.tr-role { font-size: 11px; letter-spacing: .06em; padding: 2px 7px; border-radius: 3px; background: var(--surface-2); color: var(--text-2); flex: none; }
.tr-rank { font-family: 'Chakra Petch', sans-serif; font-weight: 600; color: var(--muted); }

/* Members: a phone row is face, name and role, then the line, then wealth over the week's change. */
.tr-mlist { display: flex; flex-direction: column; }
.tr-mrow {
  /* Wealth to the cent ("74 209,07") takes 76 px; the line gave up the room, so the name keeps what it had. */
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px 76px; grid-template-areas: "rank who spark wealth" "rank who spark week";
  column-gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--line-soft); color: var(--text); text-decoration: none;
}
.tr-mrow > .tr-rank { grid-area: rank; }
.tr-mrow > .tr-who { grid-area: who; }
.tr-mrow > .tr-wealth { grid-area: wealth; text-align: right; font-family: 'Chakra Petch', sans-serif; font-size: 15px; }
.tr-mrow > .tr-week { grid-area: week; text-align: right; font-size: 12px; font-weight: 600; color: #8FE3A8; }
.tr-mrow > .tr-week.down { color: #EE8A84; }
.tr-mrow > .tr-spark { grid-area: spark; overflow: hidden; }
.tr-mrow > .tr-parts, .tr-mrow > .tr-money { display: none; }
.tr-mrow .tr-spark svg { width: 56px; height: 30px; }
/* On a phone the name needs the room more than the flag does: with the flag a third of the names shrank to one letter
   ("F…", "E…" at 360 px, measured 2026-10-07 when the icons were made one look everywhere). */
.tr-mrow .tr-flag { display: none; }
.tr-spark-a { fill: color-mix(in srgb, var(--coin) 14%, transparent); }
.tr-spark-l { fill: none; stroke: var(--coin); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.up .tr-spark-l { stroke: #6FD39A; }
.up .tr-spark-a { fill: rgba(111, 211, 154, .14); }
.down .tr-spark-l { stroke: #F28A70; }
.down .tr-spark-a { fill: rgba(242, 138, 112, .14); }
.tr-mrow .tr-role { display: none; }
/* The table's titles. On a phone only the two that sort it, over the line and the sums — the line is too narrow for
   a word; on a computer every column's (below). */
.tr-mrow.tr-mhead {
  grid-template-areas: "rank who wealth wealth" "rank who week week"; row-gap: 0;
  font-size: 12px; color: var(--muted); padding: 0 2px 4px; border-top: none;
}
.tr-mhead > .tr-spark, .tr-mhead > .tr-parts-h { display: none; }
/* The sums' titles sort the table: the chosen one in the accent, with its arrow. */
.tr-mrow.tr-mhead > .tr-sort {
  background: none; border: 0; padding: 4px 0; font: 500 12px 'Barlow', sans-serif; color: var(--muted);
  cursor: pointer; text-align: right; white-space: nowrap; min-height: 24px;
}
.tr-mrow.tr-mhead > .tr-sort.on { color: var(--accent); }
.tr-mrow.tr-mhead > .tr-sort.on::after { content: ' ▾'; }
/* The parts to choose, each with the member's TURTAS icon: on a phone three by two across the card, not two ragged
   rows; from 900 px one row. */
.tr-pchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -2px; }
.tr-pchips .tr-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 6px; }
@media (min-width: 900px) {
  .tr-pchips { display: flex; }
  .tr-pchips .tr-chip { padding: 5px 12px; }
}
.tr-pchips .tr-chip .gi { width: 14px; height: 14px; color: var(--coin); }
/* The chosen part stands out of the split; the rest fade. */
.tr-parts > .dim { opacity: .25; }
/* Pointing along a member's line (common.js sparkScrub): a dashed line and a dot on the reading, as on wealthChart. */
.tr-mrow > .tr-spark { position: relative; touch-action: pan-y; }
.tr-mrow > .tr-spark.scrub { overflow: visible; }
.sp-cross, .sp-dot { position: absolute; display: none; pointer-events: none; }
.sp-cross { top: 0; bottom: 0; border-left: 1px dashed var(--coin); opacity: .7; }
.sp-dot { width: 8px; height: 8px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--coin); border: 2px solid #0D0E0C; }
.scrub > .sp-cross, .scrub > .sp-dot { display: block; }
.sp-tip { z-index: 50; }
/* The split card (turtas.js partsCard): an icon in its bar colour, a name, a sum and its share a line. */
.bt-card.tr-pcard { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.tr-pcard .tr-pcard-i { width: 16px; height: 16px; }
.tr-pcard .bt-row > .muted { text-align: right; font-size: 12px; }
.tr-pcard .bt-row.on > span { color: var(--accent); }

/* Statement */
.tr-txlist { display: flex; flex-direction: column; }
.tr-tx { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.tr-tx-i { width: 30px; height: 30px; border-radius: 7px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tr-tx-i.don { background: rgba(63, 183, 104, .14); }
.tr-tx-i .gi { width: 16px; height: 16px; fill: #6FD48F; }
.tr-tx-i.applicationFee .gi { fill: var(--coin); }
.tr-tx-item { width: 26px; height: 26px; }
.tr-tx-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 14px; }
.tr-tx-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-tx-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; font-size: 12px; }
.tr-amount { font-family: 'Chakra Petch', sans-serif; font-size: 15px; color: #8FE3A8; }

/* Donations */
.tr-donlist { display: flex; flex-direction: column; }
.tr-don { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line-soft); }
.tr-don > .tr-rank { width: 34px; flex: none; }
.tr-member { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: rgba(240, 180, 41, .12); color: var(--accent); flex: none; }
.tr-grow { flex: 1; }
.tr-don-span { font-size: 12px; flex: none; }
.tr-don-amount { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; min-width: 80px; font-family: 'Chakra Petch', sans-serif; font-size: 15px; color: var(--coin); flex: none; }
.tr-don-amount .gi { width: 14px; height: 14px; fill: var(--coin); }
.tr-don-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-don-stat { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 130px; background: #12140F; border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; font-size: 12px; }
/* To the cent ("47 720,43 CC") on one line in half of a 360 px phone. */
.tr-don-stat b { display: inline-flex; align-items: center; gap: 6px; font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(15px, 4.4vw, 19px); white-space: nowrap; }
.tr-don-stat .gi { width: 17px; height: 17px; fill: var(--coin); }
.tr-don-grid { display: flex; flex-direction: column-reverse; gap: 14px; }

/* Richest, middle, least — then every member on one scale. On a phone the three stand in one row, centred. */
.tr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tr-sp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tr-sp-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0;
  padding: 10px 6px; border-radius: 8px; background: #12140F; border: 1px solid var(--line);
}
.tr-sp-title { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .06em; }
.tr-sp-tile.sp-top .tr-sp-title { color: var(--coin); }
.tr-sp-tile.sp-mid .tr-sp-title { color: #6FB3BF; }
.tr-sp-tile.sp-low .tr-sp-title { color: var(--muted); }
.tr-sp-head { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
/* The coin before the sum on a phone too (user, 2026-10-07): in a phone's third of the row, to the cent ("74 209,07"),
   both fit at 14 px with a 12 px coin. */
.tr-sp-big { display: inline-flex; align-items: center; gap: 3px; font-family: 'Chakra Petch', sans-serif; font-size: 14px; white-space: nowrap; }
.tr-sp-big .gi { display: block; flex: none; width: 12px; height: 12px; fill: var(--coin); }
.tr-sp-name { font-size: 12px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
.tr-sp-tile > .muted { font-size: 11.5px; }
.tr-sp-note { display: none; }
.tr-sp-pair { display: inline-flex; }
.tr-sp-pair > .tr-face + .tr-face { margin-left: -8px; box-shadow: 0 0 0 2px #12140F; }
.tr-up { color: #8FE3A8; }
.tr-down { color: #EE8A84; }
/* Laid out in pixels by turtas.js spreadScale: every face in its own row, none on another. */
.tr-scale { position: relative; }
.tr-scale > * { position: absolute; }
.tr-scale-axis { height: 2px; background: var(--line); }
.tr-scale-line { width: 2px; margin-left: -1px; }
.tr-scale-line.mid { background: #6FB3BF; }
.tr-scale-line.mean { background: var(--coin); opacity: .55; }
.tr-scale-tag { font-size: 11px; white-space: nowrap; transform: translateX(-50%); }
.tr-scale-tag.mid { color: #6FB3BF; }
.tr-scale-tag.mean { color: var(--coin); }
.tr-scale-dot {
  display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--surface);
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.tr-scale-dot:hover { z-index: 2; box-shadow: 0 0 0 2px var(--accent); }
.tr-scale-end { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tr-scale-end.right { transform: translateX(-100%); }
/* A held face, big, over the finger. */
.tr-peek {
  position: absolute; z-index: 50; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 16px; border-radius: 12px; background: #1F221C; border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .6); font-size: 14px;
}
.tr-peek b { font-size: 15px; }
.tr-moves { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.tr-move { display: inline-flex; align-items: center; gap: 6px; }
.tr-move b { color: var(--text); }
.tr-move b.tr-up { color: #8FE3A8; }
.tr-move b.tr-down { color: #EE8A84; }

@media (min-width: 900px) {
  .tr-mu { padding: 22px; grid-template-columns: 104px minmax(0, 1fr); column-gap: 22px; }
  .tr-mu > .tr-logo { grid-row: 1 / span 2; }
  .tr-mu > .tr-mu-text { align-self: end; }
  .tr-mu > .tr-stats { grid-column: 2; display: flex; flex-wrap: wrap; align-self: start; }
  .tr-logo { width: 104px; height: 104px; }
  .tr-kind { font-size: 15px; }
  .tr-mu-name { font-size: 32px; }
  .tr-stats { gap: 8px; }
  .tr-stat-v { font-size: 16px; }
  .tr-tabs { align-self: flex-start; }
  .tr-tabs button { flex: none; padding: 0 22px; font-size: 15px; }
  /* Stretched: the account card reaches as far down as the members' two cards, its bars taking the room. */
  .tr-grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
  #account .tr-bars { flex: 1 1 auto; }
  /* And the other way round: when the account card is the taller one, the members' last card takes the rest. */
  #spread { flex: 1 1 auto; }
  .tr-sp-tiles { gap: 10px; }
  .tr-sp-tile { align-items: stretch; text-align: left; gap: 8px; padding: 12px 14px; }
  .tr-sp-title { font-size: 11.5px; letter-spacing: .12em; }
  .tr-sp-head { flex-direction: row; gap: 9px; }
  .tr-sp-big { font-size: 26px; gap: 6px; }
  .tr-sp-big .gi { display: block; width: 16px; height: 16px; }
  .tr-sp-name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tr-sp-tile > .muted { font-size: 13px; }
  .tr-sp-note { display: inline; }
  .tr-big { font-size: 28px; }
  .tr-tx { display: grid; grid-template-columns: 30px minmax(0, 1fr) 150px; align-items: center; gap: 14px; padding: 9px 6px; }
  .tr-tx-body { flex-direction: row; align-items: center; gap: 14px; justify-content: space-between; font-size: 15px; }
  .tr-tx-r { flex-direction: row-reverse; align-items: baseline; gap: 12px; }
  .tr-don-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; flex-direction: row; align-items: start; }
  .tr-don-stats { flex-direction: column; }
}

@media (min-width: 1100px) {
  .tr-mrow, .tr-mhead {
    grid-template-columns: 36px minmax(0, 1.5fr) 100px 90px 260px 180px 80px; grid-template-areas: none;
    gap: 12px; padding: 8px 6px;
  }
  .tr-mrow.tr-mhead { grid-template-areas: none; padding-top: 0; padding-bottom: 2px; align-items: end; }
  .tr-mhead > .tr-spark, .tr-mhead > .tr-parts-h { display: block; }
  .tr-mrow.tr-mhead > .tr-sort { padding-bottom: 4px; }
  /* The phone's named areas are more specific than a `> *` reset: undone one by one. */
  .tr-mrow > .tr-rank, .tr-mrow > .tr-who, .tr-mrow > .tr-wealth, .tr-mrow > .tr-week, .tr-mrow > .tr-spark { grid-area: auto; }
  .tr-mrow > .tr-wealth { font-size: 17px; }
  .tr-mrow > .tr-week { font-size: 14px; }
  .tr-mrow > .tr-parts, .tr-mrow > .tr-money { display: flex; }
  .tr-mrow > .tr-money { justify-content: flex-end; }
  .tr-mrow .tr-spark svg { width: 250px; height: 34px; }
  .tr-mrow .tr-role { display: inline; }
  .tr-mrow .tr-flag { display: inline; }
}

/* ── Rinka ────────────────────────────────────────────────────────────────────────────────────────────────────────
   Goods in one column on a phone, two on a computer; gear as rarity buttons + six rows on a phone, a slot × rarity
   table on a computer. A roll detail opens under either. Every small line answers the pointer with date and price. */
.rk-page { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.rk-card { gap: 10px; }
.rk-card > .label-row { flex-wrap: wrap; row-gap: 10px; align-items: center; }
.rk-card > .label-row > .tr-chips { flex-wrap: nowrap; }
.rk-goods { display: flex; flex-direction: column; gap: 6px; }
.rk-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rk-sec { display: flex; flex-direction: column; }
.rk-sec-t { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--muted); padding: 4px 0 3px; }
.rk-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 70px; gap: 9px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.rk-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rk-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rk-price b, .rk-cell-top b { font-family: 'Chakra Petch', sans-serif; font-size: 15px; }
.rk-chg { font-size: 11px; font-weight: 600; color: var(--muted); }
.rk-chg.up { color: #6FD39A; }
.rk-chg.down { color: #F28A70; }
.rk-spark { position: relative; display: inline-block; touch-action: pan-y; }
.rk-spark svg { display: block; overflow: visible; }
.rk-area { fill: color-mix(in srgb, var(--coin) 13%, transparent); }
.rk-line { fill: none; stroke: var(--coin); stroke-width: 1.6; stroke-linejoin: round; }
/* A stretch of a line whose thickness says how much sold there (its stroke-width attribute — no CSS width here). */
.rk-seg { fill: none; stroke: var(--coin); stroke-linecap: round; }
.rk-spark.gear .rk-line, .rk-spark.gear .rk-seg { stroke: color-mix(in srgb, var(--rc, var(--coin)) 75%, #fff); }
.rk-spark.gear .rk-area { fill: color-mix(in srgb, var(--rc, var(--coin)) 14%, transparent); }
.rk-spark.roll .rk-line { stroke: color-mix(in srgb, var(--rc, var(--coin)) 70%, #fff); stroke-width: 1.4; }
.rk-spark.roll .rk-seg { stroke: color-mix(in srgb, var(--rc, var(--coin)) 70%, #fff); }
.rk-spark.roll .rk-area { fill: color-mix(in srgb, var(--rc, var(--coin)) 12%, transparent); }
.rk-cross { stroke: var(--coin); stroke-dasharray: 3 3; }
.rk-dot { fill: var(--coin); stroke: var(--ground); stroke-width: 2; }
.rk-tip {
  position: absolute; bottom: calc(100% + 4px); z-index: 5; white-space: nowrap; pointer-events: none;
  display: flex; flex-direction: column; background: #1F221C; border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.rk-tip b { font-family: 'Chakra Petch', sans-serif; }

.rk-tiers { display: flex; gap: 6px; }
.rk-tier { flex: 1; display: flex; justify-content: center; padding: 4px; border-radius: 8px; background: #12140F; border: 1px solid var(--line); cursor: pointer; }
.rk-tier.on { border: 2px solid var(--rc); background: color-mix(in srgb, var(--rc) 14%, #12140F); padding: 3px; }
.rk-tier-img { width: 26px; height: 26px; object-fit: contain; }
.rk-glist { display: flex; flex-direction: column; }
.rk-grow {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 90px 62px; gap: 9px; align-items: center; padding: 7px 0;
  background: none; border: 0; border-top: 1px solid var(--line-soft); color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.rk-grow.open .rk-title { color: var(--accent); }

.rk-table { display: grid; grid-template-columns: 110px repeat(6, minmax(0, 1fr)); gap: 8px; align-items: center; }
.rk-th { display: flex; justify-content: center; }
.rk-th-img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 45%, transparent)); }
.rk-slot { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.rk-slot-img { width: 26px; height: 26px; object-fit: contain; }
.rk-cell {
  display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; border-radius: 7px; min-width: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); color: var(--text); font: inherit; text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 12%, transparent), color-mix(in srgb, var(--rc) 3%, transparent) 70%);
}
.rk-cell.open { border: 2px solid var(--rc); padding: 6px 7px; }
.rk-cell-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
/* Making one: under the market prices, so a price above it is visibly too much. */
.rk-made-cell {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 7px; min-width: 0; cursor: help;
  border: 1px dashed color-mix(in srgb, var(--rc) 35%, transparent);
}
.rk-made-cell b { font-family: 'Chakra Petch', sans-serif; font-size: 15px; }
.rk-slot > .rk-slot-img.gi { width: 22px; height: 22px; padding: 2px; color: var(--text-2); }
.rk-made { cursor: help; }
.rk-made-icon { width: 22px; height: 22px; justify-self: center; color: var(--text-2); }

.rk-detail {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 8%, transparent), transparent 120px);
}
.rk-dhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rk-dtitle { display: inline-flex; align-items: center; gap: 10px; font-family: 'Chakra Petch', sans-serif; font-size: 18px; }
.rk-dhead .tr-more { align-self: auto; min-height: 34px; padding: 6px 12px; font-size: 13px; }
.rk-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.rk-lg { display: inline-flex; align-items: center; gap: 6px; }
.rk-sw { width: 18px; height: 4px; border-radius: 2px; flex: none; }
/* The top roll lightest, the lowest darkest — four steps of the tier's own colour, even in lightness (OKLCH L .95 / .79 /
   .63 / .47) and turning 30° on the way (purple → indigo, yellow → orange, red → crimson, blue → indigo, green → teal),
   so neighbours stay ≥ 15.9 OKLab ΔE apart where color-mix steps sat at 3.8–7.9. Checked with the dataviz ordinal
   validator on #161814 — docs/HISTORY.md 2026-10-07. */
.rk-detail.r-common { --g0: #e7effc; --g1: #b4bbc7; --g2: #838a95; --g3: #555b66; }
.rk-detail.r-uncommon { --g0: #c9ffce; --g1: #57d794; --g2: #00a179; --g3: #006a5a; }
.rk-detail.r-rare { --g0: #e1f1ff; --g1: #8abeff; --g2: #4f81f9; --g3: #4246c1; }
.rk-detail.r-epic { --g0: #fae7ff; --g1: #d5a0ff; --g2: #a05aff; --g3: #6029d1; }
.rk-detail.r-legendary { --g0: #fff194; --g1: #e1b500; --g2: #b17f00; --g3: #7e4f00; }
.rk-detail.r-mythic { --g0: #ffe9e2; --g1: #ff9c8b; --g2: #ec4051; --g3: #a90041; }
.rk-g0 { --gc: var(--g0); }
.rk-g1 { --gc: var(--g1); }
.rk-g2 { --gc: var(--g2); }
.rk-g3 { --gc: var(--g3); }
/* A line's group at its end, in text ink — the colour beside it carries which. */
.w-chart .rk-end { fill: var(--text-2); font-size: 11px; font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
.rk-sw.rk-g0, .rk-sw.rk-g1, .rk-sw.rk-g2, .rk-sw.rk-g3 { background: var(--gc); }
.rk-gl { fill: none; stroke: var(--gc); stroke-linecap: round; }
.rk-chart { width: 100%; }
.rk-dtip { display: flex; flex-direction: column; gap: 3px; min-width: 210px; }
.rk-tip-row { display: grid; grid-template-columns: 18px 1fr auto 36px; gap: 6px; align-items: center; font-size: 12px; }
.rk-stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rk-stat .gi { width: 13px; height: 13px; display: block; }
/* Two price facts in the roll table (rinka.js rollFacts): the roll to take on a light yellow ground with ✓, the
   rolls under it dimmed, a dashed line under the separators — ▼ same price below, ▲ one point bought dear. */
.rk-best { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.rk-tick { color: var(--accent); font-weight: 700; margin-left: 2px; }
.rk-same { opacity: .45; }
.rk-sep { font-size: 11.5px; color: var(--muted); padding: 3px 2px 3px 8px; border-top: 1px dashed var(--line); }
.rk-sep-dear { color: var(--warn); }
.rk-rolls { display: flex; flex-direction: column; }
/* A phone's roll column holds "🛡 104 ✓" (55 px); the line gets the rest — at 360 px too little, and it is left out. */
.rk-rrow { display: grid; grid-template-columns: 58px minmax(0, 1fr) 50px 50px 34px; gap: 8px; align-items: center; padding: 5px 2px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.rk-rrow b { font-family: 'Chakra Petch', sans-serif; text-align: right; }
.rk-rrow > .rk-chg, .rk-rrow > .muted { text-align: right; }
.rk-rhead { font-size: 11.5px; color: var(--muted); border-top: none; }
.rk-rhead > span:nth-child(n+3) { text-align: right; }
.rk-heat-wrap { display: flex; flex-direction: column; gap: 6px; }
.rk-heat { display: grid; gap: 4px; align-items: center; font-size: 12px; }
.rk-hc { text-align: center; }
.rk-hr { white-space: nowrap; padding-right: 4px; }
.rk-hcell {
  height: 36px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--rc) calc(var(--heat, 0) * 100%), #12140F);
  border: 1px solid color-mix(in srgb, var(--rc) calc(var(--heat, 0) * 100% + 15%), transparent);
}
.rk-hcell b { font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; }
.rk-hcell.empty { background: #12140F; border-color: var(--line-soft); }
.rk-hcell.lined { height: auto; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px 8px; }
.rk-hcell.lined b { text-align: center; }
.rk-hcell .rk-spark.roll .rk-line, .rk-hcell .rk-spark.roll .rk-seg { stroke: color-mix(in srgb, var(--rc) 30%, #fff); }
.rk-hcell .rk-spark.roll .rk-area { fill: rgba(255, 255, 255, .06); }
/* A line that went up over its period is green, down red (common.js trend) — after every rule above, which it overrides. */
.rk-spark.up .rk-line, .rk-spark.up .rk-seg, .rk-hcell .rk-spark.up .rk-line, .rk-hcell .rk-spark.up .rk-seg { stroke: #6FD39A; }
.rk-spark.up .rk-area, .rk-hcell .rk-spark.up .rk-area { fill: rgba(111, 211, 154, .13); }
.rk-spark.down .rk-line, .rk-spark.down .rk-seg, .rk-hcell .rk-spark.down .rk-line, .rk-hcell .rk-spark.down .rk-seg { stroke: #F28A70; }
.rk-spark.down .rk-area, .rk-hcell .rk-spark.down .rk-area { fill: rgba(242, 138, 112, .13); }

@media (min-width: 900px) {
  .rk-goods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; align-items: start; }
  .rk-row { grid-template-columns: 30px minmax(0, 1fr) auto 76px; }
  .rk-rrow { grid-template-columns: 80px minmax(0, 1fr) 90px 70px 60px; column-gap: 16px; }
  .rk-hcell { height: 40px; }
  .rk-hcell b { font-size: 14px; }
}

/* ── Savaitės dropai (Loot ir nario puslapis; docs/plan-web-puslapis.md §10.13, 4) ── */
.card.drops { gap: 10px; }
/* The title, the count and the week chips (variant A, 2026-10-26): side by side when they fit, else the count and the
   chips, whole, on the next line. */
.dr-head { flex-wrap: wrap; row-gap: 8px; align-items: center; }
.dr-head-r { display: flex; align-items: center; gap: 10px; }
.dr-head-r .tr-chips { flex-wrap: nowrap; }
.dr-what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dr-tile {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 3px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 20%, transparent), color-mix(in srgb, var(--rc) 4%, transparent) 70%);
}
.dr-tile b { font-family: 'Chakra Petch', sans-serif; font-size: 15px; }
.dr-img { width: 30px; height: 30px; object-fit: contain; }
.dr-what.small { gap: 4px 8px; justify-content: flex-end; }
.dr-what.small .dr-tile { padding: 1px 5px 1px 1px; }
.dr-what.small .dr-img { width: 20px; height: 20px; }
.dr-what.small .dr-tile b { font-size: 13px; }
.dr-cc { font-family: 'Chakra Petch', sans-serif; font-size: 15px; font-weight: 600; color: #6FD39A; white-space: nowrap; }
.dr-what.small .dr-cc { font-size: 13px; }
/* "+N" of the week's items, as tall as a tile; its tooltip lays the rest out as the row would (2026-10-26). */
.dr-more {
  --rc: var(--text-2); align-self: stretch; padding: 3px 10px; cursor: default;
  font: 700 15px 'Chakra Petch', sans-serif; color: var(--text);
}
.dr-rest { display: grid; gap: 6px; }
.g-tip:has(.dr-rest) { max-width: min(330px, calc(100vw - 16px)); padding: 8px; }
.g-tip.touch:has(.dr-rest) { padding-right: 26px; }
.dr-list { display: flex; flex-direction: column; }
.dr-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "date place dmg" "what what net";
  align-items: center; gap: 2px 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 14px;
}
.dr-row > :nth-child(1) { grid-area: date; }
.dr-row > :nth-child(2) { grid-area: place; }
.dr-row > :nth-child(3) { grid-area: dmg; text-align: right; }
.dr-row > :nth-child(4) { grid-area: what; }
.dr-row > :nth-child(5) { grid-area: net; }
.dr-place { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-row.more { display: none; }
.dr-list.all .dr-row.more { display: grid; }
/* Gauta / Išleista / Liko and each battle's "liko" (docs/plan-musio-islaidos.md, variant B, 2026-10-24). */
.dr-bal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dr-bal-c { display: flex; flex-direction: column; gap: 2px; }
.dr-bal-n { font-family: 'Chakra Petch', sans-serif; font-size: 15px; font-weight: 700; white-space: nowrap; }
.dr-bal-n.big { font-size: 17px; }
.dr-net { font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; text-align: right; }
.dr-bal-n.up, .dr-net.up { color: #6FD39A; }
/* The bill's tooltip card (game.js billCard; variant A, 2026-10-25): a picture, a word and a sum a line. */
/* One grid for the whole card, the lines' cells in its columns: the words start in one column though the armour line
   may carry a picture for each of its tiers. */
.bt-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; min-width: 210px; }
.bt-head, .bt-note { grid-column: 1 / -1; }
.bt-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px;
  font: 600 11px 'Chakra Petch', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.bt-head:first-child { margin-top: 0; }
.bt-head b { font-size: 13px; letter-spacing: 0; }
.bt-row { display: contents; color: var(--text); }
.bt-row > :first-child { justify-self: start; }
.bt-pics { display: inline-flex; gap: 3px; }
.bt-card .bt-row b, .bt-card .bt-head b { font-family: 'Chakra Petch', sans-serif; text-align: right; white-space: nowrap; }
.bt-card b.up { color: #6FD39A; }
.bt-card b.down { color: #EE8A84; }
.bt-pic.dr-tile { width: 22px; height: 22px; padding: 1px; border-radius: 5px; justify-content: center; }
.bt-pic .dr-img { width: 18px; height: 18px; }
.bt-coin { display: inline-flex; justify-content: center; }
.bt-coin .gi { width: 14px; height: 14px; color: var(--coin); }
.bt-total { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--text); }
.bt-total b { font-size: 15px; }
.bt-note { margin-top: 2px; font-size: 11.5px; color: #8FB5BD; }
.g-tip.touch .bt-pic.dr-tile { width: 26px; height: 26px; }
.g-tip.touch .bt-pic .dr-img { width: 22px; height: 22px; }
.g-tip.touch .bt-head b { font-size: 15px; }
/* The card's first sum sits top right, where a finger's tooltip draws its timer: room for the ring, as .g-tip.touch. */
.g-tip.touch:has(.bt-card) { padding-right: 28px; }
.dr-bal-n.down, .dr-net.down { color: #EE8A84; }
@media (min-width: 900px) {
  .dr-row { grid-template-columns: 54px minmax(0, 1fr) 80px auto 96px; grid-template-areas: "date place dmg what net"; }
  .dr-bal { grid-template-columns: repeat(3, max-content); gap: 40px; }
  .dr-bal-n { font-size: 20px; }
  .dr-bal-n.big { font-size: 24px; }
}

/* Konkursas (docs/plan-konkursas.md §4; variant A and the Apžvalga card 2, chosen 2026-10-06): the viewer's place
   first, then a card per group — the viewer's own first, then the bigger ones, so a row of cards on a computer holds
   groups of a like height. The tiers are the game's rarity colours, not emoji: they line up in a column. Since
   2026-10-08 (docs/plan-ikonos.md) the pieces are Prekyba's frames and the counts small frames of their rarity. */
.kn-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; color: var(--text-2); }
.kn-trial {
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .12em;
  padding: 3px 8px; border-radius: 3px; background: #3A2F12; color: var(--accent);
}
.kn-tally { display: inline-flex; gap: 4px; }
.kn-t {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px;
  border-radius: 4px; font: 600 12px 'Chakra Petch', sans-serif; color: var(--text); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 32%, transparent), color-mix(in srgb, var(--rc) 8%, transparent));
}
.kn-gem {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 1px 6px;
  border-radius: 3px; background: color-mix(in srgb, var(--gem) 14%, transparent); color: var(--gem); white-space: nowrap;
}
.kn-gem .gi { width: 10px; height: 10px; filter: drop-shadow(1px 1px 0 #000); }
.kn-org { display: inline-flex; }
.kn-org .gi { width: 14px; height: 14px; color: var(--text-2); }
.kn-label { display: flex; align-items: center; gap: 6px; }
.kn-label .gi { width: 14px; height: 14px; color: var(--accent); }
.kn-pts { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 17px; text-align: right; white-space: nowrap; }
.kn-place { font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: var(--muted); text-align: center; }
.kn-place.p1 { color: #F0B429; }
.kn-place.p2 { color: #C9CDD4; }
.kn-place.p3 { color: #C98A4B; }

/* "TAVO VIETA" (konkursas.js meCard, variant B + prize variant 2, 2026-10-09; mockups data/maketai/konkurso-vieta/):
   on a computer the place and prize large on the left behind a line, the three numbers a row above the pieces; on a
   phone the place with the prize at its right on top, the three numbers full-width lines under it — beside the place
   they no longer fit 360 px once the prize and "tšk." came (Liko was cut at the card's edge). */
.kn-score { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.kn-mine {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.kn-mine > * { grid-column: 1; }
.kn-mine .kn-prize-line { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kn-title { font: 600 14px 'Chakra Petch', sans-serif; letter-spacing: .08em; color: var(--muted); }
.kn-num { display: flex; align-items: baseline; gap: 10px; }
.kn-big { font: 700 72px/.85 'Chakra Petch', sans-serif; }
.kn-of { font: 600 20px 'Chakra Petch', sans-serif; color: var(--text-2); white-space: nowrap; }
.kn-grp { font-size: 14px; font-weight: 500; color: var(--text-2); }
.kn-prize-k { font-size: 16px; font-weight: 500; color: var(--muted); }
.kn-prize { display: inline-flex; align-items: center; gap: .2em; font: 600 28px/1 'Chakra Petch', sans-serif; color: var(--gem); white-space: nowrap; }
.kn-prize .gi { width: .8em; height: .8em; filter: drop-shadow(1px 1px 0 #000); }
.kn-stats { display: grid; gap: 6px; }
.kn-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.kn-k { font-size: 20px; font-weight: 500; line-height: 1.05; color: var(--muted); }
.kn-v { font: 600 26px/1 'Chakra Petch', sans-serif; white-space: nowrap; }
.kn-v .coin-amt { gap: .18em; }
.kn-unit { font-size: .55em; font-weight: 500; color: var(--muted); }
.kn-pieces-wrap { display: flex; flex-direction: column; gap: 6px; }
/* The pieces: Prekyba's frames (.pk-its / .pk-it), one row — 6 on a phone, 12 on a computer — its pager at the end of
   the line above it (as Prekyba's .pk-made-head), so no empty row is kept for the bar either. */
.kn-pieces-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 26px; }
.kn-pieces-head .pager { padding-top: 0; gap: 6px; font-size: 12px; }
.kn-pieces-head .pager-btn { min-width: 30px; padding: 2px 9px; font-size: 13px; }
/* White and bold (user, 2026-10-12): read past, the note left people wondering why "Liko" stayed high with the points
   already in. */
.kn-lag { color: var(--text); font-weight: 700; }
/* A picked participant (konkursas.js, plan §9): the way back and to their page under their name; their line outlined. */
.kn-pick-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.kn-row.picked { outline: 1px solid var(--accent); border-radius: 4px; margin: 0 -8px; padding: 0 8px; }

/* „Papildoma informacija" (konkursas.js moreCard, variant B 2026-10-12; mockups data/maketai/konkurso-zurnalas/): how
   "Liko" came out beside the wealth's parts, then the journal — fifteen lines a page, so the card keeps its height. */
.kn-more { margin-top: 12px; }
.kn-more summary { cursor: pointer; }
.kz-body { display: flex; flex-direction: column; gap: 18px; }
.kz-top { display: grid; gap: 18px; }
.kz-h { font: 600 15px 'Chakra Petch', sans-serif; color: var(--text); margin-bottom: 6px; }
.kz-calc { display: flex; flex-direction: column; }
.kz-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.kz-line .kz-k { color: var(--text-2); }
.kz-line .kz-v { text-align: right; font-weight: 600; }
.kz-line .kz-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.kz-line.sum .kz-k, .kz-line.sum .kz-v { color: var(--text); font-weight: 700; }
.kz-line.total { border-bottom: none; }
.kz-line.total .kz-v { font: 700 22px 'Chakra Petch', sans-serif; }
.card p.kz-warn { color: #F28A70; font-size: 13px; margin-top: 6px; }
.kz-table { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto 90px; gap: 6px 12px; align-items: center; }
.kz-th { font-size: 12px; color: var(--muted); text-align: right; }
.kz-pn { color: var(--text-2); }
.kz-pn.total { color: var(--text); font-weight: 700; }
.kz-n { text-align: right; font-variant-numeric: tabular-nums; }
.kz-table b { text-align: right; font-weight: 600; white-space: nowrap; }
.kz-table b.up, .kz-m.up { color: #6FD39A; }
.kz-table b.down, .kz-m.down { color: #F28A70; }
.kz-sp svg { width: 90px; height: 26px; display: block; }
.card p.kz-cases { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.kz-cases b { color: var(--text); }
.kz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kz-list { display: flex; flex-direction: column; }
.kz-ev {
  display: grid; grid-template-columns: 96px 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 36px;
  border-bottom: 1px solid var(--line-soft);
}
.kz-t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kz-ic { width: 26px; height: 26px; }
.kz-coin { display: inline-flex; align-items: center; justify-content: center; }
.kz-coin .gi { width: 16px; height: 16px; color: var(--coin); }
.kz-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.kz-what .pk-it-stats { min-height: 0; font-size: 12px; }
.kz-m { font-weight: 600; white-space: nowrap; }
.kz-q { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.kz-fate { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.kz-fate.ok { background: #15301F; color: #6FD39A; }
.kz-fate.warn { background: #3A2019; color: #F28A70; }
.kz-fate.gone { background: var(--surface-2); color: var(--muted); }
@media (max-width: 480px) {
  .kz-table { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px 10px; }
  .kz-table .kz-sp { display: none; }
  .kz-ev { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 8px; padding: 4px 0; }
  .kz-ev .kz-t { grid-column: 1 / -1; }
}

.kn-groups { display: grid; gap: 12px; margin-top: 12px; }
.kn-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 58px; gap: 4px 10px; align-items: center;
  min-height: 38px; border-bottom: 1px solid var(--line-soft);
}
.kn-row:last-child { border-bottom: none; }
.kn-row .name { display: flex; gap: 6px; align-items: center; min-width: 0; font-weight: 500; white-space: nowrap; }
.kn-row .name > :first-child { overflow: hidden; text-overflow: ellipsis; }
/* A name opens the member's page (game.js contestName): the line's own colour, gold under the pointer. */
a.kn-who { color: inherit; }
a.kn-who:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.kn-left { grid-column: 2 / -1; margin-top: -6px; padding-bottom: 6px; font-size: 13px; color: var(--muted); }
.kn-row.me { background: var(--surface-2); border-radius: 4px; margin: 0 -8px; padding: 0 8px; }
.kn-row.me .name, .kn-row.me .kn-pts { color: var(--accent); }
.kn-row.zero { opacity: .55; }
/* The jets' page (konkursas.js jetsCard, pager): the card's own 12 px between rows, as before the pages. */
.kn-jets { display: flex; flex-direction: column; gap: 12px; }
.kn-jet { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 38px; }
.kn-jet .lt-tile { width: 30px; height: 30px; }
.kn-jet .pk-it-stats { min-height: 0; flex-wrap: nowrap; font-size: 12px; }
.kn-jet .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-rules { margin-top: 12px; }
.kn-rules summary { cursor: pointer; }
/* The rules as a picture (konkursas.js rulesCard, variant B 2026-10-12): the tiers' frames with points and cost, the
   roll's scale under them; what counts beside with larger icons; four short rules under both. */
.kr-top { display: grid; gap: 20px; }
.kr-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kr-sub { font: 600 12px 'Chakra Petch', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kr-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.kr-tier { gap: 4px; padding: 10px 4px 8px; cursor: default; }
.pk-it.kr-tier .lt-tile { width: min(56px, 70%); }
.kr-pts { font: 700 20px/1.1 'Chakra Petch', sans-serif; color: var(--text); }
.kr-cost { font: 600 14px 'Chakra Petch', sans-serif; color: var(--text-2); }
.kr-roll { display: flex; height: 42px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.kr-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; font-size: 11px;
  color: var(--text-2); white-space: nowrap; }
.kr-seg b { font: 700 14px 'Chakra Petch', sans-serif; color: var(--text); }
.kr-seg.s0 { background: var(--surface-2); }
.kr-seg.s1 { background: color-mix(in srgb, var(--accent) 16%, transparent); border-left: 1px solid var(--line); }
.kr-seg.s2 { background: color-mix(in srgb, var(--accent) 34%, transparent); border-left: 1px solid var(--line); }
.kr-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.kr-srci { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 500; color: var(--text); }
.kr-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px;
  border-radius: 8px; background: var(--surface-2); color: var(--text-2); }
.kr-ic .gi { width: 22px; height: 22px; }
.kr-ic.sm { width: 26px; height: 26px; border-radius: 6px; }
.kr-ic.sm .gi { width: 15px; height: 15px; }
.kr-rules { display: grid; gap: 8px 24px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.kr-rule { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }

/* The Apžvalga card (app.js contestCard): the viewer's place, their group's top three, the way to the table. */
.kn-card { margin: 0 0 12px; }
.kn-card .kn-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.kn-card .kn-line .big { font-size: 34px; }
.kn-card .kn-mini { display: grid; }
.kn-card a.kn-go { justify-self: end; font-weight: 600; white-space: nowrap; padding-top: 6px; }

@media (min-width: 900px) {
  .kn-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .kn-rules, .kn-more { margin-top: 16px; }
  .kr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  /* One column beside the frames: the four ways fill its height instead of leaving its lower half empty. */
  .kr-src { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pk-it.kr-tier .lt-tile { width: 64px; }
  .kr-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 36px; }
  /* The labels three times, the numbers twice their old 13 / 20 px (user, 2026-10-09); below 1300 px a little smaller,
     so "Liko" with its coin still fits its third. */
  .kn-me { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 36px; align-items: start; }
  .kn-me .kn-score { display: contents; }
  .kn-mine {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; grid-column: 1;
    grid-row: 1 / span 3; align-self: stretch; padding: 0 36px 0 0; border-bottom: none; border-right: 1px solid var(--line);
  }
  .kn-mine .kn-prize-line { flex-direction: row; align-items: baseline; gap: 10px; margin-top: 4px; }
  .kn-prize-k { font-size: clamp(22px, 2.2vw, 30px); }
  .kn-prize { font-size: clamp(32px, 3.1vw, 40px); }
  .kn-stats { grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 24px; }
  .kn-stats > div { flex-direction: column; justify-content: flex-start; gap: 8px; }
  .kn-me .kn-pieces-wrap, .kn-me .kn-lag { grid-column: 2; }
  .kn-title { font-size: clamp(24px, 2.5vw, 34px); }
  .kn-big { font-size: clamp(110px, 10vw, 150px); }
  .kn-of { font-size: clamp(28px, 2.6vw, 38px); }
  .kn-grp { font-size: 20px; }
  .kn-k { font-size: clamp(28px, 2.9vw, 39px); }
  .kn-v { font-size: clamp(32px, 3.1vw, 40px); }
  .pk-its.kn-pieces { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
  .kn-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 32px; align-items: center; }
  .kn-card .label { grid-column: 1 / -1; }
}
/* Four groups to a row, the rest beside the jets, which fill what is left of the last row (konkursas.js --jet-span;
   user, 2026-10-12: "4 grupes vienoj juostoj, o MP ir geriausia zaneta antroj juostoj"). All five in one row cut the
   names at 1300 px ("aKus…"): a group's line needs ~260 px. Below 1280 px the three columns above stay; the narrower
   line is in the block below. */
@media (min-width: 1280px) {
  .kn-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kn-groups > .kn-jet-card { grid-column: span var(--jet-span, 4); }
}
/* On a computer the prize (and the organizer's mic) leaves the name for the second line's right end, under the
   points: "PREMIUM 1 mėn." is 92 px, and beside three frames it left "Migas_LTU" no room at all in a 293 px card
   (user, 2026-10-14: variant B, data/maketai/konkursas-premium/; a phone keeps it beside the name). The name's box
   gives its children to the row's grid; what it set (weight, no wrap, colour) they still inherit. The narrower
   place and points columns from 900 px too: without them, in the three cards at 900 px "likęs pliusas 199,75" ran
   17 px under the prize. Simple: at 900–949 px it still runs up to 11 px under "PREMIUM 1 mėn." (before, nearly
   every name there was cut); from 950 px nothing touches, from 1024 px nothing is cut. */
@media (min-width: 900px) {
  .kn-groups .kn-row { grid-template-columns: 18px minmax(0, 1fr) auto 44px; gap: 4px 8px; }
  .kn-groups .kn-row .name { display: contents; }
  .kn-groups .kn-row .name > :first-child { grid-column: 2; grid-row: 1; min-width: 0; }
  .kn-groups .kn-row > .kn-place { grid-column: 1; grid-row: 1; }
  .kn-groups .kn-row > .kn-tally { grid-column: 3; grid-row: 1; }
  .kn-groups .kn-row > .kn-pts { grid-column: 4; grid-row: 1; }
  .kn-groups .kn-row > .kn-left { grid-row: 2; white-space: nowrap; }
  .kn-groups .kn-row .kn-gem, .kn-groups .kn-row .kn-org {
    grid-column: 2 / -1; grid-row: 2; justify-self: end; align-self: start; margin-top: -5px;
  }
}

/* ── Dėžių savaitė (konkursas.js caseGroupCard, game.js caseRow; docs/plan-konkursas-dezes.md §6, variant B) ──────────
   A line: one case tile with every counted case, its second row the prize, the elite among them and the item points —
   the prize leaves the name, so a long one still fits at 360 px. On a computer the first group is a table over two
   columns and two rows (the class "kd" outranks the four-to-a-row grid above), the others and the pulls in the third. */
.kd-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kn-groups.kd .kn-row > .kn-tally { flex-wrap: nowrap; }
.kd-n { font: 600 14px 'Chakra Petch', sans-serif; text-align: right; white-space: nowrap; }
.kd-best { width: 26px; height: 26px; justify-self: center; }
span.kd-best.muted { display: flex; align-items: center; justify-content: center; }
.kd-head { min-height: 26px; border-bottom: 1px solid var(--line); }
.kd-h { font: 600 11px 'Chakra Petch', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.kd-h:nth-child(2) { text-align: left; }
.kd-h:nth-child(6) { text-align: center; }
/* The prizes one group a line, the chips wrapping under the name (the mockup's two columns overlapped at 360 px). */
.kr-src.kd-prizes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kd-prize { flex-wrap: wrap; row-gap: 6px; }
.kd-prize-list { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) {
  .kn-groups.kd { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
  .kn-groups.kd > .kd-main { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .kn-groups.kd > .kd-side { grid-column: 3; }
  .kn-groups.kd > .kn-jet-card { grid-column: 3; }
  .kn-groups .kn-row.kd-wide { grid-template-columns: 22px minmax(0, 1fr) 64px 64px 92px 84px 64px; gap: 4px 12px; }
  .kn-groups .kn-row.kd-wide > * { grid-row: 1; }
  .kn-groups .kn-row.kd-wide .name { display: flex; grid-column: 2; }
  .kn-groups .kn-row.kd-wide .kn-gem, .kn-groups .kn-row.kd-wide .kn-org, .kn-groups .kn-row .kd-left .kn-gem {
    margin-top: 0; align-self: center;
  }
  .kn-groups .kn-row.kd-wide > :nth-child(1) { grid-column: 1; }
  .kn-groups .kn-row.kd-wide > :nth-child(2) { grid-column: 2; }
  .kn-groups .kn-row.kd-wide > :nth-child(3) { grid-column: 3; }
  .kn-groups .kn-row.kd-wide > :nth-child(4) { grid-column: 4; }
  .kn-groups .kn-row.kd-wide > :nth-child(5) { grid-column: 5; }
  .kn-groups .kn-row.kd-wide > :nth-child(6) { grid-column: 6; }
  .kn-groups .kn-row.kd-wide > :nth-child(7) { grid-column: 7; }
}

/* ── Scrap'ų savaitė (konkursas.js scrapMeCard, scrapGroupCard; docs/plan-konkursas-scrap.md §6) ─────────────────────
   On the case contest's grid ("kd"). The top card's week is seven framed figures, no bars (user, 2026-11-11); a line
   carries today's bar to the cap; the side card names who filled a day. */
.sc-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sc-wd { display: grid; gap: 4px; justify-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 8px 0; }
.sc-wd.today { border-color: var(--text-2); }
.sc-wd.later { border-style: dashed; }
.sc-dl { font-size: 12px; color: var(--muted); }
.sc-wd.today .sc-dl { color: var(--text); font-weight: 600; }
.sc-tick { color: var(--accent); }
.sc-dv { font: 600 15px 'Chakra Petch', sans-serif; white-space: nowrap; }
.sc-wd.later .sc-dv { color: var(--muted); }
@media (max-width: 480px) { .sc-wk { gap: 4px; } .sc-dv { font-size: 13px; } }

.sc-today { display: inline-grid; grid-template-columns: 64px auto; gap: 8px; align-items: center; }
.sc-today.wide { grid-template-columns: minmax(60px, 1fr) 58px; width: 100%; }
.sc-tbar { display: block; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.sc-tbar i { display: block; height: 100%; background: var(--muted); border-radius: 4px; }
.sc-today.full .sc-tbar i, .sc-cap .sc-tbar i { background: var(--accent); }
.sc-tv { font: 600 13px 'Chakra Petch', sans-serif; text-align: right; white-space: nowrap; }
.sc-today.full .sc-tv { color: var(--accent); }

.sc-left { gap: 10px; padding-top: 2px; }
.kn-me .sc-week { display: grid; gap: 14px; }
.sc-src { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; }
.sc-sp { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.sc-sp .kn-k { font-size: 13px; }
.sc-sp b { font: 600 16px 'Chakra Petch', sans-serif; }
.sc-sp.off b { color: var(--muted); text-decoration: line-through; }
.sc-note { margin: 0; font-size: 13px; }

.sc-capped { display: grid; gap: 10px; }
.sc-cline { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.sc-cday { font: 600 12px 'Chakra Petch', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-cnames { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sc-cname { font-weight: 500; }

.sc-one { display: flex; align-items: center; gap: 12px; }
.sc-one .kr-tier { flex: 0 0 72px; width: 72px; height: 64px; }
.sc-eq { font: 700 20px 'Chakra Petch', sans-serif; white-space: nowrap; }
.sc-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sc-cap b { font: 700 18px 'Chakra Petch', sans-serif; color: var(--accent); white-space: nowrap; }

.sc-wide .kd-h:nth-child(3) { text-align: left; }
@media (min-width: 900px) {
  .kn-groups .kn-row.sc-wide { grid-template-columns: 22px minmax(0, 1fr) 220px 56px 72px; gap: 4px 14px; }
  .kn-groups .kn-row.sc-wide > * { grid-row: 1; }
  .kn-groups .kn-row.sc-wide .name { display: flex; grid-column: 2; }
  .kn-groups .kn-row.sc-wide .kn-gem, .kn-groups .kn-row.sc-wide .kn-org { grid-row: 1; margin-top: 0; align-self: center; }
  .kn-groups .kn-row.sc-wide > :nth-child(1) { grid-column: 1; }
  .kn-groups .kn-row.sc-wide > :nth-child(3) { grid-column: 3; }
  .kn-groups .kn-row.sc-wide > :nth-child(4) { grid-column: 4; }
  .kn-groups .kn-row.sc-wide > :nth-child(5) { grid-column: 5; }
  .kn-groups .kn-row.sc-row .kn-left { white-space: normal; }
  .kn-groups .kn-row.sc-row .kd-left .kn-gem { grid-row: auto; margin-top: 0; justify-self: auto; }
}

/* ── Prekyba — Rinka's second tab and the Apžvalga card (docs/plan-prekyba.md; mockups data/maketai/prekyba/) ─────────
   Cards keep one height whatever the data (user, 2026-10-07: "išvengti sproginėjančių kortelių"): the list and the open
   batch page their rows, a row is one line, every frame is one height. */
.pk-up { color: var(--sk-green); } .pk-down { color: var(--warn); }
.pk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.pk-pick { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: 600 15px 'Barlow', sans-serif; }
.pk-grid { display: flex; flex-direction: column; gap: 12px; }
.pk-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pk-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pk-line > span:last-child { font-weight: 600; white-space: nowrap; }
.pk-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.pk-note { font-size: 13px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-chip { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font: 600 14px 'Barlow', sans-serif; cursor: pointer; }
.pk-chip:not(.on) { opacity: .5; border-style: dashed; }
.pk-chip-name { color: var(--text-2); font-weight: 500; }
.pk-curve { width: 100%; height: auto; display: block; }
.pk-zero { stroke: var(--line); stroke-width: 1; }
.pk-path { fill: none; stroke: var(--accent); stroke-width: 2; }
.pk-dash { stroke-dasharray: 4 4; stroke: var(--muted); }
.pk-mark { stroke: var(--line-soft); stroke-width: 1; }
.pk-axis { fill: var(--muted); font-size: 11px; font-family: 'Barlow', sans-serif; }

/* PARTIJOS: date, "13/17", the pieces as squares that narrow to keep one line, the result */
.pk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.pk-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pk-rows { display: flex; flex-direction: column; gap: 4px; }
.pk-strip { display: grid; grid-template-columns: 82px 44px minmax(0, 1fr) 66px; gap: 8px; align-items: center; height: 32px; font-size: 14px; }
button.pk-strip { width: calc(100% + 12px); margin: 0 -6px; padding: 0 6px; background: none; border: 0; border-radius: 4px; color: inherit;
  font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
button.pk-strip:hover { background: var(--surface-2); }
button.pk-strip.sel { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.pk-strip > :last-child { text-align: right; font-weight: 600; }
.pk-when { color: var(--text-2); white-space: nowrap; }
.pk-n { color: var(--text-2); font-size: 13px; }
.pk-squares { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 2px; }
.pk-sq { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex: none; }
.pk-squares .pk-sq { flex: 0 1 12px; min-width: 2px; }
.pk-sq.up { background: var(--sk-green); } .pk-sq.down { background: var(--warn); }
.pk-sq.held { border: 1px dashed var(--text-2); }
.pk-blank { visibility: hidden; }
.pk-list-card .pager { margin-top: auto; }
.pk-made-head { align-items: center; min-height: 28px; gap: 8px; }
.pk-made-head > .label, .pk-made-head .muted { white-space: nowrap; }
.pk-made-head .pager { padding-top: 0; gap: 6px; font-size: 12px; }
.pk-made-head .pager-btn { min-width: 30px; padding: 2px 9px; font-size: 13px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.pager-btn { min-width: 44px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; color: var(--text);
  font: 600 14px 'Barlow', sans-serif; cursor: pointer; }
.pager-btn:disabled { opacity: .35; cursor: default; }

/* PIRKTA / dėžių eilutės: [good] qty ⇄ coin unit … sum, the stock note in its own slot */
.pk-buy { display: flex; flex-direction: column; gap: 6px; }
.pk-trade { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; column-gap: 8px; align-items: center; min-height: 34px; }
.pk-trade-what { display: inline-flex; align-items: center; gap: 6px; font-family: 'Chakra Petch', sans-serif; font-size: 15px; }
.lt-tile.pk-good { width: 28px; height: 28px; }
.pk-swap { width: 20px; height: 20px; color: var(--trade); filter: drop-shadow(1.5px 1.5px 0 #000); }
/* The trade line's price (PIRKTA, DĖŽĖS): coinAmount's coin at 80 % of the 14 px text, like every other coin (user,
   2026-10-08 — it was 15 px before). */
.pk-coin { display: inline-flex; align-items: center; gap: 4px; color: var(--coin); font-family: 'Chakra Petch', sans-serif; font-size: 14px; }
.pk-coin { font-weight: 600; }
/* The 30 days' result: the coin before the big number, as everywhere a sum is money — 24 px, the 80 % rule. */
.pk-big-coin { width: 24px; height: 24px; align-self: center; color: var(--coin); filter: drop-shadow(1.5px 1.5px 0 #000); }
.pk-trade .pk-sum { grid-column: 5; grid-row: 1; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 17px; }
.pk-trade .pk-stock { grid-column: 4; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-case .pk-trade .pk-stock:empty { display: none; }

/* PAGAMINTA and PERPARDAVIMAI: pieces framed as the member page's kit (.gtile's frame), one height */
.pk-its { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
/* A piece is as tall as what it holds, and every piece alike: the roll always keeps two lines (a weapon's two stats
   wrap in a narrow frame), centred when it needs one — so the frames hug their content and still line up (user,
   2026-10-08: "per daug ištemptos" with a fixed 124 px row, 25–39 px empty on a phone). */
.pk-it { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 5px 2px 4px;
  border-radius: 8px; cursor: help; font-size: 11px; }
.pk-it.held { border-style: dashed; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 10%, transparent), transparent 70%); }
.pk-it .lt-tile { pointer-events: none; width: min(44px, 80%); height: auto; aspect-ratio: 1; border: none; background: none; }
.pk-it .lt-tile-img { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
.pk-it-stats { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0 4px; min-height: 2.4em;
  font: 600 11px/1.2 'Chakra Petch', sans-serif; }
.pk-it-stats span { display: inline-flex; align-items: center; gap: 2px; }
.pk-it-stats .gi { width: 10px; height: 10px; }
.pk-it-price { margin-top: 1px; font: 600 12.5px 'Chakra Petch', sans-serif; color: var(--text); }
.pk-it.held .pk-it-price { color: var(--muted); }
.pk-it-diff { font: 600 11.5px 'Chakra Petch', sans-serif; }
.pk-it-deal { display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px 'Chakra Petch', sans-serif; color: var(--text); white-space: nowrap; }
.pk-it-deal .gi { width: 14px; height: 14px; flex: none; color: var(--trade); filter: drop-shadow(1px 1px 0 #000); }
.pk-it-deal:first-of-type { margin-top: 1px; }
/* The open batch's rows are one height (1fr — the tallest piece), so a page padded with blanks keeps the card's height. */
.pk-batch-card .pk-its { grid-template-rows: repeat(3, 1fr); }
.pk-resales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A resale's frame is wide (3 a row on a phone, 12 on a computer): its roll fits one line, so no second line kept. */
.pk-resales .pk-it-stats { min-height: 0; }

/* DĖŽĖS: three kinds; what fell — under the case column, led by the game's "top" mark */
.pk-case-grid { display: flex; flex-direction: column; gap: 12px; }
.pk-case { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.pk-case-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pk-case-head > :last-child { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 18px; }
.pk-case-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
.pk-open { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.pk-open > :last-child { margin-left: auto; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 17px; }
.pk-arrow { width: 16px; height: 16px; color: var(--muted); }
.pk-drawn { display: flex; align-items: center; gap: 8px; }
.pk-top-mark { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.pk-top-mark .gi { width: 20px; height: 20px; color: var(--trade); filter: drop-shadow(1.5px 1.5px 0 #000); }
.pk-out { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pk-tier { display: inline-flex; align-items: center; gap: 3px; }
.pk-tier b { font: 600 12.5px 'Chakra Petch', sans-serif; color: var(--text-2); }
.pk-drawn .lt-tile.pk-good { width: 24px; height: 24px; }
.pk-rest { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); font: 600 12px 'Chakra Petch', sans-serif; color: var(--text-2); cursor: help; }

/* Apžvalga: the unit's three best and three worst */
.pk-top { display: flex; flex-direction: column; gap: 14px; }
.pk-top-col { display: flex; flex-direction: column; }
.pk-top-col > .label { margin-bottom: 4px; }
.pk-top-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px;
  border-bottom: 1px solid var(--line-soft); color: var(--text); }
.pk-top-row:hover { color: var(--text); background: var(--surface-2); }
.pk-top-row > :last-child { font: 700 17px 'Chakra Petch', sans-serif; }
.pk-top-row.me b { color: var(--accent); }
.pk-top-place { font: 600 15px 'Chakra Petch', sans-serif; color: var(--muted); text-align: center; }
.pk-top-name { display: flex; flex-direction: column; min-width: 0; }
.pk-top-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-mine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 6px; background: var(--surface-2); color: var(--text); }
.pk-mine b { color: var(--accent); }
.pk-more { margin-left: auto; color: var(--accent); font-weight: 600; }
.pk-mu-chip { align-self: flex-start; }

@media (max-width: 899.98px) {
  .pk-sq { width: 10px; height: 10px; }
  .pk-squares .pk-sq { flex-basis: 10px; }
  .pk-detail .card { padding: 12px; }
  .pk-trade { row-gap: 0; }
  .pk-trade .pk-stock { grid-column: 1 / -1; grid-row: 2; padding-left: 36px; min-height: 16px; font-size: 12px; }
  .pk-it.held .pk-it-price { font-size: 11px; letter-spacing: -0.02em; }
}
@media (min-width: 900px) {
  .pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .pk-span { grid-column: 1 / -1; }
  .pk-col { gap: 16px; }
  .pk-col > .card, .pk-detail > .card { flex: 1; }
  .pk-strip { grid-template-columns: 90px 52px minmax(0, 1fr) 70px; }
  .pk-its { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
  .pk-it { font-size: 12px; }
  .pk-it-stats { font-size: 11.5px; }
  .pk-it-price, .pk-it-deal { font-size: 13px; }
  .pk-batch-card .pk-its { grid-template-rows: repeat(2, 1fr); }
  .pk-resales { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pk-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .pk-case-grid .pk-case { border-bottom: none; padding-bottom: 0; }
  .pk-case-grid .pk-case + .pk-case { border-left: 1px solid var(--line-soft); padding-left: 24px; }
  .pk-drawn .pk-out { flex-wrap: nowrap; }
  .pk-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .pk-mine { grid-column: 1 / -1; }
}
.pk-detail { display: contents; }

/* Apžvalga's highlights (plan §10.19, user 2026-10-09): the viewer's band, then the unit's — a glance at each page,
   its way there at the bottom right, so cards side by side end on one line. The contest stands above both. */
.band-title {
  margin: 4px 0 8px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.18em;
  color: var(--accent);
}
.band { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
/* The unit card that opens Apžvalga (app.js muCard — Turtas' header until 2026-10-10), above the contest. Across a
   computer's whole width its stats grow to fill their row — on Turtas they had left half the card empty. */
.hl-mu { margin-bottom: 14px; }
@media (min-width: 900px) {
  .hl-mu > .tr-stats > .tr-stat { flex: 1 1 auto; }
}
.hl-go { margin-top: auto; align-self: flex-end; font-weight: 600; white-space: nowrap; }
.hl .tr-big-row { align-items: center; flex-wrap: nowrap; }
.hl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.hl-under { margin-top: -8px; }
.hl-sub { margin-bottom: -6px; }
.hl-small { display: inline-flex; align-items: center; gap: 5px; font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 18px; }
.hl-small .gi { width: 15px; height: 15px; fill: var(--coin); }
.hl-stat { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 17px; white-space: nowrap; }
.hl-spark svg { display: block; width: 100%; height: 56px; }
.hl-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -6px; }
.hl-pick .lt-tile { width: 36px; height: 36px; }
.hl-pick-t { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; }
.hl-flags { display: inline-flex; gap: 3px; flex: none; }
.hl-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.hl-drops { margin-top: -6px; }
.hl .w-leak { font-size: 13px; }
.hl-line { display: grid; grid-template-columns: 1fr; gap: 3px; }
.hl-line-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hl-rows { display: flex; flex-direction: column; gap: 2px; }
.hl-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 32px;
  color: var(--text);
}
.hl-row .lt-tile.small { width: 24px; height: 24px; }
.hl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-row .rk-chg { min-width: 44px; text-align: right; font-size: 13px; }
.hl-art { display: flex; flex-direction: column; gap: 3px; padding: 5px 0; color: var(--text); min-width: 0; }
.hl-art + .hl-art { border-top: 1px solid var(--line-soft); }
.hl-art-meta { display: flex; align-items: center; gap: 8px; }
.hl-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
/* A phone: the week's drops in the small frames, two lines at most; the week's chart dates on one line at 360 px. */
@media (max-width: 899.98px) {
  .hl-drops { gap: 4px 6px; }
  .hl-drops .dr-tile { padding: 1px 5px 1px 1px; }
  .hl-drops .dr-img { width: 20px; height: 20px; }
  .hl-drops .dr-tile b { font-size: 13px; }
  .chart { gap: 5px; }
  .chart .date { font-size: 11px; }
}
@media (min-width: 900px) {
  .band { display: grid; gap: 16px; }
  .band-me { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .band-mu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Lenktynės (lenktynes.js, docs/plan-lenktynes-web.md — variant C, 2026-10-10): a pixel scene on a canvas, nothing
   over the camels (user, 2026-10-11), the banner under it — the time, the commentary, the winner; then the camels and
   the bet in one plate, the numbers, the last results. Its scale is a whole number, so the pixels stay sharp. */
.race-guest nav.tabs, .race-guest .me-link { display: none !important; }
/* The races' tab: the eighth on a phone's bottom bar (user, 2026-10-25 — variant B, data/maketai/skirtukai-lenktynes/)
   and on the top bar from 1200 px. Between them the top bar has no room, measured with the clock and the avatar: at
   1100 the eighth tab pushed the avatar out and cut the time — there the way in is the Apžvalga card. More specific
   than `.tabs > a`, which would otherwise show it. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .tabs > a.tab-roomy { display: none; }
}
/* Eight on a phone's bar: labels 11 px and icons 20 px leave 8 px between the words on a 360 px phone, where 12 px left
   4.6 and the words ran into one line. Only the bar with the eighth tab: the race page's own two keep their pixels. */
@media (max-width: 899.98px) {
  .tabs:has(> a.tab-roomy) > a, .tabs > .tab-more { font-size: 11px; }
  .tabs:has(> a.tab-roomy) > a > svg, .tabs > .tab-more > svg { width: 20px; height: 20px; }
}
/* The commanders' pages (common.js commandTabs — only for those who command). A computer: one more tab, "Vadams".
   A phone: the bar stays eight wide — its eighth, the races, gives way to "Daugiau", which unfolds the races and the
   commanders' pages in a sheet over the bar's right end. */
.tabs > .tab-more {
  flex: 1 1 auto; min-width: 0; padding: 0 2px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-2); font-family: inherit; font-weight: 500; white-space: nowrap;
}
.tabs > .tab-more.here, .tabs > .tab-more.open { color: var(--accent); font-weight: 600; }
.tabs > .tab-more.here { box-shadow: inset 0 2px 0 var(--accent); }
.more-sheet {
  position: fixed; inset: auto 8px calc(72px + env(safe-area-inset-bottom)) auto; margin: 0; padding: 6px;
  min-width: 220px; flex-direction: column; gap: 2px;
  background: #121410; color: var(--text); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 10px 24px -8px #000;
}
.more-sheet:popover-open { display: flex; }
.more-sheet > a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 6px;
  color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none;
}
.more-sheet > a > svg { flex: none; color: var(--text-2); }
.more-sheet > a[aria-current="page"], .more-sheet > a[aria-current="page"] > svg { color: var(--accent); }
@media (max-width: 899.98px) {
  .tabs.has-cmd > a.tab-roomy, .tabs > a.tab-cmd { display: none; }
}
@media (min-width: 900px) {
  .tabs > .tab-more, .more-sheet { display: none !important; }
}
/* Room for the ninth tab, measured 2026-11-10 with a second unit's switch by the avatar (tabs to 1077 px, "Vadams" 114,
   the time with the avatar 187 + 36): the whole bar fits from 1360 px. Narrower, the time is its ring alone; under
   1260 the tab is its icon alone (its name — the title); under 1100 and again under 960 the tabs close up. */
@media (min-width: 900px) and (max-width: 1359.98px) {
  .tabs.has-cmd .fresh-t { display: none; }
}
@media (min-width: 900px) and (max-width: 1259.98px) {
  .tabs > a.tab-cmd > .tab-word { display: none; }
}
@media (min-width: 960px) and (max-width: 1099.98px) {
  .tabs.has-cmd > a { padding: 0 10px; }
}
@media (min-width: 900px) and (max-width: 959.98px) {
  .tabs.has-cmd > a { padding: 0 6px; }
}
.rc-scene { position: relative; padding: 0; gap: 0; overflow: hidden; background: #1A1D24; align-items: center; }
.rc-scene canvas { display: block; image-rendering: pixelated; }
.rc-chip { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.rc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "+N tšk." by the viewer's winning camel (dizainas E4): placed by JS each frame, its left middle on the point. */
.rc-gain {
  position: absolute; left: 0; top: 0; transform: translate(0, -50%); padding: 2px 8px; border-radius: 6px;
  background: rgba(13, 14, 12, 0.86); color: #7BC96F; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 16px; white-space: nowrap; pointer-events: none;
}
.rc-banner {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; min-height: 44px;
  background: rgba(13, 14, 12, 0.9); border-top: 1px solid var(--line);
}
.rc-banner-label {
  flex: none; display: flex; align-items: center; padding: 0 10px; background: var(--accent); color: var(--ground);
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
}
.rc-banner p { margin: 0; align-self: center; padding: 6px 12px; font-size: 13px; line-height: 1.3; }
.rc-banner b { color: var(--accent); font-weight: 600; }
#cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.rc-pill { flex: none; font-size: 11px; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.rc-pill.fed { color: #7BC96F; border-color: #2F4A2B; }
.rc-look { display: inline-flex; align-items: center; gap: 6px; }
.rc-stars { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.rc-stars .on { color: var(--accent); }
.rc-temp { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; }
.rc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rc-last-rows { display: flex; flex-direction: column; }
.rc-last-row {
  display: flex; align-items: baseline; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.rc-last-row > .muted:first-child { flex: 0 0 52px; }
.rc-last-row > .muted-2 { flex: none; white-space: nowrap; }   /* 360 px broke "10 tšk." in two; the name gives way */
/* The bet bar (variant B, user 2026-10-10) hangs under the scene as its lower half: the camel, the stake, the bet. */
.rc-scene:has(+ .rc-betbar:not([hidden])) { border-bottom: none; border-radius: 6px 6px 0 0; }
.rc-betbar { border-color: var(--accent); border-radius: 0 0 6px 6px; padding: 14px 16px; }
.rc-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rc-pick, .rc-stake {
  font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
}
/* A camel's button, two lines (user, 2026-10-11): its colour, place and name; its form, temperament, marks and odds.
   The name has the line to itself and wraps, never cut — two wild camels differ only in "#29" / "#33" at its end; the
   second line sits at the bottom, so a row of buttons keeps its lines level, and keeps to one line: too many marks are
   cut, never the odds — the button does not grow. */
.rc-pick {
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; min-height: 44px;
  padding: 6px 10px; border-radius: 6px; text-align: left;
}
.rc-pick:disabled { cursor: default; }
.rc-pick-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.rc-pick .rc-chip { width: 10px; height: 10px; margin-top: 4px; }
.rc-pick .rc-name { font-weight: 600; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.rc-pick-place:empty { display: none; }
.rc-pick-look { display: flex; align-items: center; gap: 8px; padding-left: 18px; }
.rc-pick-marks { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.rc-pick-marks > * { flex: none; }   /* cut at the end, not squeezed: 360 px shrank the temperament to a dot */
.rc-pick-odds { flex: none; font-family: 'Chakra Petch', sans-serif; font-weight: 700; }
.rc-pick[aria-pressed="true"] { background: #2A2614; border-color: var(--accent); }
.rc-bet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
/* A phone: one row of equal buttons — at 360 px "Visi (1 079)" fell to a line of its own. */
.rc-stakes { display: grid; grid-template-columns: repeat(var(--stakes, 5), minmax(0, 1fr)); gap: 6px; flex: 1 1 100%; }
.rc-stake { font-size: 14px; min-height: 44px; padding: 0 4px; border-radius: 999px; white-space: nowrap; }
.rc-stake-all { display: none; }
.rc-stake[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ground); }
.rc-bet-act { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 1 1 260px; }
.rc-bet-win { font-size: 13px; color: var(--text-2); text-align: right; }
.rc-bet-win b { display: block; color: var(--text); font-size: 15px; }
.rc-bet-go {
  font: inherit; font-weight: 700; font-size: 16px; min-height: 48px; padding: 0 22px; border: none; border-radius: 6px;
  background: var(--accent); color: var(--ground); cursor: pointer;
}
.rc-bet-go:disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
.rc-bet-error { color: var(--warn); font-size: 14px; }
.rc-bet-error b { font-weight: 600; }
.rc-bet-done { color: var(--text-2); }
.rc-bet-done.ok { color: #7BC96F; }
.rc-bet-done b { color: var(--text); font-weight: 600; }
/* The tabs Mano · Lyderiai · Istorija (variant A, user 2026-10-10). Every list keeps its rows — empty ones too — so a
   card is as tall with one race as with eight. */
.rc-mine-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rc-unit { font-size: 20px; color: var(--text-2); }
.rc-titles { display: flex; flex-direction: column; gap: 6px; }
.rc-title {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; min-height: 36px;
  box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted);
}
.rc-title.got { border-color: #6B5A2A; background: #2A2614; color: var(--text); }
.rc-title b { font-weight: 600; }
.rc-title-note { margin-left: auto; font-size: 13px; color: var(--text-2); text-align: right; }
.rc-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.rc-good { color: #7BC96F; }
.rc-camels-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 24px 0 12px;
}
.rc-h2 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 20px; font-weight: 700; }
.rc-camels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.rc-camel { border-top: 4px solid var(--accent); gap: 10px; }
.rc-camel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rc-camel-name { font-weight: 600; font-size: 17px; }
.rc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.rc-facts > div { display: flex; flex-direction: column; gap: 2px; }
.rc-facts b { font-weight: 600; }
.rc-facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* The shop (dizainas E5, mockup D21): a camel on sand, a price on every button, a confirmation before the money. */
.rc-h2-of { font-weight: 500; font-size: 15px; color: var(--muted); }
.rc-camel-top { display: flex; align-items: center; gap: 14px; }
.rc-camel-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-camel-id .rc-camel-head { flex-wrap: wrap; }
.rc-portrait-box {
  flex: none; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  background: #E9DCC0; border-radius: 6px; width: 150px; height: 166px;
}
.rc-portrait { display: block; image-rendering: pixelated; }
/* Three to a row, equal widths — the panel's six (E6) make two even rows; a wrapping flex broke three into 2 + 1 at
   360 px. */
.rc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rc-actions .rc-act { padding: 4px 6px; text-align: center; }
.rc-act {
  font: inherit; font-weight: 600; font-size: 14px; min-height: 44px; padding: 4px 16px; border-radius: 6px;
  cursor: pointer; background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.rc-act small { font-weight: 500; font-size: 12px; color: var(--text-2); }
.rc-act:disabled { cursor: default; color: #5E6352; }
.rc-act small.short { color: #EF6F50; }
.rc-none { align-items: flex-start; }
.rc-badge-card { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 12px; }
.rc-badge-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 280px; }
.rc-badge-now { display: flex; align-items: center; gap: 10px; }
.rc-market-intro { margin: 0 0 12px; line-height: 1.45; }
/* A phone lists the market a camel a row — the 150 px camel beside its name and button; two half-width cards at 360 px
   cut it. Cards from 600 px, four in a row on PC as the mockup drew them. */
.rc-market { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rc-offer {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 6px 12px;
  padding: 12px; align-items: start;
}
.rc-offer > .rc-portrait-box { grid-row: 1 / 4; }
.rc-offer > .rc-buy { align-self: end; }
.rc-offer-name { font-weight: 600; overflow-wrap: anywhere; }
.rc-offer-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; font-size: 14px;
}
@media (min-width: 600px) {
  .rc-market { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-offer { display: flex; flex-direction: column; gap: 8px; }
  .rc-offer > .rc-portrait-box { width: 100%; }
}
.rc-buy {
  font: inherit; font-weight: 600; font-size: 14px; min-height: 44px; margin-top: auto; border-radius: 6px;
  cursor: pointer; background: var(--accent); color: var(--ground); border: 1px solid var(--accent);
}
.rc-buy:disabled { cursor: default; background: var(--surface-2); color: #5E6352; border-color: var(--line); }
.rc-toast {
  margin: 0 0 12px; padding: 10px 14px; border: 1px solid #2F4A2B; background: #172414; border-radius: 6px;
  color: #7BC96F;
}
.rc-toast.bad { border-color: #4A2B26; background: #241614; color: #EF6F50; }
.rc-bad { color: #EF6F50; }
.rc-good { color: #7BC96F; }
/* The spit (dizainas E6.5): the camel → its offspring; a silhouette until the bot answers, then the newborn appears. */
.rc-bbq-pair { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rc-bbq-box { width: auto; height: auto; flex: 1 1 0; min-height: 96px; position: relative; padding: 6px; }
.rc-bbq-arrow { flex: none; font-family: 'Chakra Petch', sans-serif; font-size: 28px; color: var(--text-2); }
.rc-bbq-unborn canvas { filter: brightness(0); opacity: 0.3; }
.rc-bbq-q {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 36px; color: #3E2512;
}
.rc-bbq-born canvas { animation: rc-born 0.7s ease-out; }
@keyframes rc-born { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.rc-bbq-verdict { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* Gifts (dizainas E6.4, mockup G): what is offered to the viewer, in the accent, above the wallet. */
.rc-gift-in { border-color: var(--accent); margin-bottom: 12px; }
.rc-gift-in .label { color: var(--accent); }
.rc-gift-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rc-gift-who { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-gift-buttons { display: flex; gap: 8px; flex: 1 1 100%; }
.rc-gift-buttons > button { flex: 1; }
.rc-gift-out { margin-top: 12px; gap: 8px; }
.rc-gift-out-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.rc-sheet {
  width: 560px; max-width: calc(100% - 32px); box-sizing: border-box; padding: 18px; border-radius: 8px;
  background: var(--surface); color: var(--text); border: 1px solid var(--accent);
}
.rc-sheet[open] { display: flex; flex-direction: column; gap: 12px; }
/* Opened, the dialog itself holds focus (raceSheet): not the picker's scroller with a ring round sixteen tiles. */
.rc-sheet:focus { outline: none; }
.rc-sheet::backdrop { background: rgba(13, 14, 12, 0.72); }
.rc-sheet-title { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; }
.rc-sheet-body { display: flex; flex-direction: column; gap: 12px; }
.rc-sheet-body > .rc-portrait-box { width: 100%; }
.rc-sheet-cost { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 14px; }
.rc-sheet-label { display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: 14px; }
.rc-sheet-input {
  font: inherit; font-weight: 500; font-size: 16px; min-height: 44px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--ground); color: var(--text);
}
.rc-sheet-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.rc-sheet-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.rc-sheet-cancel, .rc-sheet-ok {
  font: inherit; font-weight: 600; font-size: 14px; min-height: 44px; padding: 0 18px; border-radius: 6px; cursor: pointer;
}
.rc-sheet-cancel { background: transparent; color: var(--text-2); border: 1px solid var(--line); }
.rc-sheet-ok { background: var(--accent); color: var(--ground); border: none; font-weight: 700; }
.rc-sheet-ok.danger { background: #EF6F50; }
.rc-sheet-ok:disabled { cursor: default; background: var(--surface-2); color: #5E6352; }
.rc-picker {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 360px; overflow: auto;
}
.rc-pick-tile {
  font: inherit; font-size: 12px; font-weight: 500; color: #3E2512; background: #E9DCC0; border: 1px solid #C9B994;
  border-radius: 6px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.rc-pick-tile[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.rc-pick-tile:disabled { cursor: default; opacity: 0.55; }
.rc-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rc-seg-group { display: flex; gap: 6px; }
.rc-seg {
  font: inherit; font-size: 14px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
}
.rc-seg[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ground); }
/* The sheikh's bought badge (dizainas E3): a tile of the 16 px badge sheet, scaled by whole pixels in JS. */
.rc-badge-px { flex: none; display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; }
.rc-wallet-big .rc-badge-px { margin-right: 10px; }
.rc-lead { display: flex; flex-direction: column; }
.rc-lead-row {
  display: flex; align-items: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.rc-lead-row:last-child { margin-top: 6px; border-bottom: none; }
.rc-lead-row.me { background: #2A2614; border-radius: 6px; }
.rc-rank { flex: 0 0 28px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: var(--muted); }
.rc-rank.first { color: var(--accent); }
.rc-lead-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-lead-name { font-weight: 500; overflow-wrap: anywhere; }
.rc-lead-row.me .rc-lead-name { font-weight: 700; }
.rc-lead-value { flex: none; text-align: right; font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
.rc-hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.rc-hist-row {
  display: flex; flex-direction: column; gap: 2px; min-height: 58px; box-sizing: border-box; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.rc-hist-row.badged { flex-direction: row; align-items: center; gap: 10px; }
.rc-hist-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-hist-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rc-hist-top b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rc-hist-top span { flex: none; font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
@media (min-width: 900px) {
  .rc-mine-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc-hist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-market { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-gift-buttons { flex: none; }
  .rc-gift-buttons > button { min-width: 140px; }
  /* Ten rows across 1336 px put a name 1200 px from its number: two columns of five, read down, the viewer's own
     row under both. */
  .rc-lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto);
    grid-auto-flow: column; column-gap: 32px; }
  .rc-lead-row:last-child { grid-row: 6; grid-column: 1 / -1; }
  .rc-picks { grid-template-columns: repeat(var(--lanes, 4), minmax(0, 1fr)); }
  .rc-stakes { display: flex; flex-wrap: wrap; flex: 1 1 300px; }
  .rc-stake { padding: 0 14px; }
  .rc-stake-all { display: inline; }
  .rc-banner { min-height: 48px; }
  .rc-banner p { font-size: 17px; padding: 8px 14px; }
  .rc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Gidas: darbuotojai v0.27 (gidas.html, docs/plan-gidas-darbuotojai.md) ─────────────────────────────────────────
   One reading column as Straipsnis; the infographic's look in the site's tokens. */
.gd-page { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.gd-label { display: flex; align-items: center; gap: 6px; }
.gd-label .gi { width: 14px; height: 14px; }
.gd-aside { margin-left: auto; font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0;
  color: var(--muted); text-align: right; }
.gd-earn { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--line-soft); }
.gd-label + .gd-earn { border-top: 0; padding-top: 0; }
.gd-tile { width: 40px; height: 40px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; }
.gd-tile .gi { width: 24px; height: 24px; }
.gd-txt b { display: block; font-weight: 600; }
.gd-txt span { display: block; color: var(--text-2); font-size: 14px; line-height: 1.3; }
.gd-val { font-family: 'Chakra Petch', sans-serif; font-size: 18px; white-space: nowrap; }
.gd-earn.top .gd-val { font-size: 22px; }
.gd-earn.zero .gd-val { color: var(--muted); }
.gd-note { background: var(--surface-2); border-radius: 6px; padding: 8px 12px; color: var(--text-2); font-size: 14px; }
.gd-note b, .gd-mine b { color: var(--text); font-weight: 600; }
.gd-basis { color: var(--muted); font-size: 13px; }
.gd-cols { display: grid; gap: 12px; }
.gd-col-head { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 2px; }
.gd-col-head .gi { width: 16px; height: 16px; }
.gd-col.take .gd-col-head { color: #5FD09B; }
.gd-col.drop .gd-col-head { color: var(--warn); }
.gd-trait { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; }
.gd-trait b { display: block; font-weight: 600; }
.gd-trait div span { display: block; color: var(--text-2); font-size: 14px; line-height: 1.25; }
.gd-ring { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 16%, transparent); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); }
.gd-ring .gi { width: 18px; height: 18px; }
.gd-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.gd-pick > div { color: var(--text-2); }
.gd-pick b { color: var(--text); font-weight: 600; }
.gd-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 4px; text-align: center; min-width: 64px; }
.gd-tag.always { background: rgba(240, 180, 41, 0.15); color: var(--accent); }
.gd-tag.yes { background: rgba(95, 208, 155, 0.14); color: #5FD09B; }
.gd-tag.no { background: rgba(239, 111, 80, 0.14); color: var(--warn); }
.gd-odds { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.gd-odds-what { color: var(--muted); font-size: 13px; }
.gd-odds-strip { display: flex; gap: 4px; flex: 1 1 240px; min-width: 0; }
.gd-odds-strip i { font-style: normal; background: var(--rc); color: var(--ground); font-weight: 700; font-size: 12px;
  height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-basis: 0;
  min-width: 36px; white-space: nowrap; }
.gd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gd-step { background: var(--surface-2); border-radius: 6px; padding: 10px 6px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; text-align: center; }
.gd-lvl { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; color: var(--accent); }
.gd-who { display: flex; justify-content: center; gap: 1px; color: var(--text-2); }
.gd-who .gi { width: 20px; height: 20px; }
.gd-cost { display: flex; align-items: center; gap: 4px; font-weight: 600; min-height: 26px; }
.gd-steel { width: 24px; height: 24px; }
.coin-amt.gd-cc { color: var(--text-2); font-size: 14px; }
.gd-mine { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
  gap: 4px 16px; color: var(--text-2); }
.gd-mine-head { grid-column: 1 / -1; }
.gd-mine .gd-cost { gap: 6px; min-height: 0; color: var(--text); }
.gd-foot { color: var(--muted); font-size: 13px; text-align: center; }
/* SAVYBĖS (gidas.js gdTraits, 2026-10-27): every trait by tab, its worth a day at the right, pages of one height. */
.gd-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-traits { display: flex; flex-direction: column; }
.gd-traits .gd-trait { grid-template-columns: 32px minmax(0, 1fr) auto; border-top: 1px solid var(--line-soft); }
.gd-traits .gd-trait:first-child { border-top: 0; }
.gd-tv { font-family: 'Chakra Petch', sans-serif; font-size: 15px; white-space: nowrap; }
.gd-tv.mixed { color: var(--text-2); }
/* MOKYMAS's cards: the rarity's colour as a bar, the card, its worth a day. */
.gd-cards { display: flex; flex-direction: column; }
.gd-card-row { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 6px 0; border-top: 1px solid var(--line-soft); }
.gd-card-row:first-child { border-top: 0; }
.gd-card-row b { display: block; font-weight: 600; }
.gd-card-row div span { display: block; color: var(--text-2); font-size: 14px; line-height: 1.25; }
.gd-rar { align-self: stretch; border-radius: 3px; background: var(--rc); }
/* AR MOKYTI? — the Rikiuotė bonus's − / value / + boxes, the verdict on top of what it rests on. */
.gd-calc-in { display: grid; gap: 8px; }
.gd-step-ctl, .gd-calc-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* The name over where the game shows it, in one column wide enough for the longest, so every box lines up. */
.gd-step-label { width: 150px; display: flex; flex-direction: column; line-height: 1.2; }
.gd-step-label b { font-weight: 600; font-size: 14px; }
.gd-step-label small { color: var(--muted); font-size: 12px; }
.gd-step-val { width: 104px; justify-content: center; font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
.gd-step-val input { width: 3.4em; }
/* Words with the game's icons, chips, goods and coins in one line (a .gd-txt line is a block; its parts are not). */
.gd-inline { display: inline-flex !important; align-items: center; flex-wrap: wrap; gap: 0 3px; }
.gd-txt > .gd-inline span, .gd-txt > .gd-inline b { display: inline-flex; align-items: center; }
.gd-i { width: 14px; height: 14px; flex: none; }
.gd-keep { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.gd-good { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.tr-chip .gd-good { margin-right: 4px; }
.tr-chip.gd-good-chip { display: inline-flex; align-items: center; justify-content: center; padding: 3px 14px; }
.gd-good-chip .gd-good { width: 28px; height: 28px; margin: 0; }
.gd-step-label .pl-chip { font-size: 11px; padding: 1px 6px; }
.gd-step-unit { margin-left: 2px; color: var(--text-2); }
/* A phone: the name over its box — beside it the name and three boxes do not fit 360 px and the box fell alone. */
@media (max-width: 520px) {
  .gd-step-label { width: 100%; flex-direction: row; align-items: baseline; gap: 6px; }
}
.gd-calc-out { display: flex; flex-direction: column; gap: 0; }
.gd-verdict { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 6px;
  background: var(--surface-2); }
.gd-verdict b { font-family: 'Chakra Petch', sans-serif; font-size: 20px; letter-spacing: .04em; }
.gd-verdict span { color: var(--text-2); }
.gd-verdict.yes b { color: #5FD09B; }
.gd-verdict.no b { color: var(--muted); }
.gd-verdict.drop b { color: var(--warn); }
@media (min-width: 600px) {
  .gd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .gd-val { font-size: 21px; }
  .gd-earn.top .gd-val { font-size: 28px; }
}
/* Its card on Apžvalga (app.js guideCard): across the page under the contest while new, under the levels later. */
.gd-home { margin: 0 0 12px; }
.gd-home.low { margin: 12px 0 0; }
.gd-home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.gd-home-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-width: 0; }
.gd-home-stat > b { font-family: 'Chakra Petch', sans-serif; font-size: 16px; white-space: nowrap; }
.gd-home a.kn-go { align-self: flex-end; font-weight: 600; white-space: nowrap; }
@media (min-width: 900px) {
  .gd-home { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px; }
  .gd-home .label { grid-column: 1 / -1; }
  .gd-home-stat > b { font-size: 24px; }
}