/* SPEC: 2025-10-13d sha=9fd2a1b */
:root{
  --bg:#0b0e12; --panel:#0f141a; --line:#223042; --accent:#7dd3fc; --danger:#fda4a4;
  --fg:#e6edf3; --mut:#9fb0c2;
  --w:44px; --h:62px; --fs:14px;
}
@media (max-width:480px){ :root{ --w:36px; --h:50px; --fs:12px; } }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--fg); font:var(--fs)/1.45 system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif; }
.view{ display:none; }
.view.active{ display:block; }

/* ===== タイトル ===== */
/* タイトル: 1枚目(スプラッシュ)は画像、2枚目以降(メニュー)は背景なし */
#title{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:calc(28px + env(safe-area-inset-top)) 12px calc(26px + env(safe-area-inset-bottom));
  gap:14px;
}

/* Splash(最初の画面): 画像＋PRESS TO START(点滅) */
#title.trf-title--start{
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  justify-content:center;
  cursor:pointer;
  background:
    url("img/title_bg.jpg?v=20260711-860") center/cover no-repeat;
  background-color:#000;
}
#title.trf-title--start::before{ display:none; }
#title.trf-title--start > h1,
#title.trf-title--start > p{ display:none; }
#title.trf-title--start #trfTitleFlow{
  border:none;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:0;
  width:100%;
}

/* Splash: PRESS TO START (画像ロゴ直下)
   - iOS/Safari でレイアウトの影響を受けにくいよう fixed で固定
   - 画面縦4分割の最下段(下1/4)に寄せる: bottom 12.5vh
*/
#pressStart{
  z-index:999;
  position:fixed;
  left:0;
  right:0;
  top:auto;
  bottom:calc(12.5vh + env(safe-area-inset-bottom));
  transform:none;
  display:block;
  visibility:visible;
  opacity:1;
  text-align:center;
  font-size:18px;
  font-weight:800;
  letter-spacing:2px;
  color:rgba(238,245,255,.96);
  text-shadow:
    0 0 10px rgba(125,211,252,.35),
    0 2px 12px rgba(0,0,0,.75);
  animation:trfPressBlink 1.05s steps(2,end) infinite;
  pointer-events:none;
  padding:0 10px;
}

/* Splash(START) 表示時のみ有効にする */
#title.trf-title--start #pressStart{ display:block; }

/* タイトル(メニュー)では表示しない */
#title.trf-title--menu #pressStart{ display:none !important; }

@keyframes trfPressBlink{
  0%{ opacity:.18; }
  49%{ opacity:.18; }
  50%{ opacity:1; }
  100%{ opacity:1; }
}

/* Menu(2枚目以降のタイトルUI) */
#title.trf-title--menu{
  padding:calc(28px + env(safe-area-inset-top)) 12px calc(26px + env(safe-area-inset-bottom));
  justify-content:flex-start;
  cursor:default;
}

#title.trf-title--menu::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78)),
    url("img/menu_bg.png?v=20260711-860") center/cover no-repeat;
  background-color:#000;
  filter:saturate(1.05) contrast(1.05);
}

/* Title headline */
#title > h1{
  margin:0;
  font-size:48px;
  letter-spacing:.5px;
  line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
}
#title > p{
  margin:0;
  color:rgba(230,237,243,.90);
  font-size:15px;
  text-shadow:0 2px 12px rgba(0,0,0,.60);
}

/* Title flow panel */
#trfTitleFlow{
  width:min(720px, 96vw);
  border:1px solid rgba(43,52,66,.90);
  border-radius:16px;
  background:rgba(12,16,22,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 32px rgba(0,0,0,.35);
  padding:14px 12px;
}

/* Tutorial step: show only the inner tutorial frame
   (avoid an extra thin-looking frame from the outer #trfTitleFlow container). */
#title.trf-title--tutorial #trfTitleFlow{
  border:none;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Small screens: prefer fit (avoid internal scroll on iOS) */
