:root {
  --bg: #0d0f16;
  --panel: rgba(24, 28, 40, 0.82);
  --panel-solid: #181c28;
  --line: #2e3548;
  --text: #eceee2;
  --muted: #97a08c;
  --accent: #e0b45c;
  --accent-2: #f0c14b;
  --door: #f0c14b;
  --wall: #3a4254;
  --cell: #232a3a;
  --good: #6bd46b;
  --bad: #f07167;
  --info: #4aa3e8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg) url("/assets/bg-texture.png") center / cover fixed no-repeat;
  color: var(--text);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, transparent 0%, rgba(8, 9, 14, 0.72) 78%);
  pointer-events: none;
  z-index: 0;
}
#app { min-height: 100vh; position: relative; z-index: 1; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 24px 16px 56px; }

/* ---------- header ---------- */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.topbar .logo {
  width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  box-shadow: 0 0 0 1px #f0c14b55, 0 4px 18px #0009, 0 0 22px #f0c14b22;
}
.topbar .titles { flex: 1; min-width: 0; }
h1 { font-size: 21px; font-weight: 700; letter-spacing: 0.06em; margin: 0; }
h1 .room-code { color: var(--accent-2); }
.sub { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 4px 0 18px; }

.icon-btn {
  width: 38px; height: 38px; padding: 0; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(20, 24, 34, 0.85) !important;
  border: 1px solid var(--line) !important;
}
.icon-btn:hover { border-color: var(--accent) !important; }

