/* ═══════════════ THE ALMS · Thieves' Moon ═══════════════ */

:root {
  --void:       #050a07;
  --night:      #0b1510;
  --timber:     #101f17;
  --loam:       #16281d;
  --moss:       #2c4a38;
  --fern:       #6f9a7d;
  --moonsilver: #dbe7dc;
  --marian:     #9cc7d9;
  --gold:       #e9b854;
  --gold-hi:    #f6d98c;
  --brass:      #8a6a2f;
  --torch:      #f07f2e;
  --crimson:    #a13327;
  --parchment:  #d8c9a0;
  --ink:        #2a2118;

  --f-display: 'IM Fell English SC', serif;
  --f-fell:    'IM Fell English', serif;
  --f-body:    'Alegreya', Georgia, serif;
  --f-sc:      'Alegreya SC', Georgia, serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --tile: max(78px, min(calc((100vh - 345px) / 5), calc((100vw - 775px) / 5), 170px));
  --gutter: clamp(8px, 1.1vh, 13px);
  --notch: 10px;

  /* engraved-arrowhead cursors: steel default, gold over clickables, compass reticle while aiming */
  --cur-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><defs><linearGradient id='s' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23eef4ef'/><stop offset='.45' stop-color='%2399a8a0'/><stop offset='1' stop-color='%23414f47'/></linearGradient><filter id='g' x='-40%25' y='-40%25' width='180%25' height='180%25'><feGaussianBlur stdDeviation='2'/></filter></defs><path d='M3 3 L27 11 Q19 15 15.5 15.5 Q15 19 11 27 Z' fill='%23e9b854' opacity='.7' filter='url(%23g)'/><path d='M16 16 L33.5 33.5' stroke='%23050a07' stroke-width='5' stroke-linecap='round'/><path d='M16 16 L33.5 33.5' stroke='%235d4930' stroke-width='2.6' stroke-linecap='round'/><path d='M24.2 24.2 l2 2 M27.4 27.4 l2 2' stroke='%23e9b854' stroke-width='1.1'/><circle cx='34.5' cy='34.5' r='2.6' fill='%23e9b854' stroke='%23050a07' stroke-width='1'/><path d='M3 3 L27 11 Q19 15 15.5 15.5 Q15 19 11 27 Z' fill='url(%23s)' stroke='%23050a07' stroke-width='1.6'/><path d='M3 3 L27 11 Q19 15 15.5 15.5 Q15 19 11 27 Z' fill='none' stroke='%23e9b854' stroke-width='1'/><path d='M5.5 5.5 L15 15' stroke='%23f6d98c' stroke-width='1' opacity='.9'/><path d='M13 8.4 q3.5 .8 3.8 4.2' fill='none' stroke='%23f6d98c' stroke-width='.9' opacity='.85'/><path d='M8.4 13 q.8 3.5 4.2 3.8' fill='none' stroke='%23f6d98c' stroke-width='.9' opacity='.85'/></svg>") 3 3;
  --cur-gold: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><defs><linearGradient id='s' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f8e3a4'/><stop offset='.5' stop-color='%23e9b854'/><stop offset='1' stop-color='%238a6a2f'/></linearGradient><filter id='g' x='-40%25' y='-40%25' width='180%25' height='180%25'><feGaussianBlur stdDeviation='2.4'/></filter></defs><path d='M3 3 L27 11 Q19 15 15.5 15.5 Q15 19 11 27 Z' fill='%23f6d98c' opacity='.9' filter='url(%23g)'/><path d='M16 16 L33.5 33.5' stroke='%23050a07' stroke-width='5' stroke-linecap='round'/><path d='M16 16 L33.5 33.5' stroke='%235d4930' stroke-width='2.6' stroke-linecap='round'/><path d='M24.2 24.2 l2 2 M27.4 27.4 l2 2' stroke='%23e9b854' stroke-width='1.1'/><circle cx='34.5' cy='34.5' r='2.6' fill='%23e9b854' stroke='%23050a07' stroke-width='1'/><path d='M3 3 L27 11 Q19 15 15.5 15.5 Q15 19 11 27 Z' fill='url(%23s)' stroke='%23050a07' stroke-width='1.6'/><path d='M3 3 L27 11 Q19 15 15.5 15.5 Q15 19 11 27 Z' fill='none' stroke='%23f6d98c' stroke-width='1'/><path d='M5.5 5.5 L15 15' stroke='%235d4930' stroke-width='1.1' opacity='.9'/><path d='M13 8.4 q3.5 .8 3.8 4.2' fill='none' stroke='%235d4930' stroke-width='1' opacity='.85'/><path d='M8.4 13 q.8 3.5 4.2 3.8' fill='none' stroke='%235d4930' stroke-width='1' opacity='.85'/></svg>") 3 3;
  --cur-aim: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><defs><filter id='g' x='-40%25' y='-40%25' width='180%25' height='180%25'><feGaussianBlur stdDeviation='1.6'/></filter></defs><circle cx='24' cy='24' r='15' fill='none' stroke='%23e9b854' stroke-width='2' filter='url(%23g)' opacity='.8'/><circle cx='24' cy='24' r='15' fill='none' stroke='%23050a07' stroke-width='3.4'/><circle cx='24' cy='24' r='15' fill='none' stroke='%23e9b854' stroke-width='1.4'/><circle cx='24' cy='24' r='8.5' fill='none' stroke='%23050a07' stroke-width='2.8'/><circle cx='24' cy='24' r='8.5' fill='none' stroke='%239cc7d9' stroke-width='1.3'/><path d='M24 2 L26.4 8.5 L24 7 L21.6 8.5 Z' fill='%23e9b854' stroke='%23050a07' stroke-width='.9'/><path d='M24 46 L26.4 39.5 L24 41 L21.6 39.5 Z' fill='%23e9b854' stroke='%23050a07' stroke-width='.9'/><path d='M2 24 L8.5 21.6 L7 24 L8.5 26.4 Z' fill='%23e9b854' stroke='%23050a07' stroke-width='.9'/><path d='M46 24 L39.5 21.6 L41 24 L39.5 26.4 Z' fill='%23e9b854' stroke='%23050a07' stroke-width='.9'/><circle cx='24' cy='24' r='1.8' fill='%23f6d98c' stroke='%23050a07' stroke-width='.9'/></svg>") 24 24;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--void);
  color: var(--moonsilver);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

html, body { cursor: var(--cur-arrow), default; }
#defs { position: absolute; width: 0; height: 0; }
button { font-family: inherit; cursor: var(--cur-gold), pointer; }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.gold { color: var(--gold); text-shadow: 0 0 6px rgba(5,10,7,0.9); }
.silver { color: var(--moonsilver); }
.crimson { color: #c4574a; }
.unit { color: var(--fern); font-size: 12px; }
.sc-label {
  font-family: var(--f-sc);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  color: var(--fern);
  text-transform: lowercase;
}
.sc-label.dim { opacity: 0.75; }

/* ─────────── backdrop ─────────── */

#bg { position: fixed; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 50% 30%, var(--night) 0%, var(--void) 78%); }

#moon {
  position: absolute; top: 96px; left: 50%;
  width: 560px; height: 560px;
  transform: translateX(-52%);
  opacity: 0.13;
  filter: blur(1.5px) drop-shadow(0 0 110px rgba(219,231,220,0.5));
  pointer-events: none;
}

.canopy { position: absolute; top: 0; height: 30vh; min-height: 190px; opacity: 1; }
.c-left  { left: 0;  width: 46vw; }
.c-right { right: 0; width: 52vw; }
.canopy path:first-child { fill: #040805; }
.canopy path:last-child  { fill: #020503; }

#moonbeam {
  position: absolute; top: -10vh; left: 12vw;
  width: 34vw; height: 130vh;
  transform: skewX(-16deg);
  background: linear-gradient(to bottom, rgba(156,199,217,0.10), rgba(156,199,217,0.03) 55%, transparent 80%);
  pointer-events: none;
}

.fog {
  position: absolute;
  width: 60vw; height: 34vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(156,199,217,0.10), transparent 72%);
  filter: blur(30px);
  opacity: 0;
  pointer-events: none;
}
#fog1 { top: 34vh; left: -8vw; }
#fog2 { top: 52vh; right: -12vw; }

#vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 68% at 50% 44%, transparent 52%, rgba(5,10,7,0.55) 78%, rgba(5,10,7,0.96) 100%);
  pointer-events: none;
}

