/* ==========================================================================
   飞行棋
   ========================================================================== */

.fxq-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 统一宽度：与上方 .mode-tabs（min(94vw, 620px)）等宽 */
.fxq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(94vw, 620px);
}

.fxq-slot,
.fxq-status,
.fxq-banner,
.fxq-notice,
.fxq-controls,
.fxq-rules { width: 100%; }

.fxq-slot { display: flex; flex-direction: column; gap: 8px; }
.fxq-slot:empty { display: none; }

/* ------------------------------ 人数选择 -------------------------------- */

.fxq-counts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
.fxq-counts-label { margin-right: 4px; font-size: 12.5px; color: var(--text-mute); }

.fxq-count-btn {
  padding: 7px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.fxq-count-btn:hover { color: var(--text); border-color: var(--border); }
.fxq-count-btn.is-active {
  color: #0a0e1a;
  border-color: transparent;
  background: linear-gradient(120deg, #a78bfa, #22d3ee);
  box-shadow: 0 12px 26px -14px rgba(139, 92, 246, 0.95);
}

/* ------------------------------ 状态栏 ---------------------------------- */

.fxq-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.fxq-turn {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.fxq-turn-dot {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background .25s, box-shadow .25s;
}
.fxq-turn-dot.is-red { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); }
.fxq-turn-dot.is-yellow { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }
.fxq-turn-dot.is-blue { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22); }
.fxq-turn-dot.is-green { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); }

.fxq-dice {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(6, 9, 20, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.fxq-dice-face { font-size: 24px; font-weight: 800; line-height: 1; color: #eaf0ff; }
.fxq-dice.is-empty .fxq-dice-face { color: var(--text-mute); }
.fxq-dice.is-rolling { animation: fxq-dice-roll .55s linear infinite; }

@keyframes fxq-dice-roll {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ------------------------------ 结果横幅 -------------------------------- */

.fxq-banner {
  padding: 16px 20px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  animation: fxq-pop .34s cubic-bezier(.2, .8, .3, 1);
}
.fxq-banner[hidden] { display: none; }
.fxq-banner.is-red { border-color: rgba(239, 68, 68, 0.5); background: linear-gradient(120deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.04)); }
.fxq-banner.is-yellow { border-color: rgba(245, 158, 11, 0.5); background: linear-gradient(120deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.04)); }
.fxq-banner.is-blue { border-color: rgba(59, 130, 246, 0.5); background: linear-gradient(120deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.04)); }
.fxq-banner.is-green { border-color: rgba(34, 197, 94, 0.5); background: linear-gradient(120deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04)); }

