/* SPEC: 2025-10-13d sha=9fd2a1b */
/* TriFront Fix CSS — 20251102-s + 20251128-b (playmat 180% zoom)
   - topbar横書き/ドット正円/小修正
   - card full-art + number overlay
   - playmat under lanes (180% zoom, aspect ratio preserved)
   - 山札ラベル・枚数表示
   - PASSED オーバーレイ
   - ハイライト強調
   - 盤面プレイマットを比率維持のまま約180%拡大
   - カードを出す部分(zoneCol)だけ 70% 不透明(透過率70相当)
   - カード縁の線を 3px に太く
   - レーン上のカード縁の外側に黒線(outline)追加
   - 戦力表示(zonePower)を長穴形のプレート化
   - RoundFX 枠は box-shadow ベース(矩形は JS 側で zoneCol にフィット)
*/

/* Mock Online: 画面拡大縮小を完全固定(JSで html.mock-online-lock を付与) */
html.mock-online-lock,
html.mock-online-lock body{
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
  -ms-touch-action: none !important;
  overscroll-behavior: none !important;
}
#board, .boardWrap{ touch-action: none; }

:root{
  /* ★手札カード幅(さらにわずかに縮小) */
  --hcard-w: 40px; /* 必要なら 38〜42px で微調整 */

  --accent: #4cc3ff;

  /* ベース */
  --panel:#0f141a; --line:#2b3442; --mut:#9fb0c2; --fg:#e6edf3;

  /* プレイヤー色(固定) */
  --trf-p0: #5ab3ff;
  --trf-p1: #ff1744;
  --trf-num-stroke: rgba(0,0,0,.45);
  --trf-glow-p0: rgba(90,179,255,.65);
  --trf-glow-p1: rgba(255,23,68,.65);

  /* 互換 */
  --p0:#1d4b6a; --p1:#6a2b3a;
  --p0-glow:#5bb7ff; --p1-glow:#ff6b7a;

  /* 画像パス */
  --trf-card-back-img: url("img/card-back.png");
  --trf-deck-back-img: url("img/deck-back.png");
  --trf-playmat-img:   url("img/playmat-board.png");

  /* ★密使/闇商人エフェクト用イラストパス(cards フォルダ) */
  /* UI素材 */
  --trf-ui-btn-bar-img: url("img/ui/btn_bar.png");
  --trf-ui-log-parchment-img: url("img/ui/log_parchment.jpg");

  --trf-eff-envoy-img:       url("img/cards/envoy.png");
  --trf-eff-blackmarket-img: url("img/cards/blackmarket.png");
}

*{ box-sizing:border-box; }

/* Ensure blank areas (e.g., when the play area doesn't cover the entire viewport) stay dark.
   iOS/Safari can show the html background in such gaps. */
html,body{ height:100%; background:#05070b; }

body{
  margin:0;
  background:#05070b;
  color:#d7e6f4;
  overflow:hidden;
  overscroll-behavior-y:contain;
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#fitWrap{ width:100%; }
#fitInner{ width:100%; transform-origin: top center; }
#play{
  max-width:980px;
  margin:0 auto;
  /* Use standard viewport units; keep the background dark outside the play area. */
  height:100vh;
  height:100dvh;
  overflow:hidden;
  position:relative;
}

/* 盤面全体にもプレイマットを敷く
   縦横比は元画像のまま、約180%まで拡大して余白を潰す */
#board,
.boardWrap{
  background-image:linear-gradient(rgba(4,7,10,.44),rgba(4,7,10,.44)),var(--trf-playmat-img) !important;
  background-size:180% auto !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#05070b !important;
  padding:0 !important;
  margin:0 auto !important;
}

/* zones 全体にも同じマットを敷く(継ぎ目を感じにくく) */
#zones,
.zones{
  background-image:linear-gradient(rgba(4,7,10,.36),rgba(4,7,10,.36)),var(--trf-playmat-img) !important;
  background-size:180% auto !Important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
}

/* ===== TopBar ===== */
.topBar{
  display:flex; align-items:center; gap:4px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  background:#0e141a;
  position:sticky; top:0; z-index:10;
  flex-wrap: nowrap;
}
.topBar, .topBar *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
.topBar .flex1{ flex:1 1 auto; }

body:not(.trf-settings) .pill{
  /* ゲーム中以外(タイトル/オンライン/結果/各種モーダル)は「メニュー画面系」の無地ボタンに統一 */
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:22px !important;
  background-image:none !important;
  background-color:rgba(255,255,255,.06) !important;
  color:#e6edf3;
  white-space: nowrap;
  min-height: 36px;
  font-weight:700;
  letter-spacing: .02em;
  text-shadow:none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.28) !important;
}

.pill[disabled],
.pill.disabled{
  filter:grayscale(1) brightness(.75);
  opacity:.72;
  cursor:default;
}

body:not(.trf-settings) .pill.on,
body:not(.trf-settings) .pill.active,
body:not(.trf-settings) .pill.selected,
body:not(.trf-settings) .pill.isOn{
  background-image:none !important;
  background-color:rgba(255,255,255,.10) !important;
}

/* ===== 画像スキンを当てないボタン(指定UI) =====
   ※body:not(.trf-settings) .pill の方が詳細度が高いため、ここは同等以上の詳細度で打ち消す
*/

/* タイトルカテゴリ(対戦/チュートリアル/ルール/マイページ/ショップ) は「画像なし統一」 */
body:not(.trf-settings) #titleStepCategory .pill{
  background-image:none !important;
  background-size:auto !important;
  background-position:initial !important;
  background-repeat:initial !important;
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:22px !important;
  text-shadow:none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.28) !important;
}

/* 戻る/ルール/マイページ/ショップ(個別) も確実に画像スキンOFF */
body:not(.trf-settings) #btnTitleBackToCategory.pill,
body:not(.trf-settings) #btnTitleBackToCategory2.pill,
body:not(.trf-settings) #btnBattleBackToHubFromLocal.pill,
body:not(.trf-settings) #btnBattleBackToHubFromOnline.pill,
body:not(.trf-settings) .trf-rulebook-open-btn.pill,
body:not(.trf-settings) #btnCatMyPage.pill,
body:not(.trf-settings) #btnCatShop.pill{
  background-image:none !important;
  background-size:auto !important;
  background-position:initial !important;
  background-repeat:initial !important;
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:22px !important;
  text-shadow:none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.28) !important;
}

#settingsModal .pill,
.settings-radio .pill,
.settings-body .pill{
  background-image:none !important;
  background-color:#0c141e !important;
  border:1px solid rgba(255,255,255,.10) !important;
  text-shadow:none !important;
}

/* Settings画面は元のボタンに戻す */
body.trf-settings .pill{
  background-image:none !important;
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:999px !important;
  text-shadow:none !important;
}

/* 小さい幅で改行が出ないようにフォントを少し落とす */
@media (max-width: 430px){
  .pill{ font-size:12px; padding:7px 12px; min-height:34px; }
}


/* Turn indicator is NOT a button skin */
.turnPill{
  background-image:none !important;
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:999px !important;
  text-shadow:none !important;
  padding:8px 12px !important;
}

/* Safety: id selector to win against any later .pill rules */
#turnPill,
#turnPill.pill,
.topBar #turnPill{
  background-image:none !important;
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:999px !important;
  text-shadow:none !important;
}

/* T-102: ターン表示 */
.turnPill{ display:flex; align-items:center; justify-content:center; gap:4px; font-weight:700; text-align:center; }
.turnPill .label{ letter-spacing:.03em; white-space:nowrap; }
.turnPill .dot{
  width:10px; height:10px; border-radius:50%;
  background:#888; box-shadow:none;
  mix-blend-mode: normal !important; filter:none !important;
  display:inline-block; aspect-ratio:1/1; line-height:0;
}
.turnPill.own-p0{ color:var(--trf-p0); -webkit-text-fill-color:var(--trf-p0); }
.turnPill.own-p0 .dot{ background:var(--trf-p0); box-shadow:0 0 10px var(--trf-glow-p0); }
.turnPill.own-p1{ color:var(--trf-p1); -webkit-text-fill-color:var(--trf-p1); }
.turnPill.own-p1 .dot{ background:var(--trf-p1); box-shadow:0 0 10px var(--trf-glow-p1); }


.trf-turnNotice{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) scale(0.96);
  opacity:0;
  pointer-events:none;
  z-index:100001;
  padding:10px 22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(180deg, rgba(8,12,20,0.92), rgba(7,10,16,0.82));
  box-shadow:0 16px 42px rgba(0,0,0,0.48), 0 0 36px rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  white-space:nowrap;
}
.trf-turnNotice__text{
  display:block;
  font-size:20px;
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 0 14px rgba(0,0,0,0.84), 0 3px 16px rgba(0,0,0,0.58);
}
.trf-turnNotice .trf-turn-notice-sub{
  display:block;
  margin-top:7px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.05em;
  opacity:.86;
}
.trf-turnNotice.turn .trf-turn-notice-sub:empty{ display:none; }
.trf-turnNotice.is-your{
  color:#eef9ff;
  border-color:rgba(124,211,252,0.34);
  box-shadow:0 16px 42px rgba(0,0,0,0.48), 0 0 26px rgba(124,211,252,0.28), 0 0 64px rgba(124,211,252,0.12);
}
.trf-turnNotice.is-opp{
  color:#fff3db;
  border-color:rgba(245,158,11,0.34);
  box-shadow:0 16px 42px rgba(0,0,0,0.48), 0 0 24px rgba(245,158,11,0.24), 0 0 56px rgba(245,158,11,0.10);
}
.trf-turnNotice.show{
  animation:trfTurnNoticeIn 1.08s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes trfTurnNoticeIn{
  0%{
    opacity:0;
    transform:translate(-50%, calc(-50% - 8px)) scale(0.92);
  }
  18%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.0);
  }
  74%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.0);
  }
  100%{
    opacity:0;
    transform:translate(-50%, calc(-50% - 6px)) scale(0.98);
  }
}
@media (max-width: 430px){
  .trf-turnNotice{ padding:8px 16px; max-width:min(calc(100vw - 28px), 320px); text-align:center; }
  .trf-turnNotice__text{ font-size:16px; letter-spacing:.06em; }
}

.turnPill.turnBurst{
  position:relative;
  animation:trfTurnPillBurst 1.45s cubic-bezier(.2,.9,.2,1) both;
  transform-origin:left center;
  will-change:transform,filter,box-shadow;
}
.turnPill.turnBurst::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  animation:trfTurnPillHalo 1.45s ease-out both;
}
.turnPill.turnBurst.turnBurst-your::after{
  border:1px solid rgba(124,211,252,0.66);
  box-shadow:0 0 12px rgba(124,211,252,0.46), 0 0 28px rgba(124,211,252,0.24);
}
.turnPill.turnBurst.turnBurst-opp::after{
  border:1px solid rgba(245,158,11,0.58);
  box-shadow:0 0 12px rgba(245,158,11,0.34), 0 0 28px rgba(245,158,11,0.20);
}
@keyframes trfTurnPillBurst{
  0%{ opacity:.18; transform:scale(.86) translateY(-4px); filter:brightness(.9); }
  18%{ opacity:1; transform:scale(1.14) translateY(0); filter:brightness(1.28); }
  58%{ opacity:1; transform:scale(1.04) translateY(0); filter:brightness(1.12); }
  100%{ opacity:1; transform:scale(1); filter:brightness(1); }
}
@keyframes trfTurnPillHalo{
  0%{ opacity:0; transform:scale(.92); }
  16%{ opacity:1; transform:scale(1.06); }
  100%{ opacity:0; transform:scale(1.20); }
}

/* 色ユーティリティ */
.p0c{ color: var(--trf-p0) !important; }
.p1c{ color: var(--trf-p1) !important; -webkit-text-fill-color: var(--trf-p1) !important; }
.p0bg{ background: var(--trf-p0) !important; }
.p1bg{ background: var(--trf-p1) !important; }

.handRow{
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
}

/* ★手札行: 盤面カード(2:3)より少し余裕を持たせた高さ */
.hand{
  position:static;
  display:flex; align-items:flex-end; gap:3px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:6px 6px;
  background:transparent;
  min-height: calc(var(--hcard-w) * 2.02);
  flex:1 1 auto;
}

/* ===== カード共通 ===== */
.card{
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  box-sizing:border-box;
}

/* ★手札カード: 横幅 = --hcard-w, 縦横比 2:3 */
.hand .card{
  width:var(--hcard-w)!important;
  min-width:var(--hcard-w)!important;
  height:calc(var(--hcard-w) * 1.5) !important; /* 2:3 比率 */
  aspect-ratio:auto !important;
  overflow:hidden!important;
}

.cardInner{
  width:100%;
  height:100%;
  padding:0;
}

.cardFace{
  position:relative;
  width:100%;
  height:100% !important;
  border-radius:8px;
  overflow:hidden !important;
  display:block;
}

/* 数字の位置: 上中央に固定(後で手札だけ左寄せする) */
.cardTop{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:auto;
  flex:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  pointer-events:none;
  padding:0;
  z-index:3;
}
.card.facedown .cardTop{ display:none; }

.cardValue{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  padding:1px 5px 1px 4px;
  border-radius:10px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.25);
  font:700 14px/1 ui-rounded, system-ui, sans-serif;
  color:#f5fbff;
  text-shadow:0 0 4px rgba(0,0,0,.8);
}
.hand .cardValue{
  font-size:13px;
  min-width:16px;
  padding:1px 4px;
  text-align:left;
  margin-left:2px;
}

/* 手札で数字バッジをより左上寄せ */
#meHand .card .cardTop,
#opHand .card .cardTop{
  justify-content:flex-start;
  left:2px;
  right:auto;
}

/* カードアート */
.cardArtWrap{
  position:absolute;
  inset:0 !important;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden !important;
  z-index:1;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}
.cardArt{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:cover;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* 裏面 */
.card.facedown .cardArtWrap{ opacity:0; }
.card.facedown .cardFace::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:var(--trf-card-back-img);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:1;
}

.card.faceup{ background:#0b202d; }
.card.facedown{ background:#0e1319; }

/* 手札カード枠を 3px に */
.hand .card.p0{ border:3px solid #1f4a68; }
.hand .card.p1{ border:3px solid #6a2b3a; }

.hand .card.p0.faceup,
.rowTop .card.p0.faceup,
.rowBottom .card.p0.faceup{ background:#0e2430; }

.hand .card.p1.faceup,
.rowTop .card.p1.faceup,
.rowBottom .card.p1.faceup{ background:#2b1218; }

/* SELECT/HIGHLIGHT */
.card.sel{
  box-shadow:
    0 0 0 2px var(--accent) inset,
    0 0 0 2px rgba(76,195,255,.9),
    0 0 18px rgba(76,195,255,.95);
  transform:translateY(-1px);
}
.card.hl{
  box-shadow:
    0 0 0 2px #f6d365 inset,
    0 0 0 2px rgba(246,211,101,.9),
    0 0 18px rgba(246,211,101,.95);
}

/* Stage637: move the contour glow ring farther outside the card edge.
   Keep the card colors visible while the ring sits more clearly outside the card silhouette. */
#main #meHand .card:not(.sel):not(.hl){
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 5px rgba(164,196,255,.05);
  filter:brightness(1.01) saturate(1.00);
}
#main #meHand .card:not(.sel):not(.hl) .cardArt{
  filter:brightness(1.04) saturate(1.02) contrast(1.02) !important;
}
#main #meHand .card:not(.sel):not(.hl) .cardValue{
  text-shadow:0 0 3px rgba(255,255,255,.10),0 2px 4px rgba(0,0,0,.86);
}
#main #meHand .card.trf-effg-g123:not(.sel):not(.hl),
#main #meHand .card.trf-effg-g456:not(.sel):not(.hl),
#main #meHand .card.trf-effg-g8910:not(.sel):not(.hl),
#main #meHand .card.trf-effg-g111213:not(.sel):not(.hl){
  box-shadow:
    0 0 0 2px rgba(255,255,255,.28),
    0 0 12px rgba(238,246,255,.42),
    0 0 26px rgba(120,174,255,.34),
    0 0 42px rgba(96,128,255,.18);
  filter:brightness(1.23) saturate(1.16);
}
#main #meHand .card.trf-effg-g123:not(.sel):not(.hl) .cardInner,
#main #meHand .card.trf-effg-g456:not(.sel):not(.hl) .cardInner,
#main #meHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardInner,
#main #meHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardInner{
  position:relative;
}
#main #meHand .card.trf-effg-g123:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g456:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardInner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.20), rgba(230,242,255,.08) 42%, rgba(230,242,255,0) 74%);
  mix-blend-mode:screen;
}
#main #meHand .card.trf-effg-g123:not(.sel):not(.hl) .cardArt,
#main #meHand .card.trf-effg-g456:not(.sel):not(.hl) .cardArt,
#main #meHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardArt,
#main #meHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardArt{
  filter:brightness(1.38) saturate(1.22) contrast(1.12) !important;
}
#main #meHand .card.trf-effg-g123:not(.sel):not(.hl) .cardValue,
#main #meHand .card.trf-effg-g456:not(.sel):not(.hl) .cardValue,
#main #meHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardValue,
#main #meHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardValue{
  text-shadow:0 0 10px rgba(255,255,255,.48),0 2px 4px rgba(0,0,0,.90);
}
#main #meHand.trfHandFan .card:not(.sel){
  transition:transform .12s ease-out, box-shadow .12s ease-out, filter .12s ease-out;
}

/* ★ハイライト時もカードサイズ固定 */
.card.sel,
.card.hl,
.card.tapPulse{
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
.card.sel .cardFace,
.card.hl .cardFace,
.card.tapPulse .cardFace{
  height:100% !important;
  overflow:hidden !important; /* ★修正: !重要 → !important */
}
.card.sel .cardArtWrap,
.card.hl .cardArtWrap,
.card.tapPulse .cardArtWrap{
  inset:0 !important;
  overflow:hidden !important;
}
.card.sel .cardArt,
.card.hl .cardArt,
.card.tapPulse .cardArt{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:none !important;
}

/* PASSED */
.hand.is-passed{ filter:grayscale(1) brightness(.85) opacity:.8; }

.passFlag{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font:900 28px/1 ui-rounded, system-ui, sans-serif;
  letter-spacing:.12em;
  color:#dbe1e8;
  opacity:.95;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  z-index:3000;
}
.hand.is-passed .passFlag{ display:flex; }
.passFlag .tag{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid #2b3442;
  background:rgba(12,16,22,.85);
}

/* ---- 盤面 ---- */
.zoneTitle{ opacity:.85; margin:6px 4px 0;
  min-height:22px; /* guide文の有無で盤面が縮まないよう空間を確保 */
}

/* 3レーンコンテナ */
.zones{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:0 0 14px;
  padding:0;
  border-radius:0;
  background-color:transparent !important;
  overflow:hidden;
}

/* レーン枠:中身は透過、枠だけ */
.zone{
  position:relative;
  padding:12px 8px 40px;
  border:1px solid rgba(98,126,158,.48);
  border-radius:16px;
  background:transparent !important;
  backdrop-filter:none;
}

/* カードを出す「部分」だけ 70% 不透明 */
.zoneCol{
  display:grid !important;
  grid-template-rows:auto auto; /* ★修正: 1fr 1fr → auto auto(空き領域の“縦伸び”を抑止) */
  gap:4px;
  min-height:214px;
  padding:6px 4px;
  border-radius:10px;
  background:rgba(5,10,22,.70) !important;
}

/* 行コンテナは透過 */
.zoneCol > *{
  background:transparent !important;
}

.rowTop,
.rowBottom{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-auto-flow: row dense !important;
  gap:8px !important;
  min-height:90px;
  max-height:30vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:transparent !important;
}

/* 盤面上のカード枠も 3px + 外側に黒線 */
.rowTop .card,
.rowBottom .card{
  width:100% !important;
  max-width:100% !important;
  height:auto!important;
  aspect-ratio:2/3!important;
  padding:0!important;
  overflow:hidden!important;
  border:3px solid #2b3440;
  border-radius:10px;
  outline:1px solid #000;
  outline-offset:0;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  font:600 18px/1 ui-rounded, system-ui, sans-serif!important;
  color:#e6f2ff;
  background:#111a22;
  position:relative;
}
.rowTop .card.p0,
.rowBottom .card.p0{ border-color:#1f4a68; }
.rowTop .card.p1,
.rowBottom .card.p1{ border-color:#6a2b3a; }

.card.facedown{ background:#0e1319; }

/* タップパルス */
.card.tapPulse{
  animation: tapPulse .5s ease-out 1;
}
@keyframes tapPulse{
  0%{ box-shadow:0 0 0 0 rgba(124,211,252,.0); }
  25%{ box-shadow:0 0 0 4px rgba(124,211,252,.75); }
  100%{ box-shadow:0 0 0 0 rgba(124,211,252,.0); }
}

/* badge */
.badgeRow{ position:absolute; top:4px; left:4px; display:flex; gap:4px; pointer-events:none; }
.badge{
  font-size:11px;
  padding:2px 6px;
  border:1px solid #2b3440;
  border-radius:8px;
  background:#16212c;
  color:#cfe9ff;
}

.zoneBadge{
  position:absolute; top:6px; right:8px; font-size:10px; padding:2px 6px;
  border:1px dashed #5b7d36; border-radius:999px; color:#d7f7a6; background:#152117; pointer-events:none; z-index:12;
}

/* ログ・効果 */
#log,#eff{
  /*
    Default: bottom overlay.
    (When bottom-actions anchor is available, an override below will pin the panel under the buttons.)
  */
  position:fixed; left:0; right:0;
  bottom:env(safe-area-inset-bottom);
  height:42vh; display:none; z-index:1300;
  border-radius:12px 12px 0 0; background:#0f141a; border:1px solid #2b3442;
  padding:10px; font-size:12px; overflow:auto;
  -webkit-overflow-scrolling:touch;
}
#eff{
  /* Effects list should be taller than the log so it can reach near the opponent board. */
  /* NOTE: On small screens (e.g. iPhone SE), 58vh is not enough and the panel ends around the log area.
     Keep it as a bottom overlay but extend upward more so it reaches around mid-screen.
  */
  height:70vh;
  max-height:calc(100vh - 84px);
}

/* Log lines: boxed entries + player accent */

/* Log panel: parchment underlay (doesn't affect text) */
#log{ position:fixed; overflow:auto; 
  background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), var(--trf-ui-log-parchment-img);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
}
#log{ padding:12px 12px; }
#log > div{ position:relative; z-index:1; }
#log > div{
  color:#e6edf3;
  margin:0 0 6px;
  padding:8px 12px;
  border-radius:12px;
  background:#0b0f14;
  border:1px solid rgba(160,190,220,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.65),
    0 10px 22px rgba(0,0,0,0.26);
}
#log > div.trf-log-line{ position:relative; padding-left:12px; }
#log > div.trf-log-line::before{
  content:"";
  position:absolute;
  left:0; top:8px; bottom:8px;
  width:4px;
  border-radius:4px;
  background:rgba(255,255,255,0.20);
  box-shadow: 0 0 12px rgba(255,255,255,0.06);
}
#log > div.trf-log-line.trf-p0::before{ background:rgba(96,176,255,0.65); }
#log > div.trf-log-line.trf-p1::before{ background:rgba(255,124,124,0.65); }

/* Log entries: richer metal-like frame + rivets (no external images) */
#log > div{ position:relative; overflow:hidden; }
#log > div::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  pointer-events:none;
  /* metallic inner frame + 4 rivets */
  background:
    radial-gradient(circle at 10px 10px, rgba(214,168,78,0.70) 0 1.6px, rgba(214,168,78,0.35) 1.6px 2.6px, rgba(0,0,0,0) 3.2px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(214,168,78,0.70) 0 1.6px, rgba(214,168,78,0.35) 1.6px 2.6px, rgba(0,0,0,0) 3.2px),
    radial-gradient(circle at 10px calc(100% - 10px), rgba(214,168,78,0.70) 0 1.6px, rgba(214,168,78,0.35) 1.6px 2.6px, rgba(0,0,0,0) 3.2px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(214,168,78,0.70) 0 1.6px, rgba(214,168,78,0.35) 1.6px 2.6px, rgba(0,0,0,0) 3.2px),
    linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 55%, rgba(0,0,0,0.25));
  box-shadow:
    inset 0 0 0 1px rgba(220,200,150,0.14),
    inset 0 0 0 2px rgba(0,0,0,0.55);
}

/* Log tokens: emphasize key words by color/shape (scan-friendly) */
#log .trf-log-token{ display:inline; font-weight:700; }
#log .trf-log-player{ font-weight:900; letter-spacing:.02em; }
#log .trf-log-player.trf-log-p1{ color:rgba(96,176,255,0.95); }
#log .trf-log-player.trf-log-p2{ color:rgba(255,124,124,0.95); }
#log .trf-log-lane{ font-weight:900; text-decoration:underline; text-underline-offset:2px; }

/* Face-up = gold, Face-down = silver */
#log .trf-log-face-up{ color:rgba(232,200,120,0.98); text-shadow:0 1px 2px rgba(0,0,0,0.55); }
#log .trf-log-face-down{ color:rgba(120,120,120,0.95); text-shadow:0 1px 2px rgba(0,0,0,0.55); }

/* Power tag */
#log .trf-log-power{ font-weight:900; opacity:0.95; }


/* Online menu action buttons: CSS design (no image) */
.trf-online-roomBtns .pill{
  background-image:none !important;
  background-color:rgba(10,14,20,0.78) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 10px 24px rgba(0,0,0,0.30) !important;
  text-shadow:0 1px 2px rgba(0,0,0,0.65) !important;
  font-weight:800 !important;
  letter-spacing:.04em;
}
.trf-online-roomBtns .pill::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:999px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.00));
  pointer-events:none;
}
.trf-online-roomBtns .pill{ position:relative; overflow:hidden; }
.trf-online-roomBtns .pill:active{ transform: translateY(1px); }
.trf-online-roomBtns .pill[disabled]{ opacity:.55; filter:none !important; }

/* Online menu public checkbox row styled like a button */
.trf-online-roomBtns .trf-online-publicToggle{
  position:relative;
  overflow:hidden;
  background:rgba(10,14,20,0.78);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  padding:8px 16px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -2px 0 rgba(0,0,0,0.55), 0 10px 24px rgba(0,0,0,0.30);
}
.trf-online-roomBtns .trf-online-publicToggle::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:999px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.00));
  pointer-events:none;
}
.trf-online-roomBtns .trf-online-publicToggle input{ transform: scale(1.05); }

/* Online menu: center the 2x2 room button grid as a whole */
.trf-online-roomRow{ justify-content:center; }
.trf-online-roomRow > label{ width:100%; justify-content:center; }
.trf-online-roomBtns{
  width:100%;
  max-width:480px;
  margin:0 auto;
}


/* Extra lift for very small height devices */
@media (max-height: 680px){
  #eff{ height:74vh; max-height:calc(100vh - 72px); }
}
@media (max-height: 600px){
  #eff{ height:78vh; max-height:calc(100vh - 64px); }
}
#log.on,#eff.on{ display:block; }

/*
  Anchor mode: put the panels *under* the bottom action buttons.
  JS sets:
    html[data-trf-log-anchored="1"]
    --trf-bottom-actions-bottom: <px>  (viewport top -> bottomActions bottom)
*/
/*
  Anchor mode:
  - #log should be pinned *under* the bottom action buttons (to avoid covering the buttons)
  - #eff (Effects list) should remain a normal bottom overlay so it can extend upward
    (it is frequently used as a reference panel and needs to reach near the opponent board).
*/
html[data-trf-log-anchored="1"] #log{
  top:calc(var(--trf-bottom-actions-bottom, 0px) + 6px);
  bottom:env(safe-area-inset-bottom);
  height:auto;
}
/* Allow scroll for panels even under mock-online-lock (touch-action is globally none) */
html.mock-online-lock #log,
html.mock-online-lock #eff{
  touch-action: pan-y !important;
  -ms-touch-action: pan-y !important;
  overscroll-behavior: contain;
}

.lastResult{
  margin:0 12px -4px; padding:6px 10px;
  border:1px solid #284156; background:#0f1b25; border-radius:10px; color:#cfe9ff; font-size:12px;
}

/* ===== 効果ポップ ===== */
.eff-pop{ position:fixed; left:12px; right:12px; top:58px; z-index:1400; }
.eff-pop[hidden]{ display:none !important; }
.eff-pop-body{
  position:relative;
  border:1px solid #2b3442; border-radius:12px;
  background:#0f141a; padding:12px 44px 12px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
}
.eff-pop-body p{ margin:0; color:#d7e6f4; font-size:13px; line-height:1.5; }
.eff-pop-body p .v{ font-weight:800; letter-spacing:.02em; }
.eff-pop-body > button{
  position:absolute; top:6px; right:8px; width:28px; height:28px; border-radius:16px;
  border:1px solid #2b3442; background:#151b22; color:#cfe0f5; cursor:pointer; font-size:16px; line-height:1; padding:0;
}

/* ===== 勝敗モーダル ===== */
.resultTitle{
  font-weight:900; font-size:28px; letter-spacing:.5px;
  margin-bottom:4px; color:#fff;
}
.resultTitle.win,
.resultTitle.lose{ color:#fff !important; }

.resultScore{ font-size:22px; color:#cfe9ff; opacity:.95; }
.resultScore.vcol{
  display:flex; flex-direction:column; align-items:center; gap:4px; position:relative;
}
.resultScore.vcol .t,
.resultScore.vcol .b{
  font:700 32px/1 ui-serif, "Hiragino Mincho ProN", "Yu Mincho", "Hiragino Mincho Pro", "MS Mincho", serif;
}
.resultScore .p0c{ color:#a8dcff; }
.resultScore .p1c{ color:#ffc0c6; }
.resultScore.vcol .sep{
  display:block; width:56px; height:2px; margin:2px 0;
  background:var(--line); border-radius:2px; opacity:.8;
}
@media (max-width:480px){
  .resultScore.vcol .t,
  .resultScore.vcol .b{ font-size:28px; }
}

/* ===== ボタン ===== */
.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.hintPulse{
  outline:2px solid rgba(224,232,244,0.96);
  box-shadow:0 0 0 2px rgba(224,232,244,0.10), 0 0 12px rgba(224,232,244,0.14);
  animation:trfHintPulseBtn 1.15s ease-in-out infinite;
}
.hand.hintPulse{
  position:relative;
  isolation:isolate;
  outline:2px solid rgba(224,244,255,.50);
  outline-offset:-3px;
  border-radius:16px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(124,211,252,.10), rgba(124,211,252,0) 64%) !important;
  box-shadow:
    0 0 0 2px rgba(224,244,255,.14) inset,
    0 0 18px rgba(124,211,252,.28),
    0 0 42px rgba(124,211,252,.16);
  animation:trfHintPulseHandArea 1.08s ease-in-out infinite;
}
#main #meHand.hintPulse .card.hintPulse:not(.sel):not(.hl){
  animation:none !important;
}
#main #meHand.hintPulse .card:not(.sel):not(.hl){
  /* hand selection guidance should read as an area glow, not per-card neon */
  filter:brightness(1.00) saturate(1.00);
}
.zone.hintPulse{
  box-shadow:0 0 0 2px rgba(224,232,244,0.24),
             0 0 16px rgba(224,232,244,0.18),
             0 0 32px rgba(224,232,244,0.10);
  animation:trfHintPulseZone 1.05s ease-in-out infinite;
}
@keyframes trfHintPulseBtn{
  0%,100%{ filter:brightness(1.0); box-shadow:0 0 0 2px rgba(224,232,244,0.10), 0 0 12px rgba(224,232,244,0.14); }
  50%{ filter:brightness(1.35); box-shadow:0 0 0 2px rgba(224,232,244,0.30), 0 0 20px rgba(224,232,244,0.42), 0 0 42px rgba(124,211,252,0.22); }
}
@keyframes trfHintPulseZone{
  0%,100%{ filter:brightness(1.0) saturate(1.0); box-shadow:0 0 0 2px rgba(224,232,244,0.24), 0 0 16px rgba(224,232,244,0.18), 0 0 32px rgba(224,232,244,0.10); }
  50%{ filter:brightness(1.30) saturate(1.25); box-shadow:0 0 0 2px rgba(224,232,244,0.62), 0 0 30px rgba(224,232,244,0.42), 0 0 70px rgba(124,211,252,0.28); }
}
@keyframes trfHintPulseHandArea{
  0%,100%{
    filter:brightness(1.00) saturate(1.00);
    outline-color:rgba(224,244,255,.42);
    box-shadow:
      0 0 0 2px rgba(224,244,255,.12) inset,
      0 0 14px rgba(124,211,252,.20),
      0 0 34px rgba(124,211,252,.10);
  }
  50%{
    filter:brightness(1.10) saturate(1.06);
    outline-color:rgba(240,252,255,.92);
    box-shadow:
      0 0 0 2px rgba(240,252,255,.34) inset,
      0 0 28px rgba(146,226,255,.56),
      0 0 68px rgba(124,211,252,.30);
  }
}
@keyframes trfHintPulseCard{
  0%,100%{
    transform:translateY(0) scale(1.00);
    filter:brightness(1.03) saturate(1.04);
  }
  50%{
    transform:translateY(-2px) scale(1.035);
    filter:brightness(1.08) saturate(1.10);
  }
}

@keyframes trfHintPulseCardStrong{
  0%,100%{
    transform:translateY(0) scale(1.00);
    filter:brightness(1.05) saturate(1.10);
  }
  50%{
    transform:translateY(-3px) scale(1.05);
    filter:brightness(1.12) saturate(1.18);
  }
}

@keyframes trfHintOutlinePulse{
  0%,100%{
    opacity:.42;
    border-color:rgba(196,224,255,.62);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 0 6px rgba(228,241,255,.16),
      0 0 10px rgba(124,211,252,.10);
  }
  50%{
    opacity:.82;
    border-color:rgba(232,242,255,.84);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12),
      0 0 10px rgba(240,248,255,.28),
      0 0 16px rgba(124,211,252,.16);
  }
}

@keyframes trfHintOutlinePulseStrong{
  0%,100%{
    opacity:.48;
    border-color:rgba(212,232,255,.70);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 0 8px rgba(236,245,255,.20),
      0 0 12px rgba(124,211,252,.12),
      0 0 18px rgba(96,128,255,.06);
  }
  50%{
    opacity:.90;
    border-color:rgba(244,248,255,.90);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.16),
      0 0 12px rgba(245,250,255,.34),
      0 0 18px rgba(124,211,252,.20),
      0 0 26px rgba(96,128,255,.08);
  }
}

.guidePulse{
  display:inline-block;
  position:relative;
  isolation:isolate;
  animation:trfGuidePulse 0.92s ease-in-out infinite;
}
.guidePulse::before,
.guidePulse::after{
  content:'';
  position:absolute;
  inset:-10px -16px;
  pointer-events:none;
  border-radius:999px;
  opacity:.72;
  mix-blend-mode:screen;
  z-index:-1;
}
.guidePulse::before{
  background:
    radial-gradient(circle at 16% 52%, rgba(150,255,238,.34) 0 3px, transparent 4px),
    radial-gradient(circle at 33% 20%, rgba(175,255,245,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 78%, rgba(125,255,233,.30) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 34%, rgba(160,255,240,.26) 0 2px, transparent 3px);
  filter:blur(.2px);
  animation:trfGuideBubbleA 2.2s linear infinite;
}
.guidePulse::after{
  background:
    radial-gradient(circle at 24% 74%, rgba(150,255,238,.22) 0 4px, transparent 5px),
    radial-gradient(circle at 48% 26%, rgba(175,255,245,.18) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 62%, rgba(125,255,233,.24) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 18%, rgba(180,255,245,.16) 0 3px, transparent 4px);
  filter:blur(1.2px);
  animation:trfGuideBubbleB 2.8s linear infinite;
}
@keyframes trfGuidePulse{
  0%,100%{
    opacity:0.78;
    filter:brightness(1.0) saturate(1.0);
    text-shadow:0 0 10px rgba(45,212,191,0.34), 0 0 18px rgba(45,212,191,0.16), 0 2px 10px rgba(0,0,0,0.78);
  }
  50%{
    opacity:1;
    filter:brightness(1.46) saturate(1.22);
    text-shadow:0 0 14px rgba(150,255,238,0.96), 0 0 30px rgba(45,212,191,0.46), 0 2px 10px rgba(0,0,0,0.84);
  }
}
@keyframes trfGuideBubbleA{
  0%{ transform:translateY(0px) scale(0.96); opacity:.42; }
  50%{ transform:translateY(-4px) scale(1.04); opacity:.88; }
  100%{ transform:translateY(-8px) scale(1.08); opacity:.36; }
}
@keyframes trfGuideBubbleB{
  0%{ transform:translateY(4px) scale(0.94); opacity:.28; }
  50%{ transform:translateY(-2px) scale(1.02); opacity:.64; }
  100%{ transform:translateY(-10px) scale(1.08); opacity:.20; }
}

@keyframes trfEffPickPulse{
  0%,100%{
    filter:brightness(1.0) saturate(1.0);
    box-shadow:
      0 0 0 2px var(--trf-eff-emerald) inset,
      0 0 0 2px rgba(45,212,191,.78),
      0 0 10px rgba(45,212,191,.55),
      0 0 26px var(--trf-eff-emerald-glow) !important;
  }
  50%{
    filter:brightness(1.22) saturate(1.16);
    box-shadow:
      0 0 0 2px rgba(175,255,240,.98) inset,
      0 0 0 2px rgba(125,255,233,.92),
      0 0 18px rgba(125,255,233,.78),
      0 0 40px rgba(45,212,191,.34) !important;
  }
}

.btn:disabled{ opacity:.45; pointer-events:none; }

/* 2段階効果(偵察/鎮圧/軍師/陽動/工兵/間者 等)の発動中: PASS を強めにグレーアウト */
#btnPass.needBlocked,
#btnPass.needBlocked:disabled{
  opacity: 0.22;
  filter: grayscale(1);
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.55);
}

#btnPass.oppTurnDisabled,
#btnPass.oppTurnDisabled:disabled{
  opacity: 0.38;
  filter: grayscale(0.95);
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.52);
}
.btn.danger{ background:#2a1517; border-color:#5a2b2b; color:#ffc0c6; }

/* ===== モーダル ===== */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  z-index:100;
  align-items:center;
  justify-content:center;
}
.modalBox{
  width:min(480px,96vw);
  background:#0f141a;
  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:4px;
}
.modalBody{ padding:14px; }
.modalFooter{
  padding:12px 16px;
  border-top:1px solid #2b3442;
  display:flex;
  gap:4px;
  justify-content:flex-end;
}
.confirmText{ font-size:13px; color:#e6edf3; }
.confirmNote{ fontサイズ:12px; color:#ffb4c0; opacity:.9; margin-top:6px; }

/* 受け渡し中は盤面を完全不可視に */
#handover.modal{ background:#000 !important; z-index: 99999 !important; }
body.modal-open{ overflow:hidden; }
body.modal-open #play{
  opacity:0 !important;
  visibility:hidden !important;
  filter:none !important;
  pointer-events:none !important;
  user-select:none !important;
}
body.modal-open #log,
body.modal-open #eff{ display:none !important; } /* ★修正: display:none! important → !important */

/* ===== TopBar: 縦積みスコア ===== */
.topScore{ display:flex; align-items:center; gap:4px; }
.topScore .stack{ display:flex; flex-direction:column; line-height:1.05; }
.topScore .t,
.topScore .b{ font-weight:800; font-size:16px; text-align:center; }
@media (max-width:480px){
  .topScore .t,
  .topScore .b{ font-size:13px; }
}
.topScore .t,
.topScore .b{ color:var(--fg); opacity:.95; }
.topScore .p0c{ color:#a8dcff; }
.topScore .p1c{ color:#ffc0c6; }
.topScore{ flex:0 0 24px; min-width:24px; justify-content:flex-end; margin-left:2px; position:relative; z-index:3; }
@media (max-width: 430px){
  .topScore{ flex-basis:20px; min-width:20px; margin-left:0; }
  .topScore .t,
  .topScore .b{ font-size:12px; }
}

/* ===== 演出レイヤ(RoundFX) ===== */
.rf-layer{position:fixed; inset:0; z-index:1900; pointer-events:none;}

/* tutorial: RoundFXピン留め(『ラウンド終了』等の説明中は演出を消さない) */
.rf-layer.rf-pinned{ z-index:200005 !important; }
.rf-layer.rf-pinned .rf-glow{ opacity:1 !important; }
.rf-layer.rf-pinned .rf-mid,
.rf-layer.rf-pinned .rf-num{ opacity:1 !important; }

.rf-glow{
  position:absolute;
  border-radius:16px;
  opacity:0;
  box-sizing:border-box;
  box-shadow:none;
  border:none;
  transition: opacity .16s ease, box-shadow .16s ease;
  z-index:1;
}
.rf-glow.on{ opacity:1; }
.rf-glow.win-p0{
  box-shadow:0 0 0 3px var(--trf-p0), 0 0 18px var(--trf-glow-p0);
}
.rf-glow.win-p1{
  box-shadow:0 0 0 3px var(--trf-p1), 0 0 18px var(--trf-glow-p1);
}

.rf-num{
  position:absolute; left:0; right:0; margin:0; padding:0 10px; text-align:center;
  font:900 34px/1 ui-serif, "Hiragino Mincho ProN", "Yu Mincho", "Hiragino Mincho Pro", "MS Mincho", serif; letter-spacing:.5px;
  color:#dbe9f9; text-shadow:0 2px 8px rgba(0,0,0,.45); opacity:0; transform:translateY(6px) scale(.96);
  transition: opacity .16s ease, transform .16s ease;
  -webkit-text-stroke:1px var(--trf-num-stroke);
  mix-blend-mode: normal !important;
  z-index:2;
}
.rf-num.on{opacity:1; transform:translateY(0) scale(1);}
.rf-num.top{ top:8px; }
.rf-num.bottom{ bottom:8px; }

/* 中央ラベル: 各レーン中央にピタリ */
.rf-mid{
  position:absolute;
  left:50%;
  top:50%;
  right:auto;
  margin:0;
  padding:0 10px;
  text-align:center;
  white-space:nowrap;
  font:900 24px/1 ui-rounded, system-ui, sans-serif;
  color:#dbe9f9;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
  opacity:0;
  transform:translate(-50%,-50%) scale(.96);
  transition: opacity .16s ease, transform .16s ease;
}
.rf-mid.on{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* iOS赤の固定 */
#rf-layer .rf-num.p1c,
#scoreOverlay .sum .v.p1,
#scoreOverlay .sum .v1{
  color: var(--trf-p1) !important;
  -webkit-text-fill-color: var(--trf-p1) !important;
  filter: none !important;
  mix-blend-mode: normal ! important;
  text-shadow: 0 0 6px rgba(0,0,0,.25), 0 0 16px rgba(0,0,0,.15) !important;
  -webkit-text-stroke: 1px var(--trf-num-stroke) !important;
}

/* レーン下:自分の現在戦力(長穴プレート) */
.zonePower{
  position:absolute;
  left:8px;
  right:10px;
  bottom:6px;
  text-align:center;
  font:700 12px/1.2 system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  color:#e6f2ff;
  opacity:.96;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(4,10,22,.92);
  border:1px solid rgba(150,190,230,.45);
  box-shadow:0 2px 6px rgba(0,0,0,.55);
}

/* 戦略兵器×オーバーレイ */
.zoneBlock{
  position:absolute; inset:6px; display:none; align-items:center; justify-content:center;
  font:900 46px/1 ui-rounded, system-ui, sans-serif;
  color:#fda4a4; text-shadow:0 2px 10px rgba(0,0,0,.5);
  border:2px dashed rgba(253,164,164,.55);
  border-radius:12px; background:rgba(45,10,14,.28);
  pointer-events:none; z-index:12;
}
@media (max-height:620px){ .zoneBlock{ font-size:40px; } }

/* D&D中: 置けないレーンを赤枠+×で強調 */
.zone.dndLaneBlocked{
  outline:2px solid rgba(253,164,164,.70);
  outline-offset:-2px;
}
.zone.dndLaneBlocked .zoneBlock{
  display:flex !important;
}

/* ==== 山札 ==== */
.handRow .deckBox,
.handRow .deckBox *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform:none !important;
}
.deckLabel{ white-space:nowrap; }

.handRow .deckBox{
  position:relative;
  width:var(--hcard-w);
  height:calc(var(--hcard-w)*1.55);
  margin-left:8px;
  border-radius:8px;
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.handRow .deckBox::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:var(--trf-deck-back-img);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 0 0 2px #2b3442, 0 4px 10px rgba(0,0,0,.65);
  pointer-events:none;
}
.handRow .deckBox .deckLabel,
.handRow .deckBox .deckCount,
.handRow .deckBox #deckCount,
.handRow .deckBox .deckNum{
  position:relative;
  z-index:2;
  display:block;
  color:#f5fbff;
  text-shadow:0 0 4px rgba(0,0,0,.9);
  line-height:1.2;
}
.handRow .deckBox .deckLabel{
  font-size:11px;
  font-weight:600;
  margin-bottom:2px;
}
.handRow .deckBox .deckCount,
.handRow .deckBox #deckCount,
.handRow .deckBox .deckNum{
  font-size:13px;
  font-weight:800;
}

/* 2段階操作ゾーン発光 */
.zone.zoneGlow{
  /* 選択肢の点灯は「はっきり点滅」(ゆっくり/銀色系) */
  animation: zonePulse 2.10s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(228,236,246,.95) inset,
              0 0 22px 6px rgba(220,232,246,.45),
              0 0 48px 14px rgba(220,232,246,.22);
}
@keyframes zonePulse{
  0%{
    filter:brightness(0.98) saturate(0.92);
    box-shadow: 0 0 0 2px rgba(228,236,246,.55) inset,
                0 0 12px 4px rgba(220,232,246,.22),
                0 0 28px 10px rgba(220,232,246,.10);
  }
  50%{
    filter:brightness(1.09) saturate(1.00);
    box-shadow: 0 0 0 2px rgba(228,236,246,.95) inset,
                0 0 22px 6px rgba(220,232,246,.55),
                0 0 54px 16px rgba(220,232,246,.26);
  }
  100%{
    filter:brightness(0.98) saturate(0.92);
    box-shadow: 0 0 0 2px rgba(228,236,246,.55) inset,
                0 0 12px 4px rgba(220,232,246,.22),
                0 0 28px 10px rgba(220,232,246,.10);
  }
}

/* ★密使・闇商人エフェクト用オーバーレイ ====================== */

#trfEffectLayer{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:4000;
  background:rgba(0,0,0,.6) !important;
}

/* 旧 .trf-effect-card DOM を使って表示する */
.trf-effect-card{
  width:min(48vh, 48vw);
  aspect-ratio:2/3;
  border-radius:18px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:0 12px 28px rgba(0,0,0,.7), 0 0 32px rgba(0,0,0,.7);
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background-color:#05070b;
  animation: trfEffectFade 1.2s ease-out forwards;
}
.trf-effect-card.envoy{
  background-image:var(--trf-eff-envoy-img);
}
.trf-effect-card.blackmarket{
  background-image:var(--trf-eff-blackmarket-img);
}

@keyframes trfEffectFade{
  0%{
    opacity:0;
    transform:scale(.9);
  }
  12%{
    opacity:1;
    transform:scale(1.02);
  }
  60%{
    opacity:1;
    transform:scale(1.03);
  }
  100%{
    opacity:0;
    transform:scale(1.08);
  }
}

/* --- recentCard(出した直後のユーザーカラー強調)でサイズが伸びないようにする --- */

/* 念のため:border を増やす系の指定があっても“外形が変わらない”前提を作る */
.card{
  box-sizing: border-box;
}

/* recentCard が付いた瞬間に border/padding/margin で外形が変わるのを防止 */
.card.recentCard{
  padding: 0 !important;
  margin: 0 !important;
  /* border は使わず、内側の縁取り(inset shadow)で表現する */
  box-shadow: inset 0 0 0 0 transparent;
}

/* p0(ユーザー0)色:内側縁取り+外側グロー(サイズ不変) */
.card.recentCard.p0{
  box-shadow:
    inset 0 0 0 3px var(--trf-p0),
    0 0 18px var(--trf-glow-p0) !important;
}

/* p1(ユーザー1)色:内側縁取り+外側グロー(サイズ不変) */
.card.recentCard.p1{
  box-shadow:
    inset 0 0 0 3px var(--trf-p1),
    0 0 18px var(--trf-glow-p1) !important;
}

/* --- recentCard で“カード自体が伸びる”のを確実に止める(枠は ::after で描く) --- */

/* box-sizing を強制(どこかで content-box に戻されてても勝つように) */
.card,
.card::before,
.card::after{
  box-sizing: border-box !important;
}

/* recentCard 付与時に、外形が変わる要因を全部潰す */
.card.recentCard{
  padding: 0 !important;
  margin: 0 !important;

  /* ここが本命:border/outline が太くなるとサイズが変わるので殺す */
  border: 0 !important;
  outline: 0 !important;

  /* 伸びの正体が scale/pulse 系でも止める */
  transform: none !important;
  animation: none !important;

  /* 余計なアニメーションで寸法が変わるのを避ける */
  transition-property: box-shadow, filter, opacity !important;

  position: relative !important;
}

/* 枠(ユーザーカラー)はカード本体ではなく ::after に描画=サイズ不変 */
.card.recentCard::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-sizing: border-box;

  /* 太さ固定 */
  border: 3px solid transparent;
}

/* p0/p1 の枠色 */
.card.recentCard.p0::after{ border-color: var(--trf-p0); }
.card.recentCard.p1::after{ border-color: var(--trf-p1); }

/* 外側グロー(サイズ不変) */
.card.recentCard.p0{
  box-shadow: inset 0 0 0 2px var(--trf-p0), inset 0 0 18px var(--trf-glow-p0), 0 0 18px var(--trf-glow-p0) !important;
}
.card.recentCard.p1{
  box-shadow: inset 0 0 0 2px var(--trf-p1), inset 0 0 18px var(--trf-glow-p1), 0 0 18px var(--trf-glow-p1) !important;
}

/* ---- Effects ribbon (effPop) 20251218b ---- */

#effPop{
  display:none;
  position:fixed;
  left:12px;
  right:12px;
  /* effPop は常に上部固定。被り回避は「下げる」ではなく「少し小さく/少し上へ」 */
  top:44px;
  top:calc(44px + env(safe-area-inset-top));
  z-index:1200;
  padding:8px 42px 8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.62);
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Small screens: reduce effPop footprint to avoid overlapping in-play guide text */
@media (max-width: 420px){
  #effPop{
    left:8px;
    right:10px;
    top:calc(40px + env(safe-area-inset-top));
    padding:8px 40px 8px 8px;
    border-radius:12px;
  }
  #effPopClose{
    top:5px;
    right:5px;
    width:30px;
    height:30px;
    line-height:28px;
  }
  #effPopText .effTitle{ font-size:13px; }
  #effPopText .effDesc{
    margin-top:4px;
    font-size:12px;
    max-height:44px;
  }
  #effPopText .effArtImg{
    width:64px;
    height:64px;
    border-radius:12px;
  }
}

/* Tutorial: allow effPop to be visible above tutorial layer */

/* Tutorial: allow effect list panel above tutorial layer */
body.tut-on #eff{ z-index:2147483646 !important; }
body.tut-on #eff, body.tut-on #eff *{ pointer-events:auto !important; }
body.tut-on #effPop{ z-index:2147483646 !important; }
body.tut-on #effPop, body.tut-on #effPop *{ pointer-events:auto !important; }
#effPop.show{ display:block; }
#effPopClose{
  position:absolute;
  top:6px;
  right:6px;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.35);
  color:#fff;
  font-size:18px;
  line-height:30px;
}
#effPopText{
  display:block;
}
#effPopText .effRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
#effPopText .effMain{
  flex:1 1 auto;
  min-width:0;
}
#effPopText .effTitle{
  font-weight:700;
  font-size:15px;
  letter-spacing:0.02em;
}
#effPopText .effDesc{
  margin-top:6px;
  font-size:13px;
  line-height:1.4;
  max-height:56px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  white-space:pre-wrap;
}
#effPopText .effArtImg{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
}

/* guide文(空)でも高さを確保 */
.zoneGuideText--blank{ visibility:hidden; }

/* 手札選択のガイド: 未選択時は手札の各カードを同時にゆっくり点滅。
   光はカード面ではなく、カード輪郭の外側リングとして出す。 */
#main #meHand .card.hintPulse:not(.sel):not(.hl),
#main #opHand .card.hintPulse:not(.sel):not(.hl){
  animation:trfHintPulseCard 1.42s ease-in-out infinite;
  animation-delay:0s !important;
  transform-origin:center bottom;
  will-change:transform, filter;
  position:relative;
  isolation:isolate;
  overflow:visible !important;
}
#main #meHand .card.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.hintPulse:not(.sel):not(.hl)::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:16px;
  pointer-events:none;
  z-index:4;
  background:transparent;
  border:2px solid rgba(196,224,255,.66);
  opacity:.50;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 8px rgba(228,241,255,.18),
    0 0 14px rgba(124,211,252,.12);
  animation:trfHintOutlinePulse 1.42s ease-in-out infinite;
}
#main #meHand .card.hintPulse:not(.sel):not(.hl) .cardArt,
#main #opHand .card.hintPulse:not(.sel):not(.hl) .cardArt{
  filter:brightness(1.08) saturate(1.10) contrast(1.05) !important;
}
#main #meHand .card.hintPulse:not(.sel):not(.hl) .cardValue,
#main #opHand .card.hintPulse:not(.sel):not(.hl) .cardValue{
  text-shadow:0 0 14px rgba(255,255,255,.56),0 2px 4px rgba(0,0,0,.92) !important;
}
#main #meHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl)::after,
#main #meHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl)::after,
#main #meHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl)::after,
#main #meHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl)::after{
  border-color:rgba(220,238,255,.80);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 0 10px rgba(236,245,255,.24),
    0 0 18px rgba(124,211,252,.18),
    0 0 26px rgba(96,128,255,.08);
  animation:trfHintOutlinePulseStrong 1.42s ease-in-out infinite;
}
#main #meHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl),
#main #meHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl),
#main #meHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl),
#main #meHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl),
#main #opHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl),
#main #opHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl),
#main #opHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl),
#main #opHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl){
  animation:trfHintPulseCardStrong 1.42s ease-in-out infinite;
}
#main #meHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl) .cardArt,
#main #meHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl) .cardArt,
#main #meHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl) .cardArt,
#main #meHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl) .cardArt,
#main #opHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl) .cardArt,
#main #opHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl) .cardArt,
#main #opHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl) .cardArt,
#main #opHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl) .cardArt{
  filter:brightness(1.34) saturate(1.24) contrast(1.10) !important;
}
#main #meHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl) .cardValue,
#main #meHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl) .cardValue,
#main #meHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl) .cardValue,
#main #meHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl) .cardValue,
#main #opHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl) .cardValue,
#main #opHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl) .cardValue,
#main #opHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl) .cardValue,
#main #opHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl) .cardValue{
  text-shadow:0 0 18px rgba(255,255,255,.72),0 2px 4px rgba(0,0,0,.94) !important;
}
#main #meHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl) .cardInner::after{
  opacity:.98;
}

/* ---- Stage16: Drag & Drop play (hand -> lane) ---- */

/* ===== DragPlay (D&D) ===== */
#meHand{touch-action:none;}
#meHand .card{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
#meHand .cardInner,#meHand img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
#meHand img{pointer-events:auto;}
.trf-drag-ghost{
  position:fixed;
  left:0; top:0;
  transform:translate(-50%,-70%) scale(1.90);
  transform-origin:center center;
  opacity:0.96;
  pointer-events:none;
  z-index:2505;
  filter:drop-shadow(0 13px 22px rgba(0,0,0,.52));
}
.trf-drag-ghost .card{transform:none!important;}

#dragFacePop{
  position:fixed;
  display:none;
  z-index:2506;
  background:rgba(10,12,16,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:0 14px 28px rgba(0,0,0,.45);
}
#dragFacePop .df-row{ display:flex; gap:4px; }
#dragFacePop .df-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#e8ecf1;
  border-radius:9px;
  padding:10px 12px;
  min-width:56px;
  font-weight:700;
  letter-spacing:.02em;
  position:relative;
}
#dragFacePop .df-btn:active{ transform:translateY(1px); }
#dragFacePop .df-btn[aria-disabled="true"]{
  /* opacity だと擬似要素(×)まで薄くなるため filter で抑える */
  pointer-events:none;
  filter:saturate(0.15) brightness(0.70);
}

/* 推奨(残った方)を軽く強調 */
#dragFacePop .df-btn.df-reco{
  border-color:rgba(120,220,255,.55);
  box-shadow:0 0 0 2px rgba(120,220,255,.18) inset, 0 0 16px rgba(120,220,255,.16);
}

/* 無効な表裏は大きい×で分かりやすく表示 */
#dragFacePop .df-btn[aria-disabled="true"]::after{
  content:"×";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-52%);
  font-size:30px;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.96);
  text-shadow:0 0 12px rgba(0,0,0,.78);
  pointer-events:none;
}

.zone.dropHover{
  box-shadow:0 0 0 3px rgba(255,255,255,.18) inset, 0 0 18px rgba(255,255,255,.12);
}

/* ===== Draw Fly (Deck -> Hand) ===== */
.trf-draw-flycard{
  position:fixed;
  left:0;
  top:0;
  width:44px;
  height:62px;
  border-radius:10px;
  background-image:var(--trf-card-back-img);
  background-size:cover;
  background-position:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transform:translate(-50%,-50%) scale(.78) rotate(var(--trf-fly-rot,0deg));
  transition:left .42s ease, top .42s ease, transform .42s ease, opacity .18s ease;
  pointer-events:none;
  z-index:2402;
  filter:brightness(1.08) saturate(1.05);
}
.trf-draw-flycard.on{
  transform:translate(-50%,-50%) scale(.62) rotate(var(--trf-fly-rot,0deg));
}

/* ---- Stage33: Button blocked X mark (i18n-safe) ---- */
/* data-i18n の textContent 上書きで子要素が消えるため、×印は ::after で描画する */
.btn.trf-blockedX,
.df-btn.trf-blockedX{
  position: relative !important;
  overflow: visible !important;
}
.btn.trf-blockedX::after,
.df-btn.trf-blockedX::after{
  content: "×";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: #ff3b30;
  text-shadow: 0 0 6px rgba(0,0,0,0.85), 0 0 12px rgba(255,59,48,0.55);
  pointer-events: none;
  z-index: 5;
}

/* T-EN-OPS-1: English bottom actions keep single row (avoid wrap) */
html[data-lang="en"] .bottomActions .ops{
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
html[data-lang="en"] .bottomActions .ops .btn{
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
}
html[data-lang="en"] .bottomActions .ops #status{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Ads (Banner) ===== */
#trfBannerSlot{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  pointer-events: auto;
}
body.trf-banner-on{
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}
#trfBannerSlot .trf-ad-dev{
  width: min(100%, 480px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0.7;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  margin: 0 10px;
}


/* ===== Bottom action buttons: metal segmented style (no assets) ===== */
.bottomActions--metal .ops{
  gap:4px;
}
.bottomActions--metal .ops .btn{
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(20,24,32,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.35),
    0 6px 16px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
.bottomActions--metal .ops .btn.on,
.bottomActions--metal .ops .btn.main{
  border-color: rgba(255,255,255,0.30);
  background:rgba(32,38,52,0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -2px 0 rgba(0,0,0,0.40),
    0 8px 18px rgba(0,0,0,0.42);
}


/* ===== Apply same plate to BottomActions buttons (表/裏/出す/捨てる/パス) ===== */
.bottomActions--metal .ops .btn{
  border:0;
  background-color:transparent;
  background-image:var(--trf-ui-btn-bar-img) !important;
  background-size:132% 132% !important;
  background-position:center !important;
  background-repeat:no-repeat;
  box-shadow:none;
  backdrop-filter:none;
  min-height:38px;
  padding:10px 22px;
  color:#e6edf3;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.bottomActions--metal .ops .btn.on,
.bottomActions--metal .ops .btn.main{
  filter:brightness(1.08);
}

.bottomActions--metal .ops .btn.on,
.bottomActions--metal .ops .btn.main{
  background-image:var(--trf-ui-btn-bar-img) !important;
  background-size:132% 132% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
}
.bottomActions--metal .ops .btn[disabled]{
  opacity:.55;
  filter:grayscale(1) brightness(.7);
}
@media (max-width: 430px){
  .bottomActions--metal .ops .btn{ font-size:12px; padding:7px 10px; min-height:34px; }
}


.bottomActions--metal .ops #btnFaceU,
.bottomActions--metal .ops #btnFaceD{
  font-size:12px;
  padding-left:10px;
  padding-right:10px;
}
html[data-lang="en"] .bottomActions--metal .ops #btnFaceU,
html[data-lang="en"] .bottomActions--metal .ops #btnFaceD{
  font-size:10px !important;
}


.bottomActions--metal .ops #btnFaceU.on,
.bottomActions--metal .ops #btnFaceU.main,
.bottomActions--metal .ops #btnFaceU.active,
.bottomActions--metal .ops #btnFaceD.on,
.bottomActions--metal .ops #btnFaceD.main,
.bottomActions--metal .ops #btnFaceD.active{
  outline:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.bottomActions--metal .ops #btnFaceU.on::before,
.bottomActions--metal .ops #btnFaceD.on::before{
  background:rgba(0,0,0,var(--trf-ui-btn-dim,0.22)) !important;
}


/* ===== Online menu checkbox ("部屋を公開する") make it pill-like and prevent wrap ===== */
.trf-online-publicToggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  border:0;
  border-radius:999px;
  background-color:transparent;
  background-image:var(--trf-ui-btn-bar-img);
  background-size:132% 132%;
  background-position:center;
  background-repeat:no-repeat;
  color:#e6edf3;
  white-space:nowrap;
  min-height:36px;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.trf-online-publicToggle input{ transform:scale(1.05); }
@media (max-width: 430px){
  .trf-online-publicToggle{ font-size:12px; padding:7px 10px; min-height:34px; gap:4px; }
}

/* ===== Title/menu generic buttons (non-pill) ===== */
#titleFlow button:not(.pill){
  border:0;
  border-radius:999px;
  background-color:transparent;
  background-image:var(--trf-ui-btn-bar-img);
  background-size:132% 132%;
  background-position:center;
  background-repeat:no-repeat;
  color:#e6edf3;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
@media (max-width: 430px){
  #titleFlow button:not(.pill){ font-size:12px; }
}

/* ===== Handover: "続ける" button revert to original style ===== */
#goNext.pill{
  background-image:none !important;
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  text-shadow:none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.18) !important;
}

/* ================================
 * Stage239: Hotfix
 * - Online menu buttons must NOT auto-apply plate image
 * - Turn pill must NOT be skinned
 * - Bottom action buttons must be forced to 600%
 * ================================ */

/* Online menu (対戦→オンライン対戦): keep programmatic pill look (no plate image) */
.trf-online-roomBtns .pill,
.trf-online-roomBtns button.pill,
.trf-online-roomBtns .pill.on,
.trf-online-roomBtns .pill.active,
.trf-online-roomBtns .pill.selected,
.trf-online-roomBtns .pill.isOn{
  background-image:none !important;
  background-color:rgba(10,14,20,0.78) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 10px 24px rgba(0,0,0,0.30) !important;
  text-shadow:0 1px 2px rgba(0,0,0,0.65) !important;
  font-weight:800 !important;
  letter-spacing:.04em;
  white-space:nowrap;
}

/* Online public toggle (部屋を公開する) should also stay programmatic */
.trf-online-publicToggle,
.trf-online-publicToggle.pill{
  background-image:none !important;
  background-color:rgba(10,14,20,0.78) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 10px 24px rgba(0,0,0,0.30) !important;
}

/* Turn indicator is NOT a button: always exclude skin (class/id both) */
.turnPill,
#turnPill{
  background-image:none !important;
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:999px !important;
  text-shadow:none !important;
}

/* Bottom actions (表/裏/出す/捨てる/パス) are NOT .pill; force plate zoom */
.bottomActions--metal .ops .btn,
.bottomActions--metal .ops .btn.on,
.bottomActions--metal .ops .btn.main,
.bottomActions--metal .ops .btn.active{
  background-image:var(--trf-ui-btn-bar-img) !important;
  background-size:600% auto !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
  position:relative;
  overflow:hidden;
}

.bottomActions--metal .ops .btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,var(--trf-ui-btn-dim,0.22));
  border-radius:inherit;
  pointer-events:none;
}

/* Bottom action buttons: readability + glow contained INSIDE the frame */
.bottomActions--metal .ops .btn{
  color:#f2f6fb !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.80),
    0 0 6px rgba(0,0,0,0.55);
}
.bottomActions--metal .ops .btn.on,
.bottomActions--metal .ops .btn.main,
.bottomActions--metal .ops .btn.active{
  /* no outer glow; only inset highlight */
  box-shadow:
    inset 0 0 0 2px rgba(120,200,255,0.38),
    inset 0 0 14px rgba(120,200,255,0.22) !important;
}

/* English labels: avoid clipping */
html[data-lang="en"] .bottomActions--metal .ops .btn{
  font-size:8px !important;
  padding:7px 8px !important;
}



/* ================================
 * Stage247: polish
 * - Log rivet color + frame richer
 * - Bottom action button text contrast + contained glow stronger
 * (NO image changes)
 * ================================ */

:root{
  --trf-log-rivet-hi: rgba(238, 224, 196, 0.62);
  --trf-log-rivet-mid: rgba(150, 122, 78, 0.78);
  --trf-log-rivet-lo: rgba(10, 12, 16, 0.85);
}

/* Log rivets: metallic, less "yellow dot" */
#log > div::after{
  background:
    radial-gradient(circle at 10px 10px,
      var(--trf-log-rivet-hi) 0 1px,
      var(--trf-log-rivet-mid) 1px 2px,
      var(--trf-log-rivet-lo) 2px 3px,
      rgba(0,0,0,0) 4px),
    radial-gradient(circle at calc(100% - 10px) 10px,
      var(--trf-log-rivet-hi) 0 1px,
      var(--trf-log-rivet-mid) 1px 2px,
      var(--trf-log-rivet-lo) 2px 3px,
      rgba(0,0,0,0) 4px),
    radial-gradient(circle at 10px calc(100% - 10px),
      var(--trf-log-rivet-hi) 0 1px,
      var(--trf-log-rivet-mid) 1px 2px,
      var(--trf-log-rivet-lo) 2px 3px,
      rgba(0,0,0,0) 4px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),
      var(--trf-log-rivet-hi) 0 1px,
      var(--trf-log-rivet-mid) 1px 2px,
      var(--trf-log-rivet-lo) 2px 3px,
      rgba(0,0,0,0) 4px),
    linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.00) 52%, rgba(0,0,0,0.30));
  box-shadow:
    inset 0 0 0 1px rgba(214,196,154,0.16),
    inset 0 0 0 2px rgba(0,0,0,0.62),
    inset 0 0 14px rgba(0,0,0,0.22);
}

/* Bottom action buttons: stronger text edge + glow kept inside */
.bottomActions--metal .ops .btn{
  color:#ffffff !important;
  font-weight:900 !important;
  letter-spacing:.03em;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.92),
    1px 0 0 rgba(0,0,0,0.72),
    -1px 0 0 rgba(0,0,0,0.72),
    0 1px 0 rgba(0,0,0,0.72),
    0 -1px 0 rgba(0,0,0,0.72),
    0 0 10px rgba(0,0,0,0.55) !important;
}

.bottomActions--metal .ops .btn.on,
.bottomActions--metal .ops .btn.main,
.bottomActions--metal .ops .btn.active{
  box-shadow:
    inset 0 0 0 3px rgba(120,200,255,0.46),
    inset 0 0 18px rgba(120,200,255,0.26),
    inset 0 0 36px rgba(40,120,220,0.14) !important;
}


/* ===== Effect Emerald (ログ/ガイド/対象ハイライトの統一色) ===== */
:root{
  --trf-eff-emerald: #2dd4bf;            /* emerald green */
  --trf-eff-emerald-glow: rgba(45,212,191,0.45);
}
.trf-log-effect-line{
  color: var(--trf-eff-emerald) !important;
  text-shadow: 0 0 8px rgba(0,0,0,0.65);
}
.trf-log-effect,
.trf-log-effect-sep,
.trf-log-effect-body{
  color: var(--trf-eff-emerald) !important;
}
.zoneGuideText.zoneGuideText--effect{
  color: var(--trf-eff-emerald) !important;
  /* フォントの雰囲気は既存(.zoneGuideText)に寄せる（太字にし過ぎない） */
  font-weight: inherit;
  text-shadow: 0 0 8px var(--trf-eff-emerald-glow), 0 2px 10px rgba(0,0,0,0.75);
}

/* 効果の対象として選べるカードのハイライト（偵察/鎮圧/軍師/陽動/間者/工兵/祈祷師） */
/* 既存の .hl/.sel の付与条件に依存しないよう、trf-effPick 単独でも光るようにする */
.card.trf-effPick,
.card.hl.trf-effPick,
.card.sel.trf-effPick{
  box-shadow:
    0 0 0 2px var(--trf-eff-emerald) inset,
    0 0 0 2px rgba(45,212,191,.78),
    0 0 10px rgba(45,212,191,.55),
    0 0 26px var(--trf-eff-emerald-glow) !important;
  animation: trfEffPickPulse 0.92s ease-in-out infinite;
}


/* TRF_GLOBAL_MINCHO: force Mincho-like font across UI */
:root{ --trf-font-mincho: "Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","MS PMincho",serif; }
html,body,button,input,select,textarea{ font-family: var(--trf-font-mincho) !important; }
/* keep icon/emoji readable */
.trf-log-token{ font-family: var(--trf-font-mincho) !important; }


/* ===== RoundFX juice: shake + particles ===== */
#rf-layer.rf-layer { position: fixed; inset: 0; pointer-events: none; }
#rf-layer .rf-pfx { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
#rf-layer .rf-pfx-col { position:absolute; top:0; bottom:0; width:33.3333%; }
#rf-layer .rf-pfx-col.c0 { left:0; }
#rf-layer .rf-pfx-col.c1 { left:33.3333%; }
#rf-layer .rf-pfx-col.c2 { left:66.6666%; }
#rf-layer .rf-pfx-col .rf-p { position:absolute; width:6px; height:6px; border-radius:999px; opacity:0.0;
  animation: rfPfxUp 480ms ease-out forwards;
}
#rf-layer .rf-pfx-col .rf-gold { background: rgba(255, 215, 128, 0.95); box-shadow: 0 0 10px rgba(255,215,128,0.75); }
#rf-layer .rf-pfx-col .rf-ash  { background: rgba(200, 200, 200, 0.85); box-shadow: 0 0 10px rgba(220,220,220,0.40); }

@keyframes rfPfxUp{
  0%   { transform: translateY(0) scale(0.9); opacity:0.0; }
  15%  { opacity:0.95; }
  100% { transform: translateY(-46px) scale(0.6); opacity:0.0; }
}

@keyframes rfShakeY{
  0%   { transform: translateY(0); }
  25%  { transform: translateY(10px); }
  55%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
#rf-layer.rf-shake { animation: rfShakeY 220ms cubic-bezier(.2,.9,.2,1) both; }



/* ===== Juice: Screen shake (WIN only) ===== */
#play.trf-screen-shake, #main.trf-screen-shake{
  animation: trfScreenShakeY 260ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes trfScreenShakeY{
  0%{ transform: translateY(0); }
  35%{ transform: translateY(12px); }
  70%{ transform: translateY(-5px); }
  100%{ transform: translateY(0); }
}

/* ===== Juice: Round-end shake + lane particles (all modes) ===== */
#trf-juice-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:11000; /* above modals */
}
#trf-juice-layer .trf-juice-pfx{
  position:absolute;
  inset:0;
  display:flex;
}
#trf-juice-layer .trf-juice-col{
  flex:1;
  position:relative;
  overflow:hidden;
}
#trf-juice-layer.trf-juice-shake{
  animation: trfJuiceShake .24s ease-out 1;
}
@keyframes trfJuiceShake{
  0%{ transform: translateY(0); }
  35%{ transform: translateY(10px); }
  70%{ transform: translateY(-4px); }
  100%{ transform: translateY(0); }
}
#trf-juice-layer .trf-juice-p{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  opacity:.9;
  animation: trfJuicePfx .52s ease-out 1;
}
#trf-juice-layer .trf-gold{ background: rgba(255, 215, 120, .95); box-shadow: 0 0 10px rgba(255, 215, 120, .55); }
#trf-juice-layer .trf-ash{  background: rgba(190, 200, 210, .85); box-shadow: 0 0 10px rgba(190, 200, 210, .35); }
@keyframes trfJuicePfx{
  0%{ transform: translateY(0) scale(1); opacity:.95; }
  100%{ transform: translateY(-60px) scale(.2); opacity:0; }
}

/* ===== Juice: number pop (zonePower) ===== */
.zonePower.trf-num-pop{
  animation: trfNumPop .52s ease-out 1;
}
@keyframes trfNumPop{
  0%{ transform: scale(1); }
  55%{ transform: scale(1.22); }
  100%{ transform: scale(1); }
}

/* Optional: add a subtle "gain" glow when the value increases */
.zonePower.trf-num-inc{
  text-shadow: 0 0 12px rgba(255, 235, 160, .35);
}

/* ===== Juice: sparkle (optional) ===== */
.trf-num-spark{
  position:fixed;
  width:3px;
  height:3px;
  border-radius:50%;
  pointer-events:none;
  z-index:11010;
  background: rgba(255, 235, 160, .95);
  box-shadow: 0 0 10px rgba(255, 235, 160, .55);
}

/* ===== Juice: ripple on placement ===== */
/* Card-local placement wave (robust across transforms / iOS fixed positioning) */
.card.trf-place-wave::after{
  content:'';
  position:absolute;
  left:-10px;
  top:-10px;
  right:-10px;
  bottom:-10px;
  border-radius:18px;
  pointer-events:none;
  box-sizing:border-box;
  border:5px solid rgba(6,8,10,.88);
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 72%);
  box-shadow: 0 0 0 2px rgba(0,0,0,.26) inset, 0 0 34px rgba(0,0,0,.34);
  transform-origin:50% 50%;
  animation: trfCardWave .34s ease-out 1;
  z-index: 6;
}

@keyframes trfCardWave{
  0%{ transform: scale(.98); opacity:.78; filter: blur(0px); }
  55%{ transform: scale(1.18); opacity:.28; filter: blur(.35px); }
  100%{ transform: scale(1.34); opacity:0; filter: blur(.95px); }
}


.trf-ripple{
  position:fixed;
  /* size is driven by CSS vars (set from card rect). fallback keeps it visible. */
  /* NOTE: fallback MUST be large on iPhone; previous attempts looked "too small". */
  width: var(--rw, 240px);
  height: var(--rh, 280px);
  margin-left: calc(var(--rw, 240px) / -2);
  margin-top:  calc(var(--rh, 280px) / -2);
  border-radius: var(--rr, 16px);
  pointer-events:none;
  z-index:11005;
  box-sizing:border-box;

  /* Dark shockwave that reads as "impact" on mobile */
  border: 6px solid rgba(6, 8, 10, .86);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,.24) 0%,
      rgba(0,0,0,.14) 48%,
      rgba(0,0,0,0) 72%);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.26) inset,
    0 0 34px rgba(0,0,0,.34);
  animation: trfRippleRect .34s ease-out 1;
}

.trf-ripple.trf-ripple-fixed{
  position:fixed;
  z-index:12050;
  border-color: rgba(6, 8, 10, .86);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.30) inset,
    0 0 30px rgba(0,0,0,.30);
}
.trf-ripple.trf-ripple-in{
  position:absolute;
  z-index:50; /* above cards within lane */
}

@keyframes trfRippleRect{
  0%{ transform: scale(.92); opacity:.78; filter: blur(0px); }
  55%{ transform: scale(1.55); opacity:.28; filter: blur(.35px); }
  100%{ transform: scale(2.35); opacity:0; filter: blur(.95px); }
}


/* ===== Juice: placement dust (ground puff) ===== */
.trf-dust{
  position:fixed;
  width:6px;
  height:6px;
  border-radius:50%;
  pointer-events:none;
  z-index:12060;
  background: rgba(30, 24, 18, .62);
  box-shadow: 0 0 10px rgba(0,0,0,.22);
  filter: blur(.2px);
  animation: trfDustPuff .40s ease-out 1;
}
@keyframes trfDustPuff{
  0%{ transform: translate(0, 0) scale(.9); opacity:.55; }
  70%{ transform: translate(var(--dx, 0px), var(--dy, -14px)) scale(1.70); opacity:.22; }
  100%{ transform: translate(var(--dx, 0px), var(--dy, -22px)) scale(1.85); opacity:0; }
}


/* ===== Juice: card impact (very visible on mobile) ===== */
.trf-card-impact{
  animation: trfCardImpact .22s cubic-bezier(.2,.9,.2,1) 1;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.38));
}
@keyframes trfCardImpact{
  0%{ transform: translateY(-2px) scale(1.00); }
  45%{ transform: translateY(0px)  scale(1.06); }
  100%{ transform: translateY(0px) scale(1.00); }
}

/* ===== Juice: ground shock line (earth-rumble alternative to ripple) ===== */
.trf-dustline{
  position:fixed;
  height: 12px;
  pointer-events:none;
  z-index:12070;
  left: 0;
  top: 0;
  width: 220px;
  border-radius: 999px;
  background:
    radial-gradient(closest-side,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.26) 55%,
      rgba(0,0,0,0) 100%);
  filter: blur(.2px);
  opacity:.62;
  transform-origin: 50% 50%;
  animation: trfDustLine .28s ease-out 1;
}
@keyframes trfDustLine{
  0%{ transform: translate(-50%, -50%) scaleX(.55) scaleY(.70); opacity:.55; }
  70%{ transform: translate(-50%, -50%) scaleX(1.45) scaleY(1.20); opacity:.22; }
  100%{ transform: translate(-50%, -50%) scaleX(1.90) scaleY(1.30); opacity:0; }
}

/* ===== Juice: screen thud (very visible, fallback when ripple blends) ===== */
#main.trf-screen-thud{
  animation: trfScreenThud .16s cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes trfScreenThud{
  0%{ transform: translateY(0); }
  35%{ transform: translateY(3px); }
  70%{ transform: translateY(-1px); }
  100%{ transform: translateY(0); }
}

/* ===== Juice: lane "thud" (placement impact) ===== */
.trf-lane-thud{
  animation: trfLaneThud .18s ease-out 1;
}
@keyframes trfLaneThud{
  0%{ transform: translateY(0); filter: brightness(1); }
  35%{ transform: translateY(2px); filter: brightness(1.06); }
  100%{ transform: translateY(0); filter: brightness(1); }
}

/* ===== Juice: lane shock sweep (reads as "impact runs through lane") ===== */
.zone.trf-lane-shock{ position: relative; }
.zone.trf-lane-shock::after{
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border-radius: 18px;
  pointer-events: none;
  z-index: 90;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.32) 45%,
      rgba(0,0,0,0) 100%);
  mix-blend-mode: multiply;
  transform: translateX(-65%);
  filter: blur(.2px);
  animation: trfLaneShockSweep .22s ease-out 1;
}

@keyframes trfLaneShockSweep{
  0%{ transform: translateX(-65%) scaleY(.95); opacity: .55; }
  65%{ transform: translateX(10%) scaleY(1.02); opacity: .22; }
  100%{ transform: translateX(65%) scaleY(1.05); opacity: 0; }
}

/* ===== Juice: number burst near the value (increase feedback) ===== */
.trf-num-burst{
  position:fixed;
  width:4px;
  height:4px;
  border-radius:50%;
  pointer-events:none;
  z-index:11012;
  background: rgba(255, 235, 160, .95);
  box-shadow: 0 0 10px rgba(255, 235, 160, .55);
}
.trf-num-delta{
  position:fixed;
  pointer-events:none;
  z-index:11013;
  font:800 14px/1 ui-serif, "Hiragino Mincho ProN", "Yu Mincho", "Hiragino Mincho Pro", "MS Mincho", serif;
  color: rgba(255, 235, 160, .95);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  -webkit-text-stroke: 1px rgba(0,0,0,.18);
}

/* short halo ring behind the power value (increase feedback) */
.trf-num-halo{
  position:fixed;
  width: 86px;
  height: 46px;
  margin-left: -43px;
  margin-top:  -23px;
  border-radius: 999px;
  pointer-events:none;
  z-index:11011;
  /* Prevent end-of-animation "flash" (WebKit can snap back to base styles
     just before JS removal). Keep the final keyframe visually.
  */
  opacity: 0;
  transform: translate(0,0) scale(.85);
  background:
    radial-gradient(closest-side,
      rgba(255, 235, 160, .45) 0%,
      rgba(255, 235, 160, .18) 55%,
      rgba(255, 235, 160, 0) 100%);
  filter: blur(.2px);
  animation: trfNumHalo .62s ease-out 1;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes trfNumHalo{
  0%{ transform: translate(0,0) scale(.85); opacity:.62; }
  100%{ transform: translate(0,-6px) scale(1.20); opacity:0; }
}

/* Stage328: keep existing center timer repainting without moving its position */
#turnTimer{
  position:relative;
  animation:none !important;
  will-change:auto;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box;
  min-width:62px !important;
  width:62px !important;
  height:34px !important;
  flex:0 0 auto;
  padding:2px 4px !important;
  overflow:hidden;
  contain:layout paint style;
  transform:translateZ(0);
}
#turnTimerIcon{
  position:absolute !important;
  left:11px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  line-height:1 !important;
  font-size:8px !important;
  opacity:.84;
  pointer-events:none;
}
#turnTimerLabel{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:26px !important;
  width:26px !important;
  height:1.0em !important;
  text-align:center;
  white-space:nowrap;
  line-height:1 !important;
  vertical-align:middle;
  padding:0 !important;
  margin:0 !important;
  position:absolute !important;
  left:38px !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none;
}
#publicRooms .modalBox{
  width:min(720px,96vw);
  max-height:min(88vh,760px);
  display:flex;
  flex-direction:column;
}
#publicRooms .modalBody{
  display:flex;
  flex-direction:column;
  min-height:0;
}
#publicRoomsList{
  flex:1 1 auto;
  min-height:0;
  max-height:min(60vh,420px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@keyframes trfTimerKeepAlive{
  0%{ opacity:1; }
  50%{ opacity:0.999; }
  100%{ opacity:1; }
}


/* Stage414: keep top-bar labels visible in English on narrow screens */
.topBar #btnResign,
.topBar #btnSettingsTop,
.topBar #btnEff,
.topBar #btnEffects,
.topBar #btnEffectsTop{
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 430px){
  .topBar{ gap:3px; padding:8px 8px; }
  .topBar #btnResign,
  .topBar #btnSettingsTop,
  .topBar #btnEff,
  .topBar #btnEffects,
  .topBar #btnEffectsTop{
    padding:8px 10px !important;
    font-size:14px !important;
    letter-spacing:0 !important;
  }
}


/* Stage416: top bar action buttons unified width / safer English fit */
:root{
  --trf-topbar-action-btn-w-ja: 58px;
  --trf-topbar-action-btn-w-en: 60px;
}
.topBar #btnEff,
.topBar #btnSettingsTop,
.topBar #btnResign{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  transition:none !important;
}
html[data-lang="ja"] .topBar #btnEff,
html[data-lang="ja"] .topBar #btnSettingsTop,
html[data-lang="ja"] .topBar #btnResign{
  flex:0 0 var(--trf-topbar-action-btn-w-ja) !important;
  width:var(--trf-topbar-action-btn-w-ja) !important;
  min-width:var(--trf-topbar-action-btn-w-ja) !important;
  max-width:var(--trf-topbar-action-btn-w-ja) !important;
}
html[data-lang="en"] .topBar #btnEff,
html[data-lang="en"] .topBar #btnSettingsTop,
html[data-lang="en"] .topBar #btnResign{
  flex:0 0 var(--trf-topbar-action-btn-w-en) !important;
  width:var(--trf-topbar-action-btn-w-en) !important;
  min-width:var(--trf-topbar-action-btn-w-en) !important;
  max-width:var(--trf-topbar-action-btn-w-en) !important;
  letter-spacing:0 !important;
  justify-content:center !important;
  text-align:center !important;
}

@media (max-width: 430px){
  html[data-lang="en"] .topBar{
    gap:2px;
    padding:8px 6px;
  }
  html[data-lang="en"] .topBar #btnEff,
  html[data-lang="en"] .topBar #btnSettingsTop,
  html[data-lang="en"] .topBar #btnResign{
    font-size:12px !important;
    padding:7px 6px !important;
  }
}


/* Stage448: keep top-right score visible on narrow screens */
:root{
  --trf-safe-right: env(safe-area-inset-right, 0px);
}
.topBar{
  padding-right: calc(10px + var(--trf-safe-right));
}
.topScore{
  flex:0 0 30px !important;
  min-width:30px !important;
  max-width:30px !important;
  justify-content:flex-end;
  align-items:flex-end;
  padding-right: max(0px, var(--trf-safe-right));
}
.topScore .stack{
  align-items:flex-end;
}
@media (max-width: 430px){
  .topBar{ gap:2px; padding-left:8px; padding-right:calc(8px + var(--trf-safe-right)); }
  .topScore{
    flex-basis:26px !important;
    min-width:26px !important;
    max-width:26px !important;
  }
  .topScore .t,
  .topScore .b{ font-size:12px !important; line-height:1.0; }
}

/* Stage448: face buttons must not show selection frame */
.bottomActions--metal .ops #btnFaceU,
.bottomActions--metal .ops #btnFaceD,
.bottomActions--metal .ops #btnFaceU.on,
.bottomActions--metal .ops #btnFaceD.on,
.bottomActions--metal .ops #btnFaceU.main,
.bottomActions--metal .ops #btnFaceD.main,
.bottomActions--metal .ops #btnFaceU.active,
.bottomActions--metal .ops #btnFaceD.active,
.bottomActions--metal .ops #btnFaceU.hintPulse,
.bottomActions--metal .ops #btnFaceD.hintPulse{
  outline:none !important;
  box-shadow:none !important;
}
.bottomActions--metal .ops #btnFaceU::before,
.bottomActions--metal .ops #btnFaceD::before,
.bottomActions--metal .ops #btnFaceU.on::before,
.bottomActions--metal .ops #btnFaceD.on::before,
.bottomActions--metal .ops #btnFaceU.main::before,
.bottomActions--metal .ops #btnFaceD.main::before,
.bottomActions--metal .ops #btnFaceU.active::before,
.bottomActions--metal .ops #btnFaceD.active::before{
  background:rgba(0,0,0,var(--trf-ui-btn-dim,0.22)) !important;
}
.bottomActions--metal .ops #btnFaceU.hintPulse,
.bottomActions--metal .ops #btnFaceD.hintPulse{
  animation:trfHintPulseBtn 1.15s ease-in-out infinite;
  filter:brightness(1.07);
}


/* Stage450: stable top bar width, fixed top score, no face-button focus frame */
:root{
  --trf-turn-pill-w-ja: 132px;
  --trf-turn-pill-w-en: 156px;
}
.topBar{
  padding-right:calc(52px + var(--trf-safe-right));
}
.topBar .flex1{ min-width:0; }
html[data-lang="ja"] .turnPill,
html[data-lang="ja"] #turnPill{
  flex:0 0 var(--trf-turn-pill-w-ja) !important;
  min-width:var(--trf-turn-pill-w-ja) !important;
  max-width:var(--trf-turn-pill-w-ja) !important;
}
html[data-lang="en"] .turnPill,
html[data-lang="en"] #turnPill{
  flex:0 0 var(--trf-turn-pill-w-en) !important;
  min-width:var(--trf-turn-pill-w-en) !important;
  max-width:var(--trf-turn-pill-w-en) !important;
}
.topScore{
  position:absolute;
  right:calc(8px + var(--trf-safe-right));
  top:50%;
  transform:translateY(-50%);
  flex:none !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  margin-left:0 !important;
  padding-right:0 !important;
  justify-content:flex-end;
  align-items:flex-end;
  overflow:visible;
  z-index:4;
  pointer-events:none;
}
.topScore .stack{ width:100%; align-items:flex-end; }
@media (max-width: 430px){
  .topBar{ padding-right:calc(46px + var(--trf-safe-right)); }
  .topScore{
    right:calc(6px + var(--trf-safe-right));
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }
}
.bottomActions--metal .ops #btnFaceU,
.bottomActions--metal .ops #btnFaceD,
.bottomActions--metal .ops #btnFaceU.on,
.bottomActions--metal .ops #btnFaceD.on,
.bottomActions--metal .ops #btnFaceU.main,
.bottomActions--metal .ops #btnFaceD.main,
.bottomActions--metal .ops #btnFaceU.active,
.bottomActions--metal .ops #btnFaceD.active,
.bottomActions--metal .ops #btnFaceU.hintPulse,
.bottomActions--metal .ops #btnFaceD.hintPulse,
.bottomActions--metal .ops #btnFaceU:focus,
.bottomActions--metal .ops #btnFaceD:focus,
.bottomActions--metal .ops #btnFaceU:focus-visible,
.bottomActions--metal .ops #btnFaceD:focus-visible,
.bottomActions--metal .ops #btnFaceU:active,
.bottomActions--metal .ops #btnFaceD:active{
  outline:none !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  filter:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.bottomActions--metal .ops #btnFaceU::before,
.bottomActions--metal .ops #btnFaceD::before,
.bottomActions--metal .ops #btnFaceU.on::before,
.bottomActions--metal .ops #btnFaceD.on::before,
.bottomActions--metal .ops #btnFaceU.main::before,
.bottomActions--metal .ops #btnFaceD.main::before,
.bottomActions--metal .ops #btnFaceU.active::before,
.bottomActions--metal .ops #btnFaceD.active::before,
.bottomActions--metal .ops #btnFaceU:focus::before,
.bottomActions--metal .ops #btnFaceD:focus::before,
.bottomActions--metal .ops #btnFaceU:focus-visible::before,
.bottomActions--metal .ops #btnFaceD:focus-visible::before,
.bottomActions--metal .ops #btnFaceU:active::before,
.bottomActions--metal .ops #btnFaceD:active::before{
  background:rgba(0,0,0,var(--trf-ui-btn-dim,0.22)) !important;
}