/* ─────────── shell ─────────── */

#app {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  height: 100vh;
}

#hdr {
  height: 74px; flex: 0 0 74px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  background: linear-gradient(to bottom, rgba(16,31,23,0.92), rgba(16,31,23,0.70));
  border-bottom: 1px solid var(--moss);
  position: relative;
}
#hdr::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,184,84,0.35), transparent);
}

.hdr-left { display: flex; align-items: center; gap: 26px; }
.wordmark { display: flex; flex-direction: column; line-height: 1; position: relative; text-decoration: none; }

.hdr-nav { display: flex; align-items: center; gap: 4px; }
.hdr-nav a {
  font-family: var(--f-sc); font-size: 12px; letter-spacing: 0.1em;
  color: var(--fern); text-decoration: none;
  padding: 6px 11px; border-radius: 3px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.hdr-nav a:hover { color: var(--moonsilver); background: rgba(44,74,56,0.25); }
.hdr-nav a.on { color: var(--gold); border-color: #3a5a45; background: rgba(44,74,56,0.3); }

.ftr-live { display: flex; align-items: center; gap: 8px; font-family: var(--f-sc); font-size: 11px; letter-spacing: 0.07em; color: var(--fern); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4e8f5c; box-shadow: 0 0 7px rgba(78,143,92,0.9);
  animation: live-pulse 2.4s ease-in-out infinite;
}
.live-dot.dark { background: var(--crimson); box-shadow: 0 0 7px rgba(161,51,39,0.9); }
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.wm-the {
  font-family: var(--f-display); font-size: 13px; letter-spacing: 0.5em;
  color: var(--fern); margin-left: 4px;
}
.wm-alms {
  font-family: var(--f-display); font-size: 42px; letter-spacing: 0.06em;
  color: var(--moonsilver); position: relative;
  text-shadow: 0 2px 0 var(--void), 0 -1px 0 rgba(219,231,220,0.25);
}
.wm-arrow {
  position: absolute; width: 116px; height: 11px;
  left: -2px; bottom: -3px;
  transform: rotate(-2deg);
  opacity: 0.7; pointer-events: none;
}
.wm-sub {
  font-family: var(--f-fell); font-style: italic; font-size: 11.5px;
  color: var(--fern); margin-top: 3px; margin-left: 3px;
}

.hdr-mid { text-align: center; }
.riding { font-family: var(--f-display); font-size: 21px; color: var(--moonsilver); letter-spacing: 0.05em; }
.phase-label { font-family: var(--f-sc); font-size: 13px; letter-spacing: 0.14em; color: var(--gold); margin-top: 1px; }
.phase-sub { font-family: var(--f-fell); font-style: italic; font-size: 12.5px; color: var(--fern); margin-top: 1px; max-width: 460px; }

.hdr-right { display: flex; align-items: center; gap: 26px; }
.candle-wrap { display: flex; align-items: center; gap: 9px; }
#candle { width: 30px; height: 76px; overflow: visible; }
#flame-grp { transform-origin: 14px 14px; }
.candle-txt { text-align: left; }
.timer-num { font-size: 19px; color: var(--moonsilver); }
.timer-num.amber { color: var(--gold); }
.timer-num.red { color: var(--torch); }
.timer-cap { font-family: var(--f-sc); font-size: 10.5px; letter-spacing: 0.1em; color: var(--fern); }

.purse { display: flex; align-items: center; gap: 10px; }
.purse-ico { width: 30px; height: 26px; }
.purse-amt { font-size: 21px; color: var(--gold); text-shadow: 0 0 8px rgba(233,184,84,0.25); }
.purse-cap { font-family: var(--f-sc); font-size: 10.5px; letter-spacing: 0.1em; color: var(--fern); }

/* ─────────── main columns ─────────── */

#main {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 12px 16px 6px;
  min-height: 0;
}
#rail-left  { width: 268px; flex: 0 0 268px; }
#rail-right { width: 300px; flex: 0 0 300px; }

/* ─────────── tabbed rail groups ─────────── */

.railgroup { display: flex; flex-direction: column; min-height: 0; }
.tabbar { display: flex; gap: 4px; padding: 0 8px; z-index: 2; }
.tab {
  flex: 1;
  background: rgba(11,21,16,0.7);
  border: 1px solid #1c3325; border-bottom: none;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
  color: var(--fern);
  font-family: var(--f-sc); font-size: 12px; letter-spacing: 0.07em;
  padding: 7px 4px 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.tab:hover { color: var(--moonsilver); }
.tab.sel { background: var(--timber); color: var(--gold); border-color: var(--moss); }
.tab.flash { color: var(--gold-hi); text-shadow: 0 0 8px rgba(233,184,84,0.6); }
.tab-n {
  display: inline-block; min-width: 15px; margin-left: 5px;
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--gold);
}
.tab-n:empty { display: none; }
.railgroup > .tabpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; }

