/* Element Relationship Map — "ink & jade" theme. System fonts only. */
:root {
  --paper: #f4ecdb;
  --paper-2: #ebe0c8;
  --paper-3: #e1d3b5;
  --ink: #1f1b16;
  --ink-2: #3c352c;
  --ink-soft: #6d6354;
  --line: #cdbd9c;
  --jade: #2f8a6e;
  --jade-2: #57b393;
  --jade-deep: #1b5a48;
  --seal: #b5322a;
  --gold: #c9a043;
  --gold-2: #e8c873;
  --board: #17201f;
  --board-2: #223030;
  --wood: #3f8a4f;
  --fire: #c8432c;
  --earth: #b07d33;
  --metal: #a59c84;
  --water: #1f4d93;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Songti TC", "SimSun", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(15, 12, 8, .28);
  --side-w: 372px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.zh { font-family: var(--serif); }
small { font-size: .82em; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: linear-gradient(#fbf6ea, #efe5cf); color: var(--ink);
  cursor: pointer; font-weight: 600; letter-spacing: .01em; text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--jade); box-shadow: 0 0 0 3px rgba(47,138,110,.15); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.btn.primary { background: linear-gradient(#3a9c7d, #23735b); color: #fff; border-color: #1d5f4b; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#45ab8b, #287f65); }
.btn.danger { background: linear-gradient(#cf4a3c, #a8302a); color: #fff; border-color: #8a2520; }
.btn.accent { background: linear-gradient(#264d84, #1b3964); color: #fff; border-color: #152c4f; }
.btn.gold { background: linear-gradient(#e2bf5f, #c39532); color: #2a1e05; border-color: #9b7424; }
.btn.end { background: linear-gradient(#2a2520, #14110e); color: #f4ecdb; border-color: #000; width: 100%; padding: 10px; font-size: 15px; justify-content: center; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn small { font-weight: 400; opacity: .85; }
.icon {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: #fbf6ea; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.icon:disabled { opacity: .35; cursor: default; }

/* ------------------------------------------------------------ app shell */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#topbar {
  height: 56px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 14px;
  background: linear-gradient(#1d1915, #120f0c); color: #efe4c9; border-bottom: 2px solid var(--gold);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-seal {
  font-family: var(--serif); font-weight: 900; font-size: 15px; line-height: 1; padding: 6px 5px; writing-mode: vertical-rl;
  background: var(--seal); color: #fff2e0; border-radius: 4px; letter-spacing: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset;
}
.brand h1 { margin: 0; font: 700 16px/1.1 var(--serif); letter-spacing: .02em; white-space: nowrap; }
.brand small { color: var(--gold-2); font-family: var(--serif); letter-spacing: .3em; }
.piles { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; margin-left: auto; }
.pile {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #d8ccb0;
}
.pile i { font-style: normal; font-family: var(--serif); color: var(--gold-2); }
.pile b { color: #fff; }
.pile.phase.mid { background: rgba(201,160,67,.25); border-color: var(--gold); color: #fff; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.top-actions .btn { white-space: nowrap; color: #efe4c9; border-color: rgba(255,255,255,.18); padding: 5px 9px; font-size: 13px; }
.top-actions .btn:hover { border-color: var(--gold); box-shadow: none; }
.top-actions .btn.on { background: rgba(201,160,67,.3); }
.top-actions b { color: var(--gold-2); }
.speed { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #cdbf9e; }
.speed select { background: #2a241e; color: #efe4c9; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 3px 4px; }

#main { flex: 1; display: flex; min-height: 0; }
#board-wrap { position: relative; flex: 1; min-width: 0; overflow: hidden; }
#side {
  width: var(--side-w); flex: none; overflow-y: auto; overflow-x: hidden; border-left: 1px solid var(--line);
  background:
    radial-gradient(1200px 400px at 120% -10%, rgba(47,138,110,.10), transparent 60%),
    linear-gradient(var(--paper), var(--paper-2));
  padding: 12px 12px 24px;
}

/* ------------------------------------------------------------ board */
#board {
  position: absolute; inset: 0; cursor: grab; touch-action: none; user-select: none;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(87,179,147,.10), transparent 60%),
    radial-gradient(700px 600px at 85% 90%, rgba(201,160,67,.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 110px),
    linear-gradient(160deg, var(--board-2), var(--board));
}
#board.dragging { cursor: grabbing; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#world.smooth { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
#links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.tunnel-link { fill: none; stroke: #d9c48b; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .75; }
#tiles { position: absolute; left: 0; top: 0; }
#avatars { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; }

.tile, .slot {
  position: absolute; width: 100px; height: 100px; border-radius: 12px;
}
.tile {
  --c1: #5c5448; --c2: #3c362d; --fg: #fff8e8;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(155deg, var(--c1), var(--c2));
  color: var(--fg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.06) inset, 0 8px 16px rgba(0,0,0,.35);
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 11px;
  transition: box-shadow .2s, transform .2s;
}
.tile::after { /* paper grain / brush edge */
  content: ""; position: absolute; inset: 4px; border-radius: 9px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.18);
}
.tile.el-wood  { --c1: #4f9c5c; --c2: #24603a; }
.tile.el-fire  { --c1: #dc5a3c; --c2: #8e2418; }
.tile.el-earth { --c1: #c99a50; --c2: #7c5420; }
.tile.el-metal { --c1: #e8e2cf; --c2: #a49a7c; --fg: #2a251c; }
.tile.el-water { --c1: #3a6fbf; --c2: #142f63; }
.tile.special::after { border: 2px solid var(--gold-2); box-shadow: 0 0 10px rgba(232,200,115,.5) inset; }
.tile.k-cave { --c1: #4a4239; --c2: #17130f; }
.tile.k-cave.el-wood  { --c1: #2d5a35; --c2: #0f2215; }
.tile.k-cave.el-fire  { --c1: #7a2a1d; --c2: #2a0b06; }
.tile.k-cave.el-earth { --c1: #6e4f22; --c2: #241808; }
.tile.k-cave.el-metal { --c1: #77705e; --c2: #2c2a24; --fg: #f4ecd6; }
.tile.k-cave.el-water { --c1: #1e3e74; --c2: #0a1530; }
.tile.k-cave.cave-elite { --c1: #5a2144; --c2: #1d0716; }
.tile.k-cave::before { /* cave mouth arch */
  content: ""; position: absolute; left: 22px; right: 22px; bottom: -14px; height: 62px; border-radius: 40px 40px 0 0;
  background: radial-gradient(60% 80% at 50% 100%, rgba(0,0,0,.65), rgba(0,0,0,.15)); pointer-events: none;
}
.tile.k-tunnel { --c1: #6b6f73; --c2: #2b2e33; }
.tile.k-merchant { --c1: #c7764a; --c2: #6b3618; }
.tile.k-base { --c1: #e8dfc8; --c2: #a89b7d; --fg: #1f1b16; }
.tile.k-base.kunlun {
  --c1: #f6fbff; --c2: #8fb6c9; --fg: #14304a;
  box-shadow: 0 0 0 2px var(--gold-2), 0 0 26px rgba(232,200,115,.65), 0 8px 16px rgba(0,0,0,.35);
}
.tile.k-spawn { --c1: #3b3530; --c2: #1d1916; }
.tile.k-spawn::after { border: 3px solid var(--owner); box-shadow: 0 0 12px var(--owner) inset; }
.tile-wm {
  position: absolute; right: -6px; bottom: -14px; font: 900 64px/1 var(--serif); opacity: .13; pointer-events: none;
}
.tile-glyph { position: relative; font-family: var(--serif); font-weight: 800; line-height: 1.05; text-shadow: 0 1px 2px rgba(0,0,0,.35); white-space: nowrap; }
.tile.el-metal .tile-glyph, .tile.k-base .tile-glyph { text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.tile-glyph.g1, .tile-glyph.g2 { font-size: 26px; }
.tile-glyph.g3 { font-size: 22px; }
.tile-glyph.g4 { font-size: 16px; margin-top: 5px; }
.tile-name { position: relative; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; margin-top: 3px; opacity: .95; max-width: 92px; text-align: center; line-height: 1.1; }
.tile.k-spawn { padding-top: 27px; } /* glyph sits below the owner badge */
.tile.k-spawn .tile-name { font-size: 11px; } /* the owner's name */
.spawn-owner { /* owner initial: visible at every zoom and when the tile is occupied */
  position: absolute; top: 4px; right: 4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; z-index: 2;
  background: var(--pc); color: #fff; border: 2px solid #fff8e8; font: 800 11px/16px var(--sans); text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.6); box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#board.far .spawn-owner { min-width: 26px; height: 26px; font-size: 14px; line-height: 22px; }
.tile-sub { position: relative; font-size: 8.5px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; max-width: 86px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.occupied .tile-sub { visibility: hidden; } /* avatars sit on the bottom strip of the tile */
/* Avatars straddle the bottom edge (top ~78px near, ~74px far); keep the name block above them. */
.tile.occupied .tile-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#board.far .tile.occupied.has-boss .tile-name { -webkit-line-clamp: 1; }
#board.far .tile.occupied.has-boss .tile-glyph { font-size: 20px; } /* leave a clear band above the avatars */
.tile.pulse { animation: tile-pulse .65s ease-in-out 4; z-index: 3; }
@keyframes tile-pulse { 0%,100% { box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 0 4px var(--gold-2), 0 0 34px rgba(232,200,115,.95); } }
.seal {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 4px;
  background: var(--seal); color: #fff2e0; font: 800 10px/16px var(--serif); text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.seal.cave { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); line-height: 14px; }
.seal.elite { background: #8e2a66; border-color: #f0a9d2; }
.marks { position: absolute; top: 23px; right: 4px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; z-index: 2; }
.mark { font: 800 10px/1 var(--serif); padding: 3px 4px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.mark.bush { background: #2c7a3a; color: #e3ffd8; border: 1px solid #a5e19a; }
.mark.stone { background: #5b4630; color: #ffe9c4; border: 1px solid #e3c08a; }
.bosses { position: absolute; top: 4px; left: 4px; right: 24px; display: flex; flex-wrap: nowrap; gap: 3px; z-index: 3; overflow: hidden; }
.tile.has-boss { padding-top: 25px; }
.boss {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 6px; border-radius: 999px; white-space: nowrap; flex: none;
  font: 800 11px/1.1 var(--serif); box-shadow: 0 2px 5px rgba(0,0,0,.5); animation: boss-pulse 2.4s ease-in-out infinite;
}
.boss b { font-weight: 900; }
.boss small { font: 700 8px/1 var(--sans); max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss i { font-style: normal; font-family: var(--sans); background: rgba(0,0,0,.35); border-radius: 999px; padding: 0 4px; }
.boss.legendary { background: linear-gradient(#f6dc8c, #c99a2e); color: #3a2604; border: 1px solid #fff2c4; }
.boss.guardian { background: linear-gradient(#a33a3a, #5e1717); color: #ffe7e0; border: 1px solid #f0a3a3; }
@keyframes boss-pulse { 0%,100% { box-shadow: 0 2px 5px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 12px rgba(255,220,140,.8); } }

.tile.here { box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 0 3px rgba(255,255,255,.06) inset, 0 8px 16px rgba(0,0,0,.35); }
.tile.target, .slot.target { cursor: pointer; z-index: 2; }
.tile.target { box-shadow: 0 0 0 3px var(--jade-2), 0 0 22px rgba(87,179,147,.9), 0 8px 16px rgba(0,0,0,.35); animation: tgt 1.4s ease-in-out infinite; }
.tile.target:hover { transform: translateY(-2px) scale(1.03); }
@keyframes tgt { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.tile.t-tunnel { box-shadow: 0 0 0 3px #e8c873, 0 0 22px rgba(232,200,115,.9); }
.tile.t-respawn { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255,255,255,.8); }
.tile.t-scroll { box-shadow: 0 0 0 3px #9fc6ff, 0 0 22px rgba(130,180,255,.9); }
.tile.t-bush { box-shadow: 0 0 0 3px #a5e19a, 0 0 22px rgba(140,230,120,.9); }
.tile.t-stone { box-shadow: 0 0 0 3px #f0c98b, 0 0 22px rgba(240,200,130,.9); }
.tile.fresh { animation: flip-in .6s cubic-bezier(.2,.8,.2,1); }
@keyframes flip-in { 0% { transform: perspective(500px) rotateY(90deg) scale(.85); opacity: .2; } 100% { transform: none; opacity: 1; } }

.slot {
  border: 2px dashed rgba(220,210,180,.28); background: rgba(255,255,255,.025);
  display: flex; align-items: center; justify-content: center; color: rgba(230,220,190,.32);
  font: 700 30px/1 var(--serif);
}
.slot.target {
  border-color: var(--jade-2); color: #d8fff0; background: rgba(87,179,147,.14);
  box-shadow: 0 0 18px rgba(87,179,147,.45) inset; animation: slot-pulse 1.5s ease-in-out infinite;
}
.slot.target:hover { background: rgba(87,179,147,.28); }
.slot.t-placeSpawn, .slot.t-placeTunnel { border-color: var(--gold-2); color: #fff3cf; background: rgba(232,200,115,.14); box-shadow: 0 0 18px rgba(232,200,115,.45) inset; }
@keyframes slot-pulse { 0%,100% { border-color: rgba(87,179,147,.6); } 50% { border-color: rgba(160,240,210,1); } }

.avatar {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 55%, #fff), var(--pc) 60%, color-mix(in srgb, var(--pc) 70%, #000));
  border: 2px solid #fff8e8; box-shadow: 0 3px 6px rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  transition: transform .32s cubic-bezier(.3,.9,.3,1.15);
}
.avatar i {
  position: absolute; right: -6px; top: -6px; width: 15px; height: 15px; border-radius: 50%; background: #1f1b16; color: #f4ecdb;
  font: 700 9px/15px var(--serif); font-style: normal; text-align: center; border: 1px solid rgba(255,255,255,.5);
}
.avatar.crowd { width: 24px; height: 24px; font-size: 11px; }
.avatar.crowd i { display: none; }
.avatar.active { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(232,200,115,.45), 0 3px 8px rgba(0,0,0,.6); animation: av-bob 1.6s ease-in-out infinite; }
@keyframes av-bob { 0%,100% { margin-top: 0; } 50% { margin-top: -3px; } }

/* board overlays */
#midbanner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 6px 16px; border-radius: 999px; font-size: 12.5px; color: #1f2a3a; white-space: nowrap; max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, #f6fbff, #d9ecf5); border: 1px solid var(--gold); box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.mb-zh { font: 900 15px var(--serif); color: #14304a; margin-right: 6px; }
#target-banner {
  position: absolute; top: 12px; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); z-index: 7;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); border: 1px solid var(--gold);
}
#midbanner:not(.hidden) ~ #target-banner { top: 52px; } /* sit below the mid-game banner */
.tb-msg { min-width: 0; }
#target-banner .btn { flex: none; }

/* level of detail when zoomed out (see applyView) */
#board.far .tile-sub, #board.far .tile-wm { display: none; }
#board.far .tile-name { font-size: 12.5px; max-width: 96px; margin-top: 4px; }
#board.far .boss { font-size: 13px; padding: 2px 5px 2px 7px; }
#board.far .tile.has-boss { padding-top: 29px; }
#board.far .boss small { display: none; }
#board.far .avatar { --avs: 1.3; }
#toasts { position: absolute; top: 56px; right: 14px; z-index: 8; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; max-width: min(380px, 70%); }
.toast {
  background: rgba(250,244,230,.97); color: var(--ink); border-radius: 9px; padding: 7px 12px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
  border-left: 4px solid var(--jade); animation: toast-in .25s ease-out; transition: opacity .35s, transform .35s;
}
.toast.out { opacity: 0; transform: translateX(20px); }
.toast.bad { border-left-color: var(--seal); }
.toast.warn { border-left-color: #d98b2b; }
.toast.good { border-left-color: var(--jade-2); }
.toast.gold { border-left-color: var(--gold); }
.toast.turn { background: #1f1b16; color: #f4ecdb; border-left-color: var(--gold); }
.t-turn { font-weight: 800; color: color-mix(in srgb, var(--pc) 60%, #fff); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }

.zoom-ctl { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; flex-direction: column; gap: 4px; }
.zoom-ctl button {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); background: rgba(20,17,14,.82); color: #efe4c9;
  font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.zoom-ctl button:hover { border-color: var(--gold); color: #fff; }

#logdock {
  position: absolute; left: 14px; bottom: 14px; z-index: 6; width: min(380px, calc(100% - 90px));
  background: rgba(244,236,219,.95); border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden;
}
.log-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border: 0; background: linear-gradient(#efe5cf, #e3d6b9); cursor: pointer; font-weight: 700; }
.log-head .chev { transition: transform .2s; }
#logdock:not(.open) .chev { transform: rotate(180deg); }
#logdock:not(.open) #log { display: none; }
#log { list-style: none; margin: 0; padding: 6px 12px 10px; height: min(170px, 22vh); overflow-y: auto; font-size: 12px; line-height: 1.4; }
#log li { padding: 2px 0; border-bottom: 1px dotted rgba(0,0,0,.08); color: var(--ink-2); }
#log li.turn { color: var(--jade-deep); font-weight: 700; padding-top: 6px; border-bottom-color: rgba(47,138,110,.3); }
#log li.big { color: var(--seal); font-weight: 700; }
#log li.hurt { color: #8a3a22; }
#log li.pair { color: var(--ink-soft); padding-left: 10px; }

/* ------------------------------------------------------------ side panel */
#turnpanel.busy .btn:disabled { opacity: .6; cursor: progress; }
#turnpanel {
  background: #fffaf0; border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 4px 14px rgba(60,40,10,.10);
}
.tp-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin: -4px -4px 4px 0; }
.tp-penta svg { display: block; }
.tp-player { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tp-av, .pc-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 17px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 55%, #fff), var(--pc) 60%, color-mix(in srgb, var(--pc) 70%, #000));
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pc); text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.tp-name { font: 800 18px/1.15 var(--serif); }
.tp-el { margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.tp-dice { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); }
.tp-steps { display: flex; flex-direction: column; gap: 2px; }
.tp-steps-n b { font: 800 26px/1 var(--serif); margin-right: 6px; }
.tp-steps-n span { color: var(--ink-soft); font-size: 12px; }
.tp-faces { font-size: 11px; color: var(--ink-soft); letter-spacing: .04em; }
.tp-status { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); }
.tp-status:empty { display: none; }
.tp-prompt { margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: #fdf3d8; border: 1px solid #ecd59a; font-size: 13px; }
.tp-prompt.muted { background: transparent; border-color: transparent; text-align: center; }
.tp-thinking { margin-top: 10px; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-style: italic; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--jade); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tp-over { margin: 6px 0 10px; font-size: 15px; }
.tp-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.tp-actions > .btn { width: 100%; }
.tp-group { display: flex; flex-direction: column; gap: 6px; }
.tp-group.move-group { flex-direction: row; }
.tp-group.move-group .btn.roll { flex: 1; font-size: 16px; padding: 10px; justify-content: center; }
.tp-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; }
.tp-label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.btn-col { display: flex; flex-direction: column; gap: 5px; }
.btn-col .btn { width: 100%; justify-content: flex-start; }
.btn.wide { width: 100%; }
.roll-ico .die { width: 22px; height: 22px; padding: 3px; gap: 1px; border-radius: 5px; }
.dpad-wrap { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 44px); gap: 4px; justify-content: center; }
.btn.dpad { flex-direction: column; gap: 0; padding: 2px; font-size: 16px; line-height: 1; justify-content: center; text-align: center; }
.btn.dpad small { font: 600 10px/1.2 var(--serif); max-width: 60px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.btn.dpad.disc { border-style: dashed; }
.btn.dpad.dN { grid-column: 2; grid-row: 1; }
.btn.dpad.dW { grid-column: 1; grid-row: 2; }
.btn.dpad.dE { grid-column: 3; grid-row: 2; }
.btn.dpad.dS { grid-column: 2; grid-row: 3; }
.dpad-c { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; font: 800 20px var(--serif); color: var(--jade-deep); border-radius: 50%; background: var(--paper-2); }

#legends { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(#f7fbff, #e5eef3); border: 1px solid #b9cad3; }
.sec-title { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #33495a; margin: 2px 0 4px; }
.sec-title small { font-weight: 400; text-transform: none; color: var(--ink-soft); }
.lg-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.lg { border-radius: 8px; text-align: center; background: #fff; border: 1px solid #d3dde3; min-width: 0; }
.lg-btn { display: block; width: 100%; padding: 4px 2px; border: 0; background: transparent; border-radius: 7px; text-align: center; min-width: 0; }
button.lg-btn { cursor: pointer; }
button.lg-btn:hover { background: #fdf3d8; }
.lg-zh { display: block; font: 800 15px/1.1 var(--serif); }
.lg-en, .lg-st { display: block; font-size: 9.5px; line-height: 1.2; overflow-wrap: anywhere; }
.lg-st { font-size: 10.5px; }
.lg-xy { display: block; font-size: 9.5px; font-family: var(--sans); }
.lg-en { font-weight: 700; color: var(--ink-2); }
.lg-st { color: var(--ink-soft); }
.lg.slain, .lg.captured { opacity: .55; }
.lg.slain .lg-zh { text-decoration: line-through; }
.lg.active .lg-zh { color: var(--seal); }
.lg.el-wood { border-top: 3px solid var(--wood); } .lg.el-fire { border-top: 3px solid var(--fire); } .lg.el-earth { border-top: 3px solid var(--earth); }
.lg.el-metal { border-top: 3px solid var(--metal); } .lg.el-water { border-top: 3px solid var(--water); }

#players { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.pcard {
  border-radius: 12px; background: #fffaf0; border: 1px solid var(--line); padding: 10px; position: relative;
  border-left: 5px solid var(--pc);
}
.pcard.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 45%, transparent), 0 6px 16px rgba(60,40,10,.12); }
.pcard.dead { opacity: .55; filter: grayscale(.7); }
.pcard.winner { box-shadow: 0 0 0 3px var(--gold), 0 6px 20px rgba(201,160,67,.4); }
.pc-head { display: flex; align-items: center; gap: 10px; }
.pc-av { width: 30px; height: 30px; font-size: 14px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pc); }
.pc-id { flex: 1; min-width: 0; }
.pc-name { font: 800 15px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pc-pos { font-size: 11px; color: var(--ink-soft); font-family: var(--serif); }
.pc-hp { white-space: nowrap; }
.heart { color: #c8322a; font-size: 16px; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.heart.lost { color: #d8ccb2; }
.hp-inline .heart { font-size: 14px; }
.elim { color: var(--seal); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.badge { display: inline-block; font: 700 10px/1 var(--sans); padding: 3px 5px; border-radius: 4px; vertical-align: middle; letter-spacing: .05em; }
.badge.cpu { background: #1f1b16; color: #f4ecdb; }
.badge.turn { background: var(--jade); color: #fff; }
.badge.decide { background: var(--seal); color: #fff; }
.tp-player.deciding { padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--pc) 12%, #fff); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.tp-during { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.eltag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font: 700 11.5px/1.5 var(--sans); color: #fff; white-space: nowrap; }
.eltag.el-wood { background: var(--wood); } .eltag.el-fire { background: var(--fire); } .eltag.el-earth { background: var(--earth); }
.eltag.el-metal { background: #8d846c; } .eltag.el-water { background: var(--water); }
.pname { color: color-mix(in srgb, var(--pc) 75%, #000); }

.pc-mons { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.pc-cap { position: absolute; right: 0; top: -22px; font-size: 10px; color: var(--ink-soft); display: none; }
.empty { font-size: 12px; color: var(--ink-soft); font-style: italic; padding: 2px 0; }
.mon {
  display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 3px; border-radius: 7px; background: var(--paper-2); border: 1px solid rgba(0,0,0,.06);
  font-size: 12px; min-width: 0;
}
.mon-el { width: 22px; height: 22px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--serif); color: #fff; }
.mon.el-wood .mon-el { background: var(--wood); } .mon.el-fire .mon-el { background: var(--fire); } .mon.el-earth .mon-el { background: var(--earth); }
.mon.el-metal .mon-el { background: #8d846c; } .mon.el-water .mon-el { background: var(--water); }
.mon-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mon-name small { font-family: var(--serif); color: var(--ink-soft); font-weight: 400; }
.mon-atk { font: 800 15px/1 var(--serif); min-width: 18px; text-align: right; }
.mon.legendary { background: linear-gradient(90deg, #f8e7b1, #fdf5dc); border-color: var(--gold); }
.tb { font: 700 9.5px/1 var(--sans); padding: 2px 4px; border-radius: 4px; white-space: nowrap; }
.tb.amber { background: #ffe0c2; color: #9a3c10; }
.tb.iron { background: #e2e2dc; color: #3a3a34; }
.tb.leg { background: var(--gold); color: #2a1e05; }
.tb.grd { background: #8e2a2a; color: #fff; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; font-size: 11.5px; background: #f1e7d1; border: 1px solid var(--line); cursor: help; }
.chip i { font: 800 11px/18px var(--serif); font-style: normal; width: 18px; height: 18px; text-align: center; border-radius: 50%; background: var(--ink); color: var(--paper); }
.chip.item i { background: var(--jade-deep); }
.chip.buff { background: #e2f4ec; border-color: #9fd2bd; padding-left: 8px; }
.pc-quest { margin-top: 7px; padding: 6px 8px; border-radius: 8px; background: #fbf1d4; border: 1px dashed var(--gold); font-size: 12px; }
.pc-quest div { color: var(--ink-2); margin-top: 2px; }
.pc-quest em { color: var(--jade-deep); font-style: normal; font-weight: 700; }
.pc-quest.hidden-q { background: #efe8d8; border-color: var(--line); }
.pc-quest.hidden-q .btn { display: block; width: 100%; margin-top: 5px; }
.pc-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 7px; border-top: 1px dotted var(--line); font-size: 11.5px; color: var(--ink-soft); flex-wrap: wrap; }
.pc-col { display: flex; align-items: center; gap: 2px; }
.cpip { width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 10.5px/1 var(--serif); border: 1.5px dashed #c9b994; color: #b9a982; }
.cpip.on { border-style: solid; color: #fff; }
.cpip.on.el-wood { background: var(--wood); border-color: var(--wood); } .cpip.on.el-fire { background: var(--fire); border-color: var(--fire); }
.cpip.on.el-earth { background: var(--earth); border-color: var(--earth); } .cpip.on.el-metal { background: #8d846c; border-color: #8d846c; }
.cpip.on.el-water { background: var(--water); border-color: var(--water); }
.pc-colnum { margin-left: 4px; font-weight: 700; color: var(--ink-2); }
.pc-home { font-weight: 700; color: var(--jade-deep); }
.pc-spawn { margin-left: auto; }

/* ------------------------------------------------------------ dice */
.die {
  width: 40px; height: 40px; padding: 6px; border-radius: 9px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px;
  background: linear-gradient(145deg, #fffdf6, #e8dcc2); border: 1px solid #b9a77f; box-shadow: 0 2px 0 #b9a77f, 0 4px 8px rgba(0,0,0,.2);
}
.die i { display: block; border-radius: 50%; }
.die i.pip { background: radial-gradient(circle at 35% 35%, #4a4038, #120e0b); margin: 1px; }
.die.red i.pip { background: radial-gradient(circle at 35% 35%, #ff6a55, #a1150c); }
.die.big { width: 58px; height: 58px; padding: 9px; gap: 3px; border-radius: 12px; }
.die.tiny { width: 22px; height: 22px; }
.die .die-q { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; font: 800 22px var(--serif); color: #a99870; }
.die.rolling { animation: tumble .25s linear infinite; }
.die.landed { animation: land .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes tumble { 0% { transform: rotate(0) translateY(0); } 25% { transform: rotate(14deg) translateY(-4px); } 50% { transform: rotate(-6deg) translateY(0); } 75% { transform: rotate(-16deg) translateY(-3px); } 100% { transform: rotate(0); } }
@keyframes land { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ------------------------------------------------------------ cards */
.mcard {
  width: 92px; height: 128px; border-radius: 10px; position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 6px; color: #fff; overflow: hidden; flex: none;
  --c1: #777; --c2: #333;
  background: radial-gradient(120% 70% at 30% 10%, rgba(255,255,255,.25), transparent 60%), linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 0 3px rgba(255,255,255,.12) inset, 0 6px 14px rgba(0,0,0,.3);
}
.mcard.el-wood  { --c1: #4f9c5c; --c2: #1f5230; }
.mcard.el-fire  { --c1: #dc5a3c; --c2: #7d1e12; }
.mcard.el-earth { --c1: #c99a50; --c2: #6c4818; }
.mcard.el-metal { --c1: #e6dfca; --c2: #8d846a; color: #2a251c; }
.mcard.el-water { --c1: #3a6fbf; --c2: #10285a; }
.mcard.legendary, .mcard.boss.legendary { box-shadow: 0 0 0 2px var(--gold-2), 0 0 16px rgba(232,200,115,.6), 0 6px 14px rgba(0,0,0,.3); }
.mcard.boss.guardian { box-shadow: 0 0 0 2px #e98b8b, 0 6px 14px rgba(0,0,0,.3); }
.mc-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.mc-el { width: 22px; height: 22px; border-radius: 6px; background: rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--serif); }
.mcard.el-metal .mc-el { background: rgba(255,255,255,.55); }
.mc-atk { font: 900 24px/1 var(--serif); text-shadow: 0 2px 3px rgba(0,0,0,.35); }
.mc-glyph { font: 800 22px/1.1 var(--serif); margin-top: 10px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.3); white-space: nowrap; }
.mc-name { font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.15; margin-top: 4px; }
.mc-tok { margin-top: auto; display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.mcard.back { background: repeating-linear-gradient(45deg, #23463d 0 6px, #1b3830 6px 12px); align-items: center; justify-content: center; }
.mcard.back span { font: 900 22px/1 var(--serif); color: var(--gold-2); writing-mode: vertical-rl; letter-spacing: 4px; padding: 6px 4px; border: 2px solid var(--gold-2); border-radius: 6px; }
.mcard.dead { filter: grayscale(.85) brightness(.85); }
.mcard.discarded { opacity: .45; transform: scale(.9); }
.mcard.kept.caught { animation: caught .8s ease-out; box-shadow: 0 0 0 3px var(--jade-2), 0 0 26px rgba(87,179,147,.9); }
.mcard.kept.escaped { filter: grayscale(.6) brightness(.8); transform: translateY(6px) rotate(-4deg); transition: all .5s; }
@keyframes caught { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.flip { width: 92px; height: 128px; perspective: 700px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,.8,.3,1); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .face.front { transform: rotateY(180deg); }

.icard {
  width: 170px; padding: 10px; border-radius: 10px; background: linear-gradient(#fffaf0, #f1e5c9); border: 1px solid var(--line); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.12); transition: transform .12s, box-shadow .12s;
}
.icard:hover { transform: translateY(-2px); }
.icard.sel { box-shadow: 0 0 0 3px var(--jade), 0 6px 16px rgba(47,138,110,.3); }
.ic-glyph { width: 34px; height: 34px; border-radius: 8px; background: var(--jade-deep); color: #fff; font: 800 18px/34px var(--serif); text-align: center; }
.ic-name { font-weight: 800; }
.ic-name small { font-family: var(--serif); font-weight: 400; color: var(--ink-soft); }
.ic-text { font-size: 12px; color: var(--ink-2); }

/* ------------------------------------------------------------ modals */
#modals { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.modal-wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: auto;
  background: rgba(16,13,10,.55); backdrop-filter: blur(2px); animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(800px 300px at 100% 0, rgba(47,138,110,.08), transparent 60%), var(--paper);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid var(--gold); animation: pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop { from { transform: translateY(10px) scale(.97); opacity: 0; } }
.modal-wrap.wide .modal { width: min(820px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 8px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font: 800 20px/1.25 var(--serif); }
.modal-head .sub { margin: 4px 0 6px; color: var(--ink-2); font-size: 13px; }
.modal-head .x { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 4px; }
.modal-body { padding: 14px 20px; overflow-y: auto; }
.modal-body p { margin: 0 0 10px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: rgba(0,0,0,.02); flex-wrap: wrap; }
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.big-choice { flex-direction: column; min-width: 90px; padding: 12px; }
.big-choice b { font: 900 26px/1 var(--serif); }
.pick-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.pick {
  border: 1px solid var(--line); background: #fffaf0; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.pick:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--jade-2); }
.pick.sel { box-shadow: 0 0 0 3px var(--jade); background: #e8f5ef; }
.pick-odds { font-size: 11.5px; text-align: center; display: flex; flex-direction: column; color: var(--ink-2); }
.pick-odds b { font-size: 14px; color: var(--jade-deep); }
.pick-odds .po-tot { font-size: 13px; color: var(--ink); }
.b-el { color: #1f7a4d; font-weight: 700; }
.slay-intro { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.rr { display: flex; gap: 16px; align-items: center; }
.rel-new { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mcard.new { box-shadow: 0 0 0 3px var(--gold-2), 0 0 18px rgba(232,200,115,.7); }
.mc-summary { font-size: 14px; }

/* battle line */
.bl-opp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.bl-opp .mon { width: auto; }
.bl-help { font-size: 12.5px; color: var(--ink-2); background: var(--paper-2); padding: 7px 10px; border-radius: 8px; margin-bottom: 12px; }
.bl-slots { display: flex; gap: 10px; align-items: flex-end; justify-content: center; padding: 10px; border-radius: 12px; background: #1f2a28; position: relative; padding-bottom: 26px; }
.bl-slot { width: 104px; min-height: 160px; border-radius: 12px; border: 2px dashed rgba(232,200,115,.45); display: flex; flex-direction: column; align-items: center; padding: 4px; gap: 4px; }
.bl-slot.filled { border-style: solid; border-color: var(--gold-2); }
.bl-slot-n { color: var(--gold-2); font-size: 11px; font-weight: 700; }
.bl-empty { margin: auto; color: rgba(232,200,115,.5); font-size: 12px; }
.bl-order { position: absolute; bottom: 5px; right: 14px; color: var(--gold-2); font-size: 11px; letter-spacing: .05em; }
.bl-hand-label { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; }
.bl-hand { display: flex; gap: 10px; flex-wrap: wrap; }
.bl-card { cursor: grab; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .12s; }
.bl-card:hover { transform: translateY(-3px); }
.bl-card.used .mcard { opacity: .35; }
.bl-card.used .bl-beats { opacity: .8; }
.bl-beats { font: 700 12.5px/1.3 var(--sans); color: #135c39; background: #d6f1e3; border: 1px solid #8fd1ad; border-radius: 999px; padding: 1px 8px; }
.bl-slot .bl-beats { font-size: 11.5px; }

/* privacy + game over */
.modal-wrap.privacy { background: radial-gradient(circle at 50% 40%, #233733, #0b0f0e); }
.modal-wrap.privacy .modal { text-align: center; }
.modal-wrap.privacy .modal-foot { justify-content: center; }
.priv-seal, .go-seal {
  width: 84px; height: 84px; border-radius: 50%; margin: 6px auto 14px; display: flex; align-items: center; justify-content: center;
  font: 900 38px/1 var(--serif); color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 55%, #fff), var(--pc) 60%, color-mix(in srgb, var(--pc) 70%, #000));
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--pc), 0 10px 30px rgba(0,0,0,.35);
}
.modal-wrap.gameover .modal { text-align: center; width: min(620px, 100%); }
.go-name { font: 800 26px/1.2 var(--serif); margin: 0 0 4px; }
.go-type { color: var(--ink-2); }
.go-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; text-align: left; }
.go-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 4px 6px; }
.go-table td { padding: 6px; border-bottom: 1px dotted var(--line); }
.go-table tr.win td { background: #fbf1d4; font-weight: 700; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

/* rules + graveyard */
.rules { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
.rules-penta { text-align: center; font-size: 12.5px; color: var(--ink-2); position: sticky; top: 0; align-self: start; }
.rules-text h3 { font: 800 15px var(--serif); margin: 14px 0 4px; color: var(--jade-deep); }
.rules-text h3:first-child { margin-top: 0; }
.rules-text ul, .rules-text ol { margin: 0; padding-left: 20px; }
.rules-text li { margin: 2px 0; }
.rules-text p { margin: 0 0 6px; }
.grave-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* pentagon */
.penta { overflow: visible; }
.penta-edge { fill: none; stroke-linecap: round; }
.penta-node text { fill: #fff; font-family: var(--serif); font-weight: 900; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.penta-label { font: 700 12px var(--sans); fill: var(--ink-2); }
.penta-ke { font: 700 11px var(--serif); fill: var(--ink-soft); }
.penta-core { fill: rgba(47,138,110,.08); stroke: rgba(47,138,110,.25); stroke-dasharray: 2 4; }
.penta-center { font: 900 20px var(--serif); fill: var(--ink); }
.penta-center-sub { font: 600 10px var(--sans); fill: var(--ink-soft); letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------ stage overlays */
#stage { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10,12,11,.9); backdrop-filter: blur(6px); }
.veil { visibility: hidden; }
#stage.show { display: flex; animation: fade .2s ease-out; }
.stage-card {
  width: min(860px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 18px; padding: 20px 24px; text-align: center;
  background: radial-gradient(700px 300px at 50% -10%, rgba(87,179,147,.14), transparent 70%), linear-gradient(#1d2523, #121816);
  color: #efe6cf; border: 1px solid rgba(232,200,115,.6); box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.st-title { font: 900 24px/1.2 var(--serif); color: var(--gold-2); letter-spacing: .04em; }
.st-sub { color: #cfc4a8; margin: 6px 0 14px; }
.st-big { font-size: 18px; margin: 14px 0; }
.st-result { margin: 16px auto 8px; font: 700 18px/1.3 var(--serif); padding: 8px 16px; border-radius: 10px; display: inline-block; background: rgba(255,255,255,.06); }
.st-result.win { color: #b8f5d9; background: rgba(87,179,147,.18); }
.st-result.lose { color: #ffc6b8; background: rgba(200,67,44,.18); }
.stage-continue { display: flex; margin: 10px auto 0; min-width: 140px; justify-content: center; }
.stage-card .muted { color: #a99f86; }
.stage-card .eltag { vertical-align: middle; }
.stage-card .pname { color: color-mix(in srgb, var(--pc) 60%, #fff); }
.bs-side { display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 16px var(--serif); margin: 10px 0 6px; color: color-mix(in srgb, var(--pc) 55%, #fff); }
.bs-side small { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #a99f86; }
.bs-side .pc-av { width: 26px; height: 26px; font-size: 12px; }
.bs-grid { display: flex; justify-content: center; gap: 14px; }
.bs-col { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; transition: background .3s; }
.bs-col.revealing { background: rgba(255,255,255,.04); }
.bs-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bs-card.d { flex-direction: column-reverse; }
.bs-bd { min-height: 18px; font-size: 11px; color: #d9cfb6; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 130px; }
.bs-bd b { color: #fff; }
.bs-bd .b-el { color: #8ff0c0; }
.bs-bd .b-amber { color: #ffb47a; }
.bs-bd .b-iron { color: #d6d6cc; }
.bs-bd .b-ward { color: #9fc6ff; }
.bs-vs span { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.08); font-weight: 800; color: var(--gold-2); }
.bs-col.r-attacker .bs-card.d .mcard, .bs-col.r-defender .bs-card.a .mcard, .bs-col.r-tie .mcard { filter: grayscale(.9) brightness(.6); transform: scale(.94); transition: all .4s; }
.bs-col.r-attacker .bs-card.a .mcard, .bs-col.r-defender .bs-card.d .mcard { box-shadow: 0 0 0 3px var(--gold-2), 0 0 22px rgba(232,200,115,.8); }
.bs-col.r-attacker .bs-vs span, .bs-col.r-defender .bs-vs span { background: var(--gold); color: #2a1e05; }
.bs-total { margin-top: 12px; font-size: 14px; }
.bs-total b { font: 900 22px var(--serif); color: var(--gold-2); margin: 0 6px; }
.acq { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 6px; }
.acq-cards { display: flex; gap: 10px; }
.acq-cards .mcard { width: 112px; height: 156px; }
.acq-cards .mcard .mc-glyph { font-size: 26px; }
.acq-math { min-width: 230px; text-align: left; background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 14px; }
.tg-row { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; border-bottom: 1px dotted rgba(255,255,255,.12); font-size: 13px; }
.tg-row b { font-family: var(--serif); font-size: 16px; }
.tg-row.good { color: #9ff0c9; }
.tg-row.muted { color: #9a917b; }
.tg-row.total { border-bottom: 0; font-weight: 700; color: var(--gold-2); }
.tg-row.total b { font-size: 24px; }
.tg-odds { font-size: 11.5px; color: #a99f86; text-align: right; }
.acq-die { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.acq-die .die { width: 72px; height: 72px; padding: 11px; border-radius: 14px; }
.acq-roll-l { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #a99f86; }
.slay-st { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 12px; }
.ss-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cap-leg .mcard { animation: cap-glow 1.6s ease-in-out infinite; }
@keyframes cap-glow { 0%,100% { box-shadow: 0 0 0 3px var(--gold-2), 0 0 14px rgba(232,200,115,.5); } 50% { box-shadow: 0 0 0 3px var(--gold-2), 0 0 34px rgba(232,200,115,.95); } }
.ss-vs { font: 900 26px var(--serif); color: var(--gold-2); }
.ss-pow { font: 800 18px var(--serif); min-height: 24px; color: #fff; }
.mg-mountain { font: 900 64px/1 var(--serif); color: #f3f9ff; text-shadow: 0 0 30px rgba(170,215,255,.8), 0 0 4px #fff; letter-spacing: .12em; margin: 6px 0 10px; animation: rise 1.4s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; letter-spacing: .5em; } }
.mg-legs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.lg-badge { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 12px; font: 900 22px/1.1 var(--serif); background: rgba(255,255,255,.06); border-top: 4px solid; }
.lg-badge small { font: 600 10.5px var(--sans); color: #cfc4a8; }
.lg-badge.el-wood { border-color: var(--wood); } .lg-badge.el-fire { border-color: var(--fire); } .lg-badge.el-earth { border-color: var(--earth); }
.lg-badge.el-metal { border-color: var(--metal); } .lg-badge.el-water { border-color: #3a7be0; }

/* ------------------------------------------------------------ setup */
#setup {
  position: fixed; inset: 0; overflow-y: auto; z-index: 30;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(47,138,110,.16), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(181,50,42,.10), transparent 60%),
    linear-gradient(var(--paper), var(--paper-2));
}
.setup-shell { max-width: 1120px; margin: 0 auto; padding: 32px 24px 48px; display: grid; grid-template-columns: 380px 1fr; gap: 32px; align-items: start; }
.setup-hero { text-align: center; position: sticky; top: 24px; padding: 22px 18px; border-radius: 18px; background: rgba(255,250,240,.7); border: 1px solid var(--line); }
.hero-seal {
  display: inline-block; font: 900 26px/1 var(--serif); color: #fff2e0; background: var(--seal); padding: 12px 10px; border-radius: 6px; letter-spacing: 4px; writing-mode: vertical-rl;
  box-shadow: 0 0 0 3px rgba(255,255,255,.4) inset, 0 6px 16px rgba(181,50,42,.35); transform: rotate(-3deg);
}
.setup-hero h1 { font: 900 28px/1.15 var(--serif); margin: 14px 0 2px; }
.hero-zh { font: 700 18px var(--serif); letter-spacing: .4em; color: var(--jade-deep); margin: 0 0 10px; }
.hero-lede { color: var(--ink-2); margin: 0 0 6px; }
.hero-penta { display: flex; justify-content: center; margin: 6px 0; }
.hero-cycle { font: 600 13px var(--serif); color: var(--ink-2); margin: 0 0 12px; }
.setup-form h2 { font: 800 20px var(--serif); margin: 6px 0 12px; }
.resume { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #e6f4ee; border: 1px solid #9fd2bd; margin-bottom: 18px; }
.resume-t { font: 800 16px var(--serif); color: var(--jade-deep); }
.resume-b { display: flex; gap: 6px; align-items: center; flex: none; }
.seats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.seat { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: #fffaf0; border: 1px solid var(--line); border-left: 6px solid var(--pc); box-shadow: 0 4px 12px rgba(60,40,10,.06); }
.seat-order { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 14px var(--serif); color: #fff; background: var(--pc); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--pc); }
.seat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.seat-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seat-l { width: 54px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 700; }
.seat-name { flex: 1; min-width: 140px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 15px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; padding: 6px 12px; background: #f5ecd8; cursor: pointer; font-weight: 700; font-size: 13px; }
.seg button.on { background: var(--ink); color: var(--paper); }
.seat-move { display: flex; gap: 4px; }
.el-pick { display: flex; gap: 5px; flex-wrap: wrap; }
.elb { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: #f8f1e1; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.elb b { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 900 13px/1 var(--serif); color: #fff; }
.elb.el-wood b { background: var(--wood); } .elb.el-fire b { background: var(--fire); } .elb.el-earth b { background: var(--earth); }
.elb.el-metal b { background: #8d846c; } .elb.el-water b { background: var(--water); }
.elb.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.col-pick { display: flex; gap: 6px; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); cursor: pointer; }
.sw.on { box-shadow: 0 0 0 2px var(--ink); transform: scale(1.12); }
.sw.used:not(.on) { opacity: .35; }
.add-seat { margin-top: 10px; border-style: dashed; }
.turn-order { margin: 16px 0 10px; font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.turn-order span b { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-size: 11px; margin-right: 2px; }
.seed-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; flex-wrap: wrap; }
.seed-row input { width: 160px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.btn.start { width: 100%; padding: 14px; font-size: 18px; font-family: var(--serif); justify-content: center; margin-bottom: 8px;
  position: sticky; bottom: 12px; z-index: 2; box-shadow: 0 8px 22px rgba(35,115,91,.35); } /* always reachable on short screens */

/* ------------------------------------------------------------ responsive */
@media (max-width: 1280px) {
  :root { --side-w: 340px; }
  .brand-text small { display: none; }
  .pile { padding: 3px 7px; }
}
@media (max-width: 1240px) {
  .pile i { display: none; } /* keep the English labels; the glyphs are decorative */
}
@media (max-width: 1120px) {
  :root { --side-w: 318px; }
  .brand-text { display: none; }
  #topbar { gap: 10px; }
  .pile { font-size: 11px; }
  .top-actions .btn { padding: 4px 7px; font-size: 12px; }
  .setup-shell { grid-template-columns: 320px 1fr; gap: 20px; }
  .rules { grid-template-columns: 1fr; }
  .rules-penta { position: static; }
}
@media (max-width: 900px) {
  .setup-shell { grid-template-columns: 1fr; }
  .setup-hero { position: static; }
}
@media (max-height: 820px) {
  .setup-shell { padding-top: 18px; }
  .seats { gap: 8px; }
  .seat { padding: 8px 10px; }
  .seat-main { gap: 6px; }
  .turn-order { margin: 10px 0 6px; }
  .seed-row { margin: 6px 0 10px; }
}
/* phones / narrow windows: stack the side panel under the board and let the top bar wrap */
@media (max-width: 760px) {
  #topbar { height: auto; min-height: 48px; flex-wrap: wrap; gap: 5px 6px; padding: 6px 8px; }
  .brand { display: none; }
  .piles { order: 3; flex: 1 1 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .pile { padding: 2px 7px; font-size: 11px; }
  .top-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
  .top-actions .btn { padding: 3px 6px; font-size: 11.5px; }
  .speed span { display: none; }
  .speed select { padding: 2px 2px; font-size: 11.5px; }
  #main { flex-direction: column; }
  #board-wrap { flex: 1 1 auto; min-height: 260px; }
  #side { width: 100%; height: 42vh; flex: none; border-left: 0; border-top: 2px solid var(--gold); padding: 10px 10px 18px; }
  #logdock { left: 8px; bottom: 8px; width: calc(100% - 64px); }
  #log { height: min(76px, 12vh); }
  .zoom-ctl { right: 8px; bottom: 8px; }
  .zoom-ctl button { width: 32px; height: 32px; }
  #toasts { right: 8px; max-width: calc(100% - 16px); }
  #midbanner { max-width: calc(100% - 24px); font-size: 11.5px; }
  .setup-shell { padding: 16px 12px 32px; }
  .seat-l { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}