/* higu-inspired classic style */
:root {
  --bg: #fcfdfe;
  --line: #e3edf5;
  --line-strong: #6eb1d5;
  --primary: #09c;
  --text: #444;
  --muted: #999;
  --panel: #f7f7f7;
  --warn: #f60;
}

* {
  box-sizing: border-box;
  word-wrap: break-word;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65em Verdana, Helvetica, Arial, sans-serif;
  text-align: left;
}

a {
  color: #222;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  width: 1120px;
  margin: 0 auto;
}

#header {
  width: 100%;
  min-width: 1120px;
  margin-bottom: 8px;
}

#header .wrap {
  position: relative;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--line);
}

#header h2 {
  margin: 0;
  color: var(--primary);
  font-size: 22px;
  font-weight: 700;
}

#umenu {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#umenu .lighttxt {
  white-space: nowrap;
}

.pill {
  display: inline-block;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #245;
  border-radius: 999px;
  padding: 0 8px;
  font-weight: 700;
}

.pill[data-mode='http'] {
  color: #204a87;
  border-color: #5c9ecf;
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lang-select {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #245;
  border-radius: 4px;
  padding: 1px 6px;
  min-height: 28px;
  min-width: 62px;
  cursor: pointer;
  font-size: 13px;
}

.lang-select:hover {
  background: #f2fbff;
}

.lang-select:focus-visible {
  border-color: var(--primary);
  color: #046;
  background: #eaf8ff;
}

.sound-toggle-btn {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #245;
  border-radius: 4px;
  padding: 1px 8px;
  min-height: 28px;
  min-width: 36px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.sound-toggle-btn:hover {
  background: #f2fbff;
}

.sound-toggle-btn:focus-visible {
  border-color: var(--primary);
  color: #046;
  background: #eaf8ff;
}

.sound-toggle-btn[aria-pressed="false"] {
  color: var(--muted);
  background: #f5f5f5;
}

.menu-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.room-menu-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.room-back-lobby-btn {
  margin-top: 10px;
}

.auto-refresh-controls {
  margin-top: 10px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #555;
  white-space: nowrap;
}

.tab {
  border: 1px solid var(--line);
  background: #fff;
  color: #666;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow-wrap: normal;
}

.tab.current {
  border-color: var(--primary);
  color: var(--primary);
  background: #f2f7fb;
  font-weight: 700;
}

#wrap {
  clear: both;
  min-height: 450px;
  padding-bottom: 10px;
}

.panel {
  display: block;
}

.hidden {
  display: none;
}

fieldset {
  border: 1px solid var(--line);
  margin: 0 0 12px;
  padding: 0;
  background: #fff;
  min-width: 0;
}

.panel-box {
  border: 1px solid var(--line);
  margin: 0 0 12px;
  padding: 0;
  background: #fff;
  min-width: 0;
}

legend {
  padding: 0 8px;
  color: var(--primary);
}

.panel-header {
  padding: 6px 8px;
  background: var(--panel);
  color: var(--primary);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.damage-meter {
  overflow-x: auto;
}

.damage-meter-grid {
  min-width: 860px;
  display: grid;
  grid-template-columns: 72px repeat(15, minmax(46px, 1fr));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-right: 0;
  background: #fff;
}

.damage-meter-row-label,
.damage-meter-cell {
  min-height: 44px;
  padding: 6px 4px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.damage-meter-row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f4f9fc;
  color: #356;
  font-weight: 700;
}

.damage-meter-cell {
  flex-wrap: wrap;
  align-content: center;
  background: #fff;
}

.damage-meter-scale-cell {
  font-weight: 700;
  color: #456;
  background: #fbfdff;
}

.damage-meter-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
}

.damage-meter-badge.shadow {
  color: #a61f34;
  background: #fdecef;
  border-color: #f1b9c3;
}

.damage-meter-badge.hunter {
  color: #0f4f93;
  background: #e8f2ff;
  border-color: #b7d3f5;
}

.damage-meter-badge.civilian {
  color: #8a6800;
  background: #fff7dd;
  border-color: #efd78c;
}

.damage-meter-player-chip {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.damage-meter-player-chip:hover,
.damage-meter-player-chip:focus-visible {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 2px rgba(26, 107, 204, 0.18);
  outline: none;
}

.card-body {
  padding: 12px;
}

.room-top-row {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}

.room-top-row.room-info-header {
  grid-template-columns: 1fr;
}

.room-top-row.room-info-header > fieldset {
  width: 100%;
}

.room-top-row.room-player-row {
  grid-template-columns: 1fr;
}

.room-top-row > fieldset {
  margin: 0;
}

.room-stage-row {
  margin-bottom: 12px;
}

.room-stage-row > fieldset {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.room-stage-row > fieldset > .card-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.room-chat-fieldset {
  display: flex;
  flex-direction: column;
}

.room-chat-fieldset .card-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.room-stage-surface {
  width: 100%;
  border: 1px dashed var(--line);
  background: #f8fbfe;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.room-chat-surface {
  height: 520px;
  min-height: 520px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #d7e4ef;
  border-radius: 4px;
  padding: 8px;
}

.chat-messages-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-messages-wrap .chat-messages {
  flex: 1;
}

.chat-scroll-bottom-btn {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 4px 14px;
  border: 1px solid var(--line-strong, #6eb1d5);
  border-radius: 999px;
  background: var(--primary, #09c);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(21, 49, 67, 0.25);
}

.chat-scroll-bottom-btn:hover {
  opacity: 0.9;
}

.chat-scroll-bottom-btn[hidden] {
  display: none !important;
}

.chat-line {
  display: block;
  margin-bottom: 8px;
  line-height: 1.45;
}

.chat-line:last-child {
  margin-bottom: 0;
}

.chat-line-self .chat-sender {
  color: #0f4f93;
}

.chat-line-system {
  color: #7f4f00;
  background: #fff8e8;
  border: 1px solid #f0dab0;
  border-radius: 4px;
  padding: 4px 6px;
  line-height: 1.5;
}

.chat-line-system.system-timeout-self {
  color: #7d0b0b;
  background: #fff1f1;
  border-color: #f0b5b5;
}

.chat-sender {
  display: block;
  color: #3a4f62;
  font-weight: 700;
}

.chat-time {
  font-weight: normal;
  color: #999;
  font-size: 0.85em;
  margin-left: 2px;
}

.chat-text {
  display: block;
  color: #2f3f4c;
  padding-left: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-pid {
  color: #1a6bcc;
  font-weight: 700;
}

.chat-role {
  color: #888;
  font-size: 0.9em;
}

/* 2026-10-15：聊天室每則訊息發言者名字後面的角色標示：揭露了就上對應陣營顏色（跟角色園徽章用的顏色一致），還沒揭露時維持上面那組灰色樣式不改。 */
.chat-role-hunter {
  color: #0f4f93;
  font-weight: 700;
}

.chat-role-shadow {
  color: #a61f34;
  font-weight: 700;
}

.chat-role-civilian {
  color: #8a6800;
  font-weight: 700;
}

.chat-role-gm {
  color: #0e7490;
  font-weight: 700;
}

.chat-card-token {
  display: inline;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #0f4f93;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-card-token:hover {
  color: #0c3f76;
}

.chat-card-token:focus-visible {
  outline: 2px solid #2f89c9;
  outline-offset: 1px;
}

.chat-card-token.is-masked {
  color: #677686;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

.sh-fchat-msgs .chat-card-token {
  margin: 0;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-action-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  flex: 0 0 auto;
}

.chat-emoji-wrap {
  position: relative;
  flex: 0 0 auto;
}

.chat-emoji-toggle {
  min-width: 72px;
  min-height: 40px;
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-emoji-toggle-icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 4px;
}

.chat-emoji-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(520px, 92vw);
  max-height: 320px;
  padding: 10px;
  border: 1px solid #b7ccdb;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(21, 49, 67, 0.2);
  z-index: 12;
  overflow: hidden;
}

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

.chat-emoji-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #244055;
}

.chat-emoji-close {
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: #2f536d;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
}

.chat-emoji-close:hover,
.chat-emoji-close:focus-visible {
  background: #e7f0f8;
  outline: none;
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  max-height: 258px;
  overflow-y: auto;
  overflow-x: hidden;
}

.chat-emoji-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  border: 1px solid #d0e1ee;
  border-radius: 8px;
  background: #f7fbff;
  color: #2c4357;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.chat-emoji-item:hover,
.chat-emoji-item:focus-visible {
  border-color: #77a8ce;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(34, 82, 113, 0.14);
  outline: none;
}

.chat-emoji-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.chat-emoji-item span {
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.chat-input {
  flex: 1;
  min-height: 72px;
  resize: vertical;
  white-space: pre-wrap;
  line-height: 1.4;
}

.chat-input-row .btn {
  flex: 0 0 auto;
}

.chat-action-stack .btn {
  width: 72px;
}

.chat-emoji-inline {
  width: 40px;
  height: 40px;
  vertical-align: text-bottom;
  object-fit: contain;
}

.chat-emoji-inline.emoji-chew-medium {
  width: 32px;
  height: 32px;
}

.chat-emoji-inline.emoji-chew-large {
  width: 40px;
  height: 40px;
}

.chat-emoji-inline.emoji-chew-xlarge {
  width: 48px;
  height: 48px;
}

.room-game-surface {
  min-height: 520px;
}

.table-stage {
  position: relative;
  width: 100%;
  min-height: 500px;
  border: 1px solid #d6e4ef;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%);
  overflow: hidden;
}

.stage-card {
  position: absolute;
  width: clamp(40px, 4.4vw, 54px);
  height: clamp(78px, 8.8vw, 106px);
  border: 1px solid #8fb4cc;
  border-radius: 6px;
  background: linear-gradient(180deg, #fefefe 0%, #eaf4fb 100%);
  box-shadow: 0 2px 6px rgba(30, 70, 100, 0.12);
}

.stage-card-caption {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #456;
  white-space: nowrap;
  display: none;
}

.stage-card-field .stage-card-caption {
  color: #51718a;
}

.stage-card-field {
  width: clamp(72px, 6.6vw, 92px);
  height: clamp(112px, 12.5vw, 142px);
  padding: 8px 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.stage-field-order {
  position: absolute;
  top: 5px;
  left: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid #b7ccdb;
  background: rgba(255, 255, 255, 0.9);
  color: #45657b;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: none;
}

.stage-card-field.is-active {
  border-color: #e49d26;
  box-shadow: 0 0 0 2px rgba(228, 157, 38, 0.18), 0 5px 12px rgba(75, 98, 117, 0.18);
}

.stage-card-field.is-empty {
  opacity: 0.7;
}

.stage-field-name {
  display: none;
}

.stage-field-number-list {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 24px;
}

.stage-field-occupants {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: auto;
  min-height: 48px;
  align-content: end;
}

.stage-field-occupant {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  border: 1px solid rgba(74, 100, 120, 0.22);
  background: rgba(240, 246, 251, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  padding: 0;
  cursor: pointer;
  appearance: none;
}

.stage-field-occupant.is-empty {
  display: none;
}

.stage-field-occupant:not(.is-empty):hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(41, 98, 155, 0.18);
}

.stage-field-occupant:focus-visible {
  outline: 2px solid #2f6fa3;
  outline-offset: 1px;
}

.stage-occupant-name-popup {
  position: fixed;
  z-index: 260;
  transform: translateX(-50%);
  background: rgba(24, 45, 62, 0.94);
  color: #fff;
  border: 1px solid rgba(155, 201, 232, 0.45);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(15, 32, 46, 0.28);
}

.stage-field-number,
.stage-field-number-static,
.stage-field-detail-number {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #7ea7c2;
  background: #fff;
  color: #1e425c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(30, 70, 100, 0.08);
}

.stage-field-number {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.stage-field-number:hover {
  transform: translateY(-1px);
  border-color: #2f89c9;
  background: #f2fbff;
  box-shadow: 0 3px 6px rgba(23, 88, 136, 0.16);
}

.stage-field-number.is-selected {
  border-color: #df8b19;
  background: #fff2df;
  color: #7a4200;
  box-shadow: 0 3px 7px rgba(223, 139, 25, 0.18);
}

.stage-field-number:focus-visible,
.stage-field-detail-close:focus-visible {
  outline: 2px solid #2f89c9;
  outline-offset: 2px;
}

.stage-field-number-static {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.7);
  color: #6c8192;
}

.stage-field-detail-panel {
  position: fixed;
  z-index: 120;
  width: min(300px, calc(100vw - 24px));
  border: 1px solid #d6e4ef;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 16px 32px rgba(39, 71, 96, 0.18);
  padding: 10px 12px 12px;
}

.stage-field-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #27475f;
}

.stage-field-detail-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #b5cfe0;
  background: #fff;
  color: #335972;
  cursor: pointer;
}

.stage-field-detail-numbers {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stage-field-detail-description {
  margin: 10px 0 0;
  color: #111111;
  font-size: 13px;
  line-height: 1.55;
}

.stage-discard-detail-panel {
  max-height: min(320px, calc(100vh - 48px));
  overflow-y: auto;
}

.stage-discard-detail-list {
  margin-top: 10px;
}

.stage-discard-detail-empty {
  margin: 0;
  color: #5c6b78;
  font-size: 13px;
  line-height: 1.55;
}

.stage-discard-detail-list-inner {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-discard-detail-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #111111;
  line-height: 1.4;
}

.stage-discard-detail-item-count {
  color: #5c6b78;
  font-weight: 600;
  white-space: nowrap;
}

.area-name-hermit {
  color: #2e8b57;
}

.area-name-gate {
  color: #7a4fa3;
}

.area-name-church {
  color: #eef4fa;
  text-shadow: 0 1px 2px rgba(20, 36, 48, 0.95), 0 0 1px rgba(20, 36, 48, 0.9);
}

.area-name-cemetery {
  color: #4b545e;
}

.area-name-woods {
  color: #6f737a;
}

.area-name-altar {
  color: #742d2d;
}

.stage-field-number.area-name-hermit,
.stage-field-detail-number.area-name-hermit,
.stage-field-number-static.area-name-hermit {
  border-color: #2e8b57;
  color: #2e8b57;
  background: #ecfaf1;
}

.stage-field-number.area-name-gate,
.stage-field-detail-number.area-name-gate,
.stage-field-number-static.area-name-gate {
  border-color: #7a4fa3;
  color: #7a4fa3;
  background: #f5eefc;
}

.stage-field-number.area-name-church,
.stage-field-detail-number.area-name-church,
.stage-field-number-static.area-name-church {
  border-color: #c6ced6;
  color: #3f4750;
  background: #ffffff;
  text-shadow: none;
}

.stage-field-number.area-name-cemetery,
.stage-field-detail-number.area-name-cemetery,
.stage-field-number-static.area-name-cemetery {
  border-color: #272c32;
  color: #f3f6fa;
  background: #3a4048;
}

.stage-field-number.area-name-woods,
.stage-field-detail-number.area-name-woods,
.stage-field-number-static.area-name-woods {
  border-color: #6f737a;
  color: #6f737a;
  background: #edf0f3;
}

.stage-field-number.area-name-altar,
.stage-field-detail-number.area-name-altar,
.stage-field-number-static.area-name-altar {
  border-color: #742d2d;
  color: #742d2d;
  background: #f9ecec;
}

.stage-card-pile .stage-card-caption {
  color: #2a3540;
}

.stage-card-white {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

.stage-card-black {
  border-color: #5f6f7d;
  background: linear-gradient(180deg, #707f8b 0%, #4f5d68 100%);
}

.stage-card-black .stage-card-caption {
  color: #f5f8fb;
}

.stage-card-green {
  border-color: #6fa48a;
  background: linear-gradient(180deg, #dff6e8 0%, #b8e3c9 100%);
}

.stage-card-discard {
  border: 1px dashed #8fb4cc;
  box-shadow: none;
  background: transparent;
}

/* 2026-10-13：白卡／黑卡棄牌堆可以隨時點開查看目前棄了哪些卡（大衛判斷何時公開
   角色用），所以這兩個棄牌堆一律顯示可點擊游標；綠卡是非公開資訊，維持原樣不可點。 */
.stage-card-discard.stage-card-white,
.stage-card-discard.stage-card-black {
  cursor: pointer;
}

.stage-card-discard.stage-card-white:hover,
.stage-card-discard.stage-card-black:hover {
  border-color: #2f89c9;
  box-shadow: 0 0 0 2px rgba(47, 137, 201, 0.14);
}

.stage-card-discard.is-active {
  border-color: #e49d26;
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(228, 157, 38, 0.18);
}

.stage-pile-title {
  position: absolute;
  top: 2%;
  font-size: 11px;
  font-weight: 700;
  color: #466277;
  letter-spacing: 0.04em;
  display: none;
}

.stage-pile-title-deck {
  left: 66%;
}

.stage-pile-title-discard {
  left: 77%;
}

.stage-pile-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #8fb4cc;
  background: #fff;
  color: #2b495f;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* 2026-10-10 修正：牌庫可抽牌提示原本動畫週期 1.1s、光暈透明度只有 0.18~0.28，
   跟攻擊/區域目標提示（0.65s、透明度 0.6 以上）比起來太不明顯；調整成一樣的
   節奏跟強度，光暈顏色維持原本的琥珀色（跟其他「可操作」提示一致）。 */
.stage-card-pile.is-draw-prompt {
  cursor: pointer;
  animation: draw-pile-prompt 0.65s ease-in-out infinite;
}

.stage-card-pile.is-draw-prompt .stage-pile-count {
  border-color: #d89033;
  box-shadow: 0 0 0 2px rgba(255, 214, 120, 0.28);
}

@keyframes draw-pile-prompt {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(30, 70, 100, 0.12);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(217, 119, 6, 0.16), 0 0 0 5px rgba(245, 158, 11, 0.42);
    filter: brightness(1.04);
  }
}

/* 撌阡?嚗? 撘萄€?閫?銝?2 / 銝?2 / 銝?2嚗?*/
.stage-card-1 { top: 5%; left: 19.5%; }
.stage-card-2 { top: 5%; left: 32.5%; }

.stage-card-3 { top: 38%; left: 7%; }
.stage-card-4 { top: 38%; left: 45.5%; }

.stage-card-5 { top: 67%; left: 16%; }
.stage-card-6 { top: 67%; left: 35.5%; }

.stage-card-field[data-field-slot='2'],
.stage-card-field[data-field-slot='3'] {
  background: linear-gradient(180deg, #fff7fb 0%, #ffe4ef 100%);
}

.stage-card-field[data-field-slot='4'],
.stage-card-field[data-field-slot='5'] {
  background: linear-gradient(180deg, #fffdf2 0%, #fff2c9 100%);
}

.stage-card-field[data-field-slot='0'],
.stage-card-field[data-field-slot='1'] {
  background: linear-gradient(180deg, #f5fbff 0%, #dff0ff 100%);
}
.stage-card-field.move-target-prompt {
  cursor: pointer;
  animation: stage-move-target-pulse 1.1s ease-in-out infinite;
}
@keyframes stage-move-target-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), 0 2px 6px rgba(30, 70, 100, 0.12);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.36), 0 6px 14px rgba(37, 99, 235, 0.18);
    filter: brightness(1.05);
  }
}

/* ?喲?嚗?湔???6 撘蛛?瘥? 3 撘蛛? */

.stage-card-7 { top: 6%; left: 72%; }
.stage-card-8 { top: 34%; left: 72%; }
.stage-card-9 { top: 62%; left: 72%; }

.stage-card-10 { top: 6%; left: 82%; }
.stage-card-11 { top: 34%; left: 82%; }
.stage-card-12 { top: 62%; left: 82%; }

.stage-center-badges {
  position: absolute;
  left: 33%;
  top: 54%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: default;
  user-select: none;
}

.stage-center-badges.is-roll-prompt {
  cursor: pointer;
}

.stage-center-badges:focus-visible {
  outline: 2px solid #2f7db2;
  outline-offset: 4px;
  border-radius: 8px;
}

.stage-badge {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #20425c;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #7ea2bb;
  background: #eef7ff;
  transition: transform 90ms linear, filter 120ms linear;
}

.stage-center-badges.is-rolling .stage-badge {
  animation: none;
  transform: scale(1.06);
  filter: brightness(1.08) saturate(1.08);
}

/* 2026-10-19 修正：Mike 覺得四面骰拿掉 clip-path 改成內嵌裝飾三角形的版本
   很醜，四面骰重新用 clip-path 把整張卡裁成三角形（跟原本一樣）。
   可擲骰提示效果則是改回拿掉橘色光暈之前、更早期的版本——只有縮放跟亮度
   閃爍、完全沒有顏色光暈，不是整個拿掉閃爍效果，Mike要的只是「不要橘色」，
   縮放/亮度的閃爍提示本身還是要有。
   2026-10-19 修正（追加）：Mike 建議閃爍時配合顏色變淡來加強視覺效果，第一版
   用 brightness(1.35) + saturate(0.55)，Mike 回報「再加強一點」，於是把
   brightness 拉高到 1.55、saturate 降到 0.35，變淡的幅度更明顯。
   2026-10-19 修正（再追加）：Mike 要求骰子閃爍頻率要跟牌庫按鈕（draw-pile-
   prompt）對齊，週期從 1.1s 改成跟牌庫按鈕、下一步按鈕共用的 0.65s；因為是
   跟「另一個獨立觸發的元素」對齊（不是像之前兩顆骰子那樣同一刻一起觸發），
   需要靠 stageNextStepState.js 裡的 syncPulseAnimationDelay 用共同的
   wall-clock 相位對齊，所以 JS 那邊也補回對應的同步呼叫（見該檔案修正說明）。
   一樣只是調骰子本身卡片的濾鏡，沒有額外加 box-shadow／外圈光暈，跟 Mike
   明確拒絕的橘色光暈是兩回事。 */
.stage-center-badges.is-roll-prompt .stage-badge {
  animation: dice-roll-prompt 0.65s ease-in-out infinite;
}

@keyframes dice-roll-prompt {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: scale(1.06);
    filter: brightness(1.55) saturate(0.35);
  }
}

.stage-badge-square {
  border-radius: 4px;
  background: #2f7db2;
  border-color: #255f89;
  color: #ffffff;
}

.stage-badge-triangle {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: #cf3c3c;
  border-color: #9f2b2b;
  color: #ffffff;
}

.records-page {
  display: grid;
  gap: 16px;
}

.higu-records-page .panel fieldset,
.higu-register-page .panel fieldset {
  border: 1px solid #c4d7e5;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f5f9fc;
}

.higu-records-page legend,
.higu-register-page legend {
  color: #1d608e;
  font-weight: 700;
}

.higu-register-page .card-body,
.higu-records-page .card-body {
  padding: 14px;
}

.records-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.records-page-controls,
.records-search-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.records-page-controls {
  width: 100%;
}

.records-search-controls {
  margin-left: auto;
}

.records-search-input {
  width: min(260px, 46vw);
}

.records-page-input {
  width: 72px;
  text-align: center;
}

.records-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.records-stat-card,
.records-player-card {
  border: 1px solid #b9d0de;
  border-radius: 2px;
  padding: 12px 14px;
  background: #fbfdff;
}

.records-stat-label {
  display: block;
  margin-bottom: 6px;
  color: #5b6c78;
}

.records-player-stats {
  margin-top: 12px;
}

.records-winner {
  display: inline-block;
  min-width: 2.2em;
  text-align: center;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 6px;
}

.records-winner-hunter {
  color: #114a8a;
  background: #e7f1ff;
  border: 1px solid #bdd4f5;
}

.records-winner-shadow {
  color: #8f1b1b;
  background: #fdecec;
  border: 1px solid #f1bcbc;
}

.records-winner-civilian {
  color: #7a6000;
  background: #fff7d8;
  border: 1px solid #ead087;
}

.records-winner-mixed {
  color: #4a4f58;
  background: #f2f5f9;
  border: 1px solid #c8d3de;
}

.records-winner-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.records-winner.records-winner-boomed {
  color: #525a64;
  background: #eef1f5;
  border-color: #c4ccd5;
}

.records-option-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.records-option-badge {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #c2d7e7;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  background: #f5fbff;
  color: #2b5a78;
}

.records-option-badge-green {
  background: #eaf8ee;
  border-color: #95d3a5;
  color: #1b7a3a;
}

.records-option-badge-blue {
  background: #eaf3ff;
  border-color: #97b9ef;
  color: #1e4f94;
}

.records-option-badge-neutral {
  background: #fff7d8;
  border-color: #ead087;
  color: #7a6000;
}

/* 2026-10-15：GM 徽章顏色沿用專門在好陣營/GM 相關畫面拿整齊過的青色。 */
.records-option-badge-gm {
  width: auto;
  min-width: 22px;
  padding: 0 5px;
  background: #e0f7fa;
  border-color: #4fb3bf;
  color: #0e7490;
}

.records-option-badge-purple {
  background: #f2ecfb;
  border-color: #c3aeef;
  color: #5b34a0;
}

.records-option-extra {
  font-size: 12px;
  color: #4b6070;
}

.records-option-popover {
  position: fixed;
  z-index: 420;
  transform: translateX(-50%);
  max-width: min(320px, calc(100vw - 16px));
  border: 1px solid #c9d9e5;
  border-radius: 8px;
  background: #ffffff;
  color: #27475f;
  box-shadow: 0 16px 34px rgba(20, 44, 67, 0.2);
  padding: 8px 10px;
}

.records-option-popover strong {
  display: block;
  margin-bottom: 4px;
}

.records-option-popover p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

/* 村子資訊設定徽章列（取代原本文字化的 TRIP/卡組/綠卡/亂鬥/徽章/暴斃時間）：
   顏色複用 records-option-badge 系統，只顯示目前有效的設定；TRIP 強調色、暴斃時間數值另外做樣式。
   2026-10-09：未啟用徽章改成直接不顯示（不再用灰階表示關閉），原本的 .village-settings-badge-off
   灰階樣式已經沒有任何地方在用，移除。 */
.village-settings-badge-trip-on {
  background: #e0f7fa;
  border-color: #4fb3bf;
  color: #0e7490;
}

.village-settings-badge-timeout {
  width: auto;
  min-width: 22px;
  padding: 0 7px;
  background: #fff3e0;
  border-color: #f3b76b;
  color: #8a5300;
}

.village-info-settings-badges-line {
  padding-top: 2px;
}

#tripProfileGamesTbody td:nth-child(5) {
  text-align: center;
}

.identity-profile-summary {
  margin-bottom: 10px;
  line-height: 1.5;
}

.higu-records-page .data-table {
  border: 1px solid #c9d9e5;
  background: #fff;
}

.higu-records-page .data-table th {
  background: #eef5fb;
  color: #315870;
  border-bottom: 1px solid #c9d9e5;
}

.higu-records-page .data-table td {
  border-bottom: 1px solid #e1ebf3;
}

.higu-records-page .data-table th:nth-child(5),
.higu-records-page .data-table td:nth-child(5) {
  text-align: center;
}

.higu-records-page .data-table tbody tr:nth-child(even) {
  background: #f9fcff;
}

.identity-form-grid {
  grid-template-columns: 160px 1fr;
}

.identity-tools-grid {
  display: grid;
  gap: 10px;
}

.identity-inline-form {
  border: 1px dashed #c8d9e6;
  background: #f9fcff;
  padding: 10px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: center;
}

.identity-inline-form strong {
  grid-column: 1 / -1;
  color: #245;
}

.identity-page-tabs {
  margin-top: 0;
}

.identity-page-tabs .tab {
  font-size: 14px;
}

.identity-auth-status {
  margin: 8px 0 0;
}

.identity-tab-pane {
  display: none;
}

.identity-tab-pane.current {
  display: block;
}

.avatar-gallery-page,
.version-page {
  display: grid;
  gap: 16px;
}

.avatar-gallery-grid .avatar-option-card {
  cursor: default;
}

.avatar-gallery-grid .avatar-option-card.readonly:hover {
  background: #f6fbff;
  transform: none;
}

.avatar-upload-entry {
  margin-bottom: 10px;
}

.avatar-page-tabs {
  margin-top: 0;
}

.avatar-upload-panel {
  display: grid;
  gap: 12px;
}

.avatar-upload-auth-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.avatar-upload-color-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 24px 1fr minmax(120px, 180px);
  gap: 8px;
  align-items: center;
}

.avatar-upload-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.avatar-upload-color-input {
  text-transform: lowercase;
}

.avatar-upload-file-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-upload-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.avatar-upload-preview-card {
  width: fit-content;
  min-width: 84px;
  min-height: 96px;
  cursor: default;
}

.avatar-upload-preview-card .avatar-option-thumb {
  margin: 0 auto;
}

.avatar-upload-preview-card .avatar-option-meta {
  justify-items: center;
  text-align: center;
}

.avatar-upload-preview-block {
  display: grid;
  gap: 8px;
  align-items: start;
}

.identity-ratings-table {
  margin-top: 12px;
}

.identity-ratings-table .trip-rating-col-room {
  width: 90px;
  white-space: nowrap;
}

.identity-ratings-table .trip-rating-col-trip {
  width: 120px;
  white-space: nowrap;
}

.identity-ratings-table .trip-rating-col-score {
  width: 72px;
  white-space: nowrap;
  text-align: center;
}

.identity-ratings-table .trip-rating-col-comment {
  min-width: 20em;
}

.identity-trip-games-grid th,
.identity-trip-games-grid td {
  text-align: center;
  vertical-align: middle;
}

.identity-trip-games-grid th:nth-child(2),
.identity-trip-games-grid td:nth-child(2) {
  text-align: left;
}

.identity-trip-games-grid th:nth-child(1),
.identity-trip-games-grid td:nth-child(1) {
  width: 84px;
  white-space: nowrap;
}

.identity-trip-games-grid th:nth-child(2),
.identity-trip-games-grid td:nth-child(2) {
  min-width: 180px;
}

.identity-trip-games-grid th:nth-child(4),
.identity-trip-games-grid td:nth-child(4),
.identity-trip-games-grid th:nth-child(5),
.identity-trip-games-grid td:nth-child(5),
.identity-trip-games-grid th:nth-child(6),
.identity-trip-games-grid td:nth-child(6),
.identity-trip-games-grid th:nth-child(7),
.identity-trip-games-grid td:nth-child(7) {
  width: 68px;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .avatar-upload-auth-row,
  .avatar-upload-color-block {
    grid-template-columns: 1fr;
  }
}

.version-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.version-list-item a {
  color: #1e5a8a;
  text-decoration: none;
}

.version-list-item a:hover {
  text-decoration: underline;
}

.stage-badge-triangle > span {
  transform: translateY(5px);
}

.stage-next-step-button {
  position: absolute;
  right: 14px;
  bottom: 12px;
  min-width: 132px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #6fa2bf;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #eaf4fb 100%);
  color: #1f4963;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 76, 102, 0.14);
  transition: transform 100ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.stage-next-step-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 76, 102, 0.2);
  filter: brightness(1.02);
}

.stage-next-step-button:focus-visible {
  outline: 2px solid #2f7db2;
  outline-offset: 2px;
}

.stage-next-step-button:disabled,
.stage-next-step-button[aria-disabled='true'] {
  opacity: 0.62;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.stage-next-step-button[data-phase='turn-start'],
.stage-next-step-button[data-phase='skip-area'],
.stage-next-step-button[data-phase='use-card'],
.stage-next-step-button[data-phase='equip'],
.stage-next-step-button[data-phase='skip-attack'],
.stage-next-step-button[data-phase='end-turn'] {
  /* 2026-10-09 修正：原本的脈動速度（1.1s）跟顏色（淡紫色、透明度只有 0.32）
     太不明顯，玩家反映這顆按鈕看起來完全沒有閃爍提示；改成跟攻擊／區域目標
     提示（attack-target-pulse／area-target-pulse）一樣的 0.65s 節奏，並換成
     更醒目的琥珀色、提高透明度跟陰影範圍，讓這顆按鈕真正看得出在閃爍。
     2026-10-12 補上 data-phase='use-card'：這是一般需要自行為一張手上卡牌按
     「使用」的按鈕（包含初始綠卡流程要求自己為自己執行一張綠卡時的按鈕），
     之前完全沒有閃爍樣式，跟 turn-start/skip-area 共用同一套。
     2026-10-13 補上 data-phase='equip'（確認裝備白卡）跟 data-phase='skip-attack'
     （輪到自己可以選擇跳過攻擊）：這兩個按鈕的 JS 早就有在設定對應的 data-phase，
     但這裡的選擇器清單一直沒有同步加進來，所以這兩種情況按鈕完全沒有閃爍提示。
     2026-10-19 補上 data-phase='end-turn'（selfStatus === 6，可以按「結束回合」
     的狀態）：跟上面兩次一樣的漏網狀況——JS 那裡原本完全沒有幫這個狀態設定
     data-phase，導致結束回合按鈕從來沒有閃爍提示過，Mike 發現後一起補上。 */
  animation: turn-start-pulse 0.65s ease-in-out infinite;
}

.stage-next-step-button[data-phase='turn-start']:hover:not(:disabled),
.stage-next-step-button[data-phase='skip-area']:hover:not(:disabled),
.stage-next-step-button[data-phase='use-card']:hover:not(:disabled),
.stage-next-step-button[data-phase='equip']:hover:not(:disabled),
.stage-next-step-button[data-phase='skip-attack']:hover:not(:disabled),
.stage-next-step-button[data-phase='end-turn']:hover:not(:disabled) {
  filter: brightness(1.05);
}

@keyframes turn-start-pulse {
  0%,
  100% {
    box-shadow: 0 2px 6px rgba(37, 76, 102, 0.14);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.42), 0 8px 16px rgba(217, 119, 6, 0.16);
    filter: brightness(1.04);
  }
}

/* ?€?€ ?瑁?銝剖??蝷?(Active Card) ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.stage-card-active {
  top: 73%;
  left: 58%;
  border: 2px dashed #b0c4d8;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.stage-card-active[data-card-color] {
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.stage-card-active[data-card-color]:hover {
  transform: translateY(-2px);
}

.stage-card-active[data-card-color="green"] {
  background: linear-gradient(180deg, #e6f9e6 0%, #b8e8b8 100%) !important;
  border: 1px solid #4caf50;
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.22) !important;
}

.stage-card-active[data-card-color="white"] {
  background: linear-gradient(180deg, #ffffff 0%, #e8f4fb 100%) !important;
  border: 1px solid #90caf9;
  box-shadow: 0 2px 6px rgba(30, 70, 100, 0.14) !important;
}

.stage-card-active[data-card-color="black"] {
  border-color: #5f6f7d;
  background: linear-gradient(180deg, #707f8b 0%, #4f5d68 100%) !important;
  box-shadow: 0 2px 8px rgba(44, 57, 69, 0.24) !important;
}

.stage-active-card-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  color: #2a4860;
  width: 90%;
  line-height: 1.25;
  word-break: break-all;
  padding: 0 2px;
  pointer-events: none;
}

.stage-card-active[data-card-color="black"] .stage-active-card-name {
  color: #dce8f0;
}

/* ?€?€ Active Card 鞈? Dialog ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.active-card-dialog {
  position: fixed;
  inset: auto auto auto auto;
  /* Above the floating chat / HP / players panels (z-index: 200) so the
     card-info popup is never painted behind them when opened from inside
     the floating chat widget on mobile. */
  z-index: 300;
  margin: 0;
  width: min(300px, calc(100vw - 24px));
  border: 1px solid #d6e4ef;
  border-radius: 10px;
  padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 16px 32px rgba(39, 71, 96, 0.18);
  color: #27475f;
}

.active-card-dialog::backdrop {
  background: transparent;
}

.active-card-dialog-form {
  padding: 10px 12px 12px;
}

.active-card-dialog .area-choice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #27475f;
}

.active-card-dialog-type {
  margin: 10px 0 0;
  color: #6b8699;
  font-size: 12px;
  line-height: 1.45;
}

.active-card-dialog-desc {
  margin: 10px 0 0;
  color: #3e5668;
  font-size: 13px;
  line-height: 1.55;
}

.active-card-dialog[open] {
  animation: active-card-detail-fade-in 120ms ease-out;
}

@keyframes active-card-detail-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-card-pile.is-draw-prompt,
  .stage-center-badges.is-roll-prompt .stage-badge,
  .stage-next-step-button[data-phase='turn-start'],
  .stage-next-step-button[data-phase='skip-area'],
  .stage-next-step-button[data-phase='use-card'],
  .stage-next-step-button[data-phase='equip'],
  .stage-next-step-button[data-phase='skip-attack'],
  .stage-next-step-button[data-phase='end-turn'],
  .stage-card-field.move-target-prompt,
  .player-card.area-target-prompt {
    animation: none;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 270px minmax(340px, 1fr);
  row-gap: 8px;
  column-gap: 10px;
  align-items: center;
}

.form-grid .txt,
.form-grid select {
  width: 100%;
  min-width: 0;
}

.txt,
select,
button {
  font: 16px/1.6em Verdana, Helvetica, Arial, sans-serif;
  color: var(--text);
}

.txt,
select {
  border-right: 1px solid #d3e8f2;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  border-bottom: 1px solid #d3e8f2;
  background: var(--bg);
  height: 30px;
  padding: 0 8px;
}

textarea.txt {
  height: auto;
  padding: 6px 8px;
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5em;
  word-break: break-all;
  overflow-wrap: anywhere;
}

label[for="roomDescription"] {
  align-self: start;
  padding-top: 7px;
}

#roomDescription {
  align-self: start;
}

.btn {
  border: 1px solid var(--line-strong);
  background: linear-gradient(#ffffff, #f2f7fb);
  color: #333;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow-wrap: normal;
}

.auto-refresh-controls {
  white-space: nowrap;
  overflow-wrap: normal;
}

legend {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.form-grid > label,
.status-item .lighttxt {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.btn:hover {
  background: linear-gradient(#ffffff, #e9f4fa);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.btn-inline {
  margin-left: 8px;
  padding: 1px 8px;
  vertical-align: middle;
}

.inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.input-with-suffix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.input-with-suffix .txt {
  flex: 1 1 auto;
  min-width: 0;
}

.input-suffix {
  color: #666;
  font-weight: 700;
  white-space: nowrap;
}

.option-title {
  align-self: start;
  padding-top: 7px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  line-height: 1.5;
  user-select: none;
}

.checkbox-row input[type='checkbox'] {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--link, #3a7bd5);
}

.checkbox-row-inline {
  margin-top: 6px;
}

.stacked-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.trip-verify-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.trip-min-games-input {
  width: 92px;
  height: 26px;
  padding: 0 6px;
}

.field-hint {
  display: block;
  color: #888;
  font-size: 0.85em;
  line-height: 1.4;
  margin-top: 1px;
}

.announcement-text {
  margin: 0 0 8px;
  white-space: pre-wrap;
  line-height: 1.7;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 8px;
}

.status-item {
  border: 1px dashed var(--line);
  background: #f9fcff;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.player-cards.seat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.seat-slot {
  aspect-ratio: auto;
  min-height: 260px;
  border: 1px dashed var(--line-strong);
  background: #f9fcff;
  border-radius: 4px;
  padding: 6px;
  display: flex;
}

.seat-empty {
  width: 100%;
  height: 100%;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.seat-slot > .player-card {
  width: 100%;
  height: auto;
  min-height: 100%;
}

.player-card {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
}

.player-card:hover {
  z-index: 1;
}

.player-card:focus-within {
  z-index: 40;
}

.player-card.is-spotlighted {
  animation: jump-highlight-pulse 1.2s ease;
  z-index: 30;
}

.player-card.current-turn {
  border-color: #22a06b;
  box-shadow: 0 0 0 1px rgba(34, 160, 107, 0.28);
  background: #eafaf0;
}

.player-card.jump-highlight {
  animation: jump-highlight-pulse 1.1s ease;
}

.player-card.attack-target-prompt {
  cursor: pointer;
  animation: attack-target-pulse 0.65s ease-in-out infinite;
}

.player-card.area-target-prompt {
  cursor: pointer;
  animation: area-target-pulse 0.65s ease-in-out infinite;
}

/* 2026-10-17 新增：綠卡目標確認期間，跟這次效果沒有直接關係的玩家（出卡的人、
   單純旁觀的其他玩家）原本會跟目標玩家本人一樣看到卡片閃爍（attack-target-prompt），
   Mike 回報沒輪到自己時不應該有閃爍特效，但可以保留原本的高亮（頻率0，不要動畫）
   讓人看得出是誰被影響。這個 class 只是靜態的琥珀色外框跟陰影，沒有 animation，
   也不像 attack/area-target-prompt 一樣是 cursor:pointer（這不是可以互動的目標）。 */
.player-card.prompt-target-static {
  cursor: default;
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.42);
}

/* 2026-10-20 新增：開局後、GM 按下「開始遊戲」放行前這段暫停期間，GM 自己看到的每張其他玩家卡片都能點開改角色，用藍紫色的靜態高亮跟攻擊／場地效果的紅／橙區分開；同時所有卡片都可點，所以故意不加閃爍動畫（避免同時一堆卡片一起閃眼花）。 */
.player-card.gm-edit-target-prompt {
  cursor: pointer;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.4);
}

.player-card.ready {
  background: #f3e8ff;
  border-color: #c084fc;
}

.player-card.dead {
  background: #e5e7eb;
  border-color: #9ca3af;
  opacity: 1;
  filter: grayscale(0.3);
}

/* 2026-10-21 新增：Mike 要求暴斃死亡的玩家卡片要跟一般死亡區分出不一樣的顏色。
   疊加在既有 .player-card.dead 上面（class 順序是 player-card dead boomed，
   見 ui.js），用偏紅橙色系跟一般死亡的灰色做區隔，呼應「暴斃」這個詞本身帶有
   爆炸/意外死亡的語感；邊框跟底色都要比一般死亡更醒目一點，但不要太刺眼，
   避免在卡片堆疊時喧賓奪主。 */
.player-card.dead.boomed {
  background: #fde1d3;
  border-color: #ea580c;
  filter: grayscale(0.1);
}

@keyframes attack-target-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.3);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.65), 0 8px 16px rgba(118, 39, 39, 0.26);
    filter: brightness(1.1);
  }
}