/* ─────────── panels ─────────── */

.panel {
  background:
    radial-gradient(140% 110% at 30% 0%, rgba(44,74,56,0.16), transparent 60%),
    var(--timber);
  border: 1px solid #23402f;
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                     100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
                     var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
  padding: 12px 14px;
  position: relative;
}
.panel.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.hint { font-family: var(--f-fell); font-style: italic; font-size: 13px; color: var(--fern); margin-bottom: 9px; }

/* ─────────── stake panel ─────────── */

.chips { display: flex; gap: 7px; margin-bottom: 10px; }
.chip {
  flex: 1;
  background: radial-gradient(60% 60% at 40% 30%, #21382b, var(--loam));
  border: 1px solid var(--moss);
  border-radius: 50px;
  color: var(--gold);
  font-family: var(--f-mono); font-size: 13px;
  padding: 5px 0;
  transition: border-color 0.15s, transform 0.15s;
}
.chip:hover { border-color: var(--fern); transform: translateY(-1px); }
.chip.sel { border-color: var(--gold); box-shadow: 0 0 8px rgba(233,184,84,0.25) inset; }

#stake-slider {
  width: 100%; margin: 2px 0 8px;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--moss) 0 7px, #1d3527 7px 10px);
  outline: none;
}
#stake-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--gold-hi), var(--gold) 55%, var(--brass));
  border: 1px solid var(--brass);
  cursor: grab;
}
.stake-line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
#stake-amt { font-size: 19px; }

.seal-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(to bottom, #1a2f22, #12221a);
  border: 1px solid var(--moss);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  padding: 9px 0;
  transition: filter 0.15s;
}
.seal-btn:hover:not(:disabled) { filter: brightness(1.25); }
.seal-btn:disabled { opacity: 0.45; cursor: var(--cur-arrow), default; }
.seal-wax { width: 26px; height: 26px; }
.seal-label { font-family: var(--f-display); font-size: 17px; color: var(--gold); letter-spacing: 0.05em; }

.ghost-btn {
  width: 100%; margin-top: 7px;
  background: none; border: 1px solid #23402f;
  color: var(--fern);
  font-family: var(--f-sc); font-size: 12px; letter-spacing: 0.1em;
  padding: 5px 0; border-radius: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.ghost-btn:hover { color: var(--moonsilver); border-color: var(--fern); }

/* ─────────── quiver ─────────── */

#quiver-panel { overflow: hidden auto; scrollbar-width: thin; scrollbar-color: var(--moss) transparent; }
#quiver-vis { display: flex; align-items: center; gap: 12px; min-height: 62px; margin: 0 0 9px; }
#quiver-svg { flex: 0 0 34px; width: 34px; height: 60px; transform: rotate(7deg); }
#shafts { flex: 1; display: flex; flex-direction: column; gap: 5px; }
#shafts svg { width: 112px; height: 12px; filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.5)); }
#shafts .empty-q { font-family: var(--f-fell); font-style: italic; font-size: 12.5px; color: var(--fern); opacity: 0.8; line-height: 1.4; }

.tier-card {
  border: 1px solid #1e3628;
  background: rgba(22,40,29,0.55);
  border-radius: 4px;
  padding: 8px 9px 9px;
  margin-bottom: 8px;
  position: relative;
}
.tier-card.armed { border-color: var(--marian); box-shadow: 0 0 10px rgba(156,199,217,0.18); }
.tier-arrow { width: 104px; height: 13px; opacity: 0.9; margin-bottom: 4px; }
.tier-head { display: flex; justify-content: space-between; align-items: baseline; }
.tier-name { font-family: var(--f-display); font-size: 15.5px; color: var(--moonsilver); }
.tier-count { color: var(--gold); font-size: 14px; }
.tier-power { font-size: 12.5px; color: var(--fern); line-height: 1.35; margin: 3px 0 7px; }
.tier-actions { display: flex; gap: 7px; }

.wood-btn {
  flex: 1;
  background: linear-gradient(to bottom, #243c2d, #17291e);
  border: 1px solid var(--moss);
  border-radius: 3px;
  color: var(--moonsilver);
  font-family: var(--f-sc); font-size: 12px; letter-spacing: 0.07em;
  padding: 4px 0;
  transition: filter 0.15s;
}
.wood-btn:hover:not(:disabled) { filter: brightness(1.3); }
.wood-btn:disabled { opacity: 0.4; cursor: var(--cur-arrow), default; }
.wood-btn.loose { color: var(--marian); }
#quiver-panel.shuttered .wood-btn:not(.loose) {
  filter: saturate(0.2) brightness(0.6); cursor: default; pointer-events: none;
}
#quiver-panel.shuttered { border-color: #4a2a20; }

/* ─────────── stage / board ─────────── */

#stats-strip {
  display: flex; gap: 28px; align-items: baseline;
  padding: 2px 0 8px;
}
.stat b { font-size: 15px; margin-left: 5px; }

#prize-note {
  display: flex; align-items: center; gap: 10px;
  max-width: 780px;
  margin: 0 0 10px;
  padding: 7px 14px;
  background: rgba(16,31,23,0.72);
  border: 1px solid #3a4f2c;
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  font-size: 12.5px; color: #b9cabb; line-height: 1.4;
}
#prize-note b { color: var(--gold); font-weight: 500; }
#prize-note a { color: var(--marian); text-decoration: none; border-bottom: 1px dotted rgba(156,199,217,0.5); }
#prize-note a:hover { color: var(--moonsilver); }
.prize-ico { width: 22px; height: 22px; flex: 0 0 22px; }

#board-frame { position: relative; }