.fxq-banner-title { font-size: 19px; font-weight: 700; }
.fxq-banner.is-red .fxq-banner-title { color: #f87171; }
.fxq-banner.is-yellow .fxq-banner-title { color: #fbbf24; }
.fxq-banner.is-blue .fxq-banner-title { color: #60a5fa; }
.fxq-banner.is-green .fxq-banner-title { color: #4ade80; }

.fxq-banner-detail { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); }
.fxq-banner-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 13px; }
.fxq-banner-actions:empty { display: none; }
.fxq-wait { font-size: 12.5px; color: var(--text-dim); }

@keyframes fxq-pop {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------- 提示 ----------------------------------- */

.fxq-notice {
  padding: 10px 16px;
  font-size: 12.5px;
  text-align: center;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
.fxq-notice[hidden] { display: none; }
.fxq-notice.is-error {
  color: #fda4af;
  border-color: rgba(251, 113, 133, 0.4);
  background: rgba(251, 113, 133, 0.12);
}

/* ------------------------------- 棋盘 ----------------------------------- */

.fxq-board-wrap { display: grid; place-items: center; width: 100%; }

.fxq-board {
  position: relative;
  width: min(90vw, 540px);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid rgba(90, 66, 30, 0.45);
  background:
    radial-gradient(120% 120% at 16% 0%, rgba(255, 255, 255, 0.55), transparent 52%),
    linear-gradient(150deg, #fdf7e7, #f4e7cb 60%, #ecdcb8);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 26px 54px -26px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* 四方机场底衬 */
.fxq-base { position: absolute; border-radius: 16px; }
.fxq-base.is-red { background: rgba(239, 68, 68, 0.24); box-shadow: inset 0 0 0 1.5px rgba(239, 68, 68, 0.4); }
.fxq-base.is-yellow { background: rgba(245, 158, 11, 0.26); box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, 0.42); }
.fxq-base.is-blue { background: rgba(59, 130, 246, 0.22); box-shadow: inset 0 0 0 1.5px rgba(59, 130, 246, 0.4); }
.fxq-base.is-green { background: rgba(34, 197, 94, 0.22); box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, 0.4); }

/* 中心终点 */
.fxq-center {
  position: absolute;
  border-radius: 12px;
  background: conic-gradient(#ef4444 0 25%, #f59e0b 0 50%, #3b82f6 0 75%, #22c55e 0 100%);
  opacity: 0.9;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 18px -4px rgba(0, 0, 0, 0.4);
}

/* 虚线飞行航道 */
.fxq-fly-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fxq-fly-line { fill: none; stroke-width: 0.12; stroke-dasharray: 0.38 0.3; opacity: 0.75; }
.fxq-fly-line.is-red { stroke: #dc2626; }
.fxq-fly-line.is-yellow { stroke: #d97706; }
.fxq-fly-line.is-blue { stroke: #2563eb; }
.fxq-fly-line.is-green { stroke: #16a34a; }

/* 15×15 格子 */
.fxq-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
}
.fxq-cell { position: relative; }

.fxq-cell.is-track,
.fxq-cell.is-home {
  border-radius: 4px;
  background: #fffdf7;
  box-shadow: inset 0 0 0 1.2px rgba(120, 90, 40, 0.28);
}
.fxq-cell.is-home { box-shadow: inset 0 0 0 1.2px rgba(120, 90, 40, 0.4); }

/* 同色格 */
.fxq-cell.is-color-red { background: #f87171; }
.fxq-cell.is-color-yellow { background: #fbbf24; }
.fxq-cell.is-color-blue { background: #60a5fa; }
.fxq-cell.is-color-green { background: #4ade80; }

/* 飞行航道入口 / 出口 */
.fxq-cell.is-fly-src::after {
  content: "✈";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  line-height: 1;
  color: rgba(40, 22, 0, 0.62);
}
.fxq-cell.is-fly-dst { box-shadow: inset 0 0 0 2.4px rgba(255, 255, 255, 0.95), inset 0 0 0 3.4px rgba(40, 22, 0, 0.35); }

/* 机场停机位 / 终点展示位 */
.fxq-cell.is-base-slot::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1.5px dashed rgba(60, 40, 10, 0.4);
  background: rgba(255, 255, 255, 0.5);
}
.fxq-cell.is-goal-slot::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1.5px rgba(60, 40, 10, 0.25);
}

/* 棋子层 */
.fxq-planes { position: absolute; inset: 0; pointer-events: none; }

.fxq-plane {
  position: absolute;
  width: 5.6%;
  height: 5.6%;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: clamp(7px, 1.5vw, 12px);
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: default;
  pointer-events: auto;
  z-index: 3;
  transition:
    left .34s cubic-bezier(.3, .9, .3, 1),
    top .34s cubic-bezier(.3, .9, .3, 1),
    transform .18s,
    box-shadow .2s;
}
.fxq-plane[hidden] { display: none; }

.fxq-plane.is-red { background: radial-gradient(circle at 32% 28%, #fca5a5, #dc2626 72%); }
.fxq-plane.is-yellow { background: radial-gradient(circle at 32% 28%, #fde68a, #d97706 72%); }
.fxq-plane.is-blue { background: radial-gradient(circle at 32% 28%, #93c5fd, #2563eb 72%); }
.fxq-plane.is-green { background: radial-gradient(circle at 32% 28%, #86efac, #16a34a 72%); }
.fxq-plane.is-red,
.fxq-plane.is-yellow,
.fxq-plane.is-blue,
.fxq-plane.is-green {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.fxq-plane-icon { font-size: 1em; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }

.fxq-plane.is-movable {
  cursor: pointer;
  z-index: 6;
  animation: fxq-plane-pulse 1.05s ease-in-out infinite;
}
.fxq-plane.is-movable:hover { transform: translate(-50%, -50%) scale(1.2); }

@keyframes fxq-plane-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9), 0 2px 5px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12), 0 2px 5px rgba(0, 0, 0, 0.4); }
}

.fxq-plane.is-last { z-index: 5; box-shadow: 0 0 0 2px #fbbf24, 0 0 12px rgba(251, 191, 36, 0.85); }
.fxq-plane.is-home { width: 4.6%; height: 4.6%; opacity: 0.95; }

/* ------------------------------- 控制区 --------------------------------- */

.fxq-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.fxq-controls:empty { display: none; }

/* -------------------------------- 规则 ---------------------------------- */

.fxq-rules { margin-top: 4px; }

/* ------------------------------ 房间模式 -------------------------------- */

.fxq-lobby {
  display: grid;
  gap: 18px;
  width: min(94vw, 620px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.fxq-lobby > .fxq-notice { grid-column: 1 / -1; }

.fxq-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}
.fxq-card h3 { margin: 0 0 6px; font-size: 16px; }
.fxq-card p.hint { margin: 0 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--text-mute); }

.fxq-field { display: block; margin-bottom: 14px; }
.fxq-field > span { display: block; margin-bottom: 7px; font-size: 12.5px; color: var(--text-dim); }

.fxq-input {
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(6, 9, 18, 0.55);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.fxq-input:focus { border-color: rgba(139, 92, 246, 0.7); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
.fxq-input::placeholder { color: var(--text-mute); }
.fxq-input.is-room { letter-spacing: 0.22em; text-align: center; font-size: 20px; font-weight: 700; }
select.fxq-input { appearance: none; cursor: pointer; }
select.fxq-input option { color: #101827; background: #ffffff; }

.fxq-lobby-actions { display: flex; gap: 10px; margin-top: auto; }
.fxq-lobby-actions .btn { flex: 1 1 auto; }

.fxq-room-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.fxq-room-code { display: flex; align-items: center; gap: 10px; }
.fxq-room-code small { font-size: 12px; color: var(--text-mute); }
.fxq-room-code b { font-size: 22px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.fxq-copy { padding: 6px 12px; font-size: 12px; border-radius: 999px; }

.fxq-room-mode {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-dim);
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.035);
}

.fxq-seats { display: flex; flex-wrap: wrap; gap: 10px; }

.fxq-seat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-dim);
}
.fxq-seat .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: rgba(255, 255, 255, 0.16); }
.fxq-seat.is-red .dot { background: #ef4444; }
.fxq-seat.is-yellow .dot { background: #f59e0b; }
.fxq-seat.is-blue .dot { background: #3b82f6; }
.fxq-seat.is-green .dot { background: #22c55e; }
.fxq-seat.is-active { color: var(--text); border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.12); }
.fxq-seat.is-me { box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.5); }
.fxq-seat.is-offline { opacity: 0.55; }

.fxq-seat-info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.fxq-seat-info b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8em; }
.fxq-seat-info small { font-size: 11.5px; color: var(--text-mute); }

/* ------------------------------ 响应式 ---------------------------------- */

@media (max-width: 640px) {
  .fxq-board { width: min(94vw, 420px); }
  .fxq-status { padding: 10px 13px; }
  .fxq-dice { width: 44px; height: 44px; }
  .fxq-dice-face { font-size: 20px; }
  .fxq-lobby { gap: 12px; }
  .fxq-card { padding: 15px; }
  .fxq-room-bar { flex-direction: column; align-items: flex-start; }
  .fxq-seat-info b { max-width: 6em; }
}