@keyframes area-target-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.65), 0 8px 16px rgba(37, 99, 235, 0.24);
    filter: brightness(1.1);
  }
}

@keyframes jump-highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 107, 204, 0.35);
    transform: translateY(0);
  }
  35% {
    box-shadow: 0 0 0 3px rgba(26, 107, 204, 0.35), 0 10px 18px rgba(32, 77, 120, 0.16);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 107, 204, 0.0);
    transform: translateY(0);
  }
}

.area-choice-dialog {
  width: min(360px, calc(100vw - 32px));
  border: 1px solid rgba(146, 175, 196, 0.6);
  border-radius: 16px;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 249, 255, 0.98) 100%);
  color: #17384c;
  box-shadow: 0 18px 48px rgba(17, 41, 62, 0.24);
  /* 跟 .active-card-dialog 同樣的原因：手機瀏覽器對 <dialog>.showModal() 的
     top layer 支援不一定完整可靠，遇到沒有正確把 dialog 提升到 top layer
     的情況時，這個 dialog 就會落回一般的堆疊順序，被 z-index:200 的浮動
     聊天室／傷害計量表／村民列表蓋住（例如角色揭露確認、綠卡選擇、完場結算
     後的玩家評價都共用這個 class）。明確指定比浮動視窗更高的 z-index，
     確保在這類環境下也一定會顯示在浮動視窗之上。 */
  z-index: 300;
}