#clearing {
  position: absolute; inset: -58px -84px -62px -84px;
  background: radial-gradient(58% 55% at 50% 48%, rgba(28,50,36,0.95) 26%, rgba(22,40,29,0.45) 60%, transparent 78%);
  border-radius: 50%;
  pointer-events: none;
}
#clearing::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 74%, rgba(5,10,7,0.5) 88%, transparent 100%);
}

#board-grid {
  position: relative;
  display: grid;
  grid-template-columns: 26px auto;
  grid-template-rows: 22px auto;
}
#corner-cell { grid-area: 1 / 1; }
#col-labels {
  grid-area: 1 / 2;
  display: grid; grid-template-columns: repeat(5, var(--tile)); gap: var(--gutter);
  align-items: end; justify-items: center;
}
#row-labels {
  grid-area: 2 / 1;
  display: grid; grid-template-rows: repeat(5, var(--tile)); gap: var(--gutter);
  align-items: center; justify-items: center;
}
.axis-label {
  font-family: var(--f-sc); font-size: max(12px, calc(var(--tile) * 0.105)); letter-spacing: 0.1em;
  color: var(--fern); opacity: 0.85;
  transition: color 0.3s, opacity 0.3s, text-shadow 0.3s;
}
.axis-label.doomed { color: var(--torch); opacity: 1; text-shadow: 0 0 8px rgba(240,127,46,0.6); }

#board {
  grid-area: 2 / 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  grid-template-rows: repeat(5, var(--tile));
  gap: var(--gutter);
}

/* ─────────── tile ─────────── */

.tile {
  position: relative;
  border-radius: 9px;
  background:
    radial-gradient(80% 70% at 34% 26%, rgba(44,74,56,0.5), transparent 62%),
    radial-gradient(120% 110% at 60% 80%, var(--loam), #101d15 85%);
  cursor: var(--cur-gold), pointer;
  transition: transform 0.16s ease-out, box-shadow 0.16s;
}
.tile .wobble { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); pointer-events: none; overflow: visible; }
.tile .wobble .edge { fill: none; stroke: var(--moss); stroke-width: 1.1; opacity: 0.8; transition: stroke 0.25s, stroke-width 0.25s, opacity 0.25s; }
@media (hover: hover) {
  .tile:hover { transform: translateY(-2px); }
  .tile:hover .wobble .edge { stroke: var(--marian); opacity: 0.9; }
}
.tile.heat1 .wobble .edge { stroke-width: 1.5; opacity: 0.9; }
.tile.heat2 .wobble .edge { stroke-width: 2.1; stroke: #3f6a50; opacity: 1; }
.tile.heat3 .wobble .edge { stroke-width: 2.8; stroke: #52855f; opacity: 1; }

.tile .coord {
  position: absolute; right: 7px; top: 5px;
  font-family: var(--f-mono); font-size: max(9.5px, calc(var(--tile) * 0.088)); letter-spacing: 0.06em;
  color: var(--fern); opacity: 0.4;
}

.tile .pips {
  position: absolute; left: 6px; top: 4px; right: 26px;
  display: flex; flex-wrap: wrap; gap: 1px 2px;
  pointer-events: none;
}
.tile .pips svg { width: max(17px, calc(var(--tile) * 0.155)); height: max(12px, calc(var(--tile) * 0.11)); opacity: 0.9; }
.tile .pips .more { font-family: var(--f-mono); font-size: max(9.5px, calc(var(--tile) * 0.085)); color: var(--fern); }

.tile .stack {
  position: absolute; left: 7px; bottom: 20%;
  display: flex; align-items: flex-end;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(233,184,84,0.35));
}
.tile .stack svg { width: max(15px, calc(var(--tile) * 0.14)); height: max(13px, calc(var(--tile) * 0.12)); margin-right: -6px; }

.tile .cart-you {
  position: absolute; left: 50%; top: 44%;
  width: calc(var(--tile) * 0.5); height: calc(var(--tile) * 0.365);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(233,184,84,0.2));
  pointer-events: none;
  display: none;
}
.tile.yours .cart-you { display: block; }
.tile.yours .wobble .edge { stroke: var(--gold); stroke-dasharray: 5 4; opacity: 0.95; animation: rope-march 14s linear infinite; }
@keyframes rope-march { to { stroke-dashoffset: -180; } }

.tile .reveal-badge {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  display: none; align-items: center; gap: 4px;
  background: rgba(11,21,16,0.85);
  border: 1px solid rgba(156,199,217,0.5);
  border-radius: 3px;
  padding: 2px 6px;
  pointer-events: none;
}
.tile.revealed .reveal-badge { display: flex; }
.tile.revealed { box-shadow: 0 0 14px rgba(156,199,217,0.25), inset 0 0 22px rgba(156,199,217,0.12); }
.tile .reveal-badge svg { width: max(15px, calc(var(--tile) * 0.14)); height: max(9px, calc(var(--tile) * 0.085)); }
.tile .reveal-badge .r-amt { font-family: var(--f-mono); font-size: max(12.5px, calc(var(--tile) * 0.115)); color: var(--marian); }

