.team-mode-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.team-mode-picker:has(#team-create-btn.hidden) #arena-create-btn { grid-column:1 / -1; }
.team-mode-picker .btn { width:100%; min-height:56px; margin:0; font-size:.95rem; font-weight:700; }
body:has(#view-team-room:not(.hidden)) #main-header { display:none !important; }
body:has(#view-team-room:not(.hidden)) .container { padding-top:calc(8px + var(--safe-top)); }
/* 這個畫面顯示時是 flex：一律上下排列。以前只有對戰中才改成上下，等待隊友時標題列被擠到左邊變直排 */
#view-team-room { flex-direction:column; }
#view-team-room > .nav-bar, #view-team-room > .team-room { width:100%; box-sizing:border-box; }
#view-team-room .nav-bar { margin-bottom:8px; }
.team-room { max-width:820px; margin:0 auto; padding:24px 16px 100px; }
.team-room-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.team-kicker { color:var(--accent,#a5c4ff); font-size:.68rem; font-weight:800; letter-spacing:.2em; }
.team-room h2 { margin:.25rem 0 0; font-size:clamp(1.45rem,4vw,2rem); }
.team-room-code { font:700 1.15rem monospace; letter-spacing:.14em; padding:9px 12px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.05); }
#view-team-room:not([data-phase="waiting"]) .team-room-code { display:none; }
.team-room-notice,.team-room-feedback,.team-hint { color:var(--text-sub); line-height:1.6; font-size:.86rem; }
.team-room-feedback { min-height:1.7em; margin-top:20px; }
.team-room-feedback:empty,.team-room-notice:empty { display:none; }
.team-last-result { padding:11px 15px; border:1px solid rgba(182,203,255,.3); border-radius:14px; background:rgba(146,180,244,.1); font-weight:700; }
.team-last-result.is-new { animation:team-impact .45s both; }
.team-share,.team-actions { display:flex; gap:10px; margin:18px 0; flex-wrap:wrap; }
.team-button { border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.08); color:var(--text-main); min-height:44px; padding:10px 15px; font:inherit; cursor:pointer; transition:transform .18s,background .18s,box-shadow .18s; }
.team-button:hover:not(:disabled) { transform:translateY(-2px); background:rgba(255,255,255,.14); box-shadow:0 8px 24px rgba(0,0,0,.15); }
.team-button:active:not(:disabled) { transform:scale(.97); }
.team-button:disabled { opacity:.45; cursor:default; }
.team-button.primary,.team-start { background:linear-gradient(135deg,rgba(123,184,255,.38),rgba(174,132,255,.32)); border-color:rgba(167,191,255,.48); }
.team-button.small { min-height:32px; padding:5px 10px; font-size:.76rem; }
.team-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:22px 0; }
.team-side { min-width:0; padding:16px; border:1px solid rgba(143,177,255,.24); border-radius:22px; background:linear-gradient(145deg,rgba(72,108,177,.2),rgba(255,255,255,.035)); backdrop-filter:blur(16px); }
.team-side.side-1 { border-color:rgba(230,173,231,.25); background:linear-gradient(145deg,rgba(151,86,153,.2),rgba(255,255,255,.035)); }
.team-side h3 { margin:0 0 14px; }
.team-health { font-weight:700; font-size:.84rem; margin-bottom:7px; }
.team-health-track { height:8px; border-radius:10px; background:rgba(255,255,255,.12); overflow:hidden; margin-bottom:13px; }
.team-health-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#73d3f6,#b4adff); transition:width .5s; }
.team-uses { color:var(--text-sub); font-size:.74rem; margin-bottom:10px; }
.side-1 .team-health-track span { background:linear-gradient(90deg,#f4b4d0,#d7a3ff); }
.team-player { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px; margin-top:8px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(0,0,0,.1); }
.team-player.is-me { border-color:rgba(255,214,126,.65); }
.team-player-avatar { position:relative; flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(190,211,255,.18); font-weight:800; }
.team-player-avatar:is(button) { padding:0; border:1px solid rgba(255,255,255,.4); color:var(--text-main); cursor:pointer; }
.team-player-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.team-player-avatar .team-player-frame { position:absolute; inset:-8%; width:116%; height:116%; border-radius:0; object-fit:contain; pointer-events:none; }
.team-player-actions { display:flex; gap:6px; flex-wrap:wrap; width:100%; }
.team-player-actions.hidden { display:none; }
.team-player-info { display:flex; flex:1; min-width:75px; flex-direction:column; gap:2px; }
.team-player-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; }
.team-player-info span { font-size:.68rem; color:var(--text-sub); }
.team-role { padding-top:14px; font-size:.78rem; color:var(--text-sub); }
.team-control,.team-settings,.team-question,.team-action,.team-final,.team-request { border:1px solid var(--border); border-radius:20px; background:rgba(255,255,255,.055); backdrop-filter:blur(14px); padding:18px; margin:14px 0; }
.team-control label { display:block; font-weight:700; margin-bottom:9px; }
.team-select { width:100%; min-height:48px; color:var(--text-main); background:rgba(20,23,40,.95); border:1px solid var(--border); border-radius:13px; padding:10px; font:inherit; }
.team-setting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.team-setting-grid label { display:flex; flex-direction:column; gap:6px; color:var(--text-sub); font-size:.8rem; }
.team-setting-grid input,.team-setting-grid select { width:100%; box-sizing:border-box; color:var(--text-main); background:rgba(20,23,40,.95); border:1px solid var(--border); border-radius:10px; padding:10px; font:inherit; }
.team-range { border-color:rgba(158,201,255,.45); background:linear-gradient(135deg,rgba(116,166,241,.13),rgba(255,255,255,.04)); }
.team-range strong { display:block; margin-bottom:8px; }
.team-range p { margin:4px 0; color:var(--text-sub); }
.team-choice-group { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.team-choice { flex:1 1 auto; min-height:42px; padding:8px 12px; border-radius:13px; font-weight:700; }
.team-choice.is-selected,.team-book-card.is-selected,.team-role-card.is-selected { border-color:rgba(139,215,255,.8); background:linear-gradient(140deg,rgba(82,183,235,.29),rgba(167,132,234,.19)); box-shadow:inset 0 0 0 1px rgba(141,211,255,.19),0 5px 22px rgba(42,142,216,.12); }
.team-source-tabs .team-choice { flex:1 1 42%; }
.team-levels .team-choice { flex:1 1 27%; }
.team-book-search { width:100%; box-sizing:border-box; min-height:48px; margin:3px 0 12px; padding:10px 14px; border:1px solid var(--border); border-radius:14px; background:rgba(9,17,35,.43); color:var(--text-main); font:inherit; }
.team-book-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:240px; overflow:auto; padding:2px; scrollbar-width:thin; }
.team-book-card { width:100%; text-align:left; overflow-wrap:anywhere; }
.team-book-list p { grid-column:1 / -1; padding:12px; }
.team-source-applied { padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.045); overflow-wrap:anywhere; }
.team-source-save { width:100%; margin:4px 0 10px; }
.team-setting-choice { display:flex; flex-direction:column; gap:5px; color:var(--text-sub); font-size:.8rem; }
.team-setting-choice .team-choice-group { margin:0; }
.team-setting-choice .team-choice { min-height:38px; padding:7px; font-size:.8rem; }
.team-role-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:290px; overflow:auto; padding:2px; }
.team-role-card { text-align:left; font-weight:700; }
.team-role-card strong,.team-role-card span { display:block; }
.team-role-card span { margin-top:4px; color:var(--text-sub); font-size:.75rem; font-weight:400; line-height:1.4; }
.team-range-row { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:10px; }
.team-range-row label { margin:0; font-size:.8rem; }
.team-range-row .team-button { white-space:nowrap; }
.team-role-pick h3 { margin:0 0 8px; }
.team-role-confirm { display:block; width:100%; margin:10px 0; font-weight:800; }
.team-start { display:block; width:100%; font-weight:800; margin:10px 0; }
.team-round { color:var(--text-sub); font-size:.8rem; }
.team-timer { float:right; font-weight:800; font-variant-numeric:tabular-nums; }
.team-question h3 { margin:22px 0; font-size:clamp(1.3rem,5vw,2rem); }
.team-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.team-option { width:100%; text-align:left; min-height:64px; padding:14px 18px; overflow-wrap:anywhere; border-radius:16px; font-size:.98rem; font-weight:650; line-height:1.45; background:linear-gradient(130deg,rgba(141,182,247,.105),rgba(255,255,255,.045)); transition:border-color .16s,background .16s,box-shadow .16s,transform .16s,opacity .16s; }
.team-option:not(:disabled):hover { border-color:rgba(169,215,255,.65); background:rgba(136,182,250,.17); }
.team-option:focus-visible { outline:2px solid #a6e9ff; outline-offset:2px; }
.team-option.team-option-submitted { border-color:rgba(183,205,255,.9); background:rgba(132,172,244,.22); box-shadow:inset 0 0 0 1px rgba(183,205,255,.5); animation:team-answer-pulse .28s ease-out; }
.team-option.team-option-right, .team-option.team-option-right:disabled { opacity:1; border-color:#52dca1; color:var(--text-main); background:linear-gradient(135deg,rgba(53,188,128,.28),rgba(39,130,111,.16)); box-shadow:inset 0 0 0 1px rgba(98,234,169,.65),0 0 20px rgba(59,205,134,.16); }
.team-option.team-option-wrong, .team-option.team-option-wrong:disabled { opacity:1; border-color:#ef8484; color:var(--text-main); background:rgba(206,76,87,.18); box-shadow:inset 0 0 0 1px rgba(237,113,121,.38); }
.team-answer-note { display:flex; align-items:center; gap:8px; margin:16px 0 0; }
.team-answer-note::before { content:'✓'; width:19px; height:19px; display:grid; place-items:center; border-radius:50%; background:rgba(67,202,142,.2); color:#8cf5bd; font-size:.7rem; }
.team-answer-note.is-wrong::before { content:'×'; background:rgba(206,76,87,.2); color:#ffaaa9; }
.team-question { animation:team-rise .3s ease-out both; border-color:rgba(153,192,249,.3); background:linear-gradient(160deg,rgba(50,80,135,.19),rgba(255,255,255,.045) 55%,rgba(101,67,135,.1)); box-shadow:0 14px 40px rgba(0,0,0,.11); }
.team-question h3 { clear:both; padding:16px 0 6px; text-align:center; letter-spacing:.02em; }
.team-timer { color:#b9eaff; }
.team-option.is-removed { text-decoration:line-through; opacity:.35; }
.team-action h3,.team-final h3 { margin-top:0; }
.team-skill { display:block; width:100%; margin:0 0 10px; border-color:rgba(192,158,255,.5); }
@keyframes team-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes team-impact { 0% { opacity:0; transform:scale(.95); filter:brightness(1.8); } 70% { filter:brightness(1.3); } 100% { opacity:1; transform:scale(1); filter:brightness(1); } }
@keyframes team-answer-pulse { 50% { transform:scale(.97); } }
@media(max-width:540px) {
  .team-room { padding:8px 10px 80px; }
  .team-room-head { margin-bottom:6px; }
  .team-kicker { display:none; }
  .team-room h2 { font-size:1.25rem; }
  .team-room-notice { margin:4px 0 8px; line-height:1.35; font-size:.76rem; }
  .team-share { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0; }
  .team-share .team-button { min-width:0; padding:8px; font-size:.78rem; }
  .team-last-result { padding:8px 10px; font-size:.8rem; }
  .team-board { gap:7px; margin:16px 0; }
  .team-side { padding:10px; border-radius:16px; }
  .team-player { padding:7px; }
  .team-player-avatar { width:32px; height:32px; }
  .team-player .team-button { width:100%; }
  .team-control,.team-question,.team-action,.team-final { margin:8px 0; padding:12px; }
  .team-role-grid { max-height:clamp(150px,30dvh,240px); }
  .team-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .team-option { min-height:60px; padding:9px 10px; font-size:.9rem; }
  .team-question h3 { margin:8px 0 12px; padding:4px 0; font-size:clamp(1.2rem,5vw,1.55rem); }
  .team-book-list { grid-template-columns:1fr; }
  .team-setting-grid { grid-template-columns:1fr; }
}
/* Match the 1v1 battle screen: two full-width health cards, then the current
   question or decision in the remaining viewport. The lobby stays scrollable. */
#view-team-room:not([data-phase="waiting"]) .team-room-head { display:none; }
#view-team-room:is([data-phase="question"],[data-phase="action"]) .team-room-notice { display:none; }
body:has(#view-team-room:is([data-phase="question"],[data-phase="action"]):not(.hidden)) { overflow:hidden; }
body:has(#view-team-room:is([data-phase="question"],[data-phase="action"]):not(.hidden)) .container {
  height:100vh; height:100dvh; min-height:0; box-sizing:border-box;
  padding-bottom:calc(8px + var(--safe-bottom,0px)); overflow:hidden;
}
#view-team-room:is([data-phase="question"],[data-phase="action"]):not(.hidden) {
  flex:1; min-height:0; display:flex !important; flex-direction:column;
}
#view-team-room:is([data-phase="question"],[data-phase="action"]) .nav-bar { flex:none; margin-bottom:6px; }
#view-team-room:is([data-phase="question"],[data-phase="action"]) .team-room {
  display:flex; flex-direction:column; flex:1; min-height:0; width:100%; box-sizing:border-box; padding:0;
}
#view-team-room:is([data-phase="question"],[data-phase="action"]) #team-room-stage {
  display:flex; flex-direction:column; flex:1; min-height:0;
}
.team-hud { display:flex; flex-direction:column; flex:none; gap:8px; margin:0 0 8px; }
.team-hud-side { padding:9px 12px; border:1px solid var(--border); border-radius:13px; background:var(--card-bg); }
.team-hud-top { display:flex; align-items:center; gap:10px; min-width:0; }
.team-hud-avatars { display:flex; flex:none; padding-right:8px; }
.team-hud-avatar { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:rgba(135,174,241,.28); font-weight:700; overflow:hidden; }
.team-hud-avatar + .team-hud-avatar { margin-left:-9px; }
.team-hud-avatar img { width:100%; height:100%; object-fit:cover; }
.team-hud-info { flex:1; min-width:0; }
.team-hud-info strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.team-hud-info .team-role { display:block; padding:0; margin-top:2px; font-size:.7rem; }
.team-hud-hp { flex:none; font-size:1.12rem; font-variant-numeric:tabular-nums; }
.team-hud-meter { height:8px; margin-top:8px; overflow:hidden; border-radius:8px; background:rgba(128,128,128,.22); }
.team-hud-meter span { display:block; height:100%; border-radius:inherit; background:#3fb98a; transition:width .45s; }
.team-hud-side.is-foe .team-hud-meter span { background:#e0554f; }
.team-hud-uses { display:flex; gap:8px; margin-top:6px; }
.team-hud-use { color:var(--text-sub); font-size:.68rem; }
.team-hud-use.heal::before,.team-hud-use.shield::before { content:''; display:inline-block; width:12px; height:4px; margin-right:4px; vertical-align:middle; border-radius:3px; background:#3fb98a; }
.team-hud-use.shield::before { background:#7c9cff; }
#view-team-room:is([data-phase="question"],[data-phase="action"]) .team-last-result { flex:none; margin-bottom:6px; }
#view-team-room:is([data-phase="question"],[data-phase="action"]) .team-question,
#view-team-room:is([data-phase="question"],[data-phase="action"]) .team-action {
  display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none; margin:0; padding:0 2px 8px; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none;
}
#view-team-room:is([data-phase="question"],[data-phase="action"]) :is(.team-question,.team-action)::-webkit-scrollbar { display:none; }
#view-team-room[data-phase="question"] .team-round { display:none; }
#view-team-room[data-phase="question"] .team-question-clock { flex:none; }
#view-team-room[data-phase="question"] .team-clock-track { height:5px; overflow:hidden; border-radius:5px; background:rgba(128,128,128,.22); }
#view-team-room[data-phase="question"] .team-clock-track span { display:block; height:100%; border-radius:inherit; background:#00bcd4; }
#view-team-room[data-phase="question"] .team-timer { float:none; text-align:right; margin-top:4px; font-size:.78rem; }
#view-team-room[data-phase="question"] .team-question h3 { flex:none; margin:8px 0 12px; padding:0; font-size:clamp(1.4rem,7vw,2rem); }
#view-team-room[data-phase="question"] .team-options { display:flex; flex-direction:column; flex:1 0 auto; gap:7px; }
#view-team-room[data-phase="question"] .team-option { display:flex; align-items:center; flex:1 0 44px; min-height:44px; padding:8px 14px; border-radius:12px; background:var(--card-bg); }
#view-team-room[data-phase="question"] .team-answer-note { flex:none; margin:8px 0 0; }
#view-team-room[data-phase="action"] .team-action h3 { margin:10px 0 0; text-align:center; font-size:1.25rem; }
#view-team-room[data-phase="action"] .team-action > p { margin:8px 0 12px; text-align:center; color:var(--text-sub); font-size:.82rem; }
.team-action-count { flex:none; margin:2px 0 8px; text-align:center; color:#e0554f; font-size:1.75rem; font-weight:700; font-variant-numeric:tabular-nums; }
#view-team-room[data-phase="action"] .team-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:none; gap:10px; margin:12px 0 0; }
.team-action-choice { min-width:0; min-height:92px; text-align:left; border-radius:14px; background:var(--card-bg); }
.team-action-choice strong { display:block; font-size:1rem; }
.team-action-choice span { display:block; margin-top:5px; color:var(--text-sub); font-size:.76rem; line-height:1.35; }
.team-action-choice.attack { border-color:rgba(224,85,79,.4); }
.team-action-choice.heal { border-color:rgba(63,185,138,.4); }
.team-action-choice.shield { border-color:rgba(124,156,255,.4); }
.team-action-choice.is-selected { border-color:#ffd27a; background:rgba(255,210,122,.15); box-shadow:inset 0 0 0 1px #ffd27a; }
.team-action-commit { flex:none; width:100%; min-height:50px; margin-top:12px; position:sticky; bottom:0; z-index:2; font-weight:700; background:linear-gradient(90deg,rgba(181,118,35,.58),rgba(255,255,255,.06)); }
#view-team-room[data-phase="action"] .team-skill { flex:none; margin:10px 0 0; }
@media(prefers-reduced-motion:reduce) { .team-side,.team-control,.team-settings,.team-question,.team-action,.team-final,.team-request,.team-last-result.is-new,.team-option.team-option-submitted { animation:none; } .team-button { transition:none; } }
/* 建立房間：先選遊戲（room-modes.js） */
.room-create-open { width:100%; min-height:56px; margin:0; font-size:1rem; font-weight:800; }
.room-mode-pick { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.room-mode-pick:has(#room-mode-bomb.hidden) { grid-template-columns:1fr; }
.room-mode-card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 10px 16px; border-radius:18px; cursor:pointer;
  border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text-main); font:inherit;
  transition:transform .14s, border-color .2s, background .2s, box-shadow .2s; }
.room-mode-card:hover { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.07); transform:translateY(-2px); }
.room-mode-card:active { transform:scale(.97); }
.room-mode-card:disabled { opacity:.6; cursor:default; transform:none; }
.room-mode-card b { font-size:1.05rem; letter-spacing:2px; }
.room-mode-card > span:last-child { font-size:.74rem; color:var(--text-sub); line-height:1.4; }
.room-mode-ico { width:42px; height:42px; display:grid; place-items:center; margin-bottom:4px; border-radius:14px; background:rgba(255,255,255,.06); }
.room-mode-ico svg { width:28px; height:28px; }
#room-mode-bomb .room-mode-ico { color:#ffb38a; background:rgba(255,140,60,.16); }
#room-mode-bomb:hover { box-shadow:0 0 18px rgba(255,140,60,.18); border-color:rgba(255,140,60,.5); }
#room-mode-duel .room-mode-ico { color:#ff9800; }
.room-duel-pick { grid-template-columns:repeat(2,minmax(0,1fr)); }
.room-mode-back { grid-column:1 / -1; justify-self:center; margin-top:4px; background:none; border:0; color:var(--text-sub); font:inherit; font-size:.8rem;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.room-step-in > * { animation:roomStepIn .34s cubic-bezier(.2,.9,.25,1.15) both; }
.room-step-in > *:nth-child(2) { animation-delay:.06s; }
.room-step-in > *:nth-child(3) { animation-delay:.12s; }
@keyframes roomStepIn { from { opacity:0; transform:translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .room-step-in > * { animation:none; } }
.daily-chat-invite-card.invite-bomb strong::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:#ff9a6b; vertical-align:middle; }

/* 傳炸彈好友房的三個座位：一定要能縮（minmax(0,1fr)）。只寫 1fr 的話，
   很長又不換行的暱稱會把第一格撐爆，整頁往右溢出。
   畫面本身在伺服器那一包（bomb.css），這裡用 id 蓋過去，網頁一更新就生效。 */
#view-bomb .bomb-room-seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#view-bomb .bomb-room-seat { min-width: 0; }
#view-bomb .bomb-room-card { max-width: 100%; box-sizing: border-box; overflow: hidden; }