.area-choice-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  z-index: 300;
}

.area-choice-form {
  display: grid;
  gap: 14px;
  padding: 18px 18px 16px;
}

.area-choice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
}

.area-choice-message {
  margin: 0;
  line-height: 1.5;
  color: #345066;
}

.area-choice-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.area-choice-button {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 700;
}

.area-choice-button.danger {
  background: linear-gradient(180deg, #fff1f1 0%, #ffd7d7 100%);
  border-color: #ef9a9a;
  color: #9b1c1c;
}

.area-choice-button.heal {
  background: linear-gradient(180deg, #eefcf5 0%, #d4f5e3 100%);
  border-color: #8ad0a9;
  color: #166534;
}

.area-choice-button.neutral {
  background: linear-gradient(180deg, #ffffff 0%, #edf4fa 100%);
  border-color: #b5cbda;
  color: #355268;
}

.equipment-choice-options {
  display: grid;
  gap: 10px;
}

.equipment-choice-option {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid #b5cbda;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fa 100%);
  color: #234055;
  font-weight: 700;
  cursor: pointer;
}

.equipment-choice-option:hover,
.equipment-choice-option:focus-visible {
  border-color: #7faed1;
  filter: brightness(1.02);
  outline: none;
}

.equipment-choice-actions {
  grid-template-columns: 1fr;
}

/* 2026-10-20 新增：GM 更改玩家角色視窗改成分陣營分組顯示（20 位角色），比原本的
   .equipment-choice-dialog 高得多，所以陣需作宽度調寬一點。超過
   高度時改成整個對話框內搲桕（而不是整個頁面），標題、提示訊息、取消按鈕
   還是會固定在最上面。 */
.gm-character-choice-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
  overflow-y: auto;
}

/* 2026-10-20 新增：暗影／獵人／中立三個陣營分組用不同的
   邊框色區分，跟遊戲內現有的陣營配色沒有特別綁定，隨意選三種
   不易淆淆、整體風格一致的顏色。 */
.gm-character-choice-group {
  display: grid;
  gap: 6px;
}

.gm-character-choice-group + .gm-character-choice-group {
  margin-top: 4px;
}

.gm-character-choice-group-label {
  font-size: 13px;
  font-weight: 700;
  color: #52708a;
  padding-left: 8px;
  border-left: 3px solid #b5cbda;
}

.gm-character-choice-group[data-camp="Shadow"] .gm-character-choice-group-label {
  border-left-color: #7c3aed;
  color: #5b21b6;
}

.gm-character-choice-group[data-camp="Hunter"] .gm-character-choice-group-label {
  border-left-color: #1a6bcc;
  color: #15508f;
}

.gm-character-choice-group[data-camp="Civilian"] .gm-character-choice-group-label {
  border-left-color: #16845a;
  color: #166534;
}

.gm-character-choice-group-options {
  gap: 6px;
}

.gm-player-adjust-dialog {
  width: min(360px, calc(100vw - 32px));
}

.gm-player-adjust-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.gm-player-adjust-actions .area-choice-button {
  min-height: 40px;
}

.gm-player-adjust-hp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.gm-player-adjust-hp-row label {
  font-size: 13px;
  font-weight: 700;
  color: #52708a;
  white-space: nowrap;
}

.gm-player-adjust-hp-input {
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid #b5cbda;
  padding: 4px 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.gm-player-adjust-hp-row .area-choice-button {
  min-height: 36px;
  padding-left: 14px;
  padding-right: 14px;
}

.gm-character-choice-group-options .equipment-choice-option {
  min-height: 36px;
  text-align: left;
  padding-left: 12px;
}

.player-card-head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 8px;
  align-items: start;
}

.avatar-badge {
  width: 56px;
  height: 56px;
  position: relative;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #245;
  background: #f1f9ff;
  overflow: visible;
}

.player-shield-chip {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #9ec2d9;
  background: #ffffff;
  color: #2b5f86;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 12;
}

.player-shield-chip:hover {
  background: #f0f8ff;
  border-color: #74a8cb;
}

.player-shield-chip:focus-visible {
  outline: 2px solid #2f7db2;
  outline-offset: 1px;
}

.player-ability-chip {
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #98b3c4;
  background: #ffffff;
  color: #2a597a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  z-index: 12;
}

.player-ability-chip.ready {
  border-color: #7cb85f;
  color: #2f7a25;
  background: #f3fff1;
}

.player-ability-chip.disabled {
  border-color: #d58f8f;
  color: #8a2f2f;
  background: #fff5f5;
}

.avatar-crown {
  position: absolute;
  left: -10px;
  top: -12px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  z-index: 12;
  transform: rotate(-45deg);
  transform-origin: center;
}

.player-id-block {
  min-width: 0;
}

.player-id-block strong {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.player-status-inline {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
}

.player-color-cell {
  justify-self: end;
}

.player-card-meta {
  margin-top: 6px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.player-area-label {
  font-weight: 700;
}

.player-card-meta-role {
  margin-top: 2px;
  font-size: 12px;
  min-width: 0;
}

.player-card-hp {
  margin-top: 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.player-card-role {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.player-card-role > .trip-prefix-diamond {
  margin-left: 0px;
}

.player-role-info {
  position: relative;
  min-width: 0;
}

.player-role-trigger {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.player-role-name {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  line-height: 1.2;
  font-size: 11px;
}

.player-role-state {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #6c7884;
  font-size: 10px;
  line-height: 1.2;
}

.player-trip-link {
  color: #0b5d9a;
  text-decoration: underline;
  text-underline-offset: 2px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.player-trip-link:hover {
  color: #0f78c4;
}

.player-trip-link:focus-visible {
  outline: 2px solid #0f78c4;
  outline-offset: 1px;
  border-radius: 3px;
}

.player-role-badge {
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  flex: 0 0 auto;
}

.player-card-nickname {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-role-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: min(340px, 72vw);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d4e2ee;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(20, 35, 52, 0.16);
  font-size: 12px;
  line-height: 1.45;
  color: #2f4558;
  display: none;
  z-index: 20;
}

.player-role-popover > div + div {
  margin-top: 4px;
}

.player-role-popover .damage-meter-badge {
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  vertical-align: middle;
  margin-right: 4px;
}

.player-role-info:hover .player-role-popover,
.player-role-info:focus-within .player-role-popover {
  display: block;
}

.player-card:has(.player-role-info:hover),
.player-card:has(.player-role-info:focus-within) {
  z-index: 40;
}

.equip-row {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 58px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8dce8 transparent;
  padding-bottom: 2px;
}

.equip-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbeaf5;
  background: #f7fbff;
  border-radius: 8px;
  padding: 2px 5px;
  font-size: 13px;
  flex-shrink: 0;
  cursor: pointer;
  color: #36556c;
  line-height: 1;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.equip-chip:hover {
  border-color: #bfd7e8;
  background: #ffffff;
  transform: translateY(-1px);
}

.equip-chip:focus-visible {
  outline: 2px solid #2f7db2;
  outline-offset: 2px;
}

.active-card-dialog-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(146, 175, 196, 0.3);
}

.active-card-dialog-discard-btn {
  width: 100%;
  background: none;
  border: 1px solid #e5a0a0;
  color: #b33a3a;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.active-card-dialog-discard-btn:hover {
  background: #fef2f2;
  border-color: #c0392b;
}

/* Avatar image inside badge */
.avatar-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
  display: block;
}

.dead-avatar-preview {
  display: none !important;
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 20;
}

.avatar-badge:hover .dead-avatar-preview {
  display: none;
}

/* Trip line in card (small text under nickname) */
.player-trip {
  font-size: 11px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.35;
}

.ready-mark {
  margin-top: 2px;
  display: inline-block;
  font-size: 11px;
  color: #6b21a8;
  font-weight: 700;
}

/* Color picker */
.color-picker {
  position: relative;
  display: inline-block;
}

.color-chip-trigger,
.color-chip-static {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
}

.color-chip-trigger {
  cursor: pointer;
  padding: 0;
  background-clip: padding-box;
  appearance: none;
}

.color-chip-trigger:hover {
  transform: translateY(-1px);
}

.color-chip-trigger:focus-visible {
  outline: 2px solid #2f7db2;
  outline-offset: 2px;
}

.color-picker-row {
  margin-top: 6px;
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 80;
  padding: 6px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 120px;
  box-shadow: 0 10px 24px rgba(20, 35, 52, 0.16);
}

.color-picker-row[hidden] {
  display: none !important;
}

[data-page="room"] .player-card .color-picker-row,
.room-page .player-card .color-picker-row {
  left: 0;
  right: auto;
  transform: none;
}

/* 2026-10-14：手機版玩家卡排版欄數變少，選色小面板往下彈出時常常會超出自己
   那張卡的範圍，蓋到下一排的玩家卡上；但 .player-card 本身是獨立的 stacking
   context（position: relative + z-index: 1），裡面的 .color-picker-row 就算
   設 z-index: 80 也只在自己卡片內部有效，比不過「DOM 順序在後面、z-index 同樣
   是 1」的下一張玩家卡——下一張卡還是會畫在上面，結果選色面板看起來被擋住。
   這裡跟上面 .player-role-info 彈出視窗用一樣的手法：面板打開時，把自己這張
   玩家卡整張的 z-index 拉高，面板才能真的蓋在其他玩家卡上面。 */
.player-card:has(.color-picker-row:not([hidden])) {
  z-index: 50;
}

.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease, border-color 0.1s ease;
  outline: none;
}

.color-swatch:hover:not(:disabled) {
  transform: scale(1.25);
  border-color: #555;
}

.color-swatch.selected {
  border-color: #555;
  box-shadow: 0 0 0 2px var(--primary);
}

.color-swatch.taken,
.color-swatch:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  empty-cells: show;
  margin-top: 8px;
}

.data-table th,
.data-table td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: var(--panel);
  color: #666;
  font-weight: 700;
  white-space: nowrap;
  overflow-wrap: normal;
}

.room-row {
  cursor: pointer;
}

.room-row:hover {
  background: #f8fcff;
}

.rooms-table-wrap {
  width: 100%;
  overflow-x: auto;
}

#roomsTable {
  table-layout: auto;
  width: 100%;
  min-width: 860px;
}

#roomsTable col.col-room-id {
  width: 76px;
}

#roomsTable col.col-status {
  width: 92px;
}