.tile .scorch {
  position: absolute; inset: 0; border-radius: 9px;
  background: radial-gradient(closest-side, transparent 40%, rgba(60,22,8,0.55) 78%, rgba(20,8,3,0.85) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.tile.seized .scorch { opacity: 1; }
.tile.seized .stack, .tile.marked .stack { opacity: 0.35; }
.tile.seized .wobble .edge { stroke: #6b3a2c; stroke-dasharray: none; animation: none; opacity: 0.9; }
.tile.seized .cart-you { filter: grayscale(0.8) brightness(0.5); }
.tile.seized .reveal-badge, .tile.paid .reveal-badge { display: none; }
.tile.seized.revealed, .tile.paid.revealed { box-shadow: none; }
.tile.seized { cursor: var(--cur-arrow), default; }
.tile.seized:hover { transform: none; }
.tile .seal-stamp {
  position: absolute; left: 50%; top: 40%;
  width: calc(var(--tile) * 0.33); height: calc(var(--tile) * 0.33);
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
  pointer-events: none;
}

.tile .laurel {
  position: absolute; left: 50%; bottom: 14%;
  width: calc(var(--tile) * 0.5); height: calc(var(--tile) * 0.21);
  transform: translateX(-50%);
  opacity: 0; pointer-events: none;
}
.tile .payout-tag {
  position: absolute; left: 50%; top: 26%;
  transform: translate(-50%, -50%);
  font-family: var(--f-mono); font-size: max(13.5px, calc(var(--tile) * 0.125)); font-weight: 600;
  color: var(--gold-hi);
  text-shadow: 0 0 8px rgba(5,10,7,1), 0 0 14px rgba(233,184,84,0.5);
  opacity: 0; pointer-events: none;
}

/* fixed cartouche: the number always lives here */
.tile .cartouche {
  position: absolute; left: 5px; right: 5px; bottom: 4px;
  height: max(17px, calc(var(--tile) * 0.155));
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,10,7,0.55);
  border-radius: 3px;
  pointer-events: none;
}
.tile .cartouche .amt {
  font-family: var(--f-mono); font-size: max(11.5px, calc(var(--tile) * 0.105));
  color: var(--fern);
  text-shadow: 0 0 5px rgba(5,10,7,1);
}
.tile.revealed .cartouche .amt { color: var(--marian); }
.tile.seized .cartouche .amt { color: #c4574a; text-decoration: line-through; }
.tile.paid .cartouche .amt { color: var(--gold); }

.tile.aim-target::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px dashed rgba(156,199,217,0.55);
  border-radius: 7px;
  pointer-events: none;
}
body.aiming .tile:not(.seized) { cursor: var(--cur-aim), crosshair; }
.tile.legal-move { box-shadow: 0 0 0 1.5px rgba(78,143,92,0.9), 0 0 16px rgba(78,143,92,0.5); cursor: var(--cur-gold), pointer; }
.tile.selected { box-shadow: 0 0 0 1.5px rgba(233,184,84,0.7), 0 0 14px rgba(233,184,84,0.3); }

.tile.marked .wobble .edge { stroke: var(--torch); }
.tile .chain-mark {
  position: absolute; left: 0; right: 0; bottom: 22%;
  text-align: center; white-space: nowrap;
  font-size: max(10px, calc(var(--tile) * 0.092)); color: var(--torch);
  font-family: var(--f-sc); letter-spacing: 0.07em;
  text-shadow: 0 0 6px rgba(5,10,7,1);
  opacity: 0; pointer-events: none;
}
.tile.marked .chain-mark { opacity: 1; }

/* ─────────── torch & flare ─────────── */

#torch {
  position: absolute; top: 0; left: 0;
  width: 360px; height: 360px;
  margin: -180px 0 0 -180px;
  background:
    radial-gradient(circle, rgba(246,217,140,0.5) 0%, rgba(240,127,46,0.32) 22%, rgba(240,127,46,0.10) 45%, transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}
#intersect-flare {
  position: absolute; top: 0; left: 0;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  background: radial-gradient(circle, rgba(246,217,140,0.7) 0%, rgba(240,127,46,0.4) 30%, transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

/* ─────────── writ ─────────── */

#writ-wrap { height: 96px; margin-top: 16px; display: flex; align-items: flex-start; justify-content: center; width: 100%; }
.writ {
  position: relative;
  width: min(640px, 100%);
  background:
    radial-gradient(80% 100% at 20% 0%, rgba(90,70,40,0.25), transparent 60%),
    linear-gradient(to bottom, #e0d2ab, #d8c9a0 60%, #c9b78c);
  color: var(--ink);
  padding: 8px 22px 10px;
  clip-path: polygon(0.8% 12%, 3% 0%, 22% 5%, 45% 0.5%, 68% 5%, 88% 0%, 99.2% 9%, 100% 55%, 98.6% 92%, 82% 97%, 60% 100%, 34% 96%, 10% 100%, 0% 88%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
}
.writ-title {
  font-family: var(--f-fell); font-style: italic; font-size: 11.5px;
  color: #5a4a30; text-align: center; letter-spacing: 0.04em;
}
.writ-hash {
  text-align: center;
  font-size: 14.5px; letter-spacing: 0.22em;
  color: var(--ink);
  min-height: 22px; margin-top: 3px;
  white-space: nowrap;
}
.writ-hash .hl { color: #7e241c; font-weight: 600; }
.writ-verdict {
  text-align: center;
  font-family: var(--f-display); font-size: 17px;
  color: #4a3416; letter-spacing: 0.08em;
  min-height: 24px; margin-top: 2px;
}
.writ-verdict b { color: #7e241c; }
#writ-scribbles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#writ-scribbles ellipse { fill: none; stroke: #a13327; stroke-width: 1.6; stroke-linecap: round; }

/* ─────────── chronicle ─────────── */

#chronicle {
  flex: 1; overflow-y: auto; min-height: 0;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--moss) transparent;
}
.chron-entry {
  font-size: 13.5px; line-height: 1.45;
  color: #b9cabb;
  padding: 4px 0 5px;
  border-bottom: 1px solid rgba(44,74,56,0.35);
}
.chron-entry .who { color: var(--moonsilver); }
.chron-entry .amt { font-family: var(--f-mono); font-size: 12px; color: var(--gold); }
.chron-entry.t-seize { color: #c9a29b; }
.chron-entry.t-seize .amt { color: #c4574a; }
.chron-entry.t-arrow { color: #a9c3cf; }
.chron-entry.t-stanza {
  font-family: var(--f-fell); font-style: italic;
  font-size: 14px; color: var(--moonsilver);
  padding: 8px 0;
}
.chron-entry.t-stanza .dc {
  font-family: var(--f-display); font-style: normal;
  font-size: 34px; line-height: 0.8;
  color: var(--gold);
  float: left;
  margin: 3px 6px 0 0;
}
.chron-entry.t-mist { color: var(--fern); font-style: italic; }

/* ─────────── the ridings (round history) ─────────── */

#history {
  flex: 1; overflow-y: auto; min-height: 0;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--moss) transparent;
}
.hist-row {
  padding: 7px 2px 8px;
  border-bottom: 1px solid rgba(44,74,56,0.35);
}
.hist-top { display: flex; justify-content: space-between; align-items: baseline; }
.hist-round { font-family: var(--f-display); font-size: 15.5px; color: var(--moonsilver); letter-spacing: 0.04em; }
.hist-axes { font-family: var(--f-sc); font-size: 11px; letter-spacing: 0.08em; color: var(--torch); }
.hist-mid {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11.5px;
  margin-top: 2px;
}
.hist-mid .h-seized { color: #c4574a; }
.hist-mid .h-pool { color: var(--gold); }
.hist-mid .h-surv { color: var(--fern); }
.hist-you { font-family: var(--f-fell); font-style: italic; font-size: 12.5px; margin-top: 2px; }
.hist-you.good { color: var(--gold); }
.hist-you.bad { color: #c4574a; }
.hist-you.dim { color: var(--fern); }

/* ─────────── shrine ─────────── */

#shrine { flex: 0 0 auto; }
.shrine-alcove {
  position: relative;
  background: radial-gradient(90% 120% at 50% 0%, #0d1a12, var(--void) 80%);
  border: 1px solid #23402f;
  border-radius: 40px 40px 6px 6px;
  padding: 16px 10px 9px;
  text-align: center;
  margin-bottom: 9px;
  overflow: hidden;
}
.shrine-alcove::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 46%, rgba(233,184,84,0.07), transparent 70%);
}
#shrine-arrow { width: 150px; height: 20px; display: block; margin: 0 auto 6px; }
.runes { font-size: 13px; color: var(--brass); letter-spacing: 0.28em; margin-bottom: 2px; }
#shrine .legend {
  font-family: var(--f-fell); font-style: italic;
  font-size: 12px; line-height: 1.5;
  color: var(--fern);
  margin-top: 7px;
}
#hoard { font-size: 16px; }

/* ─────────── footer ─────────── */

#ftr {
  flex: 0 0 30px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  border-top: 1px solid rgba(44,74,56,0.5);
  font-size: 11px;
}
#chain { color: var(--fern); font-size: 10.5px; letter-spacing: 0.08em; }
.fable { font-family: var(--f-fell); font-style: italic; color: var(--fern); }
.fable-home { color: var(--gold); text-decoration: none; }
.fable-home:hover { text-shadow: 0 0 8px rgba(233,184,84,0.5); }

/* ─────────── overlays ─────────── */

#fx { position: fixed; inset: 0; z-index: 30; pointer-events: none; }

#dim {
  position: fixed; inset: 0; z-index: 20;
  background: var(--void);
  opacity: 0; pointer-events: none;
}

#banner {
  position: fixed; top: 15vh; left: 50%; z-index: 40;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
#banner-label {
  font-family: var(--f-display); font-size: 44px;
  color: var(--moonsilver); letter-spacing: 0.12em;
  text-shadow: 0 0 26px rgba(5,10,7,1), 0 2px 0 var(--void);
}
#banner-label.torchlit { color: var(--torch); text-shadow: 0 0 30px rgba(240,127,46,0.45), 0 2px 0 var(--void); }
#banner-label.gilded { color: var(--gold); text-shadow: 0 0 30px rgba(233,184,84,0.4), 0 2px 0 var(--void); }
#banner-sub {
  font-family: var(--f-fell); font-style: italic; font-size: 15px;
  color: var(--fern); margin-top: 4px;
  text-shadow: 0 0 12px rgba(5,10,7,1);
}

#toasts {
  position: fixed; top: 104px; left: 50%; z-index: 45;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.toast {
  background: rgba(16,31,23,0.94);
  border: 1px solid var(--moss);
  border-left: 3px solid var(--gold);
  padding: 6px 16px;
  font-family: var(--f-fell); font-style: italic; font-size: 13.5px;
  color: var(--moonsilver);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  white-space: nowrap;
}
.toast.bad { border-left-color: var(--crimson); }
.toast.info { border-left-color: var(--marian); }

#tooltip {
  position: fixed; z-index: 46;
  background: rgba(11,21,16,0.96);
  border: 1px solid var(--moss);
  padding: 7px 11px;
  font-size: 12.5px; color: #b9cabb;
  pointer-events: none;
  max-width: 230px;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
#tooltip .tt-h { font-family: var(--f-sc); letter-spacing: 0.08em; font-size: 11.5px; color: var(--fern); margin-bottom: 2px; }
#tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; }
#tooltip .tt-row b { font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--gold); }

#gambit-prompt {
  position: fixed; bottom: 5vh; left: 50%; z-index: 48;
  transform: translateX(-50%);
  width: 330px;
  background: rgba(16,31,23,0.97);
  border: 1px solid var(--marian);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
                     calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  padding: 13px 16px;
  text-align: center;
  box-shadow: 0 0 34px rgba(156,199,217,0.2);
}
.gp-title { font-family: var(--f-display); font-size: 21px; color: var(--marian); }
.gp-sub { font-family: var(--f-fell); font-style: italic; font-size: 12.5px; color: var(--fern); margin: 3px 0 9px; }
.gp-meter { height: 5px; background: #0d1a12; border: 1px solid var(--moss); border-radius: 3px; overflow: hidden; margin-bottom: 9px; }
#gp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--marian), #6da8bf); }

/* ─────────── how to ride ─────────── */

.nav-howto {
  font-family: var(--f-sc); font-size: 12px; letter-spacing: 0.1em;
  color: var(--marian); background: none;
  border: 1px solid #2b4a55; border-radius: 3px;
  padding: 6px 11px; margin-left: 6px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-howto:hover { color: var(--moonsilver); background: rgba(156,199,217,0.12); border-color: var(--marian); }

#howto-veil {
  position: fixed; inset: 0; z-index: 62;
  display: flex; align-items: safe center; justify-content: center;
  background: radial-gradient(70% 70% at 50% 45%, rgba(5,10,7,0.92), rgba(5,10,7,0.98));
  padding: 24px 18px;
  overflow-y: auto; overscroll-behavior: contain;
}
#howto-box {
  position: relative; margin: auto;
  width: min(760px, 96vw);
  background:
    radial-gradient(120% 90% at 25% 0%, rgba(44,74,56,0.22), transparent 62%),
    rgba(13,24,18,0.98);
  border: 1px solid var(--brass);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                     calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  padding: 26px 30px 24px;
  box-shadow: 0 0 70px rgba(233,184,84,0.12);
}
.ht-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--fern);
  font-size: 16px; line-height: 1; padding: 6px;
  transition: color 0.15s;
}
.ht-x:hover { color: var(--moonsilver); }

