/* In-game surface refresh: make every game panel feel like a table, not a form. */
.game-panel.active {
  animation: panel-rise 0.18s ease-out both;
}

@keyframes panel-rise {
  from {
    opacity: 0.72;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-head {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 24px rgba(18, 27, 24, 0.06);
}

.panel-head .status-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.board-frame {
  position: relative;
}

.board-frame canvas {
  border-radius: 10px;
}

/* Enhanced Gomoku board */
#panel-gomoku .wood {
  padding: 18px;
  border: 2px solid rgba(120, 75, 28, 0.48);
  background:
    linear-gradient(90deg, rgba(69, 39, 14, 0.11) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(135deg, #e5b46a, #b36b26 66%, #7a4219);
  box-shadow: inset 0 0 0 8px rgba(255, 245, 216, 0.14), 0 18px 34px rgba(58, 34, 13, 0.2);
}

#panel-gomoku #gomoku-board {
  max-width: min(100%, 660px);
  border: 1px solid rgba(58, 34, 13, 0.2);
  background: #e7b66e;
  box-shadow: 0 18px 28px rgba(58, 34, 13, 0.22);
}

/* Enhanced Draw canvas */
#panel-draw .score-strip {
  border-color: rgba(18, 65, 58, 0.12);
  background: linear-gradient(180deg, #fffdf8, #edf6f1);
}

#panel-draw .score-strip strong {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #0f6f5e;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 111, 94, 0.22);
}

#panel-draw .paper {
  padding: 14px;
  border: 1px solid rgba(24, 42, 38, 0.12);
  background:
    linear-gradient(90deg, rgba(20, 116, 95, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(0deg, rgba(20, 116, 95, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    #fffdf7;
}

#panel-draw #draw-board {
  border: 1px solid rgba(20, 116, 95, 0.12);
  background: #fffefa;
  box-shadow: 0 16px 30px rgba(28, 40, 36, 0.1);
}

#draw-tools,
#draw-pick-panel,
#draw-guess-box {
  background: rgba(255, 253, 247, 0.94);
}

#draw-tools input[type="color"] {
  width: 42px;
  height: 42px;
  padding: 3px;
  border-radius: 10px;
}

#draw-tools input[type="range"] {
  accent-color: var(--brand);
}

#panel-doudizhu .ddz-table,
.uno-table,
.mahjong-table {
  position: relative;
  overflow: hidden;
}

#panel-doudizhu .ddz-table::before,
.uno-table::before,
.mahjong-table::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 245, 199, 0.2);
  border-radius: 14px;
  pointer-events: none;
}

#panel-doudizhu .ddz-table > *,
.uno-table > *,
.mahjong-table > * {
  position: relative;
  z-index: 1;
}

#panel-doudizhu .ddz-center,
.uno-center,
.mj-center {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#panel-doudizhu .history,
#ddz-history.history {
  min-height: 42px;
  border-color: rgba(15, 111, 94, 0.13);
  background: rgba(255, 253, 247, 0.72);
}

.uno-table {
  padding: 16px;
  border: 2px solid rgba(244, 196, 109, 0.72);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.15), transparent 32%),
    linear-gradient(145deg, #292b31 0%, #17191f 56%, #090b0f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.18);
}

/* UNO card pulse animation for playable cards */
@keyframes uno-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255, 209, 102, 0); }
}

.uno-hand .uno-card[data-playable] {
  animation: uno-pulse 2s ease-in-out infinite;
}

.uno-players {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.uno-player {
  position: relative;
  min-height: 76px;
  padding: 12px 12px 10px 48px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(236, 238, 242, 0.86));
}

.uno-player::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 26px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 8px;
  background: conic-gradient(#d72638 0 25%, #f7b801 0 50%, #1b998b 0 75%, #2d7dd2 0);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.18);
}

.uno-player.active {
  border-color: #ffd166;
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.28), 0 12px 24px rgba(255, 209, 102, 0.12);
}

.uno-center {
  grid-template-columns: minmax(150px, 1fr) auto;
  min-height: 138px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(255, 255, 255, 0.08);
}

.uno-center > div:first-child {
  display: grid;
  gap: 8px;
}

.uno-card-stack {
  min-height: 116px;
}

.uno-card {
  border-radius: 13px;
  transform-origin: 50% 110%;
}

.uno-card span {
  font-size: 18px;
}

.uno-info {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.uno-info div {
  min-height: 58px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.13);
}