#roomsTable col.col-count {
  width: 92px;
}

#roomsTable col.col-name {
  width: 32%;
}

#roomsTable col.col-desc {
  width: 46%;
}

#roomsTable th:nth-child(1),
#roomsTable th:nth-child(2),
#roomsTable th:nth-child(3),
#roomsTable td:nth-child(1),
#roomsTable td:nth-child(2),
#roomsTable td:nth-child(3) {
  white-space: nowrap;
}

#roomsTable th:nth-child(4),
#roomsTable th:nth-child(5),
#roomsTable td:nth-child(4),
#roomsTable td:nth-child(5) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.json-view {
  margin-top: 8px;
  min-height: 180px;
  max-height: 420px;
  overflow: auto;
  background: #f7fafc;
  border: 1px dashed var(--line);
  padding: 8px;
  color: #333;
}

.lighttxt {
  color: var(--muted);
}

.trip-prefix-square {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  background: #9aa4ad;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.trip-prefix-square-fixed {
  background: #7d8790;
  border-color: #5d666e;
}

.trip-prefix-diamond {
  color: #222;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.trip-prefix-diamond-fixed {
  color: #7d8790;
}

.room-status {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
  color: #456;
  background: #f7fbff;
  white-space: nowrap;
}

.room-status.recruiting {
  color: #8a4b00;
  border-color: #f6b26b;
  background: #fff4e8;
}

