/* Phone layout: one thumb reachable dock, no scrolling anywhere. */

.screen--start {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom));
}

.start-top { align-items: center; flex-wrap: wrap; row-gap: 8px; column-gap: 10px; }
.brand-mark { width: 40px; height: 40px; font-size: 22px; border-radius: 12px; }
.brand-mark::after { inset: -4px; border-radius: 16px; }
.brand-text h1 { font-size: 20px; }
.brand-text p { font-size: 10.5px; }
.top-actions { gap: 6px; }
.site-nav { padding: 3px; }
.nav-link { padding: 6px 11px; font-size: 12px; gap: 5px; }
.nav-dot { width: 5px; height: 5px; }
.lang-btn { padding: 6px 11px; font-size: 12px; }
.lang-icon { display: none; }

.start-main {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mode-card { padding: 11px 13px; gap: 10px; }
.mode-icon { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.mode-body b { font-size: 14px; }
.mode-body i { font-size: 11px; }

.panel { padding: 13px; }
.panel.is-active { gap: 10px; }
.diff-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
.diff-btn { padding: 10px; }
.diff-btn .diff-ico { display: none; }
.diff-btn b { font-size: 13.5px; }
.diff-btn i { display: none; }
.code-input { font-size: 18px; padding: 11px; }
.btn { padding: 12px 15px; font-size: 14px; }
.btn--big { padding: 16px; font-size: 17px; }
.name-input { padding: 10px 12px; font-size: 13.5px; }
.set-label, .set-value { font-size: 11.5px; }

.screen--play {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(4px + env(safe-area-inset-top)) 8px calc(6px + env(safe-area-inset-bottom));
  gap: 6px;
}

.hud { padding: 4px 2px; gap: 7px; }
.hud-btn { width: 34px; height: 34px; font-size: 16px; }
.hud-round { font-size: 13px; }
.hud-mode { font-size: 10px; }
.hud-score { font-size: 17px; padding: 3px 10px; }

.board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "op"
    "arena"
    "me";
  gap: 6px;
  min-height: 0;
}

#panel-op { grid-area: op; }
#panel-me { grid-area: me; }
.arena { grid-area: arena; }
.feed { display: none; }

/* 多人棋盘：玩家列表占满剩余高度，牌桌固定在下方 */
#board-multi {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "players"
    "arena";
}

#board-multi .plist { grid-area: players; overflow-y: auto; gap: 6px; padding-right: 1px; }
#board-multi .arena { grid-area: arena; }
#board-multi .pcard { padding: 7px 9px; gap: 8px; border-radius: 10px; }
#board-multi .pcard-avatar { width: 26px; height: 26px; font-size: 13px; }
#board-multi .pcard-name { font-size: 12.5px; }
#board-multi .pcard-stats { gap: 8px; font-size: 10.5px; }
#board-multi .pcard-stats .hearts svg { width: 13px; height: 13px; }
#board-multi .mstatus { gap: 8px; }
#board-multi .timer { width: clamp(80px, 20vmin, 118px); }
#board-multi .timer-num { font-size: 22px; }
#board-multi .mprompt-text { font-size: 12.5px; }
#board-multi .role-banner.is-on { padding: 4px 10px; font-size: 11.5px; }
#board-multi .msum-line { padding: 5px 8px; font-size: 11px; gap: 8px; }

.fighter {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "head head"
    "hearts res";
  gap: 4px 8px;
  padding: 7px 11px;
  border-radius: 12px;
}

.fighter-head { grid-area: head; }
.hearts { grid-area: hearts; align-items: center; }
.res { grid-area: res; justify-content: flex-end; }
.fighter-name { font-size: 13px; }
.chip { font-size: 10px; padding: 2px 7px; }
.hearts svg { width: 18px; height: 18px; }
.res-item { padding: 3px 8px; font-size: 11.5px; gap: 4px; }
.res-icon { font-size: 13px; }

.arena { padding: 2px; gap: 6px; align-content: center; }
.arena-top { gap: 6px; }
.badge { font-size: 10.5px; padding: 3px 9px; }
.timer { width: clamp(96px, 24vmin, 140px); }
.timer-num { font-size: 26px; }
.timer-label { font-size: 10px; }
.cards { gap: 8px; }
.card { padding: 7px 6px; gap: 2px; border-radius: 10px; }
.card-icon, .card-svg { font-size: 21px; height: 24px; }
.card-name { font-size: 12px; }
.card-dmg { font-size: 10px; min-height: 12px; }
.vs { font-size: 10px; }

.dock {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(58px, 1fr));
  gap: 6px;
  padding-top: 4px;
}

.act { border-radius: 12px; padding: 6px 4px; }
.act-icon { font-size: 21px; }
.act-name { font-size: 13px; }
.act-tag { font-size: 9.5px; }
.act-key { display: none; }
.act-cost { font-size: 10px; padding: 0 5px; top: 4px; right: 5px; }

/* 右下角音乐按钮：手机上收小一档，尽量少压住底部出招键 */
.music {
  right: calc(8px + env(safe-area-inset-right));
  bottom: calc(8px + env(safe-area-inset-bottom));
  gap: 6px;
}

.music-btn { width: 38px; height: 38px; font-size: 17px; }
.music-meta { max-width: 54vw; padding: 6px 9px; font-size: 10.5px; }

.music-panel { width: min(70vw, 206px); padding: 9px 10px; gap: 8px; }
.music-now-name { font-size: 12px; }
.music-ctl { width: 32px; height: 32px; font-size: 14px; }
.music-ctl--main { width: 38px; height: 38px; font-size: 16px; }

.sheet { padding: 10px; }
.sheet-card { padding: 15px; gap: 10px; border-radius: 14px; }
.sheet-title { font-size: 16px; }
.room-code { font-size: 22px; }
.btn--big { padding: 15px; }

.replay-tab { padding: 7px 10px; font-size: 12.5px; }
.replay-frame { padding: 11px; gap: 5px; }
.replay-ctrl { gap: 6px; }
.replay-ctrl .btn { flex: 1; padding: 10px 8px; font-size: 13px; }
.rv-block { padding: 10px; }
.rv-line { padding: 5px 8px; font-size: 11.5px; gap: 6px; }
.rv-note { display: none; }

@media (max-height: 720px) {
  .timer { width: clamp(84px, 19vmin, 118px); }
  .timer-num { font-size: 22px; }
  .dock { grid-template-rows: repeat(2, minmax(50px, 1fr)); }
  .act-icon { font-size: 18px; }
  .act-name { font-size: 12px; }
  .act-tag { display: none; }
  .mode-card { padding: 9px 12px; }
  .mode-body i { display: none; }
}

@media (max-height: 620px) {
  .cards { display: none; }
  .timer { width: 96px; }
  .hud-mode { display: none; }
}

/* 窄屏：顶部栏优先保证导航与语言切换不换行溢出 */
@media (max-width: 400px) {
  .brand-text p { display: none; }
  .nav-dot { display: none; }
  .nav-link { padding: 6px 9px; }
}