.ht-head { text-align: center; margin-bottom: 20px; }
.ht-crest { width: 150px; height: 16px; opacity: 0.85; }
.ht-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: 32px; color: var(--moonsilver); letter-spacing: 0.05em;
  margin-top: 2px;
}
.ht-sub { font-family: var(--f-fell); font-style: italic; font-size: 14px; color: var(--fern); margin-top: 2px; }

.ht-steps { display: flex; flex-direction: column; gap: 16px; }
.ht-step {
  display: grid; grid-template-columns: 34px 92px 1fr;
  gap: 14px; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(44,74,56,0.35);
}
.ht-step:last-child { border-bottom: none; padding-bottom: 4px; }
.ht-n {
  font-family: var(--f-display); font-size: 15px; color: var(--brass); letter-spacing: 0.1em;
  border: 1px solid var(--brass); border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding-left: 2px;
}
.ht-art svg { width: 92px; height: 92px; display: block; }
.ht-art-arrows { display: flex; flex-direction: column; gap: 7px; }
.ht-art-arrows svg { width: 92px; height: 13px; }
.ht-copy h3 { font-family: var(--f-display); font-weight: 400; font-size: 20px; color: var(--moonsilver); margin-bottom: 3px; }
.ht-copy p { font-size: 14px; color: #b9cabb; line-height: 1.5; }
.ht-copy p + p { margin-top: 5px; }
.ht-fine { font-family: var(--f-fell); font-style: italic; font-size: 12.5px !important; color: var(--fern) !important; }
.ht-opt {
  font-family: var(--f-sc); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--fern); border: 1px solid #2c4a38; border-radius: 3px;
  padding: 1px 6px; margin-left: 7px; vertical-align: middle;
}
.ht-copy em { color: var(--gold-hi); font-style: normal; }
.ht-copy b { color: var(--moonsilver); font-weight: 500; }