.room-status.playing {
  color: #216e2b;
  border-color: #8fcf98;
  background: #edfaef;
}

.room-type-tag {
  display: inline-block;
  margin-left: 6px;
  border: 1px solid #c7b7ff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.chat-room-tag {
  color: #5b21b6;
  background: #f3e8ff;
  border-color: #d8b4fe;
}

.village-board-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px;
  align-items: stretch;
}

.village-info-rail {
  border: 1px solid var(--line);
  background: #f7fafc;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 36px 1fr;
  min-height: 100%;
}

.village-rail-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 2px;
  border-right: 1px solid var(--line);
  background: #eef6fc;
  color: #245;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
}

.village-seat-area {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  padding: 8px;
}

.village-info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.village-info-list li {
  margin: 0;
}

.village-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  width: 100%;
}

.village-info-row strong {
  color: #245;
  margin-right: 6px;
}

.village-info-row-primary,
.village-info-row-meta,
.village-info-row-actions {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbfe;
  padding: 8px 10px;
}

.village-info-row-actions {
  background: #f3f9ff;
}

.village-info-item {
  display: inline-flex;
  align-items: center;
}

.village-info-settings {
  color: #667;
  font-size: 13px;
}

.village-settings-inline,
.village-info-row-settings {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fbff;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.village-settings-dialog {
  border: 1px solid #c4d7e5;
  border-radius: 8px;
  padding: 0;
  width: min(780px, calc(100vw - 24px));
  box-shadow: 0 16px 36px rgba(23, 46, 66, 0.22);
}

.village-settings-dialog::backdrop {
  background: rgba(16, 32, 46, 0.36);
}

.village-settings-dialog-form {
  padding: 10px;
}

.village-settings-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.village-info-row-desc {
  margin-top: -2px;
}

.village-settings-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.room-settings-hint {
  width: 100%;
  margin-top: 2px;
}

.room-settings-checkbox {
  margin-top: 0;
}

.room-settings-select {
  width: 120px;
}

.room-settings-btn {
  min-width: 52px;
}

.room-settings-btn.is-active {
  border-color: #2f7db2;
  background: #dff0ff;
  color: #174f7a;
}

.village-info-list li.room-timeout-warning {
  color: #b72323;
  background: #fff0f0;
  border: 1px solid #f2c4c4;
  border-radius: 4px;
  padding: 4px 8px;
}

.guide-area-table th:first-child,
.guide-area-table td:first-child {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.guide-area-dice-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.guide-area-table .guide-area-name {
  font-weight: 700;
}

.village-info-list li.room-timeout-warning strong {
  color: #8d1717;
}

.avatar-panel-grid {
  grid-column: 1 / -1;
}

.avatar-panel {
  border: 1px solid var(--line);
  background: #f9fcff;
  padding: 10px;
}

.higu-register-page .avatar-panel,
.avatar-gallery-page .avatar-panel,
.avatar-gallery-page fieldset {
  border-color: #c4d7e5;
  background: #fcfeff;
}

.avatar-panel h4 {
  margin: 0 0 8px;
  color: #245;
}

.avatar-preview-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.identity-subtabs {
  margin: 12px 0 10px;
}

.identity-pagination-bar {
  justify-content: flex-end;
  margin-top: 10px;
}

#tripDirectorySkillHeader[role='button'] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

#skillLevelDialogMessage {
  white-space: pre-line;
}

.avatar-page-info {
  color: #245;
  font-weight: 700;
}

.avatar-number-input,
.avatar-page-input {
  width: auto;
  min-width: 3ch;
  max-width: 9ch;
  text-align: right;
}

.form-grid .avatar-number-input,
.form-grid .avatar-page-input {
  width: auto;
}

.avatar-number-input::-webkit-outer-spin-button,
.avatar-number-input::-webkit-inner-spin-button,
.avatar-page-input::-webkit-outer-spin-button,
.avatar-page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.avatar-number-input,
.avatar-page-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
}

.avatar-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.avatar-pick-btn {
  min-width: 36px;
  padding: 3px 8px;
}

.avatar-gallery-title {
  margin: 8px 0 6px;
  font-weight: 700;
  color: #245;
}