.uno-actions {
  align-items: center;
  min-height: 46px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.uno-actions button {
  min-width: 92px;
  background: linear-gradient(180deg, #27b7a4, #148276);
  box-shadow: 0 6px 0 rgba(6, 57, 53, 0.88);
}

.uno-declare {
  background: #fff5ca;
  color: #3a2700;
}

.uno-hand {
  min-height: 142px;
  padding: 18px 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  touch-action: pan-x;
}

.uno-hand .uno-card {
  margin-right: -22px;
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease;
}

.uno-hand .uno-card:nth-child(4n + 1) {
  transform: rotate(-7deg);
}

.uno-hand .uno-card:nth-child(4n + 2) {
  transform: translateY(-3px) rotate(-2deg);
}

.uno-hand .uno-card:nth-child(4n + 3) {
  transform: translateY(-2px) rotate(3deg);
}

.uno-hand .uno-card:nth-child(4n) {
  transform: rotate(7deg);
}

.uno-hand .uno-card[data-playable] {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
  filter: saturate(1.14);
}

.uno-hand .uno-card[data-playable]:hover {
  transform: translateY(-16px) rotate(0deg);
  filter: saturate(1.25) brightness(1.05);
}

.mahjong-table {
  padding: 16px;
  border: 2px solid rgba(244, 196, 109, 0.72);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(145deg, #10775a, #07392f 66%, #041f1c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 36px rgba(0, 0, 0, 0.18);
}

.mj-tile {
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fffef7, #e9debf 74%, #d1c098);
  color: #0f473d;
  box-shadow: inset 0 -4px 0 rgba(80, 64, 31, 0.12), 0 8px 12px rgba(0, 0, 0, 0.24);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.mj-hand .mj-tile:hover {
  transform: translateY(-10px);
  box-shadow: inset 0 -4px 0 rgba(80, 64, 31, 0.12), 0 14px 18px rgba(0, 0, 0, 0.28);
}

.mj-player {
  position: relative;
  min-height: 76px;
  padding: 12px 12px 10px 48px;
  border: 1px solid rgba(244, 196, 109, 0.28);
  background: rgba(255, 253, 247, 0.92);
}

.mj-player::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 26px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffdf4, #ddd2ba);
  box-shadow: inset 0 -3px 0 rgba(93, 73, 36, 0.18), 0 8px 12px rgba(0, 0, 0, 0.18);
}

.mj-player.active {
  border-color: #ffe08a;
  box-shadow: 0 0 0 3px rgba(244, 196, 109, 0.28), 0 12px 24px rgba(244, 196, 109, 0.12);
}

.mj-center {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(0, 0, 0, 0.16);
}

.mj-melds,
.mj-hand,
.mj-river {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.15);
}

.mj-hand {
  min-height: 82px;
  align-items: end;
}

.mj-tile {
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fffef7, #e9debf 74%, #d1c098);
  color: #0f473d;
  box-shadow: inset 0 -4px 0 rgba(80, 64, 31, 0.12), 0 8px 12px rgba(0, 0, 0, 0.24);
}

.mj-hand .mj-tile:hover {
  transform: translateY(-10px);
}

.mj-actions {
  align-items: center;
  min-height: 46px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.mj-actions button {
  min-width: 76px;
  background: linear-gradient(180deg, #fff0a8, #db982d);
  color: #503000;
  box-shadow: 0 6px 0 rgba(96, 56, 12, 0.9);
}

.chat-log {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 253, 247, 0.72)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(8, 47, 42, 0.05) 31px 32px);
}

@media (max-width: 760px), (max-height: 680px) {
  #panel-gomoku .wood,
  #panel-draw .paper,
  .uno-table,
  .mahjong-table {
    padding: 10px;
  }

  .uno-players,
  .mj-players {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uno-player,
  .mj-player {
    min-height: 62px;
    padding: 9px 9px 8px 42px;
  }

  .uno-player::before,
  .mj-player::before {
    left: 10px;
    top: 12px;
    width: 23px;
    height: 30px;
  }

  .uno-center {
    min-height: 112px;
  }

  .uno-info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uno-info div {
    min-height: 50px;
    padding: 7px 8px;
  }

  .uno-actions,
  .mj-actions {
    border-radius: 12px;
  }

  .uno-actions button,
  .mj-actions button {
    min-width: 76px;
    padding: 8px 12px;
  }

  .uno-hand {
    min-height: 118px;
    padding: 12px 14px;
  }

  .uno-hand .uno-card {
    margin-right: -18px;
  }
}

@media (max-width: 460px) {
  .uno-players,
  .mj-players,
  .uno-info {
    grid-template-columns: 1fr;
  }

  .uno-center,
  .mj-center {
    grid-template-columns: 1fr;
  }

  .uno-card {
    width: 54px;
    height: 80px;
  }

  .uno-hand .uno-card {
    margin-right: -20px;
  }

  .mj-hand,
  .mj-river {
    gap: 4px;
  }

  .mj-tile {
    width: 30px;
    height: 44px;
  }
}

.game-rematch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 14px;
  padding: 12px 13px 12px 15px;
  border: 1px solid rgba(52, 116, 95, 0.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 20%, rgba(239, 189, 105, 0.24), transparent 7rem),
    linear-gradient(135deg, #f1f7f3, #fffaf0);
  box-shadow: 0 8px 20px rgba(43, 73, 59, 0.07);
  animation: game-rematch-in 0.22s ease-out both;
}

.game-rematch-bar > span { display: grid; min-width: 0; gap: 3px; }
.game-rematch-bar strong { color: var(--brand-dark); font-size: 13px; }
.game-rematch-bar small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.game-rematch-bar button { flex: 0 0 auto; min-height: 38px; padding: 8px 15px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 900; cursor: pointer; box-shadow: 0 6px 14px rgba(52, 116, 95, 0.18); }
.game-rematch-bar button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
.game-rematch-bar button:disabled { cursor: wait; opacity: 0.68; }
.game-rematch-bar.is-pending { border-style: dashed; }

@keyframes game-rematch-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .game-rematch-bar { align-items: stretch; flex-direction: column; }
  .game-rematch-bar button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .game-rematch-bar { animation: none; }
}

/* 长坂文字阵：原创水墨文字合成塔防 */
.wordguard-panel-head { border-color: rgba(122, 67, 43, 0.18); background: linear-gradient(135deg, #fffdf4, #efe4cb); }
#wordguard-status { border-color: rgba(139, 66, 40, 0.2); background: #f7ead4; color: #773d2a; }

.chat-panel[hidden] { display: none; }

.wordguard-game {
  --wordguard-ink: #28231e;
  --wordguard-muted: #76695b;
  --wordguard-paper: #f4ecd8;
  --wordguard-path: #d7aaa0;
  --wordguard-field: #aac8bd;
  --wordguard-red: #a43c2e;
  position: relative;
  scroll-margin-top: 105px;
  width: min(100%, 590px);
  margin: 0 auto;
  padding: 16px;
  overflow: hidden;
  border: 2px solid #8f795d;
  border-radius: 18px;
  background: radial-gradient(circle at 18% 8%, rgba(52, 73, 62, 0.13), transparent 18%), radial-gradient(circle at 88% 72%, rgba(92, 54, 35, 0.1), transparent 22%), repeating-linear-gradient(7deg, rgba(64, 53, 41, 0.018) 0 2px, transparent 2px 7px), var(--wordguard-paper);
  color: var(--wordguard-ink);
  box-shadow: inset 0 0 0 5px rgba(255, 253, 242, 0.54), 0 22px 46px rgba(64, 45, 29, 0.2);
}
.wordguard-game::before,
.wordguard-game::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; opacity: .22; pointer-events: none; }
.wordguard-game::before { top: 94px; left: -42px; width: 130px; height: 82px; border: 9px double #647d69; transform: rotate(-18deg); }
.wordguard-game::after { right: -46px; bottom: 155px; width: 124px; height: 124px; border: 1px solid #805e46; box-shadow: 0 0 0 13px rgba(128,94,70,.12), 0 0 0 26px rgba(128,94,70,.08); }
.wordguard-game > * { position: relative; z-index: 1; }
.wordguard-title-ribbon { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: -16px -16px 10px; padding: 10px 17px; background: linear-gradient(90deg, #713329, #9d4733 58%, #683126); color: #f8e7b9; box-shadow: 0 5px 0 rgba(79,35,27,.18); }
.wordguard-title-ribbon span { padding: 3px 6px; border: 1px solid rgba(248,231,185,.55); font-family: KaiTi, STKaiti, serif; font-size: 12px; }
.wordguard-title-ribbon strong { font-family: KaiTi, STKaiti, serif; font-size: clamp(20px, 5vw, 30px); letter-spacing: .08em; text-align: center; text-shadow: 2px 2px 0 #3e1c17; }
.wordguard-title-ribbon small { font-size: 10px; opacity: .86; writing-mode: vertical-rl; }

.wordguard-hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 9px; }
.wordguard-hud > span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 5px; padding: 7px 9px; border: 1px solid rgba(86,65,45,.18); border-radius: 8px 2px 8px 2px; background: rgba(255,253,243,.78); box-shadow: inset 0 -2px 0 rgba(104,79,49,.08); }
.wordguard-hud small { color: var(--wordguard-muted); font-size: 10px; font-weight: 700; }
.wordguard-hud strong { overflow: hidden; font-family: Georgia, serif; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.wordguard-hud .wordguard-hearts strong { color: var(--wordguard-red); font-size: 14px; letter-spacing: 1px; }

.wordguard-wave-meter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.15fr); align-items: center; gap: 10px; margin: -1px 0 9px; padding: 7px 9px; border: 1px solid rgba(86,65,45,.2); border-radius: 8px; background: rgba(255,253,243,.76); }
.wordguard-wave-meter > span { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 7px; }
.wordguard-wave-meter strong { color: #6d3528; font-family: KaiTi, STKaiti, serif; font-size: 13px; white-space: nowrap; }
.wordguard-wave-meter small { overflow: hidden; color: var(--wordguard-muted); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.wordguard-wave-meter > i { position: relative; height: 10px; overflow: hidden; border: 1px solid #8f795d; border-radius: 999px; background: rgba(89,65,41,.14); box-shadow: inset 0 1px 2px rgba(45,33,23,.2); }
.wordguard-wave-meter > i > b { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #a33d30, #e0ac3e 74%, #f7df87); box-shadow: 0 0 8px rgba(224,172,62,.5); transition: width .2s ease; }

.wordguard-board { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border: 5px solid #756047; border-radius: 9px 9px 17px 9px; background: #dfd4bd; box-shadow: inset 0 0 18px rgba(48,38,28,.2), 0 13px 24px rgba(57,40,25,.18); }
.wordguard-board::after { content: "长坂"; position: absolute; z-index: 1; bottom: 2%; left: 38%; color: rgba(68,54,40,.1); font-family: KaiTi, STKaiti, serif; font-size: 52px; font-weight: 900; transform: rotate(-13deg); pointer-events: none; }
.wordguard-grid { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(9, 1fr); }
.wordguard-cell { position: relative; min-width: 0; min-height: 0; padding: 3px; overflow: visible; border: 1px solid rgba(53,61,52,.28); border-radius: 0; color: var(--wordguard-ink); }
.wordguard-cell.is-buildable { background: linear-gradient(145deg, rgba(255,255,255,.2), transparent 50%), var(--wordguard-field); cursor: pointer; }
.wordguard-cell.is-buildable:hover { z-index: 3; background: #bad7cc; box-shadow: inset 0 0 0 3px rgba(255,255,245,.5); }
.wordguard-cell.is-path { background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 54%), var(--wordguard-path); cursor: default; opacity: 1; }
.wordguard-cell.is-path::before,
.wordguard-cell.is-path::after { content: ""; position: absolute; background: rgba(91,56,43,.16); pointer-events: none; }
.wordguard-cell.is-path::before { top: 50%; right: 0; left: 0; height: 1px; }
.wordguard-cell.is-path::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.wordguard-path-mark { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(85,48,40,.25); font-family: KaiTi, STKaiti, serif; font-size: 22px; font-weight: 900; }

.wordguard-unit { position: relative; z-index: 5; display: grid; width: 100%; height: 100%; place-items: center; border: 1px solid #817461; border-radius: 4px 1px 5px 2px; background: linear-gradient(155deg, #fffef8, #e9dfc9); color: var(--unit-ink); box-shadow: 2px 3px 0 rgba(72,57,42,.2), inset 0 0 0 2px rgba(255,255,255,.56); transform: rotate(-1.5deg); transition: transform .13s ease, box-shadow .13s ease; }
.wordguard-cell:nth-child(4n) .wordguard-unit { transform: rotate(1.4deg); }
.wordguard-unit-char { font-family: KaiTi, STKaiti, serif; font-size: clamp(21px, 7vw, 43px); font-weight: 900; line-height: 1; text-shadow: 1px 1px 0 rgba(255,255,255,.75); }
.wordguard-unit > i { position: absolute; top: 2px; right: 3px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--unit-ink); color: #fff9e8; font: 800 9px/1 sans-serif; }
.wordguard-unit > small { position: absolute; right: 2px; bottom: 1px; left: 2px; padding: 1px; overflow: hidden; background: rgba(255,252,239,.82); font-size: 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.wordguard-unit.is-selected { outline: 3px solid #f2b735; outline-offset: -1px; box-shadow: 0 0 0 4px rgba(242,183,53,.25), 2px 4px 0 rgba(72,57,42,.24); transform: translateY(-3px) rotate(0); }
.wordguard-unit.is-hero { border: 2px solid var(--unit-ink); background: radial-gradient(circle at 50% 38%, #fffdf2, #e5d6b7); }
.wordguard-unit.is-hero::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--unit-ink) 40%, transparent); border-radius: 50%; }
.wordguard-unit.is-attacking { animation: wordguard-attack .16s ease-out; }
@keyframes wordguard-attack { 50% { filter: brightness(1.45); transform: scale(1.12) rotate(-2deg); } }

.wordguard-enemies,
.wordguard-effects { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.wordguard-effects { z-index: 12; }
.wordguard-enemy { position: absolute; display: grid; width: 9.5%; aspect-ratio: 1; place-items: center; border: 2px solid #3c2721; border-radius: 44% 35% 47% 31%; background: #b54b3c; color: #fff3d1; box-shadow: 3px 4px 0 rgba(46,30,25,.28); transform: translate(-50%, -50%) rotate(3deg); }
.wordguard-enemy::after { content: ""; position: absolute; right: -7px; bottom: -4px; width: 15px; height: 8px; border-bottom: 3px solid #2c2420; border-radius: 50%; transform: rotate(-28deg); }
.wordguard-enemy > i { position: absolute; top: -8px; left: -2px; width: calc(100% + 4px); height: 5px; border: 1px solid #3c2721; background: linear-gradient(90deg, #a9352d var(--enemy-hp), #ded0b7 var(--enemy-hp)); }
.wordguard-enemy strong { font-family: KaiTi, STKaiti, serif; font-size: clamp(13px, 4vw, 25px); }
.wordguard-enemy small { position: absolute; top: 100%; font-size: 7px; color: #542b22; white-space: nowrap; }
.wordguard-enemy.type-盾 { border-radius: 8px; background: #75695e; }
.wordguard-enemy.type-骑 { background: #874439; transform: translate(-50%, -50%) rotate(-8deg) scale(.92); }
.wordguard-enemy.is-boss { width: 13%; border-width: 3px; background: #7f211f; box-shadow: 0 0 0 4px rgba(189,74,50,.25), 4px 5px 0 rgba(46,30,25,.3); }
.wordguard-enemy.is-stunned { filter: saturate(.55) brightness(1.15); box-shadow: 0 0 0 4px rgba(67,117,155,.34), 3px 4px 0 rgba(46,30,25,.28); }
.wordguard-enemy > em { position: absolute; z-index: 3; top: -15px; right: -9px; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #234f6f; border-radius: 50%; background: #e8f5ff; color: #234f6f; font: 900 11px/1 KaiTi, STKaiti, serif; box-shadow: 0 2px 4px rgba(37,65,84,.24); }
.wordguard-effects > span { position: absolute; padding: 3px 6px; border: 1px solid #5f412e; border-radius: 4px; background: #fff5ce; color: #9b3026; font-family: KaiTi, STKaiti, serif; font-size: 15px; font-weight: 900; animation: wordguard-effect .78s ease-out both; transform: translate(-50%, -50%); }
@keyframes wordguard-effect { to { opacity: 0; transform: translate(-50%, -130%) scale(1.25); } }

.wordguard-adou { position: absolute; z-index: 10; right: .8%; bottom: .6%; display: grid; width: 14%; aspect-ratio: 1; place-items: center; border: 3px double #77572f; border-radius: 50% 50% 43% 43%; background: #f5d97f; color: #65401f; box-shadow: 0 0 0 4px rgba(255,246,194,.55), 0 6px 0 rgba(72,52,26,.2); pointer-events: none; }
.wordguard-adou span { position: absolute; top: -13px; padding: 2px 5px; border-radius: 3px; background: #7f352a; color: #fff1c5; font-size: 8px; }
.wordguard-adou strong { font-family: KaiTi, STKaiti, serif; font-size: clamp(20px, 6vw, 38px); }

.wordguard-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.wordguard-controls button { min-width: 0; min-height: 42px; padding: 7px 6px; border: 1px solid #8d7657; border-radius: 7px 3px 7px 3px; background: linear-gradient(180deg, #fffdf2, #e5d6b7); color: #5b4431; font-size: 10px; font-weight: 900; box-shadow: 0 4px 0 rgba(89,65,41,.18); cursor: pointer; }
.wordguard-controls button.primary { background: linear-gradient(180deg, #b45039, #823528); color: #fff3d2; }
.wordguard-controls button:disabled { cursor: not-allowed; filter: grayscale(.4); opacity: .46; box-shadow: none; }
.wordguard-controls .wordguard-recruit { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 4px; background: linear-gradient(180deg, #f2cc65, #cf963c); color: #4d2f18; }
.wordguard-recruit span { grid-row: 1 / 3; font-family: KaiTi, STKaiti, serif; font-size: 18px; }
.wordguard-recruit strong { font-size: 12px; }
.wordguard-recruit small { font-size: 9px; }
#wordguard-meteor { background: linear-gradient(180deg, #55505d, #2d2932); color: #fff1ca; }
.wordguard-controls .wordguard-rescue { --rescue-charge: 0%; position: relative; display: grid; overflow: hidden; place-items: center; gap: 1px; border-color: #366f91; background: linear-gradient(180deg, #e7f5fc, #b9d7e8); color: #244f69; isolation: isolate; }
.wordguard-rescue::before { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: var(--rescue-charge); background: linear-gradient(0deg, #2b648a, #6caccb); opacity: .88; transition: height .2s ease; }
.wordguard-rescue span { font-family: KaiTi, STKaiti, serif; font-size: 13px; font-weight: 900; }
.wordguard-rescue small { font-size: 9px; font-weight: 800; }
.wordguard-rescue.is-ready { border-color: #d4a22d; background: #fff1a6; color: #fff9dd; box-shadow: 0 0 0 3px rgba(231,185,62,.24), 0 4px 0 rgba(89,65,41,.18); animation: wordguard-rescue-ready .8s ease-in-out infinite alternate; }
@keyframes wordguard-rescue-ready { to { filter: brightness(1.15); box-shadow: 0 0 0 5px rgba(231,185,62,.3), 0 4px 0 rgba(89,65,41,.18); } }

.wordguard-lower { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 9px; }
.wordguard-selection { display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px; border: 1px solid rgba(95,72,49,.2); border-radius: 7px; background: rgba(255,253,242,.74); }
.wordguard-seal { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid #9e4334; color: #9e4334; font-family: KaiTi, STKaiti, serif; font-size: 19px; font-weight: 900; transform: rotate(-5deg); }
.wordguard-selection > div { display: grid; min-width: 0; gap: 2px; }
.wordguard-selection strong { font-family: KaiTi, STKaiti, serif; font-size: 13px; }
.wordguard-selection small { overflow: hidden; color: var(--wordguard-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wordguard-record { display: grid; grid-template-columns: repeat(2, auto); gap: 5px; padding: 6px; border: 1px solid rgba(95,72,49,.2); border-radius: 7px; background: rgba(229,213,182,.55); }
.wordguard-record > span { display: grid; min-width: 52px; justify-items: center; }
.wordguard-record small { color: var(--wordguard-muted); font-size: 9px; }
.wordguard-record strong { font-size: 14px; }
.wordguard-record button { grid-column: 1 / -1; padding: 4px; border: 0; border-top: 1px dashed rgba(95,72,49,.25); background: transparent; color: #82412f; font-size: 8px; cursor: pointer; }
.wordguard-guide { margin-top: 8px; border: 1px solid rgba(95,72,49,.18); border-radius: 7px; background: rgba(255,253,243,.6); }
.wordguard-guide summary { padding: 8px 9px; color: #674d37; font-size: 10px; font-weight: 800; cursor: pointer; }
.wordguard-recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 0 8px 8px; }
.wordguard-recipes span { padding: 6px; border-radius: 4px; background: #ece2cd; font-size: 9px; text-align: center; }
.wordguard-recipes b { font-family: KaiTi, STKaiti, serif; font-size: 12px; }
.wordguard-recipes strong { color: #963c2f; }

.wordguard-overlay { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(34,27,22,.68); backdrop-filter: blur(2px); }
.wordguard-overlay[hidden] { display: none; }
.wordguard-scroll-card { width: min(100%, 470px); padding: 22px; border: 5px double #796044; border-radius: 5px 15px 5px 15px; background: linear-gradient(100deg, #e5d2ad, #fff8df 12% 88%, #ddc59d); box-shadow: 0 20px 45px rgba(20,14,10,.4); }
.wordguard-scroll-card > p { margin: 0; color: #a04532; font-family: KaiTi, STKaiti, serif; font-size: 14px; font-weight: 900; letter-spacing: .16em; text-align: center; }
.wordguard-scroll-card > h3 { margin: 5px 0 14px; font-family: KaiTi, STKaiti, serif; font-size: 24px; text-align: center; }
.wordguard-skill-choices { display: grid; gap: 7px; }
.wordguard-skill-choices button { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 9px; padding: 8px; border: 1px solid #9d8060; border-radius: 5px; background: rgba(255,253,239,.78); color: #3f3023; text-align: left; cursor: pointer; }
.wordguard-skill-choices button:hover { border-color: #ad4432; transform: translateX(3px); }
.wordguard-skill-choices i { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid #a04532; color: #a04532; font-family: KaiTi, STKaiti, serif; font-size: 20px; font-style: normal; }
.wordguard-skill-choices span { display: grid; gap: 2px; }
.wordguard-skill-choices strong { font-family: KaiTi, STKaiti, serif; font-size: 15px; }
.wordguard-skill-choices small { color: #665848; font-size: 10px; line-height: 1.45; }
.wordguard-over-card { display: grid; justify-items: center; }
.wordguard-over-card > strong { margin-bottom: 14px; color: #6c4b35; }
.wordguard-over-card button { min-width: 140px; padding: 10px 18px; border: 1px solid #6d2d25; border-radius: 5px; background: #9c3e30; color: #fff1ce; font-weight: 900; cursor: pointer; }
.wordguard-game.meteor-strike .wordguard-board { animation: wordguard-meteor .42s ease-out; }
@keyframes wordguard-meteor { 20% { filter: sepia(1) brightness(1.45); transform: translate(-3px, 2px); } 42% { transform: translate(3px, -2px); } 70% { transform: translate(-2px, 1px); } }
.wordguard-game.is-rescue-strike .wordguard-board { animation: wordguard-rescue-strike .62s ease-out; }
.wordguard-game.is-rescue-strike .wordguard-adou { animation: wordguard-adou-saved .62s ease-out; }
@keyframes wordguard-rescue-strike { 20% { filter: brightness(1.55) saturate(1.5); box-shadow: inset 0 0 40px rgba(72,153,203,.65), 0 0 0 6px rgba(72,153,203,.28); } 45% { transform: translateX(-3px); } 68% { transform: translateX(3px); } }
@keyframes wordguard-adou-saved { 35% { box-shadow: 0 0 0 12px rgba(255,231,111,.4), 0 6px 0 rgba(72,52,26,.2); transform: scale(1.16); } }

@media (max-width: 760px), (max-height: 680px) {
  .wordguard-game { padding: 10px; border-radius: 13px; }
  .wordguard-title-ribbon { margin: -10px -10px 8px; padding: 8px 11px; }
  .wordguard-hud { gap: 3px; }
  .wordguard-hud > span { padding: 5px 6px; }
  .wordguard-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wordguard-controls .wordguard-recruit { grid-column: span 2; }
  .wordguard-lower { grid-template-columns: 1fr; }
  .wordguard-record { grid-template-columns: repeat(3, 1fr); }
  .wordguard-record button { grid-column: auto; border-top: 0; border-left: 1px dashed rgba(95,72,49,.25); }
}

@media (max-width: 430px) {
  .wordguard-hud > span { display: grid; justify-items: center; gap: 1px; }
  .wordguard-title-ribbon span { display: none; }
  .wordguard-title-ribbon { grid-template-columns: 1fr auto; }
  .wordguard-wave-meter { grid-template-columns: 1fr; gap: 5px; }
  .wordguard-unit-char { font-size: clamp(19px, 8vw, 33px); }
  .wordguard-recipes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .wordguard-unit.is-attacking,
  .wordguard-effects > span,
  .wordguard-game.meteor-strike .wordguard-board,
  .wordguard-game.is-rescue-strike .wordguard-board,
  .wordguard-game.is-rescue-strike .wordguard-adou,
  .wordguard-rescue.is-ready { animation: none; }
}

.wordguard-unit { touch-action: none; }
.wordguard-unit.is-pressed { filter: brightness(1.08); }
.wordguard-unit.is-drag-source { opacity: .28; }
.wordguard-cell.is-drop-target { z-index: 9; background: #f3d87d; box-shadow: inset 0 0 0 4px #b85438, 0 0 0 3px rgba(255,244,191,.7); }
.wordguard-drag-ghost { position: absolute; z-index: 24; width: calc(100% / 6 - 6px); height: calc(100% / 9 - 6px); pointer-events: none; opacity: .92; filter: drop-shadow(0 10px 8px rgba(49,34,22,.3)); transform: translate(-50%, -50%) rotate(3deg) scale(1.06) !important; }

.wordguard-shot { position: absolute; z-index: 2; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--shot-color), #fff1a3); box-shadow: 0 0 5px var(--shot-color); transform-origin: left center !important; animation: wordguard-shot .28s ease-out both; }
.wordguard-shot.is-hero-shot { height: 5px; box-shadow: 0 0 9px var(--shot-color), 0 0 15px rgba(255,231,136,.7); }
.wordguard-damage { position: absolute; z-index: 4; color: #8f2722; font: 900 10px/1 Georgia, serif; text-shadow: 1px 1px 0 #fff1cb; animation: wordguard-damage .35s ease-out both; transform: translate(-50%, -50%); }
@keyframes wordguard-shot { from { opacity: 1; clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0); } to { opacity: 0; clip-path: inset(0); } }
@keyframes wordguard-damage { to { opacity: 0; transform: translate(-50%, -150%) scale(1.2); } }

.wordguard-boss-alert { position: absolute; z-index: 18; top: 35%; right: 5%; left: 5%; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 10px 12px; border: 4px solid transparent; border-image: repeating-linear-gradient(45deg, #e4bd39 0 8px, #29221c 8px 16px) 4; background: rgba(255,247,218,.96); color: #3f2b22; box-shadow: 0 16px 32px rgba(43,28,21,.34); }
.wordguard-boss-alert[hidden] { display: none; }
.wordguard-boss-alert > span { padding: 3px 5px; background: #9f342c; color: #fff1c5; font-size: 8px; font-weight: 900; }
.wordguard-boss-alert strong { color: #a1332b; font-family: KaiTi, STKaiti, serif; font-size: 25px; }
.wordguard-boss-alert small { font-size: 9px; line-height: 1.45; }
.wordguard-boss-alert.is-showing { animation: wordguard-warning 3.2s ease both; }
@keyframes wordguard-warning { 0% { opacity: 0; transform: translateX(20px) scale(.94); } 8%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-16px); } }
.wordguard-board.is-soul-stunned .wordguard-unit:not(.is-hero) { filter: grayscale(1) contrast(.72); animation: wordguard-confused .34s ease-in-out infinite alternate; }
.wordguard-board.is-soul-stunned .wordguard-unit:not(.is-hero)::after { content: "乱"; position: absolute; z-index: 4; top: 30%; padding: 2px 4px; border-radius: 50%; background: #4b4052; color: #fff; font: 900 10px/1 KaiTi, serif; }
@keyframes wordguard-confused { to { transform: translateX(2px) rotate(3deg); } }
.wordguard-board.is-haste-active { box-shadow: inset 0 0 24px rgba(244,190,57,.42), 0 0 0 4px rgba(244,190,57,.22), 0 13px 24px rgba(57,40,25,.18); }

.wordguard-items { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; padding: 6px; border: 1px solid rgba(95,72,49,.2); border-radius: 8px; background: rgba(226,210,178,.62); }
.wordguard-items > span { align-self: center; padding: 3px 6px; border: 1px solid #9a4938; color: #9a4938; font-family: KaiTi, STKaiti, serif; font-size: 11px; font-weight: 900; writing-mode: vertical-rl; }
.wordguard-items button { position: relative; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 4px; min-width: 0; min-height: 34px; padding: 4px 19px 4px 5px; border: 1px solid rgba(109,79,49,.28); border-radius: 5px; background: linear-gradient(155deg, #fffbed, #dfcfad); color: #59412f; cursor: pointer; }
.wordguard-items button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .42; }
.wordguard-items i { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #8c4937; border-radius: 50%; color: #8c4937; font-family: KaiTi, STKaiti, serif; font-size: 13px; font-style: normal; font-weight: 900; }
.wordguard-items strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.wordguard-items small { position: absolute; top: 3px; right: 4px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #7d342b; color: #fff4cf; font-size: 8px; }

.wordguard-odds-card { position: relative; }
.wordguard-odds-card > button { position: absolute; top: 7px; right: 9px; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #3e775d; font-size: 27px; font-weight: 900; cursor: pointer; }
.wordguard-odds-card > small { display: block; margin: 10px 0; color: #6f604f; font-size: 10px; line-height: 1.45; text-align: center; }
.wordguard-odds-list { display: grid; gap: 6px; }
.wordguard-odds-list > span { display: grid; grid-template-columns: 38px minmax(0, 1fr) 46px; align-items: center; gap: 7px; }
.wordguard-odds-list b { font-family: KaiTi, STKaiti, serif; font-size: 16px; }
.wordguard-odds-list i { height: 8px; overflow: hidden; border: 1px solid #a98d66; border-radius: 999px; background: linear-gradient(90deg, #9e4334 var(--odds), rgba(125,99,66,.12) var(--odds)); }
.wordguard-odds-list strong { font: 800 10px/1 Georgia, serif; text-align: right; }
.wordguard-odds-list small { grid-column: 2 / -1; margin-top: -5px; color: #786957; font-size: 9px; }
.wordguard-odds-list p { margin: 3px 0 0; padding: 7px; border: 1px dashed #9e4334; color: #84372d; font-size: 9px; text-align: center; }
.wordguard-roster { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #bda682; border-left: 1px solid #bda682; }
.wordguard-roster span { display: grid; min-height: 36px; place-items: center; border-right: 1px solid #bda682; border-bottom: 1px solid #bda682; font-family: KaiTi, STKaiti, serif; font-size: 19px; font-weight: 900; }

@media (max-width: 520px) {
  .wordguard-items { grid-template-columns: auto repeat(2, minmax(0, 1fr)); }
  .wordguard-items > span { grid-row: span 2; }
  .wordguard-boss-alert { grid-template-columns: auto 1fr; }
  .wordguard-boss-alert small { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .wordguard-shot,
  .wordguard-damage,
  .wordguard-boss-alert.is-showing,
  .wordguard-board.is-soul-stunned .wordguard-unit:not(.is-hero) { animation: none; }
}