/* Stage451: tutorial passBtn fix companion / tighter English top bar */
:root{
  --trf-turn-pill-w-en: 112px;
}
html[data-lang="en"] .topBar{
  padding-right:calc(46px + var(--trf-safe-right)) !important;
}
html[data-lang="en"] .turnPill,
html[data-lang="en"] #turnPill{
  flex:0 0 var(--trf-turn-pill-w-en) !important;
  min-width:var(--trf-turn-pill-w-en) !important;
  max-width:var(--trf-turn-pill-w-en) !important;
  padding:8px 8px !important;
  justify-content:center !important;
}
html[data-lang="en"] .turnPill .label,
html[data-lang="en"] #turnPill .label{
  letter-spacing:.01em;
  font-size:11px;
  text-align:center;
  flex:0 1 auto;
}
html[data-lang="en"] .topBar #btnEff,
html[data-lang="en"] .topBar #btnSettingsTop,
html[data-lang="en"] .topBar #btnResign{
  flex:0 0 var(--trf-topbar-action-btn-w-ja) !important;
  width:var(--trf-topbar-action-btn-w-ja) !important;
  min-width:var(--trf-topbar-action-btn-w-ja) !important;
  max-width:var(--trf-topbar-action-btn-w-ja) !important;
  font-size:10px !important;
  padding:7px 4px !important;
}
html[data-lang="en"] .topScore{
  right:calc(8px + var(--trf-safe-right)) !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
}
html[data-lang="en"] .topScore .t,
html[data-lang="en"] .topScore .b{
  font-size:13px !important;
}
@media (max-width: 430px){
  html[data-lang="en"] .topBar{
    gap:2px !important;
    padding-left:8px !important;
    padding-right:calc(46px + var(--trf-safe-right)) !important;
  }
  html[data-lang="en"] .turnPill,
  html[data-lang="en"] #turnPill{
    padding:8px 8px !important;
  }
  html[data-lang="en"] .topBar #btnEff,
  html[data-lang="en"] .topBar #btnSettingsTop,
  html[data-lang="en"] .topBar #btnResign{
    flex-basis:var(--trf-topbar-action-btn-w-ja) !important;
    width:var(--trf-topbar-action-btn-w-ja) !important;
    min-width:var(--trf-topbar-action-btn-w-ja) !important;
    max-width:var(--trf-topbar-action-btn-w-ja) !important;
    font-size:9px !important;
    padding:7px 2px !important;
  }
  html[data-lang="en"] .topScore{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }
}


/* Stage456: keep English top-right action buttons aligned to Japanese outer size/position */
html[data-lang="en"] .topBar{
  gap:3px !important;
  padding-left:8px !important;
  padding-right:calc(52px + var(--trf-safe-right)) !important;
}
html[data-lang="en"] .topBar #btnEff,
html[data-lang="en"] .topBar #btnSettingsTop,
html[data-lang="en"] .topBar #btnResign{
  flex:0 0 var(--trf-topbar-action-btn-w-ja) !important;
  width:var(--trf-topbar-action-btn-w-ja) !important;
  min-width:var(--trf-topbar-action-btn-w-ja) !important;
  max-width:var(--trf-topbar-action-btn-w-ja) !important;
  font-size:10px !important;
  line-height:1.1 !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
  padding-left:4px !important;
  padding-right:4px !important;
}
@media (max-width: 430px){
  html[data-lang="en"] .topBar{
    gap:3px !important;
    padding-left:8px !important;
    padding-right:calc(52px + var(--trf-safe-right)) !important;
  }
  html[data-lang="en"] .topBar #btnEff,
  html[data-lang="en"] .topBar #btnSettingsTop,
  html[data-lang="en"] .topBar #btnResign{
    flex-basis:var(--trf-topbar-action-btn-w-ja) !important;
    width:var(--trf-topbar-action-btn-w-ja) !important;
    min-width:var(--trf-topbar-action-btn-w-ja) !important;
    max-width:var(--trf-topbar-action-btn-w-ja) !important;
    font-size:10px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }
}

/* =========================================================
 * Stage480: Title online menu layout under bottom AdMob banner
 * - Keep the bottom banner visible without covering the Back button.
 * - Preserve game logic; layout-only overrides for title/menu screens.
 * ========================================================= */
body.trf-banner-on{
  --trf-banner-reserve: calc(50px + env(safe-area-inset-bottom));
}

/* The title menu used to keep 100svh height even while the native banner
   overlaid the bottom edge. Reserve the banner area and scroll only the
   menu panel when the screen is short. */
body.trf-banner-on #title.trf-title--menu{
  min-height: calc(100svh - var(--trf-banner-reserve));
  height: calc(100svh - var(--trf-banner-reserve));
  overflow: hidden;
  padding-top: calc(14px + env(safe-area-inset-top)) !important;
  padding-bottom: 8px !important;
  gap: 8px !important;
}
body.trf-banner-on #title.trf-title--menu #trfTitleFlow{
  width: min(720px, 94vw);
  max-height: calc(100svh - var(--trf-banner-reserve) - env(safe-area-inset-top) - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 10px 12px !important;
  border-radius: 14px;
}

/* Compact the Battle / Online pane only while a banner is present. */
body.trf-banner-on #titleStepBattle .trf-title-h2{
  margin: 0 0 6px !important;
  font-size: 18px !important;
  line-height: 1.2;
}
body.trf-banner-on #titleStepBattle .trf-modeCard{
  margin-top: 8px !important;
  padding: 10px 10px !important;
}
body.trf-banner-on #battlePaneOnline > .trf-modeCard{
  margin-top: 6px !important;
  padding: 10px 10px !important;
}
body.trf-banner-on #battlePaneOnline .trf-modeCard > div[style*="flex-direction:column"]{
  gap: 8px !important;
}
body.trf-banner-on #battlePaneOnline #customToggleSlotOnline{
  margin-top: 0 !important;
}
body.trf-banner-on #battlePaneOnline #expToggleSlotOnline{
  margin-top: 2px !important;
}
body.trf-banner-on #battlePaneOnline .trf-online-box{
  padding: 8px 9px !important;
  border-radius: 12px !important;
}
body.trf-banner-on #battlePaneOnline .trf-online-roomRow,
body.trf-banner-on #battlePaneOnline .trf-online-roomBtns{
  gap: 8px !important;
}
body.trf-banner-on #battlePaneOnline .trf-online-roomBtns > button,
body.trf-banner-on #battlePaneOnline .trf-online-roomBtns > label{
  min-height: 38px !important;
}
body.trf-banner-on #battlePaneOnline #btnOnlineRandom,
body.trf-banner-on #battlePaneOnline #btnOnlineHost,
body.trf-banner-on #battlePaneOnline #btnOnlineGuest,
body.trf-banner-on #battlePaneOnline #btnOnlinePublicList{
  padding: 8px 10px !important;
  font-size: 14px !important;
}
body.trf-banner-on #battlePaneOnline .trf-online-publicToggle{
  padding: 6px 9px !important;
  gap: 6px !important;
}
body.trf-banner-on #battlePaneOnline .trf-stamina-row{
  gap: 8px !important;
}
body.trf-banner-on #battlePaneOnline .trf-stamina-note{
  margin-top: 3px !important;
}
body.trf-banner-on #battlePaneOnline .row[style*="margin-top"]{
  margin-top: 8px !important;
}

@media (max-height: 740px){
  body.trf-banner-on #title.trf-title--menu{
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 6px !important;
  }
  body.trf-banner-on #title.trf-title--menu #trfTitleFlow{
    width: min(720px, 95vw);
    max-height: calc(100svh - var(--trf-banner-reserve) - env(safe-area-inset-top) - 16px);
    padding: 8px 8px 10px !important;
  }
  body.trf-banner-on #titleStepBattle .trf-title-h2{
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  body.trf-banner-on #battlePaneOnline > .trf-modeCard{
    padding: 8px 8px !important;
  }
  body.trf-banner-on #battlePaneOnline .trf-modeCard > div[style*="flex-direction:column"]{
    gap: 6px !important;
  }
  body.trf-banner-on #battlePaneOnline .trf-online-box{
    padding: 6px 7px !important;
  }
  body.trf-banner-on #battlePaneOnline .trf-online-roomRow,
  body.trf-banner-on #battlePaneOnline .trf-online-roomBtns{
    gap: 6px !important;
  }
  body.trf-banner-on #battlePaneOnline #btnOnlineRandom,
  body.trf-banner-on #battlePaneOnline #btnOnlineHost,
  body.trf-banner-on #battlePaneOnline #btnOnlineGuest,
  body.trf-banner-on #battlePaneOnline #btnOnlinePublicList{
    padding: 7px 8px !important;
    font-size: 13px !important;
  }
  body.trf-banner-on #battlePaneOnline .trf-online-publicToggle{
    padding: 5px 8px !important;
    font-size: 13px !important;
  }
  body.trf-banner-on #battlePaneOnline .trf-stamina-label,
  body.trf-banner-on #battlePaneOnline .trf-stamina-note{
    font-size: 12px !important;
  }
  body.trf-banner-on #battlePaneOnline #onlineStamina{
    font-size: 16px !important;
  }
  body.trf-banner-on #battlePaneOnline .row[style*="margin-top"]{
    margin-top: 6px !important;
  }
}

@media (max-height: 620px){
  body.trf-banner-on #title.trf-title--menu #trfTitleFlow{
    max-height: calc(100svh - var(--trf-banner-reserve) - env(safe-area-inset-top) - 10px);
    padding: 6px 7px 8px !important;
  }
  body.trf-banner-on #titleStepBattle .trf-modeCard,
  body.trf-banner-on #battlePaneOnline > .trf-modeCard{
    margin-top: 5px !important;
    padding: 7px 7px !important;
  }
  body.trf-banner-on #battlePaneOnline .trf-online-box{
    padding: 5px 6px !important;
  }
  body.trf-banner-on #battlePaneOnline #btnOnlineRandom,
  body.trf-banner-on #battlePaneOnline #btnOnlineHost,
  body.trf-banner-on #battlePaneOnline #btnOnlineGuest,
  body.trf-banner-on #battlePaneOnline #btnOnlinePublicList{
    min-height: 34px !important;
    padding: 6px 7px !important;
    font-size: 12px !important;
  }
  body.trf-banner-on #battlePaneOnline .trf-online-publicToggle{
    min-height: 34px !important;
    padding: 4px 7px !important;
    font-size: 12px !important;
  }
}


/* Stage482: stabilize viewport while modal/tutorial overlays are shown.
   iOS WKWebView may briefly move the visual viewport when fixed popups or
   handover screens appear.  Keep the root viewport pinned during these overlay
   states to prevent the game surface from shaking vertically. */
html.trf-overlay-lock,
html.trfTutV2,
html.tut-on,
html.tutC-locked,
html.modal-open,
body.trf-overlay-lock,
body.trfTutV2,
body.tut-on,
body.tutC-locked,
body.modal-open{
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none;
  -webkit-overflow-scrolling:auto !important;
}
body.modal-open,
body.trfTutV2,
body.tut-on,
body.tutC-locked{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  width:100% !important;
  height:100vh !important;
  height:100dvh !important;
}
.modal,
#handover.modal,
#trfTutV2Layer,
.tutC-dim{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* Stage489: iPad-only board-card downsizing.
   iPad uses a wider board than iPhone; played cards filled 2-column lane cells and became visually too large.
   Keep hand cards unchanged; reduce only cards already placed on the field. */
html.trf-ipad-device .rowTop,
html.trf-ipad-device .rowBottom{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap:6px !important;
  min-height:68px !important;
  max-height:22vh !important;
}

html.trf-ipad-device .rowTop .card,
html.trf-ipad-device .rowBottom .card{
  width:100% !important;
  max-width:76px !important;
  justify-self:center !important;
  border-width:2px !important;
  border-radius:8px !important;
  font-size:14px !important;
}

html.trf-ipad-device .rowTop .cardValue,
html.trf-ipad-device .rowBottom .cardValue{
  min-width:16px !important;
  padding:1px 4px !important;
  font-size:12px !important;
}


/* ===== Stage580: effect choice focus overlay =====
   選択待ち中だけ、対象カード/効果説明を前面に残して盤面背景を暗くする。
   body 全体や親要素へ filter/opacity を掛けず、.board 内の固定マスク + z-index で分離するため、
   選択肢カード自体がグレーに染まらない。 */
body.trf-effect-choice-focus .board{
  position:relative;
  isolation:isolate;
}

body.trf-effect-choice-focus .board::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
  z-index:35;
  pointer-events:none;
  border-radius:inherit;
}

body.trf-effect-choice-focus #effPop,
body.trf-effect-choice-focus #effPop.show{
  z-index:1260 !important;
}

body.trf-effect-choice-focus .zoneTitle,
body.trf-effect-choice-focus .zoneGuideText.zoneGuideText--effect{
  position:relative;
  z-index:60;
}

body.trf-effect-choice-focus .rowTop.trf-eff-focus-parent,
body.trf-effect-choice-focus .rowBottom.trf-eff-focus-parent,
body.trf-effect-choice-focus .zoneCol.trf-eff-focus-parent,
body.trf-effect-choice-focus .zone.trf-eff-focus-zone,
body.trf-effect-choice-focus .hand.trf-eff-focus-hand,
body.trf-effect-choice-focus #meHand.trf-eff-focus-hand,
body.trf-effect-choice-focus #opHand.trf-eff-focus-hand{
  position:relative;
  isolation:isolate;
}

body.trf-effect-choice-focus .rowTop.trf-eff-focus-parent,
body.trf-effect-choice-focus .rowBottom.trf-eff-focus-parent,
body.trf-effect-choice-focus .zoneCol.trf-eff-focus-parent,
body.trf-effect-choice-focus .zone.trf-eff-focus-zone{
  z-index:65;
}

body.trf-effect-choice-focus .hand.trf-eff-focus-hand,
body.trf-effect-choice-focus #meHand.trf-eff-focus-hand,
body.trf-effect-choice-focus #opHand.trf-eff-focus-hand{
  z-index:65;
}

body.trf-effect-choice-focus .card.trf-effPick,
body.trf-effect-choice-focus .card.hl.trf-effPick,
body.trf-effect-choice-focus .card.sel.trf-effPick,
body.trf-effect-choice-focus .card.trf-eff-focus-top{
  position:relative;
  z-index:70;
  isolation:isolate;
}

body.trf-effect-choice-focus .zone.zoneGlow{
  position:relative;
  z-index:65;
  isolation:isolate;
}

body.trf-effect-choice-focus .zone.zoneGlow .zoneCol,
body.trf-effect-choice-focus .zone.zoneGlow .zonePower,
body.trf-effect-choice-focus .zone.zoneGlow .zoneBadge,
body.trf-effect-choice-focus .zone.trf-eff-focus-zone .zonePower,
body.trf-effect-choice-focus .zone.trf-eff-focus-zone .zoneBadge{
  position:relative;
  z-index:1;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  body.trf-effect-choice-focus .board::before{
    background:rgba(0,0,0,.52);
    -webkit-backdrop-filter:brightness(.72) saturate(.82);
    backdrop-filter:brightness(.72) saturate(.82);
  }
}


/* ===== Stage583: lane-choice focus fallback =====
   レーン選択時は Safari 系で board::before と lane 内部の重なりが不安定なため、
   全体暗転ではなく「非候補だけを個別に暗くする」方式へ切り替える。 */
body.trf-effect-choice-lane .board::before,
#main.trf-effect-choice-lane .board::before{
  display:none !important;
}

body.trf-effect-choice-lane .handRow,
body.trf-effect-choice-lane .bottomActions,
#main.trf-effect-choice-lane .handRow,
#main.trf-effect-choice-lane .bottomActions{
  opacity:.28;
  filter:grayscale(.22) brightness(.62);
}

body.trf-effect-choice-lane .zones .zone,
#main.trf-effect-choice-lane .zones .zone{
  filter:grayscale(.18) brightness(.42) saturate(.84);
  opacity:.72;
  transition:filter .12s ease, opacity .12s ease, box-shadow .12s ease;
}

body.trf-effect-choice-lane .zones .zone.zoneGlow,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone,
body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate,
#main.trf-effect-choice-lane .zones .zone.zoneGlow,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate{
  filter:none !important;
  opacity:1 !important;
}

body.trf-effect-choice-lane .zones .zone.zoneGlow .zoneCol,
body.trf-effect-choice-lane .zones .zone.zoneGlow .rowTop,
body.trf-effect-choice-lane .zones .zone.zoneGlow .rowBottom,
body.trf-effect-choice-lane .zones .zone.zoneGlow .zonePower,
body.trf-effect-choice-lane .zones .zone.zoneGlow .zoneBlock,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .zoneCol,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .rowTop,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .rowBottom,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .zonePower,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .zoneBlock,
#main.trf-effect-choice-lane .zones .zone.zoneGlow .zoneCol,
#main.trf-effect-choice-lane .zones .zone.zoneGlow .rowTop,
#main.trf-effect-choice-lane .zones .zone.zoneGlow .rowBottom,
#main.trf-effect-choice-lane .zones .zone.zoneGlow .zonePower,
#main.trf-effect-choice-lane .zones .zone.zoneGlow .zoneBlock,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .zoneCol,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .rowTop,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .rowBottom,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .zonePower,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone .zoneBlock{
  filter:none !important;
  opacity:1 !important;
}


body.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone{
  filter:grayscale(.08) brightness(.58) saturate(.92) !important;
  opacity:.94 !important;
  position:relative;
  isolation:isolate;
  outline:2px dashed rgba(255,210,210,.52);
  outline-offset:-2px;
  box-shadow:0 0 0 2px rgba(255,210,210,.22) inset,
             0 0 18px rgba(255,160,160,.14);
}

body.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone .zoneBlock,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone .zoneBlock{
  display:flex !important;
  background:rgba(60,12,18,.20);
  border-color:rgba(253,164,164,.72);
  color:#ffd1d1;
  text-shadow:0 2px 12px rgba(0,0,0,.68);
  z-index:13;
}

body.trf-effect-choice-lane .zones .zone.zoneGlow,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone,
#main.trf-effect-choice-lane .zones .zone.zoneGlow,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone{
  animation:zonePulse 1.08s ease-in-out infinite !important;
}

/* ===== Stage586: tactician destination lane visibility =====
   軍師の移動先選択では、非候補レーンを確実に暗くし、候補レーンだけを強く点滅させる。
   親要素の filter で候補/非候補が混ざるのを避け、非候補は lane 内 overlay で暗くする。 */
body.trf-effect-choice-lane .zones .zone,
#main.trf-effect-choice-lane .zones .zone{
  filter:none !important;
  opacity:1 !important;
}

body.trf-effect-choice-lane .zones .zone:not(.zoneGlow):not(.trf-eff-focus-zone):not(.trf-tactician-dest-candidate)::after,
#main.trf-effect-choice-lane .zones .zone:not(.zoneGlow):not(.trf-eff-focus-zone):not(.trf-tactician-dest-candidate)::after,
body.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone::after,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(0,0,0,.66);
  z-index:40;
  pointer-events:none;
}

body.trf-effect-choice-lane .zones .zone.zoneGlow::after,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone::after,
body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate::after,
#main.trf-effect-choice-lane .zones .zone.zoneGlow::after,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone::after,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate::after{
  display:none !important;
}

body.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone{
  filter:none !important;
  opacity:1 !important;
  outline:2px dashed rgba(255,210,210,.36) !important;
  outline-offset:-2px;
  box-shadow:0 0 0 2px rgba(80,22,28,.22) inset !important;
}

body.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone .zoneBlock,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone .zoneBlock{
  z-index:75 !important;
  inset:6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:52px !important;
  line-height:1 !important;
  transform:none !important;
  border-radius:12px !important;
  background:rgba(72,16,22,.72) !important;
  border-color:rgba(253,164,164,.82) !important;
  color:#ffd1d1 !important;
  text-shadow:0 2px 12px rgba(0,0,0,.92) !important;
}
@media (max-height:620px){
  body.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone .zoneBlock,
  #main.trf-effect-choice-lane .zones .zone.trf-tactician-from-zone .zoneBlock{
    inset:6px !important;
    font-size:44px !important;
    transform:none !important;
  }
}

body.trf-effect-choice-lane .zoneTitle,
body.trf-effect-choice-lane .zoneGuideText.zoneGuideText--effect,
#main.trf-effect-choice-lane .zoneTitle,
#main.trf-effect-choice-lane .zoneGuideText.zoneGuideText--effect{
  position:relative;
  z-index:90 !important;
  opacity:1 !important;
  filter:none !important;
  color:var(--trf-eff-emerald) !important;
  text-shadow:0 0 6px rgba(45,212,191,.24), 0 2px 8px rgba(0,0,0,.78) !important;
}

body.trf-effect-choice-lane .zones .zone.zoneGlow,
body.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone,
body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate,
#main.trf-effect-choice-lane .zones .zone.zoneGlow,
#main.trf-effect-choice-lane .zones .zone.trf-eff-focus-zone,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate{
  position:relative;
  z-index:68;
  outline:2px solid rgba(45,212,191,.80) !important;
  outline-offset:-2px;
  box-shadow:
    0 0 0 2px rgba(45,212,191,.74) inset,
    0 0 12px 4px rgba(45,212,191,.36),
    0 0 28px 8px rgba(45,212,191,.18) !important;
  animation:trfLaneChoiceCandidatePulse .84s ease-in-out infinite !important;
}


body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate{
  cursor:pointer !important;
}

body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate::before,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:69;
  box-shadow:
    0 0 0 2px rgba(45,212,191,.62) inset,
    0 0 10px 3px rgba(45,212,191,.22),
    0 0 20px 6px rgba(45,212,191,.12);
  animation:trfLaneChoiceCandidatePulse .84s ease-in-out infinite !important;
}

body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate .zoneCol,
body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate .rowTop,
body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate .rowBottom,
body.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate .zonePower,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate .zoneCol,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate .rowTop,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate .rowBottom,
#main.trf-effect-choice-lane .zones .zone.trf-tactician-dest-candidate .zonePower{
  position:relative;
  z-index:70;
}

@keyframes trfLaneChoiceCandidatePulse{
  0%{
    box-shadow:
      0 0 0 2px rgba(45,212,191,.44) inset,
      0 0 8px 2px rgba(45,212,191,.18),
      0 0 18px 6px rgba(45,212,191,.10);
  }
  50%{
    box-shadow:
      0 0 0 3px rgba(45,212,191,.86) inset,
      0 0 16px 5px rgba(45,212,191,.44),
      0 0 34px 10px rgba(45,212,191,.22);
  }
  100%{
    box-shadow:
      0 0 0 2px rgba(45,212,191,.44) inset,
      0 0 8px 2px rgba(45,212,191,.18),
      0 0 18px 6px rgba(45,212,191,.10);
  }
}