.ht-truth {
  margin: 18px 0 16px;
  background: rgba(5,10,7,0.55);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  padding: 12px 15px;
  font-size: 13.5px; color: #b9cabb; line-height: 1.55;
}
.ht-truth b { color: var(--gold); }
.ht-truth em { color: var(--gold-hi); font-style: normal; }

#howto-box .seal-btn { padding: 11px 0; }

@media (max-width: 700px) {
  .ht-step { grid-template-columns: 30px 1fr; align-items: start; }
  .ht-art, .ht-art-arrows { display: none; }
  .ht-copy h3 { margin-bottom: 4px; }
  .ht-opt { display: inline-block; margin-left: 6px; }
  #howto-box { padding: 22px 18px 20px; }
  .ht-title { font-size: 26px; }
  .nav-howto { margin-left: 0; }
}

/* ─────────── victory: give thy mark ─────────── */

#victory-veil {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: safe center; justify-content: center;
  background: radial-gradient(70% 70% at 50% 45%, rgba(5,10,7,0.9), rgba(5,10,7,0.97));
  padding: 20px;
  overflow-y: auto;               /* short viewports must still reach the buttons */
  overscroll-behavior: contain;
}
#victory-box { margin: auto; }
#victory-box {
  width: min(430px, 94vw);
  text-align: center;
  background:
    radial-gradient(140% 110% at 30% 0%, rgba(44,74,56,0.2), transparent 60%),
    rgba(13,24,18,0.98);
  border: 1px solid var(--brass);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  padding: 24px 28px 22px;
  box-shadow: 0 0 60px rgba(233,184,84,0.14);
}
.v-laurel { width: 70px; height: 30px; opacity: 0.9; }
.v-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: 27px; color: var(--moonsilver); letter-spacing: 0.04em;
  margin-top: 4px;
}
.v-amount { margin: 6px 0 10px; }
#v-amt { font-size: 40px; color: var(--gold); text-shadow: 0 0 24px rgba(233,184,84,0.35); }
.v-unit { font-family: var(--f-sc); font-size: 13px; color: var(--fern); letter-spacing: 0.1em; }
.v-sub {
  font-family: var(--f-fell); font-style: italic;
  font-size: 13.5px; color: var(--fern); line-height: 1.5;
  margin-bottom: 14px;
}
#v-addr {
  width: 100%;
  background: rgba(5,10,7,0.7);
  border: 1px solid var(--moss); border-radius: 4px;
  color: var(--gold); font-size: 14px; letter-spacing: 0.04em;
  padding: 11px 13px; text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#v-addr:focus { border-color: var(--fern); box-shadow: 0 0 12px rgba(156,199,217,0.15); }
#v-addr::placeholder { color: #46604f; }
.v-status {
  margin-top: 10px; padding: 8px 12px;
  border-left: 3px solid var(--fern);
  background: rgba(5,10,7,0.6);
  font-size: 13px; color: #b9cabb; text-align: left;
  border-radius: 0 3px 3px 0;
}
.v-status.good { border-left-color: var(--gold); color: var(--gold); }
.v-status.bad { border-left-color: var(--crimson); color: #c9a29b; }
.v-status.wait { border-left-color: var(--marian); font-family: var(--f-fell); font-style: italic; }
.v-dismiss { display: block; margin-top: 6px; font-family: var(--f-fell); font-style: italic; color: var(--fern); }
.v-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.v-actions .seal-btn { padding: 10px 0; }
.seal-btn.busy { filter: saturate(0.5) brightness(0.75); pointer-events: none; }

/* ─────────── scoreboard ─────────── */

#sb-overlay {
  position: absolute; inset: -20px; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(70% 70% at 50% 45%, rgba(5,10,7,0.95), rgba(5,10,7,0.85));
  opacity: 0;
}
.sb-inner {
  width: 350px; text-align: center;
  background: rgba(13,24,18,0.98);
  border: 1px solid var(--moss);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
                     calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  padding: 16px 20px 14px;
}
.sb-h { font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--moonsilver); margin-bottom: 10px; }
#sb-list { text-align: left; margin-bottom: 10px; }
.sb-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; color: #b9cabb;
  padding: 3px 2px;
  border-bottom: 1px solid rgba(44,74,56,0.35);
}
.sb-row b { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; color: var(--gold); }
.sb-row.you { color: var(--moonsilver); }
.sb-row.you .sb-name::after { content: " · thee"; font-family: var(--f-fell); font-style: italic; color: var(--gold); }
.sb-tithe { display: flex; justify-content: space-between; padding: 2px; margin-bottom: 8px; }
.sb-next { font-family: var(--f-fell); font-style: italic; font-size: 13.5px; color: var(--fern); }
.sb-count { font-size: 26px; color: var(--gold); min-height: 34px; margin-top: 2px; }

