/* Upright: the top bar, the view, and the two decks side by side under it.
   Sideways (#app.wide): the view stands in the middle with a deck either side. */
:root {
  --bg: #07080a;
  --panel: #101318;
  --panel2: #161a21;
  --line: #262b35;
  --ink: #ece4cf;
  --dim: #8a8577;
  --gold: #f0c050;
  --danger: #e0604a;
  --deck-h: clamp(170px, 27vh, 240px);
  --common: #b8b0a0; --magic: #6fa8ff; --rare: #ffd34d; --legendary: #ff8a3d; --set: #5fe08a; --relic: #c9a2ff; --exotic: #7fe8ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
}

#app {
  position: fixed; left: 0; right: 0; top: 0;
  height: var(--app-h, 100dvh);
  display: grid;
  grid-template-areas: "top top" "stage stage" "left right";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr var(--deck-h);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  touch-action: none;
}
#app.wide {
  grid-template-areas: "left top right" "left stage right";
  grid-template-columns: minmax(150px, 1fr) min(calc(100vw - 300px), 150vh) minmax(150px, 1fr);
  grid-template-rows: auto 1fr;
}

/* the top bar: health and charge, where you are, cargo, pause */
#topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.06em; font-size: 12px;
}
.bars { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 70px; max-width: 160px; }
.bar { position: relative; height: 10px; background: #1a0e10; border: 1px solid #3a2226; }
.bar.ch { height: 5px; background: #0c1420; border-color: #20324a; }
.bar .fill { height: 100%; width: 100%; background: #c8463c; transition: width 0.12s; }
.bar.ch .fill { background: #62b8ff; }
.bar.pull { height: 6px; background: #1a1408; border-color: #3a2c10; }
.bar.pull .fill { background: var(--gold); }
.bar.pull.fading .fill { background: #e0904a; }
.bar.pull.dark .fill { width: 0 !important; }
.bar.pull.dark { border-color: var(--danger); }
.bar.hp.warded { border-color: #8fb4ff; box-shadow: 0 0 6px #8fb4ff; }
.bar.hp.hurt .fill { background: #ff8a70; }
.bar.ch.low { border-color: var(--danger); }
.bar-text { position: absolute; right: 3px; top: -2px; font-size: 10px; line-height: 12px; color: #fff; text-shadow: 0 1px 0 #000; }
.hud-depth { color: var(--dim); white-space: nowrap; }
.icon-btn { min-height: 44px; min-width: 44px;
  min-width: 40px; min-height: 32px;
  background: none; color: var(--ink); border: 1px solid var(--line);
  font: inherit; font-weight: bold;
}
.icon-btn.cargo { color: var(--gold); font-weight: normal; white-space: nowrap; }
body:not(.diving) #topbar > * { visibility: hidden; }
body.home #topbar .bars, body.home #btn-cargo { visibility: hidden; }
body.home #btn-mine { display: none; }

#stage { grid-area: stage; position: relative; overflow: hidden; background: #000; }
#view, #view-glow, #bloom, #view-over {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}
/* over the view: what glows, its bloom, added on, then what is drawn unlit */
#view-glow, #bloom, #view-over { pointer-events: none; }
#bloom { mix-blend-mode: screen; }
@supports (mix-blend-mode: plus-lighter) { #bloom { mix-blend-mode: plus-lighter; } }

/* the decks */
.deck {
  position: relative;
  background: var(--panel);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: center;
}
#deck-left { grid-area: left; border-right: 1px solid var(--line); }
#app.wide #deck-left { border-right: none; }
/* the right thumb's cluster: the main hand big in the corner, the off hand,
   DASH and MINE round it, and the contextual action above */
#deck-right { grid-area: right; display: block; }
#deck-right .deck-btn { position: absolute; }
.deck-hint {
  position: absolute; bottom: calc(8px + env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; color: var(--dim); font-size: 10px; letter-spacing: 0.2em;
  pointer-events: none;
}
.deck-btn {
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(240, 192, 80, 0.08);
  color: var(--gold);
  font: inherit; font-size: 11px; font-weight: bold; letter-spacing: 0.06em;
  touch-action: none; padding: 0;
}
.deck-btn.main { right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 92px; height: 92px; font-size: 12px; }
.deck-btn.off { right: 112px; bottom: calc(22px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-color: #9fc4ff; color: #9fc4ff; background: rgba(140, 180, 255, 0.08); }
.deck-btn.dash { right: 100px; bottom: calc(90px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-color: #c9a2ff; color: #c9a2ff; background: rgba(200, 160, 255, 0.08); font-size: 10px; }
.deck-btn.mine { right: 34px; bottom: calc(118px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-color: var(--dim); color: var(--ink); background: rgba(255, 255, 255, 0.04); font-size: 10px; }
.deck-btn.held { background: rgba(240, 192, 80, 0.4); color: #111; }
.deck-btn.charging { box-shadow: 0 0 10px rgba(255, 240, 200, 0.5); }
.deck-btn.charged { box-shadow: 0 0 18px rgba(255, 240, 200, 0.95); background: rgba(255, 240, 200, 0.3); }
.deck-btn.cooling { opacity: 0.45; }
.deck-btn.act { left: auto; top: auto; right: 10px; bottom: calc(100% + 8px); width: auto; height: 44px; padding: 0 16px; border-radius: 22px; color: #111; background: var(--gold); white-space: nowrap; z-index: 5; }
#app.wide .deck-btn.act { bottom: calc(166px + env(safe-area-inset-bottom)); right: 8px; }
/* at a spire, TRAVEL sits over BANK */
.deck-btn.act.act2 { bottom: calc(100% + 60px); background: #2a2210; color: var(--gold); border-color: var(--gold); }
#app.wide .deck-btn.act.act2 { bottom: calc(218px + env(safe-area-inset-bottom)); }
/* the smallest phones: the cluster tightens so nothing overlaps */
@media (max-width: 360px) {
  #app:not(.wide) .deck-btn.main { width: 80px; height: 80px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  #app:not(.wide) .deck-btn.off { width: 52px; height: 52px; right: 96px; bottom: calc(18px + env(safe-area-inset-bottom)); }
  #app:not(.wide) .deck-btn.dash { width: 46px; height: 46px; right: 86px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  #app:not(.wide) .deck-btn.mine { width: 46px; height: 46px; right: 22px; bottom: calc(100px + env(safe-area-inset-bottom)); }
}
.deck-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.btn-icon { width: 40px; height: 40px; image-rendering: pixelated; pointer-events: none; }
.deck-btn.off .btn-icon { width: 20px; height: 20px; }
.deck-btn span { pointer-events: none; }
.deck-btn[hidden] { display: none; }

.stick-base {
  position: fixed; z-index: 5;
  width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid rgba(240, 192, 80, 0.35);
  pointer-events: none;
}
.stick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px;
  border-radius: 50%;
  background: rgba(240, 192, 80, 0.45);
}

.toasts {
  position: fixed; left: 0; right: 0; top: calc(48px + env(safe-area-inset-top)); z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
}
.toast {
  background: rgba(0, 0, 0, 0.75); border: 1px solid var(--line);
  padding: 3px 10px; font-size: 12px;
  animation: toast-fade 1.8s forwards;
}
@keyframes toast-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* rarity colours */
.r-common { color: var(--common); } .r-magic { color: var(--magic); } .r-rare { color: var(--rare); }
.r-legendary { color: var(--legendary); } .toast.r-tip { color: var(--gold); border-color: #4a3a1a; } .toast.r-log { color: #eadfc4; font-style: italic; border-color: #4a3a1a; } .r-set { color: var(--set); } .r-relic { color: var(--relic); } .r-exotic { color: var(--exotic); }

/* the screens */
.screen {
  --pad-l: max(16px, env(safe-area-inset-left)); --pad-r: max(16px, env(safe-area-inset-right));
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) var(--pad-r) calc(16px + env(safe-area-inset-bottom)) var(--pad-l);
  background: var(--bg);
  text-align: center;
}
.screen.panel { justify-content: flex-start; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; padding-top: 0; }
/* a panel's header: the title on the left, the way out on the right, held
   at the top while the panel scrolls (and over the notch) */
.screen-head {
  position: sticky; top: 0; z-index: 3; flex: none;
  align-self: stretch; margin: 0 calc(-1 * var(--pad-r)) 10px calc(-1 * var(--pad-l));
  padding: env(safe-area-inset-top, 0px) var(--pad-r) 0 var(--pad-l);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; gap: 10px; max-width: 420px; min-height: 60px; margin: 0 auto; }
.screen .screen-head h2 { flex: 1; min-width: 0; margin: 0; text-align: left; font-size: 17px; letter-spacing: 0.16em; }
.head-close {
  flex: none; width: 48px; height: 48px; padding: 0;
  background: var(--panel); color: var(--ink); border: 2px solid var(--ink);
  font: inherit; font-size: 20px; line-height: 1;
}
.head-close:active { background: var(--ink); color: #111; }
/* the report can run long: it scrolls, and centres when it doesn't */
#screen-report { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
#screen-report > :first-child { margin-top: auto; }
#screen-report > :last-child { margin-bottom: auto; }
/* CONTINUE stays in reach however long it runs */
#screen-report > .menu { position: sticky; bottom: 0; align-self: stretch; background: var(--bg); padding: 4px 0 calc(12px + env(safe-area-inset-bottom)); }
.chip-icon { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: middle; margin-right: 6px; }
@media (max-height: 500px) { .forge-go { padding: 4px 0; } .forge-go .btn { min-height: 40px; padding-top: 4px; padding-bottom: 4px; } }
.screen[hidden] { display: none; }
.screen h2 { letter-spacing: 0.2em; margin: 4px 0 12px; }
.screen h3 { font-size: 11px; letter-spacing: 0.2em; color: var(--dim); margin: 16px 0 6px; text-align: left; }
.note { color: var(--dim); font-size: 12px; text-align: left; margin: 6px 0; }
.list { width: 100%; max-width: 420px; text-align: left; }
.menu { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }

.logo {
  margin: 8px 0 8px;
  font-size: 34px; letter-spacing: 0.3em; padding-left: 0.3em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(240, 192, 80, 0.45);
}
.star-wrap { position: relative; width: 88px; height: 150px; }
#star {
  position: absolute; left: 0; top: 0;
  width: 88px; height: 128px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px rgba(245, 210, 122, 0.55));
  animation: star-float 4s ease-in-out infinite;
}
@keyframes star-float { 50% { transform: translateY(-6px); } }
.sinkhole {
  position: absolute; left: -16px; right: -16px; bottom: 0; height: 18px;
  border-radius: 50%;
  background: radial-gradient(#000 40%, #1c1914 100%);
}
.hub-body { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; }
.mag { letter-spacing: 0.15em; font-size: 12px; color: var(--gold); width: 100%; text-align: center; }
.mag .bar { height: 4px; margin: 6px auto 0; max-width: 200px; background: #20180a; border-color: #4a3a1a; }
.mag .bar > div { height: 100%; background: var(--gold); }
.report { min-height: 1.4em; margin: 10px 0 4px; }
.dot-new { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); vertical-align: middle; margin-left: 4px; }

.btn {
  min-width: 220px; min-height: 48px; margin: 5px;
  padding: 12px 18px;
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink);
  font: inherit; font-size: 15px; letter-spacing: 0.12em;
}
.btn.primary { background: var(--gold); border-color: var(--gold); color: #111; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn:disabled, .mini:disabled, .row:disabled { opacity: 0.35; }
.build { position: absolute; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 10px; color: var(--dim); }

/* rows in lists: an icon, a name and a line under it, and maybe a tag */
.row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; margin: 0 0 6px; padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font: inherit; text-align: left;
}
.row.static, .row.empty { opacity: 1; }
.row.empty { opacity: 0.5; }
.row.on { border-color: var(--gold); }
.row-tag { font-size: 10px; letter-spacing: 0.1em; }
.row-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.row-name { font-size: 14px; }
.row-sub { font-size: 11px; color: var(--dim); }
.row .cost { color: var(--gold); font-size: 13px; }
.row .slot { color: var(--dim); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.icon { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; }
.icon.big { width: 60px; height: 60px; }
.tag { font-size: 14px; }
.tag.up { color: #6fe08a; } .tag.down { color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 8px 10px; min-height: 44px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 12px; }
.chip.on { border-color: var(--gold); color: var(--gold); }
.mini { min-height: 44px; min-width: 44px; padding: 4px 8px; margin-left: 4px; background: var(--panel2); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 12px; }
.mini.wide { width: 100%; margin: 4px 0 0; text-align: left; }
.stats { font-size: 12px; color: var(--ink); line-height: 1.6; }

/* the item card */
.card-wrap {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.card-wrap[hidden] { display: none; }
.card {
  width: 100%; max-width: 380px; max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  text-align: left;
}
/* the card's header stays put; the rest scrolls under it */
.card-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.card-where { flex: 1; min-width: 0; font-size: 11px; letter-spacing: 0.14em; color: var(--dim); }
.card-bar .mini.fav { margin: 0; min-height: 48px; }
.card-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; padding: 14px; }
.card-head { display: flex; align-items: center; gap: 12px; }
.card-name { font-size: 17px; }
.card .base { margin: 10px 0 6px; }
.affixes { list-style: none; padding: 0; margin: 0 0 8px; }
.affixes li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; border-top: 1px solid var(--line); color: var(--magic); }
.affixes .rune { white-space: nowrap; }
.power { color: var(--legendary); margin: 8px 0; }
.set { color: var(--set); margin: 8px 0; font-size: 12px; }
.sockets .sock { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; color: #9fc4ff; }
.card .menu .btn { width: 100%; min-width: 0; margin: 4px 0; }
/* the card's buttons two to a row; the long ones across */
.card .card-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.card .card-menu .btn.wide { grid-column: 1 / -1; }
.btn.armed { background: var(--danger); color: #111; }

/* sideways, the side decks can be as narrow as 150px */
#app.wide .deck-btn.main { right: 8px; width: 80px; height: 80px; }
#app.wide .deck-btn.off { right: 92px; width: 52px; height: 52px; }
#app.wide .deck-btn.dash { right: 84px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
#app.wide .deck-btn.mine { right: 22px; bottom: calc(106px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }

/* the anvil */
.screen.anvil { justify-content: center; }
#anvil-canvas { width: min(92vw, 420px, calc((100dvh - 150px) * 120 / 84)); aspect-ratio: 120 / 84; image-rendering: pixelated; border: 1px solid var(--line); }
.anvil-call { font-size: 20px; letter-spacing: 0.2em; color: var(--gold); min-height: 1.5em; margin: 14px 0 0; text-align: center; }
.note.center { text-align: center; }

/* the reveal: the piece rises in its rarity's light */
.reveal-stage { position: relative; width: 100%; max-width: 360px; height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.reveal-beam { position: absolute; left: 50%; bottom: 60px; width: 60px; height: 280px; margin-left: -30px;
  background: linear-gradient(to top, var(--col), transparent); opacity: 0; filter: blur(6px); animation: beam 1.4s ease-out forwards; }
.reveal-icon { width: 100px; height: 100px; image-rendering: pixelated; position: relative; animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards; filter: drop-shadow(0 0 12px rgba(255,255,255,.4)); }
.reveal-name { font-size: 20px; margin-top: 18px; opacity: 0; animation: fadein .5s .7s forwards; text-align: center; }
.reveal-sub { color: var(--dim); font-size: 12px; opacity: 0; animation: fadein .5s .9s forwards; text-align: center; }
@keyframes beam { 0% { opacity: 0; transform: scaleY(0.2); transform-origin: bottom; } 40% { opacity: .9; } 100% { opacity: .55; transform: scaleY(1); } }
@keyframes rise { from { transform: translateY(80px) scale(.6); opacity: 0; } to { transform: translateY(-60px) scale(1); opacity: 1; } }
@keyframes fadein { to { opacity: 1; } }

/* the item card: how each affix rolled, the comparison, the keep star */
.affixes .aff { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.roll { display: block; height: 3px; width: 100%; max-width: 160px; background: #1c2230; }
.roll > span { display: block; height: 100%; background: #4f6fa8; }
.roll > span.high { background: var(--magic); }
.roll > span.over { background: var(--legendary); }
.compare { margin: 8px 0; padding: 6px 8px; border: 1px solid var(--line); background: var(--panel2); font-size: 12px; }
.compare .up { color: #6fe08a; } .compare .down { color: var(--danger); }
.card-head .grow { flex: 1; }
.mini.fav { color: var(--dim); }
.mini.fav.on { color: var(--gold); border-color: var(--gold); }

/* the forge: blueprints in a grid, the recipe below */
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; }
.bp .icon { width: 40px; height: 40px; }
.bp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 11px; }
.bp.on { border-color: var(--gold); color: var(--gold); }
.recipe-panel { margin-top: 4px; padding: 10px; border: 1px solid var(--line); background: var(--panel2); }
.chip small { display: block; font-size: 9px; color: var(--dim); letter-spacing: 0.08em; }
.preview { margin-top: 10px; padding: 8px; border-left: 2px solid var(--gold); font-size: 12px; }
.preview p { margin: 3px 0; }

/* someone speaking: Wick, or the star */
.speech { position: fixed; left: 12px; right: 12px; bottom: calc(var(--deck-h) + 62px + env(safe-area-inset-bottom)); z-index: 25;
  max-width: 420px; margin: 0 auto; padding: 8px 12px; background: rgba(8, 10, 16, 0.92); border: 1px solid #2a3a48; font-size: 13px; line-height: 1.45; pointer-events: none; }
.speech b { color: #7dffd8; letter-spacing: 0.1em; font-size: 11px; margin-right: 6px; }
.speech.star { border-color: #5a4a20; font-style: italic; color: #ffe9b0; }
.speech.star b { color: var(--gold); font-style: normal; }
.speech.settler b { color: #e0c89a; }
/* sideways there's no bottom deck: speak over the foot of the view */
#app.wide .speech { bottom: calc(12px + env(safe-area-inset-bottom)); left: calc((100vw - min(100vw - 300px, 150vh)) / 2 + 8px); right: calc((100vw - min(100vw - 300px, 150vh)) / 2 + 8px); }
/* over a screen, toasts sit just under a panel's header, clear of its title and its way out */
body.modal .toasts { top: calc(66px + env(safe-area-inset-top)); }
/* nothing talks over the anvil, a reveal or the story */
body.rapt .toasts { display: none; }
/* the story, a panel at a time */
.screen.story { justify-content: center; }
.story-text { max-width: 360px; font-size: 17px; line-height: 1.6; text-align: center; min-height: 6em; }
.echo { border-left: 2px solid #5a4a20; padding: 4px 10px; margin: 8px 0; font-size: 12px; }
.echo p { margin: 4px 0 0; color: var(--dim); }

/* the forge: blueprints in a strip along the top, FORGE kept in reach */
.bp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 76px; grid-template-columns: none; overflow-x: auto; touch-action: pan-x pan-y; scroll-snap-type: x proximity; padding-bottom: 4px; }
.bp-strip .bp { scroll-snap-align: center; }
.forge-go { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); margin: 0; }
h3 .dim { color: var(--dim); font-weight: normal; }
.forge-go .btn small { display: block; font-size: 11px; letter-spacing: 0.08em; margin-top: 2px; }
.card .card-menu .btn { font-size: 13px; letter-spacing: 0.1em; padding-left: 4px; padding-right: 4px; }
.mini.fav { font-size: 12px; }

/* the report: a row for each thing that happened */
.report { width: 100%; max-width: 380px; text-align: left; }
.rep-where { color: var(--dim); text-align: center; margin: 0 0 10px; letter-spacing: 0.08em; }
.rep-row { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.rep-label { flex: 0 0 104px; font-size: 10px; letter-spacing: 0.12em; padding-top: 2px; }
.rep-label.good { color: #6fd08a; } .rep-label.bad { color: var(--danger); } .rep-label.gold { color: var(--gold); }
.rep-text { flex: 1; }
.rep-bar { height: 6px; margin: 2px 0 6px; }
.rep-bar .fill { background: var(--gold); height: 100%; }

/* costs: the material's icon, how many and what, and how many there are */
.cost-tag { white-space: nowrap; color: var(--ink); }
.cost-tag.short, .cost-line.short, .rune-head .short { color: var(--danger); }
.cost-have { color: var(--dim); white-space: nowrap; }
.row-sub .cost-tag { display: block; white-space: normal; margin: 2px 0; }
.cost-tag.short .cost-have { color: var(--danger); }
.cost-icon { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -3px; margin-right: 4px; }
.cost-line { margin: 0 0 6px; }
/* rune work on the card: which ore pays, then each affix with its two
   buttons under it, each saying what it costs or why it can't */
.rune-head { display: flex; align-items: center; gap: 6px; margin: 8px 0; padding: 6px 8px; border: 1px solid var(--line); background: var(--panel2); font-size: 12px; }
.rune-head .cost-icon { width: 20px; height: 20px; margin: 0; flex: none; }
.rune-head b { color: var(--gold); font-weight: normal; }
.affixes li.runed { flex-wrap: wrap; }
.affixes li.runed .rune { display: flex; gap: 6px; width: 100%; white-space: normal; }
.rune-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.affixes .rune .rune-btn { flex: 1; margin: 0; }
.rune-btn small { display: block; font-size: 10px; letter-spacing: 0.04em; color: var(--dim); }
.btn.rune-btn small { font-size: 11px; }
.rune-btn:disabled { opacity: 0.75; color: var(--dim); }
.rune-btn.short small { color: var(--danger); }

/* circuits: a stone as a tile. A Form's is stone with a heavy rim, an
   Element's filled with its colour, a Glyph's etched with a dashed rim; an
   empty slot is dotted. --c is the stone's colour */
.tile { --c: var(--ink); flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 50px; min-height: 64px; padding: 3px 0; background: #0b0c10; border: 2px solid var(--c); color: var(--c); font: inherit; font-size: 11px; letter-spacing: 0.04em; }
.tile img { width: 40px; height: 40px; image-rendering: pixelated; pointer-events: none; }
.tile b { font-weight: bold; line-height: 1; }
.tile small { font-size: 9px; color: var(--dim); line-height: 1; }
.tile.t-form { border-width: 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5); }
.tile.t-element { background: color-mix(in srgb, var(--c) 16%, #0b0c10); }
.tile.t-glyph { border-style: dashed; }
.tile.t-empty { --c: #3a3f4c; border-style: dotted; color: var(--dim); }
.tile.t-empty b { font-size: 18px; }
.tile.sel { outline: 2px solid var(--gold); outline-offset: 2px; }
.tile.mini { width: auto; min-width: 30px; min-height: 0; height: 20px; padding: 0 3px; border-width: 1px; font-size: 10px; }
.tile.mini.t-form { border-width: 2px; box-shadow: none; }
.tile.mini.t-empty b { font-size: 11px; }
.mini-circuit { display: flex; gap: 3px; margin-top: 4px; }
/* a caster's circuit: its slots in a row, joined */
.circuit { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; margin: 6px 0 4px; }
.circuit .tile { width: 48px; }
.circuit .link { flex: 1 1 4px; min-width: 3px; max-width: 10px; height: 2px; background: #3a3f4c; }
.circuit-cost { font-size: 12px; margin: 4px 0; color: var(--dim); }
.circuit-cost b { color: var(--gold); font-weight: normal; }
.readout { padding: 6px 8px; border-left: 2px solid var(--gold); background: var(--panel2); font-size: 12px; }
.readout p { margin: 3px 0; }
.readout .warn { color: #ffb0a0; }
.readout .ore { color: #9fe0c8; }
.readout .linked { color: var(--gold); }
/* a linked pair: a gold chain between its tiles, and gold corners on them */
.circuit .link.linked { height: 8px; min-width: 8px; max-width: 12px; background: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 5px); border-top: 1px solid #8a6a20; border-bottom: 1px solid #8a6a20; }
.tile.linked { box-shadow: inset 0 -4px 0 var(--gold), 0 0 0 1px #8a6a20; }
.tile.mini.linked { box-shadow: inset 0 -2px 0 var(--gold); }
/* a long circuit (six or seven slots) on a phone: narrower tiles */
.circuit.long .tile { width: 44px; min-width: 40px; flex: 0 1 44px; }
.circuit.long .tile img { width: 32px; height: 32px; }
/* a resonance: gold when it's live, a dim stir when it's a stone away */
.res-banner { margin: 6px 0 2px; padding: 5px 8px; font-size: 12px; letter-spacing: 0.12em; border: 1px solid var(--line); color: var(--dim); }
.res-banner.on { color: #1a1206; background: linear-gradient(90deg, #f0c050, #ffe08a 60%, #f0c050); border-color: #ffe08a; font-weight: bold; }
.res-banner.stir { color: #d8c48a; border-style: dashed; border-color: #6a5a30; font-style: italic; letter-spacing: 0.06em; }
.res-text { font-size: 12px; margin: 2px 0 6px; color: #f0dca0; }
/* the Codex at the forge */
.codex { display: grid; gap: 6px; }
.rcard { padding: 7px 8px; border: 1px solid var(--line); background: var(--panel2); }
.rcard.whole { border-color: #6a5a30; }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; letter-spacing: 0.1em; }
.rcard.whole .rc-head b { color: var(--gold); }
.rc-head span { font-size: 10px; color: var(--dim); }
.rcard .note { margin: 5px 0 0; }
.tile.t-unknown { --c: #5a5040; border-style: dotted; color: #8a7a58; }
/* the drawer of stones to socket, grouped by kind */
.drawer { margin: 10px 0 4px; padding: 8px; border: 1px solid var(--line); background: #0b0c10; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; letter-spacing: 0.12em; color: var(--gold); }
.drawer-head .mini { margin: 0; }
.drawer-grp { margin-top: 8px; }
.drawer-grp .gl { font-size: 10px; letter-spacing: 0.16em; color: var(--dim); margin-bottom: 4px; }
.drawer-row { display: flex; flex-wrap: wrap; gap: 5px; }
.drawer .note { margin: 4px 0 0; }
.forge-tabs { margin-bottom: 6px; }
.forge-tabs .chip { flex: 1; min-width: 0; padding: 8px 4px; }

/* what kindling the territory takes, over the view's right side */
.hud-goal { position: absolute; right: 6px; top: 118px; z-index: 4; max-width: 46%; pointer-events: none;
  background: rgba(13, 11, 22, 0.82); border: 1px solid #3a3352; padding: 5px 7px; font-size: 10px; line-height: 1.35; color: #ebe6f6; text-align: left; }
.hud-goal b { display: block; color: #a77bff; font-size: 9px; letter-spacing: 0.12em; font-weight: normal; margin-bottom: 2px; }
.hud-goal .done { color: var(--gold); }
.hud-goal .dim { color: var(--dim); }
.hud-goal[hidden] { display: none; }

/* the world map (worldmap.js): whole device pixels to a map pixel */
.map-wrap { width: 100%; max-width: 420px; display: flex; justify-content: center; flex: none; }
.world-map { display: block; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid #0c0a14; touch-action: manipulation; }
.map-card { margin-top: 8px; }
.tcard { background: #0f0d17; border: 2px solid #2c2840; padding: 10px 12px; }
.tcard .nm { color: var(--gold); font-size: 15px; letter-spacing: 0.08em; }
.tcard .sub { color: var(--dim); font-size: 12px; margin: 2px 0 6px; }
.tcard .trow { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #241f35; padding: 5px 0; font-size: 12px; }
.tcard .trow span:first-child { color: var(--dim); font-size: 10px; letter-spacing: 0.08em; padding-top: 2px; }
.tcard .trow span:last-child { text-align: right; }
.tcard .goal { background: #1a1628; border-left: 2px solid #a77bff; padding: 6px 8px; margin: 6px 0; font-size: 12px; }
.tcard .menu { margin-top: 8px; }
.pill { display: inline-block; font-size: 10px; letter-spacing: 0.08em; padding: 2px 5px; border: 1px solid currentColor; margin-left: 6px; vertical-align: 1px; }
.pill.kindled, .pill.home { color: var(--gold); } .pill.contested { color: #ff5ad8; } .pill.dark { color: #a77bff; } .pill.edge { color: var(--dim); }