/* ===== Stage588: UI action popup step 1 ===== */
:root{
  --hcard-w:clamp(47px, 12.8vw, 51px);
}
@media (max-height:650px), (max-width:390px){
  :root{ --hcard-w:clamp(45px, 12.2vw, 48px); }
}

.trfBottomActionsRemoved{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

.topBar #btnLog,
.topBar #btnEff,
.topBar #btnSettingsTop,
.topBar #btnResign{
  flex:0 0 var(--trf-topbar-action-btn-w-ja) !important;
  width:var(--trf-topbar-action-btn-w-ja) !important;
  min-width:var(--trf-topbar-action-btn-w-ja) !important;
  max-width:var(--trf-topbar-action-btn-w-ja) !important;
}
html[data-lang="en"] .topBar #btnLog,
html[data-lang="en"] .topBar #btnEff,
html[data-lang="en"] .topBar #btnSettingsTop,
html[data-lang="en"] .topBar #btnResign{
  flex:0 0 var(--trf-topbar-action-btn-w-en) !important;
  width:var(--trf-topbar-action-btn-w-en) !important;
  min-width:var(--trf-topbar-action-btn-w-en) !important;
  max-width:var(--trf-topbar-action-btn-w-en) !important;
}

.trfSideScore{
  flex:0 0 32px;
  width:32px;
  min-width:32px;
  height:calc(var(--hcard-w) * 1.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  background:rgba(10,14,20,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.25);
  color:#e6edf3;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  line-height:1;
}
.trfSideScore__label{
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  opacity:.72;
  margin-bottom:4px;
}
.trfSideScore__num{
  font-size:21px;
  font-weight:900;
}
.trfSideScore--me{ margin-right:0; }
.trfSideScore--op{ margin-left:0; }

.handRow .meDeckBox{
  margin-left:2px;
}
.trfDeckPassBtn{
  position:absolute !important;
  left:50%;
  top:-36px;
  transform:translateX(-50%) !important;
  z-index:12;
  min-width:52px !important;
  width:52px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:999px !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.08em !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#eaf7ff !important;
  background:rgba(10,14,20,.88) !important;
  border:1px solid rgba(150,220,255,.34) !important;
  box-shadow:0 0 0 2px rgba(60,180,255,.12), 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12) !important;
  text-shadow:0 0 8px rgba(100,210,255,.45), 0 1px 2px rgba(0,0,0,.85) !important;
}
.trfDeckPassBtn:disabled,
.trfDeckPassBtn.oppTurnDisabled,
.trfDeckPassBtn.needBlocked{
  opacity:.46 !important;
  filter:grayscale(1) brightness(.72) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.trfDeckPassBtn.trf-blockedX::after{
  font-size:28px !important;
}

#dragFacePop.df-discard-mode .df-row{
  min-width:96px;
  justify-content:center;
}
#dragFacePop .df-btn-discard{
  min-width:88px;
  border-color:rgba(255,190,120,.46);
  box-shadow:0 0 0 2px rgba(255,190,120,.12) inset, 0 0 16px rgba(255,190,120,.12);
}

/* Log is no longer a permanent mini panel. It opens only from the top tab. */
#log.mini:not(.on){ display:none !important; }
#log.on{ display:block; }


/* ===== Stage589: top bar fit + larger hand cards ===== */
.topBar{
  padding-left:8px !important;
  padding-right:calc(8px + var(--trf-safe-right)) !important;
  gap:3px !important;
}
.topBar .flex1{
  min-width:2px;
}
html[data-lang="ja"] .turnPill,
html[data-lang="ja"] #turnPill{
  flex:0 0 124px !important;
  min-width:124px !important;
  max-width:124px !important;
}
#turnTimer{
  min-width:58px !important;
  width:58px !important;
  height:32px !important;
  padding:2px 3px !important;
}
#turnTimerIcon{
  left:9px !important;
  font-size:8px !important;
}
#turnTimerLabel{
  left:35px !important;
  min-width:28px !important;
  width:28px !important;
  font-size:12px !important;
}
.topBar #btnLog,
.topBar #btnEff,
.topBar #btnSettingsTop,
.topBar #btnResign{
  min-height:40px;
  padding-left:3px !important;
  padding-right:3px !important;
}
@media (max-width:430px){
  .topBar{
    padding-left:6px !important;
    padding-right:calc(6px + var(--trf-safe-right)) !important;
    gap:2px !important;
  }
  html[data-lang="ja"] .turnPill,
  html[data-lang="ja"] #turnPill{
    flex:0 0 118px !important;
    min-width:118px !important;
    max-width:118px !important;
  }
  #turnTimer{
    min-width:54px !important;
    width:54px !important;
    height:31px !important;
  }
  #turnTimerIcon{ left:8px !important; }
  #turnTimerLabel{
    left:33px !important;
    min-width:27px !important;
    width:27px !important;
    font-size:11px !important;
  }
}


/* ===== Stage590: larger hand/board + pass idle hint ===== */
.board{
  padding:10px 8px 8px !important;
}
.zones{
  gap:10px !important;
  margin:0 0 10px !important;
}
.zone{
  padding:10px 7px 38px !important;
  border-radius:15px !important;
}
.zoneCol{
  min-height:226px !important;
  padding:7px 5px !important;
}
.rowTop,
.rowBottom{
  min-height:96px !important;
  gap:8px !important;
}
#main .handRow{
  gap:4px !important;
}
#main .handRow .hand{
  gap:2px !important;
  padding:5px 4px !important;
  min-height:calc(var(--hcard-w) * 2.06) !important;
}
#main .trfSideScore{
  flex-basis:30px !important;
  width:30px !important;
  min-width:30px !important;
}
@keyframes trfPassIdlePulse{
  0%,100%{
    filter:brightness(1.08) saturate(1.08);
    box-shadow:
      0 0 0 2px rgba(96,196,255,.42),
      0 0 12px rgba(96,196,255,.35),
      0 8px 18px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  50%{
    filter:brightness(1.38) saturate(1.24);
    box-shadow:
      0 0 0 3px rgba(160,230,255,.94),
      0 0 22px rgba(96,196,255,.82),
      0 0 42px rgba(96,196,255,.36),
      0 8px 18px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
  }
}
.trfDeckPassBtn.trfPassIdleHint:not(:disabled):not(.needBlocked):not(.oppTurnDisabled){
  animation:trfPassIdlePulse .92s ease-in-out infinite !important;
  border-color:rgba(170,235,255,.92) !important;
  color:#ffffff !important;
  background:rgba(11,32,48,.96) !important;
}
.trfDeckPassBtn.trfPassIdleHint:not(:disabled):not(.needBlocked):not(.oppTurnDisabled)::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  border:1px solid rgba(120,220,255,.44);
  pointer-events:none;
  opacity:.9;
}
@media (max-height:720px), (max-width:390px){
  .board{
    padding:9px 7px 7px !important;
  }
  .zones{
    gap:8px !important;
    margin-bottom:8px !important;
  }
  .zone{
    padding:9px 6px 36px !important;
  }
  .zoneCol{
    min-height:214px !important;
    padding:6px 4px !important;
  }
  .rowTop,
  .rowBottom{
    min-height:90px !important;
  }
  #main .handRow .hand{
    min-height:calc(var(--hcard-w) * 2.02) !important;
  }
}


/* ===== Stage591: fill spare space with larger hand + slightly larger board ===== */
:root{
  --hcard-w:clamp(49px, 13.6vw, 55px);
}
.board{
  padding:8px 6px 6px !important;
}
.zones{
  gap:8px !important;
  margin:0 0 8px !important;
}
.zone{
  padding:10px 6px 40px !important;
}
.zoneCol{
  min-height:238px !important;
  padding:7px 4px !important;
}
.rowTop,
.rowBottom{
  min-height:102px !important;
  gap:6px !important;
}
.zonePower{
  left:6px;
  right:8px;
  bottom:5px;
  font-size:13px;
  padding:5px 10px;
}
#main .handRow{
  gap:2px !important;
}
#main .handRow .hand{
  gap:1px !important;
  padding:4px 2px !important;
  min-height:calc(var(--hcard-w) * 2.14) !important;
}
#main #meHand .card,
#main #opHand .card{
  transform:scale(1.40) !important;
  transform-origin:center center;
}
#main .trfSideScore{
  flex-basis:28px !important;
  width:28px !important;
  min-width:28px !important;
  height:calc(var(--hcard-w) * 1.14) !important;
}
.handRow .deckBox{
  margin-left:4px !important;
}
.handRow .meDeckBox{
  margin-left:0 !important;
}
@media (max-height:720px), (max-width:390px){
  :root{
    --hcard-w:clamp(45px, 12.8vw, 49px);
  }
  .board{
    padding:7px 5px 5px !important;
  }
  .zones{
    gap:7px !important;
    margin-bottom:7px !important;
  }
  .zone{
    padding:9px 5px 38px !important;
  }
  .zoneCol{
    min-height:224px !important;
    padding:6px 4px !important;
  }
  .rowTop,
  .rowBottom{
    min-height:96px !important;
    gap:5px !important;
  }
  #main .handRow .hand{
    padding:4px 2px !important;
    min-height:calc(var(--hcard-w) * 2.08) !important;
  }
  #main #meHand .card,
  #main #opHand .card{
    transform:scale(1.34) !important;
  }
  #main .trfSideScore{
    flex-basis:27px !important;
    width:27px !important;
    min-width:27px !important;
  }
}


/* ===== Stage592: score balance + unclipped centered fan hand ===== */
:root{
  --hcard-w:clamp(50px, 14.0vw, 58px);
}
.board{
  padding:7px 6px 5px !important;
}
.zones{
  gap:7px !important;
  margin:0 0 6px !important;
}
.zone{
  padding:10px 6px 42px !important;
}
.zoneCol{
  min-height:250px !important;
  padding:7px 4px !important;
}
.rowTop,
.rowBottom{
  min-height:108px !important;
  gap:6px !important;
}
.zonePower{
  left:6px !important;
  right:8px !important;
  bottom:5px !important;
  font-size:14px !important;
  padding:5px 10px !important;
}
#main .handRow{
  gap:4px !important;
}
#main .handRow .hand{
  gap:2px !important;
  padding-top:6px !important;
  padding-bottom:8px !important;
  padding-left:calc(var(--hcard-w) * .24 + 6px) !important;
  padding-right:calc(var(--hcard-w) * .24 + 6px) !important;
  min-height:calc(var(--hcard-w) * 2.22) !important;
  scroll-padding-left:calc(var(--hcard-w) * .30 + 8px);
  scroll-padding-right:calc(var(--hcard-w) * .30 + 8px);
}
#main #meHand[data-count="1"],
#main #meHand[data-count="2"],
#main #meHand[data-count="3"],
#main #meHand[data-count="4"],
#main #meHand[data-count="5"],
#main #meHand[data-count="6"],
#main #opHand[data-count="1"],
#main #opHand[data-count="2"],
#main #opHand[data-count="3"],
#main #opHand[data-count="4"],
#main #opHand[data-count="5"],
#main #opHand[data-count="6"]{
  justify-content:center !important;
}
#main #meHand .card,
#main #opHand .card{
  transform:scale(1.42) !important;
  transform-origin:center center;
}
#main #meHand.trfHandFan .card{
  transform:translateY(var(--trf-hand-y, 0px)) rotate(var(--trf-hand-rot, 0deg)) scale(1.40) !important;
  transform-origin:50% 92% !important;
}
#main #meHand.trfHandFan .card.sel{
  transform:translateY(calc(var(--trf-hand-y, 0px) - 3px)) rotate(var(--trf-hand-rot, 0deg)) scale(1.42) !important;
}
#main .trfSideScore{
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  height:calc(var(--hcard-w) * 1.48) !important;
  border-radius:12px !important;
}
#main .trfSideScore__label{
  font-size:12px !important;
  letter-spacing:.05em !important;
  margin-bottom:6px !important;
}
#main .trfSideScore__num{
  font-size:30px !important;
  line-height:.95 !important;
}
.handRow .deckBox{
  margin-left:4px !important;
}
.handRow .meDeckBox{
  margin-left:2px !important;
}
@media (max-height:720px), (max-width:390px){
  :root{
    --hcard-w:clamp(45px, 12.9vw, 51px);
  }
  .board{
    padding:6px 5px 4px !important;
  }
  .zones{
    gap:6px !important;
    margin-bottom:6px !important;
  }
  .zone{
    padding:9px 5px 39px !important;
  }
  .zoneCol{
    min-height:230px !important;
  }
  .rowTop,
  .rowBottom{
    min-height:98px !important;
    gap:5px !important;
  }
  .zonePower{
    font-size:13px !important;
    padding:5px 9px !important;
  }
  #main .handRow .hand{
    padding-left:calc(var(--hcard-w) * .22 + 5px) !important;
    padding-right:calc(var(--hcard-w) * .22 + 5px) !important;
    min-height:calc(var(--hcard-w) * 2.14) !important;
  }
  #main #meHand .card,
  #main #opHand .card{
    transform:scale(1.34) !important;
  }
  #main #meHand.trfHandFan .card{
    transform:translateY(var(--trf-hand-y, 0px)) rotate(var(--trf-hand-rot, 0deg)) scale(1.34) !important;
  }
  #main #meHand.trfHandFan .card.sel{
    transform:translateY(calc(var(--trf-hand-y, 0px) - 2px)) rotate(var(--trf-hand-rot, 0deg)) scale(1.36) !important;
  }
  #main .trfSideScore{
    flex-basis:36px !important;
    width:36px !important;
    min-width:36px !important;
    height:calc(var(--hcard-w) * 1.42) !important;
  }
  #main .trfSideScore__label{
    font-size:10px !important;
    margin-bottom:4px !important;
  }
  #main .trfSideScore__num{
    font-size:25px !important;
  }
}

/* ===== Stage593: bottom hand fan visibility + transparent hand area =====
   - User hand row uses the spare lower margin instead of clipping the fan top.
   - The visible frame/background of the user hand area is made transparent.
   - The selected hand card is drawn in front and shown as a full card. */
#main .board > .zones + .handRow{
  margin-top:clamp(12px, 2.6vh, 26px) !important;
  margin-bottom:0 !important;
  align-items:flex-end !important;
  overflow:visible !important;
}
#main .board > .zones + .handRow > .handWrap{
  align-items:flex-end !important;
  overflow:visible !important;
}
#main .board > .zones + .handRow #meHand{
  --trf-hand-drop:clamp(14px, 2.2vh, 22px);
  --trf-hand-selected-lift:clamp(18px, 4.8vw, 26px);
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:flex-end !important;
  padding-top:calc(var(--hcard-w) * .46) !important;
  padding-bottom:calc(var(--hcard-w) * .50) !important;
  min-height:calc(var(--hcard-w) * 2.78) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
#main #meHand.trfHandFan .card{
  z-index:1;
  transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-hand-drop, 10px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.40) !important;
  transform-origin:50% 92% !important;
  transition:transform .12s ease-out, box-shadow .12s ease-out, filter .12s ease-out;
}
#main #meHand.trfHandFan .card.sel{
  z-index:60 !important;
  transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-hand-drop, 10px) - var(--trf-hand-selected-lift, 22px))) rotate(0deg) scale(1.50) !important;
  transform-origin:50% 92% !important;
  filter:brightness(1.08) saturate(1.06);
}

@media (max-height:720px), (max-width:390px){
  #main .board > .zones + .handRow{
    margin-top:clamp(8px, 1.8vh, 18px) !important;
  }
  #main .board > .zones + .handRow #meHand{
    --trf-hand-drop:clamp(10px, 1.7vh, 16px);
    --trf-hand-selected-lift:clamp(15px, 4.0vw, 21px);
    padding-top:calc(var(--hcard-w) * .42) !important;
    padding-bottom:calc(var(--hcard-w) * .46) !important;
    min-height:calc(var(--hcard-w) * 2.62) !important;
  }
  #main #meHand.trfHandFan .card{
    transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-hand-drop, 8px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.34) !important;
  }
  #main #meHand.trfHandFan .card.sel{
    transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-hand-drop, 8px) - var(--trf-hand-selected-lift, 18px))) rotate(0deg) scale(1.44) !important;
  }
}


/* ===== Stage594: lower user fan slightly + opponent fan/no-frame hand ===== */
#main .trfOpHandWrap,
#main .trfMeHandWrap{
  overflow:visible !important;
}
#main #opHand{
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:flex-end !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
#main #opHand.trfHandFan{
  --trf-op-hand-drop:clamp(0px, .5vh, 5px);
  padding-top:calc(var(--hcard-w) * .36) !important;
  padding-bottom:calc(var(--hcard-w) * .36) !important;
  min-height:calc(var(--hcard-w) * 2.34) !important;
}
#main #opHand.trfHandFan .card{
  z-index:1;
  transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-op-hand-drop, 0px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.40) !important;
  transform-origin:50% 92% !important;
  transition:transform .12s ease-out, box-shadow .12s ease-out, filter .12s ease-out;
}
@media (max-height:720px), (max-width:390px){
  #main #opHand.trfHandFan{
    --trf-op-hand-drop:clamp(0px, .4vh, 4px);
    padding-top:calc(var(--hcard-w) * .32) !important;
    padding-bottom:calc(var(--hcard-w) * .32) !important;
    min-height:calc(var(--hcard-w) * 2.20) !important;
  }
  #main #opHand.trfHandFan .card{
    transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-op-hand-drop, 0px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.34) !important;
  }
}

/* ===== Stage595: hand fan clipping guard =====
   Keep the fan style from Stage592-594, but reserve enough transparent vertical
   space so rotated/scaled hand cards do not get cut at the top or bottom. */
#main .trfOpHandWrap,
#main .trfMeHandWrap,
#main .board > .zones + .handRow,
#main .board > .zones + .handRow > .handWrap{
  overflow:visible !important;
}

#main #opHand.trfHandFan{
  --trf-op-hand-drop:clamp(5px, .9vh, 9px);
  padding-top:calc(var(--hcard-w) * .62) !important;
  padding-bottom:calc(var(--hcard-w) * .34) !important;
  min-height:calc(var(--hcard-w) * 2.66) !important;
}

#main .board > .zones + .handRow #meHand{
  --trf-hand-drop:clamp(20px, 3.0vh, 30px);
  padding-top:calc(var(--hcard-w) * .66) !important;
  padding-bottom:calc(var(--hcard-w) * .82) !important;
  min-height:calc(var(--hcard-w) * 3.18) !important;
}

@media (max-height:720px), (max-width:390px){
  #main #opHand.trfHandFan{
    --trf-op-hand-drop:clamp(4px, .8vh, 7px);
    padding-top:calc(var(--hcard-w) * .58) !important;
    padding-bottom:calc(var(--hcard-w) * .32) !important;
    min-height:calc(var(--hcard-w) * 2.52) !important;
  }

  #main .board > .zones + .handRow #meHand{
    --trf-hand-drop:clamp(16px, 2.5vh, 23px);
    padding-top:calc(var(--hcard-w) * .60) !important;
    padding-bottom:calc(var(--hcard-w) * .78) !important;
    min-height:calc(var(--hcard-w) * 3.00) !important;
  }
}

/* ===== Stage596: hand balance tune =====
   1) Slim the visible user-hand panel without reintroducing clipping.
   2) Relax the right-side crowding between the pass button and the deck box.
   3) Make the opponent fan slightly smaller so the screen weight stays centered. */
#main .board > .zones + .handRow{
  gap:6px !important;
}

#main .board > .zones + .handRow #meHand{
  --trf-hand-drop:clamp(18px, 2.7vh, 26px);
  padding-top:calc(var(--hcard-w) * .58) !important;
  padding-bottom:calc(var(--hcard-w) * .68) !important;
  min-height:calc(var(--hcard-w) * 2.94) !important;
}

#main .trfDeckPassBtn{
  left:44% !important;
  top:-30px !important;
}

#main .handRow .meDeckBox{
  margin-left:8px !important;
  margin-right:calc(4px + var(--trf-safe-right, 0px)) !important;
}

#main #opHand.trfHandFan{
  --trf-op-hand-drop:clamp(4px, .8vh, 7px);
  padding-top:calc(var(--hcard-w) * .54) !important;
  padding-bottom:calc(var(--hcard-w) * .30) !important;
  min-height:calc(var(--hcard-w) * 2.46) !important;
}
#main #opHand.trfHandFan .card{
  transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-op-hand-drop, 0px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.32) !important;
}

@media (max-height:720px), (max-width:390px){
  #main .board > .zones + .handRow{
    gap:5px !important;
  }

  #main .board > .zones + .handRow #meHand{
    --trf-hand-drop:clamp(14px, 2.2vh, 20px);
    padding-top:calc(var(--hcard-w) * .54) !important;
    padding-bottom:calc(var(--hcard-w) * .62) !important;
    min-height:calc(var(--hcard-w) * 2.80) !important;
  }

  #main .trfDeckPassBtn{
    left:43% !important;
    top:-28px !important;
  }

  #main .handRow .meDeckBox{
    margin-left:7px !important;
    margin-right:calc(3px + var(--trf-safe-right, 0px)) !important;
  }

  #main #opHand.trfHandFan{
    --trf-op-hand-drop:clamp(3px, .7vh, 6px);
    padding-top:calc(var(--hcard-w) * .50) !important;
    padding-bottom:calc(var(--hcard-w) * .28) !important;
    min-height:calc(var(--hcard-w) * 2.34) !important;
  }
  #main #opHand.trfHandFan .card{
    transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-op-hand-drop, 0px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.27) !important;
  }
}

/* ===== Stage597: fan spread tighten + right-side spacing =====
   Keep the current card scale, but reduce the fan's horizontal spread so
   high-count hands no longer clip at the left/right edges. Also move the
   pass button farther left/up to reduce crowding with the deck box. */
#main #meHand.trfHandFan,
#main #opHand.trfHandFan{
  padding-left:calc(var(--hcard-w) * .34 + 10px) !important;
  padding-right:calc(var(--hcard-w) * .34 + 10px) !important;
  scroll-padding-left:calc(var(--hcard-w) * .40 + 12px) !important;
  scroll-padding-right:calc(var(--hcard-w) * .40 + 12px) !important;
}

#main #meHand.trfHandFan .card{
  margin-left:-5px !important;
  margin-right:-5px !important;
}
#main #opHand.trfHandFan .card{
  margin-left:-4px !important;
  margin-right:-4px !important;
}
#main #meHand.trfHandFan .card:first-child,
#main #opHand.trfHandFan .card:first-child{
  margin-left:0 !important;
}
#main #meHand.trfHandFan .card:last-child,
#main #opHand.trfHandFan .card:last-child{
  margin-right:0 !important;
}

#main .trfDeckPassBtn{
  left:36% !important;
  top:-34px !important;
}

#main .handRow .meDeckBox{
  margin-left:10px !important;
  margin-right:calc(5px + var(--trf-safe-right, 0px)) !important;
}

@media (max-height:720px), (max-width:390px){
  #main #meHand.trfHandFan,
  #main #opHand.trfHandFan{
    padding-left:calc(var(--hcard-w) * .30 + 9px) !important;
    padding-right:calc(var(--hcard-w) * .30 + 9px) !important;
    scroll-padding-left:calc(var(--hcard-w) * .36 + 10px) !important;
    scroll-padding-right:calc(var(--hcard-w) * .36 + 10px) !important;
  }

  #main #meHand.trfHandFan .card{
    margin-left:-4px !important;
    margin-right:-4px !important;
  }
  #main #opHand.trfHandFan .card{
    margin-left:-3px !important;
    margin-right:-3px !important;
  }

  #main .trfDeckPassBtn{
    left:37% !important;
    top:-31px !important;
  }

  #main .handRow .meDeckBox{
    margin-left:8px !important;
    margin-right:calc(4px + var(--trf-safe-right, 0px)) !important;
  }
}

/* ===== Stage637 final override: contour ring sits farther outside the card ===== */
#main #meHand.hintPulse,
#main .board > .zones + .handRow #meHand.hintPulse{
  position:relative !important;
  isolation:isolate;
  outline:1px solid rgba(224,244,255,.18) !important;
  outline-offset:-3px !important;
  border-radius:16px !important;
  box-shadow:0 0 0 1px rgba(224,244,255,.06) inset !important;
  animation:none !important;
}
#main #meHand.hintPulse .card.hintPulse:not(.sel):not(.hl){
  animation:trfHintPulseCard 1.42s ease-in-out infinite !important;
  animation-delay:0s !important;
}
#main #meHand.hintPulse .card.trf-effg-g123.hintPulse:not(.sel):not(.hl),
#main #meHand.hintPulse .card.trf-effg-g456.hintPulse:not(.sel):not(.hl),
#main #meHand.hintPulse .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl),
#main #meHand.hintPulse .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl){
  animation:trfHintPulseCardStrong 1.42s ease-in-out infinite !important;
  animation-delay:0s !important;
}


/* ===== Stage641: engineer target emerald + stable fan transforms =====
   - Keep hand-card fan transform while guidance/effect pulse is active.
   - Draw effect-choice targets with an emerald-green ring outside the card.
   - Do not animate transform; this prevents intermittent small/straight hand cards at CPU start. */
@keyframes trfHintPulseCard{
  0%,100%{
    filter:brightness(1.03) saturate(1.04);
  }
  50%{
    filter:brightness(1.08) saturate(1.10);
  }
}

@keyframes trfHintPulseCardStrong{
  0%,100%{
    filter:brightness(1.05) saturate(1.10);
  }
  50%{
    filter:brightness(1.12) saturate(1.18);
  }
}

#main #meHand.trfHandFan .card.hintPulse:not(.sel):not(.hl){
  transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-hand-drop, 10px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.40) !important;
  transform-origin:50% 92% !important;
}

#main #meHand.trfHandFan .card.trf-effPick{
  transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-hand-drop, 10px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.40) !important;
  transform-origin:50% 92% !important;
}

@media (max-height:720px), (max-width:390px){
  #main #meHand.trfHandFan .card.hintPulse:not(.sel):not(.hl),
  #main #meHand.trfHandFan .card.trf-effPick{
    transform:translateY(calc(var(--trf-hand-y, 0px) + var(--trf-hand-drop, 8px))) rotate(var(--trf-hand-rot, 0deg)) scale(1.34) !important;
  }
}

#main .card.trf-effPick,
#main .card.hl.trf-effPick,
#main .card.sel.trf-effPick,
body.trf-effect-choice-focus #main .card.trf-effPick,
body.trf-effect-choice-focus #main .card.hl.trf-effPick,
body.trf-effect-choice-focus #main .card.sel.trf-effPick{
  position:relative !important;
  isolation:isolate;
  overflow:visible !important;
  outline:0 !important;
  border-radius:8px !important;
  box-shadow:
    0 0 0 2px rgba(175,255,240,.96) inset,
    0 0 0 2px rgba(45,212,191,.90),
    0 0 14px rgba(125,255,233,.74),
    0 0 30px rgba(45,212,191,.40) !important;
  animation:trfEffPickPulse 0.92s ease-in-out infinite !important;
}

#main .card.trf-effPick::before,
body.trf-effect-choice-focus #main .card.trf-effPick::before{
  content:"";
  position:absolute;
  top:-6px;
  right:-6px;
  bottom:-6px;
  left:-6px;
  box-sizing:border-box;
  border-radius:14px;
  pointer-events:none;
  z-index:8;
  border:2px solid rgba(125,255,233,.86);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 12px rgba(125,255,233,.64),
    0 0 26px rgba(45,212,191,.36);
  opacity:.72;
  animation:trfEffPickEmeraldRing 0.92s ease-in-out infinite;
}

@keyframes trfEffPickEmeraldRing{
  0%,100%{
    opacity:.54;
    border-color:rgba(45,212,191,.76);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 0 8px rgba(45,212,191,.46),
      0 0 18px rgba(45,212,191,.24);
  }
  50%{
    opacity:.94;
    border-color:rgba(175,255,240,.96);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.14),
      0 0 14px rgba(125,255,233,.78),
      0 0 32px rgba(45,212,191,.44);
  }
}

/* ===== Stage642: trf-effPick glow alignment micro-tune =====
   - tighten outer ring inset/radius so emerald glow hugs the card frame more precisely.
   - reduce double-ring spread to avoid apparent offset on board targets. */


/* ===== Stage643: clip effect-pick card art while keeping emerald glow =====
   Stage642 used overflow:visible on .trf-effPick so the outer ring could extend outside the card.
   On board cards this also allowed the card illustration to visually bleed outside the rounded frame.
   Keep the glow on the card box-shadow, but clip card contents and draw the ring inside the card frame. */
#main .card.trf-effPick,
#main .card.hl.trf-effPick,
#main .card.sel.trf-effPick,
body.trf-effect-choice-focus #main .card.trf-effPick,
body.trf-effect-choice-focus #main .card.hl.trf-effPick,
body.trf-effect-choice-focus #main .card.sel.trf-effPick{
  overflow:hidden !important;
  border-radius:8px !important;
  box-shadow:
    0 0 0 2px rgba(175,255,240,.96) inset,
    0 0 0 2px rgba(45,212,191,.88),
    0 0 14px rgba(125,255,233,.72),
    0 0 30px rgba(45,212,191,.40) !important;
}

#main .card.trf-effPick .cardInner,
#main .card.trf-effPick .cardFace,
#main .card.trf-effPick .cardArtWrap,
body.trf-effect-choice-focus #main .card.trf-effPick .cardInner,
body.trf-effect-choice-focus #main .card.trf-effPick .cardFace,
body.trf-effect-choice-focus #main .card.trf-effPick .cardArtWrap{
  overflow:hidden !important;
  border-radius:8px !important;
}

#main .card.trf-effPick::before,
body.trf-effect-choice-focus #main .card.trf-effPick::before{
  content:"";
  position:absolute;
  inset:0;
  box-sizing:border-box;
  border-radius:8px;
  pointer-events:none;
  z-index:2;
  border:2px solid rgba(125,255,233,.86);
  box-shadow:
    0 0 10px rgba(125,255,233,.58) inset,
    0 0 18px rgba(45,212,191,.28) inset;
  opacity:.74;
  animation:trfEffPickEmeraldRingClipped 0.92s ease-in-out infinite;
}

@keyframes trfEffPickEmeraldRingClipped{
  0%,100%{
    opacity:.56;
    border-color:rgba(45,212,191,.74);
    box-shadow:
      0 0 8px rgba(45,212,191,.42) inset,
      0 0 14px rgba(45,212,191,.22) inset;
  }
  50%{
    opacity:.96;
    border-color:rgba(175,255,240,.96);
    box-shadow:
      0 0 12px rgba(125,255,233,.72) inset,
      0 0 22px rgba(45,212,191,.36) inset;
  }
}


/* Stage741: center turn / round notice */
#trfTurnNotice{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) scale(.96);
  z-index:100001;
  min-width:min(280px, 78vw);
  max-width:86vw;
  padding:14px 20px 13px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:16px;
  background:rgba(8,12,18,.88);
  box-shadow:0 14px 44px rgba(0,0,0,.45), 0 0 28px rgba(255,255,255,.10) inset;
  color:#fff;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease-out, transform .16s ease-out;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#trfTurnNotice.show{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}
#trfTurnNotice .trf-turn-notice-title{
  font:900 24px/1.05 ui-rounded, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#trfTurnNotice .trf-turn-notice-sub{
  margin-top:7px;
  font:800 14px/1.2 ui-rounded, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  opacity:.86;
  letter-spacing:.05em;
}
#handover .ho-round-banner{
  margin:0 auto 8px;
  width:max-content;
  max-width:100%;
  padding:5px 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#e6edf3;
  font:900 14px/1 ui-rounded, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#handover .ho-who{
  text-align:center;
  font-size:20px;
  font-weight:850;
  margin:4px 0 10px;
}
#handover #who{
  font-size:28px;
  letter-spacing:.04em;
}


/* Stage742: force the shared turn notice to the screen center. */
#trfTurnNotice.trf-turnNotice,
.trf-turnNotice#trfTurnNotice{
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) scale(.96);
  z-index:100001 !important;
}
#trfTurnNotice.trf-turnNotice.show,
.trf-turnNotice#trfTurnNotice.show{
  transform:translate(-50%, -50%) scale(1);
}
#trfTurnNotice.trf-turnNotice.turn .trf-turn-notice-sub:empty{ display:none; }

/* Stage743: turn notice uses next-player color; round title stays white. */
#trfTurnNotice.trf-turnNotice.turn.p0 .trf-turnNotice__text{
  color:var(--trf-p0, #60a5fa) !important;
  -webkit-text-fill-color:var(--trf-p0, #60a5fa) !important;
}
#trfTurnNotice.trf-turnNotice.turn.p1 .trf-turnNotice__text{
  color:var(--trf-p1, #f87171) !important;
  -webkit-text-fill-color:var(--trf-p1, #f87171) !important;
}
#trfTurnNotice.trf-turnNotice.round.p0 .trf-turnNotice__text{
  color:var(--trf-p0, #60a5fa) !important;
  -webkit-text-fill-color:var(--trf-p0, #60a5fa) !important;
}
#trfTurnNotice.trf-turnNotice.round.p1 .trf-turnNotice__text{
  color:var(--trf-p1, #f87171) !important;
  -webkit-text-fill-color:var(--trf-p1, #f87171) !important;
}


/* Stage744: opponent visible power plate + cooler turn notice + illustrated menu buttons */
#trfTurnNotice .trf-turn-notice-title,
#trfTurnNotice .trf-turnNotice__text{
  font-family:"Cinzel","Trajan Pro","Palatino Linotype","Book Antiqua","Yu Mincho","Hiragino Mincho ProN","Times New Roman",serif;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.52), 0 0 18px rgba(255,255,255,.12);
}
#trfTurnNotice .trf-turn-notice-title{ font-size:26px; }
#trfTurnNotice.turn .trf-turn-notice-title,
#trfTurnNotice.turn .trf-turnNotice__text{
  text-shadow:0 2px 0 rgba(0,0,0,.62), 0 0 18px rgba(255,255,255,.10), 0 0 28px rgba(0,0,0,.24);
}
#trfTurnNotice.round .trf-turnNotice__text{ letter-spacing:.14em; }

.zoneOppPower{
  position:absolute;
  left:6px;
  right:8px;
  top:5px;
  text-align:center;
  font:700 14px/1.2 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  color:#f4f8ff;
  opacity:.96;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(10,16,30,.90);
  border:1px solid rgba(168,184,214,.42);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  pointer-events:none;
  z-index:11;
}
.zoneCol{ padding-top:30px !important; }
@media (max-height:720px), (max-width:390px){
  .zoneOppPower{ font-size:13px; padding:5px 10px; }
  .zoneCol{ padding-top:28px !important; }
}

#title #btnCatBattle,
#title #btnCatDungeon,
#title #btnCatTutorial,
#title #btnBattleLocalMenu,
#title #btnBattleOnlineMenu,
#title #btnLocal,
#title #btnCpuStart,
#title #btnTutNormal,
#title #btnTutCustom{
  position:relative;
  overflow:hidden;
  color:#f7fbff;
  border-color:rgba(210,230,255,.34);
  background-color:#101720;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  text-shadow:0 2px 8px rgba(0,0,0,.92), 0 0 14px rgba(0,0,0,.50);
  box-shadow:0 10px 22px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.05);
}
#title #btnBattleLocalMenu,
#title #btnBattleOnlineMenu,
#title #btnLocal,
#title #btnCpuStart,
#title #btnTutNormal,
#title #btnTutCustom{
  min-height:72px;
}
#title #btnCatBattle{ background-image:linear-gradient(180deg, rgba(8,12,18,.30), rgba(8,12,18,.70)), url('menu_art/battle_arena.png'); }
#title #btnCatDungeon{ background-image:linear-gradient(180deg, rgba(8,12,18,.26), rgba(8,12,18,.68)), url('menu_art/expedition_road.png'); }
#title #btnCatTutorial{ background-image:linear-gradient(180deg, rgba(8,12,18,.24), rgba(8,12,18,.66)), url('menu_art/tutorial_book.png'); }
#title #btnBattleLocalMenu{ background-image:linear-gradient(180deg, rgba(8,12,18,.26), rgba(8,12,18,.66)), url('menu_art/local_castle_new.png'); }
#title #btnBattleOnlineMenu{ background-image:linear-gradient(180deg, rgba(8,12,18,.24), rgba(8,12,18,.64)), url('menu_art/online_vortex.png'); }
#title #btnLocal{ background-image:linear-gradient(180deg, rgba(18,24,32,.92), rgba(12,16,24,.96)); }
#title #btnCpuStart{ background-image:linear-gradient(180deg, rgba(18,24,32,.92), rgba(12,16,24,.96)); }
#title #btnTutNormal{ background-image:linear-gradient(180deg, rgba(8,12,18,.24), rgba(8,12,18,.62)), url('menu_art/tutorial_wand.png'); }
#title #btnTutCustom{ background-image:linear-gradient(180deg, rgba(8,12,18,.24), rgba(8,12,18,.62)), url('menu_art/tutorial_custom_oldwoman.png'); }


/* Stage746: power colors, neutral Round notice, robust pass-modal arrow hide, and unified title button widths */
#trfTurnNotice.trf-turnNotice.round.p0 .trf-turnNotice__text,
#trfTurnNotice.trf-turnNotice.round.p1 .trf-turnNotice__text,
#trfTurnNotice.trf-turnNotice.round .trf-turnNotice__text{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

#main .zone{
  padding-top:38px !important;
}
#main .zoneOppPower{
  top:7px !important;
}
#main .zoneCol{
  padding-top:7px !important;
}
#main .zonePower,
#main .zoneOppPower{
  font:700 14px/1.2 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
}
#main .zonePower.p0,
#main .zoneOppPower.p0{
  color:var(--trf-p0, #60a5fa) !important;
  -webkit-text-fill-color:var(--trf-p0, #60a5fa) !important;
  border-color:color-mix(in srgb, var(--trf-p0, #60a5fa) 50%, rgba(168,184,214,.42)) !important;
}
#main .zonePower.p1,
#main .zoneOppPower.p1{
  color:var(--trf-p1, #f87171) !important;
  -webkit-text-fill-color:var(--trf-p1, #f87171) !important;
  border-color:color-mix(in srgb, var(--trf-p1, #f87171) 50%, rgba(168,184,214,.42)) !important;
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  #main .zonePower.p0,
  #main .zoneOppPower.p0{ border-color:rgba(96,165,250,.64) !important; }
  #main .zonePower.p1,
  #main .zoneOppPower.p1{ border-color:rgba(248,113,113,.64) !important; }
}
@media (max-height:720px), (max-width:390px){
  #main .zone{ padding-top:35px !important; }
  #main .zoneOppPower{ top:6px !important; }
  #main .zoneCol{ padding-top:6px !important; }
  #main .zonePower,
  #main .zoneOppPower{ font-size:13px !important; }
}

body.trf-pass-confirm-open #trf725HandEdgeNav,
body.trf-pass-confirm-open #trf725HandEdgeNav.show{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
}

/* Main category buttons are intentionally long; secondary menu buttons are intentionally shorter, in both languages. */
#titleStepCategory #btnCatBattle,
#titleStepCategory #btnCatDungeon,
#titleStepCategory #btnCatTutorial{
  width:min(86vw, 240px) !important;
  min-width:min(86vw, 240px) !important;
  max-width:240px !important;
  flex:0 0 min(86vw, 240px) !important;
}
#titleStepCategory .trf-rulebook-open-btn,
#titleStepCategory #btnCatMyPage,
#titleStepCategory #btnCatShop{
  width:150px !important;
  min-width:132px !important;
  max-width:160px !important;
  flex:0 0 auto !important;
}
html[data-lang="en"] #titleStepCategory #btnCatBattle,
html[data-lang="en"] #titleStepCategory #btnCatDungeon,
html[data-lang="en"] #titleStepCategory #btnCatTutorial,
html[data-lang="ja"] #titleStepCategory #btnCatBattle,
html[data-lang="ja"] #titleStepCategory #btnCatDungeon,
html[data-lang="ja"] #titleStepCategory #btnCatTutorial{
  width:min(86vw, 240px) !important;
  min-width:min(86vw, 240px) !important;
  max-width:240px !important;
}
html[data-lang="en"] #titleStepCategory .trf-rulebook-open-btn,
html[data-lang="en"] #titleStepCategory #btnCatMyPage,
html[data-lang="en"] #titleStepCategory #btnCatShop,
html[data-lang="ja"] #titleStepCategory .trf-rulebook-open-btn,
html[data-lang="ja"] #titleStepCategory #btnCatMyPage,
html[data-lang="ja"] #titleStepCategory #btnCatShop{
  width:150px !important;
  min-width:132px !important;
  max-width:160px !important;
}
@media (max-width:480px){
  #titleStepCategory #btnCatBattle,
  #titleStepCategory #btnCatDungeon,
  #titleStepCategory #btnCatTutorial{
    width:min(92vw, 240px) !important;
    min-width:min(92vw, 240px) !important;
    flex-basis:min(92vw, 240px) !important;
  }
  #titleStepCategory .trf-rulebook-open-btn,
  #titleStepCategory #btnCatMyPage,
  #titleStepCategory #btnCatShop{
    width:148px !important;
    min-width:128px !important;
  }
}


/* Stage747: power text white with player-color border only; English menu/card-tag fit; extra illustrated buttons */
#main .zonePower,
#main .zoneOppPower{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
#main .zonePower.p0,
#main .zoneOppPower.p0,
#main .zonePower.p1,
#main .zoneOppPower.p1{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

#trfTurnNotice.turn .trf-turn-notice-sub{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
#trfTurnNotice .trf-turn-notice-sub{
  display:block;
  margin-top:6px;
  font-family:"Cinzel","Trajan Pro","Palatino Linotype","Book Antiqua","Yu Mincho","Hiragino Mincho ProN","Times New Roman",serif;
  font-weight:800;
  font-size:16px;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.62), 0 0 12px rgba(255,255,255,.08);
}
#trfTurnNotice.round .trf-turn-notice-sub:empty,
#trfTurnNotice.turn .trf-turn-notice-sub:empty{ display:none !important; }

#title #btnBattleLocalMenu,
#title #btnBattleOnlineMenu,
#title #btnLocal,
#title #btnCpuStart,
#title #btnTutNormal,
#title #btnTutCustom,
#battlePaneOnline #btnOnlineHost,
#battlePaneOnline #btnOnlineGuest,
#battlePaneOnline #btnOnlinePublicList,
#trfDungeonHost #btnDungeonStart,
#trfDungeonHost #btnDungeonCleanStart,
#trfDungeonHost #btnDungeonResume,
#trfDungeonHost #btnDungeonReset{
  min-height:72px !important;
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.14 !important;
  text-align:center !important;
  white-space:nowrap;
  overflow:hidden;
}
html[data-lang="en"] #title #btnBattleLocalMenu,
html[data-lang="en"] #title #btnBattleOnlineMenu,
html[data-lang="en"] #title #btnLocal,
html[data-lang="en"] #title #btnCpuStart,
html[data-lang="en"] #title #btnTutNormal,
html[data-lang="en"] #title #btnTutCustom{
  font-size:15px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
html[data-lang="en"] .trf711-card-typewrap{ left:28px; top:2px; max-width:calc(100% - 30px); }
html[data-lang="en"] .trf711-card-typewrap .trf711-badge{
  min-width:10px;
  height:11px;
  padding:0 1px;
  font-size:6.1px;
  line-height:11px;
  letter-spacing:-.02em;
  border-radius:4px;
}

#title #btnLocal,
#title #btnCpuStart,
#battlePaneOnline #btnOnlineHost,
#battlePaneOnline #btnOnlineGuest,
#battlePaneOnline #btnOnlinePublicList,
#trfDungeonHost #btnDungeonStart,
#trfDungeonHost #btnDungeonCleanStart,
#trfDungeonHost #btnDungeonResume,
#trfDungeonHost #btnDungeonReset,
#battlePaneOnline .trf-online-publicToggle{
  position:relative;
  overflow:hidden;
  color:#f7fbff;
  border:1px solid rgba(210,230,255,.34);
  background-color:#101720;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  text-shadow:0 2px 8px rgba(0,0,0,.92), 0 0 14px rgba(0,0,0,.50);
  box-shadow:0 10px 22px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.05);
}
#title #btnLocal{ background-image:linear-gradient(180deg, rgba(8,12,18,.28), rgba(8,12,18,.72)), url('menu_art/stage747_local_vs.png') !important; }
#title #btnCpuStart{ background-image:linear-gradient(180deg, rgba(8,12,18,.24), rgba(8,12,18,.72)), url('menu_art/stage747_cpu_battle.png') !important; }
#battlePaneOnline #btnOnlineHost{ background-image:linear-gradient(180deg, rgba(8,12,18,.22), rgba(8,12,18,.68)), url('menu_art/stage747_room_host.png') !important; }
#battlePaneOnline #btnOnlineGuest{ background-image:linear-gradient(180deg, rgba(8,12,18,.22), rgba(8,12,18,.68)), url('menu_art/stage747_room_join.png') !important; }
#battlePaneOnline #btnOnlinePublicList{ background-image:linear-gradient(180deg, rgba(8,12,18,.22), rgba(8,12,18,.68)), url('menu_art/stage747_room_list.png') !important; }
#battlePaneOnline .trf-online-publicToggle{
  min-height:72px;
  padding:10px 14px;
  border-radius:14px;
  background-image:linear-gradient(180deg, rgba(8,12,18,.22), rgba(8,12,18,.68)), url('menu_art/stage747_room_public.png') !important;
  display:flex;
  align-items:center;
  gap:8px;
}
#battlePaneOnline .trf-online-publicToggle input{ position:relative; z-index:1; }
#battlePaneOnline .trf-online-publicToggle span{ position:relative; z-index:1; }
#trfDungeonHost #btnDungeonStart,
#trfDungeonHost #btnDungeonCleanStart,
#trfDungeonHost #btnDungeonResume{
  background-image:linear-gradient(180deg, rgba(8,12,18,.20), rgba(8,12,18,.68)), url('menu_art/stage747_expedition_start.png') !important;
}
#trfDungeonHost #btnDungeonReset{
  background-image:linear-gradient(180deg, rgba(18,24,32,.94), rgba(12,16,24,.96)) !important;
}


/* Stage748: fix English title card height, exact round/turn notice timing, and tighter English card tags */
#trfTurnNotice.trf-turnNotice.show,
.trf-turnNotice#trfTurnNotice.show{
  animation:none !important;
  opacity:1 !important;
  transform:translate(-50%, -50%) scale(1) !important;
}
#trfTurnNotice.trf-turnNotice,
.trf-turnNotice#trfTurnNotice{
  transition:opacity .08s linear, transform .08s linear !important;
}

#titleStepCategory .row{
  align-items:center !important;
  justify-content:center !important;
}
html[data-lang="en"] #titleStepCategory .row,
html[data-lang="ja"] #titleStepCategory .row{
  align-items:center !important;
}
#titleStepCategory #btnCatBattle,
#titleStepCategory #btnCatDungeon,
#titleStepCategory #btnCatTutorial,
html[data-lang="en"] #titleStepCategory #btnCatBattle,
html[data-lang="en"] #titleStepCategory #btnCatDungeon,
html[data-lang="en"] #titleStepCategory #btnCatTutorial,
html[data-lang="ja"] #titleStepCategory #btnCatBattle,
html[data-lang="ja"] #titleStepCategory #btnCatDungeon,
html[data-lang="ja"] #titleStepCategory #btnCatTutorial{
  width:min(86vw, 260px) !important;
  min-width:0 !important;
  max-width:260px !important;
  height:96px !important;
  min-height:96px !important;
  max-height:96px !important;
  flex:0 0 96px !important;
  padding:10px 14px !important;
  line-height:1.1 !important;
}
@media (max-height:740px){
  #titleStepCategory #btnCatBattle,
  #titleStepCategory #btnCatDungeon,
  #titleStepCategory #btnCatTutorial,
  html[data-lang="en"] #titleStepCategory #btnCatBattle,
  html[data-lang="en"] #titleStepCategory #btnCatDungeon,
  html[data-lang="en"] #titleStepCategory #btnCatTutorial,
  html[data-lang="ja"] #titleStepCategory #btnCatBattle,
  html[data-lang="ja"] #titleStepCategory #btnCatDungeon,
  html[data-lang="ja"] #titleStepCategory #btnCatTutorial{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;
    flex-basis:88px !important;
  }
}

html[data-lang="en"] .trf711-card-typewrap{
  left:auto !important;
  right:1px !important;
  top:2px !important;
  max-width:19px !important;
  justify-content:flex-end !important;
}
html[data-lang="en"] .trf711-card-typewrap .trf711-badge{
  min-width:0 !important;
  max-width:19px !important;
  height:9px !important;
  padding:0 1px !important;
  font-size:4.9px !important;
  line-height:9px !important;
  letter-spacing:-.06em !important;
  border-radius:4px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}


/* Stage749: restore long horizontal JP/EN category cards and add Expedition resume/reset art */
#titleStepCategory > .row:first-of-type{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}
#titleStepCategory > .row:first-of-type #btnCatBattle,
#titleStepCategory > .row:first-of-type #btnCatDungeon,
#titleStepCategory > .row:first-of-type #btnCatTutorial,
html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatBattle,
html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatDungeon,
html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatTutorial,
html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatBattle,
html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatDungeon,
html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatTutorial{
  width:min(86vw, 300px) !important;
  min-width:min(86vw, 300px) !important;
  max-width:300px !important;
  height:92px !important;
  min-height:92px !important;
  max-height:92px !important;
  flex:0 0 92px !important;
  flex-basis:92px !important;
  padding:10px 16px !important;
  line-height:1.08 !important;
  white-space:normal !important;
}
@media (max-height:740px){
  #titleStepCategory > .row:first-of-type{ gap:10px !important; margin-top:8px !important; }
  #titleStepCategory > .row:first-of-type #btnCatBattle,
  #titleStepCategory > .row:first-of-type #btnCatDungeon,
  #titleStepCategory > .row:first-of-type #btnCatTutorial,
  html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatBattle,
  html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatDungeon,
  html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatTutorial,
  html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatBattle,
  html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatDungeon,
  html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatTutorial{
    height:84px !important;
    min-height:84px !important;
    max-height:84px !important;
    flex:0 0 84px !important;
    flex-basis:84px !important;
  }
}
@media (max-height:640px){
  #titleStepCategory > .row:first-of-type{ gap:8px !important; }
  #titleStepCategory > .row:first-of-type #btnCatBattle,
  #titleStepCategory > .row:first-of-type #btnCatDungeon,
  #titleStepCategory > .row:first-of-type #btnCatTutorial,
  html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatBattle,
  html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatDungeon,
  html[data-lang="ja"] #titleStepCategory > .row:first-of-type #btnCatTutorial,
  html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatBattle,
  html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatDungeon,
  html[data-lang="en"] #titleStepCategory > .row:first-of-type #btnCatTutorial{
    height:76px !important;
    min-height:76px !important;
    max-height:76px !important;
    flex:0 0 76px !important;
    flex-basis:76px !important;
  }
}
#trfDungeonHost #btnDungeonResume{
  background-image:linear-gradient(180deg, rgba(8,12,18,.20), rgba(8,12,18,.68)), url('menu_art/stage749_expedition_resume.jpeg') !important;
}
#trfDungeonHost #btnDungeonReset{
  background-image:linear-gradient(180deg, rgba(8,12,18,.24), rgba(8,12,18,.72)), url('menu_art/stage749_expedition_reset.jpeg') !important;
}


/* Stage751: online menu scroll + local handover P1/P2 labels */
#title #battlePaneOnline{
  max-height:calc(100dvh - 96px) !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-right:4px;
}
#title #battlePaneOnline .trf-modeCard{
  max-height:none !important;
}
#handover .ho-mid.win,
#handover .ho-mid.lose{
  color:var(--ho-fg) !important;
}
#handover .ho-lane.win-p0 .ho-mid{ color:var(--p0-glow, var(--ho-accent)) !important; }
#handover .ho-lane.win-p1 .ho-mid{ color:var(--p1-glow, var(--ho-danger)) !important; }


/* Stage751b: allow the online battle menu itself to scroll even without AdMob banner class */
#title.trf-title--menu:has(#battlePaneOnline[style*="block"]) #trfTitleFlow{
  max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 56px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
@supports not selector(:has(*)){
  #title.trf-title--menu #battlePaneOnline{
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Stage752: local handover color, count-battle badge spacing, and result-modal arrow hide */
#handover #who.p0c,
#handover #who.trf-handover-p1{
  color:var(--trf-p0, #60a5fa) !important;
  -webkit-text-fill-color:var(--trf-p0, #60a5fa) !important;
  text-shadow:0 0 12px color-mix(in srgb, var(--trf-p0, #60a5fa) 56%, transparent), 0 2px 0 rgba(0,0,0,.55);
}
#handover #who.p1c,
#handover #who.trf-handover-p2{
  color:var(--trf-p1, #f87171) !important;
  -webkit-text-fill-color:var(--trf-p1, #f87171) !important;
  text-shadow:0 0 12px color-mix(in srgb, var(--trf-p1, #f87171) 56%, transparent), 0 2px 0 rgba(0,0,0,.55);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  #handover #who.p0c,
  #handover #who.trf-handover-p1{ text-shadow:0 0 12px rgba(96,165,250,.56), 0 2px 0 rgba(0,0,0,.55); }
  #handover #who.p1c,
  #handover #who.trf-handover-p2{ text-shadow:0 0 12px rgba(248,113,113,.56), 0 2px 0 rgba(0,0,0,.55); }
}
#main .zone .zoneBadge{
  top:34px !important;
  right:10px !important;
  z-index:13 !important;
}
#result[aria-hidden="false"] ~ #trf725HandEdgeNav,
body.modal-open #result:not([aria-hidden="true"]) ~ #trf725HandEdgeNav,
body:has(#result:not([aria-hidden="true"])) #trf725HandEdgeNav{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* Stage753: local round-result handover confirmation note */
#handover .ho-confirm-note{
  margin:2px 0 10px;
  text-align:center;
  font-size:13px;
  line-height:1.35;
  color:rgba(246,250,255,.88);
  text-shadow:0 2px 8px rgba(0,0,0,.72);
}
html[data-lang="en"] #handover .ho-confirm-note{
  font-size:12.5px;
}


/* Stage754: transparent Round/Turn notice for non-local modes; keep local handover modal unchanged */
#trfTurnNotice.trf-turnNotice,
.trf-turnNotice#trfTurnNotice,
#trfTurnNotice.trf-turnNotice.turn,
#trfTurnNotice.trf-turnNotice.round{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
#trfTurnNotice.trf-turnNotice .trf-turnNotice__text,
#trfTurnNotice.trf-turnNotice .trf-turn-notice-title,
#trfTurnNotice.trf-turnNotice .trf-turn-notice-sub{
  text-shadow:
    0 3px 0 rgba(0,0,0,.82),
    0 0 12px rgba(0,0,0,.88),
    0 0 26px rgba(0,0,0,.74),
    0 0 8px rgba(255,255,255,.12) !important;
}


/* Stage756: hide lane WIN/LOSE/DRAW RoundFX while the central Round/Turn popup is being shown. */
body.trf-round-notice-open #rf-layer,
body.trf-round-notice-open .rf-layer{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* Stage757: unify in-match typography with the cinematic battle font. */
:root{
  --trf-font-battle-cinematic:"Cinzel","Trajan Pro","Palatino Linotype","Book Antiqua","Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","MS PMincho",serif;
}
#play,
#play *,
#main,
#main *,
#effPop,
#effPop *,
#eff,
#eff *,
#log,
#log *,
#handover,
#handover *,
#passConfirm,
#passConfirm *,
#resign,
#resign *,
#result,
#result *,
#trfTurnNotice,
#trfTurnNotice *{
  font-family:var(--trf-font-battle-cinematic) !important;
}
#main .cardValue,
#main .zonePower,
#main .zoneOppPower,
#main .zoneBadge,
#main .scoreBox,
#main .turnPill,
#main .btn{
  font-family:var(--trf-font-battle-cinematic) !important;
  font-weight:850;
}
#effPop .trf711-core-bold,
#eff .trf711-core-bold{
  font-weight:950 !important;
}


/* Stage758: finish battle font unification for lane verdict RoundFX and hide hand arrows over settings. */
#rf-layer .rf-mid,
.rf-layer .rf-mid,
#rf-layer .rf-num,
.rf-layer .rf-num{
  font-family:var(--trf-font-battle-cinematic, "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif) !important;
  font-weight:950 !important;
  letter-spacing:.08em !important;
}
#rf-layer .rf-mid,
.rf-layer .rf-mid{
  font-size:24px !important;
  line-height:1 !important;
  text-transform:uppercase;
}
body.trf-settings-open #trf725HandEdgeNav,
body:has(#settingsBackdrop) #trf725HandEdgeNav,
body:has(#settingsModal:not([aria-hidden="true"])) #trf725HandEdgeNav{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* ===== Stage766: face-up-only glow retry from clean Stage758 base =====
   Previous Stage759-765 retries introduced or amplified an inner dark line.
   This retry returns to the clean Stage758 visual base and only normalizes the shared
   effect-card glow layer so face-up-only cards use the same rounded glow as other playable cards.
   - no face-up-only-only inner mask
   - no cardFace::before cover layer
   - no extra dark top overlay
   - outer playable glow line remains on .card itself */
#main #meHand .card.trf-effg-g123:not(.sel):not(.hl) .cardInner,
#main #meHand .card.trf-effg-g456:not(.sel):not(.hl) .cardInner,
#main #meHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardInner,
#main #meHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardInner,
#main #opHand .card.trf-effg-g123:not(.sel):not(.hl) .cardInner,
#main #opHand .card.trf-effg-g456:not(.sel):not(.hl) .cardInner,
#main #opHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardInner,
#main #opHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardInner{
  position:relative !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:transparent !important;
}
#main #meHand .card.trf-effg-g123:not(.sel):not(.hl) .cardFace,
#main #meHand .card.trf-effg-g456:not(.sel):not(.hl) .cardFace,
#main #meHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardFace,
#main #meHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardFace,
#main #opHand .card.trf-effg-g123:not(.sel):not(.hl) .cardFace,
#main #opHand .card.trf-effg-g456:not(.sel):not(.hl) .cardFace,
#main #opHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardFace,
#main #opHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardFace{
  border-radius:12px !important;
  overflow:hidden !important;
  background:transparent !important;
}
#main #meHand .card.trf-effg-g123:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g456:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardInner::after,
#main #meHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardInner::after,
#main #opHand .card.trf-effg-g123:not(.sel):not(.hl) .cardInner::after,
#main #opHand .card.trf-effg-g456:not(.sel):not(.hl) .cardInner::after,
#main #opHand .card.trf-effg-g8910:not(.sel):not(.hl) .cardInner::after,
#main #opHand .card.trf-effg-g111213:not(.sel):not(.hl) .cardInner::after{
  border-radius:12px !important;
  clip-path:inset(0 round 12px) !important;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.20), rgba(230,242,255,.08) 42%, rgba(230,242,255,0) 74%) !important;
  box-shadow:none !important;
}
#main #meHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl)::after,
#main #meHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl)::after,
#main #meHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl)::after,
#main #meHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.trf-effg-g123.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.trf-effg-g456.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.trf-effg-g8910.hintPulse:not(.sel):not(.hl)::after,
#main #opHand .card.trf-effg-g111213.hintPulse:not(.sel):not(.hl)::after{
  border-radius:16px !important;
}
#main #meHand .card.trf-effg-g123 .cardTop,
#main #meHand .card.trf-effg-g456 .cardTop,
#main #meHand .card.trf-effg-g8910 .cardTop,
#main #meHand .card.trf-effg-g111213 .cardTop,
#main #opHand .card.trf-effg-g123 .cardTop,
#main #opHand .card.trf-effg-g456 .cardTop,
#main #opHand .card.trf-effg-g8910 .cardTop,
#main #opHand .card.trf-effg-g111213 .cardTop{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
#main #meHand .card.trf-effg-g123 .cardTop::before,
#main #meHand .card.trf-effg-g456 .cardTop::before,
#main #meHand .card.trf-effg-g8910 .cardTop::before,
#main #meHand .card.trf-effg-g111213 .cardTop::before,
#main #opHand .card.trf-effg-g123 .cardTop::before,
#main #opHand .card.trf-effg-g456 .cardTop::before,
#main #opHand .card.trf-effg-g8910 .cardTop::before,
#main #opHand .card.trf-effg-g111213 .cardTop::before,
#main #meHand .card.trf-effg-g123 .cardTop::after,
#main #meHand .card.trf-effg-g456 .cardTop::after,
#main #meHand .card.trf-effg-g8910 .cardTop::after,
#main #meHand .card.trf-effg-g111213 .cardTop::after,
#main #opHand .card.trf-effg-g123 .cardTop::after,
#main #opHand .card.trf-effg-g456 .cardTop::after,
#main #opHand .card.trf-effg-g8910 .cardTop::after,
#main #opHand .card.trf-effg-g111213 .cardTop::after{
  content:none !important;
  display:none !important;
}

/* Stage766: keep the local handover Continue button centered. */
#handover .modalBody{
  text-align:center !important;
}
#handover #goNext,
#goNext.pill{
  display:block !important;
  margin:12px auto 0 !important;
  align-self:center !important;
}


/* ===== Stage816: face-up-only deletion + existing ring clip =====
   Policy fixed from screenshots:
   - Selected / Engineer effect-pick: no face-up-only geometry or glow override.
     They should use the same route as reversible cards.
   - Neutral unselected: do not draw a new line. Use the existing hintPulse ring and delete
     its lower half by clipping.
   - Delete only the old top-strip / inner-line sources. */

/* Delete old top-strip sources.  No replacement glow is drawn here. */
#main #meHand .card.trf-faceup-only .cardTop,
#main #opHand .card.trf-faceup-only .cardTop{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
#main #meHand .card.trf-faceup-only .cardTop::before,
#main #meHand .card.trf-faceup-only .cardTop::after,
#main #opHand .card.trf-faceup-only .cardTop::before,
#main #opHand .card.trf-faceup-only .cardTop::after,
#main #meHand .card.trf-faceup-only .cardFace::before,
#main #meHand .card.trf-faceup-only .cardFace::after,
#main #opHand .card.trf-faceup-only .cardFace::before,
#main #opHand .card.trf-faceup-only .cardFace::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* Delete residual inner pseudo layers only.  This targets the black inner top line. */
#main .card.trf-faceup-only.sel .cardInner::before,
#main .card.trf-faceup-only.sel .cardInner::after,
#main .card.trf-faceup-only.hl .cardInner::before,
#main .card.trf-faceup-only.hl .cardInner::after,
#main .card.trf-faceup-only.trf-effPick .cardInner::before,
#main .card.trf-faceup-only.trf-effPick .cardInner::after,
body.trf-effect-choice-focus #main .card.trf-faceup-only.trf-effPick .cardInner::before,
body.trf-effect-choice-focus #main .card.trf-faceup-only.trf-effPick .cardInner::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* Neutral unselected only:
   Keep the existing .card.hintPulse::after ring, but delete its lower half.
   This is clipping an existing ring, not drawing a new ring. */
#main #meHand .card.trf-faceup-only.hintPulse:not(.sel):not(.hl):not(.trf-effPick)::after,
#main #opHand .card.trf-faceup-only.hintPulse:not(.sel):not(.hl):not(.trf-effPick)::after{
  clip-path:inset(-16px -16px 50% -16px round 16px 16px 0 0) !important;
}



/* Stage843: result popup backgrounds */
#result .modalBox{
  position:relative;
  overflow:hidden;
  background:#0f141a;
}
#result .modalBox::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:1;
  z-index:0;
}
#result .modalBox::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,12,18,.20) 0%, rgba(7,10,16,.60) 46%, rgba(7,10,16,.86) 100%);
  z-index:1;
}
#result .modalBody{
  position:relative;
  z-index:2;
}
#result.trf-result-bg-win .modalBox{
  border-color:rgba(255,215,120,.62);
  box-shadow:0 0 24px rgba(255,213,106,.18), 0 16px 42px rgba(0,0,0,.46);
}
#result.trf-result-bg-win .modalBox::before{
  background-image:url("img/popup-bg/result_win.png");
}
#result.trf-result-bg-lose .modalBox{
  border-color:rgba(148,176,220,.30);
  box-shadow:0 0 18px rgba(96,126,176,.12), 0 16px 42px rgba(0,0,0,.54);
}
#result.trf-result-bg-lose .modalBox::before{
  background-image:url("img/popup-bg/result_lose.png");
}
#result.trf-result-bg-draw .modalBox{
  border-color:rgba(188,198,212,.28);
  box-shadow:0 16px 42px rgba(0,0,0,.46);
}
#result.trf-result-bg-draw .modalBox::before{
  background-image:linear-gradient(135deg, rgba(32,40,56,.95), rgba(14,18,28,.95));
}
#result .resultTitle,
#result .resultScore{
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}
#result .pill{
  box-shadow:0 4px 18px rgba(0,0,0,.30);
}

/* Stage844: result readability tuning */
#result.trf-result-bg-win .modalBox::after{
  background:linear-gradient(180deg, rgba(8,12,18,.30) 0%, rgba(7,10,16,.72) 48%, rgba(7,10,16,.90) 100%);
}
#result .resultTitle,
#result .resultScore{
  display:inline-block;
  padding:6px 14px;
  border-radius:14px;
  background:rgba(7,10,16,.38);
  text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.75);
}
#result .resultTitle{
  margin-bottom:6px;
}
#result .resultScore{
  border:1px solid rgba(255,255,255,.14);
}


/* ===== Stage847: expedition popup readability + darker playmats ===== */
.trf-dungeon-initialchoice-bg .trf-dungeon-effect-list,
.trf-dungeon-floorbanner-boss .trf-dungeon-effect-list,
.trf-dungeon-floorbanner-normal .trf-dungeon-effect-list{
  background:rgba(5,8,12,.72) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;
  padding:10px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.20) !important;
}
.trf-dungeon-initialchoice-bg .trf-dungeon-effect-item,
.trf-dungeon-floorbanner-boss .trf-dungeon-effect-item,
.trf-dungeon-floorbanner-normal .trf-dungeon-effect-item{
  background:rgba(7,10,16,.94) !important;
  border-color:rgba(255,255,255,.18) !important;
}
.trf-dungeon-initialchoice-bg .trf-dungeon-effect-name,
.trf-dungeon-initialchoice-bg .trf-dungeon-effect-desc,
.trf-dungeon-floorbanner-boss .trf-dungeon-effect-name,
.trf-dungeon-floorbanner-boss .trf-dungeon-effect-desc,
.trf-dungeon-floorbanner-normal .trf-dungeon-effect-name,
.trf-dungeon-floorbanner-normal .trf-dungeon-effect-desc{
  text-shadow:0 2px 10px rgba(0,0,0,.78) !important;
}

/* Stage940/941: keep WIN-lane shake, but suppress unrelated whole-screen placement movement. */
#main.trf-screen-thud{
  -webkit-animation:none !important;
  animation:none !important;
  -webkit-transform:none !important;
  transform:none !important;
}
#trfDungeonModal.trf-dungeon-modal{
  z-index:100010 !important;
}
body:has(#trfDungeonModal[aria-hidden="false"]) #trf725HandEdgeNav,
body:has(.trf-dungeon-sticky-overlay[aria-hidden="false"]) #trf725HandEdgeNav,
body:has(.trf-dungeon-sticky-overlay.trf-dungeon-protected-visible) #trf725HandEdgeNav{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}