#title.trf-title--menu #trfTitleFlow{
  max-height:none;
  overflow:visible;
}
.trf-title-step{ text-align:center; }
.trf-title-step h2.trf-title-h2{
  margin:2px 0 10px;
  font-size:20px;
  letter-spacing:.4px;
}
.trf-title-step .row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Custom toggle (Draft ON/OFF) placement under Battle header */
.trf-custom-toggle-slot{
  display:flex;
  justify-content:center;
}
#customToggleCommon{
  width:100%;
  max-width:640px;
}
#customToggleCommon label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(62,78,98,.75);
  border-radius:14px;
  background:rgba(16,20,28,.58);
}
#customToggleCommon input[type=checkbox]{
  width:18px;
  height:18px;
}

/* Online rated toggle + stamina hearts */
.trf-online-ratedRow{
  width:100%;
  max-width:640px;
  margin:0 auto;
}

.trf-stamina-row{
  gap:10px;
}
.trf-stamina-label{
  font-size:14px;
  opacity:.85;
  user-select:none;
  -webkit-user-select:none;
}
#onlineStamina{
  font-size:18px;
  letter-spacing:1px;
  user-select:none;
  -webkit-user-select:none;
}
.trf-stamina-heart{
  display:inline-block;
  margin-left:2px;
  margin-right:2px;
  opacity:.95;
  color:#e53935;
}
.trf-stamina-heart.off{
  opacity:.25;
  color:#7b8698;
}
.trf-stamina-meta{
  font-size:12px;
  opacity:.8;
  margin-left:8px;
  letter-spacing:0;
}

/* Online pane: separate boxes for stamina / random / room */
.trf-online-box{
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:10px 12px;
  border:1px solid rgba(62,78,98,.55);
  border-radius:14px;
  background:rgba(16,20,28,.38);
}
.trf-online-roomRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.trf-online-roomBtns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:stretch;
}
.trf-online-roomBtns > *{
  width:100%;
}
.trf-online-roomBtns > button{
  min-width:0;
}
.trf-online-roomBtns > button,
.trf-online-roomBtns > label{
  min-height:44px;
}

/* Online room buttons: allow Create/Join to be placed side-by-side (saves vertical space on small screens) */
.trf-online-roomBtnRow{
  display:flex;
  gap:10px;
  width:100%;
  align-items:center;
}
.trf-online-roomBtnRow > button{
  flex:1 1 0;
  min-width:0;
}

.trf-online-publicToggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(62,78,98,.55);
  background:rgba(21,26,33,.82);
  color:var(--fg);
  font-size:14px;
  font-weight:700;
}
.trf-online-publicToggle input{
  width:18px;
  height:18px;
}
.trf-stamina-note{
  font-size:12px;
  opacity:.75;
  margin-top:6px;
}

.trf-stamina-recover{
  display:inline-block;
  margin-left:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(62,78,98,.75);
  background:rgba(21,26,33,.92);
  color:var(--fg);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.trf-stamina-recover:disabled{
  opacity:.5;
  cursor:default;
}

/* Buttons in title */
#title button{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #2b3442;
  border-radius:14px;
  background:rgba(21,26,33,.92);
  color:var(--fg);
  padding:12px 14px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  min-width:160px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
#title button:hover{ filter:brightness(1.06); }
#title button:active{ transform:translateY(1px); }
#title button.pill{
  border-radius:999px;
  padding:10px 14px;
  min-width:140px;
}

/* Tap start emphasis */
#btnTapStart.trf-title-start{
  font-size:20px;
  padding:14px 18px;
  min-width:220px;
  border-color:#285a7c;
  background:rgba(24,52,73,.92);
}

/* Category cards */
.trf-title-card{
  min-width:180px;
}

/* ---- Title menu polish (Stage12) ---- */
#title .trf-title-card{
  position:relative;
  overflow:hidden;
  min-width:220px;
  height:78px;
  font-size:18px;
  border-color:rgba(62,78,98,.95);
  background:
    linear-gradient(180deg, rgba(26,34,44,.92), rgba(18,24,32,.92));
}
#title .trf-title-card::before{
  content:'';
  position:absolute;
  inset:-40% -40% auto -40%;
  height:140%;
  background:radial-gradient(circle at 30% 35%, rgba(125,211,252,.18), rgba(0,0,0,0) 62%);
  pointer-events:none;
}
#title .trf-title-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%, rgba(0,0,0,0) 70%);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.65;
}

