/* Gold Rush - aplexotools.com/gold. A trading career: auction gold and goblin green on warm black, parchment for what
   the goblin says, four cities with faces of their own. Self-contained: the site's fonts and the game's icons; the only
   requests go to this site's /api. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --css-v: 24;      /* this stylesheet's stamp (the ?v= index.html loads it with): the script asks for its own stylesheet if another is on the page */
  --bg: #0c0a07; --surface: #171310; --surface-2: #1f1a14; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --text: #f6f1e6; --muted: #b5ab97; --dim: #968c78;
  --purple: #a335ee; --pink: #e268a8; --gold: #e5cc80; --red: #f43f5e; --teal: #2dd4bf;
  --acc: #f2b53a; --acc-2: #b8760f; --acc-3: #ffd978; --acc-rgb: 242 181 58;
  --gob: #6cc45a; --gob-2: #3f8a33;
  --up: #45d483; --down: #ff7088; --warn: #ffb020;
  --parch: #f6f1e6; --parch-2: #ffe4b5; --ink: #1b150d;
  --acc-grad: linear-gradient(135deg, var(--acc-3), var(--acc) 55%, var(--acc-2));
  --display: Sora, Inter, system-ui, sans-serif; --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1); --bounce: cubic-bezier(.34,1.56,.64,1);
  --sab: env(safe-area-inset-bottom, 0px);
  /* the cities' colours: the market header, the map node, the chips */
  --sw: #5b8fd0; --if: #ff9a2e; --og: #e0603a; --bb: #3fc1b8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); font: 15px/1.55 var(--font); overflow-x: hidden;
  background:
    radial-gradient(900px 560px at 12% -10%, rgba(242,181,58,.16), transparent 62%),
    radial-gradient(700px 480px at 100% 6%, rgba(108,196,90,.1), transparent 60%),
    radial-gradient(800px 500px at 60% 110%, rgba(229,204,128,.07), transparent 60%),
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: radial-gradient(70% 55% at 50% 0%, rgba(0,0,0,.9), transparent); -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, rgba(0,0,0,.9), transparent);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(100% - 32px, 1180px); margin: 0 auto; }
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.coin-ic { width: 18px; height: 18px; stroke: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--acc); color: #1a1206; font-weight: 600; }
.skip:focus { top: 12px; }
header, main, footer { position: relative; z-index: 1; }
.grad { background: linear-gradient(90deg, var(--acc-3), var(--acc) 50%, var(--acc-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
kbd { font: 600 11px var(--font); letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
.gicon { width: 36px; height: 36px; border-radius: 9px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 6px 14px -8px rgba(0,0,0,.8); flex: none; }
.gicon.sm { width: 22px; height: 22px; border-radius: 6px; }
.gicon.lg { width: 48px; height: 48px; border-radius: 12px; }
.up { color: var(--up); } .down { color: var(--down); }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- header: the site's furniture ---------- */
.top .wrap { display: flex; align-items: center; gap: 10px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -10px rgba(226,104,168,.8); }
.crumb { color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; }
.crumb .sep { color: var(--dim); margin: 0 10px 0 2px; }
.top-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn .off { display: none; }
.icon-btn[aria-pressed="true"] .on { display: none; }
.icon-btn[aria-pressed="true"] .off { display: block; }
.discord-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 12px; color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; background: linear-gradient(180deg, #6571f3, #5865f2); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 24px -12px rgba(88,101,242,.9), inset 0 1px 0 rgba(255,255,255,.14); transition: filter .15s, transform .15s var(--ease); }
.discord-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.discord-btn .ic { width: 20px; height: 20px; stroke: none; }
.discord-btn.big { height: 44px; padding: 0 18px; font-size: 14.5px; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 5px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer; max-width: 220px; transition: background .15s, border-color .15s; }
.user-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); }
.user-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #2a2418; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
@media (max-width: 760px) { .user-btn { padding: 0 5px; max-width: none; } .user-name { display: none; } }
@media (max-width: 700px) { .crumb { display: none; } }
@media (max-width: 600px) { .brand span { display: none; } .top .wrap { padding: 10px 0; } }
@media (max-width: 460px) { #soundBtn { display: none; } }
@media (max-width: 420px) { .top-actions { gap: 4px; } .icon-btn { width: 36px; height: 36px; } .discord-btn { height: 36px; padding: 0 10px 0 9px; gap: 6px; border-radius: 11px; font-size: 13px; } .discord-btn .ic { width: 18px; height: 18px; } .user-btn { height: 36px; border-radius: 11px; } .user-btn .avatar { width: 26px; height: 26px; } }
@media (max-width: 374px) { .top .discord-btn { width: 36px; padding: 0; justify-content: center; } .top .discord-btn span { display: none; } }

/* ---------- layout ---------- */
.app { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 28px; }
.title-row { text-align: center; padding: 4px 0 0; }
/* the title: the goblin crier nods every six seconds (his green shadow sits on a wrapper that does not move, so the nod is
   a transform alone), "Gold" flares with the nod (opacity only), and the gold sweeps across the word once as the page
   opens and then rests. The loops run unless the visitor chose Calm, and rest while the title is out of the window or
   the tab is hidden (.rest, set by the script). The flare's bright copy of the word is generated content with an empty
   spoken text, so the heading's own text holds the word once. */
.logo { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 700 clamp(28px, 7vw, 42px)/1 var(--display); letter-spacing: -.04em; }
.logo-gob-wrap { flex: none; width: 1.15em; height: 1.15em; filter: drop-shadow(0 8px 18px rgba(108,196,90,.35)); }
.logo-gob { display: block; width: 100%; height: 100%; transform-origin: 50% 85%; }
.logo > .logo-gob { flex: none; width: 1.15em; height: 1.15em; }   /* the page as it was before (the goblin without its wrapper), if a browser still holds it: the goblin keeps its size */
.logo .grad { position: relative; background: linear-gradient(90deg, var(--acc-3), var(--acc) 28%, var(--acc-2) 50%, var(--acc) 72%, var(--acc-3)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: logo-shine 2.4s var(--ease) .4s 1 both; }
.logo .grad::after { content: attr(data-flare); content: attr(data-flare) / ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff7dc, #ffe59a 50%, #ffcf6a); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; }
.logo.rest, .logo.rest *, .logo.rest *::before, .logo.rest *::after { animation-play-state: paused !important; }
html:not(.calm) .logo-gob { animation: logo-nod 6s var(--ease) infinite; }
html:not(.calm) .logo .grad::after { animation: logo-flare 6s var(--ease) infinite; }
html.calm .logo .grad { animation: none; }
@keyframes logo-nod { 0%, 66%, 100% { transform: none; } 72% { transform: rotate(-11deg) translateY(-3px); } 79% { transform: rotate(6deg) translateY(-1px); } 86% { transform: rotate(-4deg); } 92% { transform: none; } }
@keyframes logo-flare { 0%, 66%, 94%, 100% { opacity: 0; } 74%, 84% { opacity: .85; } }
@keyframes logo-shine { to { background-position: 200% 0; } }
.tagline { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.app.playing .title-row { display: none; }
@media (max-width: 979px) { .app { padding-bottom: calc(96px + var(--sab)); } .app.playing { gap: 10px; padding-bottom: calc(140px + var(--sab)); } }
/* while the goblin's line is up, the page can be scrolled clear of it: nothing to press is ever stuck underneath */
html.touring .app.playing { padding-bottom: calc(52px + var(--tour-h, 0px)); }
@media (max-width: 979px) { html.touring .app.playing { padding-bottom: calc(150px + var(--sab) + var(--tour-h, 0px)); } }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--ease), filter .15s; }
.btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.25); }
.btn.primary { border-color: transparent; color: #1a1206; background: var(--acc-grad); box-shadow: 0 10px 28px -12px rgb(var(--acc-rgb) / .9), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn.green { border-color: transparent; color: #0d1f0a; background: linear-gradient(135deg, #a9ec98, var(--gob) 55%, var(--gob-2)); box-shadow: 0 10px 28px -12px rgba(108,196,90,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.big { padding: 13px 22px; font-size: 16px; border-radius: 14px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255,255,255,.05); }
.btn.danger { border-color: rgba(255,112,136,.4); color: #ffd2da; }
.btn.danger:hover { background: rgba(255,112,136,.12); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.mini-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.mini-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.mini-btn .ic { width: 14px; height: 14px; }
.mini-btn.ghost { border-color: transparent; background: transparent; }
.mini-btn.acc { border-color: rgba(242,181,58,.5); color: var(--acc-3); background: rgba(242,181,58,.1); }
.mini-btn.acc:hover { background: rgba(242,181,58,.2); color: #fff; }
.mini-btn[aria-disabled="true"] { opacity: .5; cursor: default; }
@media (pointer: coarse) { .mini-btn { min-height: 40px; padding: 8px 12px; } .side-theme { min-height: 44px; } }
.win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.win-actions.left { justify-content: flex-start; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 600 11.5px/1.5 var(--font); color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line); white-space: nowrap; }
.chip .ic { width: 12px; height: 12px; }
.chip.acc { color: var(--acc-3); border-color: rgba(242,181,58,.4); background: rgba(242,181,58,.1); }
.chip.rose { color: var(--down); border-color: rgba(255,112,136,.45); background: rgba(255,112,136,.12); }
.chip.green { color: var(--up); border-color: rgba(69,212,131,.45); background: rgba(69,212,131,.12); }
.chip.city { padding-left: 4px; }
.chip.city img { width: 18px; height: 18px; border-radius: 5px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.eyebrow::before, .eyebrow::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--acc-grad); }
.eyebrow.rose { color: var(--down); } .eyebrow.rose::before, .eyebrow.rose::after { background: var(--down); }
.eyebrow.green { color: var(--up); } .eyebrow.green::before, .eyebrow.green::after { background: var(--up); }
.bar { display: block; height: 6px; border-radius: 999px; background: rgba(242,181,58,.15); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--acc-2), var(--acc)); transition: width .6s var(--ease); }
.bar.green { background: rgba(108,196,90,.15); } .bar.green i { background: linear-gradient(90deg, var(--gob-2), var(--gob)); }
.bar.rose i { background: var(--down); }
.card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--surface); min-width: 0; }
.card > h2, .card > h3 { margin: 0 0 10px; font: 700 15px var(--display); display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.card > h2 small, .card > h3 small { color: var(--dim); font: 500 12px var(--font); margin-left: auto; }
.empty { color: var(--dim); padding: 10px 6px; text-align: center; font-size: 13px; }

/* ---------- loading and offline ---------- */
.status { display: flex; justify-content: center; }
.skel { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.skel-bar, .skel-rows i { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 10px; }
.skel-bar { height: 18px; } .skel-bar.w1 { width: 40%; } .skel-bar.w2 { width: 60%; }
.skel-rows { display: flex; flex-direction: column; gap: 8px; } .skel-rows i { display: block; height: 54px; border-radius: 14px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.offline { width: 100%; max-width: 520px; text-align: center; padding: 26px 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.offline-ic { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,112,136,.12); color: var(--down); }
.offline-ic .ic { width: 26px; height: 26px; }
.offline h2 { margin: 0; font: 700 20px var(--display); }
.offline p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- the career home ---------- */
.home { display: flex; flex-direction: column; gap: 14px; outline: none; }
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; padding: 22px 24px; border-radius: 24px; border: 1px solid rgba(242,181,58,.25); background: radial-gradient(600px 300px at 0% 0%, rgba(242,181,58,.16), transparent 60%), radial-gradient(500px 260px at 100% 100%, rgba(108,196,90,.1), transparent 60%), var(--surface); }
.hero::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--acc-2), var(--acc) 55%, var(--gob)); opacity: .6; }
.hero-rank { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rank-line { display: flex; align-items: center; gap: 12px; }
.rank-seal { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #ffe8a8, var(--acc) 55%, var(--acc-2)); color: #3a2405; font: 800 20px var(--display); box-shadow: 0 10px 30px -10px rgba(242,181,58,.9), inset 0 1px 0 rgba(255,255,255,.5); }
.rank-line small { display: block; color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.rank-line b { display: block; font: 700 clamp(22px, 4vw, 30px)/1.1 var(--display); letter-spacing: -.02em; }
.rank-next { color: var(--muted); font-size: 12.5px; }
.hero-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.hero-sums div { padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); min-width: 0; }
.hero-sums small { display: block; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.hero-sums small i { display: block; font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; color: var(--dim); opacity: .9; }
.hero > * { position: relative; }
.hero .hero-gob { position: absolute; right: -18px; top: -22px; width: 150px; height: 150px; opacity: .07; pointer-events: none; }
.goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(242,181,58,.3); background: rgba(242,181,58,.06); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: background .15s, border-color .15s; }
.goal:hover { background: rgba(242,181,58,.12); } .goal.reach { border-color: rgba(108,196,90,.5); background: rgba(108,196,90,.08); }
.goal small { grid-column: 1 / -1; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.goal b { font: 700 15px var(--display); } .goal > span:last-child { color: var(--muted); font-size: 12px; white-space: nowrap; } .goal .bar { grid-column: 1 / -1; height: 5px; order: 3; }
.shelf { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 8px 12px 10px; border: 0; border-radius: 14px; background: linear-gradient(180deg, transparent 62%, rgba(122,77,8,.55) 62%, rgba(74,46,6,.7) 78%, transparent 78%), rgba(0,0,0,.2); color: var(--dim); cursor: pointer; font: inherit; text-align: left; }
.shelf small { flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.shelf-row { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.shelf-row img { width: 34px; height: 34px; border-radius: 9px; filter: grayscale(1) brightness(.45); box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.shelf-row img.own { filter: none; box-shadow: 0 0 0 1px rgba(242,181,58,.7), 0 0 14px -2px rgba(242,181,58,.8); }
@media (max-width: 480px) { .hero-sums small { display: flex; flex-direction: column; } .shelf { flex-direction: column; align-items: flex-start; gap: 6px; } .shelf-row img { width: 28px; height: 28px; border-radius: 8px; } }
.hero-sums b { display: block; font: 700 clamp(15px, 2.6vw, 20px)/1.2 var(--display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-sums b.gold { color: var(--acc-3); }
.hero-side { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 0; }
.season-box { padding: 12px 14px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.season-box .sb-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.season-box b { font: 700 15px var(--display); }
.season-box small { color: var(--dim); font-size: 12px; }
.season-box .bar { height: 5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.hero-note b { color: var(--text); }
.home-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.home-grid > .card { grid-column: span 6; }
.home-grid > .card.wide { grid-column: span 12; }
.home-grid > .card.third { grid-column: span 4; }
@media (max-width: 859px) { .hero { grid-template-columns: 1fr; padding: 18px; } .home-grid > .card, .home-grid > .card.third { grid-column: span 12; } }
@media (max-width: 480px) { .hero-sums { grid-template-columns: 1fr; gap: 4px; } .hero-sums div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 12px; } .hero-sums b { font-size: 17px; overflow: visible; } }
.upg.lit { border-color: rgba(242,181,58,.7); box-shadow: 0 0 30px -8px rgba(242,181,58,.7); }
/* professions */
.prof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prof { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); min-width: 0; transition: box-shadow .4s, border-color .4s; }
.prof.lit { border-color: rgba(108,196,90,.6); box-shadow: 0 0 30px -8px rgba(108,196,90,.7); }
.prof-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prof-top b { font: 700 13.5px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-top small { display: block; color: var(--dim); font-size: 11.5px; }
.prof .lvl { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(242,181,58,.14); color: var(--acc-3); font: 800 13px var(--display); border: 1px solid rgba(242,181,58,.4); }
.prof .xp { color: var(--dim); font-size: 11px; display: flex; justify-content: space-between; gap: 6px; }
.prof .unlock { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.prof .unlock img { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 3px; }
@media (max-width: 520px) { .prof-list { grid-template-columns: 1fr; } }
/* professions as one row of badges (the home, the workshop) */
.prof-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prof-badge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); min-width: 0; transition: box-shadow .4s, border-color .4s; }
.prof-badge.lit { border-color: rgba(108,196,90,.6); box-shadow: 0 0 30px -8px rgba(108,196,90,.7); }
.prof-badge .gicon { width: 30px; height: 30px; border-radius: 8px; }
.pb-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-body b { font: 700 12.5px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* on the home the three professions are a list in their half of the page: a name is never broken, a level never cut */
.home-grid .prof-row { grid-template-columns: 1fr; }
@media (max-width: 520px) { .home-tabs > h2 { flex-wrap: wrap; } .home-tabs > h2 small { margin-left: 0; flex-basis: 100%; } }
.pb-body small { color: var(--dim); font-size: 10.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-body .bar { height: 3px; }
.prof-badge .lvl { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(242,181,58,.14); color: var(--acc-3); font: 800 12px var(--display); border: 1px solid rgba(242,181,58,.4); }
@media (max-width: 620px) { .prof-row { grid-template-columns: 1fr; } }
/* the home's second layer: tabs */
.home-seg { margin: -2px 0 12px; }
.home-seg span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.home-seg .tab-n { font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: rgba(242,181,58,.18); color: var(--acc-3); }
.home-seg input:checked + span .tab-n { background: rgba(242,181,58,.3); }
/* the shop as rows */
.shop-list { display: flex; flex-direction: column; gap: 6px; }
.shop-early { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; } .shop-early b { color: var(--text); }
.upg.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head foot" "about about"; align-items: center; gap: 2px 10px; padding: 6px 10px 6px 6px; }
.upg-head { grid-area: head; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.upg-head:hover { background: rgba(255,255,255,.04); }
.upg-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 140px; }
.upg-name b { font: 700 13.5px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upg-name .pips { display: flex; gap: 3px; }
.upg.row .now-after { flex: 0 1 auto; justify-content: flex-end; font-size: 12px; }
.upg.row .upg-foot { grid-area: foot; margin: 0; gap: 10px; }
.upg.row .upg-foot .mini-btn { white-space: nowrap; }
.upg-about { grid-area: about; display: none; margin: 2px 4px 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.upg.row.open .upg-about { display: block; }
/* on a phone a shop row is one line: the drawing, the name and its pips, the price (and Buy where the bank pays for it); what
   it does now and next, and how much is missing, open with the row */
@media (max-width: 640px) {
  .upg.row { padding: 4px 8px 4px 4px; gap: 0 8px; }
  .upg-head { flex-wrap: wrap; row-gap: 4px; }
  .upg.row .now-after { display: none; flex-basis: 100%; justify-content: flex-start; padding-left: 40px; }
  .upg.row.open .now-after { display: flex; }
  .upg.row:not(.can) .upg-foot .mini-btn { display: none; }
  .upg.row .upg-foot .mini-btn { min-height: 34px; padding: 5px 12px; }
}
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.upg { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); min-width: 0; transition: border-color .3s; }
.upg.maxed { opacity: .7; }
.upg.can { border-color: rgba(242,181,58,.35); }
.upg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.upg-top b { font: 700 14px var(--display); flex: 1; min-width: 0; }
.upg-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(242,181,58,.12); border: 1px solid rgba(242,181,58,.3); color: var(--acc-3); } .upg-ic .ic, .upg-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.upg.maxed .upg-ic { color: var(--dim); border-color: var(--line); background: transparent; }
.upg .pips { display: flex; gap: 3px; }
.upg .pips i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); }
.upg .pips i.on { background: var(--acc); border-color: var(--acc); }
.upg p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.upg .now-after { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); flex-wrap: wrap; }
.upg .now-after .ic { width: 14px; height: 14px; color: var(--acc); }
.upg .now-after span { padding: 2px 8px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.upg .now-after span.after { border-color: rgba(242,181,58,.45); color: var(--acc-3); }
.upg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.upg-foot .cost { font: 700 13.5px var(--display); color: var(--acc-3); white-space: nowrap; }
.upg-foot .cost.cant { color: var(--dim); }
/* the trophy cabinet */
.cabinet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.troph { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25)); border: 1px solid var(--line); text-align: center; min-width: 0; transition: border-color .3s, box-shadow .3s; }
.troph img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px -10px rgba(0,0,0,.9); filter: saturate(.3) brightness(.7); transition: filter .4s; }
.troph.owned img, .troph.can img { filter: none; }
.troph.owned { border-color: rgba(242,181,58,.6); box-shadow: 0 0 30px -10px rgba(242,181,58,.6); background: linear-gradient(180deg, rgba(242,181,58,.12), rgba(0,0,0,.25)); }
.troph.can { border-color: rgba(108,196,90,.5); }
.troph b { font: 700 12.5px/1.2 var(--display); }
.troph small { color: var(--dim); font-size: 11px; line-height: 1.3; }
.troph .bar { width: 100%; height: 4px; }
.troph .ribbon { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 999px; background: var(--acc); color: #1a1206; font: 800 9.5px var(--font); letter-spacing: .08em; text-transform: uppercase; }
/* seasons */
.seasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seasons li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); font-size: 13px; }
.seasons li .sn { font: 700 13px var(--display); color: var(--acc-3); }
.seasons li small { color: var(--dim); display: block; font-size: 11.5px; }
.seasons li b { font: 700 14px var(--display); white-space: nowrap; }
/* the daily card */
.daily-card { border-color: rgba(108,196,90,.3); background: linear-gradient(180deg, rgba(108,196,90,.08), transparent 60%), var(--surface); }
.daily-card p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.daily-card .today { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); margin-bottom: 10px; }
.daily-card .today b { font: 700 18px var(--display); color: var(--acc-3); }
.daily-card .today small { color: var(--dim); display: block; font-size: 11.5px; }
.daily-card .today > div { min-width: 0; }
.daily-card .today .coin-ic.big { width: 30px; height: 30px; flex: none; }
.daily-card .today .place { color: var(--acc-3); font-weight: 600; }
.daily-card p b { color: var(--text); }
.daily-card .daily-tip { color: var(--gob); }
.daily-card .daily-until { margin: 10px 0 0; color: var(--dim); font-size: 12px; }

/* ---------- the week bar ---------- */
.week { display: flex; flex-direction: column; gap: 10px; }
.weekbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px 14px; padding: 8px 12px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(23,19,16,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.9); }
.wb-home { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); font: 600 9.5px var(--font); letter-spacing: .04em; cursor: pointer; transition: background .15s, color .15s; }
.wb-home:hover { color: var(--text); background: rgba(255,255,255,.07); }
.wb-home .ic { width: 18px; height: 18px; }
.wb-when small .short { display: none; }
.wb-city { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; text-align: left; transition: background .15s, border-color .15s; min-width: 0; }
.wb-city:hover { background: rgba(255,255,255,.05); border-color: var(--line); }
.wb-city img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 18px -4px var(--cc, var(--acc)); }
.wb-city b { display: block; font: 700 15px/1.1 var(--display); letter-spacing: -.01em; }
.wb-city small { display: block; color: var(--dim); font-size: 11px; white-space: nowrap; }
.wb-when { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.wb-when b { font: 700 16px/1.1 var(--display); letter-spacing: -.01em; }
.wb-when b.swap { animation: when-in .4s var(--ease) both; }
@keyframes when-in { from { opacity: 0; transform: translateY(-4px); } }
.wb-when > span { color: var(--muted); font-weight: 600; font-size: 13px; }
.wb-when small { color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.mode-chip { padding: 1px 7px; border-radius: 999px; background: rgba(108,196,90,.15); border: 1px solid rgba(108,196,90,.5); color: var(--gob); font: 800 10px/1.6 var(--font); letter-spacing: .1em; text-transform: uppercase; align-self: center; }
.wb-sums { display: flex; gap: 8px; }
.sum { display: flex; flex-direction: column; gap: 0; padding: 4px 10px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); min-width: 0; position: relative; transition: border-color .3s, box-shadow .3s; }
.sum small { color: var(--dim); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.sum b { font: 700 15px/1.2 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.sum.purse b { color: var(--acc-3); }
.sum .meter { display: block; width: 64px; height: 4px; margin-top: 3px; border-radius: 999px; background: rgba(242,181,58,.15); overflow: hidden; }
.sum .meter i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--acc-2), var(--acc)); transition: width .5s var(--ease); }
.sum.bags.full .meter i { background: var(--down); } .sum.bags.full b { color: var(--down); }
.sum .delta { font-size: 10.5px; font-weight: 600; color: var(--muted); font-style: normal; line-height: 1.25; overflow-wrap: anywhere; }
.sum.gain { border-color: rgba(69,212,131,.45); box-shadow: 0 0 24px -8px rgba(69,212,131,.6); } .sum.gain b { color: var(--up); }
.sum.loss { border-color: rgba(255,112,136,.45); box-shadow: 0 0 24px -8px rgba(255,112,136,.6); } .sum.loss b { color: var(--down); }
.sum.wince { animation: wince .5s var(--ease); }
@keyframes wince { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.wait-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 50px; height: 46px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font: 600 10px var(--font); letter-spacing: .04em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.wait-btn:hover { color: var(--text); background: rgba(255,255,255,.08); } .wait-btn .ic { width: 16px; height: 16px; }
.wait-btn.on { color: var(--acc-3); border-color: rgba(242,181,58,.6); background: rgba(242,181,58,.12); } .wait-btn.on .ic { animation: wait-run .9s linear infinite; }
@keyframes wait-run { 50% { transform: translateX(3px); } }
.end-btn, .fab { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 14px; border-radius: 14px; border: 1px solid transparent; background: var(--acc-grad); color: #1a1206; box-shadow: 0 12px 30px -12px rgb(var(--acc-rgb) / .85), inset 0 1px 0 rgba(255,255,255,.35); cursor: pointer; transition: transform .15s var(--ease), filter .15s, opacity .2s; }
.end-btn:hover, .fab:hover { filter: brightness(1.06); transform: translateY(-1px); }
.end-btn .ic, .fab .ic { width: 20px; height: 20px; stroke-width: 2.4; transition: transform .2s var(--ease); }
.end-btn:hover .ic { transform: translateX(3px); }
.end-btn.busy, .fab.busy { opacity: .7; pointer-events: none; }
.end-btn.closed, .fab.closed { background: rgba(255,255,255,.08); color: var(--muted); box-shadow: none; border-color: var(--line-2); pointer-events: none; }
.nb-text, .fab > span { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.nb-text b, .fab b { font: 700 14px var(--display); letter-spacing: -.01em; }
.nb-text small, .fab small { font-size: 11px; font-weight: 600; opacity: .8; white-space: nowrap; }
@media (max-width: 979px) {
  .weekbar { grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 8px; padding: 6px 8px; top: 0; border-radius: 0 0 16px 16px; margin: 0 -16px; }
  .wb-home { min-width: 40px; height: 40px; } .wb-home span { display: none; }
  .end-btn, .weekbar .wait-btn { display: none; }
  .wb-sums { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 6px; }
  .sum { padding: 4px 8px; } .sum b { font-size: 14px; } .sum .meter { width: 100%; }
  .wb-city img { width: 32px; height: 32px; } .wb-city b { font-size: 14px; }
  .wb-when { justify-content: flex-end; text-align: right; } .wb-when b { font-size: 15px; }
}
@media (max-width: 420px) { .wb-when small .long { display: none; } .wb-when small .short { display: inline; } .wb-city small { display: none; } }
@media (max-width: 374px) { .sum small { font-size: 9.5px; letter-spacing: .04em; } .sum b { font-size: 13px; } .wb-city img { width: 28px; height: 28px; } }
/* no connection in the middle of a week: the bar says so until the market has been read again */
.week.stale .weekbar { border-color: rgba(255,112,136,.5); }
.week.stale .weekbar::after { content: "No connection: the market is read again as soon as the server answers."; grid-column: 1 / -1; color: #ffd2da; font-size: 12px; font-weight: 600; line-height: 1.3; }

/* the week: seven days, four pips each; raid nights and deadlines marked */
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 6px 8px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.wday { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 3px 0 5px; border-radius: 10px; transition: background .4s; min-width: 0; }
.wday.now { background: rgba(242,181,58,.1); box-shadow: inset 0 0 0 1px rgba(242,181,58,.25); }
.wday b { display: inline-flex; align-items: center; gap: 3px; font: 600 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
.wday.past b { color: var(--muted); } .wday.now b { color: var(--acc); }
.wday b .rd, .wday b .tk, .wday b .rg, .wday b .dl { display: none; width: 9px; height: 9px; stroke-width: 2.4; } .wday.raidday b { color: var(--down); } .wday.raidday b .rd { display: block; }
.wday.talkday b .tk { display: block; width: 10px; height: 10px; } .wday.roadday b .rg { display: block; color: var(--down); } .wday.dueday b .dl { display: block; color: var(--warn); }
.wday b .tk { stroke: none; }
.strip { cursor: pointer; } .strip:hover { border-color: var(--line-2); }
.ahead { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.ahead li { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border-left: 3px solid var(--acc-3); font-size: 13px; line-height: 1.4; color: var(--muted); }
.ahead li b { display: block; color: var(--text); font: 700 12px var(--display); } .ahead li.raid, .ahead li.road { border-left-color: var(--down); } .ahead li.due { border-left-color: var(--warn); }
.ahead-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; padding: 14px 10px 10px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.ahead-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pips { display: flex; gap: 4px; }
.pip { position: relative; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); transition: background .3s, border-color .3s, transform .3s var(--bounce), box-shadow .3s; }
.pip.raid { border-color: rgba(255,112,136,.75); }
.pip.past { background: var(--acc-2); border-color: var(--acc-2); }
.pip.past.raid { background: var(--down); border-color: var(--down); }
.pip.now { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 10px rgba(242,181,58,.8); transform: scale(1.35); }
.pip.trip { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.pip.deadline::after { content: ""; position: absolute; left: 50%; top: -7px; width: 0; height: 0; margin-left: -3px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid var(--warn); }
.pip.deadline.urgent::after { border-top-color: var(--down); }
/* what the talk says about a move: a gold tick where a price is said to move, a red one where rogues are said to camp */
.pip.m-talk::before, .pip.m-road::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 6px; height: 2px; margin-left: -3px; border-radius: 1px; background: var(--acc-3); }
.pip.m-road::before { background: var(--down); }
.pip.m-talk.m-road::before { background: linear-gradient(90deg, var(--acc-3) 50%, var(--down) 50%); }
@media (max-width: 400px) { .pips { gap: 3px; } .pip { width: 7px; height: 7px; } .wday b { font-size: 9.5px; letter-spacing: .02em; } }
@media (max-width: 350px) { .strip { padding: 6px 4px; gap: 2px; } .pips { gap: 2px; } .pip { width: 6px; height: 6px; border-width: 1px; } }

/* the layout of a week: rail, place, side */
.layout { display: grid; grid-template-columns: 150px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.rail-btn { position: relative; display: flex; align-items: center; gap: 9px; padding: 10px 10px; border-radius: 11px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.rail-btn .ic { width: 18px; height: 18px; }
.rail-btn:hover { color: var(--text); background: rgba(255,255,255,.05); }
.rail-btn[aria-current="true"] { color: #1a1206; background: var(--acc-grad); box-shadow: 0 8px 22px -10px rgb(var(--acc-rgb) / .8); }
.badge { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--down); color: #fff; font: 800 10.5px/18px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.badge.gold { background: var(--acc); color: #1a1206; } .badge.green { background: var(--gob); color: #0d1f0a; }
.rail-sum { margin-top: 6px; padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.rail-sum b { color: var(--text); font: 700 13px var(--display); display: block; }
.rail-sum small { color: var(--dim); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; display: block; }
.place { min-width: 0; outline: none; }
.pl { display: flex; flex-direction: column; gap: 10px; }
.side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100dvh - 90px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
@media (max-width: 1180px) { .layout { grid-template-columns: 56px minmax(0, 1fr) 300px; } .rail-btn span { display: none; } .rail-btn { justify-content: center; padding: 10px 0; } .rail-sum { display: none; } .badge { right: 4px; } }
@media (max-width: 979px) { .layout { grid-template-columns: 1fr; } .rail, .side { display: none; } }

/* phone: the five places along the bottom, the end of the move above them */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px calc(6px + var(--sab)); background: rgba(14,11,8,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); }
.tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 5px; border: 0; border-radius: 12px; background: transparent; color: var(--dim); font: 600 10.5px var(--font); cursor: pointer; transition: color .15s, background .15s; min-width: 0; }
.tabs button .ic { width: 20px; height: 20px; }
.tabs button[aria-current="true"] { color: var(--acc-3); background: rgba(242,181,58,.1); }
.tabs .badge { top: 2px; right: calc(50% - 20px); }
.dock { position: fixed; left: 0; right: 0; bottom: calc(60px + var(--sab)); z-index: 41; display: flex; gap: 8px; padding: 8px 10px; background: linear-gradient(180deg, rgba(14,11,8,0), rgba(14,11,8,.94) 30%); }
.dock .wait-btn { background: rgba(31,26,20,.96); min-width: 56px; }
.dock .fab { flex: 1; justify-content: space-between; padding: 7px 14px 7px 16px; border-radius: 14px; min-height: 46px; box-shadow: 0 10px 26px -12px rgb(var(--acc-rgb) / .9); }
.dock .fab > span { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; } .dock .fab b { white-space: nowrap; } .dock .fab small { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 980px) { .tabs, .dock { display: none !important; } }

/* ---------- the market ---------- */
.cityhead { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); min-height: 118px; background: var(--surface); display: flex; align-items: flex-end; }
.cityhead .sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.cityhead .ch-body { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; width: 100%; padding: 14px; background: linear-gradient(180deg, transparent, rgba(12,10,7,.85) 70%); flex-wrap: wrap; }
.ch-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ch-name img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 8px 20px -8px rgba(0,0,0,.9); }
.ch-name h2 { margin: 0; font: 700 clamp(20px, 4vw, 26px)/1.05 var(--display); letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.ch-name p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.ch-name p b { color: var(--text); font-weight: 600; }
.ch-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.raid-banner { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 12px; background: rgba(12,10,7,.78); border: 1px solid rgba(255,112,136,.5); color: #ffd2da; font-size: 12.5px; line-height: 1.35; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.raid-banner .ic { width: 16px; height: 16px; color: var(--down); }
.raid-banner b { font: 700 13px var(--display); color: #fff; }
.raid-banner.on { background: linear-gradient(90deg, rgba(179,52,77,.85), rgba(60,16,24,.85)); border-color: rgba(255,112,136,.8); box-shadow: 0 0 30px -8px rgba(255,112,136,.8); }
.raid-banner.on .ic { color: #fff; animation: raid-pulse 1.6s ease-in-out infinite; }
@keyframes raid-pulse { 50% { transform: scale(1.25) rotate(-8deg); } }
.cityhead:has(.raid-banner:not([hidden])) { min-height: 150px; }
.theme-chip { display: none; }
.crier-mini .theme-mini { width: 100%; text-align: left; margin-bottom: 8px; font: inherit; color: inherit; }
/* the crier on a phone: the bubble sits above the market */
.crier-mini { display: none; }
@media (max-width: 979px) {
  .crier-mini { display: block; }
  .cityhead { min-height: 84px; } .cityhead .ch-body { padding: 10px 12px; align-items: center; } .ch-name img { width: 36px; height: 36px; } .ch-name p { font-size: 12px; } .ch-chips { display: none; }
  /* the week's headline is a chip on the banner: beside the city's name once the first move is over, under it on Monday morning */
  .ch-headline { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 30px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid rgba(242,181,58,.5); background: rgba(12,10,7,.72); color: var(--acc-3); font: 700 12px var(--display); cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .ch-headline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ch-headline .ic { width: 13px; height: 13px; color: var(--acc); }
  .pl.compact .ch-body { flex-wrap: nowrap; } .pl.compact .ch-name { flex: 0 1 auto; } .pl.compact .ch-headline { flex: 0 1 auto; max-width: 56%; }
  .crier-mini .theme-mini { padding: 7px 10px; margin-bottom: 6px; } .crier-mini .theme-mini small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crier-mini .theme-mini > div { min-width: 0; }
  .crier-mini:not(.open) .bubble-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .crier-mini .crier { position: relative; } .crier-mini .news-toggle { position: absolute; right: 8px; bottom: 6px; min-height: 0; padding: 3px 9px; font-size: 11.5px; background: var(--surface-2); } .crier-mini.open .news-toggle { position: static; align-self: flex-start; }
  .crier-mini:not(.open) .bubble { padding-bottom: 22px; }
  /* after the first move the phone's first screen is the rows: the city, the headline and the crier shrink to a line each */
  .pl.compact { gap: 8px; }
  .pl.compact .cityhead { min-height: 46px; align-items: center; } .pl.compact .cityhead .ch-body { padding: 6px 10px; } .pl.compact .ch-name img { width: 28px; height: 28px; } .pl.compact .ch-name h2 { font-size: 17px; } .pl.compact .ch-name p { display: none; }
  .pl.compact .cityhead:has(.raid-banner:not([hidden])) { min-height: 124px; align-items: flex-end; }
  /* the crier is one line: his latest word, with "All the talk" at its end */
  .pl.compact .crier-mini:not(.open) .bubble-text { -webkit-line-clamp: 1; } .pl.compact .crier-mini:not(.open) .bubble-stamp { display: none; } .pl.compact .crier-mini:not(.open) .bubble-also { display: none; }
  .pl.compact .crier-mini .crier { padding: 6px 8px; } .pl.compact .crier-mini .gob-wrap { width: 32px; height: 32px; } .pl.compact .crier-mini .gob { width: 28px; height: 28px; } .pl.compact .crier-mini .crier-top { align-items: center; gap: 8px; }
  .pl.compact .crier-mini:not(.open) .bubble { padding: 6px 98px 6px 10px; } .pl.compact .crier-mini:not(.open) .bubble::before { top: 10px; }
  .pl.compact .crier-mini:not(.open) .news-toggle { right: 12px; bottom: auto; top: 50%; transform: translateY(-50%); }
  /* the filters are one line that scrolls sideways within itself, on Monday morning too */
  .market .mfilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .market .mfilter::-webkit-scrollbar { display: none; }
  .market .mfilter .fchip { flex: none; }
  .porter-none { padding: 0 6px; font-size: 11.5px; line-height: 1.35; }
}
/* the thin markets, folded away at the end of the floor */
.mgroup.league .mgroup-head .chip { color: var(--dim); }
.mgroup.league .lot-row { opacity: .9; }
.market { display: flex; flex-direction: column; gap: 12px; }
.mgroup { display: flex; flex-direction: column; gap: 6px; }
.mfilter { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { cursor: pointer; padding: 5px 11px; font-size: 12px; transition: background .15s, color .15s, border-color .15s; }
.fchip i { font-style: normal; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.fchip:hover { color: var(--text); background: rgba(255,255,255,.09); }
.fchip[aria-pressed="true"] { color: #1a1206; background: var(--acc-grad); border-color: transparent; } .fchip[aria-pressed="true"] i { background: rgba(0,0,0,.18); color: #1a1206; }
.fchip.none { opacity: .55; }
@media (pointer: coarse) { .fchip { min-height: 36px; } }
.mgroup-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px; border: 0; background: transparent; cursor: pointer; text-align: left; font: 700 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.mgroup-head:hover { color: var(--muted); }
.mgroup-head .fold { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .2s var(--ease); } .mgroup.shut .mgroup-head .fold { transform: none; }
.mgroup-head .fold-note { order: 9; text-transform: none; letter-spacing: 0; font: 500 11.5px var(--font); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.mgroup-head > span:first-of-type { white-space: nowrap; }
.mgroup-head { min-width: 0; overflow: hidden; }
.mgroup-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mgroup-head .chip { text-transform: none; letter-spacing: 0; font-size: 10.5px; padding: 1px 7px; }
.lot-row { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) 112px 92px minmax(0, 1fr) auto; grid-template-areas: "icon name price spark cities held"; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .15s var(--ease); font: inherit; }
.lot-row:hover { border-color: rgba(242,181,58,.4); background: var(--surface-2); }
.lot-row:active { transform: scale(.995); }
.lot-row.held-row { border-color: rgba(242,181,58,.22); }
.lot-row.flash-up { animation: lot-up .9s var(--ease); } .lot-row.flash-down { animation: lot-down .9s var(--ease); } .lot-row.traded { animation: lot-traded .6s var(--ease); }
@keyframes lot-up { 0% { box-shadow: inset 0 0 0 1px rgba(69,212,131,.7), 0 0 26px -8px rgba(69,212,131,.6); } 100% { box-shadow: none; } }
@keyframes lot-down { 0% { box-shadow: inset 0 0 0 1px rgba(255,112,136,.7), 0 0 26px -8px rgba(255,112,136,.6); } 100% { box-shadow: none; } }
@keyframes lot-traded { 0% { background-color: rgba(242,181,58,.14); } }
.lot-row .g-icon { grid-area: icon; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.lot-row .g-name { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lot-row .g-name b { font: 600 14px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-sub { color: var(--dim); font-size: 12px; line-height: 1.3; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.g-sub .push { color: var(--warn); font-weight: 600; }
.g-sub .push.neg { color: #8ad7ff; }
.lot-row .g-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.lot-row .price { font: 700 15px/1.2 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.chg { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chg .arr { width: 9px; height: 9px; fill: currentColor; stroke: none; }
.chg.down .arr { transform: rotate(180deg); }
.spark { grid-area: spark; display: block; width: 100%; height: 30px; overflow: visible; }
.sp-area { fill: rgba(255,255,255,.06); }
.sp-line { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sp-last { fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sp-dot { fill: none; stroke: var(--acc); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sp-last.up, .sp-dot.up { stroke: var(--up); } .sp-last.down, .sp-dot.down { stroke: var(--down); }
.g-cities { grid-area: cities; display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.g-city { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 2px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--line); font: 600 10.5px var(--font); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-city img { width: 16px; height: 16px; border-radius: 4px; }
.g-city.cheaper { color: var(--up); border-color: rgba(69,212,131,.35); } .g-city.dearer { color: var(--acc-3); border-color: rgba(242,181,58,.35); }
.g-held { grid-area: held; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 12px; color: var(--dim); white-space: nowrap; }
.g-held b { font: 700 14px var(--display); color: var(--acc-3); }
.g-held small { font-size: 11px; }
.lot-row.look { border-color: rgba(242,181,58,.3); }
.g-marks { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: -2px; }
.g-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(242,181,58,.14); color: var(--acc-3); }
.g-mark .ic { width: 11px; height: 11px; } .g-mark .gob-ic { width: 15px; height: 15px; }
.g-now { display: inline-flex; align-items: baseline; gap: 6px; }
.g-now .was { color: var(--dim); font: 500 11.5px var(--font); font-variant-numeric: tabular-nums; }
.lot-row .price.pushed { color: var(--warn); } .lot-row .price.pushed.neg { color: #8ad7ff; }
.g-sub .low { color: var(--up); } .g-sub .high { color: var(--acc-3); }
.g-sub .sold-out { color: var(--down); font-weight: 700; }
.g-sub .thin { color: var(--dim); font-variant-numeric: tabular-nums; }
.g-city.flat { color: var(--dim); border-color: var(--line); opacity: .75; } .g-city.flat img { filter: grayscale(1); opacity: .7; }
/* the cargo card: what each held good is for there, line by line */
.cargo-row.stack small.acc { color: var(--acc-3); } .cargo-row.stack small.warn { color: var(--warn); } .cargo-row.stack small.dim { color: var(--dim); }
.cargo-row .there-p.dim { color: var(--dim); font-weight: 500; }
/* Best beside Most in the workshop: the number where the next craft stops earning */
.mini-btn.best { border-color: rgba(108,196,90,.45); color: #cdefc4; }
.mini-btn.best.acc { border-color: rgba(108,196,90,.6); background: rgba(108,196,90,.14); color: #e6ffe0; }
@media (max-width: 1180px) and (min-width: 980px) { .lot-row { grid-template-columns: 36px minmax(0, 1.4fr) 100px 70px minmax(0, 1fr) auto; gap: 8px; } }
/* on a phone a row is two short lines: the name and the price, then where it is dearer or cheaper and what you hold */
@media (max-width: 979px) { .lot-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "icon name price" "icon cities held"; gap: 2px 8px; padding: 6px 8px; } .mgroup { gap: 5px; } .market { gap: 10px; } .lot-row .g-icon { width: 34px; height: 34px; align-self: center; } .spark { display: none; } .g-cities { justify-content: flex-start; } .g-held { flex-direction: row; gap: 6px; align-items: baseline; font-size: 11px; } .g-held b { font-size: 12.5px; } .lot-row .price { font-size: 14.5px; } }
@media (max-width: 374px) { .g-city { padding: 1px 5px 1px 1px; font-size: 10px; } .g-city img { width: 14px; height: 14px; } }

/* the porter: one green bar to sell what pays here, one gold bar on a city's card to load for it; the basket listed under each */
.porter-box { display: flex; flex-direction: column; gap: 6px; }
.porter-box:empty { display: none; }
.porter { padding: 10px; border-radius: 16px; border: 1px solid rgba(108,196,90,.4); background: linear-gradient(135deg, rgba(108,196,90,.14), rgba(108,196,90,.03) 60%), var(--surface); display: flex; flex-direction: column; gap: 8px; }
.porter.fresh { animation: stall-in .5s var(--bounce) both; }
.porter-go { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic what gain" "ic sub gain"; align-items: center; column-gap: 10px; width: 100%; padding: 9px 14px; border-radius: 14px; border: 1px solid transparent; text-align: left; cursor: pointer; font: inherit; color: #0d1f0a; background: linear-gradient(135deg, #a9ec98, var(--gob) 55%, var(--gob-2)); box-shadow: 0 12px 30px -12px rgba(108,196,90,.9), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .15s var(--ease), filter .15s; }
.porter-go:hover { filter: brightness(1.06); transform: translateY(-1px); }
.porter-go .coin-ic, .porter-go > .ic { grid-area: ic; width: 24px; height: 24px; }
.porter-go > .ic { stroke-width: 2.2; }
.porter-go .p-what { grid-area: what; font: 700 15px/1.2 var(--display); letter-spacing: -.01em; }
.porter-go .p-sub { grid-area: sub; font-size: 11.5px; font-weight: 600; opacity: .8; line-height: 1.3; }
.porter-go .p-gain { grid-area: gain; font: 800 20px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; text-align: right; }
.porter-go.load { color: #1a1206; background: var(--acc-grad); box-shadow: 0 12px 30px -12px rgb(var(--acc-rgb) / .9), inset 0 1px 0 rgba(255,255,255,.3); }
.p-basket { display: flex; flex-wrap: wrap; gap: 4px; }
.p-basket span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--line); font: 600 11.5px var(--font); color: var(--muted); }
.p-basket img { width: 18px; height: 18px; border-radius: 5px; } .p-basket b { color: var(--up); font-variant-numeric: tabular-nums; }
.p-note { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.4; }
.porter-none { margin: 0; padding: 4px 10px; color: var(--dim); font-size: 12px; }
.porter-load { padding: 10px; border-radius: 14px; border: 1px solid rgba(242,181,58,.3); background: rgba(242,181,58,.05); gap: 8px; }
/* a porter's button that was pressed waits for the server's word: it is not pressed twice */
.porter-go.busy { opacity: .65; pointer-events: none; }
/* on a phone the bar is the button and one line of what goes; the whole basket and the small print open on a tap (remembered) */
.p-more { display: none; }
@media (max-width: 979px) {
  .porter { padding: 6px 6px 4px; gap: 0; }
  .porter-go { padding: 7px 12px; }
  .p-tail { display: none; }
  .p-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 28px; padding: 4px 8px 2px; border: 0; background: transparent; color: var(--muted); font: 600 11.5px var(--font); text-align: left; cursor: pointer; }
  .p-more span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .p-more .fold { width: 12px; height: 12px; flex: none; transition: transform .2s var(--ease); } .porter.open .p-more .fold { transform: rotate(90deg); }
  .porter:not(.open) .p-basket, .porter:not(.open) .p-note { display: none; }
  .porter.open .p-basket { margin: 4px 0 6px; }
}
@media (max-width: 420px) { .porter-go .p-what { font-size: 14px; } .porter-go .p-gain { font-size: 17px; } }
@media (max-width: 349px) { .porter-go { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic what" "ic gain" "ic sub"; } .porter-go .p-gain { text-align: left; } }

/* offers of the moment: stalls */
.lots { display: flex; flex-direction: column; gap: 6px; }
.lots:empty { display: none; }
.lots-head { display: flex; align-items: center; gap: 8px; padding: 0 4px; font: 700 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.lots-head::after { content: ""; flex: 1; height: 1px; background: rgba(242,181,58,.3); }
.lots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.stall { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(242,181,58,.45); background: linear-gradient(135deg, rgba(242,181,58,.16), rgba(242,181,58,.04) 60%), var(--surface); overflow: hidden; }
.stall.fresh { animation: stall-in .5s var(--bounce) both; }
.stall::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--acc); }
.stall.wanted { border-color: rgba(108,196,90,.5); background: linear-gradient(135deg, rgba(108,196,90,.16), rgba(108,196,90,.04) 60%), var(--surface); }
.stall.wanted::before { background: var(--gob); }
.stall.elsewhere { border-style: dashed; }
.stall.late { opacity: .55; }
.stall .st-when { color: var(--dim); font-size: 11px; }
.cargo-row.late { opacity: .6; }
.g-held .fresh { color: var(--warn); font-weight: 600; }
@keyframes stall-in { 0% { transform: scale(.92); opacity: 0; } 100% { transform: none; opacity: 1; } }
.stall img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.stall .st-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stall .st-kind { display: inline-flex; align-items: center; gap: 5px; font: 800 10px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-3); }
.stall.wanted .st-kind { color: var(--gob); }
.stall .st-kind .ic { width: 11px; height: 11px; }
.stall b { font: 600 13.5px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stall small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.stall small em { color: var(--up); font-style: normal; font-weight: 700; }
.stall .st-go { align-self: center; }
.stall .mark { position: absolute; right: -31px; top: 7px; width: 100px; transform: rotate(40deg); padding: 1px 0; text-align: center; background: var(--down); color: #fff; font: 800 9px/1.6 var(--font); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.stall .st-go { margin-right: 6px; }
@media (max-width: 420px) { .lots-grid { grid-template-columns: 1fr; } }
/* on a phone a stall is three short lines (what kind and how long it stands; what; at what price), so that two offers and the
   porter's bar still leave goods on the first screen; the heading goes once the first move is over */
@media (max-width: 520px) {
  .lots, .lots-grid { gap: 5px; }
  .stall { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px; } .stall img { width: 34px; height: 34px; border-radius: 9px; }
  .stall .st-body { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .stall .st-kind { order: 1; } .stall .st-when { order: 2; } .stall .st-body > b { order: 3; flex: 1 1 100%; } .stall .st-body > small:not(.st-when) { order: 4; flex: 1 1 100%; }
  .stall .st-mkt { display: none; }
  .stall .st-go { margin-right: 2px; }
  .pl.compact .lots-head { display: none; }
}

/* ---------- the map ---------- */
.map-wrap { position: relative; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(500px 300px at 50% 40%, rgba(31,138,138,.14), transparent 70%), #0e1a1f; overflow: hidden; }
.map { display: block; width: 100%; height: auto; }
.map .sea { fill: #0f2a33; }
.map .land { fill: #22301f; stroke: #3a5236; stroke-width: 1.2; }
.map .land2 { fill: #2c3a26; }
.map .route { stroke: rgba(246,241,230,.35); stroke-width: 2; fill: none; stroke-linecap: round; }
.map .route.sea { stroke-dasharray: 4 5; }
.map .route.off { opacity: .35; }
.map .route.lit { stroke: var(--acc); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(242,181,58,.8)); }
.map .route.danger { stroke: var(--down); opacity: .9; }
.map .route-lbl { fill: var(--parch); font: 700 10px var(--font); text-anchor: middle; paint-order: stroke; stroke: #0e1a1f; stroke-width: 3px; }
.map .route-lbl.off { fill: var(--muted); font-weight: 600; opacity: .8; }
.map .route-lbl.danger { fill: #ffb3c0; opacity: 1; }
.map .city { cursor: pointer; outline: none; }
.map .city .hit { fill: transparent; }
.map .city:focus-visible .ring { stroke: var(--acc-3); stroke-width: 3.5; }
.map .city .ring { fill: #171310; stroke: rgba(255,255,255,.25); stroke-width: 1.5; transition: stroke .2s; }
.map .city:hover .ring, .map .city.sel .ring { stroke: var(--acc); stroke-width: 2.5; }
.map .city.here .ring { stroke: var(--gob); stroke-width: 3; }
.map .city.far .ring { stroke: rgba(255,255,255,.12); }
.map .city.far image { opacity: .45; }
.map .city .name { fill: var(--text); font: 700 12px var(--display); paint-order: stroke; stroke: #0e1a1f; stroke-width: 3px; }
.map .city .sub { fill: var(--muted); font: 600 9px var(--font); paint-order: stroke; stroke: #0e1a1f; stroke-width: 3px; }
.map .city .tag { fill: var(--acc); font-weight: 800; }
.map .city .flag { fill: var(--warn); }
.map .city .lotmark { fill: var(--acc); stroke: #0e1a1f; stroke-width: 1; }
.map .city .lotnum { fill: #1a1206; font: 800 8.5px var(--font); pointer-events: none; }
/* on a phone the map is drawn small: its lettering is set larger so that it stays readable */
@media (max-width: 600px) { .map .city .name { font-size: 14px; } .map .city .sub { font-size: 10.5px; } .map .route-lbl { font-size: 11.5px; } }
.map .caravan { fill: var(--acc-3); stroke: #1a1206; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(242,181,58,.9)); animation: caravan 2.4s ease-in-out infinite; }
@keyframes caravan { 50% { r: 7.5; } }
.map .wave { fill: none; stroke: rgba(127,179,213,.28); stroke-width: 1.2; stroke-linecap: round; }
.map .rose circle { fill: rgba(14,26,31,.6); stroke: rgba(246,241,230,.25); stroke-width: 1; } .map .rose path { fill: rgba(246,241,230,.3); } .map .rose text { fill: rgba(246,241,230,.45); font: 700 8px var(--font); }
.map .realm { fill: rgba(246,241,230,.2); font: 700 9px var(--display); letter-spacing: .22em; text-transform: uppercase; }
.map .route.danger { animation: danger-dash 1.2s linear infinite; stroke-dasharray: 7 5; }
@keyframes danger-dash { to { stroke-dashoffset: -24; } }
.map .danger-mark { fill: #ff9fb0; font-weight: 800; }
.city-card { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.cc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-top img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.cc-top h3 { margin: 0; font: 700 18px var(--display); letter-spacing: -.01em; }
.cc-top p { margin: 0; color: var(--muted); font-size: 12.5px; }
.cc-top p b { color: var(--text); font-weight: 600; }
.cc-top > div:not(.cc-trip) { flex: 1 1 160px; min-width: 0; }
.cc-trip { margin-left: auto; text-align: right; }
.cc-trip b { display: block; font: 700 15px var(--display); color: var(--acc-3); }
.cc-trip small { color: var(--dim); font-size: 11.5px; }
.cc-cargo { display: flex; flex-direction: column; gap: 4px; }
.cc-cargo h4 { margin: 0; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cargo-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.03); }
.cargo-row img { width: 24px; height: 24px; border-radius: 6px; }
.cargo-row .here-p { color: var(--dim); font-variant-numeric: tabular-nums; }
.cargo-row.total { background: rgba(255,255,255,.06); }
.cargo-row.stack { grid-template-columns: 24px minmax(0, 1fr) auto; } .cargo-row.stack small { display: block; color: var(--dim); font-size: 11.5px; }
@media (max-width: 520px) { .cargo-row { grid-template-columns: 24px minmax(0, 1fr) auto; } .cargo-row .here-p { grid-column: 2; grid-row: 2; font-size: 11.5px; } .cargo-row .there-p, .cargo-row > b:last-child { grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: right; } }
.cc-verdict { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .cc-verdict.down { color: #ffb3c0; font-weight: 600; }
.cc-hints { display: flex; flex-direction: column; gap: 3px; } .cc-hint { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; } .cc-hint b { color: var(--dim); font-weight: 600; } .cc-hint img { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 3px; }
.cargo-row .there-p { font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-warn { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,112,136,.1); border: 1px solid rgba(255,112,136,.35); color: #ffd2da; font-size: 12.5px; }
.cc-warn .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cc-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(108,196,90,.1); border: 1px solid rgba(108,196,90,.35); color: #d6f2cf; font-size: 12.5px; }
.cc-note .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gob); }
.cargo-row .there-p.acc { color: var(--acc-3); }
/* the career place inside a week, and the kit you brought */
#careerInWeek { display: flex; flex-direction: column; gap: 10px; }
.kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.kit div { padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); min-width: 0; }
.kit small { display: block; color: var(--dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.kit b { display: block; font: 700 13px/1.3 var(--display); }
.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.road { position: relative; height: 66px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid var(--line); overflow: hidden; margin: 6px 0; }
.road .sky { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; mask-image: linear-gradient(90deg, transparent 15%, #000 75%); -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 75%); }
.road .r-line { position: absolute; left: 36px; right: 36px; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, rgba(246,241,230,.4) 0 10px, transparent 10px 18px); }
.road img { position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.road img.from { left: 8px; } .road img.to { right: 8px; }
.road .cart { position: absolute; top: 50%; left: 46px; width: 30px; height: 30px; margin-top: -17px; fill: rgba(242,181,58,.25); stroke: var(--acc-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(242,181,58,.8)); }
.road.go .cart { animation: ride 1.3s var(--ease) forwards; }
@keyframes ride { to { left: calc(100% - 76px); } }
.road .gank { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--down); opacity: 0; }
.road.robbed .gank { animation: gank-in .4s .6s var(--bounce) both; }
@keyframes gank-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.road .gank .ic { width: 42px; height: 42px; filter: drop-shadow(0 0 10px rgba(255,112,136,.9)); }
.road.robbed { border-color: rgba(255,112,136,.6); } .road.robbed .cart { animation: ride-stop 1.3s var(--ease) forwards; }
@keyframes ride-stop { 60%, 100% { left: calc(50% - 44px); } }
.dlg.ambush { animation: ambush .6s var(--ease); box-shadow: 0 0 0 2px rgba(255,112,136,.7), 0 0 80px -10px rgba(255,112,136,.8); }
@keyframes ambush { 10%, 90% { transform: translateX(-3px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-8px) rotate(-.6deg); } 40%, 60% { transform: translateX(8px) rotate(.6deg); } }

/* ---------- the workshop ---------- */
.profs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 620px) { .profs { grid-template-columns: 1fr; } }
.recipes { display: flex; flex-direction: column; gap: 10px; }
.rgroup-head { display: flex; align-items: center; gap: 8px; padding: 0 4px; font: 700 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.rgroup-head img { width: 18px; height: 18px; border-radius: 5px; }
.rgroup-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* the recipes of higher levels, folded */
.rgroup-head.fold-head { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; min-width: 0; overflow: hidden; }
.rgroup-head.fold-head:hover { color: var(--muted); }
.rgroup-head .fold { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .2s var(--ease); } .rgroup-head[aria-expanded="false"] .fold { transform: none; }
.rgroup-head .fold-note { order: 9; text-transform: none; letter-spacing: 0; font: 500 11.5px var(--font); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.rgroup { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 8px; }
.recipe { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--surface); min-width: 0; }
.recipe.locked { opacity: .6; }
.recipe.can { border-color: rgba(108,196,90,.35); }
.recipe.lit { border-color: rgba(242,181,58,.7); box-shadow: 0 0 30px -8px rgba(242,181,58,.7); }
.rc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-top > div:not(.earn) { min-width: 0; flex: 1; }
.rc-top img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.rc-top b { display: block; font: 700 14px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-top small { display: block; color: var(--dim); font-size: 11.5px; }
.rc-top .earn { margin-left: auto; text-align: right; flex: none; }
.rc-top .earn b { font: 700 13.5px var(--display); }
.rc-top .earn small { font-size: 10.5px; }
.needs { display: flex; flex-wrap: wrap; gap: 4px; }
.need { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--line); font: 600 11.5px var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.need img { width: 18px; height: 18px; border-radius: 5px; }
.need.short { border-color: rgba(255,112,136,.45); color: #ffd2da; }
.need.ok { border-color: rgba(69,212,131,.35); color: var(--up); }
.rc-qty { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-qty input { flex: 1 1 64px; } .rc-qty .mini-btn { flex: 0 0 auto; justify-content: center; }
@media (max-width: 420px) { .rc-qty .mini-btn { flex: 1 1 40%; } }
.rc-qty .step, .t-qty .step, .l-qty .step { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--text); font: 700 18px var(--font); cursor: pointer; display: grid; place-items: center; }
.rc-qty input, .t-qty input { height: 36px; min-width: 0; text-align: center; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); color: var(--text); font: 700 15px var(--display); -moz-appearance: textfield; }
.rc-qty input::-webkit-inner-spin-button, .t-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.rc-qty .max { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-actions .mini-btn { flex: 1 1 auto; justify-content: center; white-space: normal; text-align: center; line-height: 1.25; }
.rc-note { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.4; }
.rc-note b { color: var(--muted); }
.rc-note.warn { color: var(--warn); font-weight: 600; }
.mini-btn.danger { border-color: rgba(255,112,136,.4); color: #ffd2da; }

/* ---------- orders ---------- */
.orders-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.orders-head b { color: var(--text); font: 700 14px var(--display); }
.orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; align-items: start; }
.scroll { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 6px 16px 6px 16px; border: 1px solid rgba(246,241,230,.2); background: linear-gradient(180deg, #f1e7cf, #e6d7b4); color: var(--ink); box-shadow: inset 0 0 40px rgba(120,80,20,.18), 0 10px 24px -14px rgba(0,0,0,.8); overflow: hidden; }
.scroll::before, .scroll::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: linear-gradient(180deg, rgba(90,60,20,.35), transparent); }
.scroll::before { top: 0; } .scroll::after { bottom: 0; transform: scaleY(-1); }
.scroll.done, .scroll.failed, .scroll.gone { opacity: .75; filter: saturate(.6); }
/* a scroll opens on a tap of its head; folded, it is two lines */
.sc-head { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
@media (max-width: 420px) { .sc-chev { position: absolute; right: 0; top: 2px; margin: 0; } .sc-head .sc-top { padding-right: 22px; } }
.sc-head:focus-visible { outline-color: #7a4d08; }
.sc-chev { flex: none; width: 16px; height: 16px; margin: 2px 0 0 -2px; color: #8a6a3a; transform: rotate(90deg); transition: transform .2s var(--ease); }
.scroll.shut .sc-chev { transform: none; }
.scroll.shut .sc-prog, .scroll.shut .sc-plan, .scroll.shut .sc-actions { display: none; }
.scroll.shut { gap: 6px; padding-bottom: 11px; }
.scroll.shut .sc-pay small:not(:first-of-type) { display: none; }
.sc-leaves { color: #2f6b2a; font-weight: 700; } .sc-leaves .coin-ic { width: 13px; height: 13px; } .sc-leaves.urgent { color: #b3344d; }
.scroll.shut .stamp.accepted { bottom: 8px; }
.sc-top { display: flex; align-items: flex-start; gap: 10px; }
.sc-top img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(60,40,10,.4); }
.sc-who { font: 600 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #6b5330; }
.sc-want { font: 700 15px/1.2 var(--display); color: #1b150d; }
.sc-want em { font-style: normal; color: #8a5a0e; }
.sc-pay { margin-left: auto; text-align: right; flex: none; }
.sc-pay b { display: block; font: 800 16px var(--display); color: #7a4d08; }
.sc-pay small { color: #6b5330; font-size: 10.5px; display: block; }
.sc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: #4a3a22; }
.sc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sc-meta img { width: 16px; height: 16px; border-radius: 4px; }
.sc-meta .ic { width: 13px; height: 13px; }
.sc-meta .urgent { color: #b3344d; font-weight: 700; }
.sc-prog { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4a3a22; }
.sc-prog .bar { flex: 1; background: rgba(90,60,20,.18); } .sc-prog .bar i { background: linear-gradient(90deg, #b8760f, #f2b53a); }
.sc-prog .bar.full i { background: linear-gradient(90deg, #3f8a33, #6cc45a); }
.sc-plan { padding: 6px 9px; border-radius: 8px; background: rgba(90,60,20,.1); border-left: 3px solid rgba(122,77,8,.45); font-size: 12px; line-height: 1.4; color: #3a2a12; }
.sc-plan p { margin: 0; } .sc-plan.bad { border-left-color: #b3344d; }
.sc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.scroll.accepted .sc-actions { padding-right: 76px; }
.sc-actions .mini-btn { background: rgba(60,40,10,.08); border-color: rgba(60,40,10,.25); color: #3a2a12; }
.sc-actions .mini-btn:hover { background: rgba(60,40,10,.16); color: #1b150d; }
.sc-actions .mini-btn.go { background: var(--acc-grad); border-color: transparent; color: #1a1206; }
.sc-actions .mini-btn.danger { color: #8a2238; border-color: rgba(179,52,77,.4); }
.sc-why { font-size: 11.5px; color: #6b5330; }
@media (max-width: 420px) { .sc-top { flex-wrap: wrap; } .sc-pay { margin-left: 0; width: 100%; text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sc-pay small { display: inline; } }
.stamp { position: absolute; right: 12px; top: 40%; transform: rotate(-14deg); padding: 4px 10px; border: 3px solid; border-radius: 6px; font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; opacity: .85; pointer-events: none; }
.stamp.done { color: #2f6b2a; border-color: #2f6b2a; }
/* a scroll that is over: its stamp sits in the lower corner, clear of the pay; the fine and the price ratio no longer matter */
.scroll.done .stamp, .scroll.failed .stamp, .scroll.gone .stamp { top: auto; bottom: 9px; right: 10px; font-size: 11px; padding: 2px 8px; border-width: 2px; }
.scroll.done .sc-pay small, .scroll.failed .sc-pay small, .scroll.gone .sc-pay small { display: none; }
.scroll.done .sc-meta, .scroll.failed .sc-meta, .scroll.gone .sc-meta { padding-right: 104px; }
.stamp.done.fresh { animation: stamp-in .45s var(--bounce) both; }
.stamp.failed, .stamp.gone { color: #8a2238; border-color: #8a2238; }
.stamp.accepted { color: #7a4d08; border-color: #7a4d08; top: auto; bottom: 12px; right: 10px; font-size: 10px; padding: 2px 7px; border-width: 2px; transform: rotate(-8deg); }
.stamp.accepted.fresh { animation: stamp-small .45s var(--bounce) both; }
@keyframes stamp-small { 0% { transform: rotate(-8deg) scale(2.4); opacity: 0; } 100% { transform: rotate(-8deg) scale(1); opacity: .85; } }
@keyframes stamp-in { 0% { transform: rotate(-14deg) scale(2.2); opacity: 0; } 70% { opacity: 1; } 100% { transform: rotate(-14deg) scale(1); opacity: .85; } }

/* ---------- the crier, the talk, the happenings ---------- */
.side-orders { display: none; flex-direction: column; gap: 5px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.so-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 0; background: rgba(255,255,255,.03); color: var(--muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.so-row:hover { background: rgba(255,255,255,.07); } .so-row.mine { box-shadow: inset 2px 0 0 var(--acc); } .so-row img { width: 26px; height: 26px; border-radius: 7px; }
.so-row b { display: block; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .so-row small { display: block; color: var(--dim); font-size: 11.5px; } .so-row em { font: 700 13px var(--display); font-style: normal; color: var(--acc-3); }
@media (min-width: 1500px) { .wrap { width: min(100% - 48px, 1480px); } .layout { grid-template-columns: 160px minmax(0, 1fr) 400px; } .side-orders { display: flex; } .orders { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
.side-theme { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(242,181,58,.14), rgba(242,181,58,.03)); border: 1px solid rgba(242,181,58,.35); cursor: pointer; }
.side-theme .ic { width: 18px; height: 18px; color: var(--acc); flex: none; margin-top: 2px; }
.side-theme b { display: block; font: 700 13px var(--display); color: var(--acc-3); }
.side-theme small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.crier { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(108,196,90,.07), transparent 55%), var(--surface); }
.crier-top { display: flex; gap: 10px; align-items: flex-start; }
.gob-wrap { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 45% 40%, rgba(108,196,90,.28), rgba(108,196,90,.04) 72%); }
.gob { width: 50px; height: 50px; transform-origin: 50% 85%; }
.gob-wrap.shout .gob { animation: shout .75s var(--bounce); }
@keyframes shout { 0% { transform: none; } 25% { transform: scale(1.16) rotate(-6deg); } 55% { transform: scale(.96) rotate(4deg); } 100% { transform: none; } }
.gob-wrap.idle .gob { animation: idle 5s ease-in-out infinite; }
@keyframes idle { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) rotate(-2deg); } }
.bubble { position: relative; flex: 1; min-width: 0; padding: 9px 12px; border-radius: 14px; background: var(--parch); color: var(--ink); box-shadow: 0 10px 24px -14px rgba(0,0,0,.8); transition: background .3s; }
.bubble::before { content: ""; position: absolute; left: -8px; top: 18px; border: 7px solid transparent; border-right-color: var(--parch); border-left: 0; transition: border-color .3s; }
.bubble.raid { background: var(--parch-2); } .bubble.raid::before { border-right-color: var(--parch-2); }
.bubble.pop { animation: bubble-pop .5s var(--bounce) both; transform-origin: 0 30%; }
@keyframes bubble-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bubble-text { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 500; }
.bubble-stamp { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10.5px; color: #6b5a3a; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; flex-wrap: wrap; }
.bubble-stamp img { width: 14px; height: 14px; border-radius: 4px; }
.bubble-also { margin: 5px 0 0; padding-top: 5px; border-top: 1px dashed rgba(60,40,10,.3); font-size: 12px; line-height: 1.35; color: #4a3a22; }
.sure { padding: 0 5px; border-radius: 4px; font-size: 9.5px; letter-spacing: .1em; }
.sure.yes { background: #2f6b2a; color: #fff; } .sure.no { background: #b3344d; color: #fff; }
.news-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-top: 2px; }
/* the side column's two tabs */
.side-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--line); margin-top: 2px; }
.side-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 12.5px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.side-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.side-tab[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.side-tab i { font-style: normal; font-size: 10.5px; color: var(--dim); padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.06); font-variant-numeric: tabular-nums; }
.side-tab i:empty { display: none; }
.side-tab i.dot { display: inline-block; width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px rgba(242,181,58,.8); }
.side-pane .news { max-height: 440px; }
.news li.head { grid-template-columns: 1fr; padding: 6px 2px 0; background: transparent; border: 0; font: 600 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.news li.ahead { border-left-color: rgba(242,181,58,.5); }
.news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.news li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 6px 9px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 12.5px; color: var(--muted); line-height: 1.35; border-left: 2px solid transparent; }
.news li .n-ic { display: flex; gap: 3px; } .news li .n-ic img { width: 22px; height: 22px; border-radius: 6px; }
.news li .n-txt { min-width: 0; }
.news li small { display: flex; align-items: center; gap: 5px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.news li.raid { border-left-color: var(--down); color: var(--text); }
.news li.new { animation: news-in .5s var(--ease) both; }
.news li.lv { border-left-color: var(--gob); } .news li.gank { border-left-color: var(--down); } .news li.fine { border-left-color: var(--warn); }
.news li.deed .coin-ic { width: 15px; height: 15px; margin-top: 2px; } .news li.deed.up { border-left-color: rgba(69,212,131,.6); } .news li.deed.down { border-left-color: rgba(255,112,136,.6); }
@keyframes news-in { from { opacity: 0; transform: translateY(-6px); } }
.news .empty { border: 0; background: transparent; grid-template-columns: 1fr; }
/* the crier on a phone */
.crier-mini .crier { padding: 10px; gap: 6px; }
.crier-mini .gob-wrap { width: 46px; height: 46px; } .crier-mini .gob { width: 42px; height: 42px; }
.crier-mini .news { max-height: 220px; }
.crier-mini:not(.open) .news, .crier-mini:not(.open) .news-head { display: none; }
.crier-mini .news-toggle { align-self: flex-start; }

/* ---------- dialogs ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; animation: fade .2s both; background: rgba(8,6,3,.72); }
@keyframes fade { from { opacity: 0; } }
.dlg { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 22px 20px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--surface); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); animation: pop .4s var(--ease) both; outline: none; scrollbar-width: thin; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dlg.wide { width: min(100%, 660px); }
.close-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.close-x:hover { color: var(--text); background: rgba(255,255,255,.08); }
.dlg-title { margin: 0 0 12px; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; padding-right: 36px; }
.dlg-title .trophy { color: var(--acc); }
.dlg-text { margin: 0 0 10px; color: var(--text); font-size: 14px; line-height: 1.5; }
.dlg-text.dim { color: var(--muted); font-size: 13px; }
@media (max-width: 420px) { .dlg { padding: 20px 14px 16px; border-radius: 20px; } }
@media (max-width: 600px) { .overlay { padding: 0; align-items: end; } .dlg { max-height: calc(100dvh - 24px); border-radius: 22px 22px 0 0; animation: sheet .35s var(--ease) both; } @keyframes sheet { from { transform: translateY(40px); opacity: 0; } } }

/* the trade panel */
.dlg.trade { width: min(100%, 540px); }
.t-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.t-head img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.t-name { min-width: 0; flex: 1; }
.t-name h2 { margin: 0; font: 700 18px/1.15 var(--display); letter-spacing: -.01em; }
.t-name small { color: var(--dim); font-size: 12px; }
.t-price { text-align: right; flex: none; }
.t-price b { display: block; font: 700 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.t-price small { display: block; color: var(--dim); font-size: 11px; max-width: 190px; line-height: 1.3; } .t-price small s { color: var(--muted); }
.t-price b.dear { color: var(--warn); }
.t-cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.t-cities div { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid var(--line); font-size: 12px; color: var(--muted); min-width: 0; }
.t-cities img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.t-cities b { display: block; font: 700 13px var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.t-cities small { display: block; font-size: 10px; line-height: 1.25; }
.t-cities .cheaper b { color: var(--up); } .t-cities .dearer b { color: var(--acc-3); }
@media (max-width: 520px) { .t-cities div { flex-wrap: wrap; gap: 4px 6px; padding: 6px; } .t-cities small { white-space: normal; flex: 1 1 100%; font-size: 10.5px; line-height: 1.25; } .t-cities div > div { display: contents; } }
.t-held { margin: 10px 0 8px; color: var(--muted); font-size: 13px; }
.t-held b { color: var(--text); }
.t-qty { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; margin-top: 12px; }
.t-qty .step { width: 44px; height: 44px; font-size: 20px; }
.t-qty input { height: 44px; font-size: 20px; }
input[type="range"] { width: 100%; accent-color: var(--acc); margin: 10px 0 6px; }
.t-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.t-quick .mini-btn { flex: 1 1 auto; justify-content: center; }
.t-depth { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.d-track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(138,215,255,.25), rgba(255,255,255,.06) 50%, rgba(255,176,32,.3)); border: 1px solid var(--line); }
.d-track i { position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px; transition: left .25s var(--ease); }
.d-track .d-fill { top: 0; bottom: 0; height: auto; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(242,181,58,.5), var(--acc)); transition: left .25s var(--ease), width .25s var(--ease); }
.d-track .d-fill.neg { background: linear-gradient(90deg, #8ad7ff, rgba(138,215,255,.45)); }
.d-zero { left: 50%; background: rgba(255,255,255,.35); margin-left: -2px; }
.d-now { background: var(--text); margin-left: -2px; }
.d-after { background: var(--acc); margin-left: -2px; box-shadow: 0 0 8px rgba(242,181,58,.9); }
.d-after.neg { background: #8ad7ff; box-shadow: 0 0 8px rgba(138,215,255,.9); }
.t-depth small { color: var(--muted); font-size: 12px; }
.t-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; min-height: 2.8em; }
.t-note b { color: var(--text); }
.t-note .warn { color: var(--warn); font-weight: 600; }
.t-go { width: 100%; margin-top: 12px; position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -16px 14px 2px var(--surface), 0 10px 28px -12px rgb(var(--acc-rgb) / .9); }
@media (max-width: 480px) { .t-head { flex-wrap: wrap; row-gap: 6px; } .t-price { flex: 1 1 100%; display: flex; align-items: baseline; gap: 8px; text-align: left; } .t-price small { max-width: none; } }
@media (max-height: 640px) { .dlg.trade { padding-top: 16px; } .t-depth small { display: none; } .t-note { min-height: 0; } .t-cities { margin-top: 8px; } }
.t-go.sell { background: linear-gradient(135deg, #a9ec98, var(--gob) 55%, var(--gob-2)); color: #0d1f0a; box-shadow: 0 10px 28px -12px rgba(108,196,90,.9), inset 0 1px 0 rgba(255,255,255,.3); }

/* the result ledger and moments */
.dlg.result { width: min(100%, 580px); text-align: center; }
.verdict { margin: 0; font: 700 clamp(22px, 6vw, 32px)/1.1 var(--display); letter-spacing: -.03em; }
.verdict-sub { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.res-hero { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 4px; }
.res-hero b { font: 700 clamp(32px, 8vw, 50px)/1 var(--display); letter-spacing: -.03em; color: var(--acc-3); text-shadow: 0 0 34px rgba(242,181,58,.35); }
.res-hero .coin-ic.big { width: 38px; height: 38px; filter: drop-shadow(0 8px 16px rgba(242,181,58,.5)); animation: coin-in .7s var(--bounce) both; }
@keyframes coin-in { 0% { transform: scale(.4) rotate(-40deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.res-profit { margin: 0; font-weight: 600; font-size: 15px; color: var(--muted); }
.res-profit.up { color: var(--up); } .res-profit.down { color: var(--down); }
.res-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.res-badges .chip { animation: chip-pop .5s var(--bounce) both; }
@keyframes chip-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.res-chart { margin: 14px 0 4px; padding: 10px 12px 8px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); text-align: left; }
.chart-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-weight: 600; min-height: 1.5em; }
.chart-tip { color: var(--text); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.worth-chart { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.worth-chart .grid { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.worth-chart .base { stroke: rgba(255,255,255,.35); stroke-dasharray: 3 4; stroke-width: 1; }
.worth-chart .area { fill: url(#worthG); }
.worth-chart .line { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.worth-chart .lbl { fill: var(--dim); font: 600 9.5px var(--font); }
.worth-chart .lbl.base-lbl { fill: var(--muted); }
.worth-chart .cross { stroke: rgba(255,255,255,.5); stroke-width: 1; }
.worth-chart .pt { fill: var(--acc); stroke: var(--surface); stroke-width: 2; }
.worth-chart .end { fill: var(--acc-3); stroke: var(--surface); stroke-width: 2; }
.worth-chart .note { fill: var(--dim); font: 500 11px var(--font); }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; text-align: left; }
.ledger div { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); min-width: 0; }
.ledger dt { color: var(--dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.ledger dd { margin: 0; font: 700 14px/1.3 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ledger dd small { display: block; color: var(--muted); font: 500 11.5px var(--font); white-space: normal; }
.ledger div.wide { grid-column: 1 / -1; }
.ledger .kept-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ledger .kept-list span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 2px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--line); font: 600 11px var(--font); color: var(--muted); }
.ledger .kept-list img { width: 18px; height: 18px; border-radius: 5px; }
.res-split { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); text-align: left; display: flex; flex-direction: column; gap: 5px; }
.res-split h3 { margin: 0 0 2px; color: var(--dim); font: 600 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.split-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.split-row b { font: 700 13px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; } .split-row .bar { height: 5px; }
.split-best { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.res-rank { margin: 10px 0 0; display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
/* on a phone the ledger is long: what leads out of it stays in reach */
@media (max-width: 600px) { .dlg.result .win-actions { position: sticky; bottom: -1px; z-index: 2; margin: 14px -14px 0; padding: 10px 14px; background: linear-gradient(180deg, rgba(23,19,16,0), var(--surface) 30%); } }
.res-reach { margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; background: rgba(242,181,58,.08); border: 1px solid rgba(242,181,58,.3); color: var(--muted); font-size: 13px; line-height: 1.45; text-align: left; }
.res-reach b { color: var(--acc-3); }
.share-line { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.3); white-space: pre-wrap; font-size: 12.5px; color: var(--muted); text-align: left; user-select: all; }
.res-login { margin-top: 14px; padding: 12px; border-radius: 14px; background: rgba(88,101,242,.1); border: 1px solid rgba(88,101,242,.35); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.res-login p { margin: 0; color: var(--muted); font-size: 13px; }
.dlg.moment { text-align: center; }
.moment-body { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.moment-body b { color: var(--text); }
.moment-body .loot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.moment-body .loot span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: rgba(255,112,136,.12); border: 1px solid rgba(255,112,136,.4); color: #ffd2da; font: 600 12px var(--font); }
.moment-body .loot img { width: 22px; height: 22px; border-radius: 6px; }
.moment-body .parch { padding: 14px 16px; border-radius: 14px; background: var(--parch); color: var(--ink); text-align: left; font-size: 14px; line-height: 1.5; box-shadow: inset 0 0 40px rgba(120,80,20,.15); }
.moment-body .parch b { color: #7a4d08; display: block; font: 700 16px var(--display); margin-bottom: 4px; }
.dlg.ceremony { text-align: center; overflow: hidden; }
.cer-art { position: relative; display: grid; place-items: center; margin: 6px auto 12px; width: 150px; height: 130px; }
.cer-art.rays::before { content: ""; position: absolute; inset: -30px -40px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(242,181,58,.22) 0 9deg, transparent 9deg 22deg); mask-image: radial-gradient(circle, #000 25%, transparent 68%); -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%); animation: rays 14s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.cer-art > * { position: relative; }
.cer-art.medal img { width: 64px; height: 64px; border-radius: 16px; padding: 22px; box-sizing: content-box; background: radial-gradient(circle at 40% 30%, rgba(255,232,168,.35), rgba(242,181,58,.12) 55%, rgba(0,0,0,.35)); border: 2px solid rgba(242,181,58,.7); border-radius: 50%; box-shadow: 0 0 0 6px rgba(242,181,58,.12), 0 24px 50px -18px rgba(242,181,58,.9); image-rendering: auto; }
.cer-extra { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; }
.rank-ladder { display: flex; gap: 6px; align-items: center; }
.rank-ladder span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 10.5px var(--display); color: var(--dim); border: 1.5px solid var(--line-2); }
.rank-ladder span.had { background: rgba(242,181,58,.2); border-color: rgba(242,181,58,.6); color: var(--acc-3); }
.rank-ladder span.now { width: 30px; height: 30px; background: radial-gradient(circle at 40% 35%, #ffe8a8, var(--acc) 55%, var(--acc-2)); border-color: transparent; color: #3a2405; font-size: 12.5px; box-shadow: 0 0 16px rgba(242,181,58,.8); }
.cer-list { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.cer-list span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--line-2); font: 600 12px var(--font); color: var(--text); }
.cer-list img { width: 22px; height: 22px; border-radius: 6px; }
.pour { display: flex; align-items: center; gap: 12px; } .pour > div { padding: 8px 14px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid var(--line); text-align: left; }
.pour small { display: block; color: var(--dim); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; } .pour b { font: 700 16px var(--display); } .pour b.gold { color: var(--acc-3); } .pour .ic { color: var(--acc); width: 20px; height: 20px; }
.pour-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.card.lit { border-color: rgba(242,181,58,.7); box-shadow: 0 0 40px -10px rgba(242,181,58,.7); transition: border-color .4s, box-shadow .4s; }
.cer-art img { animation: unveil .9s var(--bounce) both; }
.cer-art .rank-seal { width: 96px; height: 96px; font-size: 34px; animation: unveil .9s var(--bounce) both; }
@keyframes unveil { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; filter: brightness(2); } 100% { transform: none; opacity: 1; filter: none; } }

/* boards */
.board-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.board-controls select { padding: 6px 28px 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5ab97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; color: var(--text); font-size: 12.5px; font-weight: 600; appearance: none; -webkit-appearance: none; }
.board-note { margin: 0 0 8px; color: var(--dim); font-size: 12.5px; min-height: 1.2em; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 7px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.seg input:checked + span { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.seg input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.seg input:hover:not(:checked) + span { color: var(--text); background: rgba(255,255,255,.05); }
.seg.small { margin-bottom: 10px; }
.seg.small span { padding: 6px 6px; font-size: 12.5px; }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.board li { display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; font-size: 13.5px; }
.board li.head { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding-bottom: 2px; }
.board li.head span:last-child { text-align: right; }
.board li:not(.head):nth-child(even) { background: rgba(255,255,255,.025); }
.board li.me { background: rgba(242,181,58,.12); box-shadow: inset 0 0 0 1px rgba(242,181,58,.4); }
.board .rk { font: 700 13px var(--display); color: var(--dim); text-align: right; }
.board .rk.top1 { color: #ffd166; } .board .rk.top2 { color: #d9dbe3; } .board .rk.top3 { color: #d98f5a; }
.board img.av { width: 30px; height: 30px; border-radius: 50%; background: #2a2418; display: block; }
.board .nm { min-width: 0; display: flex; flex-direction: column; }
.board .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board .nm i { font-style: normal; font-size: 11.5px; color: var(--dim); font-weight: 500; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.board .nm .shelf { display: inline-flex; gap: 2px; }
.board .nm .shelf img { width: 16px; height: 16px; border-radius: 4px; }
.board .sc { font: 700 15px var(--display); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.board-cta { margin-top: 14px; padding: 14px; border-radius: 14px; background: rgba(88,101,242,.1); border: 1px solid rgba(88,101,242,.35); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.board-cta p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.board-cta b { color: var(--text); }

/* settings, help, account */
.settings-body { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; flex-direction: column; gap: 8px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lbl2, .row-head label { font-weight: 600; font-size: 14px; }
.lbl-hint, output { color: var(--dim); font-size: 12.5px; }
.row-note { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.row-note b { color: var(--text); }
.switch { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch .track { flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--line-2); position: relative; transition: background .2s, border-color .2s; margin-top: 1px; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--acc-grad); border-color: transparent; }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--acc); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; gap: 1px; }
.switch-text small { color: var(--dim); font-size: 12px; font-weight: 400; }
.help { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.help h3 { margin: 0; font: 700 14.5px var(--display); color: var(--text); display: inline; }
.help p { margin: 8px 0 0; line-height: 1.5; }
.help-sec { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: rgba(255,255,255,.02); }
.help-sec[open] { background: rgba(255,255,255,.04); }
.help-sec summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.help-sec summary::-webkit-details-marker { display: none; }
.help-sec summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(-45deg); transition: transform .2s var(--ease); margin-right: 2px; flex: none; }
.help-sec[open] summary::before { transform: rotate(45deg); }
.help b { color: var(--text); }
.help .cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.help .cities div { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 12.5px; }
.help .cities img { width: 28px; height: 28px; border-radius: 8px; }
.help .cities b { display: block; font-size: 13px; }
.help .cities small { display: block; color: var(--dim); font-size: 11.5px; }
@media (max-width: 480px) { .help .cities { grid-template-columns: 1fr; } }
.account-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.account-row .avatar { width: 48px; height: 48px; }
.account-row b { display: block; font-size: 15px; }
.account-row small { color: var(--dim); font-size: 12px; }

/* ---------- the tour, toast, effects, footer ---------- */
.tour { position: fixed; left: 50%; bottom: calc(76px + var(--sab)); translate: -50% 0; z-index: 42; display: flex; gap: 10px; align-items: flex-start; width: min(100% - 24px, 460px); padding: 10px 12px; border-radius: 16px; background: var(--parch); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9), 0 0 0 3px rgba(108,196,90,.5); animation: bubble-pop .5s var(--bounce) both; }
.tour-gob { width: 40px; height: 40px; flex: none; }
.tour-body { min-width: 0; flex: 1; }
.tour-body p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.4; font-weight: 500; }
.tour-actions { display: flex; gap: 6px; }
.tour .mini-btn { background: rgba(60,40,10,.08); border-color: rgba(60,40,10,.25); color: #3a2a12; }
.tour .mini-btn.ghost { border-color: transparent; background: transparent; color: #6b5330; }
.tour-actions .mini-btn:first-child { background: rgba(60,40,10,.14); }
/* on a phone the line sits above the end of the move, so that it never covers it; a toast rises above the line */
@media (max-width: 979px) { .tour { bottom: calc(128px + var(--sab)); } html.touring-home .tour { bottom: calc(16px + var(--sab)); } }
html.touring-home .home { padding-bottom: calc(var(--tour-h, 0px) + 16px); }
@media (min-width: 980px) { .tour { bottom: 24px; left: auto; right: 24px; translate: none; } }
/* the goblin points: what the line is about wears a green ring that breathes */
.tour-target { animation: tour-ring 1.5s ease-in-out infinite; }
@keyframes tour-ring { 0%, 100% { box-shadow: 0 0 0 3px rgba(108,196,90,.9), 0 0 24px rgba(108,196,90,.55); } 50% { box-shadow: 0 0 0 6px rgba(108,196,90,.35), 0 0 34px rgba(108,196,90,.5); } }
.map .city.tour-target { animation: none; }
.map .city.tour-target .ring { stroke: var(--gob); stroke-width: 4; animation: tour-stroke 1.5s ease-in-out infinite; }
@keyframes tour-stroke { 50% { stroke-width: 7; stroke-opacity: .55; } }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sab) + var(--tour-h, 0px)); translate: -50% 0; z-index: 80; padding: 10px 16px; border-radius: 12px; background: var(--parch); color: #0c0a07; font-weight: 600; font-size: 14px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: none; }
.toast .amt { font: 700 15px var(--display); margin-right: 2px; } .toast .amt.up { color: #1f7a3d; } .toast .amt.down { color: #b3344d; }
/* the sum a trade made or cost rises from the purse (in Calm it stands there a moment and goes) */
.sum .float { position: absolute; right: 6px; top: -8px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font: 700 11.5px var(--display); font-style: normal; color: var(--text); white-space: nowrap; pointer-events: none; z-index: 3; animation: float-up 1.4s var(--ease) both; }
.sum .float.up { color: var(--up); border-color: rgba(69,212,131,.5); } .sum .float.down { color: var(--down); border-color: rgba(255,112,136,.5); }
@keyframes float-up { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
html.calm .sum .float { animation: none; }
@media (max-width: 979px) { .toast { bottom: calc(130px + var(--sab) + var(--tour-h, 0px)); } }
.fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.foot { color: var(--dim); font-size: 12px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding: 10px 0 calc(26px + var(--sab)); border-top: 1px solid var(--line); }
.foot a:hover { color: var(--text); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 979px) { .app.playing ~ .foot { display: none; } }

/* ---------- Calm: only ever the visitor's own choice (Settings here, or the front page); the script sets html.calm ---------- */
html.calm .gob-wrap.shout .gob, html.calm .gob-wrap.idle .gob, html.calm .bubble.pop, html.calm .news li.new, html.calm .lot-row.flash-up, html.calm .lot-row.flash-down, html.calm .lot-row.traded,
html.calm .sum.wince, html.calm .res-badges .chip, html.calm .res-hero .coin-ic.big, html.calm .wb-when b.swap, html.calm .overlay, html.calm .dlg, html.calm .skel-bar, html.calm .skel-rows i,
html.calm .stall.fresh, html.calm .porter.fresh, html.calm .stamp.done.fresh, html.calm .stamp.accepted.fresh, html.calm .raid-banner.on .ic, html.calm .road.go .cart, html.calm .road.robbed .gank, html.calm .cer-art img, html.calm .cer-art .rank-seal, html.calm .tour { animation: none; }
html.calm .tour-target { animation: none; box-shadow: 0 0 0 3px rgba(108,196,90,.9), 0 0 24px rgba(108,196,90,.55); }
html.calm .map .city.tour-target .ring { animation: none; }
html.calm .road.go .cart { left: calc(100% - 76px); }
html.calm .road.robbed .cart { left: calc(50% - 44px); }
html.calm .dlg.ambush, html.calm .wait-btn.on .ic, html.calm .cer-art.rays::before, html.calm .map .caravan, html.calm .map .route.danger { animation: none; }
html.calm .road.robbed .gank { opacity: 1; }
html.calm .pip, html.calm .bar i, html.calm .meter i, html.calm .end-btn, html.calm .fab, html.calm .btn, html.calm .toast, html.calm .d-track i, html.calm .p-more .fold, html.calm .porter-go { transition: none; }