/* Race to the Temples playtest: a dark wooden table with parchment panels. */
:root {
  --bg: #1d1712; --wood: #2b2119; --wood2: #3a2c20; --ink: #f2e8d5; --muted: #b8a88e;
  --panel: #f5ecd8; --panel-ink: #2a1f14; --panel-muted: #7a6a52; --line: #d8c7a4;
  --gold: #d9a93d; --good: #2f8a4c; --bad: #b8433a; --accent: #3a7bd5;
  --Fire: #e4572e; --Water: #2e86de; --Earth: #8d6e3f; --Wind: #3fa58a; --Light: #e6b93a; --Shadow: #6c4f9c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(ellipse at top, #33271c, var(--bg)); color: var(--ink); font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color: var(--gold); }
code { background: rgba(0,0,0,.25); padding: 1px 5px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; margin: .3em 0; }
h4 { margin-top: 1em; font-size: 14px; letter-spacing: .02em; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.good { color: var(--good); } .bad { color: var(--bad); }
.row { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; }
.loading { padding: 40px; text-align: center; }
.tag { background: var(--gold); color: #2a1f14; border-radius: 10px; padding: 0 7px; font-size: 11px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); vertical-align: middle; }

button, .btn { font: inherit; background: #e8dcc2; color: #2a1f14; border: 1px solid #a68b5b; border-radius: 6px; padding: 6px 12px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover:not(:disabled), .btn:hover { background: #f6ecd6; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: linear-gradient(#e7b84d, #c48f22); border-color: #8a6213; font-weight: 600; }
button.ghost { background: transparent; color: inherit; border-color: currentColor; opacity: .85; }
button.small { padding: 3px 8px; font-size: 12px; } button.big { font-size: 18px; padding: 10px 22px; }
button.on { background: var(--gold); }
input, select { font: inherit; padding: 5px 7px; border-radius: 5px; border: 1px solid #a68b5b; background: #fffaf0; color: #2a1f14; }
label { display: inline-flex; gap: 6px; align-items: center; }

.panel { background: var(--panel); color: var(--panel-ink); border-radius: 10px; padding: 12px 14px; box-shadow: 0 3px 14px rgba(0,0,0,.35); border: 1px solid #c9b48a; }
.panel .muted, .ov .muted { color: var(--panel-muted); }
.panel a { color: #8a5a10; }

/* Home and lobby */
.home { max-width: 980px; margin: 0 auto; padding: 20px 16px; display: grid; gap: 16px; }
.home-hero { display: flex; align-items: flex-end; gap: 4px; } .home-hero .mini { width: 56px; height: 100px; }
.home-hero h1 { font-size: 34px; margin-left: 14px; }
.home-hero p { margin-left: 14px; }
.tbl { border-collapse: collapse; width: 100%; } .tbl td, .tbl th { border-bottom: 1px solid var(--line); padding: 5px 6px; text-align: left; vertical-align: top; }
.tbl tr.now td { background: #fff1c2; }
.lobby-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.lp { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fffaf0; }
.lp.local { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217,169,61,.35); }
.lp-fig .mini { width: 46px; height: 82px; }
.copy { user-select: all; }

/* Game layout */
.topbar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: linear-gradient(#3a2c20, #261c14); border-bottom: 2px solid #5a4430; flex-wrap: wrap; }
.brand { white-space: nowrap; } .brand a { text-decoration: none; }
.topnav { display: flex; gap: 6px; margin-left: auto; } .topnav button { padding: 4px 9px; font-size: 13px; }
.gamegrid { display: grid; grid-template-columns: 1fr 420px; height: calc(100vh - 62px); }
.boardbox { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #4a3826, #1c150f 75%); }
.side { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: #241b14; }

/* Clock */
.clock { flex: 1 1 420px; min-width: 260px; overflow-x: auto; }
.clock-track { display: flex; gap: 1px; }
.cc { position: relative; flex: 1 0 14px; min-width: 14px; height: 40px; border-radius: 3px; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; padding: 2px 0; gap: 1px; }
.cc.day { background: #d8c38f; } .cc.night { background: #33406b; } .cc.start { background: #8a7b5c; }
.cc.dawn { box-shadow: inset 2px 0 0 #ffcf5a; }
.cc .dl { position: absolute; top: -1px; left: 2px; font-size: 8px; color: #6b5020; }
.cc.night .dl { color: #c8d0f0; }
.mk { display: block; width: 10px; height: 7px; border-radius: 3px; border: 1px solid rgba(0,0,0,.55); }
.mk.ghost { background: transparent !important; border: 2px dashed; }
.sky { display: flex; gap: 8px; align-items: center; }
.moon-card { background: #1f2747; border: 1px solid #6c7bb8; border-radius: 6px; padding: 3px 8px; max-width: 260px; font-size: 12px; display: flex; flex-direction: column; }
.moon-card span { color: #c8d0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcount { font-weight: 600; white-space: nowrap; }

/* Board */
.board-stage { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 50%; cursor: grab; touch-action: none; }
.board-stage:active { cursor: grabbing; }
.board-plane { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; transform-style: preserve-3d; transition: transform .25s ease-out; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.board-svg { display: block; }
.figs { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.fig { position: absolute; width: 58px; height: 102px; transform: translate(-50%, -88%) rotateX(calc(-1 * var(--tilt, 42deg))); transform-origin: 50% 88%; transition: left .32s ease-in-out, top .32s ease-in-out; }
.fig .mini { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.fig.statue-fig { width: 36px; height: 65px; }
.fig.player-fig.active .mini { filter: drop-shadow(0 0 6px #ffe08a) drop-shadow(0 2px 2px rgba(0,0,0,.4)); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.area-label { font: 700 22px Georgia, serif; text-anchor: middle; letter-spacing: .12em; opacity: .75; }
.area-sub { font: 600 14px system-ui; letter-spacing: 0; }
.rt-under { fill: none; stroke: rgba(40,25,10,.55); stroke-width: 9; stroke-linecap: round; }
.rt-road { fill: none; stroke: #f0dfb4; stroke-width: 5; stroke-linecap: round; }
.rt-path { fill: none; stroke: #f0dfb4; stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; }
.rt-ferry { fill: none; stroke: #ffd36a; stroke-width: 4; stroke-dasharray: 12 8; }
.space { cursor: pointer; }
.space .hit { fill: transparent; }
.sp { stroke: #2b1d10; stroke-width: 2.5; }
.t-city { fill: #f6d77a; } .t-town { fill: #f3e6c4; } .t-village { fill: #d7ecb7; } .t-outpost { fill: #d6c7b0; } .t-wild { fill: #6f8a52; } .t-temple { fill: #b98be0; }
.space:hover .sp { stroke: #fff; stroke-width: 3.5; }
.sp-label { font: 700 13px system-ui; text-anchor: middle; fill: #1d140b; paint-order: stroke; stroke: rgba(255,250,235,.9); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.sp-mark, .temple-tier { font: 700 13px system-ui; text-anchor: middle; fill: #2b1d10; pointer-events: none; }
.temple-tier { fill: #fff; font-size: 11px; }
.spot { fill: #fffaf0; stroke: #6b5636; stroke-width: 1.5; }
.spot-ic { font-size: 12px; text-anchor: middle; pointer-events: none; }
.spot-t { font: 700 9px system-ui; fill: #6b3a10; pointer-events: none; }
.reach-ring { fill: rgba(255,226,120,.25); stroke: #ffd84a; stroke-width: 3; animation: pulse 1.4s ease-in-out infinite; }
.reach-badge { fill: #ffd84a; stroke: #6b4b10; }
.reach text { font: 700 12px system-ui; text-anchor: middle; fill: #3a2a08; }
@keyframes pulse { 50% { stroke-opacity: .35; } }
.board-ctl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; }
.board-ctl button { width: 36px; padding: 5px 0; }
.board-tip { position: absolute; left: 10px; top: 10px; max-width: 300px; background: rgba(245,236,216,.97); color: var(--panel-ink); border-radius: 8px; padding: 8px 10px; font-size: 12px; pointer-events: none; box-shadow: 0 3px 12px rgba(0,0,0,.4); }
.board-tip .muted { color: var(--panel-muted); }

/* Side panels */
.turnbox .tb-head, .pb-head { display: flex; gap: 10px; align-items: center; }
.tb-fig .mini, .pb-fig .mini { width: 40px; height: 72px; }
.tb-name { font: 700 18px Georgia, serif; }
.slots b { font-size: 16px; }
.hint { font-size: 12px; color: var(--panel-muted); margin: 6px 0; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.act { display: inline-flex; gap: 6px; align-items: center; }
.act.current { background: #ffe6a6; border-color: var(--gold); }
.act .cost { background: #2a1f14; color: #f5e1b0; border-radius: 9px; padding: 0 6px; font-size: 11px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { background: #3a2c20; color: var(--ink); border-color: #5a4430; font-size: 12px; padding: 4px 8px; }
.tab.on { background: var(--panel); color: var(--panel-ink); border-bottom: 3px solid var(--pc); }
.tab:hover:not(.on) { background: #4a3828; }
.pb-nums { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 600; margin-top: 4px; }
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mats > div { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lbl { font-size: 11px; color: var(--panel-muted); width: 100%; }
.tokc { background: #fffaf0; border: 1px solid var(--line); border-radius: 12px; padding: 1px 8px; font-size: 12px; }
.tokc.core { border-radius: 50%; padding: 1px 7px; }
.tokc.hex { clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); border-radius: 0; padding: 1px 12px; }
.tokc.sq { border-radius: 4px; }
.m-Ember { background: #fbd6c8; } .m-Aqua { background: #cfe3fa; } .m-Terra { background: #e6d6bd; } .m-Gale { background: #cdeee0; }
.tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 10px; font-size: 12px; }
.tools span { display: inline-block; min-width: 92px; }
.gchip { font-size: 12px; margin: 3px 0; }
.coin { font-size: 11px; border-radius: 10px; padding: 0 6px; color: #2a1f14; }
.c-Copper { background: #e0a070; } .c-Silver { background: #d5d9de; } .c-Gold { background: #f1cf5a; } .c-Astral { background: #b9a4f2; }
.coinrow { margin: 2px 0; }
.aug { display: inline-block; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 4px; border: 2px solid; background: #fffaf0; margin: 1px; color: #2a1f14; }
.g-Common { border-color: #a7a7a7; } .g-Fine { border-color: #3fa55a; } .g-Pristine { border-color: #3a7bd5; } .g-Prize { border-color: #d9a93d; background: #fff3cc; } .g-Star { border-color: #b46ee0; background: #f3e6ff; }
.bounty { border: 1px solid var(--line); border-left: 4px solid #8a6a3a; border-radius: 6px; padding: 6px 8px; margin: 5px 0; background: #fffaf0; font-size: 13px; }
.b-Hunt { border-left-color: var(--bad); } .b-Delivery { border-left-color: var(--accent); } .b-Gathering { border-left-color: var(--good); }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.minilog { max-height: 260px; overflow-y: auto; font-size: 12px; }
.logline { border-left: 3px solid #bba57a; padding: 1px 6px; margin: 2px 0; }

/* Beast cards */
.bcard { --el: var(--Earth); position: relative; background: #fffaf0; border: 2px solid var(--el); border-radius: 9px; padding: 5px; font-size: 12px; color: #2a1f14; transition: transform .3s; }
.bcard.el-Fire { --el: var(--Fire); } .bcard.el-Water { --el: var(--Water); } .bcard.el-Earth { --el: var(--Earth); } .bcard.el-Wind { --el: var(--Wind); } .bcard.el-Light { --el: var(--Light); } .bcard.el-Shadow { --el: var(--Shadow); }
.bcard.elder { box-shadow: 0 0 0 2px #e2b13c, 0 0 12px rgba(226,177,60,.6); }
.bcard.guardian { box-shadow: 0 0 0 2px #b98be0, 0 0 14px rgba(185,139,224,.6); }
.bcard.fainted { transform: rotate(-90deg) scale(.82); opacity: .6; margin: -10px 0; }
.bcard.empty { min-height: 180px; display: grid; place-items: center; color: var(--panel-muted); }
.bc-head { display: flex; justify-content: space-between; font-weight: 700; }
.bc-tier { background: var(--el); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 11px; }
.bc-art { position: relative; height: 46px; margin: 4px 0; border-radius: 6px; background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--el) 55%, #fff)); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; overflow: hidden; }
.bc-glyph { font: 30px Georgia, serif; color: color-mix(in srgb, var(--el) 70%, #000); text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.bc-el { font-size: 11px; font-weight: 600; }
.bc-fo { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: .1em; background: rgba(0,0,0,.55); color: #fff; padding: 0 5px; border-radius: 3px; }
.bc-meta { font-size: 11px; color: var(--panel-muted); }
.bc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; margin: 3px 0; }
.bc-stats > div { display: flex; justify-content: space-between; padding: 0 3px; border-radius: 3px; }
.bc-stats .called { background: #ffe08a; }
.bc-stats em { color: var(--good); font-style: normal; font-size: 10px; margin-left: 2px; }
.star { color: #c48f22; font-style: normal; }
.bc-ab { font-size: 10.5px; color: #4a3a26; border-top: 1px dashed var(--line); padding-top: 2px; }
.bc-augs { margin-top: 2px; }
.bc-btns { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }

/* Overlays */
.ov-back { position: fixed; inset: 0; background: rgba(10,6,3,.55); display: grid; place-items: center; z-index: 50; padding: 12px; }
.ov { background: var(--panel); color: var(--panel-ink); border-radius: 12px; padding: 14px 18px; width: min(1100px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); border: 1px solid #c9b48a; }
.ov-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.ov-head > button { margin-left: auto; }
.arena { display: grid; grid-template-columns: 220px 1fr 220px; gap: 14px; align-items: start; }
.side-p, .side-f { text-align: center; }
.side-p .bcard, .side-f .bcard { text-align: left; }
.wins { font-size: 22px; letter-spacing: 2px; } .win { color: #cbbd9e; font-style: normal; } .win.on { color: #e2a722; text-shadow: 0 0 6px rgba(226,167,34,.6); }
.toks { min-height: 24px; margin: 4px 0; } .tok { display: inline-block; border-radius: 50%; width: 28px; height: 28px; line-height: 28px; font-weight: 700; font-size: 12px; color: #fff; } .tok.buff { background: var(--good); } .tok.debuff { background: var(--bad); }
.vs { text-align: center; } .vs-big { font: 700 60px Georgia, serif; color: #b89a62; margin-top: 50px; }
.ex { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.ex-col > div { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px dotted var(--line); }
.ex-col .tot { font: 700 30px Georgia, serif; justify-content: center; border: 0; }
.ex-mid b { font-size: 18px; display: block; }
.d20 { display: inline-block; min-width: 30px; padding: 2px 4px; background: #2a1f14; color: #ffe08a; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); text-align: center; }
.d20.rolling { color: #fff; }
.prompt { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.statbtns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 6px 0; }
.statbtns button { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.statbtns button.good { border-color: var(--good); box-shadow: inset 0 -3px 0 var(--good); } .statbtns button.bad { box-shadow: inset 0 -3px 0 var(--bad); }
.statbtns small { font-size: 10px; color: var(--panel-muted); }
.result { border-radius: 8px; padding: 8px 12px; margin: 6px 0; } .r-won { background: #e3f3df; } .r-lost, .r-fled { background: #f7e0dc; }
.dice { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.mdie, .ndie, .fish { width: 48px; height: 48px; border-radius: 9px; background: #fffaf0; border: 2px solid #8a6a3a; display: grid; place-items: center; font-size: 24px; }
.mdie.set { background: #ffe6a6; } .mdie.f-rockfall { background: #e6c8c0; }
.ndie.six { background: #cfe9cf; border-color: var(--good); font-weight: 700; }
.fish { width: auto; padding: 0 10px; font-size: 18px; }
.timer { font: 700 54px Georgia, serif; text-align: center; } .timer.low { color: var(--bad); }
.nest { text-align: center; } .nest .dice { justify-content: center; }
.glow { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.gcard { width: 170px; min-height: 110px; display: flex; flex-direction: column; gap: 6px; text-align: left; background: linear-gradient(#e9f7ff, #c9e2f5); }
.gcard.sel { outline: 3px solid var(--gold); } .gcard.bust { background: linear-gradient(#f7e6e6, #e8c3c3); }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cardpick { text-align: left; padding: 4px; background: #fffaf0; } .cardpick.no { opacity: .65; } .cardpick.yes { border-color: var(--good); }
.fuse-sel { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.pick { border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.log { max-height: 70vh; overflow-y: auto; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #2a1f14; color: #ffe8b0; border: 1px solid var(--gold); padding: 8px 16px; border-radius: 8px; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.conn { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); background: var(--bad); color: #fff; padding: 4px 12px; border-radius: 6px; z-index: 100; }

@media (max-width: 1000px) {
  .gamegrid { grid-template-columns: 1fr; height: auto; }
  .boardbox { height: 62vh; }
  .side { overflow: visible; }
  /* The turn panel docks to the bottom of the screen, so the actions are never below the fold */
  .gamegrid { padding-bottom: var(--dock-h, 0px); }
  .turnbox { position: fixed; left: 8px; right: 8px; bottom: 0; z-index: 30; max-height: 45vh; overflow-y: auto; border-radius: 12px 12px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px rgba(0,0,0,.55); }
  .turnbox .tb-fig .mini { width: 28px; height: 50px; }
  .turnbox .tb-name { font-size: 16px; }
  .turnbox .hint { margin: 4px 0; }
  .turnbox .acts { margin: 4px 0; }
  .board-ctl { top: 10px; bottom: auto; }
  .arena { grid-template-columns: 1fr 1fr; } .vs { grid-column: 1 / -1; grid-row: 2; }
  .statbtns { grid-template-columns: repeat(3, 1fr); }
  .cols, .fuse-sel { grid-template-columns: 1fr; }
}

/* Bots at the table */
.tag.bot { background: #cfe3f2; color: #1d3446; }
.away { color: var(--muted); font-size: 11px; }
button.tiny { padding: 1px 6px; font-size: 11px; align-self: center; }
.watchbar { position: fixed; bottom: 0; left: 0; right: 0; background: #2a1f14; color: var(--ink); border-top: 2px solid var(--gold); padding: 8px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; z-index: 50; }
.watchbar input { width: 140px; }
.watchbar > span { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }