/* Use the available width independently of browser toolbar height. */
#phone {
  width: min(100vw, 450px);
  height: 100svh;
  height: 100dvh;
  max-height: 900px;
  aspect-ratio: auto;
}
.screen { min-width: 0; }
button { min-width: 40px; min-height: 40px; touch-action: manipulation; }
.btn, .icon-btn, .bar-title { white-space: nowrap; }
.icon-btn { width: 40px; height: 40px; flex: none; }
.bar { gap: 6px; min-height: 54px; }
.bar-title { min-width: 0; font-size: clamp(15px, 4.2vw, 18px); }
.bar-btns { flex: none; gap: 4px; }
.money { min-width: 0; padding: 4px 7px; white-space: nowrap; }
#s-home .bar { height: auto; padding: 6px 0; }
#s-home .bar-title { text-align: center; }
.ending-replay { margin: 2px auto 0; }
#s-home { overflow-y: auto; touch-action: pan-y; scroll-padding: 8px 0 64px; }
/* 上に留まるデッキの高さ（ラベル＋5枚のカード）だけ、上の見えない余白にする: 一覧の子を画面に出すとき、デッキの下に隠さない */
#s-home { scroll-padding-top: calc(66px + (min(100vw, 450px) - 44px) * 4 / 15); }
#s-home > * { flex-shrink: 0; }
.deck { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 10-17 circle（iPhone）「仲間のスクロール幅が狭くて触りづらい」。原因: なかま一覧が拠点の中の小さなスクロール箱で、
   上の帯・放置の箱・デッキ・詳しい説明の枠を引いた残り（375x812 で約280px）しか使えず、外側の画面のスクロールと二重になっていた。
   → 拠点を画面ぜんたいで1つのスクロールにし、デッキだけを上に留める。一覧は箱に閉じ込めず、下の3つのボタンまでの全部を使う */
.coll { flex: none; overflow: visible; min-height: calc((100vw - 53px) / 3 + 14px); }
@media (min-width: 450px) { .coll { min-height: 147px; } }
.deck-dock { position: sticky; top: 0; z-index: 6; flex-shrink: 0; margin: 0 -10px; padding: 0 10px 6px; background: #22335a; box-shadow: 0 6px 8px -6px #0009; }
.deck-dock .deck-label { margin-top: 0; padding-top: 6px; box-sizing: content-box; }
/* 背の低い画面（320x480 など）では、留まる帯の上下の余白をつめて一覧に回す */
@media (max-height: 600px) { .deck-dock { padding-bottom: 3px; } .deck-dock .deck-label { padding-top: 2px; height: 40px; } }
.coll-label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.viewsw { float: none; margin-left: auto; display: flex; }
.viewsw button, .tblbar button { margin: 0; min-width: 40px; }
.home-foot { position: sticky; bottom: -10px; z-index: 5; background: #142039; padding: 8px 0 4px; gap: 6px; }
.home-foot .btn, .home-foot #b-versus, .home-foot #b-go { flex: 1 1 0; min-width: 0; font-size: clamp(12px, 3.6vw, 16px); padding: 10px 2px; letter-spacing: 0; }
.info { flex: none; }
.info > div { min-width: 0; overflow-wrap: anywhere; }
.title-logo span { font-size: clamp(28px, 8vw, 40px); letter-spacing: 1px; padding: 8px; white-space: nowrap; }
.credit-link { min-height: 40px; display: grid; place-items: center; }
.stage-list { touch-action: pan-y; }
.stage-card .sname { font-size: clamp(17px, 5vw, 22px); }
.stage-card .ssub { font-size: 11px; max-width: calc(100% - 16px); }
.modal .win, .result .win { max-height: calc(100% - 24px); overflow-y: auto; overflow-x: hidden; touch-action: pan-y; }
.modal .btn { font-size: 14px; letter-spacing: 0; padding-left: 4px; padding-right: 4px; }
.gacha-stage { min-height: 220px; overflow: hidden; }
#s-gacha { overflow-y: auto; touch-action: pan-y; }
.gacha-foot, .rates { flex-shrink: 0; }
.gacha-foot .btn { padding: 10px 4px; letter-spacing: 0; }
.pve-tabs, #s-versus .bar { flex-shrink: 0; }
.tblbar { flex-wrap: wrap; gap: 4px; }
#tbl-role { display: flex; gap: 3px; }
/* 表もカードと同じく画面ごとスクロールする（10-17 circle「かーどはすくろーるできるのに、表がすくろーるできてない」）。
   表だけ高さ300pxの箱で中スクロールにしていたため、下半分に下の帯（宝箱ガチャ等）が重なってホイールが外の画面へ逃げていた */
.tbl { flex: none; overflow: visible; }
/* 表は行を作り直したあと、js の renderTable が自分でスクロール位置を戻す。ブラウザのスクロールの錨（overflow-anchor）が重ねて直すと、
   タップのたびに表が数十px ずれ、同じ場所のもう一度のタップが別の行に当たっていた */
.tbl { overflow-anchor: none; }
.tbl table, .tbl thead, .tbl tbody { display: block; width: 100%; min-width: 0; white-space: normal; }
.tbl tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tbl th, .tbl td { padding: 4px 2px; min-width: 0; font-size: 11px; text-align: center; overflow-wrap: anywhere; }
.tbl th { min-height: 40px; display: grid; place-items: center; }
.tbl th.nm, .tbl td.nm { grid-column: 1 / -1; position: static; min-width: 0; max-width: none; white-space: nowrap; }
.tbl thead { position: sticky; top: 0; z-index: 3; }
.tbl thead th { position: static; }
.tbl tbody td:not(.nm)::before { display: block; font-size: 9px; opacity: .7; }
.tbl td:nth-child(2)::before { content: '★'; }
.tbl td:nth-child(3)::before { content: '役'; }
.tbl td:nth-child(4)::before { content: 'ソウル'; }
.tbl td:nth-child(5)::before { content: '体力'; }
.tbl td:nth-child(6)::before { content: '攻撃'; }
.tbl td:nth-child(7)::before { content: '秒間ダメ'; }
.tbl td:nth-child(8)::before { content: '射程'; }
.tbl td:nth-child(9)::before { content: '前順'; }
.tbl td:nth-child(10)::before { content: '体力/ソウル'; }
.tbl td:nth-child(11)::before { content: 'ダメ/ソウル'; }
.tbl-note { width: 100%; }
/* Leave a separate 40px action row between the board and summon cards. */
#cv { height: calc(100% - 28px); }
.strip, .sell-zone { height: max(13%, 76px); }
.wave-btn, .reroll-btn, .quit, .versus .vs-peek { bottom: calc(max(13%, 76px) + 3px); height: 40px; }
.quit { width: 40px; }
.reroll-btn { width: 78px; }
.wave-btn { padding: 0 8px; font-size: 15px; }
.speed, .stats-btn { height: 40px; }
.hud-r { gap: 4px; }
.hud-r .soul { transform-origin: right top; }
.stats { top: 180px; bottom: max(28%, calc(max(13%, 76px) + 48px)); }
.st-head, .st-sort { flex-shrink: 0; gap: 3px; }
.stats button { padding: 2px 4px; }
#st-x { width: 40px; height: 40px; }
.st-cols, .st-row { grid-template-columns: 24px minmax(0, 1fr) repeat(4, minmax(28px, 40px)); gap: 2px; }
.st-rows { min-height: 40px; }
.versus .vs-peek { width: 92px; min-height: 40px; font-size: 11px; padding: 0 2px; letter-spacing: 0; white-space: nowrap; } /* .btn の字間1pxで7文字が82pxからはみ出していた（10-17） */
.versus .wave-btn { width: 90px; }
/* 幅の狭いカード（320幅）: ★の列が右上の役の印の下にもぐっていた */
@media (max-width: 360px) { .card .st { font-size: 8px; letter-spacing: -1.5px; } }
/* コストの札: 幅の狭いカードでは魂の印＋3けたが入らず2行に折れ、★の列まで背が伸びていた → 折らずに印を小さく */
.card .cost { white-space: nowrap; }
@media (max-width: 360px) { .card .cost { font-size: 12px; padding: 0 3px 0 1px; } .card .cost .ico-soul { width: 11px; height: 11px; margin-right: 1px; vertical-align: -1px; } }
.versus .reroll-btn { width: 78px; }
.versus .quit { top: 72px; bottom: auto; }
.ending-message { flex-shrink: 0; padding: 40px 12px 20px; }
.ending-message p { font-size: 12px; }
.ending-actions .btn { font-size: 14px; letter-spacing: 0; padding: 10px 4px; }
@media (max-width: 360px) { .setask .ubtns { flex-direction: column; } }
@media (max-width: 360px) {
  .ranked-card { margin: 3px 12px 0; }
  .ranked-card .ranked-open { padding: 5px 7px; min-height: 60px; }
  .ranked-open b, .ranked-open strong { font-size: 12px; }
  .ranked-result strong { font-size: 18px; }
}
.versus #result .win:has(.ranked-result) { max-height: calc(100% - 20px); overflow-y: auto; touch-action: pan-y; padding: 12px; }
@media (max-height: 600px) {
  #cv { height: calc(100% - 44px); }
  .stats { top: 124px; bottom: 122px; }
  .hud-r { flex-direction: row; flex-wrap: wrap; max-width: 152px; }
  .hud-r .soul { font-size: 15px; }
  .hud-r .money { font-size: 11px; }
  .next-wave { top: 90px; width: calc(100% - 16px); max-width: none; max-height: 44px; overflow-y: auto; touch-action: pan-y; }
  .next-wave { padding-top: 2px; padding-bottom: 2px; } .next-wave .stage-help { padding: 0 8px; } /* 押す物は40pxのまま、帯の上下の余白を詰めて盤の一段目の角（帯の上端+45px）に届かせない（320x480・10-17） */
  .st-head b { font-size: 12px; }
  .ending-message { padding-top: 80px; }
}
@media (max-width: 400px) { .evo-row .evo-art { width: 64px; } }

/* しゅつげき（次の面をすぐ始める）と、横の小さな「ステージをえらぶ」（10-17） */
.home-foot .go-pair { flex: 2 1 0; min-width: 0; display: flex; gap: 4px; }
.home-foot .go-pair #b-go { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; padding: 4px 2px; } /* 2行（しゅつげき＋行き先）でも帯の高さを他のボタンと同じに: 帯が高いと、なかま一覧の見える高さが 320×480 で半分を切った */
.home-foot .go-pair #b-go small { font-size: 10px; font-weight: normal; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.home-foot .go-pair .go-pick { flex: 0 0 auto; width: auto; min-width: 0; padding: 4px 5px; font-size: 10px; line-height: 1.2; letter-spacing: 0; }