.avatar-option-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.avatar-gallery-grid.avatar-option-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

.avatar-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.avatar-page-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-search-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.avatar-search-input {
  min-width: 18ch;
}

.register-form-note {
  margin: 0 0 10px;
}

.avatar-option-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.avatar-gallery-grid .avatar-option-card {
  padding: 6px;
}

.avatar-option-card:hover {
  background: #f6fbff;
}

.avatar-option-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(0, 153, 204, 0.2);
}

.avatar-option-card.readonly {
  cursor: default;
}

.avatar-option-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.avatar-option-thumb {
  width: 56px;
  height: 56px;
  border: 2px solid #8aaacc;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #f7fbff;
}

.avatar-option-img {
  max-width: 100%;
  max-height: 100%;
}

.avatar-option-meta {
  margin-top: 6px;
  display: grid;
  gap: 2px;
}

.avatar-gallery-grid .avatar-option-meta {
  margin-top: 4px;
  font-size: 11px;
}

.avatar-option-name {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.avatar-option-no {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 1200px) {
  .avatar-gallery-grid.avatar-option-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .avatar-option-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .avatar-gallery-grid.avatar-option-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .avatar-option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .avatar-gallery-grid.avatar-option-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .avatar-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .avatar-gallery-grid.avatar-option-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .avatar-option-grid {
    grid-template-columns: 1fr;
  }
}


.toast {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 100;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 10px;
  display: none;
}

.toast.show {
  display: block;
  animation: toast-in 180ms ease-out;
}

.toast.error {
  border-color: #d66;
  color: #922;
}

.toast.success {
  border-color: #6aa76a;
  color: #225522;
}

.event-log {
  margin: 0;
  padding-left: 20px;
  max-height: 220px;
  overflow: auto;
}

.event-log li {
  margin: 2px 0;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

@media (max-width: 1024px) {
  .wrap {
    width: calc(100% - 24px);
  }

  #header {
    min-width: 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .status-grid {
    grid-template-columns: 1fr 1fr;
  }

  .player-cards.flow-grid {
    grid-template-columns: 1fr;
  }

  .player-cards.seat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .village-board-layout {
    grid-template-columns: 1fr;
  }

  .room-top-row {
    grid-template-columns: 1fr;
  }

  .room-chat-surface {
    height: 420px;
    min-height: 420px;
    max-height: 420px;
  }

  .village-info-rail {
    grid-template-columns: 1fr;
  }

  .village-rail-title {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    justify-content: flex-start;
    padding: 6px 10px;
  }

  .room-menu-bar {
    align-items: flex-start;
  }

  .auto-refresh-controls {
    margin-left: 0;
    white-space: normal;
    flex-wrap: wrap;
  }

  #umenu {
    position: static;
    margin-top: 6px;
    justify-content: flex-start;
  }

  #umenu .lighttxt,
  legend {
    white-space: normal;
  }

  .panel > fieldset,
  .panel > .panel-box {
    margin-left: -12px;
    margin-right: -12px;
  }
  .panel > fieldset > .panel-header,
  .panel > .panel-box > .panel-header {
    padding-left: 20px;
    padding-right: 20px;
  }
  .panel > fieldset > .card-body,
  .panel > .panel-box > .card-body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 430px) {
  .wrap {
    width: calc(100% - 16px);
  }
  .panel > fieldset,
  .panel > .panel-box {
    margin-left: -8px;
    margin-right: -8px;
  }
  .panel > fieldset > .panel-header,
  .panel > .panel-box > .panel-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .panel > fieldset > .card-body,
  .panel > .panel-box > .card-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 768px) {
  .player-card {
    padding: 10px;
    row-gap: 2px;
  }

  .player-card-head {
    grid-template-columns: 48px 1fr auto;
    gap: 8px;
  }

  .avatar-badge {
    width: 48px;
    height: 48px;
  }

  .player-role-popover {
    width: min(360px, calc(100vw - 28px));
  }

  .equip-chip {
    font-size: 12px;
    padding: 3px 8px;
  }

  .color-chip-trigger,
  .color-chip-static {
    width: 24px;
    height: 24px;
  }

  .color-swatch {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 640px) {
  .player-cards.seat-grid {
    grid-template-columns: 1fr;
  }

  .seat-slot {
    aspect-ratio: auto;
    min-height: 180px;
  }

  .room-chat-surface {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
  }
}

/* Guide Page Styles */
.guide-page {
  max-width: 900px;
}

.guide-container {
  padding: 20px;
}

.guide-section {
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guide-section h2 {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: linear-gradient(to right, #e3f2fd, #f3e5f5);
  border-bottom: 2px solid var(--line-strong);
  font-size: 20px;
  color: #1565c0;
  border-radius: 8px 8px 0 0;
}

.guide-section > h2.guide-collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.guide-section > h2.guide-collapsible::after {
  content: 'v';
  font-size: 13px;
  opacity: 0.5;
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.15s;
}

.guide-section > h2.guide-collapsible[aria-expanded="false"]::after {
  content: '>';
}

.guide-section > h2.guide-collapsible[aria-expanded="false"] {
  border-radius: 8px;
  border-bottom: none;
  margin-bottom: 0;
}

.guide-section > .card-body.guide-section-collapsed {
  display: none;
}

.guide-section h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #333;
  border-left: 4px solid var(--line-strong);
  padding-left: 12px;
}

.guide-section h4 {
  margin: 12px 0 6px;
  font-size: 14px;
  color: #555;
  font-weight: 600;
}

.guide-subsection {
  margin: 12px 0;
  padding: 12px;
  background: #f9f9f9;
  border-left: 3px solid #90caf9;
  border-radius: 4px;
}

.guide-subsection > h4.guide-subsection-collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}

.guide-subsection > h4.guide-subsection-collapsible::after {
  content: 'v';
  font-size: 12px;
  opacity: 0.5;
  margin-left: 8px;
}

.guide-subsection > h4.guide-subsection-collapsible[aria-expanded="false"]::after {
  content: '>';
}

.guide-subsection > .guide-subsection-collapsed {
  display: none;
}

.guide-steps {
  margin: 12px 0;
  padding-left: 24px;
}

.guide-steps li {
  margin: 8px 0;
  line-height: 1.8;
}

.guide-steps strong {
  color: #1565c0;
}


.guide-steps span {
  display: block;
  margin-top: 2px;
  color: #666;
  font-size: 14px;
}


.guide-tips {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.guide-tips li {
  padding: 8px 12px;
  margin: 6px 0;
  background: #f0f4c3;
  border-left: 4px solid #fbc02d;
  border-radius: 4px;
}

.guide-note {
  padding: 12px 16px;
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  border-radius: 4px;
  margin: 12px 0;
}

.guide-faq-item {
  margin: 12px 0;
  padding: 12px;
  background: #fff3e0;
  border-radius: 4px;
  border-left: 4px solid #ff9800;
}

.guide-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: #e65100;
  user-select: none;
  outline: none;
}

/* ── Floating Chat Window ───────────────────────────────────────────────── */

/*
 * Container: fixed at bottom-right.
 * flex-direction: column-reverse → panel (first in DOM) appears ABOVE the toggle button.
 */
.sh-floating-chat {
  position: fixed;
  bottom: 88px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 14px;
  font-family: inherit;
}

/* Toggle button (always visible when collapsed; clicking it expands the panel) */
.sh-fchat-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  padding: 0;
  background: #4fb8d8;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s, box-shadow 0.15s;
  position: relative;
}

.sh-fchat-toggle-icon {
  line-height: 1;
}

.sh-fchat-toggle-btn:hover {
  background: #63c3df;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.sh-fchat-toggle-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* When panel is open, tint toggle button so user knows clicking it will close */
.sh-fchat-toggle-btn[aria-expanded="true"] {
  background: #3aa7ca;
}

/* Unread badge on toggle button */
.sh-fchat-badge {
  background: #f60;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  position: absolute;
  top: 6px;
  right: 4px;
}

/* Expanded panel */
.sh-fchat-panel {
  display: flex;
  flex-direction: column;
  width: min(320px, calc(100vw - 40px));
  height: 380px;
  background: #fff;
  border: 1px solid var(--line-strong, #6eb1d5);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(21, 49, 67, 0.22);
  overflow: hidden;
}

.sh-fchat-panel[hidden] {
  display: none !important;
}

/* Panel header */
.sh-fchat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--primary, #09c);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.sh-fchat-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-fchat-collapse-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.sh-fchat-collapse-btn:hover {
  opacity: 0.75;
}

.sh-fchat-collapse-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Message list */
.sh-fchat-msgs-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sh-fchat-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  background: #fff;
}

.sh-fchat-scroll-bottom-btn {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 3px 12px;
  border: 1px solid var(--line-strong, #6eb1d5);
  border-radius: 999px;
  background: var(--primary, #09c);
  color: #fff;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(21, 49, 67, 0.25);
}

.sh-fchat-scroll-bottom-btn:hover {
  opacity: 0.9;
}

.sh-fchat-scroll-bottom-btn[hidden] {
  display: none !important;
}

.sh-fchat-empty {
  color: var(--muted, #999);
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
}

.sh-fchat-line {
  display: block;
  margin-bottom: 8px;
  line-height: 1.45;
  word-break: break-word;
}

.sh-fchat-line:last-child {
  margin-bottom: 0;
}

.sh-fchat-line--system {
  color: #7f4f00;
  background: #fff8e8;
  border: 1px solid #f0dab0;
  border-radius: 4px;
  padding: 4px 6px;
  line-height: 1.5;
}

.sh-fchat-line--system .sh-fchat-pid {
  color: #0f4f93;
  font-weight: 700;
}

.sh-fchat-sender {
  display: block;
  color: #3a4f62;
  font-weight: 700;
}

.sh-fchat-line--self .sh-fchat-sender {
  color: #0f4f93;
}

.sh-fchat-time {
  font-weight: normal;
  color: var(--muted, #999);
  font-size: 0.85em;
  margin-left: 2px;
}

.sh-fchat-text {
  display: block;
  color: #2f3f4c;
  padding-left: 8px;
  white-space: pre-wrap;
}

/* Emoji images inline in floating chat messages */
.sh-fchat-msgs .chat-emoji-inline {
  vertical-align: text-bottom;
}

/* Footer (emoji panel + input row) */
.sh-fchat-foot {
  position: relative;   /* anchor for the emoji panel popover */
  border-top: 1px solid var(--line, #e3edf5);
  background: var(--panel, #f7f7f7);
  flex-shrink: 0;
}

/* Emoji picker — overlaps message list from below */
.sh-fchat-emoji-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 150px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line-strong, #6eb1d5);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -4px 12px rgba(21, 49, 67, 0.12);
}

.sh-fchat-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 8px;
}

.sh-fchat-emoji-item {
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.sh-fchat-emoji-item:hover {
  border-color: var(--primary, #09c);
  background: rgba(0, 153, 204, 0.08);
}

.sh-fchat-emoji-item img {
  height: 22px;
  width: auto;
  display: block;
}

/* Input row */
.sh-fchat-foot-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: 6px 8px;
}

.sh-fchat-emoji-toggle {
  padding: 4px 6px;
  background: none;
  border: 1px solid var(--line, #e3edf5);
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.1s, background 0.1s;
}

.sh-fchat-emoji-toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
}

.sh-fchat-emoji-toggle:hover,
.sh-fchat-emoji-toggle.is-active {
  border-color: var(--primary, #09c);
  background: rgba(0, 153, 204, 0.08);
}

.sh-fchat-emoji-toggle:disabled {
  opacity: 0.4;
  cursor: default;
}

.sh-fchat-input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--line, #e3edf5);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  height: 38px;
  line-height: 1.4;
  background: #fff;
}

.sh-fchat-input:focus {
  outline: none;
  border-color: var(--primary, #09c);
  box-shadow: 0 0 0 2px rgba(0, 153, 204, 0.2);
}

.sh-fchat-input:disabled {
  background: #f0f0f0;
  color: var(--muted, #999);
}

.sh-fchat-send {
  padding: 5px 10px;
  background: var(--primary, #09c);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  align-self: flex-end;
  height: 38px;
  flex-shrink: 0;
}

.sh-fchat-send:hover {
  background: #0088bb;
}

.sh-fchat-send:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 480px) {
  .sh-floating-chat {
    bottom: 82px;
    right: 14px;
  }

  .sh-fchat-panel {
    width: calc(100vw - 28px);
    height: 300px;
  }

  .sh-fchat-toggle-btn {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}

.guide-faq-item summary:hover {
  color: #d84315;
}

.guide-faq-item summary:focus-visible {
  outline: 2px solid #ff6f00;
  outline-offset: 2px;
}

.guide-faq-item p {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid #ffe0b2;
  color: #666;
  font-size: 14px;
}

@media (max-width: 768px) {
  .guide-section h2 {
    font-size: 18px;
  }

  .guide-section h3 {
    font-size: 15px;
  }

  .guide-container {
    padding: 12px;
  }

  .guide-section {
    margin-bottom: 16px;
  }
}

/* Preview version layout styles */
.room-layout-info-chat-row {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  grid-template-areas:
    "info chat"
    "players players";
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}

.room-layout-info-chat-row > fieldset {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.room-layout-info-chat-row > fieldset > .card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.room-layout-info-chat-row .room-chat-surface {
  flex: 1;
  height: 420px;
  min-height: 420px;
  max-height: 420px;
  align-items: stretch;
}

.room-layout-info-fieldset {
  grid-area: info;
}

.room-layout-info-chat-row > .room-chat-fieldset {
  grid-area: chat;
}

.room-layout-player-fieldset {
  grid-area: players;
  width: 100%;
}

.room-layout-player-fieldset .card-body {
  display: block;
}

.room-layout-stage-row {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.room-layout-stage-row > fieldset {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.room-layout-stage-row > fieldset > .card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Preview: make field cards horizontal (landscape) */
[data-page="room"] .table-stage,
.room-page .table-stage {
  min-height: 100%;
  height: 100%;
}

[data-page="room"] .stage-card-field,
.room-page .stage-card-field {
  width: clamp(80px, 8vw, 98px);
  height: clamp(56px, 6vw, 72px);
  padding: 6px 5px 5px;
  gap: 4px;
}

[data-page="room"] .stage-field-number-list,
.room-page .stage-field-number-list {
  min-height: 20px;
  gap: 4px;
}

[data-page="room"] .stage-field-number,
[data-page="room"] .stage-field-number-static,
.room-page .stage-field-number,
.room-page .stage-field-number-static {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

[data-page="room"] .stage-field-occupants,
.room-page .stage-field-occupants {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  min-height: 24px;
}

/* Preview: separate field cards #1 and #2 so they don't touch */
[data-page="room"] .stage-card-1,
.room-page .stage-card-1 { left: 18%; }
[data-page="room"] .stage-card-2,
.room-page .stage-card-2 { left: 33%; }

/* Preview: shift deck/discard columns horizontally */
[data-page="room"] .stage-card-7,
[data-page="room"] .stage-card-8,
[data-page="room"] .stage-card-9,
.room-page .stage-card-7,
.room-page .stage-card-8,
.room-page .stage-card-9 {
  left: 71%;
}

[data-page="room"] .stage-card-10,
[data-page="room"] .stage-card-11,
[data-page="room"] .stage-card-12,
.room-page .stage-card-10,
.room-page .stage-card-11,
.room-page .stage-card-12 {
  left: 83%;
}

/* Preview: move #3, #6 and dice upward by about 3/4 card distance */
[data-page="room"] .stage-card-3,
.room-page .stage-card-3 { top: 34%; }
[data-page="room"] .stage-card-4,
.room-page .stage-card-4 { top: 34%; }
[data-page="room"] .stage-card-5,
.room-page .stage-card-5 { top: 60%; }
[data-page="room"] .stage-card-6,
.room-page .stage-card-6 { top: 60%; }
[data-page="room"] .stage-center-badges,
.room-page .stage-center-badges { top: 46%; }

/* Preview: vertical fine-tuning for pile/control groups */
[data-page="room"] .stage-card-8,
.room-page .stage-card-8 { top: 27%; }
[data-page="room"] .stage-card-11,
.room-page .stage-card-11 { top: 27%; }
[data-page="room"] .stage-card-9,
.room-page .stage-card-9 { top: 48%; }
[data-page="room"] .stage-card-12,
.room-page .stage-card-12 { top: 48%; }
[data-page="room"] .stage-card-active,
.room-page .stage-card-active { top: 67%; }
[data-page="room"] .stage-next-step-button,
.room-page .stage-next-step-button { bottom: 16%; }
[data-page="room"] .stage-pile-title-discard,
.room-page .stage-pile-title-discard { top: -18%; }

/* Preview: make 3-color deck/discard piles and active card horizontal */
[data-page="room"] .stage-card-pile,
[data-page="room"] .stage-card-active,
.room-page .stage-card-pile,
.room-page .stage-card-active {
  width: clamp(64px, 6.8vw, 80px);
  height: clamp(40px, 4.4vw, 52px);
}

.room-layout-game-fieldset .room-game-surface,
.room-layout-system-fieldset .room-system-surface {
  height: 300px;
  min-height: 300px;
  max-height: 300px;
}

.room-layout-player-row > fieldset {
  width: 100%;
}

.room-layout-player-row .card-body {
  display: block;
}

.room-system-surface {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.system-messages {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.system-line {
  display: block;
  margin-bottom: 4px;
  color: #665500;
  background: #fffbf0;
  border-left: 3px solid #ffcc99;
  padding: 4px 6px;
  border-radius: 2px;
  word-break: break-word;
  white-space: pre-wrap;
}

.system-line.system-timeout {
  border-left-color: #ffaa00;
  background: #fff9f0;
}

.system-line.system-timeout.system-timeout-self {
  border-left-color: #ff5555;
  background: #fff0f0;
  color: #880000;
}

.system-line.system-boomed {
  border-left-color: #ff5555;
  background: #fff0f0;
  color: #880000;
}

/* ============================================================
   Preview-only player card overrides
   Scoped to [data-page="room"] ??zero impact on real room

   Layout (per card):
     ???€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€??
     ??[avatar] ???弩dmg ?歹?hp                 ??
     ?? 30?30   ??? status                  ??
     ??         ???? area                    ??
     ??         ??[char badge] char name     ??
     ???€?€?€?€?€?€?€?€?€?氯??€?€?€?€?€?€?€?€?€?砂??€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€??
     ??[? nickname        ????col)  trip    ??
     ???€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?氯??€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€??
     ???????? equipment chips (scrollable)   ??
     ???€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€??
   ============================================================ */

/* --- Slot: remove forced 260px min-height --- */
[data-page="room"] .seat-slot,
.room-page .seat-slot {
  min-height: 148px;
}

[data-page="room"] .seat-slot > .player-card,
.room-page .seat-slot > .player-card {
  height: 148px;
  min-height: 148px;
  max-height: 148px;
}

/* --- Card shell: 2-col grid (nick | trip on row 2), tight padding --- */
[data-page="room"] .player-card,
.room-page .player-card {
  padding: 4px 5px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-template-rows: auto auto 1fr;
  gap: 0;
}

/* --- Row 1: header spans both columns --- */
[data-page="room"] .player-card-head,
.room-page .player-card-head {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 2px;
}

/* Colour cell hidden in header (DOM-patched to nickname row) */
[data-page="room"] .player-card-head .player-color-cell,
.room-page .player-card-head .player-color-cell {
  display: none;
}

/* Avatar: original size */
[data-page="room"] .avatar-badge,
.room-page .avatar-badge {
  width: 56px;
  height: 56px;
}

/* id-block: block layout ??HP+status inline, then area/char on own lines */
[data-page="room"] .player-id-block,
.room-page .player-id-block {
  display: block;
  min-width: 0;
}

/* HP strong inline so status can follow on same line */
[data-page="room"] .player-id-block strong,
.room-page .player-id-block strong {
  display: inline;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

/* Status sits right after HP on the same line */
[data-page="room"] .player-status-inline,
.room-page .player-status-inline {
  display: inline;
  margin-left: 5px;
  font-size: 12px;
  line-height: 1.35;
}

/* Area row DOM-patched inside id-block */
[data-page="room"] .player-id-block .player-card-meta,
.room-page .player-id-block .player-card-meta {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  gap: 0;
}

/* Character row DOM-patched inside id-block */
[data-page="room"] .player-id-block .player-card-meta-role,
.room-page .player-id-block .player-card-meta-role {
  margin-top: 1px;
  font-size: 12px;
}

/* --- Row 2 left: colour swatch + nickname (no diamond) --- */
[data-page="room"] .player-card-hp,
.room-page .player-card-hp {
  grid-column: 1;
  grid-row: 2;
  margin-top: 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: visible;
}

/* Diamond moved to trip row ??hide it here */
[data-page="room"] .player-card-hp .trip-prefix-diamond,
.room-page .player-card-hp .trip-prefix-diamond {
  display: none;
}

/* Colour swatch patched into this row */
[data-page="room"] .player-card-hp .player-color-cell,
.room-page .player-card-hp .player-color-cell {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

[data-page="room"] .player-card-hp .color-chip-static,
[data-page="room"] .player-card-hp .color-chip-trigger,
.room-page .player-card-hp .color-chip-static,
.room-page .player-card-hp .color-chip-trigger {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

[data-page="room"] .player-card-nickname,
.room-page .player-card-nickname {
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Row 2 right: coloured diamond + trip --- */
[data-page="room"] .player-card-role,
.room-page .player-card-role {
  grid-column: 2;
  grid-row: 2;
  margin-top: 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

[data-page="room"] .player-card-role > .trip-prefix-diamond,
.room-page .player-card-role > .trip-prefix-diamond {
  margin-left: 0;
}

[data-page="room"] .player-card-role .player-trip-link,
[data-page="room"] .player-card-role .player-role-name,
.room-page .player-card-role .player-trip-link,
.room-page .player-card-role .player-role-name {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  line-height: 1.2;
}

/* Hide original fixed-colour diamond (replaced by DOM-patched coloured one) */
[data-page="room"] .trip-prefix-diamond-fixed,
.room-page .trip-prefix-diamond-fixed {
  display: none;
}

/* Coloured ??now lives in trip row */
[data-page="room"] .player-card-role .trip-prefix-diamond,
.room-page .player-card-role .trip-prefix-diamond {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
}

/* --- Row 3: equipment (full-width, single-line scrollable) --- */
[data-page="room"] .equip-row,
.room-page .equip-row {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 3px;
  gap: 3px;
  max-height: 44px;
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-right: 2px;
}

/* --- Village info: remove card backgrounds, items on separate lines --- */
[data-page="room"] .village-info-row-primary,
[data-page="room"] .village-info-row-meta,
[data-page="room"] .village-info-row-actions,
.room-page .village-info-row-primary,
.room-page .village-info-row-meta,
.room-page .village-info-row-actions {
  border: none;
  background: none;
  padding: 1px 0;
  border-radius: 0;
}

[data-page="room"] .village-info-row-primary .village-info-item,
.room-page .village-info-row-primary .village-info-item {
  display: block;
}

[data-page="room"] .village-info-row-primary .village-info-item strong,
.room-page .village-info-row-primary .village-info-item strong {
  display: block;
  margin-right: 0;
}

[data-page="room"] .village-info-row-meta .village-info-item,
.room-page .village-info-row-meta .village-info-item {
  display: inline-flex;
  align-items: center;
}

[data-page="room"] .village-info-row-meta .village-info-item strong,
.room-page .village-info-row-meta .village-info-item strong {
  display: inline;
}

[data-page="room"] .village-info-value,
.room-page .village-info-value {
  display: block;
}

[data-page="room"] .village-info-settings-line,
.room-page .village-info-settings-line {
  display: block;
  width: 100%;
  color: #778;
  font-size: 11px;
  padding-left: 0;
}

[data-page="room"] .village-info-settings,
.room-page .village-info-settings {
  display: block;
  padding-left: 1em;
  color: #778;
  font-size: 11px;
}

/* Damage meter uses its own row styles to avoid coupling with village info rules */
[data-page="room"] .damage-meter-row,
.room-page .damage-meter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbfe;
  padding: 8px 10px;
}

[data-page="room"] .damage-meter-row + .damage-meter-row,
.room-page .damage-meter-row + .damage-meter-row {
  margin-top: 8px;
}

[data-page="room"] .damage-meter-item,
.room-page .damage-meter-item {
  display: inline-flex;
  align-items: center;
}

[data-page="room"] .damage-meter-item strong,
.room-page .damage-meter-item strong {
  color: #245;
  margin-right: 6px;
}

[data-page="room"] .equip-chip,
.room-page .equip-chip {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 4px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .room-layout-info-chat-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "chat"
      "players";
  }

  .room-layout-stage-row {
    grid-template-columns: 1fr;
  }

  .room-layout-game-fieldset .room-game-surface,
  .room-layout-system-fieldset .room-system-surface {
    max-height: none;
  }
}


/* Issue 69 - 手機版「遊戲桌面」卡片佈局簡化
   原本 .table-stage 的 12 張卡片（6 張場地卡 + 骰子 + 執行中卡片 + 下一步按鈕 + 6 張牌庫/棄牌堆)
   全部使用 vw 為單位的最小寬高與百分比絕對定位，是針對桌面寬版面（約 700px 以上）手動排成六角桌型調校的，
   在手機窄螢幕下容器寬度大幅縮小、但卡片維持最小寬高下限，導致卡片彼此重疊、也可能超出容器邊界蓋到下方的
   村民列表／系統訊息。這裡在手機斷點內改為由上而下、不重疊的直式清單版面：場地卡 2 欄、骰子/執行中卡片/
   下一步按鈕各自整列、牌庫與棄牌堆各自 3 欄並補上標題文字，不影響桌面／平板版原本的六角桌型。 */
@media (max-width: 640px) {
  .room-layout-game-fieldset .room-game-surface {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .room-layout-stage-row > .room-layout-game-fieldset > .card-body {
    overflow: visible;
  }

  [data-page="room"] .table-stage,
  [data-page="replay-room"] .table-stage,
  .room-page .table-stage,
  .table-stage {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 10px 8px;
  }

  .table-stage .stage-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
  }

  /* 場地卡：固定 2 欄，依實際場地編號 1~6（而非原本的六角排列順序）由上而下排列 */
  [data-page="room"] .table-stage .stage-card-field,
  [data-page="replay-room"] .table-stage .stage-card-field,
  .room-page .table-stage .stage-card-field,
  .table-stage .stage-card-field {
    flex: 0 0 calc(50% - 6px);
    width: auto;
    height: auto;
    min-height: 100px;
    padding: 10px 8px 8px;
  }

  .table-stage .stage-card-1 { order: 1; }
  .table-stage .stage-card-2 { order: 2; }
  .table-stage .stage-card-3 { order: 3; }
  .table-stage .stage-card-4 { order: 4; }
  .table-stage .stage-card-5 { order: 5; }
  .table-stage .stage-card-6 { order: 6; }

  /* 場地環狀連接線：照真正的場地編號順序（1→2→3→4→5→6→回到1）在卡片之間的縫隙畫一條短線，
     中間那排（場地 6、場地 3，畫面上顯示的編號）之間故意不畫，表示這兩個實際上不是直接相鄰 */
  .table-stage .stage-card-field::after {
    content: "";
    position: absolute;
    background: #6fa2bf;
    pointer-events: none;
  }

  .table-stage .stage-card-1::after {
    top: 50%;
    left: 100%;
    width: 12px;
    height: 2px;
    transform: translateY(-50%);
  }

  .table-stage .stage-card-2::after {
    left: 50%;
    top: 100%;
    width: 2px;
    height: 12px;
    transform: translateX(-50%);
  }

  .table-stage .stage-card-4::after {
    left: 50%;
    top: 100%;
    width: 2px;
    height: 12px;
    transform: translateX(-50%);
  }

  .table-stage .stage-card-6::after {
    top: 50%;
    right: 100%;
    width: 12px;
    height: 2px;
    transform: translateY(-50%);
  }

  .table-stage .stage-card-5::after {
    left: 50%;
    bottom: 100%;
    width: 2px;
    height: 12px;
    transform: translateX(-50%);
  }

  .table-stage .stage-card-3::after {
    left: 50%;
    bottom: 100%;
    width: 2px;
    height: 12px;
    transform: translateX(-50%);
  }

  [data-page="room"] .table-stage .stage-field-occupants,
  [data-page="replay-room"] .table-stage .stage-field-occupants,
  .room-page .table-stage .stage-field-occupants,
  .table-stage .stage-field-occupants {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-height: 32px;
  }

  /* 中央骰子：獨立整列、置中顯示 */
  .table-stage .stage-center-badges {
    order: 10;
    position: static;
    transform: none;
    flex: 0 0 calc(66.666% - 8px);
    justify-content: center;
    margin: 4px 0;
  }

  /* 執行中卡片：獨立整列，並補上「發動」提示文字，說明此格顯示的是正在發動效果的卡片 */
  [data-page="room"] .table-stage .stage-card-active,
  [data-page="replay-room"] .table-stage .stage-card-active,
  .room-page .table-stage .stage-card-active,
  .table-stage .stage-card-active {
    order: 11;
    flex: 0 0 calc(33.333% - 4px);
    width: auto;
    height: auto;
    min-height: 56px;
    margin: 4px 0;
    padding: 4px 6px;
    flex-direction: column;
    gap: 2px;
  }

  .table-stage .stage-active-card-name {
    position: static;
    transform: none;
    width: auto;
    font-size: 11px;
  }

  .table-stage .stage-card-active .stage-card-caption {
    display: block;
    position: static;
    font-size: 10px;
    color: #2a3540;
  }

  .table-stage .stage-card-active[data-card-color="black"] .stage-card-caption {
    color: #dce8f0;
  }

  /* 下一步／結束回合按鈕：獨立整列、加大觸控面積 */
  [data-page="room"] .table-stage .stage-next-step-button,
  [data-page="replay-room"] .table-stage .stage-next-step-button,
  .room-page .table-stage .stage-next-step-button,
  .table-stage .stage-next-step-button {
    order: 12;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 100%;
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }

  /* 牌庫／棄牌堆：隱藏「牌庫」「棄牌」標題文字節省空間，但牌組方塊本身維持顯示＋可點擊抽牌 */
  .table-stage .stage-pile-title {
    display: none;
  }

  [data-page="room"] .table-stage .stage-card-pile,
  [data-page="replay-room"] .table-stage .stage-card-pile,
  .room-page .table-stage .stage-card-pile,
  .table-stage .stage-card-pile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 calc(33.333% - 8px);
    width: auto;
    height: auto;
    min-height: 56px;
  }

  .table-stage .stage-card-pile .stage-pile-count {
    position: static;
    transform: none;
  }

  .table-stage .stage-card-7 { order: 21; }
  .table-stage .stage-card-8 { order: 22; }
  .table-stage .stage-card-9 { order: 23; }
  .table-stage .stage-card-10 { order: 25; }
  .table-stage .stage-card-11 { order: 26; }
  .table-stage .stage-card-12 { order: 27; }
}

/* 手機版點擊輸入框畫面自動放大修正：iOS Safari 等瀏覽器在 focus 到 font-size 小於 16px 的
   input/textarea/select 時，會自動把整個頁面放大方便輸入，點兩下才能縮回去，體驗不好。
   這裡把目前已知低於 16px 的兩個輸入元件（語言切換下拉選單、浮動聊天室輸入框）在手機斷點內
   調整為 16px，避免觸發這個自動放大行為；桌面/平板版維持原本的 13px 不變。 */
@media (max-width: 640px) {
  .lang-select {
    font-size: 16px;
  }

  .sh-fchat-input {
    font-size: 16px;
  }
}
/* 手機版浮動收合面板：血量、玩家列表（系統訊息、主畫面內嵌聊天室在手機版「遊戲房間」直接整個
   隱藏，不提供浮動面板；但在「回放／記錄」頁面兩者都維持原本的顯示方式，因為查看記錄時本來就是
   要看對戰紀錄內容，而且回放頁沒有右下角浮動聊天室可以替代）。
   把 room.html/replay_room.html 裡原本固定顯示的「傷害計量表」（血量）跟「村民列表」
   （玩家）兩個 fieldset，在手機斷點內搬進各自獨立、可收合的浮動面板（跟右下角的浮動
   聊天室同樣的操作方式），疊在聊天室按鈕的正上方：由下往上依序是聊天室、血量、玩家。
   這兩個 fieldset 的內容還是由原本的 room.js/replayRoom.js 更新（id 不變），這裡純粹
   只是改變它們顯示的位置。桌面／平板版不受影響（CSS 只在手機寬度生效，JS 也只在手機
   寬度才會搬動這兩個區塊）。 */
@media (max-width: 640px) {
  [data-page="room"] .room-layout-system-fieldset {
    display: none;
  }

  /* 主畫面內嵌的聊天室只在「遊戲房間」頁面隱藏：手機版已經有右下角浮動聊天室可以收發訊息，
     不需要再重複顯示一份；回放頁沒有浮動聊天室，所以維持原本顯示，確保還能看到對戰當時的
     聊天內容。 */
  [data-page="room"] .room-chat-fieldset {
    display: none;
  }

  .sh-floating-fieldset {
    position: fixed;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    font-size: 14px;
    font-family: inherit;
  }

  .sh-floating-hp {
    bottom: 160px;
  }

  .sh-floating-players {
    bottom: 222px;
  }

  .sh-ffs-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    background: #6fa2bf;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
    font-size: 20px;
    line-height: 1;
    transition: background 0.15s, box-shadow 0.15s;
  }

  .sh-ffs-toggle-icon {
    line-height: 1;
  }

  .sh-ffs-toggle-btn:hover {
    background: #7fb0cb;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }

  .sh-ffs-toggle-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .sh-ffs-toggle-btn.is-open {
    background: #4a7f9c;
  }

  /* 手機版玩家列表收合成浮動按鈕時，裡面的玩家卡片雖然還是會正常閃爍，
     但按鈕本身收合時看不到卡片，使用者不會注意到要點開——用同一組既有的
     attack-target-pulse／area-target-pulse 動畫讓按鈕本身也跟著閃爍提示。
     renderState() 裡會依目前的 playerPromptClass 切換這兩個 class。 */
  .sh-ffs-toggle-btn.attack-target-prompt {
    animation: attack-target-pulse 0.65s ease-in-out infinite;
  }

  .sh-ffs-toggle-btn.area-target-prompt {
    animation: area-target-pulse 0.65s ease-in-out infinite;
  }

  .sh-ffs-panel {
    display: flex;
    flex-direction: column;
    width: min(320px, calc(100vw - 40px));
    max-height: min(420px, calc(100vh - 160px));
    background: #fff;
    border: 1px solid var(--line-strong, #6eb1d5);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(21, 49, 67, 0.22);
    overflow: hidden;
  }

  .sh-ffs-panel[hidden] {
    display: none !important;
  }

  .sh-ffs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--primary, #09c);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
  }

  .sh-ffs-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sh-ffs-collapse-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .sh-ffs-collapse-btn:hover {
    opacity: 0.75;
  }

  .sh-ffs-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px;
    background: #fff;
  }

  .sh-ffs-body fieldset {
    margin: 0 0 10px;
  }

  .sh-ffs-body fieldset:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .sh-floating-fieldset {
    right: 14px;
  }

  .sh-floating-hp {
    bottom: 146px;
  }

  .sh-floating-players {
    bottom: 200px;
  }

  .sh-ffs-toggle-btn {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}