/* Battle step: grouped cards */
.trf-modeCard{
  margin-top:12px;
  border:1px solid rgba(43,52,66,.92);
  border-radius:16px;
  background:rgba(12,16,22,.52);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  padding:12px 12px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

/* Tutorial step: ONE large framed group that encloses title + options + back button */
#titleStepTutorial .trf-tutOuter{
  width:min(720px, 94vw);
  margin-left:auto;
  margin-right:auto;
  border:2px solid rgba(43,52,66,.92);
  padding:16px 16px 18px;
}
#titleStepTutorial .trf-tutOuter .trf-tutH2{
  margin:0 0 12px;
  text-align:center;
}
#titleStepTutorial .trf-tutBody{ width:100%; }
#titleStepTutorial .trf-tutOpt{ width:100%; }
#titleStepTutorial .trf-tutOpt + .trf-tutOpt{ margin-top:10px; }
#titleStepTutorial .trf-tutBtn{ width:100%; min-width:0; }
#titleStepTutorial .trf-tutBackRow{ margin-top:16px; }

/* Back-compat: older builds used .trf-tutFrame (keep harmless defaults) */
#titleStepTutorial .trf-tutFrame{
  width:min(720px, 94vw);
  margin-left:auto;
  margin-right:auto;
}

.trf-modeTitle{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.35px;
  color:rgba(230,237,243,.95);
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

/* CPU first/second selector (tabs) */
.trf-seg{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(43,52,66,.92);
  border-radius:999px;
  overflow:hidden;
  background:rgba(15,20,26,.78);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.trf-seg-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(230,237,243,.92);
  font-weight:800 !important;
  padding:10px 14px !important;
  min-width:120px !important;
  box-shadow:none !important;
}
.trf-seg-btn[aria-selected="true"]{
  background:rgba(125,211,252,.18) !important;
  box-shadow:inset 0 0 0 1px rgba(125,211,252,.28) !important;
}
.trf-seg-btn:active{ transform:none !important; }
.trf-seg-btn:focus{ outline:none; box-shadow:0 0 0 2px rgba(125,211,252,.25) !important; }

.trf-seg-btn:first-child{ border-top-left-radius:999px !important; border-bottom-left-radius:999px !important; }
.trf-seg-btn:last-child{ border-top-right-radius:999px !important; border-bottom-right-radius:999px !important; }
.trf-seg-btn + .trf-seg-btn{ box-shadow:inset 1px 0 0 rgba(43,52,66,.92) !important; }

.trf-legacy{ display:none !important; }

@media (max-width:480px){
  #title .trf-title-card{ min-width:200px; height:72px; font-size:17px; }
  .trf-seg-btn{ min-width:112px !important; padding:10px 12px !important; }
}

/* Room key input */
#title input[type="text"]{
  border:1px solid #2b3442;
  border-radius:12px;
  background:rgba(15,20,26,.92);
  color:var(--fg);
  padding:10px 12px;
  font-size:15px;
  outline:none;
}
#title input[type="text"]::placeholder{ color:rgba(159,176,194,.70); }
#title input[type="text"]:focus{ box-shadow:0 0 0 2px rgba(125,211,252,.35); }

@media (max-width:480px){
  #title{ padding-top:22px; }
  #title > h1{ font-size:40px; }
  #title button{ font-size:15px; min-width:150px; }
  #btnTapStart.trf-title-start{ font-size:18px; min-width:210px; }
}

.titleHead{ padding:18px 16px 8px; border-bottom:1px solid #1f2731; }
.titleHead h1{ margin:0 0 4px; font-size:34px; }
.titleHead .sub{ color:var(--mut); }
.menuGrid{ padding:14px 12px; display:flex; flex-wrap:wrap; gap:12px; }
.pill{ padding:8px 12px; border:1px solid #2b3442; border-radius:999px; background:#151a21; color:var(--fg); cursor:pointer; }
.checkRow{ display:flex; align-items:center; gap:10px; padding:0 12px 10px; }
.progressWrap{ padding:10px 12px 18px; }
.progressWrap .row{ display:flex; gap:16px; margin-bottom:8px; color:var(--mut); }
.progressWrap .bar{ height:10px; border:1px solid #2b3442; border-radius:6px; background:#10151b; overflow:hidden; }
.progressWrap .bar span{ display:block; height:100%; width:0%; background:var(--accent); }

/* ===== 対戦 ===== */
.topBar{ position:sticky; top:0; z-index:5; display:flex; gap:10px; align-items:center; padding:10px 12px; background:linear-gradient(#0d1117,#0b0e12 70%); border-bottom:1px solid #1f2731; }
.board{ padding:12px; }
.handRow{ display:flex; align-items:center; gap:10px; margin:6px 0; }
.handLabel{ color:var(--mut); min-width:6.5em; }
.deckBox{ display:flex; align-items:center; gap:6px; }
.deckIcon{ width:26px; height:18px; border:1px solid var(--line); border-radius:4px; background:#151a21; }
.deckLabel{ color:var(--mut); font-size:12px; }
.deckCount{ color:var(--mut); min-width:3.8em; text-align:center; }

.hand{ flex:1; min-height:var(--h); border:1px solid #2b3442; border-radius:10px; padding:8px; background:var(--panel); display:flex; gap:6px; overflow-x:auto; }
.scroll-x{ overflow-x:auto; }
.scroll-y{ overflow-y:auto; }

.zoneTitle{ margin:8px 12px; color:var(--mut); }
.zones{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.zone{ border:1px dashed #2b3442; border-radius:12px; padding:8px; min-height:calc(var(--h)*4 + 90px); }
.zoneCol{ display:flex; flex-direction:column; gap:6px; height:100%; }
.rowTop, .rowBottom{ flex:1; border:1px solid #2b3442; border-radius:10px; padding:8px; background:var(--panel); min-height:calc(var(--h) + 14px); }

.card{ position:relative; width:var(--w); height:var(--h); border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; background:#10151b; font-weight:700; margin:2px; user-select:none; }
.card.faceup{ background:#14212b; }
.card.facedown{ background:#0f141a; }
.card.p0{ border-color:#1d4b6a; }
.card.p1{ border-color:#6a2b3a; }
.card.sel{ outline:2px solid var(--accent); }
.card.hl{ box-shadow:0 0 0 2px #ffe08a inset; }

.badgeRow{ position:absolute; top:2px; left:2px; display:flex; gap:2px; }
.badge{ min-width:14px; height:14px; padding:0 3px; border-radius:7px; font-size:9px; border:1px solid #2b3442; background:#0f141a; display:flex; align-items:center; justify-content:center; color:#9fb0c2; }

.ops{ padding:10px 12px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.btn{ padding:8px 12px; border:1px solid #2b3442; border-radius:10px; background:#151a21; color:#e6edf3; cursor:pointer; }
.btn.main{ background:#183449; border-color:#285a7c; }
.btn.on{ outline:2px solid var(--accent); }
.btn:disabled{ opacity:.45; pointer-events:none; }
.statusRow{ display:flex; flex-wrap:wrap; gap:8px; color:var(--mut); }

/* 効果エリア */
.effPanel{ padding:8px 12px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.effCol{ border:1px solid #2b3442; border-radius:12px; background:var(--panel); padding:8px; }
.effTitle{ font-weight:700; margin-bottom:6px; }
.effList{ display:flex; flex-wrap:wrap; gap:6px; }
.effTag{ display:flex; align-items:center; gap:6px; border:1px solid #2b3442; border-radius:10px; padding:4px 8px; background:#11161d; font-size:12px; cursor:pointer; }
.effTag.ph{ opacity:.55; }
.ico{ min-width:18px; height:18px; border-radius:9px; border:1px solid #2b3442; display:inline-flex; align-items:center; justify-content:center; font-size:11px; background:#0f141a; color:#9fb0c2; }

.log{ margin:10px 12px 30px; max-height:220px; overflow:auto; border:1px solid #2b3442; border-radius:10px; padding:8px; background:var(--panel); font-size:12px; }

/* ===== モーダル ===== */
.modal{ display:none; position:absolute; inset:0; background:#000; z-index:100; align-items:center; justify-content:center; }
.modalBox{ width:min(900px,96vw); background:var(--panel); border:1px solid #2b3442; border-radius:12px; }
.modalHeader{ padding:12px 16px; border-bottom:1px solid #2b3442; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.modalBody{ padding:14px; }
.modal .pill.danger{ background:#3b1a1a; border-color:#5a2b2b; }

/* 効果ポップ */
.toast{ position:absolute; left:8px; right:8px; bottom:10px; z-index:120; background:var(--panel); border:1px solid #2b3442; border-radius:12px; padding:10px 12px; }
.toastClose{ float:right; cursor:pointer; color:#9fb0c2; }

/* 受け渡し時は背面操作不可&ややブラー */
body.modal-open{ overflow:hidden; }
body.modal-open #play{ filter:blur(3px); pointer-events:none; user-select:none; }

/* ローカル180度回転(数字は .upright で元に戻す) */
.rot180{ transform:rotate(180deg); }
.upright{ transform:rotate(180deg); display:inline-block; }

#title > *{position:relative; z-index:1;}

/* CPU order selector (title menu) */
#title .trf-cpuOrderRow{
  width:100%;
}
#title .trf-cpuOrderLabel{
  font-weight:800;
  letter-spacing:.5px;
  opacity:.95;
}

#title .trf-selectWrap{
  position:relative;
  flex:1;
  min-width:0;
}
#title .trf-selectWrap .trf-selectArrow{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  font-weight:900;
  opacity:.85;
  pointer-events:none;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
#title .trf-cpuOrderSelect{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-width:0;
  padding:10px 38px 10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,12,18,.55);
  color:rgba(238,245,255,.96);
  font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
#title .trf-cpuStartBtn{
  white-space:nowrap;
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
}

/* === English layout tweaks === */
html[data-lang="en"] .trf-title-h2{
  font-size: 17px;
}
html[data-lang="en"] .trf-title-card{
  font-size: 14px;
  width: min(46vw, 190px);
  height: 54px;
}
html[data-lang="en"] #titleStepBattle .trf-modeCard button{
  font-size: 14px;
}
html[data-lang="en"] #btnOnlineHost,
html[data-lang="en"] #btnOnlineGuest{
  font-size: 13px;
  white-space: nowrap;
  padding: 10px 10px;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
html[data-lang="en"] #titleStepBattle label{
  font-size: 14px;
}
html[data-lang="en"] #titleStepBattle input{
  font-size: 14px;
}
html[data-lang="en"] #titleStepTutorial .trf-modeCard button{
  font-size: 14px;
}

html[data-lang="en"] #btnTutNormal,
html[data-lang="en"] #btnTutCustom{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

/* ---- Title layout for English (avoid 2-column wrapping on small screens) ---- */
html[data-lang="en"] #titleStepCategory .row,
html[data-lang="en"] #titleStepMode .row{
  flex-direction: column;
  align-items: stretch;
}
html[data-lang="en"] #titleStepCategory .trf-title-card,
html[data-lang="en"] #titleStepMode .trf-title-card{
  width: 100%;
  min-width: 0;
}

/* ---- Title fit tweaks for small-height devices (avoid bottom cut-off) ---- */
@media (max-height: 740px){
  /* NOTE: 画面フィット優先。タイトル領域はスクロールさせず、余白と要素寸法を圧縮して下切れを防止 */
  #title{ padding-top:calc(22px + env(safe-area-inset-top)); padding-bottom:calc(18px + env(safe-area-inset-bottom)); gap:12px; }
  #title.trf-title--menu{ padding:calc(22px + env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom)); }

  #trfTitleFlow{ gap:10px; padding-bottom:0; }
  #trfTitleFlow .row{ gap:10px; }

  .trf-modeCard{ margin-top:10px; padding:10px 10px; }

  /* Online pane: tighten boxes (avoid bottom cut-off on small-height devices) */
  #trfTitleFlow{ padding:12px 10px; }
  .trf-online-box{ padding:9px 10px; }
  .trf-online-roomRow{ gap:8px; }
  .trf-online-roomBtns{ gap:8px; }
  .trf-online-publicToggle{ padding:5px 8px; font-size:13px; }

  .trf-title-card{ font-size:14px; width:min(46vw, 170px); height:52px; padding:10px 12px; }
  #titleStepBattle .trf-modeCard button,
  #titleStepTutorial .trf-modeCard button,
  #titleStepCustom .trf-modeCard button{ font-size:14px; padding:10px 12px; }
  #titleStepBattle label{ font-size:14px; }
  #titleStepBattle input{ font-size:14px; }
  #trfTitleFlow .trf-title-h2{ font-size:16px; }
}

/* ---- Title fit tweaks for very small-height devices (680px/600px) ---- */
@media (max-height: 680px){
  /* NOTE: iOS/Safari を含む一部機種で「下が見切れる」問題の対策。
     スクロールではなく、要素寸法/余白を更に圧縮して常時フィットさせる。 */
  #title{ gap:10px; padding-top:calc(20px + env(safe-area-inset-top)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  #title.trf-title--menu{ padding:calc(20px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom)); }

  #trfTitleFlow{ gap:8px; padding-bottom:0; }
  #trfTitleFlow .row{ gap:8px; }

  #title > h1{ font-size:42px; }

  .trf-modeCard{ margin-top:8px; padding:9px 10px; }

  /* Online pane: further tighten for iPhone SE/older devices */
  #trfTitleFlow{ padding:10px 9px; }
  .trf-online-box{ padding:8px 9px; border-radius:12px; }
  .trf-online-roomRow{ gap:7px; }
  .trf-online-roomBtns{ gap:7px; }
  .trf-online-roomBtnRow{ gap:7px; }
  .trf-online-publicToggle{ padding:4px 8px; font-size:12px; }

  /* Online: smaller Create/Join buttons (iPhone SE fit) */
  #battlePaneOnline #btnOnlineHost,
  #battlePaneOnline #btnOnlineGuest{
    min-width:0;
    padding:8px 10px;
    font-size:12px;
  }
  #battlePaneOnline #btnOnlinePublicList{
    min-width:0;
    padding:8px 10px;
    font-size:12px;
  }

  /* inline margin-top を持つ row だけ圧縮(画面フィット優先) */
  #titleStepBattle .row[style*="margin-top"],
  #titleStepTutorial .row[style*="margin-top"]{ margin-top:6px !important; }
  #customToggleSlotBattle{ margin-top:8px !important; }

  .trf-title-card{ font-size:13px; width:min(46vw, 160px); height:48px; padding:9px 10px; }
  #titleStepBattle .trf-modeCard button,
  #titleStepTutorial .trf-modeCard button,
  #titleStepCustom .trf-modeCard button{ font-size:13px; padding:9px 10px; }
  #titleStepBattle label{ font-size:13px; }
  #titleStepBattle input{ font-size:13px; padding:9px 10px; }
  #trfTitleFlow .trf-title-h2{ font-size:15px; margin:10px 0 6px; }
}

@media (max-height: 600px){
  #title{ gap:8px; padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
  #title.trf-title--menu{ padding:calc(16px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)); }
  #trfTitleFlow{ gap:8px; padding-bottom:0; }

  /* Online pane: tightest (very small height) */
  #trfTitleFlow{ padding:9px 9px; }
  .trf-online-box{ padding:7px 8px; border-radius:12px; }
  .trf-online-roomRow{ gap:6px; }
  .trf-online-roomBtns{ gap:6px; }
  .trf-online-roomBtnRow{ gap:6px; }
  .trf-online-publicToggle{ padding:4px 7px; font-size:12px; }

  /* Online: smallest buttons */
  #battlePaneOnline #btnOnlineHost,
  #battlePaneOnline #btnOnlineGuest,
  #battlePaneOnline #btnOnlinePublicList{
    min-width:0;
    padding:7px 9px;
    font-size:12px;
  }

  #title > h1{ font-size:38px; }
  .trf-modeCard{ margin-top:6px; padding:8px 8px; }

  .trf-title-card{ font-size:12px; width:min(46vw, 150px); height:44px; padding:8px 10px; }
  #titleStepBattle .trf-modeCard button,
  #titleStepTutorial .trf-modeCard button,
  #titleStepCustom .trf-modeCard button{ font-size:12px; padding:8px 10px; }
}

/* Release: hide diagnostics UI */
.trf-devonly{display:none!important;}