/* ─────────── misc ─────────── */

::selection { background: rgba(233,184,84,0.3); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ─────────── responsive ─────────── */

/* touch devices (including hybrids): no hover tooltips */
@media (pointer: coarse), (hover: none) {
  #tooltip { display: none !important; }
}

/* narrow desktop: tiles yield to the rails */
@media (max-width: 1280px) and (min-width: 981px) {
  :root { --tile: max(58px, min(calc((100vh - 345px) / 5), calc((100vw - 705px) / 5), 170px)); }
}

/* big screens: the greenwood grows to meet them */
@media (min-width: 1700px) {
  :root { --tile: max(78px, min(calc((100vh - 345px) / 5), calc((100vw - 860px) / 5), 185px)); }
  #rail-left  { width: 300px; flex-basis: 300px; }
  #rail-right { width: 340px; flex-basis: 340px; }
  #moon { width: 700px; height: 700px; top: 110px; }
  .writ { width: min(760px, 100%); }
  .writ-hash { font-size: 16px; }
  .writ-verdict { font-size: 19px; }
  #stats-strip { gap: 40px; }
  .stat b { font-size: 17px; }
}

/* ─────────── phone / small tablet ─────────── */

@media (max-width: 980.98px) {
  :root { --tile: min(96px, calc((100vw - 84px) / 5)); --gutter: 6px; }

  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  #app { height: auto; min-height: 100svh; }

  #hdr {
    flex-wrap: wrap; height: auto; flex: 0 0 auto;
    padding: 8px 14px; row-gap: 2px;
  }
  .wm-the { font-size: 10px; letter-spacing: 0.4em; }
  .wm-alms { font-size: 28px; }
  .wm-arrow { width: 78px; height: 8px; bottom: -2px; }
  .wm-sub { display: none; }
  .hdr-mid { order: 3; width: 100%; margin-top: 2px; }
  .riding { font-size: 17px; }
  .phase-label { font-size: 11.5px; }
  .phase-sub { font-size: 11px; max-width: none; }
  .hdr-right { gap: 14px; margin-left: auto; }
  #candle { width: 22px; height: 58px; }
  .timer-num { font-size: 15px; }
  .purse-amt { font-size: 16px; }
  .purse-ico { width: 24px; height: 21px; }

  #main { flex-direction: column; height: auto; padding: 10px 10px 4px; gap: 14px; }
  #stage { order: -1; }
  #rail-left, #rail-right { width: 100%; flex: none; }
  .railgroup > .tabpanel { flex: none; }
  #chronicle, #history { height: min(300px, 42svh); flex: none; }
  .tab { font-size: 11.5px; padding: 8px 4px 7px; }

  #stats-strip { flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding-bottom: 10px; }
  .stat b { font-size: 13px; margin-left: 4px; }

  #board-frame { margin-top: 2px; }
  #clearing { inset: -26px -18px; }
  #board-grid { grid-template-columns: 20px auto; grid-template-rows: 16px auto; }
  .axis-label { font-size: 10px; }

  .tile { border-radius: 7px; }
  .tile .coord { font-size: 7.5px; right: 4px; top: 3px; }
  .tile .pips { left: 4px; top: 3px; right: 16px; gap: 1px; }
  .tile .pips svg { width: 12px; height: 9px; }
  .tile .pips .more { font-size: 8px; }
  .tile .stack { left: 4px; bottom: 17px; }
  .tile .stack svg { width: 11px; height: 10px; margin-right: -5px; }
  .tile .cart-you { width: 36px; height: 26px; }
  .tile .cartouche { left: 3px; right: 3px; bottom: 3px; height: 13px; }
  .tile .cartouche .amt { font-size: 9px; letter-spacing: 0.02em; }
  .tile .chain-mark { font-size: 7.5px; bottom: 17px; letter-spacing: 0.04em; }
  .tile .seal-stamp { width: 23px; height: 23px; }
  .tile .laurel { width: 38px; height: 16px; bottom: 9px; }
  .tile .payout-tag { font-size: 10.5px; }
  .tile .reveal-badge { padding: 1px 4px; gap: 3px; top: 32%; }
  .tile .reveal-badge svg { width: 11px; height: 7px; }
  .tile .reveal-badge .r-amt { font-size: 10px; }

  #torch { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  #intersect-flare { width: 130px; height: 130px; margin: -65px 0 0 -65px; }

  #writ-wrap { height: auto; min-height: 74px; margin: 12px 0 2px; }
  .writ { width: min(640px, 100%); padding: 6px 12px 8px; }
  .writ-title { font-size: 10px; }
  .writ-hash { font-size: clamp(8.5px, 2.8vw, 14.5px); letter-spacing: 0.13em; }
  .writ-verdict { font-size: 13.5px; }

  #banner { top: 10vh; width: 96vw; }
  #banner-label { font-size: 26px; letter-spacing: 0.1em; }
  #banner-sub { font-size: 12px; }

  #toasts { top: auto; bottom: 14px; width: 96vw; }
  .toast { white-space: normal; text-align: center; font-size: 12.5px; }

  #gambit-prompt { width: min(330px, 92vw); bottom: 3vh; }
  .sb-inner { width: min(350px, 90vw); }

  #moon { width: 340px; height: 340px; top: 70px; }
  .canopy { height: 18vh; min-height: 110px; }
  #shrine-arrow { width: 130px; }

  #ftr {
    height: auto; flex: 0 0 auto;
    flex-wrap: wrap; justify-content: center; gap: 2px 12px;
    padding: 6px 12px;
  }
}

/* short viewports: the victory box must never push its buttons off-screen */
@media (max-height: 620px) {
  .v-laurel { display: none; }
  .v-title { font-size: 21px; }
  #v-amt { font-size: 28px; }
  .v-sub { font-size: 12.5px; margin-bottom: 10px; }
  #victory-box { padding: 16px 20px 14px; }
  .v-actions { margin-top: 10px; }
}

/* very narrow phones: keep tile text inside the tile */
@media (max-width: 430px) {
  .tile .chain-mark { font-size: 6.5px; letter-spacing: 0.02em; overflow: hidden; }
  .tile .reveal-badge { max-width: calc(100% - 4px); overflow: hidden; }
  .tile .reveal-badge svg { display: none; }
}

.v-label { display: block; text-align: left; margin-bottom: 4px; }