/* ---------- panels & controls ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
input, select, button {
  background: #12151f; color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px; font-size: 14px;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #e0b45c22; }
button { cursor: pointer; background: #262e40; }
button:hover { background: #323b52; transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.primary {
  background: linear-gradient(160deg, #f0c14b, #d19a3d);
  color: #241a06; font-weight: 700; border: none;
  box-shadow: 0 4px 16px rgba(240, 193, 75, 0.28);
}
button.primary:hover { filter: brightness(1.07); box-shadow: 0 6px 20px rgba(240, 193, 75, 0.38); }
button:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }
.err { color: var(--bad); font-size: 13px; min-height: 18px; }

.layout { display: grid; grid-template-columns: minmax(280px, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }

/* ---------- banner & timer ---------- */
.banner {
  margin-bottom: 4px; padding: 11px 14px; border-radius: 11px;
  background: linear-gradient(90deg, #22301e, #1d2819);
  border: 1px solid #3a5232;
  color: #d6ecb9; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em;
}
.banner.p2 {
  background: linear-gradient(90deg, #40300f, #2f2308);
  border-color: #6b531d;
  color: #f5d78b;
  animation: bannerGlow 2.2s ease-in-out infinite;
}
.banner.end { background: linear-gradient(90deg, #3c1f1c, #2c1613); border-color: #6b3227; color: #f5b3aa; }
.banner.motion { background: linear-gradient(90deg, #1c2438, #151b2b); border-color: #33415f; color: #b9cdf0; }
.banner.charge {
  background: linear-gradient(90deg, #4a3810, #2a2108);
  border-color: #f0c14b;
  color: #ffe9a8;
  animation: bannerGlow 1.1s ease-in-out infinite;
}
.hit-recap {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #3a1f1c;
  border: 1px solid #6b3227;
  color: #ffc9c0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
@keyframes bannerGlow { 50% { box-shadow: 0 0 20px rgba(240, 193, 75, 0.25); } }

.tbar { height: 5px; border-radius: 99px; background: #141822; overflow: hidden; margin: 6px 2px 12px; }
.tfill {
  height: 100%; width: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #6bd46b, #a8e07a);
  transition: width 0.25s linear;
}
.tfill.low { background: linear-gradient(90deg, #f07167, #f0a14b); animation: blink 0.8s step-end infinite; }
@keyframes blink { 50% { opacity: 0.55; } }

/* ---------- board ---------- */
.board-wrap { overflow: auto; }
.board-stage { position: relative; width: max-content; margin: 0 auto; }
.board {
  display: grid;
  gap: 3px;
  width: max-content;
  margin: 0 auto;
  padding: 10px;
  border-radius: 14px;
  background: rgba(10, 12, 19, 0.66);
  border: 1px solid #262d3f;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.cell {
  width: 48px; height: 48px; border-radius: 7px; background: var(--cell);
  position: relative; display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: filter 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.cell.floor {
  background:
    radial-gradient(circle at 32% 26%, #2b3346 0%, #222939 62%),
    #222939;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 5px rgba(0, 0, 0, 0.35);
}
.cell.floor:hover { filter: brightness(1.18); }
.cell.wall {
  background:
    linear-gradient(145deg, #454f66 0%, #2c3345 55%, #232a3a 100%);
  cursor: not-allowed;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.09), inset 0 -3px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #525d75;
}
.wall-icon {
  position: absolute;
  font-size: 17px;
  font-weight: 800;
  color: #99a2b8;
  text-shadow: 0 1px 0 #000;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}
.cell.door {
  background: radial-gradient(circle at 50% 50%, #57431a 0%, #33280f 70%);
  box-shadow: inset 0 0 0 2px var(--door), 0 0 16px #d4a65666;
  overflow: hidden;
}
.cell.door::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #f0c14b, #7a5c14, #ffe9a8, #7a5c14, #f0c14b);
  opacity: 0.85;
  animation: spin 3.2s linear infinite;
}
.cell.door::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, #f0c14b 40%, #6b531d 100%);
  box-shadow: 0 0 14px #f0c14b;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cell.door.glow { animation: pulse 1.4s ease-in-out infinite; }
.cell.door.charging {
  box-shadow: inset 0 0 0 2px #fff6c8, 0 0 28px #f0c14bcc;
  animation: pulse 0.7s ease-in-out infinite;
}
.cell.door-ring {
  box-shadow: 0 0 16px #f0c14b99, inset 0 0 0 1px #f0c14b77;
  animation: doorFlash 1.15s ease-in-out infinite;
}
.cell.door-ring.door-hold {
  box-shadow: 0 0 18px #e85d4c99, inset 0 0 0 2px #e85d4caa;
  animation: none;
}
.cell-zone {
  position: absolute; right: 2px; top: 2px; z-index: 2;
  font-size: 10px; color: #ffe08a; text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.cell.door-hold .cell-zone { color: #ff8a7a; font-weight: 700; }
@keyframes doorFlash {
  50% { box-shadow: 0 0 26px #ffe08a, inset 0 0 10px #f0c14b55; filter: brightness(1.18); }
}
.cell.slow {
  background:
    repeating-linear-gradient(90deg, #1a2c34 0 6px, #163038 6px 12px);
  box-shadow: inset 0 0 0 1px #3d6a7a88;
}
.cell.ring-warn {
  box-shadow: inset 0 0 0 2px #e8a05a99;
}
.cell.ring-warn .cell-terrain.haz { color: #ffd19a; opacity: 0.85; }
.cell-terrain {
  position: absolute; left: 3px; bottom: 2px; font-size: 11px; opacity: 0.9;
  pointer-events: none; z-index: 1; text-shadow: 0 1px 4px #000;
}
.cell-terrain.haz { right: 3px; left: auto; color: #ffb4a4; }
.cell.reach { outline: 1px dashed #6bd46b88; outline-offset: -2px; }
.cell.adj { outline: 2px solid #6bd46b; outline-offset: -1px; }
.cell.adj:hover { box-shadow: 0 0 14px #6bd46b55; }
.cell.here { box-shadow: inset 0 0 0 2px #ffffff88, 0 0 10px #ffffff22; }
.cell.dest { outline: 3px solid var(--accent); background: #3a3220; z-index: 2; }
.cell.ram { outline: 3px solid #e85d4c; background: #3a2020; z-index: 2; }
.cell.dest2 { outline: 3px dashed var(--accent); }
.cell.fog {
  background:
    repeating-linear-gradient(-45deg, #07080d 0 10px, #0e1119 10px 20px);
  cursor: default;
  box-shadow: inset 0 0 18px #000d;
}
.cell.fog::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed #1e2432;
  border-radius: 5px;
  opacity: 0.6;
  pointer-events: none;
}
.cell.dim { filter: brightness(0.52) saturate(0.65); }
.cell.core {
  background:
    radial-gradient(circle at 50% 42%, #2e5b3a 0 30%, #1d3325 72%);
  box-shadow: inset 0 0 0 1px #8fd18f55, inset 0 0 14px #6bd46b22;
}
.cell.core-hub {
  box-shadow: inset 0 0 0 2px #cfe8b8, 0 0 16px #6bd46b66;
  animation: corePulse 2.4s ease-in-out infinite;
}
.cell.beacon {
  box-shadow: inset 0 0 0 2px #9fd4ff, 0 0 20px #4aa3e888;
  animation: corePulse 1.6s ease-in-out infinite;
}
.cell.aim { outline: 2px solid #e85d4c; outline-offset: -2px; background: #3a2024; }
.cell.ghost-crash { outline: 2px solid #f07167; box-shadow: inset 0 0 12px #e85d4c55; }
.cell.ghost-unk { outline: 2px dashed #97a08c; }
.cell.ghost-haz { box-shadow: inset 0 0 0 2px #ffb4a4; }
@keyframes corePulse { 50% { box-shadow: inset 0 0 0 2px #eaf7e0, 0 0 24px #6bd46b99; } }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 2px var(--door), 0 0 22px #f0c14baa; } }

.cell-mark {
  position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--accent); white-space: nowrap;
  text-shadow: 0 1px 2px #000; z-index: 3;
}
.cell-mark.ram-mark { color: var(--bad); }
.cell-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; pointer-events: none; z-index: 2; text-shadow: 0 2px 6px #000; }
.cell-core { position: absolute; top: 1px; right: 3px; font-size: 10px; font-weight: 700; color: #a8e6a8; text-shadow: 0 1px 2px #000; z-index: 3; }
.cell-trap { position: absolute; top: 1px; left: 3px; font-size: 11px; z-index: 3; text-shadow: 0 1px 2px #000; }

/* ---------- tokens ---------- */
.token {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: #10131a;
  box-shadow: 0 2px 7px #0008, inset 0 2px 3px rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  position: relative;
  z-index: 4;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}
.token.you { box-shadow: 0 0 0 2.5px #fff, 0 2px 8px #0009, inset 0 2px 3px rgba(255,255,255,0.35); }
.token.dead { opacity: 0.22; filter: grayscale(1); }
.token.charge { animation: pulse 1s ease-in-out infinite; }
.token.bounty::after {
  content: "◆";
  position: absolute;
  top: -11px;
  font-size: 10px;
  color: #f0c14b;
  text-shadow: 0 0 8px #f0c14b;
  pointer-events: none;
}
.fx-layer .token.ghost {
  position: absolute;
  opacity: 0.42;
  filter: saturate(0.35);
  box-shadow: 0 0 0 2px #ffffffaa, 0 0 12px #fff4;
  z-index: 9;
  pointer-events: none;
}
.token.actor { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--accent-2); transform-origin: center; z-index: 6; }
.token.hit {
  box-shadow: 0 0 0 4px #ff6b5a, 0 0 24px #ff3d2e !important;
  filter: brightness(1.35) saturate(1.4);
  z-index: 7;
}
.token-hp {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 30px; height: 4px; border-radius: 99px; background: #00000090;
  overflow: hidden; box-shadow: 0 1px 2px #000;
}
.token-hp i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6bd46b, #a8e07a); }
.token-hp i.mid { background: linear-gradient(90deg, #e8c14a, #f0a14b); }
.token-hp i.low { background: linear-gradient(90deg, #f07167, #e85d4c); }
.stack { display: flex; }

/* ---------- side panel ---------- */
.side h2 { font-size: 12.5px; margin: 2px 0 8px; color: var(--muted); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.plist { list-style: none; padding: 0; margin: 0 0 14px; }
.plist li {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 6px 8px; border-radius: 8px; margin-bottom: 2px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid transparent;
}
.plist li.me { border-color: #e0b45c44; background: rgba(224, 180, 92, 0.07); }
.dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 6px currentColor; flex: none; }
.hp { font-variant-numeric: tabular-nums; color: var(--muted); margin-left: auto; }
.tag { font-size: 10.5px; padding: 1.5px 7px; border-radius: 99px; background: #2a3142; color: var(--muted); flex: none; }
.tag.ok { background: #243528; color: #8fd18f; }
.tag.warn { background: #3d3420; color: var(--accent); }

.gm {
  margin: 10px 0 14px;
  padding: 10px;
  border: 1px dashed #e0b45c66;
  border-radius: 10px;
  background: rgba(224, 180, 92, 0.07);
}
.gm h2 { color: var(--accent) !important; }
.gm-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-row button { font-size: 12px; padding: 6px 10px; }

.log {
  height: 280px; overflow-y: auto; background: rgba(9, 11, 17, 0.75); border-radius: 10px;
  border: 1px solid #202635;
  padding: 9px 10px; font-size: 12px; line-height: 1.45; color: #c9cfbd;
  scrollbar-width: thin; scrollbar-color: #39415a transparent;
}
.log.audit { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; white-space: pre-wrap; }
.log div { margin-bottom: 4px; animation: logIn 0.25s ease; }
@keyframes logIn { from { opacity: 0; transform: translateY(-3px); } }

.controls { margin-top: 12px; border-top: 1px dashed #2c3344; padding-top: 12px; }
.hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
.hint kbd {
  background: #1c2230; border: 1px solid #333c52; border-bottom-width: 2px;
  border-radius: 5px; padding: 0 5px; font-size: 11px; font-family: inherit;
}
.pick-line { text-align: center; font-size: 13.5px; margin: 6px 0; }
.dirpad { display: grid; grid-template-columns: repeat(3, 48px); gap: 4px; justify-content: center; margin: 8px 0; }
.dirpad button { width: 48px; height: 40px; padding: 0; font-size: 13px; }
.dirpad button.on, button.on { background: linear-gradient(160deg, #f0c14b, #d19a3d); color: #241a06; font-weight: 700; border-color: transparent; }

/* ---------- hand cards ---------- */
.hand { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.card-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px; align-items: center;
  min-width: 104px; text-align: left;
  padding: 7px 10px;
  border-left-width: 3px !important;
  background: #1a1f2d;
}
.card-btn .ci { grid-row: span 2; font-size: 19px; }
.card-btn .cn { font-weight: 700; font-size: 13px; }
.card-btn small { font-size: 10.5px; color: var(--muted); font-weight: 400; }
.card-btn.atk { border-left-color: #e85d4c; }
.card-btn.def { border-left-color: #4aa3e8; }
.card-btn.sk { border-left-color: #6bd46b; }
.card-btn:hover { background: #232a3c; }
.card-btn.on { background: linear-gradient(160deg, #f0c14b, #d19a3d); color: #241a06; border-left-color: #241a06; }
.card-btn.on small { color: #4a3a18; }

label.harvest { display: block; margin: 10px 0; font-size: 13.5px; cursor: pointer; }
label.harvest.off { opacity: 0.45; cursor: default; }
label.harvest input { accent-color: var(--accent); }

.locked-note {
  margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  background: #243528; border: 1px solid #3a5232; color: #9ed89e;
  font-size: 13px; text-align: center; font-weight: 600;
  animation: logIn 0.3s ease;
}

/* ---------- motion caption & fx ---------- */
.motion-caption {
  margin: -2px 0 12px; padding: 9px 14px; border-radius: 10px;
  background: #1e2433; border: 1px solid #33415f;
  color: #f3d48a; font-size: 15px; font-weight: 650;
  min-height: 24px; text-align: center; letter-spacing: 0.03em;
}
.motion-caption.is-fog { background: #14171f; border-color: #262d3d; color: #8b927e; font-weight: 600; }
.motion-tools { display: flex; gap: 8px; justify-content: center; margin: -4px 0 12px; }
.motion-tools button { font-size: 13px; }
.hl-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.hl-btn { text-align: left; font-size: 12.5px; }
.hl-btn.on { outline: 1px solid var(--accent); background: #3d3420; }
.end-stats .hp { font-size: 11px; }

.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: visible; }
.fx-card-banner {
  position: absolute; left: 50%; top: 6px;
  background: linear-gradient(160deg, #f0c14b, #d19a3d);
  color: #241a06; font-weight: 800; font-size: 18px; letter-spacing: 0.1em;
  padding: 6px 18px; border-radius: 11px;
  box-shadow: 0 6px 22px #000b, 0 0 24px #f0c14b44;
  z-index: 10;
}
.fx-card {
  position: absolute; background: #f3d48a; color: #241a06;
  font-weight: 800; font-size: 15px; padding: 4px 11px; border-radius: 8px;
  white-space: nowrap; box-shadow: 0 4px 16px #000a; z-index: 9;
}
.fx-burst {
  position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ffb14a 28%, #e85d4c 48%, transparent 70%);
  z-index: 7;
}
.fx-boom {
  position: absolute; font-size: 22px; font-weight: 900; color: #ffd0c6;
  text-shadow: 0 2px 10px #000, 0 0 16px #e85d4c;
  z-index: 11; white-space: nowrap;
}
.fx-hp {
  position: absolute; color: #ff6b5a; font-weight: 900; font-size: 22px;
  text-shadow: 0 2px 8px #000, 0 0 14px #ff3d2e;
  z-index: 12; white-space: nowrap;
}
.fx-beam {
  position: absolute; height: 8px;
  background: linear-gradient(90deg, #fff, #e85d4c);
  transform-origin: 0 50%; border-radius: 4px;
  box-shadow: 0 0 14px #e85d4c;
}
.fx-scout {
  position: absolute; width: 48px; height: 48px;
  border: 2px solid var(--accent-2); background: #f0c14b44; border-radius: 6px;
}
.fx-mine {
  position: absolute; width: 48px; height: 48px;
  display: grid; place-items: center; font-size: 20px;
  text-shadow: 0 0 10px #000;
}
.fx-shield {
  position: absolute; width: 40px; height: 40px;
  border: 3px solid var(--info); border-radius: 50%;
  box-shadow: 0 0 18px var(--info);
}
.fx-smoke {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle, #d0d4dc 0 40%, transparent 70%);
}
.fx-haste { position: absolute; width: 48px; height: 48px; border-radius: 6px; }
.fx-pillar {
  position: absolute;
  width: 16px;
  height: 150px;
  margin-left: -8px;
  margin-top: -138px;
  background: linear-gradient(180deg, #fffbe6 0%, #f0c14bcc 38%, #f0c14b00 100%);
  border-radius: 40px;
  box-shadow: 0 0 28px #f0c14baa, 0 0 8px #fff8;
  pointer-events: none;
  z-index: 7;
  animation: pulse 0.9s ease-in-out infinite;
}
.fx-block-line {
  position: absolute;
  height: 4px;
  background: linear-gradient(90deg, #e85d4c, #f0c14b);
  transform-origin: 0 50%;
  border-radius: 4px;
  box-shadow: 0 0 10px #e85d4c88;
  z-index: 8;
  pointer-events: none;
}
.fx-block-name {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 10px;
  font-weight: 700;
  color: #ffb4a4;
  text-shadow: 0 1px 4px #000;
  white-space: nowrap;
  z-index: 9;
  pointer-events: none;
}
.fx-card-banner.charge { background: linear-gradient(160deg, #ffe08a, #f0c14b); }
.fx-card-banner.ram { background: linear-gradient(160deg, #f07167, #e85d4c); color: #fff; }
.fx-core {
  position: absolute; color: #8fd18f; font-weight: 800; font-size: 16px;
  text-shadow: 0 2px 8px #000;
}
.fx-confetti {
  position: absolute; width: 7px; height: 11px; border-radius: 2px;
  z-index: 13; animation: confetti 1.15s ease-in forwards;
}
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); }
}

.board-legend { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.lg-wall, .lg-fog, .lg-dim, .lg-slow, .lg-haz { display: inline-block; padding: 1px 8px; border-radius: 4px; margin-right: 4px; color: var(--text); }
.lg-wall { background: linear-gradient(145deg, #454f66, #2c3345); box-shadow: inset 0 0 0 1px #525d75; }
.lg-fog { background: repeating-linear-gradient(-45deg, #07080d 0 6px, #0e1119 6px 12px); }
.lg-dim { background: #2a3142; filter: brightness(0.7); }
.lg-slow { background: #1a2c34; }
.lg-haz { background: #3a221c; color: #ffb4a4; }

.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 8px 0 10px; }
.shop button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 8px 10px; min-height: 58px;
}
.shop button b { font-size: 13px; }
.shop button small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.35; }

#gateForm { align-items: center; }
#gatePw { min-width: 220px; }

/* ---------- lobby ---------- */
.lobby-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.lobby-hero img {
  width: 92px; height: 92px; border-radius: 18px; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px #f0c14b55, 0 10px 30px #000a, 0 0 34px #f0c14b26;
}
.lobby-hero .big { font-size: 26px; font-weight: 800; letter-spacing: 0.08em; margin: 0 0 6px; background: linear-gradient(90deg, #f5d78b, #e0b45c 55%, #9ed89e); -webkit-background-clip: text; background-clip: text; color: transparent; }