:root {
  --board-line: #6b4a25;
  --board-bg: #f0cd84;
  --board-bg2: #e8bf6f;
  --cell: 54px;
  /* 升の縦横比。実物の将棋盤は横30mm×縦33mm で、縦がやや長い。
   *
   * かつては --cell-h をここで calc(var(--cell) * 1.09) として持っていたが、
   * カスタム属性の var() は「書いた要素」の値で解決される。--cell を
   * body:has(#game) 側で上書きしても、:root で組み立てた --cell-h は
   * :root の --cell のままで、盤の横幅だけが縮んで縦は縮まなかった。
   * 比率だけを持ち、掛け算は使う場所でする。 */
  --cell-ratio: 1.09;
  --label: 14px; /* 座標ラベルの幅（できるだけ狭く） */
  --rail-l: 68px; /* 左レール（時計・手番）の幅 */
  --rail-r: 56px; /* 右レール（駒台）の幅 */
  /* ===== 配色（#58）=====
   * サイト全体は暗い側で組む。ロビーもヘルプもすでに暗いので、そちらへ寄せた。
   * 「名人への道」の中だけは、これまでどおり明るいまま残す（下の light-scope）。
   *
   * ここを触るときは、必ず全画面のコントラストを測ること。
   * 文字色だけ／背景だけを変えると、どこかで文字が消える。 */
  color-scheme: dark;
  --accent: #c9553c;
  --accent-2: #a63c28;
  --panel: #1b2028;        /* カード・モーダルの地 */
  --panel-2: #232a33;      /* 一段沈めた地 */
  --panel-3: #2c343e;      /* さらに沈めた地・タグの地 */
  --line: rgba(211, 177, 112, .22);
  --text: #f2ece0;
  --muted: #b7ab98;
  --wood-dark: #d8c39a;    /* 暗い地の上に置く見出し色として使われている */
  --wood: #e6d6b4;
  --radius: 12px;
  --btn-bg: #2f3844;      /* ボタンの地 */
  --btn-text: #f2ece0;    /* ボタンの文字 */
  --shadow: 0 10px 28px rgba(0, 0, 0, .45);
  /* 本文の色。var(--ink, 濃い茶) と書かれた箇所が各所にあり、
     未定義のままだと暗い地に濃い茶が乗って読めなかった（設定の項目が contrast 1.04）。 */
  --ink: #f2ece0;
  /* 朱を「文字」に使うときの色。塗り用の --accent (#c9553c) は
     暗い地の上では 3.3 までしか出ず、数字や段位が沈む。 */
  --accent-ink: #ff9377;
}

/* 「名人への道」の中だけ、これまでの明るい配色に戻す。
 * 育成の画面は .trainee-* が明るい色を直接持っており、
 * そこへ暗いトークンが混ざると読めなくなるため、器ごと明色へ切り替える。 */
#traineeDialog,
#planDialog,
#encounterDialog,
#castEventDialog,
#quizDialog,
#storyVN {
  color-scheme: light;
  --accent: #b5462f;
  --accent-2: #9a3a26;
  --panel: #fffdf8;
  --panel-2: #f4ede0;
  --panel-3: #ebe1cf;
  --line: #e2d7c2;
  --text: #2a2320;
  --muted: #837868;
  --wood-dark: #5a3d20;
  --wood: #3a2b1a;
  --btn-bg: #ece2cf;
  --btn-text: #2a2320;
  --shadow: 0 8px 24px rgba(60, 40, 15, .18);
  --ink: #2b261f;
  --accent-ink: #b5462f;
}

/* 対局中は利用できる幅と高さの両方から盤を最大化する。
   右の段表示ぶん(--label)を残すため、盤と座標が重ならない。

   引く 360px は「盤以外に積み上がる高さ」。iPad横（1194x834）で実測すると
   ヘッダ56＋相手の帯80＋筋ラベルと余白50＋自分の帯80＋操作列42＋余白40 で
   348px あり、230px の見積もりでは 130px はみ出していた。 */
body:has(#game:not(.hidden)) {
  --cell: min(62px, calc((100vw - 350px) / 9), calc((100dvh - 360px) / 9 / 1.09));
}

* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;      /* 横スクロールを禁止 */
  max-width: 100%;
  /* height:100% にすると body がビューポート高さ固定のスクロールコンテナになり、
     実機(iOS/PWA)で下部に死んだ余白が出る。ページは自然にスクロールさせる（min-height だけ確保）。 */
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  /* 地は暗い側。ヘルプ・利用規約のページと同じ方向で揃えている。
     グラデーションの下に単色も敷く。これが無いと、上に載る要素から見て
     背景色が「透明」に見え、明暗の判定ができない。 */
  background:
    radial-gradient(circle at 50% -8%, rgba(120, 77, 29, .30), transparent 40%),
    linear-gradient(160deg, #17120d 0, #0f141a 38%, #0a0d12 100%);
  /* ショートハンドは background-color を打ち消すので、必ずこの順で書く。 */
  background-color: #0a0d12;
  background-attachment: fixed;
  color: var(--text);
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  overscroll-behavior-x: none;  /* 横方向のパン・バウンスを止める */
  touch-action: pan-y;          /* タッチは縦スクロールのみ許可（横パン禁止） */
  min-height: 100dvh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* iPhoneのステータスバー/ダイナミックアイランドに被らないようセーフエリア分だけ上に余白 */
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(22px + env(safe-area-inset-right, 0px)) 10px calc(22px + env(safe-area-inset-left, 0px));
  background: linear-gradient(90deg, #3a2b1a, #4e3820);
  color: #f4e7cf;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  position: sticky; top: 0; z-index: 50;
}
header h1 { font-size: 19px; margin: 0; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
/* 幅が足りないときに削るのは、ロゴの側。右のボタン（ログアウトなど）が
   画面の外へはみ出して押せなくなるほうが困る。 */
header h1 { min-width: 0; overflow: hidden; }
.header-right { flex: 0 0 auto; }
.logo-koma { height: 36px; width: 36px; border-radius: 9px; object-fit: cover; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
/* ブランドロックアップ（将棋サロン ＋ さしてこ） */
.brand { display: flex; flex-direction: column; line-height: 1.02; }
.brand-tag { font-size: 10px; font-weight: 600; letter-spacing: .22em; color: #e0c087; opacity: .92; }
.brand-name { font-size: 21px; font-weight: 800; letter-spacing: .03em; color: #fbeed0; }
.conn { font-size: 12px; opacity: .85; }
.conn.ok { color: #8fe08f; }
.conn.bad { color: #ff9e9e; }

.lobby-user-summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.08;
}
.lobby-user-kicker {
  margin-bottom: 2px;
  color: #d7b76f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}
#lobbyUserName {
  max-width: 210px;
  overflow: hidden;
  color: #fff5df;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lobby-user-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  color: #d9c7a4;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
#lobbyUserRanking { color: #efce7e; }

.header-right { display: flex; align-items: center; gap: 16px; }
.userbox { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.username { font-weight: 700; }
.rating { color: #e7c96b; }
.rating::before { content: "R"; opacity: .7; margin-right: 1px; }
.rank {
  background: linear-gradient(180deg, #8a6a28, #6d4f18); color: #fff;
  font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 10px;
}

/* ヘッダーにポイントとマイページを集約（下のメニューを軽くする） */
.userbox { display: flex; align-items: center; gap: 6px; }
.userbox .points-badge { font-size: 12px; padding: 3px 9px; }
.icon-btn { padding: 4px 8px; font-size: 15px; line-height: 1; }
/* ヘッダーの3操作は補助導線。白い大面積で盤面より目立たせず、茶地になじむ濃色へ寄せる。 */
header .userbox button {
  background: linear-gradient(180deg, rgba(55, 45, 34, .9), rgba(31, 26, 23, .94));
  color: #ead7aa;
  border: 1px solid rgba(219, 178, 92, .42);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .08), 0 2px 5px rgba(0, 0, 0, .28);
}
header .userbox button:hover,
header .userbox button:focus-visible {
  background: linear-gradient(180deg, rgba(77, 60, 40, .96), rgba(43, 33, 27, .98));
  border-color: rgba(235, 194, 103, .68);
}
/* ロビー上部: ナビは等幅グリッドで整列させる */
.lobby-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 8px; }
/* 二次導線は軽いテキストリンクとして見せる */
.sub-links { display: flex; justify-content: center; gap: 14px; margin-bottom: 12px; }
.link-btn { width: auto; background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 700; padding: 4px 2px; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--text); background: none; }
/* ラベルは省略せず2行になってもよい（グリッドなので高さは自動でそろう） */
.lobby-top button.mini2 { width: 100%; padding: 8px 4px; font-size: 12px; white-space: normal; line-height: 1.3; }
/* セクション見出しのロゴ（道場など）— 他のバナーと同じくらいの存在感で見せる */
.section-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 4px; }
.section-head:has(.section-logo) { display: block; text-align: center; }
.section-head:has(.section-logo) h3 { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* 常駐AI 鬼神大五郎 */
.daigoro-card {
  display: flex; gap: 14px; align-items: center;
  background: linear-gradient(135deg, #2e2016, #4a3320);
  color: #f4e7cf; border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.daigoro-portrait {
  width: 86px; height: 86px; object-fit: cover; object-position: top center;
  border-radius: 10px; border: 2px solid #caa24e; flex-shrink: 0;
}
.daigoro-info { flex: 1; min-width: 0; }
.daigoro-name { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.daigoro-tag { font-size: 10px; background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 8px; font-weight: 700; }
.daigoro-sub { font-size: 12px; opacity: .85; margin: 4px 0 9px; }
.daigoro-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.daigoro-actions select { padding: 7px 8px; border-radius: 8px; border: none; font-size: 13px; flex: 1; min-width: 100px; }
.daigoro-actions button { width: auto; flex: 1; min-width: 100px; }

@media (max-width: 820px) {
  .daigoro-card { gap: 12px; padding: 12px; }
  .daigoro-portrait { width: 72px; height: 72px; }
  .daigoro-name { font-size: 16px; }
}

/* 対局中のAI肖像 */
.ai-opponent { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ai-portrait { width: 48px; height: 48px; object-fit: cover; object-position: top center; border-radius: 8px; border: 2px solid #caa24e; }
.ai-opp-name { font-weight: 700; font-size: 15px; }

/* 道場（CPUキャラ・ラダー） */
.dojo-note { font-size: 12px; color: var(--muted); margin: 0 0 10px; line-height: 1.6; }
/* 棋士の並び。以前は横一列に流していたので、細い画面では2枚半しか見えず、
 * 指で横へ払わないと先が読めなかった（「カードが横に動く」）。
 * 折り返して並べ、縦に見ていけるようにする。 */
.char-roster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
  gap: 10px; padding-bottom: 6px;
}
.char-card {
  width: auto; min-width: 0;
  background: var(--panel-2); border-radius: 12px; padding: 8px; text-align: center;
  border: 2px solid transparent; position: relative;
}
.char-card.won { border-color: #caa24e; }
.char-thumb {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center;
  border-radius: 8px; display: block;
}
.char-card.locked .char-thumb { filter: grayscale(.4) brightness(.9); }
.char-name2 { font-size: 13px; font-weight: 700; margin-top: 6px; line-height: 1.3; }
.pub-stats, .pub-skills { font-size: 11px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.pub-skill-mini { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.char-rank2 { font-size: 11px; color: var(--accent-ink); font-weight: 700; }
.char-card .won-badge {
  position: absolute; top: 6px; right: 6px;
  background: #caa24e; color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 8px;
}
.char-card button { width: 100%; margin-top: 7px; padding: 7px; font-size: 13px; }
.char-card button.char-watch-btn { margin-top: 5px; padding: 5px; font-size: 11px; }

/* カード獲得モーダル。ほかのダイアログより前面で、iOSでも常に画面中央へ置く。 */
#cardDialog { align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.card-reward {
  position: relative; text-align: center; width: min(340px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,.48);
}
.card-reward-head { font-size: 20px; font-weight: 800; margin-bottom: 14px; color: var(--accent-ink); letter-spacing: .04em; }
.card-reward .tcg-sparkles { opacity: 1; }
.card-reward .tcg-rays { inset: 0; }

/* === トレーディングカード（ランク別ゴージャス演出） === */
.tcg-card {
  position: relative; width: 236px; max-width: 74vw; margin: 0 auto 4px; padding: 12px 12px 14px;
  border-radius: 16px; box-sizing: border-box;
  /* 既定（D相当）：質素な木枠 */
  --tcg-frame: linear-gradient(160deg, #b9a274, #8f7a4f);
  --tcg-plate: #efe7d4; --tcg-plate-ink: #3a2f1c; --tcg-glow: transparent; --tcg-glow-blur: 0px;
  --tcg-shine: 0; --tcg-rays: 0; --tcg-spark: 0; --tcg-holo: 0;
  background: var(--tcg-frame);
  box-shadow: 0 10px 30px rgba(0,0,0,.32), 0 0 var(--tcg-glow-blur) var(--tcg-glow);
  animation: tcgIn .5s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes tcgIn { from { opacity: 0; transform: scale(.72) rotateY(18deg); } to { opacity: 1; transform: none; } }
.tcg-inner {
  position: relative; z-index: 2; border-radius: 10px; padding: 8px; overflow: hidden;
  background: linear-gradient(180deg, #fffdf8, #f3ecdd);
  border: 1px solid rgba(0,0,0,.12);
}
.tcg-tier {
  position: absolute; z-index: 4; top: 6px; right: 6px; min-width: 30px; padding: 3px 8px;
  border-radius: 8px; font-weight: 900; font-size: 14px; letter-spacing: .03em; color: #fff;
  background: var(--tcg-badge, #8b8577); box-shadow: 0 2px 6px rgba(0,0,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.tcg-imgwrap { position: relative; border-radius: 8px; overflow: hidden; }
.tcg-img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; }
.tcg-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--tcg-shine);
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 62%);
  transform: translateX(-120%); animation: tcgShine 2.6s ease-in-out infinite; animation-delay: .6s;
}
@keyframes tcgShine { 0%,55% { transform: translateX(-120%); } 78%,100% { transform: translateX(120%); } }
.tcg-name { margin-top: 8px; font-size: 17px; font-weight: 800; color: var(--tcg-plate-ink); }
.tcg-sub { font-size: 12px; color: #6b5d3f; margin-top: 2px; min-height: 15px; }
/* 後光（放射光） */
.tcg-rays {
  position: absolute; z-index: 0; inset: -40% -40%; border-radius: 50%; opacity: var(--tcg-rays);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.55) 0deg 6deg, transparent 6deg 16deg);
  filter: blur(1px); animation: tcgSpin 14s linear infinite; pointer-events: none; /* ボタンのクリックを奪わない */
}
@keyframes tcgSpin { to { transform: rotate(360deg); } }
/* きらめき */
.tcg-sparkles { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--tcg-spark); }
.tcg-sparkles i {
  position: absolute; width: 10px; height: 10px; background:
    radial-gradient(circle, #fff 0 18%, transparent 22%),
    linear-gradient(#fff,#fff) center/2px 100% no-repeat,
    linear-gradient(#fff,#fff) center/100% 2px no-repeat;
  filter: drop-shadow(0 0 4px #fff); animation: tcgTwinkle 1.8s ease-in-out infinite;
}
.tcg-sparkles i:nth-child(1){left:6%;top:12%;animation-delay:0s}
.tcg-sparkles i:nth-child(2){left:88%;top:20%;animation-delay:.3s}
.tcg-sparkles i:nth-child(3){left:14%;top:74%;animation-delay:.6s}
.tcg-sparkles i:nth-child(4){left:80%;top:66%;animation-delay:.9s;width:14px;height:14px}
.tcg-sparkles i:nth-child(5){left:46%;top:6%;animation-delay:1.2s}
.tcg-sparkles i:nth-child(6){left:60%;top:90%;animation-delay:1.5s}
@keyframes tcgTwinkle { 0%,100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
/* ホロ（虹色メタリック枠の流れ） */
.tcg-card.holo::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; z-index: 1; pointer-events: none;
  opacity: var(--tcg-holo);
  background: linear-gradient(115deg,#ff5f6d,#ffc371,#7afcff,#c56bff,#ff5f6d); background-size: 300% 300%;
  mix-blend-mode: overlay; animation: tcgHolo 4s linear infinite;
}
@keyframes tcgHolo { to { background-position: 300% 0; } }

/* --- ランク別テーマ --- */
.tcg-t-C { --tcg-frame: linear-gradient(160deg,#8ea3bd,#5f7590); --tcg-badge:#6a7f9c; --tcg-glow: rgba(120,150,190,.5); --tcg-glow-blur: 14px; }
.tcg-t-B { --tcg-frame: linear-gradient(160deg,#6ecb93,#3f9d6b); --tcg-badge:#4f9d6b; --tcg-glow: rgba(70,190,120,.55); --tcg-glow-blur: 18px; --tcg-shine:.7; }
.tcg-t-A { --tcg-frame: linear-gradient(160deg,#f0d27a,#c9942f); --tcg-badge:#c9942f; --tcg-glow: rgba(220,170,60,.6); --tcg-glow-blur: 24px; --tcg-shine:1; }
.tcg-t-S { --tcg-frame: linear-gradient(160deg,#ff8a6b,#b5462f); --tcg-badge:#b5462f; --tcg-glow: rgba(230,90,50,.62); --tcg-glow-blur: 30px; --tcg-shine:1; --tcg-rays:.28; --tcg-spark:.9; }
.tcg-t-Sp { --tcg-frame: linear-gradient(160deg,#c98be0,#7d2fb0); --tcg-badge:#9c3fb5; --tcg-glow: rgba(160,60,200,.66); --tcg-glow-blur: 34px; --tcg-shine:1; --tcg-rays:.36; --tcg-spark:1; --tcg-holo:.5; }
.tcg-t-Sp2 { --tcg-frame: linear-gradient(160deg,#ff7ac4,#c0308a,#f0d27a); --tcg-badge:#c0308a; --tcg-glow: rgba(220,60,150,.7); --tcg-glow-blur: 40px; --tcg-shine:1; --tcg-rays:.5; --tcg-spark:1; --tcg-holo:.7; }
.tcg-t-Sp3 {
  --tcg-frame: linear-gradient(115deg,#ff5f6d,#ffc371,#7afcff,#c56bff,#ff5f6d); --tcg-badge:#d4af37;
  --tcg-glow: rgba(255,210,90,.85); --tcg-glow-blur: 52px; --tcg-shine:1; --tcg-rays:.72; --tcg-spark:1; --tcg-holo:1;
  background-size: 300% 300%;
}
/* 登場アニメは獲得画面のカード専用。図鑑のカード(.collect-card)にも
 * このクラスが付くため、以前は S+++ だけ縮んで歪んだまま表示されていた。 */
.tcg-card.tcg-t-Sp3 { animation: tcgIn .5s cubic-bezier(.2,1.3,.4,1) both, tcgHolo 3.4s linear infinite .5s; }
.tcg-t-Sp3 .tcg-tier { background: linear-gradient(115deg,#ff5f6d,#ffc371,#7afcff,#c56bff); background-size:300% 300%; animation: tcgHolo 3.4s linear infinite; }
.tcg-t-Sp2 .tcg-tier, .tcg-t-Sp .tcg-tier { box-shadow: 0 0 10px currentColor, 0 2px 6px rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) {
  .tcg-card, .tcg-shine, .tcg-rays, .tcg-sparkles i, .tcg-card.holo::before, .tcg-t-Sp3,
  .collect-card.won::before, .collect-card.won::after { animation: none !important; }
  .tcg-shine { opacity: 0; }
  /* 動きを抑える設定でも、獲得したことが分かる静的なきらめきは残す。 */
  #cardDialog .tcg-sparkles i { opacity: 1; transform: rotate(45deg); }
}
.card-reward-img { width: 180px; max-width: 60vw; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; border: 3px solid #caa24e; }
.card-reward-name { font-size: 18px; font-weight: 700; margin: 12px 0; }

/* 棋士カードのプロフィール */
/* 後段の .modal-card.profile-card { text-align: left } と同じ詳細度だと後勝ちで負け、
 * 画像だけ中央・名前や二つ名は左寄せというちぐはぐな見た目になっていた。
 * 3クラス指定にして、記述順に関係なくこちらを効かせる。 */
.modal-card.profile-card.char-profile-card { text-align: center; }
/* キャラ個別表示は獲得時の .tcg-card をそのまま使い、枠・後光・きらめきを再現する。
 * ただし絵は切り抜かない。獲得カードは 3:4 に cover で切るが、ここは人物を
 * 見に来る画面なので、縦横比の違う立ち絵でも全身が入るようにする。 */
/* 後光は既定でカードの外へ 40% 広がる。獲得画面（.card-reward）では内側に
   収めてあるが、こちらは外に出たままで、画面の幅を押し広げていた。 */
.cp-card { margin: 0 auto 4px; }
.cp-card .tcg-rays { inset: 0; }
.cp-card .tcg-img {
  aspect-ratio: auto; height: auto; object-fit: contain; object-position: center;
  max-height: min(46dvh, 460px); background: #f3ead7;
}
.cp-name { font-size: 20px; font-weight: 700; margin-top: 12px; }
.cp-nickname { font-size: 14px; color: var(--accent-ink); font-weight: 700; margin-top: 2px; }
.cp-meta { font-size: 13px; color: var(--muted); margin-top: 8px; }
.cp-quote { font-size: 14px; color: var(--wood-dark); margin-top: 12px; font-style: italic; line-height: 1.6; }
.cp-story { font-size: 13px; color: var(--ink, #3a2f1c); margin-top: 12px; line-height: 1.75; text-align: left; padding: 10px 12px; background: rgba(0,0,0,.04); border-radius: 10px; }
.cp-story.hidden { display: none; }

/* マイページの獲得カード一覧 */
/* 図鑑の一覧は所持の把握が目的。ここでは動かさず、静かに並べる。
 * きらめきはカードを1枚開いたときに見せる（.tcg-card を使った個別表示）。 */
.card-collection { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.collect-card { background: var(--panel-2); border-radius: 10px; padding: 6px; text-align: center; border: 2px solid transparent; }
.collect-card.won { border-color: #caa24e; cursor: pointer; position: relative; }
.collect-card.locked { opacity: .55; }
/* ランク別：高レアほど枠が輝く */
.collect-card.won { border-image: var(--tcg-frame, none) 1; box-shadow: 0 0 var(--tcg-glow-blur, 0) var(--tcg-glow, transparent); }
.collect-card.tcg-t-Sp3.won, .collect-card.tcg-t-Sp2.won, .collect-card.tcg-t-Sp.won { border-width: 2px; }
.collect-tier { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 1px 6px; border-radius: 6px;
  font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.collect-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: 8px; }
.collect-card.locked .collect-thumb { filter: grayscale(1) brightness(.85); }
.collect-name { font-size: 11px; font-weight: 700; margin-top: 4px; line-height: 1.2; }
.collect-locked-label { font-size: 10px; color: var(--muted); }

/* 振り駒 */
.furigoma-card { text-align: center; }
.furigoma-head { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--wood-dark); }
.furigoma-pieces { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; min-height: 56px; }
.furigoma-piece { height: 52px; width: auto; animation: furidrop .45s ease both; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
@keyframes furidrop { from { transform: translateY(-26px) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
.furigoma-result { font-size: 17px; font-weight: 700; min-height: 24px; }

/* 設定 */
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; font-size: 15px; border-bottom: 1px solid var(--line); }
.setting-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
/* 設定の項目に添える一行の補足 */
.setting-sub-note { margin: 6px 4px 10px; font-size: 13px; }

/* ログイン直後のお知らせ窓。本文を読ませるのが目的なので、
   トップの帯と違って畳まず、暗い下地に明るい文字で組む。 */
/* .modal-card は後ろの行で text-align:center を指定している。
   同じ詳細度だと後勝ちで負けるので、2クラス指定で上書きする。 */
.modal-card.announce-dialog-card {
  width: min(520px, calc(100vw - 20px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  /* 既定の左右32pxは、この幅だと見出しが入る余地を削るだけなので詰める。 */
  padding: 20px 14px 18px;
  text-align: left;
}
.announce-dialog-list .announce-card { padding: 10px 12px; }
.modal-close.announce-dialog-close {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 44px;
}
.announce-dialog-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
/* 見出しは折り返さずに1行で入れたい。badge と日付に挟まれると幅が足りず
   「テスト公開／中！」のように途中で切れていたので、見出しだけ独立した行にする。
   それでも足りないときは字を詰める（下限13px）。 */
.announce-dialog-list .announce-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "badge date"
    "title title";
  align-items: center;
  gap: 4px 8px;
}
.announce-dialog-list .announce-badge { grid-area: badge; justify-self: start; }
.announce-dialog-list .announce-date { grid-area: date; justify-self: end; }
.announce-dialog-list .announce-title {
  grid-area: title;
  min-width: 0;
  font-size: clamp(13px, 4.2vw, 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 本文も左揃え。中央寄せだと行頭が揃わず、複数行になった途端に読みにくい。 */
.announce-dialog-list .announce-body { text-align: left; }
.announce-dialog-ok { width: 100%; min-height: 52px; font-size: 17px; }

/* 通信量（#29）。数字が並ぶので桁を揃える。 */
.data-usage { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 11px; }
.data-usage > summary { padding: 12px 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
.data-usage[open] > summary { border-bottom: 1px solid var(--line); }
.data-usage > *:not(summary) { margin-left: 14px; margin-right: 14px; }
.data-usage-box { padding-bottom: 6px; }
.data-usage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
}
.data-usage-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-usage-row.is-used { border-bottom: 1px solid var(--line); font-weight: 700; }
.data-usage-row.is-total { border-top: 1px solid var(--line); font-weight: 700; }
.data-usage-note { margin: 8px 0 0; font-size: 13px; }

/* ランキング */
.ranking-title { margin: 0 0 14px; font-size: 18px; }
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.rank-row:last-child { border-bottom: none; }
.rank-row.me { background: rgba(181,70,47,.08); border-radius: 6px; }
.rank-no { width: 28px; text-align: center; font-weight: 700; color: var(--muted); }
.rank-no.top { color: var(--accent-ink); }
.rank-name { flex: 1; font-weight: 600; cursor: pointer; }
.rank-dan {
  background: linear-gradient(180deg, #8a6a28, #6d4f18); color: #fff;
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; min-width: 40px; text-align: center;
}
.rank-rating { color: #b58a2f; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.rank-rating::before { content: "R"; opacity: .6; font-size: 11px; }
.rank-wl { color: var(--muted); font-size: 12px; min-width: 70px; text-align: right; }

/* 認証タブ */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.auth-tab {
  flex: 1; background: #efe7d8; color: var(--muted);
  border-radius: 8px; padding: 10px;
}
.auth-tab.active { background: var(--accent); color: #fff; }
.auth-error { color: var(--accent-ink); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.auth-forgot { margin: 6px 0 0; text-align: right; }
.auth-forgot a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 4px 2px;
  color: var(--accent-ink);
  font-size: 13px;
  text-decoration: none;
}
.auth-forgot a:hover { text-decoration: underline; }

.guest-dojo-entry { margin-top: 18px; text-align: center; }
.guest-dojo-entry p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.guest-dojo-entry .guest-dojo-caution { margin-top: 2px; font-weight: 700; }
.guest-dojo-btn {
  width: 100%; min-height: 54px; border: 1px solid #b68a3a;
  background: linear-gradient(180deg, #f8e7bd, #e3bd68); color: #34230f;
  font-size: 18px; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.guest-dojo-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 0 10px; padding: 12px 14px; border: 1px solid rgba(223,186,116,.45);
  border-radius: 14px; background: rgba(92,58,24,.88); color: #fff7e7;
}
.guest-dojo-notice > div { display: grid; gap: 3px; }
.guest-dojo-notice b { font-size: 18px; }
.guest-dojo-notice span { font-size: 13px; line-height: 1.45; }
.guest-dojo-notice button { flex: 0 0 auto; background: #f4e4c2; color: #332410; font-weight: 700; }

/* 非会員は道場の端末内CPU対局だけ。ほかのロビー機能はDOMに残したまま非表示にする。 */
body.guest-dojo-mode #lobby .home-lobby > *:not(.site-logo-row):not(#guestDojoNotice):not(#dojoPanel) { display: none !important; }
body.guest-dojo-mode #dojoPanel .dojo-service-grid { display: none !important; }
/* ゲストには設定（⚙）だけ出す。音のオン/オフは設定にしか無いので、
   ここを閉じるとゲストは音を止められなくなる。会員向けの項目は隠す。 */
body.guest-dojo-mode #userBox > *:not(#settingsBtn) { display: none !important; }
/* ★ゲストの道場が下まで見られなかった（2026-08-04）。
   会員の道場は全画面の板（position:fixed・overflow-y:auto）なので自分で巻ける。
   ゲストはそれを解いてロビーの中に置き直しているが、ロビーの札は overflow:hidden
   なので、はみ出した分がそのまま切れて手が届かなかった（実測：4人目の札が
   画面の下 4px にいた）。ゲストのときは札のほうを巻けるようにする。 */
body.guest-dojo-mode #lobby .home-lobby { overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.guest-dojo-mode #dojoPanel > .section-sub { margin-top: 4px; }
body.guest-dojo-mode #dojoPanel[open] { position: static; inset: auto; width: auto; max-height: none; overflow: visible; box-shadow: none; }
body.guest-dojo-mode #dojoPanel[open] > summary { display: none; }
body.guest-dojo-mode #dojoPanel[open] > :not(summary) { animation: none; }

@media (max-width: 600px) {
  .guest-dojo-notice { align-items: stretch; flex-direction: column; }
  .guest-dojo-notice button { width: 100%; min-height: 44px; }
}
/* アカウント設定（マイページ） */
.account-settings { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.account-field { display: flex; flex-direction: column; gap: 5px; }
.account-label { font-size: 12px; color: var(--muted); }
.account-field input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.account-settings button { align-self: flex-start; }
.account-note { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 2px 0 0; }
.trainee-abilities-note { font-size: 11px; color: var(--muted); line-height: 1.7; margin: 4px 0 8px; padding: 8px 10px; background: rgba(0,0,0,0.03); border-radius: 8px; }
.trainee-abilities-note b { color: var(--text); }
/* 白文字を朱の地に置くと 4.33。取り返しのつかない操作なので、はっきり読めるようにする。 */
button.danger { background: var(--accent-2); color: #fff; }
button.danger:hover { background: #8c3220; }

/* 入力欄は、地と文字を必ず対で持たせる。
 * 地を書かずに置くとブラウザ既定の白になり、そこへ明るい文字が乗って消える。
 * 管理者コンソールの研究対局で、エンジンと強さの選択欄が真っ白になっていた。
 * つまみ類（チェック・ラジオ・スライダー・色）は地を塗ると形が壊れるので外す。 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* 一覧の選択肢は、端末によっては地を継がないので明示する。 */
select option { background: var(--panel-2); color: var(--text); }

.hidden { display: none !important; }

/* ---------- ロビー ---------- */
.lobby {
  display: flex;
  justify-content: center;
  /* 下部の余白は端末のセーフエリア分だけ（固定バージョン表記のぶん少し足す）。過剰な余白を出さない */
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.lobby-card {
  background: var(--panel);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 34px rgba(60,40,15,.18);
  border: 1px solid rgba(200,175,125,.35);
}
.lobby-card label { display: block; font-size: 14px; margin-bottom: 18px; color: var(--muted); }
.lobby-card input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
}
.lobby-actions { margin-bottom: 16px; }
.lobby-join { display: flex; gap: 8px; }
.lobby-join input { text-transform: uppercase; }
.hint { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 18px; }

.lobby-card.wide { max-width: 560px; }
.lobby-section { margin-bottom: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-head h3 { font-size: 15px; margin: 0; }
.count-badge {
  display: inline-block; min-width: 20px; padding: 1px 6px;
  background: var(--panel-3); border-radius: 10px; font-size: 12px; text-align: center; color: var(--muted);
}
button.small { width: auto; padding: 7px 12px; font-size: 13px; }
button.mini2 { padding: 5px 12px; font-size: 13px; }

.player-list { display: flex; flex-direction: column; gap: 8px; }
.empty-note { font-size: 13px; color: var(--muted); margin: 4px 0; }
.section-sub { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
/* 勝敗の結果画面（豪華フレーム） */
.result-frame-wrap { position: relative; width: 92vw; max-width: 560px; aspect-ratio: 1420 / 1064; display: flex; align-items: center; justify-content: center;
  animation: resultPop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes resultPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.result-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* 結果画面は盤を強めに暗くして目立たせる（薄いと盤が透けて「邪魔」になる） */
#resultOverlay { background: rgba(0,0,0,.72); }
.result-inner { position: relative; z-index: 2; text-align: center; width: 64%; max-height: 60%; overflow: hidden; padding: 10px 14px; border-radius: 14px; background: radial-gradient(ellipse at center, rgba(20,14,30,.72), rgba(20,14,30,.5)); }
.result-title { font-size: 28px; font-weight: 900; letter-spacing: .05em; text-shadow: 0 2px 8px rgba(0,0,0,.5); line-height: 1.1; }
.result-title.win { color: #ffe08a; }
.result-title.loss { color: #ff9a9a; }
.result-title.draw { color: #fff; }
.result-sub { font-size: 13px; color: #fff; margin-top: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.6); line-height: 1.4; }
.result-ok { margin-top: 10px; padding: 9px 20px; }
/* 観戦の評価値バー（育成キャラ視点：良ければ＋緑／悪ければ−赤） */
.eval-wrap { margin: 2px auto 6px; width: 100%; max-width: 520px; }
.eval-wrap.hidden { display: none; }
.eval-legend { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; margin-bottom: 2px; }
.eval-lg-good { color: #3f9d6b; }
.eval-lg-bad { color: #b5462f; }
.eval-bar { position: relative; height: 22px; border-radius: 6px; overflow: hidden; width: 100%;
  background: #b5462f; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.eval-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: #3f9d6b; transition: width .35s ease; }
.eval-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); z-index: 2; }
.char-card.zako { background: rgba(120,180,220,.10); }
.char-card.zako .zako-tier { background: transparent; font-size: 16px; }
/* 他の人が公開している育成棋士。既存キャラと見分けがつくよう縁の色を変える */
.char-card.pub { border-color: #7aa7d8; }
.char-card.pub .pub-tier { background: transparent; font-size: 16px; }
.player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--panel-2); border-radius: 8px;
}
.player-row .pname {
  min-width: 0;
  font-weight: 700;
}
.player-row .rank-dan,
.player-row .prating { flex: 0 0 auto; white-space: nowrap; }
.player-row .prating { color: #b58a2f; font-size: 13px; }
.player-row .prating::before { content: "R"; opacity: .6; }
.player-row .pstatus {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 12px; padding: 2px 8px; border-radius: 10px;
}
.pstatus.idle { background: #d7efd7; color: #2f7a3a; }
.pstatus.playing { background: #ead8d4; color: var(--accent-ink); }
.player-row .spacer { flex: 1; }
.player-row.self { opacity: .7; }
.you-tag { font-size: 11px; color: var(--muted); }

.room-id-box {
  margin-top: 8px; padding: 12px; background: var(--panel-2); border-radius: 8px;
}
.room-id-box summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.room-id-box .lobby-actions { margin-top: 12px; }
.ai-setup { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ai-setup label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }
.ai-setup select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--panel-2); min-width: 160px; }
/* 暗い地の上に置くので、地色そのままの accent では沈む。明るい側の朱にする。 */
/* 手番の札（.turn-flag）の中に入ることがある。どちらの地でも読める明るさにする。 */
.ai-thinking { color: #ffb199; font-weight: 700; }
.seekBtn.active { background: var(--muted); }

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  /* ボタンの地もトークンで塗る。地だけ明るいまま文字色が明るくなると、
     成り確認の「成らない」のように文字が消える（実際に起きた）。 */
  background: var(--btn-bg);
  color: var(--btn-text);
  transition: filter .15s;
  white-space: nowrap; /* ボタン内テキストを不自然に折り返さない */
}
button {
  background: var(--btn-bg);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
button:hover { filter: brightness(.96); }
button:active { transform: translateY(1px); }
button.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #fff; width: 100%; }
/* 横並びの行の中では primary ボタンを幅いっぱいに広げない
   （広がると隣のテキストが潰れて1文字ずつ縦に折り返してしまう） */
.mission-row button, .story-chapter button, .shop-row button, .watch-row button,
.player-row button, .rival-card button, .skill-card button, .item-card button,
.pub-card button, .hof-acts button, .trainee-style button {
  width: auto; flex-shrink: 0;
}
button.ghost { background: transparent; border: 1px solid var(--line); color: var(--btn-text); box-shadow: none; }
button.mini { padding: 3px 9px; font-size: 12px; box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- 対局レイアウト ---------- */
.game {
  display: grid;
  grid-template-columns: auto 280px;
  gap: 22px;
  padding: 22px;
  justify-content: center;
  align-items: start;
}
.side { display: flex; flex-direction: column; gap: 16px; }

.info-panel { display: flex; flex-direction: column; gap: 14px; }

/* 盤まわりの配置：盤は横いっぱいに大きく。奥(相手)/手前(自分)の帯で
   左＝時計・手番／右＝駒台 を表示（盤は縮めない） */
.board-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  gap: 6px;
}
/* .board-area は order で並べる。order 未指定の子は既定値0で先頭に出てしまうので、
   新しく子要素を足すときは必ず order を付けること（評価バーは意図的に0＝盤の上）。 */
/* 筋数字は盤の外（上）に出るので、そのぶん盤を下げる。
   詰めると相手の名前・持ち駒・立ち絵に数字が重なる。
   背の低い画面では縦に余裕がないので、確保する隙間を抑える。 */
.board-area .board-frame { order: 2; margin-top: clamp(12px, 2.6dvh, 22px); }
.bar-far  { order: 1; }
.bar-near { order: 3; }
.trainee-condition-battle-alert { order: 3; }
.board-area .controls { order: 4; justify-self: center; margin-top: 6px; }
.movable-pieces { display: none; } /* 中身はJSがnear/far帯へ移動 */

/* 情報帯：盤幅いっぱい。左＝時間/手番、右＝駒台 */
.info-bar {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
}
.bar-far { align-items: flex-start; flex-wrap: wrap; }
.bar-far:has(.opponent-technique-badge:not(.hidden)) {
  flex-wrap: nowrap;
  gap: 4px;
}
.bar-far:has(.opponent-technique-badge:not(.hidden)) .opp-info {
  min-width: 0;
  padding-inline: 2px;
  justify-content: flex-start;
}
.bar-far:has(.opponent-technique-badge:not(.hidden)) .bar-left,
.bar-far:has(.opponent-technique-badge:not(.hidden)) .bar-right {
  min-width: 0;
}
/* 奥帯の中央: 相手の画像・名前・段位・戦績（余裕があるとき表示） */
.bar-far .bar-left, .bar-far .bar-right { flex: 0 0 auto; }
.opp-info { flex: 1 1 auto; min-width: 5em; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; overflow: hidden; }
.opp-info:not(.has-info) { display: none; }
.opp-avatar { width: 50px; height: 64px; border-radius: 8px; object-fit: cover; object-position: top center; border: 1.5px solid var(--board-line); flex-shrink: 0; }
.opp-avatar-ph { display: grid; place-items: center; background: var(--panel-3); color: var(--wood-dark); font-weight: 800; font-size: 16px; }
.opp-text { min-width: 0; flex: 1 1 auto; overflow: hidden; text-align: left; }
/* 棋士名は折り返さない。2行に割れると「深沼／誠一」のように姓と名が分かれて読みにくい。
   入りきらないときは末尾を詰める。 */
.opp-name {
  display: -webkit-box;
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.opp-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-technique-badge {
  --tech-color: #ff6f59;
  position: absolute; z-index: 18; left: 50%; width: min(88%, 430px);
  box-sizing: border-box; pointer-events: none; transform: translateX(-50%);
  margin: 0; padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--tech-color) 48%, rgba(255,255,255,.38));
  border-radius: 10px;
  /* 駒の上へ重ねる状態表示なので、色は札の識別にだけ使い、盤面を隠さない。 */
  background: color-mix(in srgb, var(--tech-color) 14%, rgba(8,10,16,.34));
  color: rgba(255,248,232,.9); font-size: clamp(12px, 3vw, 14px); font-weight: 900;
  line-height: 1.25; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  box-shadow: 0 0 9px color-mix(in srgb, var(--tech-color) 28%, transparent);
  backdrop-filter: blur(1px);
}
.technique-effect-label { position: relative; z-index: 1; display: block; min-width: 0; }
.technique-effect-card-art {
  position: absolute; z-index: 0; width: clamp(44px, 13vw, 64px); aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center; border-radius: 7px; opacity: .36;
  /* screen合成は絵柄の暗部を飛ばして判別しづらいため、元絵の階調を残す。 */
  filter: saturate(.95) contrast(1.08) brightness(.94); mix-blend-mode: normal;
  border: 1px solid color-mix(in srgb, var(--tech-color) 48%, transparent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--tech-color) 32%, transparent);
}
.opponent-technique-badge {
  --tech-color: #ff6f59;
  position: relative; z-index: 6; flex: 0 0 clamp(98px, 27vw, 126px); min-width: 0;
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 5px;
  box-sizing: border-box; margin: 0; padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--tech-color) 62%, rgba(255,255,255,.28));
  border-radius: 9px; pointer-events: none;
  background: color-mix(in srgb, var(--tech-color) 17%, rgba(8,10,16,.82));
  color: #fff7e7; box-shadow: 0 0 10px color-mix(in srgb, var(--tech-color) 36%, transparent);
  animation: opponentTechniquePulse .8s ease-in-out infinite;
}
.opponent-technique-badge .technique-effect-card-art {
  position: static; display: block; width: 36px; height: 48px; aspect-ratio: auto; opacity: .82;
  border-radius: 5px; filter: saturate(1.08) contrast(1.04); box-shadow: 0 0 7px color-mix(in srgb, var(--tech-color) 48%, transparent);
}
.technique-effect-card-shell { position: relative; display: block; flex: 0 0 auto; }
.opponent-technique-badge .technique-effect-label {
  color: #fff7e7; font-size: 10px; font-weight: 900; line-height: 1.14; text-align: left;
  white-space: pre-line; overflow-wrap: anywhere; text-shadow: 0 1px 3px #000;
}
.player-technique-badge {
  bottom: 10px;
  animation: playerTechniqueBadgePulse 1.15s ease-in-out infinite;
}
@keyframes opponentTechniquePulse {
  50% { filter: brightness(1.12); box-shadow: 0 0 13px color-mix(in srgb, var(--tech-color) 38%, transparent); }
}
@keyframes playerTechniqueBadgePulse {
  50% { filter: brightness(1.1); box-shadow: 0 0 12px color-mix(in srgb, var(--tech-color) 36%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .opponent-technique-badge, .player-technique-badge, .active-technique-control-art,
  .active-technique-card-shell::before, .active-technique-card-shell::after,
  .active-technique-card-shell.rarity-ur, .technique-effect-card-shell.rarity-ur,
  .technique-card-choice.rarity-ssr.is-selected, .technique-card-choice.rarity-ur.is-selected { animation: none; }
}
/* 幅が本当に狭いときは相手情報を隠して駒台/時計を優先 */
@media (max-width: 360px) { .opp-info { display: none; } }
.bar-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-left { flex: 0 1 auto; flex-wrap: wrap; }
.bar-right { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.bar-near .bar-left { align-items: flex-start; }
/* 手前の育成キャラは右の駒台のすぐ隣に固定する。中央の可変幅に置くと再描画のたびに位置が揺れる。 */
.bar-near .opp-info { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; padding-right: 0; }
.bar-near .bar-right { flex: 0 0 auto; }
.trainee-condition-battle-alert {
  box-sizing: border-box; width: 100%; margin: -1px 0 0; padding: 5px 10px;
  border: 1px solid transparent; border-radius: 9px;
  font-size: clamp(11px, 2.9vw, 13px); font-weight: 900; line-height: 1.3; text-align: center;
}
.trainee-condition-battle-alert.is-low {
  color: #ffe8df; border-color: rgba(255,129,95,.72);
  background: linear-gradient(90deg, rgba(116,35,30,.9), rgba(163,61,42,.9));
  box-shadow: 0 0 9px rgba(212,75,49,.3);
}
.trainee-condition-battle-alert.is-high {
  color: #fff5c9; border-color: rgba(247,206,91,.76);
  background: linear-gradient(90deg, rgba(38,105,66,.92), rgba(158,116,25,.9));
  box-shadow: 0 0 10px rgba(215,173,48,.34);
}
/* 時計が無いモードでは時計を隠す */
.board-area.no-clock .clock-item { display: none; }

/* 手番の強調 */
.turn-flag {
  padding: 6px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 800; text-align: center; line-height: 1.25;
  white-space: pre-line;
}
.turn-flag.mine {
  /* 暗い地の上に薄い緑を敷いているので、文字も明るい緑にする。 */
  background: rgba(88,150,90,.22); color: #7fd98d;
  box-shadow: 0 0 0 2px rgba(88,150,90,.35) inset;
  animation: turn-pulse 1.4s ease-in-out infinite;
}
.turn-flag.theirs { background: var(--panel-2); color: var(--muted); }
@keyframes turn-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(88,150,90,.35) inset; }
  50%      { box-shadow: 0 0 0 2px rgba(88,150,90,.85) inset, 0 0 14px rgba(88,150,90,.4); }
}

.roombox {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.8;
  box-shadow: var(--shadow);
}
.room-line { display: flex; align-items: center; gap: 8px; }
.roombox b { letter-spacing: 3px; font-size: 16px; color: var(--wood-dark); }
.seat { font-weight: bold; color: var(--accent-ink); margin-top: 4px; }
.status { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ---------- 盤 ---------- */
.boardwrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* 盤の座標ラベル（上=筋の数字・右=段の漢数字）。
   座標のぶん盤を削ると、指で触る升が小さくなる。盤を優先し、座標は盤の上へ重ねる
   （ぴよ将棋と同じ考え方）。升の隅に小さく置くので、駒とはほとんど重ならない。 */
.board-frame {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  position: relative; /* 演出レイヤーと座標の基準 */
}
/* 約100局に1回の大五郎群予告。盤の右外から左外へ、白い大五郎が一斉に駆け抜ける。
   盤や駒のクリック判定は奪わず、演出終了後にDOMごと外す。 */
.daigoro-school-omen {
  position: absolute; inset: 0; z-index: 28; overflow: hidden;
  pointer-events: none; border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,211,69,0), rgba(255,232,133,.1) 48%, rgba(255,211,69,0));
  box-shadow: inset 0 0 34px rgba(255,208,64,.32), 0 0 24px rgba(255,192,48,.38);
}
.daigoro-school-omen img {
  position: absolute; left: 108%; top: calc(3% + var(--dog-row) * 18%);
  width: clamp(76px, 24%, 126px); height: auto;
  opacity: 0; transform: translateX(0) scale(var(--dog-scale));
  filter: drop-shadow(0 0 4px rgba(255,247,199,.95)) drop-shadow(0 4px 4px rgba(63,35,3,.38));
  will-change: transform, opacity;
}
.daigoro-school-omen.is-running img {
  animation: daigoroSchoolRun 1.62s cubic-bezier(.22,.66,.38,1) var(--dog-delay) forwards;
}
.daigoro-school-title {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.8); opacity: 0;
  width: 88%; padding: 8px 10px; border-radius: 999px;
  color: #fff8cf; background: rgba(92,28,5,.78);
  border: 2px solid #ffe17c; text-align: center;
  font-size: clamp(17px, 5vw, 28px); font-weight: 1000; letter-spacing: .08em;
  text-shadow: 0 2px 3px #4d1400, 0 0 12px #ff9f22;
  box-shadow: 0 0 24px rgba(255,190,51,.82), inset 0 0 10px rgba(255,228,135,.38);
}
.daigoro-school-omen.is-running .daigoro-school-title {
  animation: daigoroSchoolTitle 2.15s ease-out .12s forwards;
}
@keyframes daigoroSchoolRun {
  0% { opacity: 0; transform: translateX(0) scale(var(--dog-scale)); }
  10%, 78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(-118% - var(--board-size, 560px))) scale(var(--dog-scale)); }
}
@keyframes daigoroSchoolTitle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  18%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .daigoro-school-omen.is-running img { animation: none; opacity: .9; left: auto; right: calc(var(--dog-row) * 12% - 8%); }
  .daigoro-school-omen.is-running .daigoro-school-title { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}
body.no-anim .daigoro-school-omen img { animation: none !important; opacity: .72; left: auto; right: calc(var(--dog-row) * 12% - 8%); }
body.no-anim .daigoro-school-title { animation: none !important; opacity: 1; transform: translate(-50%, -50%); }
.file-labels, .rank-labels { position: absolute; z-index: 3; pointer-events: none; }
.file-labels { top: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(9, 1fr); }
.rank-labels { top: 0; bottom: 0; right: 0; display: grid; grid-template-rows: repeat(9, 1fr); }
.board-frame .board { grid-column: 1; grid-row: 1; }
.file-labels div, .rank-labels div {
  display: flex; font-size: 10px; font-weight: 700; line-height: 1;
  /* 座標は盤の外の余白（＝暗い地）に置いてある。明るい字に暗い縁取りを付ける。
     盤の上に載っていた頃の名残りで濃い色にすると、暗い地に溶けて消える。 */
  color: #e8d7b2; opacity: .95;
  text-shadow: 0 0 3px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.9);
}
/* 盤の外に残る余白は片側2%（狭い画面で7px前後）。段数字はそこへ収める。
   筋数字も同じ大きさに揃える。上だけ大きいと、盤から浮いて見える。 */
.file-labels div, .rank-labels div { font-size: 9px; }
/* 盤のいちばん外側へ寄せ、枠線の上に載せる。駒の字とはほぼ重ならない。 */
.file-labels div { align-items: flex-start; justify-content: center; }
.rank-labels div { align-items: center; justify-content: flex-end; }
/* 盤の外へ出す。盤は画面幅を使い切るので、左右の余白（各8px前後）に収まる
   幅で置く。はみ出して横スクロールが出ないよう、狭い画面でも収まる大きさにする。 */
/* 駒は升より背が高く、上端の駒は盤の外へ4pxほどはみ出す。
   筋数字はそのすぐ上へ。触れない範囲でできるだけ盤に寄せる。
   実測すると、上端の駒は盤より 4px 上へ出る。2px まで詰めると駒へ 2px 食い込み、
   4px でちょうど触れる手前。ここが寄せられる限界。 */
.file-labels { top: auto; bottom: 100%; padding-bottom: 4px; }
/* 盤のすぐ外側。余白は片側2%しかないので、はみ出さないよう枠線に少し掛ける。 */
.rank-labels { right: auto; left: calc(100% - 3px); }
.rank-labels div { justify-content: flex-start; }
.board {
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  grid-template-rows: repeat(9, calc(var(--cell) * var(--cell-ratio)));
  background:
    repeating-linear-gradient(0deg, rgba(120,80,30,.05) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, var(--board-bg), var(--board-bg2));
  border: 4px solid var(--board-line);
  border-radius: 3px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(90,60,25,.25);
}
.cell {
  position: relative;
  border: 1px solid rgba(107,75,42,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.cell.movable::after {
  content: "";
  position: absolute;
  width: 30%; height: 30%;
  border-radius: 50%;
  background: rgba(50,120,60,.45);
}
.cell.capturable::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid rgba(181,70,47,.6);
  border-radius: 6px;
}
.cell.selected { background: rgba(88,150,90,.35); }
/* 直前の指し手：移動先ははっきり、移動元は薄めに。ずっと残り続ける（次の手まで） */
.cell.lastmove { background: rgba(210,180,90,.4); }
.cell.lastmove-to { background: rgba(226,170,60,.62); box-shadow: inset 0 0 0 3px rgba(197,132,26,.85); }
.cell.lastmove-from { background: rgba(210,180,90,.34); box-shadow: inset 0 0 0 2px rgba(197,132,26,.45); }

/* 駒（画像）— 実物同様に駒種で大きさを段階的に変える（玉＞飛角＞金銀＞桂香＞歩） */
/* 駒画像は実駒部分が画像の約71%（上下に余白）。玉がマスの約95%を埋めるよう
   画像高さ134%＝実駒高さ0.71×134%≒95%で表示。歩はその約8割。 */
.piece {
  height: 128%;
  width: auto;
  max-width: 128%;
  object-fit: contain;
  cursor: pointer;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.32));
  -webkit-user-drag: none;
}
/* 盤を広げたぶん、駒も一回り大きく。実物の駒と同じで、格の高い駒ほど大きい。
   隣の升の駒と触れない範囲（升幅の115%前後）に収める。 */
.piece.sz-k  { height: 140%; }  /* 王・玉 */
.piece.sz-rb { height: 136%; }  /* 飛・角・龍・馬 */
.piece.sz-gs { height: 131%; }  /* 金・銀・成銀 */
.piece.sz-nl { height: 125%; }  /* 桂・香・成桂・成香 */
.piece.sz-p  { height: 116%; }  /* 歩・と */
.piece.gote { transform: rotate(180deg); }
.cell .piece:hover { filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)) brightness(1.04); }

/* 持ち駒（駒台）— 木目のトレイ風 */
.hand {
  /* 盤と同じ木の色の板。駒が無くてもエリアは固定確保 */
  background: linear-gradient(150deg, var(--board-bg), var(--board-bg2));
  border: 1.5px solid var(--board-line);
  border-radius: 6px;
  padding: 5px 7px;
  min-width: 96px;
  box-shadow: inset 0 1px 4px rgba(90,60,20,.22);
}
.hand-pieces { min-height: 44px; }
/* 駒台は明るい木のまま。暗い側で明るくした --wood-dark を載せると
   木に溶けて消える（contrast 1.06）。ここは濃い墨で書く。 */
.hand-title { font-size: 11px; color: #4a3417; margin-bottom: 5px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; }
.hand-title.is-turn { color: #14561f; font-weight: 800; }
.hand-pieces { display: flex; flex-wrap: wrap; gap: 4px; min-height: 46px; align-items: center; }
.hand-pieces.near { justify-content: flex-end; }  /* 手前の駒台は右寄せ */
.hand-pieces.far { justify-content: flex-start; } /* 相手の駒台は左寄せ（鏡像） */
.hand-piece {
  position: relative;
  height: 46px; width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
}
.hand-piece img { height: 130%; width: auto; object-fit: contain; -webkit-user-drag: none; }
.hand-piece img.koma-flip { transform: rotate(180deg); } /* 相手の持ち駒は相手向き */
.hand-piece.selected { background: rgba(181,70,47,.16); outline: 2px solid var(--accent); outline-offset: 1px; }
.hand-piece .count {
  position: absolute;
  right: -3px; bottom: -3px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.hand.disabled .hand-piece { cursor: default; }

.controls { display: flex; gap: 10px; flex-wrap: wrap; }

/* メイン：オンライン対戦のヒーロー枠。看板バナーと同じダーク基調で“主役”に見せる */
.hero {
  background: radial-gradient(120% 150% at 50% 0%, #33200f 0%, #150d07 72%);
  border: 1px solid rgba(201,148,47,.35);
  border-radius: 18px;
  padding: 16px 14px 14px;
  margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.hero-title { margin: 0 0 12px; font-size: 18px; text-align: center; letter-spacing: 1px; }
.hero-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.hero .mode-buttons { margin-bottom: 14px; }
/* 暗い背景に合わせて文字色を反転 */
.hero .quick-mode-label { color: #e6d2a8; }
.hero .mode-change > summary { color: #ffca6b; }
.hero .mode-note { color: #c8b48c; }
.hero .mode-btn { background: rgba(255,255,255,.08); color: #f2e6cc; border-color: transparent; }
.hero .mode-btn span { color: #c8b48c; }
.hero .mode-btn.active { background: rgba(255,255,255,.16); border-color: #c9942f; box-shadow: 0 2px 10px rgba(201,148,47,.25); }
.hero .mode-btn.active span { color: #ffca6b; }
.hero .searching-ai-text { color: #e6d2a8; }
.hero .ghost { color: #d8c39a; border-color: rgba(255,255,255,.25); }
/* 主役のCTAはより大きく・明るく */
.hero .primary.big {
  padding: 16px; font-size: 17px; font-weight: 800; border-radius: 12px;
  background: linear-gradient(180deg, #d2543a, #a83b26);
  box-shadow: 0 6px 16px rgba(168,59,38,.45);
}
.hero .primary.big:hover { background: linear-gradient(180deg, #e06044, #b8452e); }

/* 対戦モード選択 */
.mode-select { margin-bottom: 18px; }
.mode-label { font-size: 13px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.mode-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-btn {
  flex: 1; min-width: 100px;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 10px 8px; background: var(--panel-2); border: 2px solid transparent;
  color: var(--text); border-radius: 10px;
}
.mode-btn b { font-size: 14px; }
.mode-btn span { font-size: 11px; color: var(--muted); }
/* 選択中の札。地を白のままにすると、明るい地に明るい文字が乗って読めない。
   暗い側で「選ばれている」と分かるよう、朱の細枠と少し明るい地で示す。 */
.mode-btn.active { border-color: #e0603f; background: var(--panel-3); box-shadow: 0 0 0 1px rgba(224,96,63,.35) inset; }
.mode-btn.active span { color: #ff9377; }

button.big { width: 100%; padding: 14px; font-size: 15px; }

/* 自動マッチング検索中 */
.searching {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  margin-top: 12px; padding: 16px; background: var(--panel-2); border-radius: 12px;
  font-size: 14px;
}
.searching-status { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
/* 待機報酬インジケータ */
.wait-reward { border-radius: 10px; padding: 10px 12px; font-size: 13px; text-align: center; line-height: 1.5; }
.wait-reward.on { background: #fff6e0; border: 1.5px solid #d4af37; color: #7a5c10; }
.wait-reward.off { background: #eef1f4; border: 1.5px solid #c3ccd6; color: #566; }
.wait-reward-note { font-size: 11px; opacity: .85; margin-top: 2px; }
.searching-ai {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px; background: var(--panel-2); border-radius: 10px; border: 1px dashed var(--line);
}
.searching-ai-text { font-size: 13px; color: var(--wood-dark); font-weight: 600; }
.searching-ai button { width: 100%; }
.searching .ghost { align-self: center; width: auto; }

/* 対局中の「相手を探し中」インジケーター */
.practice-searching {
  display: flex; align-items: center; gap: 8px;
  background: #fff6e6; border: 1px solid #e6cf9a; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 10px; font-size: 12px; color: var(--wood-dark);
}
.spinner {
  width: 16px; height: 16px; border: 2px solid #cdbf9f; border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 対局時計（情報帯の左に配置。ラベル＋時間を横並びコンパクトに） */
.clock-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; background: var(--panel-2); border-radius: 8px; }
.clock-item .clab { font-size: 11px; color: var(--muted); white-space: nowrap; }
.clock { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.clock-item.active { background: rgba(88,150,90,.22); box-shadow: 0 0 0 2px rgba(88,150,90,.4) inset; }
/* 時計の色は暗い地の上で読める明度にする。従来の濃い緑・赤は沈んで見えない。 */
.clock-item.active .clock { color: #57c86a; }
/* 残り時間の強調（10秒以下=濃い橙、5秒以下=大きく赤く点滅） */
.clock.low { color: #ff7a4d !important; font-weight: 800; }
.clock-item.urgent { background: rgba(196,0,0,.16); box-shadow: 0 0 0 2px rgba(196,0,0,.55) inset; }
.clock.urgent { color: #ff5a49 !important; font-weight: 900; font-size: 30px; animation: clock-urgent .5s ease-in-out infinite; transform-origin: center; }
@keyframes clock-urgent { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }
/* 秒読みは目立つべき所。暗い地でも読める明るい琥珀にする。 */
.clock.byoyomi { color: #f2b544; }
.clock.byoyomi::after { content: "秒読"; font-size: 10px; font-weight: 600; letter-spacing: 0; margin-left: 3px; }
.clocks-mode { font-size: 10px; color: var(--muted); }
.move-count { font-size: 12px; font-weight: 700; color: var(--wood-dark); font-variant-numeric: tabular-nums; }

/* 棋譜再生 */
.rp-title { font-weight: 700; font-size: 15px; }
.replay-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.replay-controls button { min-width: 38px; padding: 8px 6px; font-size: 16px; }
.replay-controls #rpPlay.playing { background: var(--accent); color: #fff; }
.rp-counter { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; }
.replay-controls #rpSpeed { min-width: auto; font-size: 12px; padding: 6px 4px; }
/* 直前の一手と、いつの対局か。棋譜の一覧を開かなくても、この1行で今どこかが分かる。 */
.rp-lastmove {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding: 4px 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
.rp-lastmove-main {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rp-lastmove-when { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 700; }
.rp-lastmove-sec { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.rp-log { margin: 0; padding-left: 26px; max-height: 320px; overflow-y: auto; font-size: 13px; line-height: 1.8; font-variant-numeric: tabular-nums; }
.rp-log li { cursor: pointer; padding: 1px 4px; border-radius: 4px; }
.rp-log li:hover { background: var(--panel-2); }
.rp-log li.current { background: rgba(181,70,47,.18); font-weight: 700; }
.rp-log li .mv-mark { font-weight: 700; margin-left: 4px; }
.rp-log li .mv-mark.good { color: #2f7a3a; }
.rp-log li .mv-mark.dubious { color: #c47a1a; }
.rp-log li .mv-mark.blunder { color: var(--accent-ink); }
.rp-log li .mv-best { color: var(--muted); font-size: 11px; margin-left: 6px; }
.rp-log li .mv-sec { color: var(--muted); font-size: 11px; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* AI感想戦パネル */
.analysis { background: var(--panel); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.analyze-progress { font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; }
/* 解析中の進み具合。送りの列に置くので、1行を丸ごと使う。 */
.replay-controls .analyze-progress { flex: 1 0 100%; margin-top: 4px; }
.analyze-progress .ap-text { font-size: 12px; color: var(--muted); }
.analyze-progress .ap-bar {
  height: 6px; margin-top: 4px; border-radius: 999px;
  background: var(--panel-3); overflow: hidden;
}
.analyze-progress .ap-fill { height: 100%; background: var(--accent); transition: width .25s ease; }
.eval-graph { display: block; width: 100%; height: auto; margin-top: 12px; background: var(--panel-2); border-radius: 8px; }
.analysis-summary { margin-top: 12px; font-size: 13px; line-height: 1.7; }
.analysis-summary .stars { font-size: 20px; color: #e0a92a; letter-spacing: 2px; }
.analysis-summary .sum-row { display: flex; gap: 10px; margin: 6px 0; }
.analysis-summary .sum-chip { background: var(--panel-2); border-radius: 8px; padding: 4px 10px; font-size: 12px; }
.analysis-summary .sum-chip b { font-size: 15px; }
.analysis-summary .advice { margin-top: 8px; color: var(--wood-dark); }
.analysis-summary .advice li { margin: 2px 0; }
.game-row { cursor: pointer; }
.game-row:hover { background: var(--panel-2); }

/* 棋譜・チャット */
.log, .chat {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.log-title { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; font-weight: 600; letter-spacing: .5px; }
/* 折りたたみ（棋譜・チャットは必要なときだけ開く） */
.foldbox > summary.log-title { margin-bottom: 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; user-select: none; }
.foldbox > summary.log-title::-webkit-details-marker { display: none; }
.foldbox > summary.log-title::before { content: "▸"; font-size: 11px; transition: transform .15s; }
.foldbox[open] > summary.log-title { margin-bottom: 8px; }
.foldbox[open] > summary.log-title::before { transform: rotate(90deg); }
#moveLog {
  margin: 0; padding-left: 22px;
  max-height: 200px; overflow-y: auto;
  font-size: 13px; line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.chat-log {
  max-height: 160px; overflow-y: auto;
  font-size: 13px; line-height: 1.6;
  margin-bottom: 8px;
}
.chat-log .row { margin-bottom: 4px; }
.chat-log .who { font-weight: 700; margin-right: 4px; }
.chat-log .who.s0 { color: #2b6cb0; }
.chat-log .who.s1 { color: var(--accent-ink); }
.chat-input { display: flex; gap: 6px; }
.chat-input input { flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
/* チャット定型文チップ */
.chat-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-preset {
  width: auto; padding: 5px 10px; font-size: 12px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  cursor: pointer; white-space: nowrap;
}
.chat-preset:hover { background: var(--panel-3); }
/* 棋譜の自動再生ボタン */
#rpPlay { width: auto; padding: 6px 12px; font-weight: 700; white-space: nowrap; }
#rpPlay.playing { background: var(--accent); color: #fff; }
#rpSpeed { padding: 5px 6px; border-radius: 8px; border: 1px solid var(--line); font-size: 12px; }

/* モーダル・トースト */
.modal {
  position: fixed; inset: 0;
  height: 100dvh;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  /* 全画面パネル（.home-drawer[open] は z-index:12000）より上に出す。
     50 のままだと、道場を開いたゲストがお問い合わせを出しても、
     入力欄も送信ボタンもパネルの中身に隠れて押せなかった。 */
  z-index: 12500;
  overscroll-behavior: contain; /* モーダル内スクロールが背面へ伝播しないように */
  /* 中身の飾り（カードの後光など）が横へはみ出しても、画面ごと横へずらさない。
     はみ出したまま横スクロールが生まれると、モーダルも背面もまとめて
     左へ流れ、名前や閉じるボタンが画面の外へ出る。 */
  overflow-x: hidden;
}
/* ===== 重なり順（下から上へ）=====
 * 12000  全画面パネル（.home-drawer[open]）
 * 12500  ふつうのモーダル（.modal）
 * 12550  育成の画面に重ねて開くもの（作戦・次の一手・出会い・交流）
 * 12600  棋士の詳細
 * 12650  カードの獲得
 * 12700  紙芝居・エンディング
 * 13000  更新の帯
 *
 * ここに全部書く。個別の段を離れた場所へ書くと、基準を動かしたときに
 * 必ず取り残しが出る。実際、基準を 50 から 12500 へ上げたとき、
 * 作戦(72)・次の一手(74)・出会い(70)・カード(320)・紙芝居(200)・
 * エンディング(260) が下に潜り、育成画面に覆われて押せなくなった。
 * 「作戦を決めて対局する」から先へ進めない不具合はこれ。 */
#planDialog, #quizDialog, #encounterDialog, #castEventDialog, #rewardDialog, #traineeActionResultDialog { z-index: 12550; }
#charProfileDialog { z-index: 12600; }
#cardDialog { z-index: 12650; }
.story-vn, .ending { z-index: 12700; }
/* 曲を流すかの確認は、紙芝居・エンディングの上に出す。
   下に置くと画面の裏で開き、結末を無音で見終わってから現れていた。 */
#musicAskDialog { z-index: 12750; }
/* 交流イベント（物語キャスト・ザコ） */
.cast-card { text-align: center; max-width: 340px; }
.cast-img { width: 150px; max-width: 52vw; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: 12px; border: 3px solid #caa24e; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.cast-group { font-size: 12px; color: var(--accent-ink); font-weight: 700; margin-top: 10px; }
.cast-name { font-size: 18px; font-weight: 800; margin-top: 2px; }
.cast-role { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* 一局のあとの会話は数行に渡る。改行をそのまま出す。 */
.cast-line { font-size: 14px; line-height: 1.6; margin: 12px 6px 0; color: var(--wood-dark, #4a3b28); white-space: pre-line; }
.cast-effect { font-size: 13px; font-weight: 700; color: #3f9d6b; margin-top: 8px; min-height: 16px; }
/* 登場人物名鑑 */
.codex-group { font-size: 13px; font-weight: 800; color: var(--accent-ink); margin: 12px 0 6px; }
.codex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.codex-cell { background: var(--panel-2, #f2ecde); border-radius: 9px; padding: 5px; text-align: center; }
.codex-cell:not(.locked) { cursor: pointer; }
.codex-cell:is(button) { width: 100%; border: 0; color: inherit; font: inherit; }
.codex-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: 7px; }
.codex-cell.locked .codex-thumb { filter: grayscale(1) brightness(.6); }
.codex-name { font-size: 10px; font-weight: 700; margin-top: 3px; line-height: 1.2; }
.codex-role { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.25; }
.codex-family-grid { grid-template-columns: repeat(4, 1fr); }
.codex-family { border: 1px solid #e7c5d3 !important; background: linear-gradient(180deg, #fff8fb, #f6e9ef); }
@media (max-width: 420px) { .codex-grid { grid-template-columns: repeat(3, 1fr); } }
/* モーダル表示中は背面（ロビー等）のスクロールを固定する */
/* モーダル表示中は背面のスクロールだけ止める（要素は動かさない＝子の position:fixed を壊さない） */
html.modal-lock { overflow: hidden; }
html.modal-lock body { overflow: hidden; }
/* モーダルの地。トークンで塗るので、名人への道の中だけ明るいまま残る。 */
.modal-card {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px 32px; text-align: center;
}
.modal-card p { margin: 0 0 16px; font-size: 16px; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions button { min-width: 100px; }

/* お問い合わせ: 高齢の利用者にも入力場所と操作順が一目で分かる表示 */
.contact-card {
  position: relative;
  width: min(540px, calc(100vw - 24px));
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px;
  text-align: left;
  color: var(--text);
}
.contact-title {
  /* 閉じるボタンは float なので、見出しの文字は自然に回り込む。
     絶対配置だった頃の逃げ幅（右48px）は不要。 */
  margin: 0 0 10px;
  font-size: 27px;
  line-height: 1.3;
  color: var(--text);
}
.contact-card p.contact-lead {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.7;
}
.contact-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.contact-steps span {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--panel-3);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}
.contact-field {
  display: grid;
  gap: 8px;
  margin: 15px 0 8px;
}
.contact-label {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 900;
  color: var(--text);
}
.contact-category,
.contact-message {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
}
.contact-category {
  min-height: 52px;
  padding: 10px 12px;
}
.contact-message {
  min-height: 190px;
  padding: 14px;
  line-height: 1.65;
  resize: vertical;
}
.contact-category:focus,
.contact-message:focus {
  border-color: #b5462f;
  outline: 4px solid rgba(181, 70, 47, .2);
}
.contact-message::placeholder { color: var(--muted); opacity: 1; }
.contact-message-note {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 7px 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.contact-message-note strong { flex-shrink: 0; color: var(--text); }
.contact-send {
  width: 100%;
  min-height: 58px;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 900;
}
.contact-card p.contact-after-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
/* 閉じるボタンは、カードを下までスクロールしても押せる位置に留める。
   position:absolute だと内部スクロールと一緒に上へ流れ、スマホで
   入力欄まで下げた時点で画面外に出ていた（実測 -3745px）。 */
/* .modal-close は後ろの行で position:absolute を指定している。
   同じ詳細度だと後勝ちで負けるので、2クラス指定で上書きする。 */
.modal-close.contact-close {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--panel-3);
  color: var(--text);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
  font-size: 30px;
  line-height: 44px;
}
/* 送信の隣にも閉じる導線を置く。スマホでは下端のほうが親指が届く。 */
.contact-cancel {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 10px 0 0;
  font-size: 17px;
}
@media (max-width: 520px) {
  .contact-card {
    max-height: calc(100dvh - 16px);
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .contact-title { font-size: 25px; }
  .contact-card p.contact-lead { font-size: 17px; }
  .contact-steps { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .contact-steps span { padding: 5px 9px; }
  .contact-message-note { flex-direction: column; gap: 4px; }
}

/* プロフィール */
.username { cursor: pointer; text-decoration: underline dotted; }
.modal-card.profile-card {
  position: relative; text-align: left;
  width: min(460px, 92vw); max-height: 82vh; overflow-y: auto; padding: 24px;
}
.modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; font-size: 20px; padding: 2px 8px; color: var(--muted);
}
.profile-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.profile-rating { font-size: 15px; color: #b58a2f; margin-bottom: 14px; }
.profile-rating b { font-size: 22px; }
.profile-record { display: flex; gap: 14px; margin-bottom: 18px; }
.record-box {
  flex: 1; text-align: center; background: var(--panel-2); border-radius: 8px; padding: 10px 6px;
}
.record-box .num { font-size: 20px; font-weight: 700; }
.record-box .lbl { font-size: 12px; color: var(--muted); }
.record-box.win .num { color: #57c86a; }
.record-box.lose .num { color: var(--accent-ink); }
.games-title { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.game-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 13px;
}
.game-row:last-child { border-bottom: none; }
.game-result { font-weight: 700; width: 20px; text-align: center; }
.game-result.win { color: #2f7a3a; }
.game-result.lose { color: var(--accent-ink); }
.game-result.draw { color: var(--muted); }
.game-opp { flex: 1; }
.game-meta { color: var(--muted); font-size: 12px; }
.games-empty { font-size: 13px; color: var(--muted); }

.app-version {
  position: fixed;
  right: 8px; bottom: 6px;
  font-size: 11px; color: var(--muted); opacity: .7;
  pointer-events: none; z-index: 5;
}
.engine-label { position: fixed; right: 8px; bottom: 20px; font-size: 11px; color: var(--muted); pointer-events: none; z-index: 5; }
/* 対局画面の最下部に出す「動作中エンジン」表示 */
/* 盤の下に出す「動作中エンジン」。薄い文字をさらに透かしていて読めなかった。 */
.game-engine-label { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 2px; }

.toast {
  position: fixed;
  left: 50%; bottom: 32px; transform: translateX(-50%);
  background: #2a2320; color: #fff;
  padding: 12px 22px; border-radius: 30px;
  font-size: 14px; z-index: 60;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* タッチ操作の最適化（ダブルタップズーム抑制・タップ遅延解消） */
.cell, .piece, .hand-piece, button { touch-action: manipulation; }

/* ---------- スマホ / 縦画面 ---------- */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  /* 盤で横幅の96%を使う。残った4%（片側2%）に段数字を押し込む。
     引くのは盤枠線8pxと、左右の余白ぶん4vw。 */
  :root {
    --label: 12px;
    --cell: calc((96vw - 8px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 9);
  }
  body:has(#game:not(.hidden)) {
    --cell: calc((96vw - 8px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 9);
  }

  header { padding: calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 8px calc(12px + env(safe-area-inset-left, 0px)); }
  header h1 { font-size: 15px; white-space: nowrap; gap: 8px; }
  header h1 span { white-space: nowrap; }
  .logo-koma { height: 28px; }
  .brand-tag { font-size: 9px; letter-spacing: .16em; }
  .brand-name { font-size: 17px; }
  /* トップメニューのボタンは折り返し前提でコンパクトに */
  .lobby-top { gap: 6px; }
  button.mini2 { padding: 5px 9px; font-size: 12px; }
  .points-badge { font-size: 12px; padding: 4px 9px; }
  .header-right { gap: 8px; }
  .userbox { font-size: 12px; gap: 6px; }
  body:has(#lobby:not(.hidden)) header {
    gap: 7px;
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding: calc(6px + env(safe-area-inset-top, 0px)) calc(9px + env(safe-area-inset-right, 0px)) 6px calc(9px + env(safe-area-inset-left, 0px));
  }
  body:has(#lobby:not(.hidden)) .lobby-user-summary {
    flex: 1 1 auto;
    max-width: 120px;
  }
  body:has(#lobby:not(.hidden)) .lobby-user-kicker { font-size: 7px; }
  body:has(#lobby:not(.hidden)) #lobbyUserName {
    max-width: 120px;
    font-size: 13.5px;
  }
  body:has(#lobby:not(.hidden)) .lobby-user-meta {
    gap: 2px;
    font-size: 9px;
  }
  body:has(#lobby:not(.hidden)) .header-right {
    flex: 0 0 auto;
    gap: 4px;
  }
  body:has(#lobby:not(.hidden)) .userbox { gap: 3px; }
  body:has(#lobby:not(.hidden)) .userbox .points-badge {
    padding: 3px 7px;
    font-size: 10.5px;
  }
  body:has(#lobby:not(.hidden)) .icon-btn {
    min-width: 30px;
    padding: 4px 6px;
    font-size: 13px;
  }
  body:has(#lobby:not(.hidden)) #logoutBtn {
    min-width: 0;
    padding: 5px 7px;
    font-size: 10px;
  }
  body:has(#lobby:not(.hidden)) .conn::before { font-size: 9px; }
  /* 接続状態は色付きドットのみで表示（テキスト折り返しを避ける） */
  .conn { font-size: 0; }
  .conn::before { content: "●"; font-size: 11px; }

  .game {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 8px;
  }
  /* グリッド/フレックスの子が中身の広さで画面外へあふれないように */
  .game > *, .board-area > *, .side, .info-panel, .boardwrap,
  .roombox, .analysis, .log, .chat { min-width: 0; max-width: 100%; }
  .analysis-summary, .analysis-summary * { overflow-wrap: anywhere; }
  .side { flex-direction: column; gap: 12px; }
  .info-panel { flex-direction: column; gap: 12px; }

  .board { border-width: 3px; }

  /* スマホでも 左レール(時計)｜盤｜右レール(駒台) の3カラムを維持（幅は固定変数） */
  .board-area { gap: 4px 5px; }
  .side-rail { gap: 6px; }
  .clock-item { padding: 4px 6px; }
  .clock { font-size: 18px; letter-spacing: 0; }
  .clock-item .clab { font-size: 10px; }
  .turn-flag { font-size: 11px; padding: 6px 3px; }
  .hand { padding: 6px 4px; }
  .hand-title { font-size: 10px; }

  .roombox { font-size: 13px; line-height: 1.7; padding: 10px 12px; }
  .hand-piece { height: 36px; width: 30px; }
  .hand-pieces { min-height: 36px; }
  .controls { justify-content: center; }
  .controls button { flex: 1; max-width: 120px; }

  #moveLog { max-height: 120px; }
  .chat-log { max-height: 110px; }

  /* 対局中は1画面に収める設計だが、overflow-y:hidden だと収まらなかった分へ二度と到達できない。
     実際、対局終了後に「棋譜再生・育成画面へ・退室」のボタン列が画面外へ押し出され、
     対局画面から抜けられなくなっていた。収まるときの見た目は変わらないので auto にする。 */
  body:has(#game:not(.hidden)) {
    min-height: 100dvh;
    overflow-y: auto;
  }
  body:has(#game:not(.hidden)) header {
    padding: calc(4px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 4px calc(10px + env(safe-area-inset-left, 0px));
  }
  body:has(#game:not(.hidden)) header h1 { gap: 6px; }
  body:has(#game:not(.hidden)) .logo-koma { width: 24px; height: 24px; border-radius: 7px; }
  body:has(#game:not(.hidden)) .brand-tag { display: none; }
  body:has(#game:not(.hidden)) .brand-name { font-size: 16px; }
  body:has(#game:not(.hidden)) .header-right { gap: 6px; }
  body:has(#game:not(.hidden)) .userbox { gap: 5px; font-size: 11px; }
  body:has(#game:not(.hidden)) .userbox .username,
  body:has(#game:not(.hidden)) #logoutBtn { display: none; }
  body:has(#game:not(.hidden)) .userbox .points-badge { padding: 3px 8px; font-size: 11px; }
  body:has(#game:not(.hidden)) .icon-btn { padding: 3px 7px; font-size: 13px; }
  body:has(#game:not(.hidden)) .conn::before { font-size: 9px; }
  body:has(#game:not(.hidden)) .game {
    gap: 4px;
    padding: 4px 8px calc(86px + env(safe-area-inset-bottom, 0px));
  }
  body:has(#game:not(.hidden)) .board-area { width: 100%; gap: 2px; }
  body:has(#game:not(.hidden)) .board-frame { margin-inline: auto; }
  body:has(#game:not(.hidden)) .info-bar { gap: 4px; }
  body:has(#game:not(.hidden)) .opp-info { gap: 5px; padding: 0 4px; }
  body:has(#game:not(.hidden)) .opp-avatar { width: 42px; height: 54px; border-radius: 7px; }
  body:has(#game:not(.hidden)) .opp-name { font-size: 11px; line-height: 1.12; }
  body:has(#game:not(.hidden)) .opp-sub { font-size: 9.5px; }
  body:has(#game:not(.hidden)) .clock-item { padding: 3px 5px; gap: 4px; border-radius: 7px; }
  body:has(#game:not(.hidden)) .clock { font-size: 16px; }
  body:has(#game:not(.hidden)) .clock.urgent { font-size: 23px; }
  body:has(#game:not(.hidden)) .clock-item .clab { font-size: 9px; }
  body:has(#game:not(.hidden)) .clock.byoyomi::after { font-size: 8px; margin-left: 2px; }
  body:has(#game:not(.hidden)) .turn-flag { padding: 4px 5px; font-size: 10px; border-radius: 8px; }
  body:has(#game:not(.hidden)) .move-count { font-size: 11px; white-space: nowrap; }
  body:has(#game:not(.hidden)) .clocks-mode { font-size: 9px; white-space: nowrap; }
  body:has(#game:not(.hidden)) .hand { min-width: 86px; padding: 3px 4px; border-radius: 6px; }
  body:has(#game:not(.hidden)) .hand-title { margin-bottom: 1px; font-size: 9px; line-height: 1.15; }
  body:has(#game:not(.hidden)) .hand-pieces { min-height: 30px; gap: 2px; }
  body:has(#game:not(.hidden)) .hand-piece { width: 27px; height: 32px; }
  body:has(#game:not(.hidden)) .hand-piece .count {
    right: -3px;
    bottom: -2px;
    width: 15px;
    height: 15px;
    font-size: 9px;
  }
  body:has(#game:not(.hidden)) .board-area .controls {
    width: min(100%, calc(var(--cell) * 9 + var(--label) * 2));
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;           /* 収まらなければ2段目へ（ボタン内で改行させない） */
    justify-content: center;
    gap: 5px;
  }
  body:has(#game:not(.hidden)) .controls button {
    flex: 0 1 auto;            /* 文字量に応じた幅（均等幅で潰さない） */
    min-width: 0;
    max-width: none;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;       /* ラベルは常に1行 */
  }
  body:has(#game:not(.hidden)) #reviewBtn { flex-grow: 1.65; }
  body:has(#game:not(.hidden)) #leaveBtn { flex-grow: .82; }
  body:has(#game:not(.hidden)) .info-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    pointer-events: none;
  }
  body:has(#game:not(.hidden)) .roombox {
    width: min(100%, calc(var(--cell) * 9 + var(--label) * 2));
    margin: 0 auto;
    padding: 10px 12px;
    border-radius: 14px;
    line-height: 1.25;
    border: 1.5px solid rgba(107,74,37,.18);
    box-shadow: 0 -5px 18px rgba(60,40,15,.18);
    pointer-events: auto;
  }
  body:has(#game:not(.hidden)) #roombox .room-line {
    gap: 5px;
    font-size: 10.5px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
  }
  body:has(#game:not(.hidden)) #roombox .room-line b {
    font-size: 11px;
    letter-spacing: 1px;
  }
  body:has(#game:not(.hidden)) #statusLabel {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 対局中の帯。暗い画面のなかで、ここだけ明るい地のまま取り残されていた。
     状態は「地の色」ではなく「文字の色」で見分ける。 */
  body:has(#game.game-state-mine:not(.hidden)) .roombox {
    background: rgba(45, 90, 55, .38);
    border-color: rgba(87, 200, 106, .55);
  }
  body:has(#game.game-state-mine:not(.hidden)) #statusLabel {
    color: #7fd98d;
    font-size: 20px;
  }
  body:has(#game.game-state-mine:not(.hidden)) #statusLabel::before { content: '▶ '; }
  body:has(#game.game-state-theirs:not(.hidden)) .roombox,
  body:has(#game.game-state-thinking:not(.hidden)) .roombox,
  body:has(#game.game-state-spectating:not(.hidden)) .roombox {
    background: var(--panel-2);
    border-color: var(--line);
  }
  body:has(#game.game-state-over:not(.hidden)) .roombox {
    background: var(--panel-2);
    border-color: rgba(224, 96, 63, .45);
  }
  body:has(#game.game-state-over:not(.hidden)) #statusLabel {
    color: #ffb199;
    font-size: 16px;
  }
  body:has(#game.game-state-waiting:not(.hidden)) .roombox {
    background: var(--panel-3);
  }
  body:has(#game:not(.hidden)) #game .log.foldbox,
  body:has(#game:not(.hidden)) #game .chat.foldbox,
  body:has(#game:not(.hidden)) .app-version {
    display: none;
  }
}

/* 名人への道：作戦は毎局の確認ではなく、保存する対局設定。 */
.trainee-style .ts-plan {
  min-width: 0;
  color: #8a4d2d;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.trainee-setting-label { margin-top: 14px; }
.trainee-plan-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.trainee-plan-setting {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(144, 105, 47, .28);
  background: #f5eddf;
  color: #4f3c27;
  text-align: left;
}
.trainee-plan-setting.selected {
  border-color: #b5462f;
  background: #fff0e3;
  box-shadow: inset 0 0 0 2px rgba(181, 70, 47, .18);
}
.trainee-plan-setting-name { font-weight: 900; }
.trainee-plan-setting-desc { color: #766550; font-size: 10px; line-height: 1.45; }
.trainee-loadout-settings {
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(98, 57, 121, .32);
  background: #efe5f5;
  color: #56366b;
}
@media (min-width: 700px) {
  .trainee-plan-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 横向きスマホなど中間幅 */
/* ============================================================
   棋譜再生（感想戦）— 細い画面

   #replay は「脇の欄｜盤｜棋譜」の3つ子。スマホでは縦に積まれるので、
   コピー・研究フォルダ・AI感想戦・注意書きが全部盤より前に来る。
   実測で、盤に届くまで 1000px 以上スクロールが要った。

   見たいのは盤なので、盤を先頭に出す。脇の道具はその下へ回し、
   さらに折りたたんで、開いたときだけ出す。
   ============================================================ */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #replay { display: flex; flex-direction: column; gap: 10px; padding: 8px; }
  /* 画面の隅に固定しているエンジン名と版数が、感想戦の本文へ重なって読めなくなる。
     対局中と同じように、この画面でも出さない。 */
  body:has(#replay:not(.hidden)) .engine-label,
  body:has(#replay:not(.hidden)) .app-version { display: none; }
  /* ヘッダは対局中と同じだけ詰める。既定のままだと右端の「ログアウト」が切れる。 */
  body:has(#replay:not(.hidden)) header {
    padding: calc(4px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 4px calc(10px + env(safe-area-inset-left, 0px));
  }
  body:has(#replay:not(.hidden)) header h1 { gap: 6px; }
  body:has(#replay:not(.hidden)) .logo-koma { width: 24px; height: 24px; border-radius: 7px; }
  body:has(#replay:not(.hidden)) .brand-tag { display: none; }
  body:has(#replay:not(.hidden)) .brand-name { font-size: 16px; }
  body:has(#replay:not(.hidden)) .header-right { gap: 6px; }
  body:has(#replay:not(.hidden)) .userbox { gap: 5px; font-size: 11px; }
  body:has(#replay:not(.hidden)) .userbox .username,
  body:has(#replay:not(.hidden)) #logoutBtn { display: none; }
  body:has(#replay:not(.hidden)) .userbox .points-badge { padding: 3px 8px; font-size: 11px; }
  body:has(#replay:not(.hidden)) .icon-btn { padding: 3px 7px; font-size: 13px; }
  #replay .boardwrap { order: 1; }
  #replay .rp-log-wrap, #replay .rp-log { order: 2; }
  #replay .side { order: 3; }
  /* 見出しと結果は短く。全体を一目で掴めれば十分。 */
  #replay .rp-title { font-size: 15px; font-weight: 800; }
  #replay .roombox .status { font-size: 12px; }
  /* 道具は横に流さず、幅いっぱいの2列で並べる（押しやすさ優先） */
  #replay .export-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #replay .export-row button { width: 100%; }
  /* 注意書きは一度読めば十分なので、小さく畳んでおく */
  /* 解析の結果は縦に伸びる。星・内訳・反省手までは見せ、
     「気になった手」は件数が多いので枠の中で送る（画面ごと流れないように）。 */
  #replay .eval-graph { margin-top: 8px; }
  #replay .analysis-summary { margin-top: 8px; font-size: 12px; line-height: 1.55; }
  #replay .analysis-summary .stars { font-size: 17px; }
  #replay .analysis-summary .sum-row { gap: 6px; flex-wrap: wrap; }
  #replay .blunder-list { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
  /* 盤・持ち駒・名前・送りまでを1画面に収める。
     実測（375x812）では、ヘッダー込みで 309px はみ出していた。
     名前の帯を持ち駒の見出しに畳み、空の駒台を薄くして、
     道具は「☰ メニュー」を押したときだけ出す。 */
  /* 名前は駒台の見出し（「△後手 なかたに 持ち駒」）にも入っている。
     帯を別に置くと同じ名前が2箇所に出るので、細い画面では帯のほうを消す。 */
  #replay .rp-player { display: none; }
  /* 駒台は、名前の行と駒の行で2段になっていた。持ち駒は無いことも多く、
     空の板が上下で100px近くを占めていた。名前と駒を同じ行に並べて1段にする。 */
  #replay .rp-hand-adjacent {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 7px; min-height: 0;
  }
  /* 名前はここだけになるので、少し大きく読みやすくする。
     エンジン名や版まで入って長くなることがあるので、あふれたら詰めて
     持ち駒のぶんの幅を必ず残す。 */
  /* ★名前が縮む側。持ち駒は縮めない（2026-08-08）。
     以前は名前も持ち駒も flex-shrink:1 だったので、あふれた幅を
     「元の幅の比」で分け合っていた。名前は約250px・持ち駒は約105pxなので、
     名前が省略されたうえに持ち駒まで削られ、いちばん左の駒が枠の外へ出て
     切れて見えていた（実機の画面写真で報告あり）。
     持ち駒は駒数が読めないと意味が無いので、削るのは名前だけにする。 */
  #replay .rp-hand-adjacent .hand-title {
    flex: 1 1 auto; min-width: 0; margin: 0;
    font-size: 12px; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 持ち駒が増えると折り返して駒台が上下に伸び、盤ごと画面から押し出されていた。
     常に横1行に並べ、入りきらないぶんはこの枠の中だけで横に送る。 */
  #replay .rp-hand-adjacent .hand-pieces {
    flex: 0 0 auto; max-width: 100%; min-height: 26px;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #replay .rp-hand-adjacent .hand-pieces::-webkit-scrollbar { display: none; }
  /* 7種類が横に並ぶよう、この画面だけ駒を小さくする */
  #replay .rp-hand-adjacent .hand-piece { flex: 0 0 auto; height: 26px; width: 24px; }
  /* ★駒数の札は駒の枠の中へ（2026-08-08）。
     right/bottom を -2px にすると札が駒からはみ出すが、この駒台は
     overflow:auto で横送りにしているため、はみ出した2pxがそのまま削られ、
     いちばん端の駒の数字が欠けて見えていた。 */
  #replay .rp-hand-adjacent .hand-piece .count { font-size: 9px; width: 14px; height: 14px; right: 0; bottom: 0; }
  #replay .replay-controls { gap: 6px; padding: 6px 0 0; flex-wrap: wrap; justify-content: center; }
  /* 解析は、この画面でいちばんやりたいこと。送りの列でも目立たせる。 */
  #replay .replay-controls #analyzeBtn { flex: 1 0 100%; margin: 4px 0 0; }
  #replay .replay-controls #bestMoveBtn { margin: 0; }
  /* 「この局面から対局」も、解析と同じく一行を取る。並べている手のところで押すもの。 */
  #replay .replay-controls #rpResumeBtn { flex: 1 0 100%; margin: 4px 0 0; }
  /* 戻るはいつでも押せる場所に。解析と横に並べる。 */
  #replay .replay-controls #replayBack { margin: 0; width: auto; }
  /* ★折り返した先の釦は、その行の余りを分け合って伸ばす（2026-08-08）。
     中央寄せのままだと、行によって 170〜230px の空きが残っていた
     （実測: 速度＋ガイドの行で 234px、戻る＋メニューの行で 169px）。
     見た目の隙間が減るだけでなく、指で押せる的が広くなる。
     送りの釦（⏮ ◀ ⏯ ▶ ⏭）は記号なので、伸ばさず元の大きさのまま並べる。 */
  #replay .replay-controls #rpFlipBtn,
  #replay .replay-controls #rpSpeed,
  #replay .replay-controls #bestMoveBtn,
  #replay .replay-controls #replayBack,
  #replay .replay-controls #rpMenuBtn { flex: 1 1 auto; min-width: 0; }
  /* 盤反転と速度は、使う頻度が低いのでメニューへ回して席を空ける。 */
  #replay .replay-controls #rpFlipBtn,
  #replay .replay-controls #rpSpeed { display: none; }
  #replay.menu-open .replay-controls #rpFlipBtn,
  #replay.menu-open .replay-controls #rpSpeed { display: inline-block; }
  /* 道具は畳んでおく。メニューを押したときだけ出す。 */
  #replay .side { display: none; }
  #replay.menu-open .side { display: flex; }
  #replay .ai-caveat { font-size: 11px; line-height: 1.5; margin: 6px 0 0; }
}
@media (max-width: 820px) and (min-width: 560px) {
  :root { --cell: 54px; }
}

/* ============================ 対局演出（軽量CSS） ============================ */
/* ============ 対局前に選んだ作戦を、盤の上で知らせる ============
   選んだのに何も起きないように見える、という声があった。
   帯でいまの作戦を出し続け、指示が効いた一手では札を飛ばす。 */
/* 作戦の札は、それが効く棋士のいる手前側の操作列へ置く。相手側に出しても
   誰の話か分からない。この列は「退室」が横いっぱいに伸びていて空きがある。 */
.controls:has(#planBadge:not(.hidden)) #leaveBtn { flex-grow: 0; }
.plan-badge {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 100%; height: 38px; min-height: 38px; padding: 6px 10px;
  background: rgba(20, 14, 8, .58);
  border: 1px solid var(--line); border-radius: 999px;
  pointer-events: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.plan-badge .pb-mark {
  color: var(--text); font-size: 13px; font-weight: 800;
  line-height: 1.2; white-space: nowrap;
}
.plan-badge.is-active .pb-mark { color: #fff6de; }
/* 効いている場面のあいだは、金色にして知らせる。
   以前はここで呼吸と流れる光を延々と繰り返していたが、盤の上で一手ごとに
   光り続けて目障りだった。止まった色と縁だけで十分に伝わる。 */
.plan-badge.is-active {
  border-color: rgba(245, 200, 90, .9);
  background: linear-gradient(180deg, rgba(150, 105, 30, .92), rgba(90, 60, 16, .92));
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(245, 200, 90, .22);
}
/* 印は縁の下に隠れないよう、必ず上に置く */
.plan-badge .pb-mark { position: relative; z-index: 1; }
.guardian-control-stack {
  display: flex; flex: 0 0 128px; width: 128px; flex-direction: column;
  align-items: center; gap: 4px;
}
.guardian-control-stack > .technique-menu-btn,
.guardian-control-stack > .plan-badge {
  flex: 0 0 38px; width: 100%; height: 38px; min-height: 38px; max-height: 38px;
}
.guardian-control-stack.has-active-technique > .plan-badge { display: none !important; }
.guardian-control-stack.has-active-technique > .technique-menu-btn {
  flex-basis: 76px; height: 76px; min-height: 76px; max-height: 76px; padding: 5px 4px;
}
.technique-menu-btn {
  box-sizing: border-box; width: 100%; height: 38px; min-height: 38px; margin: 0; padding: 6px 10px;
  border: 1px solid #e4b75d; border-radius: 999px;
  background: linear-gradient(180deg, #71388b, #321943); color: #fff2c9;
  font-size: 13px; font-weight: 950; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(56, 20, 75, .55);
}
.technique-menu-btn.is-active {
  animation: techniquePulse .85s ease-in-out infinite;
  white-space: nowrap; line-height: 1.2; text-align: center;
}
.technique-menu-btn.has-card-art {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px;
  overflow: visible; border: 1px solid color-mix(in srgb, var(--tech-color, #c683ff) 58%, #fff 12%);
  border-radius: 14px;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--tech-color, #c683ff) 34%, #362944 66%),
    color-mix(in srgb, var(--tech-color, #c683ff) 16%, #17131f 84%) 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 4px 12px rgba(18,8,27,.4);
  color: color-mix(in srgb, var(--tech-color, #c683ff) 72%, #fff 28%);
}
.technique-menu-btn.is-active.has-card-art { animation: none; }
.active-technique-control-label {
  position: relative; z-index: 3; display: block; min-width: 0; font-size: 12px; font-weight: 950;
  line-height: 16px; letter-spacing: .08em; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 8px color-mix(in srgb, var(--tech-color, #c683ff) 85%, transparent);
}
.active-technique-card-shell {
  position: relative; z-index: 1; display: block; flex: 0 0 42px; width: 42px; height: 58px; isolation: isolate;
}
.active-technique-card-shell::before,
.active-technique-card-shell::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
}
.active-technique-card-shell::before {
  inset: -12px -14px -10px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tech-color) 88%, #fff 12%) 0 11%, transparent 42%),
    radial-gradient(ellipse at 8% 22%, color-mix(in srgb, var(--tech-color) 94%, #fff 6%) 0 9%, transparent 34%),
    radial-gradient(ellipse at 92% 25%, color-mix(in srgb, var(--tech-color) 88%, #fff 12%) 0 9%, transparent 34%),
    radial-gradient(ellipse at 2% 67%, color-mix(in srgb, var(--tech-color) 90%, #ffdf73 10%) 0 8%, transparent 31%),
    radial-gradient(ellipse at 98% 70%, color-mix(in srgb, var(--tech-color) 92%, #fff 8%) 0 8%, transparent 31%),
    radial-gradient(ellipse at 50% 105%, color-mix(in srgb, var(--tech-color) 82%, #ffdf73 18%) 0 17%, transparent 52%);
  filter: blur(5px); opacity: .9;
  animation: activeTechniqueFlame .68s ease-in-out infinite alternate;
}
.active-technique-card-shell::after {
  inset: -5px -6px -5px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--tech-color) 60%, transparent);
  box-shadow: 0 0 8px 3px color-mix(in srgb, var(--tech-color) 72%, transparent),
    0 0 18px 4px color-mix(in srgb, var(--tech-color) 35%, transparent);
  opacity: .9;
  animation: activeTechniqueEmber .9s ease-in-out infinite alternate;
}
.active-technique-control-art {
  position: relative; z-index: 2; display: block; width: 40px; height: 54px; margin: 2px auto; object-fit: cover;
  border-radius: 7px; border: 1px solid color-mix(in srgb, var(--tech-color, #c683ff) 58%, #fff 42%); opacity: .92;
  box-shadow: 0 0 6px color-mix(in srgb, var(--tech-color, #c683ff) 72%, transparent);
  animation: activeTechniqueControlPulse .85s ease-in-out infinite;
}
.technique-rank-badge {
  position: absolute; z-index: 4; top: 3px; left: 3px; min-width: 22px;
  box-sizing: border-box; padding: 2px 4px; border: 1px solid rgba(255,244,194,.82); border-radius: 5px;
  background: rgba(17,11,24,.88); color: #ffe292; box-shadow: 0 1px 5px rgba(0,0,0,.55);
  font-size: 9px; font-weight: 1000; line-height: 1; letter-spacing: .04em; text-align: center;
  pointer-events: none;
}
.technique-level-badge {
  position: absolute; z-index: 4; right: 3px; bottom: 3px; box-sizing: border-box;
  padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--tech-color, #d6a94a) 62%, #fff 38%);
  border-radius: 5px; background: rgba(12,15,23,.9); color: #fff4ce;
  box-shadow: 0 1px 5px rgba(0,0,0,.62), 0 0 7px color-mix(in srgb, var(--tech-color, #d6a94a) 45%, transparent);
  font-size: 9px; font-weight: 1000; line-height: 1; white-space: nowrap; pointer-events: none;
}
.technique-rarity-text, .technique-power-text {
  display: inline-block; font-weight: 1000; letter-spacing: .06em;
  text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 0 7px currentColor;
}
.technique-rarity-text.rarity-r { color: #aeb8c6; }
.technique-rarity-text.rarity-sr { color: #f0bd45; }
.technique-rarity-text.rarity-ssr { color: #df83f2; }
.technique-rarity-text.rarity-ur {
  color: #ffe574; background: linear-gradient(90deg,#ffe574,#fff8ca 32%,#dc8cff 63%,#ffe574);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: techniqueGradeShimmer 2.4s linear infinite;
}
.technique-power-text.power-training { color: #adb8c7; }
.technique-power-text.power-yudan { color: #54d6a0; }
.technique-power-text.power-kodan { color: #62b8ff; }
.technique-power-text.power-meijin { color: #ff7868; text-shadow: 0 1px 1px #46100c, 0 0 8px rgba(255,80,59,.72); }
.technique-power-text.power-kishin {
  color: #ffe574; background: linear-gradient(90deg,#f0aa32,#fffbd2 28%,#bb86ff 56%,#72dfff 76%,#f0aa32);
  background-size: 240% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 4px rgba(255,205,78,.72)); animation: techniqueGradeShimmer 1.55s linear infinite;
}
.technique-power-text.role-boost.effect-up { color: #6fe0a6; text-shadow: 0 1px 1px #163626, 0 0 6px rgba(78,213,147,.5); }
.technique-power-text.role-boost.effect-great { color: #ffb44f; text-shadow: 0 1px 1px #4d2607, 0 0 9px rgba(255,145,48,.72); }
.technique-power-text.role-boost.effect-transcendent,
.technique-power-text.role-disrupt.effect-transcendent,
.technique-power-text.role-substitute {
  color: #fff0a1; background: linear-gradient(90deg,#ffb633,#fffbd2 32%,#d889ff 64%,#ffb633);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 4px rgba(255,191,60,.72)); animation: techniqueGradeShimmer 1.55s linear infinite;
}
.technique-power-text.role-disrupt.effect-up { color: #ff9e88; text-shadow: 0 1px 1px #471810, 0 0 6px rgba(255,105,77,.48); }
.technique-power-text.role-disrupt.effect-great { color: #ff6f68; text-shadow: 0 1px 1px #4d0907, 0 0 9px rgba(255,64,55,.72); }
.technique-level-badge.role-boost.effect-up { color: #9af0c4; border-color: #55b989; }
.technique-level-badge.role-boost.effect-great { color: #ffd18a; border-color: #e89a34; box-shadow: 0 0 9px rgba(244,145,43,.65); }
.technique-level-badge.role-boost.effect-transcendent,
.technique-level-badge.role-disrupt.effect-transcendent,
.technique-level-badge.role-substitute { color: #fff4ae; border-color: #ffdc65; box-shadow: 0 0 8px #eab741, 0 0 14px rgba(169,80,229,.75); }
.technique-level-badge.role-disrupt.effect-up { color: #ffc0b1; border-color: #cc7562; }
.technique-level-badge.role-disrupt.effect-great { color: #ffaaa4; border-color: #e45249; box-shadow: 0 0 9px rgba(232,61,51,.65); }
.technique-role-summary {
  width: fit-content; max-width: 100%; margin: 6px auto 2px; padding: 4px 10px; border: 1px solid currentColor;
  border-radius: 999px; color: #d9cfbb; background: rgba(15,12,21,.72); font-size: 11px; font-weight: 950; line-height: 1.25;
}
.technique-role-summary.role-boost.effect-up { color: #8de9b8; }
.technique-role-summary.role-boost.effect-great { color: #ffc06b; box-shadow: 0 0 10px rgba(240,137,41,.3); }
.technique-role-summary.role-boost.effect-transcendent,
.technique-role-summary.role-substitute { color: #ffe68b; box-shadow: 0 0 13px rgba(221,150,43,.42), 0 0 20px rgba(160,78,218,.25); }
.technique-role-summary.role-disrupt.effect-up { color: #ffab98; }
.technique-role-summary.role-disrupt.effect-great { color: #ff817a; box-shadow: 0 0 10px rgba(234,68,56,.3); }
.technique-role-summary.role-disrupt.effect-transcendent { color: #ffd47f; box-shadow: 0 0 13px rgba(239,66,47,.45), 0 0 20px rgba(160,45,210,.24); }
@keyframes techniqueGradeShimmer { to { background-position: 220% center; } }
.technique-level-badge.power-training { color: #d8e0ea; border-color: #8995a5; }
.technique-level-badge.power-yudan { color: #8bf0c2; border-color: #43a97c; box-shadow: 0 0 8px rgba(60,203,143,.52); }
.technique-level-badge.power-kodan { color: #9fd4ff; border-color: #4c99dc; box-shadow: 0 0 8px rgba(71,159,238,.58); }
.technique-level-badge.power-meijin { color: #ffb09f; border-color: #e45d4b; box-shadow: 0 0 9px rgba(240,73,51,.7); }
.technique-level-badge.power-kishin {
  color: #fff4ae; border-color: #ffdc65; background: linear-gradient(135deg,rgba(83,34,94,.96),rgba(71,46,13,.96));
  box-shadow: 0 0 8px #eab741, 0 0 14px rgba(169,80,229,.75);
}
.player-technique-badge.power-training .technique-effect-label,
.opponent-technique-badge.power-training .technique-effect-label { color: #dbe3ec; }
.player-technique-badge.power-yudan .technique-effect-label,
.opponent-technique-badge.power-yudan .technique-effect-label { color: #8bf0c2; }
.player-technique-badge.power-kodan .technique-effect-label,
.opponent-technique-badge.power-kodan .technique-effect-label { color: #a7d8ff; }
.player-technique-badge.power-meijin .technique-effect-label,
.opponent-technique-badge.power-meijin .technique-effect-label { color: #ffb09f; }
.player-technique-badge.power-kishin .technique-effect-label,
.opponent-technique-badge.power-kishin .technique-effect-label { color: #fff2a2; text-shadow: 0 1px 3px #000, 0 0 9px #d78b28, 0 0 14px #924ad6; }
body.no-anim .technique-rarity-text.rarity-ur,
body.no-anim .technique-power-text.power-kishin,
body.no-anim .technique-power-text.effect-transcendent,
body.no-anim .technique-power-text.role-substitute { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .technique-rarity-text.rarity-ur, .technique-power-text.power-kishin,
  .technique-power-text.effect-transcendent, .technique-power-text.role-substitute { animation: none; }
}
.opponent-technique-badge .technique-level-badge { right: 2px; bottom: 2px; font-size: 8px; }
.opponent-technique-badge .technique-rank-badge { top: 2px; left: 2px; font-size: 8px; min-width: 20px; }
.rarity-sr > .technique-rank-badge { color: #ffe8a3; border-color: #e0b74d; }
.rarity-ssr > .technique-rank-badge { color: #f7c8ff; border-color: #ce83e4; box-shadow: 0 0 8px rgba(203,90,232,.72); }
.rarity-ur > .technique-rank-badge { color: #fff4b0; border-color: #ffe073; background: rgba(74,24,85,.92); box-shadow: 0 0 9px #e7a83d, 0 0 14px rgba(183,72,228,.74); }
.active-technique-card-shell.rarity-sr,
.technique-effect-card-shell.rarity-sr { filter: drop-shadow(0 0 4px rgba(225,179,64,.72)); }
.active-technique-card-shell.rarity-ssr,
.technique-effect-card-shell.rarity-ssr { filter: drop-shadow(0 0 7px rgba(199,86,226,.8)); }
.active-technique-card-shell.rarity-ur,
.technique-effect-card-shell.rarity-ur { filter: drop-shadow(0 0 5px #f1ba46) drop-shadow(0 0 10px rgba(177,68,225,.9)); animation: techniqueRankUrAura .82s ease-in-out infinite alternate; }
@keyframes techniqueRankUrAura { to { filter: drop-shadow(0 0 8px #ffe37a) drop-shadow(0 0 15px rgba(202,90,244,1)); transform: scale(1.035); } }
body.no-anim .active-technique-card-shell.rarity-ur,
body.no-anim .technique-effect-card-shell.rarity-ur { animation: none; }
@keyframes activeTechniqueControlPulse {
  50% { opacity: 1; filter: brightness(1.15) saturate(1.14); transform: scale(1.025); }
}
@keyframes activeTechniqueFlame {
  0% { opacity: .66; transform: scale(.94, .96) rotate(-.7deg); }
  55% { opacity: 1; transform: scale(1.08, 1.06) rotate(.8deg); }
  100% { opacity: .8; transform: scale(1, 1.1) rotate(-.3deg); }
}
@keyframes activeTechniqueEmber {
  50% { opacity: 1; filter: brightness(1.22); transform: scale(1.04); }
}
.technique-menu-btn.is-warning {
  border-color: #e58a73; background: linear-gradient(180deg, #733c42, #382025); color: #ffe0d8;
}
.technique-menu-btn.is-disabled {
  animation: none; opacity: .58; filter: grayscale(1);
  border-color: #777; background: linear-gradient(180deg,#555,#303030); color: #ddd;
  box-shadow: none;
}
/* 3枚目の発動中は残り回数0でも、いま燃えている札まで使用済みの灰色にしない。 */
.technique-menu-btn.has-card-art.is-disabled {
  opacity: 1; filter: none;
}
.technique-menu-modal {
  align-items: flex-start; box-sizing: border-box;
  padding: max(14px, env(safe-area-inset-top, 0px)) 10px 14px;
  background: rgba(2, 4, 9, .42);
}
.technique-menu-card {
  position: relative; box-sizing: border-box; width: min(560px, calc(100vw - 20px));
  max-height: calc(100dvh - max(28px, env(safe-area-inset-top, 0px)));
  overflow-y: auto; padding: 17px 15px 15px; text-align: left;
  border-color: rgba(226, 183, 91, .58); background: linear-gradient(160deg, rgba(25,31,43,.94), rgba(9,12,19,.92) 72%);
  backdrop-filter: blur(4px);
  color: #fff4dc; box-shadow: 0 12px 42px rgba(0,0,0,.72), 0 0 0 1px rgba(255,224,151,.1);
}
.technique-menu-title { margin: 1px 44px 3px 0; color: #f7ddb0; font-size: 20px; line-height: 1.3; }
.technique-menu-card p.technique-menu-lead { margin: 0 36px 12px 0; color: #c9c2b6; font-size: 12px; line-height: 1.45; }
.technique-bar {
  width: 100%; max-width: 100%; box-sizing: border-box; display: grid; gap: 9px;
  padding: 10px; border: 1px solid rgba(213, 175, 86, .34); border-radius: 12px;
  background: rgba(11, 14, 21, .82); box-shadow: 0 4px 13px rgba(0,0,0,.28);
}
.technique-bar.hidden { display: none; }
.technique-bar-head { color: #f5dfac; font-size: 14px; font-weight: 900; text-align: left; padding: 0 3px; }
.technique-bar-head.is-warning { color: #ffb09b; }
.technique-rule-note { color: #c9c2b6; font-size: 12px; line-height: 1.4; padding: 0 3px; }
.technique-slider {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px;
  width: 100%; overflow: visible;
}
.technique-card-choice {
  position: relative; width: 100%; min-width: 0; min-height: 190px; height: auto; display: grid;
  grid-template-columns: 76px minmax(0,1fr); grid-template-rows: auto auto auto 1fr auto auto; gap: 4px 8px;
  margin: 0; padding: 8px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tech-color, #b58a2f) 65%, #fff 10%);
  border-radius: 8px; background: linear-gradient(145deg, #313949, #151a24); color: #fff4d4;
  text-align: left; opacity: .78; transition: opacity .16s, box-shadow .16s;
}
.technique-card-choice-art {
  grid-column: 1; grid-row: 1 / span 4; justify-self: center; width: 76px; height: 104px;
  position: relative; display: block;
}
.technique-card-choice-art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 5px; border: 1px solid rgba(255,255,255,.25);
}
.technique-card-name {
  grid-column: 2; grid-row: 1; align-self: start; min-width: 0; width: 100%;
  font-size: 14px; font-weight: 900; line-height: 1.25; text-align: left;
  white-space: normal; overflow-wrap: normal; word-break: keep-all;
}
.technique-card-meta { grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; color: #d8cda9; text-align: left; }
.technique-card-tags { grid-column: 2; grid-row: 3; color: #cbb8e4; font-size: 10.5px; font-weight: 800; line-height: 1.35; }
.technique-card-desc { grid-column: 1 / -1; grid-row: 5; color: #fff7e5; font-size: 12px; line-height: 1.45; }
.technique-card-status { grid-column: 1 / -1; grid-row: 6; color: #d8efcc; font-size: 11.5px; line-height: 1.35; }
.technique-card-status.is-blocked { color: #e0aaa0; }
.technique-card-choice > .technique-activate-btn { grid-column: 1 / -1; grid-row: 7; width: 100%; margin-top: 3px; }
.technique-card-choice.is-used .technique-card-meta { color: #ffb3a5; font-weight: 900; }
.technique-card-choice.is-selected {
  opacity: 1; border-color: #ffe29a;
  box-shadow: 0 0 0 1px var(--tech-color, #b58a2f), 0 0 11px color-mix(in srgb, var(--tech-color, #b58a2f) 62%, transparent);
}
.technique-card-choice.rarity-sr:not(.is-used):not(.is-unavailable) { box-shadow: inset 0 0 0 1px rgba(218,172,67,.2); }
.technique-card-choice.rarity-ssr:not(.is-used):not(.is-unavailable) { border-color: #b56ed0; box-shadow: inset 0 0 13px rgba(166,68,190,.28), 0 0 8px rgba(166,68,190,.25); }
.technique-card-choice.rarity-ur:not(.is-used):not(.is-unavailable) {
  border-color: #f2cf69; background: linear-gradient(145deg, #473052, #181622 72%);
  box-shadow: inset 0 0 16px rgba(187,71,219,.34), 0 0 13px rgba(244,187,70,.42);
}
.technique-card-choice.rarity-ur.is-selected:not(.is-used):not(.is-unavailable) { box-shadow: 0 0 0 1px #fff0aa, 0 0 19px rgba(234,148,48,.72), inset 0 0 18px rgba(176,69,220,.38); }
.technique-card-choice.rarity-ssr.is-selected:not(.is-used):not(.is-unavailable) { animation: techniqueChoiceSsrAura 1.35s ease-in-out infinite alternate; }
.technique-card-choice.rarity-ur.is-selected:not(.is-used):not(.is-unavailable) { animation: techniqueChoiceUrAura .9s ease-in-out infinite alternate; }
@keyframes techniqueChoiceSsrAura { to { box-shadow: 0 0 0 1px #e6b1f2, 0 0 15px rgba(190,75,219,.62), inset 0 0 15px rgba(172,62,201,.3); } }
@keyframes techniqueChoiceUrAura { to { box-shadow: 0 0 0 2px #fff0aa, 0 0 25px rgba(244,174,55,.88), 0 0 35px rgba(181,71,224,.52), inset 0 0 21px rgba(189,78,222,.45); } }
body.no-anim .technique-card-choice.rarity-ssr.is-selected,
body.no-anim .technique-card-choice.rarity-ur.is-selected { animation: none; }
.technique-card-choice.is-active { animation: techniquePulse .85s ease-in-out infinite; }
.technique-card-choice.is-used { opacity: .62; filter: grayscale(.72); }
.technique-card-choice.is-used.is-selected { border-color: #888; box-shadow: 0 0 0 1px #666; }
.technique-card-choice.is-unavailable { opacity: .5; filter: grayscale(1); border-color: #737373; }
.technique-card-choice.is-unavailable.is-selected { border-color: #aaa; box-shadow: 0 0 0 1px #666; }
.technique-card-choice.is-used::after {
  content: '使用済み'; position: absolute; right: 6px; top: 6px; z-index: 2;
  padding: 3px 6px; border-radius: 999px; background: rgba(102,31,26,.92); color: #fff;
  font-size: 10px; font-weight: 950; box-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.technique-selected-detail {
  display: grid; gap: 4px; padding: 10px 11px; border: 1px solid rgba(244,207,117,.34);
  border-radius: 10px; background: linear-gradient(145deg,rgba(70,48,94,.55),rgba(24,27,37,.78));
}
.technique-selected-title { color: #ffe3a5; font-size: 15px; font-weight: 950; }
.technique-selected-tags { color: #cbb8e4; font-size: 11px; font-weight: 800; }
.technique-selected-desc { color: #fff7e5; font-size: 13px; line-height: 1.5; }
.technique-action-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.technique-selection-status {
  flex: 1 1 auto; min-width: 0; padding-left: 3px; color: #e9dfc7; font-size: 12.5px;
  line-height: 1.4; white-space: normal;
}
.technique-selection-status.is-blocked { color: #d4a49a; }
.technique-activate-btn {
  flex: 0 0 auto; width: auto; min-height: 44px; margin: 0; padding: 7px 16px;
  border: 1px solid var(--tech-color, #b58a2f); border-radius: 999px;
  background: linear-gradient(180deg, #7b3d90, #3a174d); color: #fff4d4;
  font-size: 14px; font-weight: 900; white-space: nowrap;
}
.technique-activate-btn:disabled { opacity: .66; filter: none; }
.technique-activate-btn.is-active:disabled {
  opacity: 1; background: linear-gradient(180deg, #8151a0, #542768);
  box-shadow: 0 0 12px rgba(190, 115, 255, .5);
}
.technique-activate-btn.is-blocked:disabled {
  color: #d7d7d7; border-color: #777; background: linear-gradient(180deg, #555, #303030);
}
@media (max-width: 600px) {
  .technique-menu-card { width: calc(100vw - 16px); padding: 15px 10px 12px; }
  .technique-menu-card p.technique-menu-lead { margin-right: 32px; }
  .technique-slider { grid-template-columns: 1fr; }
  .technique-card-choice { min-height: 182px; height: auto; grid-template-columns: 68px minmax(0,1fr); padding: 7px; }
  .technique-card-choice-art { width: 64px; height: 92px; }
  .technique-action-row { align-items: stretch; flex-direction: column; }
  .technique-selection-status { min-height: 2.8em; font-size: 12px; }
  .technique-activate-btn { width: 100%; }
}
@keyframes techniquePulse {
  50% { filter: brightness(1.45); box-shadow: 0 0 18px var(--tech-color, #d7a847); transform: scale(1.035); }
}
#boardArea.guardian-descends { animation: guardianBoardAura 3.2s ease-out; }
#boardArea.technique-unleashed { animation: techniqueBoardAura 3.2s ease-out; }
#boardArea[class*="board-fortune-"] .board-frame {
  animation: boardFortuneAura 3.2s ease-out;
}
#boardArea.player-technique-active .board-frame::before {
  content: ""; position: absolute; inset: -3px; z-index: 5; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--active-tech-color, #c683ff) 45%, rgba(255,229,161,.5));
  border-radius: 5px;
  box-shadow: 0 0 7px color-mix(in srgb, var(--active-tech-color, #c683ff) 38%, transparent), inset 0 0 9px color-mix(in srgb, var(--active-tech-color, #c683ff) 8%, transparent);
  animation: playerTechniqueAura 1.5s ease-in-out infinite;
}
#boardArea.technique-ready-flash .board-frame { animation: techniqueReadyFlash 1.8s ease-out; }
@keyframes playerTechniqueAura {
  50% { filter: brightness(1.06); box-shadow: 0 0 11px 1px color-mix(in srgb, var(--active-tech-color, #c683ff) 42%, transparent), inset 0 0 12px color-mix(in srgb, var(--active-tech-color, #c683ff) 12%, transparent); }
}
@keyframes techniqueReadyFlash {
  35% { filter: brightness(1.16) saturate(1.25); }
}
@keyframes techniqueBoardAura {
  0%, 100% { filter: brightness(1) saturate(1); }
  18% { filter: brightness(1.42) saturate(1.7) contrast(1.08); box-shadow: 0 0 52px 17px rgba(238,181,67,.72); }
}
@keyframes guardianBoardAura {
  0% { filter: brightness(1) saturate(1); box-shadow: 0 0 0 rgba(255,221,121,0); }
  22% { filter: brightness(1.28) saturate(1.5); box-shadow: 0 0 40px 15px rgba(164,83,255,.7); }
  100% { filter: brightness(1) saturate(1); box-shadow: 0 0 0 rgba(255,221,121,0); }
}
@keyframes boardFortuneAura {
  0%, 100% { filter: brightness(1) saturate(1); box-shadow: 0 0 0 transparent; }
  24% { filter: brightness(1.2) saturate(1.35); box-shadow: 0 0 28px 10px color-mix(in srgb, var(--fortune-color, #d7a847) 62%, transparent); }
}
.cutin-bubble.cutin-guardian {
  background: linear-gradient(135deg, #3b155b, #802f9e 55%, #d09a35);
  color: #fff7d4; border-color: #ffe598; font-size: 16px; font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); box-shadow: 0 0 24px rgba(207,132,255,.85);
}
/* 作戦どおりに指せた一手のときだけ、一度だけ弾ませる（くり返さない） */
.plan-badge.is-live {
  border-color: #ffdf9a;
  animation: planPunch .55s ease-out;
}
@keyframes planPunch {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245, 200, 90, .55); }
  35%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(245, 200, 90, .3); }
  100% { transform: scale(1);    box-shadow: 0 0 0 10px rgba(245, 200, 90, 0); }
}
/* 効いた一手の上に浮かぶ札 */
/* 効いた一手の上に浮かぶ札。印だけでは何の作戦か分からないので、名前も載せる。 */
.fx-plan {
  position: absolute; transform: translate(-50%, -50%);
  padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(180deg, #ffdf9a, #e8a63c);
  color: #3a2408; font-size: 13px; font-weight: 900; white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .38);
  pointer-events: none; z-index: 2;
  animation: planPop 1.6s ease-out forwards;
}
@keyframes planPop {
  0%   { opacity: 0; transform: translate(-50%, -20%) scale(.72); }
  16%  { opacity: 1; transform: translate(-50%, -75%) scale(1.08); }
  28%  { transform: translate(-50%, -70%) scale(1); }
  74%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -125%) scale(1); }
}
/* 特殊能力の発動。良い能力は青、悪い癖は赤にして、作戦（金）と区別する。 */
.fx-plan.fx-plan-good { background: linear-gradient(180deg, #a8dcff, #3d8fd0); color: #06253d; }
.fx-plan.fx-plan-bad  { background: linear-gradient(180deg, #ffb3a3, #d05038); color: #3d0d06; }
/* 札の下の升を金色の輪で囲む */
.fx-cell.fx-plan-ring::before {
  border: 3px solid rgba(245, 200, 90, .95);
  box-shadow: 0 0 14px rgba(245, 200, 90, .7);
  border-radius: 8px;
  animation: planRing 1.2s ease-out forwards;
}
.fx-cell.fx-plan-ring.ring-good::before {
  border-color: rgba(120, 190, 245, .95); box-shadow: 0 0 14px rgba(120, 190, 245, .7);
}
.fx-cell.fx-plan-ring.ring-bad::before {
  border-color: rgba(240, 120, 95, .95); box-shadow: 0 0 14px rgba(240, 120, 95, .7);
}
@keyframes planRing {
  0%   { opacity: 0; transform: scale(1.5); }
  22%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
/* 動きを控える設定でも、何が起きたかは伝えたい。動かさずに出すだけにする。 */
@media (prefers-reduced-motion: reduce) {
  .fx-plan { animation: none; opacity: 1; transform: translate(-50%, -85%); }
  .fx-cell.fx-plan-ring::before { animation: none; opacity: .9; }
  /* 弾みも止める。効いていることは色と縁だけで伝わる。 */
  .plan-badge.is-live { animation: none; }
  .guardian-btn.is-active, #boardArea.guardian-descends { animation: none; }
  #boardArea[class*="board-fortune-"] .board-frame { animation: none; }
  #boardArea.player-technique-active .board-frame::before,
  #boardArea.technique-ready-flash .board-frame { animation: none; }
}

/* 棋譜再生では盤面から始めた縦スワイプもページスクロールとして扱う。
   通常対局の駒操作用 touch-action:manipulation を、そのまま感想戦へ持ち込まない。 */
body:has(#replay:not(.hidden)) {
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#replay:not(.hidden) {
  min-height: calc(100dvh - 58px);
  height: auto;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
#replay .board-frame,
#replay .board,
#replay .cell,
#replay .piece {
  touch-action: pan-y;
}

/* 「対局の演出」を切ったとき。盤の上の光と動きを一切出さない。
   指し手・時間・成績には触らない（見た目だけの設定）。
   JS 側でも出さないようにしているが、取りこぼしが無いようここでも止める。 */
body.no-anim .fx-layer,
body.no-anim .fx-plan { display: none !important; }
body.no-anim .plan-badge.is-live,
body.no-anim .turn-flag.mine,
body.no-anim .cell.check { animation: none !important; }
body.no-anim #boardArea.player-technique-active .board-frame::before,
body.no-anim #boardArea.technique-ready-flash .board-frame,
body.no-anim #boardArea[class*="board-fortune-"] .board-frame { animation: none !important; }

.fx-layer { position: absolute; pointer-events: none; z-index: 6; overflow: visible; }
.fx-cell {
  position: absolute; transform: translate(-50%, -50%);
  width: var(--cell); height: calc(var(--cell) * var(--cell-ratio));
  pointer-events: none;
}
.fx-cell::before, .fx-cell::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
/* 着手の光（先手=金・後手=青） */
.fx-cell.fx-move::before {
  inset: 14%;
  background: radial-gradient(circle, rgba(120,180,255,.6), rgba(120,180,255,0) 70%);
  animation: fx-pop .7s ease-out forwards;
}
.fx-cell.fx-move.gold::before { background: radial-gradient(circle, rgba(245,200,90,.65), rgba(245,200,90,0) 70%); }
/* 取り：赤い衝撃リング＋火花 */
.fx-cell.fx-capture::before {
  inset: 4%; border: 3px solid rgba(255,95,70,.9); background: none;
  animation: fx-ring .6s ease-out forwards;
}
.fx-cell.fx-capture::after {
  inset: 22%;
  background: radial-gradient(circle, rgba(255,150,60,.75), rgba(255,60,40,0) 70%);
  animation: fx-pop .6s ease-out forwards;
}
/* 成り：金色オーラ＋「成」 */
.fx-cell.fx-promote::before {
  inset: -8%;
  background: radial-gradient(circle, rgba(255,225,130,.8), rgba(255,205,80,0) 66%);
  animation: fx-pop 1.1s ease-out forwards;
}
.fx-cell.fx-promote::after {
  inset: 0; display: grid; place-items: center; border-radius: 0;
  content: '成'; color: #7a5210; font-weight: 900; font-size: calc(var(--cell) * .52);
  text-shadow: 0 0 8px rgba(255,235,160,.95);
  animation: fx-rise 1.1s ease-out forwards;
}
/* 王手：玉マスの赤警告 */
.fx-cell.fx-check::before {
  inset: -12%; background: none;
  border: 3px solid rgba(255,70,70,.92);
  box-shadow: 0 0 22px rgba(255,60,60,.6), inset 0 0 18px rgba(255,60,60,.5);
  animation: fx-check 1.35s ease-out forwards;
}
/* 詰み：盤全面フラッシュ */
.fx-flash { position: absolute; inset: 0; }
.fx-flash.mate-gold { background: radial-gradient(circle, rgba(255,210,90,.55), rgba(255,175,40,0) 72%); animation: fx-flash 1.5s ease-out forwards; }
.fx-flash.mate-red  { background: radial-gradient(circle, rgba(255,85,70,.55), rgba(200,30,30,0) 72%); animation: fx-flash 1.5s ease-out forwards; }

@keyframes fx-pop { 0%{opacity:0;transform:scale(.6)} 18%{opacity:1;transform:scale(1.06)} 60%{opacity:.85;transform:scale(1.2)} 100%{opacity:0;transform:scale(1.34)} }
@keyframes fx-ring { 0%{opacity:0;transform:scale(.5)} 20%{opacity:1} 100%{opacity:0;transform:scale(1.5)} }
@keyframes fx-rise { 0%{opacity:0;transform:translateY(20%) scale(.7)} 25%{opacity:1;transform:translateY(0) scale(1.05)} 75%{opacity:1} 100%{opacity:0;transform:translateY(-24%) scale(1.1)} }
@keyframes fx-check { 0%{opacity:0;transform:scale(.85)} 14%{opacity:.95;transform:scale(1)} 55%{opacity:.8;transform:scale(1.05)} 100%{opacity:0;transform:scale(1.1)} }
@keyframes fx-flash { 0%{opacity:0} 14%{opacity:.9} 46%{opacity:.5} 100%{opacity:0} }

/* 対局開始バナー */
.fx-start {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  pointer-events: none; opacity: 0;
}
.fx-start.show { animation: fx-start-life 1.9s ease-out forwards; }
.fx-start-inner {
  text-align: center;
  background: linear-gradient(150deg, rgba(30,22,14,.9), rgba(60,42,22,.9));
  border: 2px solid rgba(212,175,105,.6); border-radius: 16px;
  padding: 20px 42px; box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.fx-start-main { font-size: clamp(28px, 8vw, 52px); font-weight: 900; color: #ffe9b0; letter-spacing: .1em; text-shadow: 0 0 20px rgba(255,200,90,.5); }
.fx-start-sub { margin-top: 6px; font-size: 14px; color: #e8d6a8; letter-spacing: .08em; }
@keyframes fx-start-life { 0%{opacity:0;transform:scale(.8)} 16%{opacity:1;transform:scale(1.03)} 40%{transform:scale(1)} 80%{opacity:1} 100%{opacity:0;transform:scale(1.02)} }

/* 勝敗オーバーレイ */
.fx-result {
  position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center;
  background: rgba(10,8,6,.55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.fx-result.show { opacity: 1; pointer-events: auto; }
.fx-result-card {
  position: relative; text-align: center; padding: 32px 44px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(28,22,16,.94), rgba(48,36,22,.94));
  border: 2px solid rgba(212,175,105,.5); box-shadow: 0 16px 50px rgba(0,0,0,.5);
  transform: scale(.9); animation: fx-result-in .4s ease-out forwards; overflow: hidden;
}
@keyframes fx-result-in { to { transform: scale(1); } }
.fx-result-eyebrow { font-size: 13px; letter-spacing: .24em; color: #9aa3b8; margin-bottom: 8px; }
.fx-result-main { font-size: clamp(38px, 11vw, 68px); font-weight: 900; letter-spacing: .06em; }
.fx-result-sub { margin-top: 8px; font-size: 15px; color: #cbb98f; }
.fx-result-close { margin-top: 18px; font-size: 12px; color: #98917f; }
.fx-result.tone-victory .fx-result-main { color: #fff3c4; text-shadow: 0 0 26px rgba(255,196,86,.55); }
.fx-result.tone-victory .fx-result-eyebrow { color: #ffe5a3; }
.fx-result.tone-defeat .fx-result-main { color: #ffe7e2; text-shadow: 0 0 24px rgba(200,40,60,.5); }
.fx-result.tone-defeat .fx-result-eyebrow { color: #ffb6b2; }
.fx-result.tone-neutral .fx-result-main { color: #eee4cf; }
/* 紙吹雪 */
.fx-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-confetti i { position: absolute; top: -12%; width: 8px; height: 12px; border-radius: 2px; animation: fx-confetti-fall linear forwards; }
@keyframes fx-confetti-fall { 0%{transform:translateY(0) rotate(0)} 100%{transform:translateY(420px) rotate(540deg); opacity:.2} }

/* ============================ 用心棒カード・実績 ============================ */
#guardBtn { background: linear-gradient(180deg, #4a7ac0, #35609e); color: #fff; }
#cancelGuardBtn { background: var(--panel-3); }
.guard-title { font-size: 18px; margin: 0 0 8px; }
.guard-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.guard-list { display: flex; flex-direction: column; gap: 8px; }
.guard-card-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); cursor: pointer; text-align: left;
}
.guard-card-row:hover { background: var(--panel-3); }
.guard-icon { font-size: 24px; flex-shrink: 0; }
.guard-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.guard-info b { font-size: 14px; }
.guard-info small { font-size: 11px; color: var(--muted); }
.guard-count { font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.guard-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 16px; }
/* マイページのインベントリ */
.guard-inventory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.guard-inv-card { background: var(--panel-2); border-radius: 10px; padding: 10px 6px; text-align: center; border: 1.5px solid var(--line); }
.guard-inv-card.empty { opacity: .45; }
.guard-inv-icon { font-size: 26px; }
.guard-inv-name { font-size: 11px; font-weight: 700; margin-top: 2px; }
.guard-inv-count { font-size: 13px; font-weight: 800; color: var(--accent-ink); margin-top: 2px; }
.guard-hint { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 6px 0 0; }
/* 実績 */
.ach-list { display: flex; flex-direction: column; gap: 6px; }
.ach-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.ach-row.done { background: rgba(88,150,90,.14); }
.ach-mark { flex-shrink: 0; }
.ach-name { flex: 1; font-weight: 600; }
.ach-reward { font-size: 11px; color: var(--muted); }

/* ============================ ポイント経済・ショップ ============================ */
.points-badge {
  background: linear-gradient(180deg, #e7b84e, #c9992f); color: #4a3410;
  font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 12px;
  white-space: nowrap; align-self: center;
}
.shop-list { display: flex; flex-direction: column; gap: 10px; }
.shop-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
}
.shop-row .guard-icon { flex: 0 0 auto; }
.shop-row .guard-info { flex: 1 1 55%; min-width: 130px; }
.shop-row button { flex: 0 0 auto; width: auto; white-space: nowrap; }
/* 財布（マイページ） */
.wallet-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.wal-box { background: var(--panel-2); border-radius: 10px; padding: 12px; text-align: center; }
.wal-num { font-size: 24px; font-weight: 800; color: var(--wood-dark); font-variant-numeric: tabular-nums; }
.wal-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ============================ 観戦 ============================ */
.watch-list { display: flex; flex-direction: column; gap: 8px; }
.watch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
}
.watch-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.watch-vs { font-size: 14px; }
.watch-vs b { font-weight: 700; }
.watch-info small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.watch-row button { flex-shrink: 0; }
.spectate-badge {
  background: linear-gradient(180deg, #4a7ac0, #35609e); color: #fff;
  font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 10px;
  white-space: nowrap; align-self: center;
}

/* ============================ ソーシャルログイン ============================ */
.oauth-area { margin-top: 4px; }
.oauth-sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 10px 0; }
.oauth-sep::before, .oauth-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.google-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px; border: 1px solid #dadce0; border-radius: 8px; background: #fff; color: #3c4043;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.google-btn:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60,64,67,.2); }
.google-g {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  color: #fff; font-weight: 900; font-size: 13px; font-family: Arial, sans-serif;
  -webkit-text-stroke: 0; text-shadow: 0 0 2px rgba(0,0,0,.25);
}

/* ============================ 運営からのお知らせ ============================ */
.announce-area { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.announce-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--wood-dark);
  border-radius: 10px; padding: 11px 14px; box-shadow: var(--shadow-sm, 0 2px 8px rgba(60,40,15,.08));
}
.announce-card.important { border-left-color: var(--accent); background: rgba(181,70,47,.05); }
.announce-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.announce-badge {
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--panel-3); color: var(--wood-dark); white-space: nowrap;
}
/* 「重要」は accent の地に白。暗い側の accent だと差が足りないので、明るい朱にする。 */
.announce-card.important .announce-badge { background: #e0603f; color: #fff; }
.announce-title { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; }
.announce-date { font-size: 11px; color: var(--muted); white-space: nowrap; }
.announce-body { font-size: 13px; color: var(--ink, var(--text)); margin-top: 5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 管理ダイアログ */
#adminDialog textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; }
.ann-manage-list { display: flex; flex-direction: column; gap: 6px; }
.ann-manage-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--panel-2); border-radius: 8px; font-size: 13px; }
.ann-manage-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-manage-row button { flex-shrink: 0; }

/* ============================ シーズン・棋譜DB ============================ */
.rank-tabs { display: flex; gap: 8px; margin: 4px 0 14px; }
.rank-tab {
  flex: 1; width: auto; padding: 8px 10px; font-size: 13px; font-weight: 700;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); border-radius: 8px;
}
/* 白文字を朱の地に置くと 4.33 までしか出ない。塗りを一段濃くする。 */
.rank-tab.active { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.season-label { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 10px; }
.rank-row.podium { background: rgba(202,162,78,.12); border-radius: 8px; }
.rank-row.podium .rank-no.top { font-size: 20px; }
/* 棋譜DB */
.kifu-search { display: flex; gap: 6px; margin-bottom: 12px; }
.kifu-search input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.kifu-search button { width: auto; flex-shrink: 0; }
.kifu-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.kifu-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--panel-2); border-radius: 8px; }
.kifu-info { flex: 1; min-width: 0; cursor: pointer; }
.kifu-vs { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kifu-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kifu-row button { flex-shrink: 0; }
button.small.danger { background: var(--accent-2); color: #fff; }

/* 棋譜/局面のエクスポート */
.export-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.export-row button { flex: 1 1 auto; white-space: nowrap; }

/* ============================ AI感想戦の強化 ============================ */
.rp-arrow { position: absolute; pointer-events: none; z-index: 7; overflow: visible; }
#bestMoveBtn { width: auto; margin-left: 6px; }
/* ガイド（推奨手の矢印）の入切。出ているときは矢印と同じ緑、
   消しているときは灰色にして、押した結果がひと目で分かるようにする。 */
#bestMoveBtn.guide-on { background: var(--good); color: #fff; border-color: var(--good); font-weight: 800; }
#bestMoveBtn.guide-off { background: var(--panel-3); color: var(--muted); border-color: var(--line); }
.eval-graph { cursor: pointer; }
.blunder-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.blunder-head { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.blunder-none { font-size: 13px; color: var(--good); }
.blunder-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px;
  background: var(--panel-2); cursor: pointer; font-size: 13px;
}
.blunder-row:hover { background: var(--panel-3); }
.blunder-row.blunder { border-left: 3px solid var(--accent); }
.blunder-row.dubious { border-left: 3px solid var(--warn); }
.bl-mark { flex-shrink: 0; font-size: 11px; font-weight: 700; }
.blunder-row.blunder .bl-mark { color: var(--accent-ink); }
.blunder-row.dubious .bl-mark { color: var(--warn); }
.bl-move { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-loss { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }

/* ==================== #2 初心者補助 / #7 入玉宣言 ==================== */
/* 王手の玉を強調 */
.cell.check { box-shadow: inset 0 0 0 3px rgba(200,40,40,.85); animation: checkPulse 1s ease-in-out infinite; border-radius: 2px; }
@keyframes checkPulse { 0%,100%{ box-shadow: inset 0 0 0 3px rgba(200,40,40,.85);} 50%{ box-shadow: inset 0 0 0 3px rgba(200,40,40,.35);} }
/* 成り選択ダイアログ（駒姿を見せる） */
.promo-card { text-align: center; }
.promo-title { font-weight: 700; margin-bottom: 10px; }
.promo-choices { display: flex; gap: 12px; justify-content: center; }
.promo-choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: auto; padding: 12px 16px; border-radius: 12px; cursor: pointer;
}
.promo-choice img { width: 56px; height: 56px; object-fit: contain; }
.promo-label { font-size: 13px; line-height: 1.3; }
.promo-label b { display: block; font-weight: 700; font-size: 15px; }
/* 入玉宣言ボタン */
#declareBtn { background: #c9942f; color: #fff; }
#declareBtn:disabled { background: #d8c9a6; color: #6a5f45; cursor: not-allowed; }

/* ==================== #4 カスタム持ち時間 ==================== */
.custom-time { margin: 8px 0; font-size: 13px; }
.ct-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ct-fields { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.ct-fields label { display: inline-flex; align-items: center; gap: 6px; }
.ct-fields input { width: 64px; padding: 5px 6px; border: 1px solid var(--line, #cbb); border-radius: 6px; }

/* ==================== #5 得意戦法 ==================== */
.style-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.style-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.style-label { font-weight: 700; font-size: 13px; }
.style-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.style-bar { grid-column: 1 / -1; height: 7px; background: var(--panel-2, #ece5d5); border-radius: 4px; overflow: hidden; }
.style-fill { height: 100%; background: var(--accent, #b5462f); border-radius: 4px; }

/* ==================== #6 ミッション ==================== */
/* 枠は達成した行にだけ付く。透明な枠を先に置いて、行の高さを揃えておく。 */
.mission-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--panel-2, #f2ecde); margin-bottom: 8px; }
/* 達成した行。
   ★暗い地の画面に、明るい緑（#eef6ec）を敷いたままだった。文字色は明るいままなので、
     達成した行だけ字が読めなくなっていた。周りと同じ暗さのまま、緑で「済んだ」と示す。 */
.mission-row.done {
  background: linear-gradient(180deg, rgba(47, 122, 58, .30), rgba(47, 122, 58, .16));
  border: 1px solid rgba(96, 178, 116, .55);
}
.mission-row.done .mission-name { color: #eaf7ea; }
.mission-row.done .mission-prog { color: #b9d8bd; }
.mission-row.done .mission-claimed { color: #a9cbae; }
.mission-info { flex: 1; min-width: 0; }
.mission-name { font-weight: 700; font-size: 14px; }
.mission-reward { font-size: 12px; color: var(--accent-ink, #b5462f); font-weight: 700; }
.mission-bar { height: 6px; background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; margin: 5px 0 3px; }
.mission-fill { height: 100%; background: var(--good, #2f7a3a); border-radius: 3px; }
.mission-prog { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mission-claimed { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.mission-todo { font-size: 12px; color: #b0a68e; flex-shrink: 0; }

/* ==================== #9 研究フォルダ・お気に入り ==================== */
.kifu-star { width: auto; flex-shrink: 0; background: transparent; border: 1px solid var(--line, #cbb); }
.kifu-star.on { border-color: #e0a92e; }
.kifu-memo { font-size: 12px; color: var(--muted); margin-top: 3px; white-space: pre-wrap; }
.rp-memo-box { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rp-memo-box textarea { width: 100%; min-height: 60px; resize: vertical; padding: 7px 8px; border: 1px solid var(--line, #cbb); border-radius: 8px; font: inherit; box-sizing: border-box; }
#rpFavBtn.on { background: #fff5e0; border-color: #e0a92e; }

/* ==================== #10 不正対策・通報・ミュート ==================== */
.opp-actions { display: flex; gap: 6px; margin-top: 4px; }
.opp-mod { font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line, #cbb); background: transparent; cursor: pointer; width: auto; }
.opp-mod:hover { background: rgba(0,0,0,.05); }
.report-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.report-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 9px; background: var(--panel-2, #f2ecde); }
.report-row.handled { opacity: .55; }
.report-info { flex: 1; min-width: 0; }
.report-target { font-size: 12px; color: var(--muted); }
.report-reason { font-size: 14px; margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
.report-meta { font-size: 11px; color: var(--muted); }

/* ==================== #8 アリーナ ==================== */
#arenaBtn.arena-on { background: #b5462f; color: #fff; }
.arena-status { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.arena-count { font-weight: 700; }
.arena-standings { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.arena-row { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--panel-2, #f2ecde); font-size: 13px; }
.arena-row:nth-child(1) { background: #fff4d6; }
.arena-rank { font-weight: 700; text-align: center; color: var(--muted); }
.arena-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-score { font-weight: 700; color: var(--accent-ink, #b5462f); font-variant-numeric: tabular-nums; }
.arena-wl { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ==================== マイページ強化（タブ式） ==================== */
.profile-head { text-align: center; margin-bottom: 10px; }
.profile-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line, #e0d8c6); margin-bottom: 12px; overflow-x: auto; }
.ptab { flex: 0 0 auto; width: auto; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--muted); border-radius: 0; }
.ptab.active { color: var(--accent-ink, #b5462f); border-bottom-color: var(--accent, #b5462f); font-weight: 700; }
.profile-tab-content { min-height: 120px; }
/* 概要: ハイライトカード */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 12px 0; }
.stat-card { background: var(--panel-2, #f2ecde); border-radius: 12px; padding: 10px; text-align: center; }
.sc-icon { font-size: 20px; }
.sc-big { font-size: 16px; font-weight: 700; margin: 2px 0; white-space: nowrap; letter-spacing: -.01em; }
/* ラベルは1行で収める。「シーズン獲得P」が「シーズン獲得／P」と
   折れて、札の高さだけが伸びていた。入らなければ字を詰める。 */
.sc-label { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-ach { background: var(--panel-2, #f2ecde); border-radius: 12px; padding: 12px; }
.next-ach-name { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.na-bar { height: 8px; background: rgba(255,255,255,.14); border-radius: 4px; overflow: hidden; }
.na-fill { height: 100%; background: var(--good, #2f7a3a); }
.na-prog { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
/* 履歴: 復習リスト */
.review-row { background: var(--panel-2, #f2ecde); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.review-top { display: flex; align-items: center; gap: 10px; }
.review-opp { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-rd { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.review-rd.up { color: var(--good, #2f7a3a); }
.review-rd.down { color: var(--accent-ink, #b5462f); }
.review-meta { font-size: 12px; color: var(--muted); margin: 3px 0 8px; }
.review-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.review-actions button { width: auto; }
/* 分析 */
.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-box { background: var(--panel-2, #f2ecde); border-radius: 12px; padding: 12px; text-align: center; }
.side-name { font-weight: 700; }
.side-rec { font-size: 13px; margin: 4px 0; }
.side-rate { font-size: 22px; font-weight: 700; color: var(--accent-ink, #b5462f); }
.mode-stat-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--panel-2, #f2ecde); margin-bottom: 6px; font-size: 13px; }
.ms-label { font-weight: 700; }
.ms-rate { font-weight: 700; color: var(--accent-ink, #b5462f); font-variant-numeric: tabular-nums; }
.ms-max { font-size: 11px; color: var(--muted); }
.weak-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 9px; background: rgba(201,85,60,.14); margin-bottom: 6px; }
.weak-tag { flex-shrink: 0; font-weight: 700; font-size: 12px; color: var(--accent-ink, #b5462f); background: var(--panel-3); border-radius: 6px; padding: 2px 8px; }
.weak-detail { font-size: 13px; }
/* コレクション */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.badge { background: var(--panel-2, #f2ecde); border-radius: 10px; padding: 10px 6px; text-align: center; opacity: .55; }
.badge.got { opacity: 1; background: #fff6e0; }
.badge-icon { font-size: 22px; }
.badge-name { font-size: 12px; font-weight: 700; margin-top: 2px; }
.badge-prog { font-size: 11px; color: var(--muted); }
.chip-collection { display: flex; flex-wrap: wrap; gap: 6px; }
.coll-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2, #eee); color: #b0a68e; }
.coll-chip.seen { background: var(--accent, #b5462f); color: #fff; }

/* ==================== お気に入りタグ ==================== */
.rp-tag { padding: 6px 8px; border: 1px solid var(--line, #cbb); border-radius: 8px; font: inherit; }
.fav-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fav-filter button { width: auto; }
.fav-filter button.active { background: var(--accent, #b5462f); color: #fff; }
.kifu-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #fff4d6; color: #8a6d1f; margin-top: 2px; }

/* ==================== プロフィール装飾 ==================== */
/* 名前の行に並べる。1行まるごと使うほど大きくないので、
   独立させると左上にぽつんと浮き、名前が遠くなる。 */
.profile-avatar { font-size: 30px; line-height: 1; flex: 0 0 auto; }
/* 顔に選んだカード。絵文字と同じ場所に、同じくらいの大きさで置く。 */
.profile-avatar-img {
  width: 40px; height: 40px; object-fit: cover; object-position: top center;
  border-radius: 10px; border: 2px solid var(--line); flex: 0 0 auto; display: block;
}
.pname-face {
  width: 26px; height: 26px; object-fit: cover; object-position: top center;
  border-radius: 7px; border: 1px solid var(--line); flex: 0 0 auto; margin-right: -2px;
}
/* 獲得カードから選ぶ欄。人物画なので、絵文字の正方形ではなく縦長にする。
   .avatar-cell が後ろの行で aspect-ratio:1 を指定しているので、
   同じ詳細度だと後勝ちで負ける。2クラス指定にして、記述順に関係なく効かせる。 */
.avatar-grid-cards { grid-template-columns: repeat(5, 1fr); }
.avatar-cell.avatar-cell-card { aspect-ratio: 3/4; padding: 2px; overflow: hidden; }
.avatar-cell.avatar-cell-card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 7px; display: block; }
.profile-namerow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* 自分の画面では、ここを押しても設定へ行ける。タブが横に流れて
   「設定」が画面の外に隠れることがあるため、名前からも辿れるようにする。 */
.profile-namerow.is-editable { cursor: pointer; border-radius: 12px; padding: 4px 10px; margin: 0 -10px; }
.profile-namerow.is-editable:hover { background: var(--panel-2); }
.profile-namerow.is-editable::after { content: '✎'; font-size: 13px; color: var(--muted); }
.profile-namerow .profile-name { margin: 0; }
.profile-title { font-size: 12px; font-weight: 700; color: #8a6d1f; background: #fff4d6; border-radius: 999px; padding: 2px 10px; }
.profile-bio { font-size: 13px; color: var(--muted); margin-top: 6px; white-space: pre-wrap; }
.opp-title { font-size: 10px; font-weight: 700; color: #8a6d1f; background: #fff4d6; border-radius: 999px; padding: 1px 6px; margin-left: 5px; }
/* 装飾エディタ */
.deco-editor { display: flex; flex-direction: column; gap: 6px; background: var(--panel-2, #f2ecde); border-radius: 12px; padding: 12px; }
.deco-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.avatar-cell { width: 100%; aspect-ratio: 1; font-size: 22px; background: var(--panel-2); border: 2px solid transparent; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.avatar-cell.on { border-color: var(--accent, #b5462f); background: var(--panel-3); }
.deco-select, .deco-input { padding: 8px 10px; border: 1px solid var(--line, #cbb); border-radius: 8px; font: inherit; width: 100%; box-sizing: border-box; }
.deco-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 6px; cursor: pointer; }

/* ==================== モード整理（クイックマッチ中心） ==================== */
.quick-mode-label { text-align: center; font-size: 13px; color: var(--muted); margin: 8px 0 4px; }
.mode-change { margin-top: 6px; }
.mode-change > summary { cursor: pointer; font-size: 13px; color: var(--accent-ink, #b5462f); text-align: center; list-style: none; padding: 6px; }
.mode-change > summary::-webkit-details-marker { display: none; }
.mode-change > summary::before { content: '⚙ '; }
.mode-change[open] > summary::before { content: '▲ '; }
.mode-change .mode-buttons { margin-top: 8px; }
.mode-btn[data-mode="5m"].active span { color: var(--accent-ink, #b5462f); font-weight: 700; }
.mode-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }

/* ==================== 名人への道（ストーリー） ==================== */
.story-banner {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; margin: 4px 0 14px; border: none; border-radius: 16px;
  background: linear-gradient(120deg, #3a2b1a 0%, #6b4a24 60%, #b5462f 130%);
  color: #fbeed0; box-shadow: 0 3px 12px rgba(58,43,26,.28);
}
.story-banner-icon { font-size: 34px; flex-shrink: 0; }
.story-banner-text { flex: 1; min-width: 0; white-space: normal; }
.story-banner-title { font-size: 18px; font-weight: 800; letter-spacing: .04em; white-space: normal; }
.story-banner-sub { font-size: 12px; opacity: .9; margin-top: 2px; white-space: normal; line-height: 1.35; }
.story-banner-go { font-size: 20px; opacity: .8; flex-shrink: 0; }
.story-progress { margin-bottom: 12px; }
/* 継承枠が足りているか。持っている家宝で足りるのかまで、その場で分かるようにする。 */
.heirloom-help {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin: 8px 0 10px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.heirloom-line { font-size: 13px; font-weight: 800; }
.heirloom-line.ok { color: var(--good); }
.heirloom-line.short { color: var(--accent-ink); }
.heirloom-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.heirloom-help button { width: auto; }
/* 持ち時間の選び（道場・強豪列伝で共通）。1行に収めて、選ぶ所を右に揃える。 */
.dojo-time-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.dojo-time-setting select { flex: 0 0 auto; min-width: 132px; }
.story-prog-label { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.story-prog-bar { height: 8px; background: rgba(255,255,255,.14); border-radius: 4px; overflow: hidden; }
.story-prog-fill { height: 100%; background: linear-gradient(90deg, #c9942f, #b5462f); border-radius: 4px; }
.story-complete { margin-top: 8px; font-weight: 700; color: var(--accent-ink, #b5462f); }
.story-chapters { display: flex; flex-direction: column; gap: 10px; }
.story-chapter {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--panel-2, #f2ecde); flex-wrap: wrap;
}
/* 撃破済みの行。暗い地の上なので、緑も暗い側では沈む。薄く緑を混ぜる程度にする。 */
.story-chapter.cleared { background: rgba(88,150,90,.18); }
/* 未解放は薄くするが、薄くしすぎると読めない。暗い地では .6 でも沈む。 */
.story-chapter.locked { opacity: .78; }
.sc-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--panel-3); color: var(--wood); }
.story-chapter.cleared .sc-num { background: var(--good, #2f7a3a); color: #fff; }
.sc-avatar { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sc-locked-img { filter: grayscale(1) brightness(.6); }
.sc-info { flex: 1 1 60%; min-width: 0; }
.sc-name { font-weight: 700; font-size: 14px; }
/* accent はそのままだと暗い地に沈む。明るい側の朱にする。 */
.sc-rank { font-size: 12px; color: #ff9377; }
.sc-narr { font-size: 12px; color: var(--muted); margin: 3px 0; }
.sc-reward { font-size: 12px; font-weight: 700; color: #f0cf7a; }
.story-chapter button { width: auto; flex-shrink: 0; }
.sc-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; flex-basis: 100%; justify-content: flex-end; align-items: center; margin-top: 2px; }
.sc-actions button { white-space: nowrap; }
.sc-done { font-size: 13px; font-weight: 800; color: #7fd98d; margin-right: auto; }

/* ==================== 表示名 ==================== */
.deco-hint { font-size: 11px; color: var(--muted); margin-top: -2px; }

/* ==================== 管理者コンソール ==================== */
.admin-tabs { flex-wrap: wrap; }
.admin-pane { margin-top: 8px; }
.admin-user-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.admin-user { background: var(--panel-2, #f2ecde); border-radius: 10px; padding: 10px 12px; }
.account-password { display: grid; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #d8cdb4); }
.account-password input { width: 100%; box-sizing: border-box; }
.account-password button { justify-self: start; }
.admin-password-reset-result { margin: 10px 0 0; padding: 9px 10px; border-radius: 8px; background: #fff3cf; color: #5a3d20; display: grid; gap: 5px; }
.admin-password-reset-password { user-select: all; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 800; font-size: 16px; letter-spacing: .04em; }
.au-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.au-name { font-weight: 700; }
.au-id { font-size: 12px; color: var(--muted); }
.au-rating { font-size: 12px; color: var(--accent-ink, #b5462f); font-weight: 700; margin-left: auto; }
.au-stats { font-size: 12px; color: var(--muted); margin: 3px 0 2px; }
/* 入会日・最終ログイン。日付が縦に揃うよう等幅の数字にする。 */
.au-dates { font-size: 12px; color: var(--muted); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.au-sortbar { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; flex-wrap: wrap; }
.au-sortbar label { color: var(--muted); }
.au-sort-select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); }
.au-form { display: flex; gap: 8px; flex-wrap: wrap; }
.au-field { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.au-input { width: 64px; padding: 4px 6px; border: 1px solid var(--line, #cbb); border-radius: 6px; }
.au-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.au-actions button { width: auto; }
.inquiry-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.inquiry-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 9px; background: var(--panel-2, #f2ecde); }
.inquiry-row.handled { opacity: .55; }
.inquiry-info { flex: 1; min-width: 0; }
.inquiry-cat { font-size: 12px; font-weight: 700; color: var(--accent-ink, #b5462f); }
.inquiry-msg { font-size: 14px; margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
.inquiry-meta { font-size: 11px; color: var(--muted); }
.inquiry-row button { width: auto; flex-shrink: 0; }

/* 道場ロックボタンは折り返し可・小さめ（文字切れ防止） */
.char-card button.char-lock { white-space: normal; font-size: 11px; line-height: 1.25; padding: 6px 4px; }

/* ストーリーの編（アーク）区切り */
.story-arc { font-weight: 800; font-size: 14px; color: var(--accent-ink, #b5462f); margin: 12px 0 4px; padding-bottom: 4px; border-bottom: 2px solid var(--line, #e0d8c6); }
/* 修行編。物語の章ではなく稽古の相手なので、色を落として本編と区別する。 */
.story-arc.training-arc {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  color: #6f7d54; border-bottom-color: #b9c39c; margin-top: 22px;
}
.training-note { font-size: 11px; font-weight: 600; color: var(--muted, #7d7364); }
.story-arc.story-arc-sub { font-size: 12.5px; color: var(--muted, #7d7364); border-bottom-width: 1px; margin: 10px 0 3px; }
.story-chapter.training-row { background: rgba(160, 172, 130, .1); }
.story-chapter.training-row .sc-num { color: #6f7d54; }

/* 管理: キャラ登場制御 */
.admin-char-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.admin-char { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--panel-2, #f2ecde); cursor: pointer; }
.admin-char.off { opacity: .5; }
.ac-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.ac-info { flex: 1; min-width: 0; }
.ac-name { font-weight: 700; font-size: 13px; }
.ac-rank { font-size: 11px; color: var(--muted); }
.ac-toggle { width: 20px; height: 20px; flex-shrink: 0; }

/* 管理: キャラ強さ調整 */
.admin-char { flex-direction: column; align-items: stretch; cursor: default; }
.admin-char-search { width: 100%; margin-bottom: 6px; }
.ac-listhint { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
/* コンパクト一覧行 */
.ac-head { display: flex; align-items: center; gap: 10px; }
.ac-chips { display: flex; gap: 5px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.ac-lvchip { font-size: 11px; font-weight: 800; background: var(--accent); color: #fff; padding: 1px 7px; border-radius: 6px; }
.ac-tierchip { font-size: 11px; font-weight: 900; color: #fff; padding: 1px 7px; border-radius: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ac-rankchip { font-size: 11px; color: var(--muted); }
.ac-detail-btn { flex-shrink: 0; width: auto; white-space: nowrap; }
.ac-detail { margin-top: 8px; }
.ac-detail.hidden { display: none; }
.ac-unlock { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 8px; padding: 6px 8px; background: rgba(122,92,192,.08); border-radius: 7px; cursor: pointer; }
.ac-unlock input { width: 16px; height: 16px; }
.opp-band-adjust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; padding: 6px 8px; background: rgba(0,0,0,.04); border-radius: 7px; }
.opp-band-adjust .oba-label { font-size: 12px; color: var(--muted); }
.opp-band-adjust input { width: 80px; }
.opp-band-adjust button { width: auto; }
.ac-top { display: flex; align-items: center; gap: 10px; }
.ac-toggle-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; flex-shrink: 0; cursor: pointer; }
.ac-toggle-label input { width: 18px; height: 18px; }
.ac-strength { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #ddd); }
.ac-def { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.ac-str-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ac-str-detail { margin-top: 6px; }
.ac-str-hint { font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.ac-field-lv span { font-weight: 700; color: var(--accent-ink); }
.ac-field-lv input { border: 2px solid var(--accent); font-weight: 700; font-size: 16px; width: 88px; }
.ac-str-actions { display: flex; gap: 6px; margin-top: 8px; }
.ac-str-actions button { width: auto; }

/* ==================== 棋士育成 ==================== */
#traineeDialog { align-items: stretch; }
#traineeDialog .trainee-card {
  width: min(720px, 96vw);
  max-height: min(94vh, 920px);
  overflow: hidden;
  position: relative;
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
}
#traineeDialog .modal-close {
  z-index: 20;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  font-size: 28px;
  line-height: 1;
}
#traineeDialog .meijin-logo { max-width: 230px; margin: 0 auto 4px; }
#traineeBody { min-height: 0; display: flex; flex-direction: column; flex: 1; }
.trainee-shell { min-height: 0; width: 100%; display: flex; flex-direction: column; flex: 1; }
.trainee-scroll { min-height: 0; overflow-y: auto; padding: 0 2px 12px; flex: 1; }
.trainee-head { text-align: center; margin-bottom: 6px; }
/* 育成棋士の顔 */
.trainee-face { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; }
.trainee-face-img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; border: 2px solid #dcc79a; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.trainee-face-ph { width: 84px; height: 84px; border-radius: 14px; display: grid; place-items: center; font-size: 40px; background: var(--panel-2, #f2ecde); border: 2px dashed #cdbf9f; }
.trainee-face-pick { width: auto; }
.trainee-hero { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.trainee-face-compact { margin: 0; flex-shrink: 0; }
.trainee-face-compact .trainee-face-img, .trainee-face-compact .trainee-face-ph { width: 68px; height: 68px; border-radius: 14px; }
.trainee-face-compact .trainee-face-ph { font-size: 30px; }
.trainee-identity { min-width: 0; flex: 1; }
.trainee-hero-sub { margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 700; }
.trainee-career-route {
  display: inline-block; margin-right: 3px; padding: 1px 6px; border-radius: 999px;
  color: #fff; background: #8d6c37; font-size: .86em; font-weight: 900; line-height: 1.45;
  vertical-align: .08em; white-space: nowrap;
}
.trainee-career-route.route-dojo_child { background: #477c55; }
.trainee-career-route.route-shoreikai { background: #7e6439; }
.trainee-career-route.route-prodigy_pro { background: linear-gradient(90deg, #8f3a2b, #bd8525); }
.trainee-career-route.route-legacy_standard { background: #74706a; }
.trainee-competition {
  display: inline-block; box-sizing: border-box; max-width: 100%; margin-top: 5px; padding: 3px 9px;
  border: 1px solid rgba(181, 138, 47, .4); border-radius: 999px;
  background: rgba(244, 236, 216, .82); color: #705224;
  font-size: clamp(9px, 2.45vw, 11px); font-weight: 800; line-height: 1.35;
  white-space: nowrap; overflow-wrap: normal;
}
.trainee-competition.is-elite,
.trainee-competition.is-legend {
  color: #fff4cf; border-color: rgba(255, 218, 119, .72);
  background: linear-gradient(100deg, #943828, #c58b27);
  box-shadow: 0 1px 7px rgba(139, 61, 31, .26);
}
.trainee-face-actions { display: flex; gap: 6px; margin-top: 7px; }
.trainee-face-actions button { width: auto; padding: 5px 10px; }
/* 画像・名前を直接タップして変更（顔/名前ボタンは廃止）。タップできる目印を付ける */
.trainee-face.editable { position: relative; cursor: pointer; }
.trainee-edit-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: rgba(40,28,14,.82); color: #fff; font-size: 11px;
  display: grid; place-items: center; border: 1.5px solid #fff;
  pointer-events: none;
}
.trainee-name.editable { cursor: pointer; text-decoration: underline dotted rgba(120,90,40,.6); text-underline-offset: 3px; }
/* 顔選びグリッド */
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.trainee-avatar-picker {
  min-height: 0;
  flex: 1 1 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px calc(16px + env(safe-area-inset-bottom, 0px));
}
.avatar-opt { border: 2px solid transparent; border-radius: 10px; padding: 6px; cursor: pointer; text-align: center; background: var(--panel-2, #f2ecde); }
.avatar-opt.sel { border-color: var(--accent, #b5462f); }
.avatar-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; }
.avatar-none { width: 100%; aspect-ratio: 1/1; display: grid; place-items: center; font-size: 30px; border-radius: 8px; background: #ece3d2; }
.avatar-cap { font-size: 10px; margin-top: 3px; color: var(--muted); white-space: normal; line-height: 1.3; }
.trainee-name { font-size: 20px; font-weight: 800; }
.trainee-rank { display: inline-block; margin-top: 4px; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #c9942f, #b5462f); border-radius: 999px; padding: 3px 16px; }
/* 残りターン（月数）: 段位の近くに大きく。残り少ないほど強調（重要性を伝える） */
.trainee-remain { display: inline-block; margin-top: 6px; font-size: 17px; font-weight: 900; letter-spacing: .02em; color: #5b4327; background: #f4ecd8; border: 1.5px solid #d8c191; border-radius: 999px; padding: 3px 14px; }
.trainee-remain.warn { color: #fff; background: linear-gradient(90deg, #e0902f, #c9742a); border-color: #c9742a; }
.trainee-remain.urgent { color: #fff; background: linear-gradient(90deg, #d64b3a, #b5362a); border-color: #b5362a; animation: remainPulse 1.4s ease-in-out infinite; }
@keyframes remainPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(214,75,58,.5); } 50% { box-shadow: 0 0 0 6px rgba(214,75,58,0); } }
/* そばに居る者たち（妻・守護神・飼い犬／飼い猫）。
   名前の下に横並びで置き、増えたぶんだけ折り返す。 */
.trainee-companions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; }
.trainee-companion {
  width: auto; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; white-space: nowrap;
}
.trainee-companion:hover { text-decoration: underline; }
.trainee-companion.is-spouse { color: #b5567a; }
.trainee-companion.is-spouse:hover { color: #8f365b; }
.trainee-companion.is-guardian { color: #8a5fb0; }
.trainee-companion.is-guardian:hover { color: #6b3f92; }
.trainee-companion.is-pet { color: #3f8f6b; }
.trainee-companion.is-pet:hover { color: #2c6e50; }
.trainee-condition-alert {
  display: flex; align-items: center; gap: 8px; box-sizing: border-box;
  width: 100%; margin: -2px 0 7px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: 9px; line-height: 1.3;
}
.trainee-condition-alert .tca-label { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
.trainee-condition-alert .tca-text { min-width: 0; font-size: 11.5px; font-weight: 800; }
.trainee-condition-alert.is-low {
  color: #8a2f23; border-color: #e6aa96; background: #fff0e8;
}
.trainee-condition-alert.is-high {
  color: #735112; border-color: #d8bc65; background: linear-gradient(90deg, #edf8eb, #fff5d4);
  box-shadow: 0 1px 6px rgba(174,132,28,.12);
}
.trainee-sum { display: flex; justify-content: center; gap: 14px; font-size: 13px; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.trainee-dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.trainee-metric { background: #f7f1e7; border: 1px solid #e5d8c2; border-radius: 8px; padding: 7px 8px; min-width: 0; }
.tm-label { display: block; font-size: 10px; color: var(--muted); font-weight: 700; }
.tm-value { display: block; margin-top: 2px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trainee-style { display: flex; align-items: center; gap: 8px; background: var(--panel-2, #f2ecde); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.ts-label { font-size: 13px; color: var(--muted); }
.ts-val { font-weight: 700; flex: 1; }
.trainee-style button { width: auto; flex-shrink: 0; }
.trainee-max { text-align: center; font-weight: 800; color: var(--accent-ink, #b5462f); margin: 8px 0; }
.tr-bar { height: 9px; background: #ded5c2; border-radius: 5px; overflow: hidden; margin-bottom: 4px; }
.tr-bar-fill { height: 100%; border-radius: 5px; }
.tr-bar-fill.xp { background: var(--good, #2f7a3a); }
.tr-bar-fill.fatigue { background: linear-gradient(90deg, #6fae6a, #d38b2f, #b5462f); }
.tr-bar-fill.cond { background: linear-gradient(90deg, #b5462f, #d38b2f, #6fae6a); } /* 高いほど良い */
.tr-bar-fill.age { background: linear-gradient(90deg, #8aa6c8, #6a7f9c); }
.tr-bar-fill.mentor { background: linear-gradient(90deg, #c9a24a, #d4af37); }
.tr-bar-fill.rival { background: linear-gradient(90deg, #b5462f, #d3542f); }
/* 才能ランクと上限 */
.st-talent { font-weight: 800; font-size: 11px; width: 18px; text-align: center; border-radius: 5px; padding: 1px 0; color: #fff; }
.talent-S { background: #b5462f; }
.talent-A { background: #c9942f; }
.talent-B { background: #6a7f9c; }
.talent-C { background: #8b8577; }
.talent-D { background: #a09a8c; }
.stat-train-row.capped { opacity: 0.72; }
/* 能力の現在グレード（D/C/B/A/S）
   ここは「いま実際にどこまで来たか」を見せる場所なので、
   上のランクほど手をかけて、S に届いた時にちゃんと嬉しくなるようにする。
   左の才能バッジ（.st-talent）は素質の表示なので、こちらは触らない。
   色そのものは今までどおり（A=金 / S=朱）。豪華さだけを足していく。 */
.st-grade { display: inline-block; position: relative; overflow: hidden;
  min-width: 22px; text-align: center; color: #fff;
  font-weight: 900; font-size: 14px; border-radius: 6px; padding: 1px 6px;
  letter-spacing: .02em; }

/* D・C — まだ道半ば。平らなまま */
.st-grade.talent-D { background: #a09a8c; }
.st-grade.talent-C { background: #8b8577; }

/* B — わずかに立体感 */
.st-grade.talent-B {
  background: linear-gradient(160deg, #8296b4, #6a7f9c 70%, #5d7290);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

/* A — 金の照り。ふちと落ち影で浮かせる */
.st-grade.talent-A {
  background: linear-gradient(160deg, #e8bf6b, #c9942f 55%, #a87a22);
  border: 1px solid rgba(255,236,190,.55);
  padding: 0 5px;   /* border のぶんを戻す */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 4px rgba(160,110,20,.35);
  text-shadow: 0 1px 1px rgba(90,60,10,.5);
}

/* S — 最上位。金のふち・朱の照り・淡い光暈、そして光が流れる */
.st-grade.talent-S {
  background: linear-gradient(160deg, #e0a44a, #c14a2c 45%, #8f2f1f);
  border: 1px solid rgba(255,224,160,.85);
  padding: 0 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 5px rgba(90,20,10,.45),
    0 0 0 1px rgba(120,40,20,.25),
    0 2px 8px rgba(190,80,45,.45);
  text-shadow: 0 1px 2px rgba(80,20,10,.6);
}
/* 光の帯が斜めに流れる。うるさくならないよう、間を空けてゆっくり通す */
.st-grade.talent-S::after {
  content: ''; position: absolute; inset: -40% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: stGradeShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stGradeShine {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
/* 動きが苦手な人には光を流さない（見た目の格は border と影で足りている） */
@media (prefers-reduced-motion: reduce) {
  .st-grade.talent-S::after { animation: none; opacity: 0; }
}
.st-bar { position: relative; }
.st-cap { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(0,0,0,0.45); }   /* いまの上限（段位） */
.st-cap2 { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(0,0,0,0.16); }  /* 素質の上限 */
.st-bar-fill.at-cap { background: #c9942f; }  /* 段位の上限で頭打ち＝対局のサイン */
/* 素の才能の上限を超えて伸びた分。継承と祝福でしか届かないので、金の斜線で別物として見せる。 */
.st-bar-over {
  position: absolute; top: 0; bottom: 0; border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(-45deg, #ffd86b 0 3px, #b8791a 3px 6px);
  box-shadow: 0 0 7px rgba(255, 200, 80, .75), inset 0 0 0 1px rgba(255, 240, 190, .55);
}
.stat-train-row.broke { opacity: 1; }              /* 頭打ちの薄さは、突破した行には要らない */

/* 師匠の見立て。棒の並びだけでは「どこまで行けるのか」が読み取れないので、
   器といまの実力を並べ、ひとこと添える。 */
.scout-card {
  background: linear-gradient(180deg, rgba(255, 250, 238, .96), rgba(246, 238, 220, .96));
  border: 1px solid rgba(160, 132, 84, .35); border-left: 4px solid #c9942f;
  border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px;
}
.scout-head { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #8a6b32; }
.scout-rows { display: flex; gap: 8px; margin: 7px 0 6px; flex-wrap: wrap; }
.scout-cell {
  flex: 1 1 90px; display: flex; flex-direction: column; gap: 2px;
  background: rgba(255, 255, 255, .55); border-radius: 8px; padding: 5px 8px;
}
.scout-label { font-size: 10.5px; color: var(--muted, #7d7364); letter-spacing: .04em; }
.scout-val { font-size: 15px; font-weight: 800; color: #3a2f20; font-variant-numeric: tabular-nums; background: none; }
.scout-val.talent-S { color: #b8860b; }
.scout-val.talent-A { color: #b5462f; }
.scout-val.scout-stars { color: #c9942f; letter-spacing: 1px; font-size: 14px; }
.scout-say { margin: 0; font-size: 13px; line-height: 1.6; color: #4a3f2e; font-weight: 600; }
.scout-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted, #7d7364); }
.st-num.over { color: #d69a12; text-shadow: 0 0 8px rgba(255, 205, 90, .55); }
/* サイトロゴ（将棋「名人道」）— ログイン画面のタイトル */
.site-logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 2px auto 0; }
.lobby-site-logo { max-width: 210px; margin-bottom: 10px; }
.settings-company {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line);
  text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .08em;
}
.site-tagline { text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 12px; }
/* 名人への道（棋士育成）— 看板バナーとロゴ */
.meijin-banner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;
  aspect-ratio: 2.58 / 1; min-height: 168px; padding: 14px 12px 12px; margin: 12px 0 10px; border: none; border-radius: 16px;
  background: radial-gradient(120% 140% at 50% 0%, #2a1a10 0%, #150d07 70%); box-shadow: 0 4px 16px rgba(0,0,0,0.28); cursor: pointer; }
.meijin-banner:hover { filter: brightness(1.08); }
.meijin-banner-logo { display: block; width: auto; max-width: min(100%, 420px); height: auto; max-height: clamp(88px, 19vw, 118px); object-fit: contain; margin: 0 auto; }
#storyBanner .meijin-banner-logo { max-width: min(114%, 520px); max-height: clamp(112px, 24vw, 150px); margin: -2px auto 2px; }
.meijin-banner-sub { color: #f0d9a8; font-size: 13px; font-weight: 700; margin-top: 6px; white-space: normal; }
.meijin-banner-go { color: #ffca6b; font-size: 12px; font-weight: 800; margin-top: 6px; }
.meijin-logo { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto 6px; }
.trainee-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; margin: 0 -2px 6px; position: sticky; top: 0; background: #fff; z-index: 2; }
.trainee-tab { flex: 0 0 auto; width: auto; padding: 8px 12px; border-radius: 999px; border: 1px solid #e0d2b9; background: #f7f1e7; color: #6a4a1a; font-size: 13px; font-weight: 800; white-space: nowrap; }
.trainee-tab.active { background: linear-gradient(90deg, #c9942f, #b5462f); color: #fff; border-color: transparent; }
.trainee-panes { min-height: 0; }
.trainee-pane { min-height: 0; }
.trainee-pane.hidden { display: none; }
.trainee-next-card { border: 1.5px solid #d8c497; background: #fff7e8; border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; }
.tn-title { font-weight: 900; font-size: 16px; }
.tn-text { margin-top: 3px; font-size: 12px; line-height: 1.55; color: var(--muted); white-space: normal; }
.trainee-sticky-action { margin: 0 -16px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid #e7dccb; box-shadow: 0 -4px 14px rgba(0,0,0,.08); display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; }
.trainee-action-caption { min-width: 0; font-size: 12px; color: var(--muted); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trainee-main-action { width: 100%; min-width: 0; padding: 10px 14px; white-space: nowrap; }
.trainee-compact-summary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.trainee-summary-pill {
  min-width: 0; padding: 3px 8px; border-radius: 999px; background: #f7f1e7; border: 1px solid #e0d2b9;
  color: #6a4a1a; font-size: 11px; font-weight: 800; white-space: nowrap;
}
.trainee-summary-pill.skill { color: #fff; background: linear-gradient(90deg, #7b5cc0, #b5462f); border-color: transparent; }
.trainee-bottom-context { grid-column: 1 / -1; min-width: 0; }
.trainee-bottom-panel { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#traineeBody[data-tab="home"] .trainee-bottom-panel[data-tab="home"],
#traineeBody[data-tab="month"] .trainee-bottom-panel[data-tab="month"],
#traineeBody[data-tab="growth"] .trainee-bottom-panel[data-tab="growth"],
#traineeBody[data-tab="gear"] .trainee-bottom-panel[data-tab="gear"],
#traineeBody[data-tab="battle"] .trainee-bottom-panel[data-tab="battle"],
#traineeBody[data-tab="record"] .trainee-bottom-panel[data-tab="record"] { display: grid; }
.trainee-bottom-chip {
  min-width: 0;
  padding: 5px 7px;
  border-radius: 8px;
  background: #f7f1e7;
  border: 1px solid #e0d2b9;
}
.tbc-label {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.1;
}
.tbc-value {
  display: block;
  margin-top: 1px;
  color: #5f421d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trainee-fill-panel {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e0d2b9;
  background: linear-gradient(180deg, #fffaf1, #f3eadc);
}
.trainee-fill-title {
  margin-bottom: 7px;
  color: #6a4a1a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}
.trainee-fill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.trainee-fill-chip {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid #dfd2bd;
  background: rgba(255,255,255,.58);
}
.tfc-label, .tfc-sub {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
}
.tfc-value {
  display: block;
  margin: 2px 0 1px;
  color: #3b2b1c;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trainee-help {
  margin: 4px 0 7px;
  border: 1px solid #e0d2b9;
  border-radius: 8px;
  background: #faf6ec;
  color: var(--muted);
  font-size: 11px;
}
.trainee-help summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 9px;
  color: #6a4a1a;
  font-weight: 900;
  line-height: 1.2;
}
.trainee-help summary::-webkit-details-marker { display: none; }
.trainee-help summary::before { content: '＋'; margin-right: 3px; }
.trainee-help[open] summary::before { content: '－'; }
.trainee-help p {
  margin: 0;
  padding: 0 9px 8px;
  line-height: 1.45;
  white-space: normal;
}
/* 行動カード（3択） */
.card-hand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.act-card { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%;
  padding: 12px 6px; border-radius: 12px; background: var(--panel-2, #f2ecde);
  border: 2px solid #dcc79a; white-space: normal; text-align: center; position: relative; }
.act-card:hover { border-color: var(--accent, #b5462f); }
.act-card.rest { background: #eef3ee; border-color: #b9cdb6; }
.act-card-icon { font-size: 26px; line-height: 1.1; }
.act-card-body { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.act-card-name { font-weight: 800; font-size: 13px; }
.act-card-desc { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.act-card-fx { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 3px; }
.act-fx-chip {
  font-size: 10px; font-weight: 700; padding: 1.5px 7px; border-radius: 999px;
  background: #eae1cf; color: #6a5b45; line-height: 1.35; white-space: nowrap;
}
.act-fx-chip.good { background: #e2f1e0; color: #2f7a3a; }
.act-fx-chip.warn { background: #f6e6d6; color: #b5642f; }
/* 公式戦カレンダー — 次の公式戦まであと何ヶ月かが常に見える */
.cal-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-bottom: 6px; }
.cal-cell { text-align: center; padding: 4px 0 3px; border-radius: 6px; background: #f0ebdf; border: 1px solid transparent; }
.cal-cell.has-event { background: #f6e6d8; }
.cal-cell.now { border-color: var(--accent, #b5462f); background: #fff6ea; box-shadow: 0 0 0 1px rgba(181,70,47,.25); }
.cal-m { font-size: 9.5px; color: var(--muted); font-weight: 700; }
.cal-ev { font-size: 13px; line-height: 1.2; }
/* 今月の公式戦パネル */
.official-card { border: 2px solid var(--accent, #b5462f); border-radius: 12px; padding: 12px; background: #fff8f2; }
.official-name { font-weight: 800; font-size: 16px; }
.official-desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.official-note { font-size: 12px; margin-top: 6px; line-height: 1.5; font-weight: 700; }
.official-foe { font-size: 13px; margin-top: 8px; font-weight: 700; }
.official-foe-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.official-foe-img { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; object-position: top center;
  border: 2px solid #dcc79a; background: #f2ecde; flex: 0 0 auto; }
.official-foe-meta { min-width: 0; }
.official-foe-meta .official-foe { margin-top: 0; }
.official-foe-sub { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.official-quote { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.official-free { font-size: 11.5px; color: #2f7a3a; font-weight: 700; margin: 2px 0 6px; }
/* 特殊能力チップ */
.trait-list { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; }
.trait-chip { border-radius: 8px; padding: 7px 10px; border: 1.5px solid; cursor: pointer; }
.trait-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trait-chip.good { background: #fff8ea; border-color: #d4af37; }
.trait-chip.bad { background: #f7edea; border-color: #c0563e; }
.trait-name { font-weight: 800; font-size: 13px; display: block; }
.trait-chip.good .trait-name { color: #9a7b16; }
.trait-chip.bad .trait-name { color: #a5402c; }
.trait-desc { font-size: 11px; color: var(--muted); display: block; }
/* いつ・どれだけ効くか。読み流せるよう、説明とは色と太さで分ける。 */
.trait-eff { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; }
.trait-chip.good .trait-eff { color: #7a6212; }
.trait-chip.bad .trait-eff { color: #a5402c; }
.relation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 2px 0 6px; }
.relation-card {
  min-width: 0; border-radius: 9px; padding: 7px 8px;
  background: #faf6ec; border: 1.5px solid #d8c497;
}
.relation-card.mentor { border-color: #d4af37; }
.relation-card.rival { border-color: #c0563e; }
.relation-label { font-size: 10px; color: var(--muted); font-weight: 800; }
.relation-name { font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relation-score { font-size: 11px; color: var(--muted); font-weight: 800; }
.relation-note { font-size: 10.5px; color: var(--wood-dark); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relation-detail { margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.relation-detail summary { cursor: pointer; font-weight: 800; list-style: none; }
.relation-detail summary::-webkit-details-marker { display: none; }
.relation-detail summary::before { content: '＋'; margin-right: 2px; }
.relation-detail[open] summary::before { content: '－'; }
.relation-detail p { margin: 3px 0 0; line-height: 1.35; white-space: normal; }
/* 装備カード */
.equip-card { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
  border: 1.5px solid #cdbf9f; background: #faf6ec; }
.equip-art, .item-art { flex: 0 0 auto; width: 54px; height: 72px; object-fit: cover; border-radius: 7px; border: 1px solid rgba(130,95,35,.35); background: #17121c; }
.equip-art.rarity-ur, .item-art.rarity-ur { border-color: #e3b84f; box-shadow: 0 0 12px rgba(203,108,236,.48), 0 0 3px rgba(255,213,92,.8); }
.equip-art.rarity-ssr, .item-art.rarity-ssr { border-color: #b85acb; box-shadow: 0 0 8px rgba(184,90,203,.35); }
.equip-card.on { border-color: #2f7a3a; background: #eef6ec; }
.equip-info { flex: 1; min-width: 0; }
.equip-name { font-weight: 800; font-size: 13px; }
.equip-eff { font-size: 11px; color: var(--accent-ink, #b5462f); font-weight: 700; }
.equip-source { margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.equip-archive-note { margin: 5px 0 9px; padding: 7px 9px; border-radius: 9px; background: rgba(116,82,168,.08); color: #72558a; font-size: 10.5px; font-weight: 750; line-height: 1.45; }
.equip-card button { flex-shrink: 0; width: auto; }
.equip-slot-section { margin: 10px 0; padding: 9px; border: 1px solid rgba(153,112,45,.22); border-radius: 11px; background: rgba(255,251,240,.55); }
.equip-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; color: var(--ink); }
.equip-slot-count { border-radius: 999px; padding: 2px 8px; background: rgba(181,138,47,.13); color: var(--accent-ink,#8a6320); font-size: 11px; font-weight: 800; }
.equip-slot-section.can-fill { border-color: #df9c27; background: #fff8df; box-shadow: 0 0 0 2px rgba(231,163,42,.12); }
.equip-slot-attention { margin-left: auto; color: #9b5d00; font-size: 10.5px; font-weight: 900; }
.equip-slot-state { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-bottom: 8px; }
.equip-slot-state span { min-width: 0; padding: 5px 7px; border-radius: 7px; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equip-slot-state .filled { background: #e7f1df; color: #2f6d37; border: 1px solid #a8c99b; }
.equip-slot-state .empty { background: rgba(80,65,45,.06); color: var(--muted); border: 1px dashed rgba(80,65,45,.2); }
.equip-rarity { display: inline-block; margin-left: 5px; border-radius: 5px; padding: 1px 5px; background: #7e766a; color: #fff; font-size: 9px; vertical-align: 1px; }
.equip-rarity.rarity-sr { background: linear-gradient(135deg,#9a6418,#d2a53a); }
.equip-rarity.rarity-ssr { background: linear-gradient(135deg,#7b278c,#d49a23); box-shadow: 0 0 7px rgba(164,77,183,.38); }
.equip-rarity.rarity-ur { background: linear-gradient(135deg,#6c218c,#df6c35 48%,#e9c958); box-shadow: 0 0 9px rgba(184,75,221,.58); }
.equip-shop { margin-top: 14px; border: 1px solid rgba(153,112,45,.3); border-radius: 11px; padding: 8px; background: rgba(255,248,225,.62); }
.equip-shop summary { cursor: pointer; color: var(--ink); font-weight: 900; }
.equip-shop-row { display: flex; align-items: center; gap: 8px; padding: 8px 3px; border-top: 1px solid rgba(153,112,45,.16); }
.equip-shop-row button { flex: 0 0 auto; width: auto; }
/* 継承因子の選択チップ */
.factor-list { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; }
.factor-chip { width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px; border: 1.5px solid #cdbf9f; background: #faf6ec; white-space: normal; position: relative; }
.factor-chip.sel { border-color: #7a5cc0; background: #f2edfb; box-shadow: 0 0 0 1px rgba(122,92,192,.3); }
.factor-chip.sel::after { content: '✓'; position: absolute; top: 7px; right: 10px; color: #7a5cc0; font-weight: 800; }
.factor-chip.trait { border-color: #d4af37; }
.factor-chip.stat { border-color: #6a9bd1; }
.factor-chip.talentgrade { border-color: #c0308a; background: linear-gradient(180deg,#fdf4fa,#f8ecf4); }
.factor-chip.talentgrade .factor-label { color: #a02878; font-weight: 800; }
.factor-chip.talentgrade .factor-label::before { content: '🧬 '; }
.factor-required { color: #b3261e; font-weight: 800; }
.factor-label { font-weight: 800; font-size: 13px; }
.factor-desc { font-size: 11px; color: var(--muted); margin-top: 1px; }
.official-card button { margin-top: 8px; }
/* 対局前の作戦指示（重なり順は冒頭の一覧で決める） */
.plan-card { width: min(400px, 92vw); text-align: left; max-height: 92vh; overflow-y: auto; }
.plan-title { font-size: 18px; font-weight: 800; }
.plan-foe { font-size: 12px; color: var(--muted); margin-top: 2px; }
.plan-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.plan-choice { width: 100%; text-align: left; padding: 10px 12px; white-space: normal; }
.plan-choice.current { border-color: var(--accent, #b5462f); }
.plan-choice-label { font-weight: 800; font-size: 14px; }
.plan-choice-desc { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.plan-technique-title { margin: 10px 0 2px; font-size: 13px; font-weight: 900; color: var(--wood-dark); }
.plan-technique-hint { margin-bottom: 6px; color: var(--muted); font-size: 10.5px; }
.plan-technique-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.plan-technique-item { min-width: 0; padding: 5px; border: 1px solid #cdbf9f; border-radius: 9px; background: var(--panel-2); }
.plan-technique-item.selected { border-color: var(--tech-color, #b58a2f); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tech-color) 40%, transparent); }
.plan-technique-item.inspected { background: #f6eddc; outline: 2px solid color-mix(in srgb, var(--tech-color, #b58a2f) 55%, transparent); }
.plan-technique-item.rarity-ssr { border-color: rgba(155,72,177,.55); box-shadow: inset 0 0 8px rgba(155,72,177,.12); }
.plan-technique-item.rarity-ur { border-color: rgba(219,165,52,.72); box-shadow: inset 0 0 10px rgba(156,55,190,.16), 0 0 7px rgba(219,165,52,.2); }
.plan-technique-chip { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 7px; padding: 4px; border: 0; border-radius: 7px; background: transparent; color: inherit; text-align: left; }
.plan-technique-art { flex: 0 0 auto; width: 38px; height: 50px; object-fit: cover; border-radius: 5px; background: #15121b; }
.plan-technique-chip-name { min-width: 0; font-size: 11px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.plan-technique-toggle { width: 100%; min-height: 30px; margin-top: 4px; padding: 4px 5px; font-size: 10px; }
.plan-technique-toggle.selected { border-color: var(--tech-color, #b58a2f); color: #fff9df; background: #35263f; }
.plan-technique-detail { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; margin-top: 8px; padding: 9px; border: 1px solid rgba(181,138,47,.4); border-radius: 10px; background: #f8f2e5; }
.plan-technique-detail-art { width: 72px; height: 94px; object-fit: cover; border-radius: 7px; background: #15121b; }
.plan-technique-detail-text { min-width: 0; }
.plan-technique-detail-name { color: var(--wood-dark); font-size: 13px; font-weight: 950; }
.plan-technique-detail-desc { margin-top: 4px; color: var(--text); font-size: 11.5px; font-weight: 750; line-height: 1.45; }
.plan-technique-detail-facts { margin-top: 5px; color: #8b3d2d; font-size: 10.5px; font-weight: 900; line-height: 1.4; }
.plan-technique-detail-stock { margin-top: 4px; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
/* 次の一手イベント（重なり順は冒頭の一覧で決める） */
.quiz-card {
  --quiz-board-size: min(380px, calc(100vw - 64px));
  width: min(460px, 98vw);
  max-height: 94vh;
  overflow-y: auto;
  padding: 18px;
  text-align: center;
}
/* ===== 勝って得たもの =====
   これまでは小さな通知が次々に流れるだけで、何をもらったのかが残らなかった。
   一枚にまとめ、上から順に並べて見せる。 */
.reward-card {
  position: relative; overflow: hidden; text-align: center;
  width: min(420px, 92vw); padding: 20px 18px 18px;
  background: linear-gradient(165deg, #2b2013, #17110a);
  border: 2px solid rgba(212, 175, 105, .55);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
}
/* 後光。文字の後ろで静かに回す */
.reward-rays {
  position: absolute; inset: -40%; z-index: 0; border-radius: 50%; opacity: .1;
  background: repeating-conic-gradient(from 0deg, rgba(255,236,176,.9) 0deg 5deg, transparent 5deg 16deg);
  filter: blur(1px); animation: tcgSpin 18s linear infinite; pointer-events: none;
}
.reward-card > *:not(.reward-rays) { position: relative; z-index: 1; }
.reward-title {
  font-size: clamp(20px, 6vw, 26px); font-weight: 900; letter-spacing: .06em; color: #ffe9b8;
  text-shadow: 0 0 22px rgba(255, 200, 100, .5);
}
.reward-sub { margin-top: 4px; font-size: 13px; color: #d3bf98; }
.reward-list { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; text-align: left; }
.reward-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 11px; border-radius: 10px;
  background: rgba(255, 240, 200, .07); border: 1px solid rgba(212, 175, 105, .28);
  opacity: 0; animation: rewardRise .5s ease-out both;
}
.reward-row.big { background: linear-gradient(180deg, rgba(150,105,30,.4), rgba(90,60,16,.4)); border-color: rgba(245,200,90,.6); }
@keyframes rewardRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.rw-icon { font-size: 16px; }
.rw-label { font-size: 12.5px; color: #cbb894; }
.rw-value { margin-left: auto; font-size: 15px; font-weight: 800; color: #ffe9b8; font-variant-numeric: tabular-nums; }
.rw-note { flex: 1 0 100%; font-size: 11.5px; line-height: 1.5; color: #b6a480; }
.reward-close { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .reward-row { animation: none; opacity: 1; }
  .reward-rays { animation: none; }
}
body.no-anim .reward-row { animation: none; opacity: 1; }
body.no-anim .reward-rays { display: none; }

/* ===== 今月の行動結果 =====
   結果を見終わってから、昇段・物語・出会の順で次の出来事へ進む。 */
.trainee-action-result-card {
  --action-result-accent: #d5aa50;
  position: relative; overflow-x: hidden; overflow-y: auto; text-align: center;
  width: min(520px, 94vw); max-height: min(92dvh, 780px); padding: 14px 14px 18px;
  background: linear-gradient(165deg, #241b11, #111823 72%, #0c1018);
  border: 2px solid color-mix(in srgb, var(--action-result-accent) 62%, transparent);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .65), 0 0 30px color-mix(in srgb, var(--action-result-accent) 18%, transparent);
}
.trainee-action-result-rays {
  position: absolute; inset: -45%; z-index: 0; border-radius: 50%; opacity: .14;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--action-result-accent) 85%, white) 0deg 5deg, transparent 5deg 17deg);
  animation: traineeActionResultSpin 16s linear infinite; pointer-events: none;
}
.trainee-action-result-card > *:not(.trainee-action-result-rays) { position: relative; z-index: 1; }
.trainee-action-result-art-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; background: radial-gradient(circle at 65% 42%, #6d5526, #121b29 54%, #090d14);
  border: 1px solid color-mix(in srgb, var(--action-result-accent) 52%, transparent);
}
.trainee-action-result-art { width: 100%; height: 100%; display: block; object-fit: cover; }
.trainee-action-result-art-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px;
  color: #ead7a3; font-size: 14px; font-weight: 800; letter-spacing: .08em;
  background: radial-gradient(circle, color-mix(in srgb, var(--action-result-accent) 32%, #182131), #101722 70%);
}
.trainee-action-result-art-fallback.hidden { display: none; }
.trainee-action-result-tier {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  min-width: 116px; padding: 7px 18px; border-radius: 999px;
  color: #211408; font-size: clamp(18px, 6vw, 25px); font-weight: 1000; letter-spacing: .12em;
  white-space: nowrap; background: linear-gradient(180deg, #fff3bd, var(--action-result-accent));
  border: 2px solid rgba(255,255,255,.65); box-shadow: 0 4px 18px rgba(0,0,0,.55), 0 0 22px var(--action-result-accent);
  animation: traineeActionResultBadge .58s cubic-bezier(.2,.9,.25,1.2) both;
}
.trainee-action-result-kicker { margin-top: 12px; color: var(--action-result-accent); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.trainee-action-result-title { margin-top: 2px; color: #fff2cb; font-size: clamp(21px, 6vw, 28px); font-weight: 1000; }
.trainee-action-result-sub { margin-top: 3px; color: #c7b995; font-size: 12.5px; line-height: 1.55; }
.trainee-action-result-list { display: grid; gap: 6px; margin: 12px 0 4px; text-align: left; }
.trainee-action-result-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; color: #f5e8c8;
  background: rgba(255, 244, 216, .075); border: 1px solid rgba(222, 190, 118, .25);
  opacity: 0; animation: rewardRise .45s ease-out both;
}
.trainee-action-result-row.big { background: color-mix(in srgb, var(--action-result-accent) 22%, rgba(23,18,14,.8)); border-color: color-mix(in srgb, var(--action-result-accent) 58%, transparent); }
.trainee-action-result-row-icon { font-size: 18px; }
.trainee-action-result-row-label { min-width: 0; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.trainee-action-result-row-value { color: #ffe7a2; font-size: 15px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trainee-action-result-continue { margin-top: 12px; }
.trainee-action-result-card.tier-awakening { --action-result-accent: #e8a6ff; background: linear-gradient(150deg, #26143c, #101a31 62%, #171020); }
.trainee-action-result-card.tier-great { --action-result-accent: #ffd45c; }
.trainee-action-result-card.tier-recovery { --action-result-accent: #7edfc3; background: linear-gradient(160deg, #12291f, #111b25 70%, #0b1218); }
.trainee-action-result-card.tier-failure { --action-result-accent: #a6afbd; filter: saturate(.78); }
.trainee-action-result-card.tier-awakening .trainee-action-result-tier { color: #fff7ff; background: linear-gradient(180deg, #d270ff, #6f35c7); text-shadow: 0 1px 4px #35104f; }
.trainee-action-result-card.tier-failure .trainee-action-result-tier { color: #20242a; background: linear-gradient(180deg, #e1e5ea, #929ba7); box-shadow: 0 4px 18px rgba(0,0,0,.55); }
@keyframes traineeActionResultSpin { to { transform: rotate(360deg); } }
@keyframes traineeActionResultBadge {
  from { opacity: 0; transform: translate(-50%, 16px) scale(.72); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 420px) {
  .trainee-action-result-card { width: 95vw; padding: 10px 10px 14px; }
  .trainee-action-result-tier { bottom: 7px; min-width: 104px; padding: 6px 14px; }
  .trainee-action-result-row { padding: 7px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .trainee-action-result-rays { display: none; }
  .trainee-action-result-tier, .trainee-action-result-row { animation: none; opacity: 1; }
}
body.no-anim .trainee-action-result-rays { display: none; }
body.no-anim .trainee-action-result-tier,
body.no-anim .trainee-action-result-row { animation: none; opacity: 1; }

.quiz-title { font-size: 18px; font-weight: 800; }
/* 「次の一手」は押したときだけ開く。その入口。 */
.tn-quiz { width: auto; margin-top: 10px; }
.quiz-lead { font-size: 13px; line-height: 1.6; white-space: normal; margin: 6px 0 10px; text-align: left; }
.quiz-board-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
/* 出題盤の周辺: 筋（上）・段（右）・持ち駒（上下） */
.quiz-hand { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; align-items: center; padding: 2px 0;
  width: var(--quiz-board-size); margin: 0 auto; }
.quiz-hand.near { justify-content: flex-start; }
.quiz-hand.far { justify-content: flex-start; }
.quiz-hand:empty::before { content: '持ち駒なし'; font-size: 10px; color: var(--muted); }
.quiz-hand .hand-piece { position: relative; height: 46px; width: 40px; display: inline-flex; align-items: center; justify-content: center; }
.quiz-hand .hand-piece img { height: 130%; width: auto; object-fit: contain; }
.quiz-hand .hand-piece .count { position: absolute; right: -4px; bottom: -3px; font-size: 10px; font-weight: 800;
  background: #fff; border-radius: 6px; padding: 0 2px; line-height: 1.2; color: #333; }
/* 盤・筋（上）・段（右）をグリッドで正確に揃える */
.quiz-grid { display: grid; grid-template-columns: var(--quiz-board-size) auto; grid-template-rows: auto auto; justify-content: center; column-gap: 2px; }
.quiz-files { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(9, 1fr); }
.quiz-files > div { text-align: center; font-size: 10px; color: var(--muted); font-weight: 700; }
#quizBoard { grid-column: 1; grid-row: 2; }
.quiz-ranks { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: repeat(9, 1fr); }
.quiz-ranks > div { display: flex; align-items: center; padding: 0 2px; font-size: 10px; color: var(--muted); font-weight: 700; }
.quiz-board { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  width: var(--quiz-board-size); aspect-ratio: 1;
  background: var(--board, #e8c88a); border: 2px solid #6b4a25; }
.quiz-board .qcell { position: relative; min-width: 0; min-height: 0; overflow: visible;
  border: .5px solid rgba(107,74,37,.35); display: flex; align-items: center; justify-content: center; }
.quiz-board .qcell.lastmove { background: rgba(181,70,47,.25); }
.quiz-board .piece { width: auto; height: 128%; max-width: 128%; object-fit: contain; z-index: 1; }
.quiz-board .piece.sz-k  { height: 134%; }
.quiz-board .piece.sz-rb { height: 130%; }
.quiz-board .piece.sz-gs { height: 125%; }
.quiz-board .piece.sz-nl { height: 119%; }
.quiz-board .piece.sz-p  { height: 110%; }
.quiz-board .piece.gote { transform: rotate(180deg); }
.quiz-choices { display: flex; flex-direction: column; gap: 6px; }
.quiz-choice { width: 100%; font-size: 16px; font-weight: 800; padding: 10px; }
.quiz-result { border-radius: 10px; padding: 12px; margin-top: 6px; white-space: normal; text-align: left; }
.quiz-result.ok { background: #eef6ec; }
.quiz-result.ng { background: #f6eeea; }
.quiz-result-text { font-weight: 700; font-size: 14px; line-height: 1.5; }
.quiz-result-gain { margin-top: 6px; font-weight: 800; color: var(--accent-ink, #b5462f); }
/* 出会いイベント（女神など）— 育成ダイアログより前面に出す */
@media (max-width: 480px) {
  .quiz-card {
    --quiz-board-size: min(350px, calc(100vw - 48px));
    padding: 12px;
  }
  .quiz-hand .hand-piece { height: 36px; width: 30px; }
  .quiz-files > div, .quiz-ranks > div { font-size: 11px; }
}
.encounter-card {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
}
.enc-img { width: 100%; max-width: 260px; border-radius: 14px; margin: 0 auto 8px; display: block; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.enc-title { font-size: 12px; color: var(--muted); font-weight: 700; }
.enc-name { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.enc-line { font-size: 13px; line-height: 1.6; margin: 0 0 12px; white-space: normal; }
.enc-choices { display: flex; flex-direction: column; gap: 8px; }
.enc-choice { width: 100%; text-align: left; padding: 10px 12px; white-space: normal; }
.enc-choice-label { font-weight: 800; font-size: 14px; }
.enc-choice-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.enc-result { border-radius: 10px; padding: 12px; margin-top: 6px; white-space: normal; }
.enc-result.ok { background: #eef6ec; }
.enc-result.ng { background: #f6eeea; }
.enc-result-text { font-weight: 700; font-size: 14px; line-height: 1.5; }
.enc-result-gain { margin-top: 6px; font-weight: 800; color: var(--accent-ink, #b5462f); }
#encOk { margin-top: 10px; }
/* 歴代棋士 */
.trainee-career-summary { margin: 0 0 7px; color: var(--accent-ink, #8a4d23); font-size: 12px; font-weight: 850; }
.trainee-career-table { width: 100%; margin-bottom: 12px; overflow: hidden; border: 1px solid rgba(181,138,47,.32); border-radius: 10px; background: var(--panel-2, #f2ecde); }
.trainee-career-row { display: grid; grid-template-columns: 76px minmax(90px, 1.15fr) minmax(84px, 1fr) 48px; align-items: stretch; border-top: 1px solid rgba(123,91,42,.16); }
.trainee-career-row:first-child { border-top: 0; }
.trainee-career-cell { min-width: 0; padding: 8px 7px; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.trainee-career-head { color: #6e5126; background: rgba(181,138,47,.13); font-weight: 900; }
.trainee-career-result { align-self: center; justify-self: center; white-space: nowrap; font-weight: 950; }
.trainee-career-row.result-win .trainee-career-result { color: #a04a22; }
.trainee-career-row.result-loss .trainee-career-result { color: #566780; }
.trainee-career-row.result-draw .trainee-career-result { color: #6c6558; }
.trainee-career-empty { margin-bottom: 12px; padding: 12px; border: 1px dashed rgba(181,138,47,.42); border-radius: 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }
@media (max-width: 420px) {
  .trainee-career-row { grid-template-columns: 64px minmax(76px, 1.05fr) minmax(72px, 1fr) 42px; }
  .trainee-career-cell { padding: 7px 5px; font-size: 10px; }
}
.hof-card { background: var(--panel-2, #f2ecde); border-radius: 9px; padding: 8px 11px; margin-bottom: 6px; }
.hof-name { font-weight: 800; font-size: 13px; }
.hof-sub { font-size: 11px; color: var(--muted); white-space: normal; line-height: 1.5; }
.hof-acts { display: flex; gap: 6px; margin-top: 6px; }
.hof-acts button { width: auto; flex: 1; white-space: nowrap; }
/* 能力行: ラベル / 才能ランク / バー / 数値（4列。数値は折り返さない） */
.stat-train-row { display: grid; grid-template-columns: 26px 44px 22px 1fr 82px; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--panel-2, #f2ecde); border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; }
.st-icon { width: 24px; height: 24px; object-fit: contain; }
.cta-icon { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 7px; }
.trainee-main-action { display: inline-flex; align-items: center; justify-content: center; }
.stat-train-row .st-val { white-space: nowrap; font-size: 12px; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px; }
.st-num { font-size: 15px; font-weight: 800; }
.st-cap-num { font-size: 11px; color: var(--muted); font-weight: 600; margin-right: 3px; }
.stat-train-row:hover { background: var(--panel-3, #ebe1cf); }
.st-label { font-weight: 700; font-size: 13px; }
.st-bar { height: 8px; background: #ded5c2; border-radius: 4px; overflow: hidden; }
.st-bar-fill { height: 100%; background: var(--accent, #b5462f); border-radius: 4px; }
.st-val { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; font-size: 13px; }
.trainee-actions { display: flex; gap: 8px; margin-top: 12px; }
.trainee-actions button { flex: 1; }
.trainee-quick { width: 100%; margin-top: 8px; background: transparent; color: var(--muted); border: 1px dashed #cdbf9f; }
.trainee-quick:hover { background: rgba(0,0,0,0.03); }
/* キャリア／スキルP バッジ */
.trainee-meta2 { display: flex; justify-content: center; gap: 8px; margin: -4px 0 12px; flex-wrap: wrap; }
.career-badge { font-size: 12px; font-weight: 700; color: #6a4a1a; background: #f0e2c4; border: 1px solid #dcc79a; border-radius: 999px; padding: 3px 12px; }
.sp-badge { font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #7b5cc0, #b5462f); border-radius: 999px; padding: 3px 12px; }
.league-btn { width: 100%; margin-bottom: 4px; }
/* ライバル／スキル／アイテム 共通カード */
.rival-card, .skill-card, .item-card { display: flex; align-items: center; gap: 10px; background: var(--panel-2, #f2ecde); border-radius: 10px; padding: 9px 12px; margin-bottom: 7px; }
.technique-collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.technique-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 56px minmax(0, 1fr);
  align-items: stretch; border: 1px solid var(--tech-color, #b58a2f); border-radius: 10px;
  background: var(--panel-2); box-shadow: 0 3px 10px rgba(28,18,8,.13);
}
.technique-card.equipped { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tech-color) 35%, transparent), 0 4px 12px rgba(28,18,8,.2); }
.technique-art { display: block; width: 56px; height: 76px; object-fit: cover; background: #15121b; }
.technique-meta { min-width: 0; padding: 5px 6px 3px; }
.technique-rarity { color: var(--tech-color, #b58a2f); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.technique-name { min-height: 2.35em; font-size: 10.5px; font-weight: 900; line-height: 1.18; overflow-wrap: anywhere; }
.technique-count { margin-top: 2px; font-size: 9px; font-weight: 850; color: var(--accent-ink); }
.technique-equip-state { margin-top: 2px; color: var(--muted); font-size: 8.5px; font-weight: 800; }
.technique-equip-state.on { color: var(--tech-color, #b58a2f); }
.technique-inline-detail { grid-column: 1 / -1; margin: 0 5px 4px; border-top: 1px solid color-mix(in srgb, var(--tech-color, #b58a2f) 24%, transparent); }
.technique-inline-detail summary { padding: 5px 1px 2px; color: var(--accent-ink); font-size: 9.5px; font-weight: 900; cursor: pointer; }
.technique-inline-desc { padding-top: 3px; color: var(--text); font-size: 10px; font-weight: 700; line-height: 1.4; }
.technique-inline-facts { margin-top: 3px; color: #9a4a35; font-size: 9px; font-weight: 900; line-height: 1.4; }
.technique-inline-source { margin-top: 2px; color: var(--muted); font-size: 8.5px; line-height: 1.35; }
.technique-actions { grid-column: 1 / -1; display: flex; gap: 4px; padding: 4px 5px 5px; border-top: 1px solid color-mix(in srgb, var(--tech-color) 22%, transparent); }
.technique-actions button { flex: 1 1 0; min-width: 0; width: auto; padding: 4px 5px; font-size: 9px; line-height: 1.2; white-space: nowrap; }
.technique-actions button:disabled { opacity: .52; cursor: default; }
.technique-empty { margin-bottom: 12px; padding: 12px; border: 1px dashed rgba(181,138,47,.45); border-radius: 10px; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; }
.technique-shop { margin: 2px 0 14px; border: 1px solid rgba(181,138,47,.38); border-radius: 10px; background: rgba(181,138,47,.06); }
.technique-shop-title { padding: 8px 10px; color: var(--accent-ink); font-size: 11px; font-weight: 900; cursor: pointer; }
.technique-shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 7px 7px; }
.technique-shop-card {
  min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center;
  gap: 6px; padding: 6px; border-radius: 8px; background: var(--panel-2); border: 1px solid rgba(181,138,47,.24);
}
.technique-shop-art { width: 52px; height: 70px; object-fit: cover; border-radius: 5px; background: #15121b; }
.technique-shop-meta { min-width: 0; }
.technique-shop-card .technique-name { min-height: 0; }
.technique-shop-buy { grid-column: 1 / -1; width: 100%; padding: 4px 5px; font-size: 9px; }
.technique-acquire-modal { z-index: 260; background: radial-gradient(circle at 50% 35%, rgba(120,62,167,.7), rgba(5,4,10,.94) 62%); }
.technique-acquire-card { width: min(86vw, 410px); text-align: center; overflow: hidden; border: 2px solid #f3ce72; background: linear-gradient(160deg, #251833, #11151f 60%, #3f2812); box-shadow: 0 0 55px rgba(235,177,74,.58); }
.technique-acquire-kicker { color: #f3ce72; font-size: 11px; font-weight: 950; letter-spacing: .24em; }
.technique-acquire-img { display: block; width: min(58vw, 260px); aspect-ratio: 3/4; margin: 10px auto; object-fit: cover; border-radius: 12px; border: 2px solid #f3ce72; box-shadow: 0 0 24px rgba(239,190,91,.55); animation: techniqueAcquireIn .65s cubic-bezier(.2,.9,.25,1); }
.technique-acquire-rarity { color: #f6d77f; font-size: 14px; font-weight: 950; letter-spacing: .16em; }
.technique-acquire-name { color: #fff4d4; font-size: 22px; font-weight: 950; }
.technique-acquire-desc, .technique-acquire-source { margin: 7px 0; color: #ded5e4; font-size: 12px; line-height: 1.55; }
.technique-acquire-modal.rarity-ssr { background: radial-gradient(circle at 50% 35%, rgba(147,49,159,.76), rgba(4,4,10,.95) 64%); }
.technique-acquire-modal.rarity-ur { background: radial-gradient(circle at 50% 32%, rgba(210,114,31,.73), rgba(89,27,120,.66) 43%, rgba(4,4,10,.96) 72%); }
.technique-acquire-modal.rarity-ur .technique-acquire-card { border-color: #ffe192; box-shadow: 0 0 38px rgba(246,185,59,.72), 0 0 82px rgba(168,66,211,.5); }
.technique-acquire-modal.rarity-ur .technique-acquire-img { border-color: #ffe192; box-shadow: 0 0 20px #f7c75c, 0 0 45px rgba(166,74,224,.68); }
.technique-card.rarity-ssr, .technique-shop-card.rarity-ssr { box-shadow: inset 0 0 0 1px rgba(184,90,203,.28), 0 0 8px rgba(184,90,203,.18); }
.technique-card.rarity-ur, .technique-shop-card.rarity-ur { border-color: rgba(239,194,83,.65); box-shadow: inset 0 0 0 1px rgba(191,82,218,.35), 0 0 12px rgba(218,139,51,.32); background: linear-gradient(145deg, rgba(73,35,83,.16), var(--panel-2)); }
.reward-collectible-art { grid-row: span 2; width: 76px; height: 101px; object-fit: cover; border-radius: 8px; border: 1.5px solid #d7af50; box-shadow: 0 0 12px rgba(205,146,39,.35); }
.reward-row:has(.reward-collectible-art) { grid-template-columns: 76px auto 1fr; }
.reward-row:has(.reward-collectible-art) .rw-note { grid-column: 2 / -1; }
.stat-grade-guide { margin: 3px 0 7px; color: var(--muted); font-size: 10px; text-align: right; }
.event-scene-image { display: block; width: 100%; max-height: 260px; margin: 8px 0 12px; object-fit: cover; object-position: center; border-radius: 12px; border: 1px solid rgba(181,138,47,.52); box-shadow: 0 7px 22px rgba(35,22,8,.24); }
@keyframes techniqueAcquireIn { from { opacity: 0; transform: translateY(26px) scale(.82) rotate(-2deg); } to { opacity: 1; transform: none; } }
/* 名人への道の主操作。スマホだけでなくタブレット・PCでも画像が暴れない共通外形を持つ。 */
.controls .game-action-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 76px; padding: 7px 10px; border-radius: 14px;
  color: #fff8e8; font-weight: 950; line-height: 1.05;
}
.controls .takeover-action,
.controls .review-action {
  border: 1px solid rgba(134,174,222,.48);
  background: linear-gradient(155deg, #3c4c63, #222c3b 68%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 4px 12px rgba(7,14,25,.32);
}
.controls .review-action {
  border-color: rgba(156,174,207,.5);
  background: linear-gradient(155deg, #465164, #272f3d 68%);
}
.controls .takeover-action.is-takeover {
  border-color: rgba(120,205,158,.62); background: linear-gradient(155deg, #38634d, #20392d 68%);
}
.controls .trainee-return-action {
  border: 1px solid rgba(232,157,77,.58);
  background: linear-gradient(155deg, #743c2c, #3b201d 68%);
  box-shadow: inset 0 1px rgba(255,244,212,.11), 0 4px 13px rgba(41,14,8,.38);
}
.game-action-visual {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 11px; overflow: hidden;
}
.game-action-visual.is-symbol { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.game-action-thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.game-action-label { display: block; font-size: 15px; font-weight: 950; letter-spacing: -.035em; white-space: nowrap; }
@media (max-width: 480px) {
  .technique-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .technique-card { grid-template-columns: 50px minmax(0, 1fr); }
  .technique-art { width: 50px; height: 68px; }
  .technique-shop-grid { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  /* 名人への道の対局操作は、秘策札・主操作・「育成画面へ」の3列に固定する。 */
  body:has(#game:not(.hidden)) .board-area .controls:has(#techniqueMenuBtn:not(.hidden)) {
    display: grid;
    grid-template-columns: minmax(90px, .9fr) minmax(118px, 1.05fr) minmax(104px, .95fr);
    align-items: stretch;
    justify-content: stretch;
    gap: 6px;
  }
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) .guardian-control-stack {
    width: 100%; min-width: 0; flex-basis: auto; align-items: stretch;
  }
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) .guardian-control-stack.has-active-technique > .technique-menu-btn {
    flex-basis: 82px; height: 82px; min-height: 82px; max-height: 82px;
  }
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) .technique-menu-btn,
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) .plan-badge,
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #takeoverBtn,
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #leaveBtn,
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #traineeReturnBtn {
    width: 100%; max-width: none; margin: 0;
  }
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #takeoverBtn,
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #leaveBtn,
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #traineeReturnBtn {
    height: 100%; min-height: 76px;
  }

  /* 空白の大きな灰色ボタンではなく、役割を一目で選べる縦型アクションタイルにする。 */
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) .game-action-tile {
    min-height: 82px; padding: 7px 5px;
  }
  .game-action-visual {
    display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 11px; overflow: hidden;
  }
  .game-action-visual.is-symbol { font-size: 29px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
  .game-action-thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
  .game-action-label { display: block; font-size: 15px; font-weight: 950; letter-spacing: -.035em; white-space: nowrap; }
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #leaveBtn {
    padding-inline: 6px; font-size: 11.5px; flex-grow: 0;
  }
  /* 名人への道は「退室」と「育成画面へ」が同じ戻り先なので、後者1本にする。 */
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #reviewBtn,
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #traineeReturnBtn {
    width: 100%; max-width: none; margin: 0;
  }
  body:has(#game:not(.hidden)) .controls:has(#techniqueMenuBtn:not(.hidden)) #spectateBadge:not(.hidden) {
    grid-column: 1 / -1;
  }

  /* 名人への道の主操作を、固定の対局状態バーで覆わない。
     秘策札・作戦・自分で指す・戻るを先に並べ、状態はその下の通常フローへ置く。 */
  body:has(#game:not(.hidden)) .game:has(#techniqueMenuBtn:not(.hidden)) {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body:has(#game:not(.hidden)) .game:has(#techniqueMenuBtn:not(.hidden)) .info-panel {
    position: static;
    grid-column: 1;
    width: 100%;
    padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
    pointer-events: auto;
  }
}
.rival-card.locked { opacity: 0.6; }
.rival-card.beaten { background: #e7f0e3; }
.rival-info, .skill-info, .item-info { flex: 1; min-width: 0; }
.rival-name, .skill-name, .item-name { font-weight: 800; font-size: 14px; }
.rival-sub, .rival-reward, .skill-desc, .item-desc { font-size: 11px; color: var(--muted); line-height: 1.5; white-space: normal; }
.rival-reward { color: #a5642a; font-weight: 700; }
.rival-card button, .skill-card button, .item-card button { width: auto; flex-shrink: 0; white-space: nowrap; }
.item-unusable { margin-top: 3px; color: #8b3a32; font-size: 12px; font-weight: 700; }
.item-btns { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
/* 公開中の育成AI一覧 */
.pub-list { margin-top: 4px; }
/* 名人への道の芯は「自分の棋士を出す」ほう。主従が見た目で分かるようにする。 */
.pub-lead { margin-bottom: 8px; }
.pub-acts { display: flex; flex-direction: column; gap: 5px; flex: none; }
.pub-acts .pub-self { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 400; }
.pub-acts button:disabled { opacity: .5; cursor: not-allowed; }
.pub-card { display: flex; align-items: center; gap: 10px; background: var(--panel-2, #f2ecde); border-radius: 10px; padding: 9px 12px; margin-bottom: 7px; }
.pub-face { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid #dcc79a; }
.pub-face-ph { display: grid; place-items: center; font-size: 22px; background: #ece3d2; border-style: dashed; }
.pub-info { flex: 1; min-width: 0; }
.pub-name { font-weight: 800; font-size: 14px; }
.pub-sub, .pub-def { font-size: 11px; color: var(--muted); line-height: 1.5; white-space: normal; }
.pub-def { color: #a5642a; font-weight: 700; }
.pub-card button { width: auto; flex-shrink: 0; white-space: nowrap; }

@media (max-width: 640px) {
  #traineeDialog .trainee-card {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
    border-radius: 0;
    padding: calc(4px + env(safe-area-inset-top, 0px)) 10px 0;
  }
  #traineeBody {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  #traineeDialog .modal-close {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    width: 38px;
    height: 38px;
    font-size: 25px;
  }
  #traineeDialog .meijin-logo { max-width: 158px; margin: 0 auto -2px; }
  /* 上部・中央スクロール・下部操作欄の3層構造。下部欄も通常レイアウトに置き、本文へ重ねない */
  #traineeDialog .trainee-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #traineeDialog .trainee-fixed-top { grid-row: 1; min-height: 0; } /* 固定ヘッダー（スクロールしない） */
  /* 中央のスクロール領域。下部操作欄は次の flex 行なので、実高さぶんが自動で確保される */
  #traineeDialog .trainee-scroll {
    grid-row: 2; min-height: 0;
    display: flex; flex-direction: column;
    overflow-y: auto;
    padding: 0 0 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* 中身は縮めない（縮むと要素が重なって見切れる）。入りきらなければスクロールで見せる */
  #traineeDialog .trainee-scroll > * { flex-shrink: 0; }
  .trainee-hero { gap: 7px; margin: -1px 48px 4px 0; }
  .trainee-face-compact .trainee-face-img,
  .trainee-face-compact .trainee-face-ph { width: 52px; height: 52px; border-radius: 11px; }
  .trainee-face-compact .trainee-face-ph { font-size: 24px; }
  .trainee-identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 5px;
    row-gap: 2px;
  }
  .trainee-name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trainee-rank { grid-column: 2; grid-row: 1; font-size: 11px; padding: 2px 8px; margin-top: 0; }
  .trainee-remain { grid-column: 3; grid-row: 1; margin-top: 0; font-size: 13px; padding: 2px 10px; white-space: nowrap; }
  .trainee-companions { grid-column: 1 / -1; grid-row: 3; margin-top: 1px; gap: 2px 10px; }
  .trainee-companion { font-size: 11px; }
  .trainee-hero-sub {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trainee-face-actions { grid-column: 3; grid-row: 1; justify-self: end; gap: 4px; margin-top: 0; }
  .trainee-face-actions button { padding: 3px 7px; font-size: 11px; }
  .trainee-dash { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 5px; }
  .trainee-metric { padding: 5px 3px; border-radius: 7px; text-align: center; }
  .tm-label { font-size: 9.5px; }
  .tm-value { margin-top: 0; font-size: 11.5px; }
  .trainee-meta2 { flex-wrap: nowrap; justify-content: space-between; gap: 4px; margin: -1px 0 6px; }
  .career-badge, .sp-badge {
    flex: 1 1 0; min-width: 0; text-align: center; font-size: 11px; padding: 3px 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .trainee-style { min-height: 34px; padding: 5px 8px; margin-bottom: 6px; border-radius: 9px; }
  .ts-label { display: none; }
  .ts-val { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trainee-style button { padding: 5px 9px; font-size: 11.5px; }
  .trainee-tabs {
    gap: 4px; overflow-x: visible; padding: 2px 0 6px; margin: 0 0 5px;
    position: relative; top: auto; background: transparent;
  }
  .trainee-tab { flex: 1 1 0; min-width: 0; padding: 7px 2px; font-size: 12px; text-align: center; }
  .trainee-panes { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .trainee-pane:not(.hidden) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  #traineeBody[data-tab="home"] .games-title { font-size: 12px; margin: 0 0 5px; }
  #traineeBody[data-tab="home"] .deco-label { font-size: 11px; line-height: 1.25; margin-top: 2px; }
  #traineeBody[data-tab="home"] .account-note {
    font-size: 10.5px; line-height: 1.35; margin: 1px 0 0;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  #traineeBody[data-tab="home"] .tr-bar { height: 7px; margin-bottom: 3px; }
  #traineeBody[data-tab="home"] .trainee-next-card { padding: 9px 10px; margin-bottom: 6px; }
  #traineeBody[data-tab="home"] .tn-title { font-size: 15px; line-height: 1.25; }
  #traineeBody[data-tab="home"] .tn-text {
    font-size: 11.5px; line-height: 1.38;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #traineeBody[data-tab="home"] .cal-strip { gap: 2px; margin-bottom: 4px; }
  #traineeBody[data-tab="home"] .cal-cell { padding: 2px 0; border-radius: 5px; }
  #traineeBody[data-tab="home"] .cal-m { font-size: 8.5px; }
  #traineeBody[data-tab="home"] .cal-ev { font-size: 11px; }
  .card-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 5px; }
  .act-card {
    align-items: center; justify-content: center; text-align: center; gap: 2px;
    min-height: 58px; padding: 7px 20px 6px 4px; border-radius: 9px;
  }
  .act-card-icon { font-size: 20px; }
  .act-card-name { font-size: 12.5px; line-height: 1.2; }
  .act-card-desc {
    display: none;
  }
  .act-card-help { top: 5px; right: 5px; width: 19px; height: 19px; font-size: 11px; }
  #traineeBody[data-tab="month"] .account-note {
    font-size: 11px; line-height: 1.35; margin: 1px 0 6px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  #traineeBody[data-tab="month"] .games-title { margin-bottom: 4px; }
  /* 今月タブ: 行動カードを縦積みの横長カードにして、説明と効果をしっかり見せる（空白を情報で埋める） */
  #traineeBody[data-tab="month"] .card-hand {
    flex: 1 1 auto; min-height: 0; grid-template-columns: 1fr; grid-auto-rows: 1fr;
    gap: 7px; margin-bottom: 6px;
  }
  #traineeBody[data-tab="month"] .act-card {
    height: 100%; min-height: 0; flex-direction: row; align-items: center; text-align: left;
    gap: 12px; padding: 10px 14px;
  }
  #traineeBody[data-tab="month"] .act-card-icon { font-size: 32px; flex: 0 0 auto; }
  #traineeBody[data-tab="month"] .act-card-body {
    flex: 1 1 auto; min-width: 0; align-items: flex-start; gap: 3px;
  }
  #traineeBody[data-tab="month"] .act-card-name { font-size: 14.5px; }
  #traineeBody[data-tab="month"] .act-card-desc {
    display: block; font-size: 11.5px; line-height: 1.35; margin-top: 1px;
  }
  #traineeBody[data-tab="month"] .act-card-fx { justify-content: flex-start; }
  #traineeBody[data-tab="month"] .act-fx-chip { white-space: normal; }
  /* 今月タブ(公式戦月): 公式戦カードを縦に広げて中央の空白を埋める */
  #traineeBody[data-tab="month"] .official-card {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    justify-content: center; gap: 4px; margin-bottom: 6px;
  }
  #traineeBody[data-tab="month"] .official-card button { margin-top: 12px; }
  .cal-strip { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
  .cal-cell { padding: 2px 0; border-radius: 5px; }
  .cal-m { font-size: 8.5px; }
  .cal-ev { font-size: 11px; }
  .trainee-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .trainee-actions button { min-width: 0; padding: 9px 8px; font-size: 12px; white-space: normal; }
  /* 2列に詰めて説明を消していたが、名前だけでは何の能力か分からなかった。
     1列に戻し、いつ・どれだけ効くかまで読めるようにする。 */
  .trait-list { display: flex; flex-direction: column; gap: 5px; }
  .trait-chip { min-width: 0; padding: 7px 9px; }
  .trait-name { font-size: 12.5px; }
  .trait-desc, .trait-eff { font-size: 11px; }
  .relation-grid { gap: 5px; margin-bottom: 5px; }
  .relation-card { padding: 6px 7px; }
  .relation-label { font-size: 9.5px; }
  .relation-name { font-size: 12px; }
  .relation-score { font-size: 10.5px; }
  .relation-note { font-size: 10px; }
  .relation-detail { font-size: 10px; }
  .trainee-help { margin: 2px 0 5px; font-size: 10.5px; }
  .trainee-help summary { padding: 5px 8px; }
  .trainee-help p { padding: 0 8px 7px; }
  .rival-card, .skill-card, .item-card, .equip-card, .pub-card { padding: 7px 9px; margin-bottom: 5px; }
  .rival-sub, .skill-desc {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* 道具の効果は購入判断に必要な本文なので、省略せずカード高を伸ばして全文を見せる。 */
  .item-card { align-items: flex-start; }
  .item-desc { display: block; overflow: visible; overflow-wrap: anywhere; }
  /* 下部操作欄は flex の下段として場所を確保する。viewport 固定にすると本文と重なるため禁止 */
  .trainee-sticky-action {
    grid-row: 3;
    position: relative;
    flex: 0 0 auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 3;
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 0 -10px;
    padding: 5px 10px calc(5px + env(safe-area-inset-bottom, 0px));
    background: #fffdf8;
    border-top: 1px solid #e7dccb;
    box-shadow: 0 -4px 14px rgba(0,0,0,.08);
  }
  .trainee-compact-summary { display: flex; flex-wrap: nowrap; gap: 2px; }
  .trainee-summary-pill {
    flex: 1 1 0;
    padding: 2px 3px;
    font-size: 10.5px;
    line-height: 1.55;
    text-align: center;
    overflow: hidden;
    text-overflow: clip;
  }
  .trainee-summary-pill.skill,
  .trainee-summary-pill.turn { flex-grow: .82; }
  .trainee-action-caption { display: none; }
  .trainee-main-action { width: 100%; min-width: 0; padding: 9px 10px; }
  /* 下部の3チップは、ピル行と本文に同じ値が出ている（次＝本文のカード、昇段＝進行状況、
     調子＝ピル行と進行状況）。狭い画面では 40px の場所のほうが価値が高いので出さない。
     セレクタは表示側と同じ強さにして、後ろに置くことで勝たせる。 */
  #traineeBody[data-tab] .trainee-bottom-panel[data-tab] { display: none; }
  .trainee-bottom-panel { gap: 4px; }
  .trainee-bottom-chip { padding: 4px 5px; border-radius: 7px; }
  .tbc-label { font-size: 9px; }
  .tbc-value { font-size: 11px; line-height: 1.2; }
  .trainee-fill-panel {
    flex: 1 0 auto;   /* 余白があれば伸びて埋める。縮んで中身を潰さない */
    min-height: 88px;
    margin-top: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .trainee-fill-title { margin-bottom: 5px; font-size: 11px; }
  .trainee-fill-grid { gap: 5px; }
  .trainee-fill-chip { padding: 6px 6px; }
  .tfc-label, .tfc-sub { font-size: 9px; }
  .tfc-value { font-size: 12.5px; }
}

/* ===== 対局中カットイン発言 ===== */
/* カットインは「キャラが座っている側」から出す。
   奥(cutin-far)＝相手は画面上部から左寄せ、手前(cutin-near)＝自分は下部から右寄せ。
   出る位置と向きが席と一致するので、どちらの発言か一目で分かる。
   盤に被らないよう、上下とも端から少し離し、立ち絵は控えめの大きさにする。 */
.cutin { position: fixed; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; padding: 0 10px; pointer-events: none; }
.cutin-far { top: 9%; justify-content: flex-start; }
.cutin-near { bottom: 12%; justify-content: flex-end; }
.cutin.hidden { display: none; }
.cutin-face { width: 84px; height: 106px; flex: 0 0 auto; object-fit: cover; object-position: top center;
  border-radius: 10px; border: 2px solid #d6b77a; background: #f2ecde; box-shadow: 0 6px 20px rgba(0,0,0,.45);
  opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease; }
/* 立ち絵は自分の席の側（画面外）から滑り込む */
.cutin-far .cutin-face { transform: translateX(-120%); }
.cutin-near .cutin-face { transform: translateX(120%); }
.cutin-bubble { max-width: 58%;
  background: rgba(22,16,10,.92); color: #fdf6e9; border: 1.5px solid rgba(214,183,122,.55);
  border-radius: 12px; padding: 10px 14px; font-size: 15px; font-weight: 700; line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); position: relative;
  transform: translateY(8px); opacity: 0; transition: transform .28s ease .06s, opacity .28s ease .06s; }
.cutin-far .cutin-bubble { margin-left: 10px; }
.cutin-near .cutin-bubble { margin-right: 10px; }
/* 吹き出しの尻尾は必ず話者（立ち絵）の側を向ける */
.cutin-bubble::after { content: ''; position: absolute; top: 50%; margin-top: -6px;
  border: 6px solid transparent; }
.cutin-far .cutin-bubble::after { left: -8px; border-right-color: rgba(22,16,10,.92); }
.cutin-near .cutin-bubble::after { right: -8px; border-left-color: rgba(22,16,10,.92); }
.cutin.show .cutin-face { transform: translateX(0); opacity: 1; }
.cutin.show .cutin-bubble { transform: translateY(0); opacity: 1; }
.cutin.cutin-major {
  z-index: 185; min-height: 44vh; align-items: center;
  background: linear-gradient(90deg, transparent, rgba(8,5,16,.88) 16%, rgba(8,5,16,.94) 84%, transparent);
  overflow: hidden;
}
.cutin.cutin-major::before {
  content: ''; position: absolute; inset: -50%; pointer-events: none;
  background: conic-gradient(from 25deg, transparent, rgba(255,222,117,.2), transparent 16%, rgba(143,88,255,.18), transparent 32%);
  animation: cutinMajorRay 4s linear infinite;
}
.cutin-major .cutin-face {
  width: 148px; height: 196px; border-width: 3px; border-color: #ffe29a;
  box-shadow: 0 0 0 3px rgba(255,214,107,.16), 0 0 38px rgba(193,119,255,.72), 0 12px 32px rgba(0,0,0,.72);
  z-index: 1;
}
.cutin-major .cutin-bubble {
  max-width: min(64%, 720px); padding: 18px 24px; font-size: 21px; line-height: 1.55;
  border-width: 2px; border-color: #ffe19a; z-index: 1;
  box-shadow: 0 0 34px rgba(255,201,91,.42), 0 10px 35px rgba(0,0,0,.65);
}
.cutin.cutin-guardian-major {
  inset: 0; top: 0; bottom: 0; min-height: 100dvh; justify-content: center;
  flex-direction: column; gap: 14px; padding: max(18px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 38%, rgba(147,71,207,.72), rgba(10,6,18,.97) 64%);
}
.cutin-guardian-major .cutin-face {
  width: min(72vw, 420px); height: min(65dvh, 580px); object-fit: cover; object-position: top center;
  border-radius: 18px; box-shadow: 0 0 0 4px rgba(255,226,143,.24), 0 0 70px rgba(207,132,255,.92);
}
.cutin-guardian-major .cutin-bubble {
  width: min(88vw, 720px); max-width: none; margin: 0; text-align: center; font-size: clamp(18px, 4.8vw, 28px);
}
.cutin-guardian-major .cutin-bubble::after { display: none; }
.cutin-bubble.cutin-technique {
  background: linear-gradient(135deg, #1b1232, #5c276f 48%, #9b5b24);
  color: #fff7dc; border-color: #ffe39c; font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,0,0,.8);
}
@keyframes cutinMajorRay { to { transform: rotate(360deg); } }
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .cutin-face { width: 66px; height: 84px; }
  .cutin-bubble { font-size: 13px; padding: 7px 10px; max-width: 62%; }
  .cutin-far { top: 7%; }
  .cutin-near { bottom: 10%; }
  .cutin.cutin-major { min-height: 38vh; padding: 0 8px; }
  .cutin-major .cutin-face { width: 108px; height: 144px; }
  .cutin-major .cutin-bubble { max-width: 66%; padding: 12px 14px; font-size: 16px; }
}

/* ===== 名人への道 紙芝居ストーリー ===== */
.story-vn { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  background: #05070a; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; }
.story-vn.hidden { display: none; }
.story-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.82); transition: background-image .2s; }
.story-stage { position: absolute; left: 0; right: 0; top: 0; bottom: 150px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 clamp(8px, 3vw, 26px); pointer-events: none; }
/* 背景を含む人物素材も、立ち絵カードとして同じ比率・位置にそろえる。 */
.story-char {
  box-sizing: border-box;
  width: min(42vw, 300px);
  aspect-ratio: 2 / 3;
  max-height: min(52vh, 480px);
  object-fit: cover;
  object-position: center top;
  border: 1.5px solid rgba(238, 205, 137, .72);
  border-bottom-color: rgba(238, 205, 137, .38);
  border-radius: 16px 16px 5px 5px;
  background: rgba(8, 7, 6, .78);
  box-shadow: 0 10px 32px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.06);
  filter: saturate(.96);
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.story-char-left { align-self: flex-end; }
.story-char-right { align-self: flex-end; }
.story-char.dim { filter: brightness(.48) saturate(.68); opacity: .82; transform: scale(.97); }
.story-char.hidden { display: none; }
.story-skip { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 6;
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: 6px 13px; font-size: 12px; font-weight: 700; cursor: pointer; }
.story-box { position: relative; z-index: 4; margin: 0 auto; width: min(760px, 100%);
  background: linear-gradient(180deg, rgba(22,16,10,.82), rgba(22,16,10,.95)); color: #fdf6e9;
  border-top: 2px solid rgba(214,183,122,.55);
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 150px;
  box-shadow: 0 -10px 28px rgba(0,0,0,.45); }
.story-vn-chapter {
  margin-bottom: 5px;
  color: #ffe0a0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.story-name { font-size: 16px; font-weight: 800; color: #ffe4a3; margin-bottom: 6px; min-height: 20px; }
.story-name.narrator { color: #b8ab96; font-weight: 700; }
.story-text { font-size: 15px; line-height: 1.7; white-space: pre-wrap; min-height: 52px; }

/* 対局前後の会話は、別の場所へ移動したように見せない。
 * 盤をそのまま背景に残し、ストーリーと同じ読みやすい会話枠だけを重ねる。 */
.story-vn.match-dialogue-vn {
  background: linear-gradient(180deg, rgba(2, 4, 7, .08) 0%, rgba(2, 4, 7, .16) 46%, rgba(2, 4, 7, .62) 100%);
}
.story-vn.match-dialogue-vn .story-bg { display: none; }
.story-vn.match-dialogue-vn .story-stage {
  bottom: 184px;
  padding: 0 clamp(14px, 5vw, 42px);
}
.story-vn.match-dialogue-vn .story-char {
  width: min(28vw, 176px);
  max-height: min(34vh, 264px);
  border-width: 2px;
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(255,224,160,.22);
}
.story-vn.match-dialogue-vn .story-box {
  box-sizing: border-box;
  width: min(680px, calc(100% - 20px));
  margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  padding-bottom: 16px;
  min-height: 168px;
  border: 1px solid rgba(224,190,118,.7);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,15,11,.9), rgba(10,9,9,.97));
  box-shadow: 0 12px 36px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.04);
}
.story-vn.match-dialogue-vn .story-text { font-size: 16px; }
.story-vn.breakthrough-vn {
  background: radial-gradient(circle at 50% 42%, rgba(103,74,172,.12), rgba(3,4,8,.24) 48%, rgba(2,3,6,.76) 100%);
}
.story-vn.breakthrough-vn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 22%, rgba(240,213,140,.12) 49%, transparent 70%);
  animation: breakthrough-light 3.2s ease-in-out infinite;
}
.story-vn.breakthrough-vn .story-vn-chapter { color: #fff0b5; font-size: 15px; text-shadow: 0 0 12px rgba(255,204,94,.7), 0 2px 5px #000; }
.story-vn.breakthrough-vn .story-char:not(.dim) { box-shadow: 0 8px 30px rgba(0,0,0,.65), 0 0 22px rgba(239,201,101,.48); }
@keyframes breakthrough-light { 0%,100% { opacity:.25; transform:translateX(-6%); } 50% { opacity:.8; transform:translateX(6%); } }

@media (max-width: 480px) {
  .story-vn.match-dialogue-vn .story-stage { bottom: 198px; padding: 0 10px; }
  .story-vn.match-dialogue-vn .story-char { width: min(31vw, 126px); max-height: 220px; border-radius: 12px 12px 4px 4px; }
  .story-vn.match-dialogue-vn .story-box { width: calc(100% - 14px); min-height: 184px; margin-bottom: 5px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .story-vn.match-dialogue-vn .story-text { font-size: 16px; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) { .story-vn.breakthrough-vn::before { animation: none; opacity: .35; } }
.story-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.story-choices.hidden { display: none; }
.story-choice {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: left;
  background: rgba(58,42,26,.92);
  color: #fdf6e9;
  border: 1.5px solid rgba(214,183,122,.5);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.story-choice .factor-desc {
  display: block;
  margin-top: 3px;
  color: rgba(253,246,233,.78);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
}
.story-choice:hover { background: rgba(92,66,38,.96); border-color: #d6b77a; }
.story-next { text-align: right; font-size: 12px; color: #d8b878; margin-top: 8px; animation: storyBlink 1.2s infinite; }
.story-next.hidden { display: none; }
@keyframes storyBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.story-open-btn.has-new { background: #fff2d6; border-color: #e0a93a; color: #8a5a00; }
.story-picker-card { max-width: 420px; }
.story-chapter-btn { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 11px 14px;
  border-radius: 10px; background: var(--panel-2, #f2ecde); border: 1.5px solid #dcc79a;
  font-weight: 700; font-size: 14px; cursor: pointer; }
.story-chapter-btn:hover { border-color: var(--accent, #b5462f); }
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .story-stage { padding-inline: 7px; gap: 6px; }
  .story-char { width: min(42vw, 260px); max-height: min(44vh, 390px); border-radius: 13px 13px 4px 4px; }
  .story-box { min-height: 140px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .story-text { font-size: 14.5px; line-height: 1.65; }
  .story-name { font-size: 15px; }
}

/* 管理: 育成対戦相手プールの登場制御（ミニ行） */
.admin-sub { margin: 12px 0 4px; font-weight: 800; font-size: 12.5px; color: var(--muted); border-top: 1px dashed #d8cdb4; padding-top: 8px; }
.admin-char-mini .ac-thumb { width: 40px; height: 40px; }
.admin-char-mini { padding: 6px 8px; }

/* ===== スマホ横向きガード（縦向き固定の代替） ===== */
/* 新しい版のお知らせ。上端に細く出し、盤や操作を隠さない。 */
.update-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 13000;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: #2f4a6d; color: #fff; font-size: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.update-bar.hidden { display: none; }
.update-bar-text { flex: 1; min-width: 0; }
.update-bar-btn {
  flex: none; padding: 5px 12px; border-radius: 8px; border: 0;
  background: #f0d27a; color: #3a2f1c; font-weight: 700; cursor: pointer;
}
.update-bar-close {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: #cfe0f5; font-size: 18px; line-height: 1; cursor: pointer;
}

/* スマホを横へ向けても画面を回転させない。
   Screen Orientation APIが効かないiPhone Safari等では、縦画面と同じ論理寸法へ
   幅・高さを入れ替えて全体を逆回転する。横向き専用レイアウトは作らない。 */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  html {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0d12;
  }
  body {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100dvh;
    height: 100dvw;
    min-height: 0;
    max-width: none;
    overflow-x: hidden;
    overflow-y: auto;
    transform-origin: center center;
    overscroll-behavior: none;
  }
  html.orientation-landscape-90 body,
  html.orientation-landscape-unknown body {
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  html.orientation-landscape-270 body {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  body > header,
  body > section {
    width: 100%;
    margin-inline: 0;
  }
  body:has(#game:not(.hidden)) {
    --cell: min(54px, calc((100dvh - 32px) / 9));
    min-height: 0;
    overflow-y: auto;
  }
  .modal,
  .story-overlay,
  .ending-screen,
  .home-drawer[open] {
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
  .modal-card {
    max-width: calc(100dvh - 16px);
    max-height: calc(100dvw - 16px);
  }
  #lobby,
  #lobby .home-lobby {
    height: calc(100dvw - 58px - env(safe-area-inset-top, 0px)) !important;
    min-height: 0;
    overflow-y: hidden;
  }
  .home-mode-grid {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1.17fr 1fr 1.09fr 1fr;
  }
  .game {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 6px 8px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .game > *, .board-area > *, .side, .info-panel, .boardwrap,
  .roombox, .analysis, .log, .chat {
    min-width: 0;
    max-width: 100%;
  }
  .board-area { width: 100%; gap: 3px; }
  .side, .info-panel { flex-direction: column; gap: 10px; }
}

/* portrait-secondaryを通知する端末では、上下逆にした向きへ画面も180度回す。
   iPhoneを含め、OSが180度を通知しない端末ではセンサー権限を勝手に要求しない。 */
@media (orientation: portrait) and (max-width: 520px) {
  html.orientation-portrait-180 {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0d12;
  }
  html.orientation-portrait-180 body {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100dvw;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate(-50%, -50%) rotate(180deg);
    transform-origin: center center;
    overscroll-behavior: none;
  }
}

/* 音声クイックトグル（対局中・育成画面） */
.sound-toggle-btn { min-width: 0; padding: 4px 8px; font-size: 15px; line-height: 1; }
/* 管理: エンジン選択行 */
/* 管理画面の設定行。横並びだと、細い画面でラベルが1文字ずつ縦に折れて
   「対戦／A／I／エ／ン／ジ／ン」のように崩れる。見出しを上、操作を下に置く。 */
.admin-engine-row {
  display: block; margin: 0 0 12px; padding: 10px 0;
}
.admin-engine-row > span {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.admin-engine-row select { width: 100%; }
/* 並ぶボタンは横一列のまま、幅いっぱいに広げる（押しやすさ優先） */
.admin-engine-row button { flex: 1 1 0; min-width: 0; }
.admin-engine-row:has(button) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-engine-row:has(button) > span { flex: 1 0 100%; margin-bottom: 2px; }
.engine-arena-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.engine-arena-side { background: var(--panel-2, #f2ecde); border: 1px solid #d8cdb4; border-radius: 12px; padding: 12px; }
.engine-arena-side h4 { margin: 0 0 10px; }
.engine-arena-side label { display: grid; gap: 5px; margin-top: 9px; font-weight: 700; }
.engine-arena-side select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.engine-arena-side label.engine-arena-level-disabled { opacity: .45; }
.engine-arena-actions { justify-content: center; flex-wrap: wrap; }
.engine-arena-time { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 12px; }
.engine-arena-time label { display: grid; gap: 5px; font-weight: 700; flex: 1 1 180px; }
.engine-arena-time select, .engine-arena-time input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: inherit; }
.engine-arena-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.engine-arena-series label { display: grid; gap: 5px; font-weight: 700; min-width: 0; }
.engine-arena-series select, .engine-arena-series input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: inherit; }
.arena-series-summary { margin: 10px 0 12px; padding: 10px 12px; border: 1px solid rgba(201,148,47,.55); border-radius: 10px; background: rgba(201,148,47,.12); line-height: 1.6; }
.arena-series-summary.hidden { display: none; }
.arena-series-result-card { max-width: 560px; }
.arena-series-result-body { display: grid; gap: 12px; margin: 14px 0; }
.arena-series-score { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; padding: 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.arena-series-player { min-width: 0; overflow-wrap: anywhere; font-weight: 800; }
.arena-series-player:last-child { text-align: right; }
.arena-series-score-main { white-space: nowrap; font-size: 22px; font-weight: 900; color: var(--gold, #c9942f); }
.arena-series-progress { text-align: center; color: var(--muted); }
.arena-series-conditions {
  display: grid; gap: 7px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(201,148,47,.45); background: rgba(201,148,47,.08);
}
.arena-series-conditions-title { font-size: 13px; font-weight: 900; color: var(--gold, #c9942f); }
.arena-series-condition-main { font-size: 14px; font-weight: 800; }
.arena-series-strategy-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,auto);
  align-items: baseline; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.09);
}
.arena-series-strategy-player { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
.arena-series-strategy-name { text-align: right; overflow-wrap: anywhere; font-size: 13px; }
.engine-arena-feedback { display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.engine-arena-feedback-item { padding: 10px 12px; border-radius: 10px; background: var(--panel-2, #f2ecde); border-left: 4px solid #b0613d; }
.engine-arena-feedback-meta { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.engine-arena-feedback-comment { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .engine-arena-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .engine-arena-series { grid-template-columns: 1fr; }
  .arena-series-score { grid-template-columns: 1fr; text-align: center; }
  .arena-series-player:last-child { text-align: center; }
  .arena-series-strategy-row { grid-template-columns: 1fr; gap: 3px; }
  .arena-series-strategy-name { text-align: left; }
}

.tomiko-feedback-card { max-width: 620px; }
.tomiko-feedback-field { display: grid; gap: 6px; margin: 12px 0; font-weight: 700; }
.tomiko-feedback-field select,
.tomiko-feedback-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, #cbb);
  border-radius: 9px;
  padding: 9px 10px;
  font: inherit;
}
.tomiko-feedback-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.tomiko-feedback-tags label {
  border: 1px solid var(--line, #cbb);
  border-radius: 999px;
  padding: 6px 9px;
  background: #fffaf0;
  font-size: 13px;
}
.tomiko-feedback-preview {
  max-height: 170px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  background: #f5f1e8;
  border: 1px solid var(--line, #cbb);
  border-radius: 8px;
  padding: 9px;
  font-size: 12px;
}

/* 管理: キャラ得意戦法ピッカー */
.ac-strategy { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e0d6bf; }
.ac-strat-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.ac-strat-cur { color: var(--accent-ink, #b5462f); }
.ac-strat-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ac-strat-chip { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: #f2ecde; border: 1.5px solid #dcc79a; color: #6a5b45; cursor: pointer; }
.ac-strat-chip.on { background: var(--accent, #b5462f); border-color: var(--accent, #b5462f); color: #fff; }

/* 管理: 戦法ピッカーの系統グループ・実現度 */
.ac-strat-group { font-size: 11px; font-weight: 800; color: #6a5b45; margin: 7px 0 3px; }
.ac-strat-chip.asp { border-style: dashed; opacity: 0.92; }
.ac-strat-chip.asp.on { background: #c9942f; border-color: #c9942f; }
/* 「未設定」＝戦法で導かず、エンジンの定跡にまかせる。戦法の並びとは別のものなので色を変える。 */
/* 棋譜の途中から指し継ぐときの席決め。左右に並べて、先手・後手を見比べられるようにする。 */
.resume-card { width: min(420px, 92vw); }
.resume-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.resume-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; }
/* .au-input は管理画面の数値欄で幅64pxに決め打ちされている。ここでは列いっぱいに広げる。 */
.resume-grid select { width: 100%; padding: 7px 8px; font-size: 14px; }
@media (max-width: 420px) { .resume-grid { grid-template-columns: 1fr; } }

/* 棋譜から指し継ぐときの案内。何手目から始まるのかを、開始を押す前に見せる。 */
.arena-seed-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0; padding: 8px 11px; border-radius: 9px;
  background: rgba(201, 148, 47, .14); border: 1px solid rgba(201, 148, 47, .5);
  font-size: 12.5px; font-weight: 700;
}
.arena-seed-note.hidden { display: none; }

.ac-strat-none { border-style: dotted; }
.ac-strat-none.on { background: #6a7f9c; border-color: #6a7f9c; color: #fff; }
.ac-strat-note { font-size: 10.5px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* 戦法確定カットイン（〇〇戦法！）: 金色の強調バナー */
.cutin-bubble.cutin-strategy { background: linear-gradient(180deg, #b5462f, #8a2f1f); color: #ffe9c8;
  font-size: 17px; font-weight: 900; letter-spacing: .04em; border-color: #ffd58a;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); }
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) { .cutin-bubble.cutin-strategy { font-size: 15px; } }

/* キャラカードのランク（D〜S+++） */
.card-tier-badge { display: inline-block; color: #fff; font-weight: 900; font-size: 12px;
  padding: 1px 9px; border-radius: 999px; margin-right: 5px; vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); letter-spacing: .02em; }
.char-card { position: relative; }
.char-tier { position: absolute; top: 4px; left: 4px; color: #fff; font-weight: 900;
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px; z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); }

/* 管理: 強豪列伝の一括解放ボタン */
.ac-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 8px; }
.ac-bulk-label { font-size: 12px; opacity: 0.8; }

/* ===== 名人への道 エンディング ===== */
/*  クリアの余韻を作るため、ゆっくり明るくなる空を背景に、実績を順に見せる。
    盤上の演出と違い時間をかけてよい場面なので、アニメは長めに取る。 */
.ending { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #05070a; overflow: hidden; }
.ending.hidden { display: none; }
.ending-sky { position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 105%, #f6d68a 0%, #c98b3a 22%, #7a3f2a 45%, #2a1a2e 72%, #0a0a12 100%);
  opacity: 0; transform: scale(1.08); transition: opacity 2.4s ease, transform 6s ease; }
.ending.show .ending-sky { opacity: 1; transform: scale(1); }
/* 称号ごとの絵を敷いたとき。文字が読めなくなるので、上から暗幕を重ねる。 */
.ending-sky.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ending-sky.has-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,6,10,.62) 0%, rgba(8,6,10,.48) 40%, rgba(8,6,10,.78) 100%);
}
.ending-inner { position: relative; z-index: 1; width: min(560px, 92vw); max-height: 88vh; overflow-y: auto;
  text-align: center; color: #fdf6e9; padding: 20px 18px 26px; }

/* ===== 結末の回想 =====
   四年で出会った人（強豪列伝では倒した相手）を、色を落として順に浮かべる。
   文字の後ろに敷いていたころは、絵も文字もどちらも読み取れなかった。
   文章の上に額を置き、そこで1枚ずつ入れ替える。 */
.ending-flash {
  position: relative; z-index: 1;
  width: min(320px, 66vw); height: min(320px, 30vh);
  margin: 0 auto 14px; border-radius: 14px; overflow: hidden;
  background: rgba(6, 6, 10, .5);
  border: 1px solid rgba(255, 220, 150, .28);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55), inset 0 0 40px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.ending-flash:empty { display: none; }      /* 会った人がいない代では額ごと出さない */
.ending-flash img {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain;
  /* 色は抜くが、暗くはしない。思い出として一段引きつつ、顔は見て取れる濃さにする。 */
  filter: grayscale(1) contrast(1.06);
  opacity: 0;
  animation: endingFlash 6s ease-in-out both;
}
@keyframes endingFlash {
  0%   { opacity: 0; transform: scale(1.07); }
  12%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}
/* 歌が終わるころ、最後の1枚が消えたあとに置く一文字 */
.ending-flash::after {
  content: '完';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(30px, 9vw, 46px); font-weight: 900; letter-spacing: .2em;
  color: #f4e2bb; text-shadow: 0 0 24px rgba(255, 210, 130, .5);
  opacity: 0; transition: opacity 2.4s ease;
}
.ending.finale .ending-flash::after { opacity: 1; }

/* ===== 文章は少しずつ立ち上げる =====
   一度に全部出ると読む間が無く、一枚絵のように見えていた。 */
.ending-inner .reveal { opacity: 0; animation: endingRise .9s ease-out both; }
@keyframes endingRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* 画面をたたいたら、残りを一度に出す（待てない人のため） */
.ending.skip .reveal { animation: none !important; opacity: 1; transform: none; }
/* 回想は歌に合わせて進むので、たたいても飛ばさない。
   ただし全部を0秒にすると重なるので、最後の1枚だけ残す形にはしない。 */
/* 動きを控える設定・演出を切っている人には、順に出す演出も回想も出さない */
@media (prefers-reduced-motion: reduce) {
  .ending-inner .reveal { animation: none; opacity: 1; transform: none; }
  .ending-flash { display: none; }
}
body.no-anim .ending-inner .reveal { animation: none; opacity: 1; transform: none; }
body.no-anim .ending-flash { display: none; }
/* 日本語は文字の間ならどこでも折り返すので、幅が足りないと
 * 「名人への道 —／四年間の記録」のように途中で切れていた。
 * 1行を保ったまま、画面幅に合わせて字の大きさを詰める。 */
.ending-title { font-size: clamp(16px, 5.2vw, 30px); white-space: nowrap; font-weight: 900; letter-spacing: .12em;
  text-shadow: 0 2px 18px rgba(255,214,138,.55), 0 1px 3px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease .6s, transform 1.2s ease .6s; }
.ending.show .ending-title { opacity: 1; transform: translateY(0); }
.ending-lead { margin-top: 12px; font-size: 15px; line-height: 1.9; color: #f0e2c6;
  opacity: 0; transition: opacity 1.2s ease 1.4s; }
.ending.show .ending-lead { opacity: 1; }
.ending-stats { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  opacity: 0; transform: translateY(10px); transition: opacity 1s ease 2.2s, transform 1s ease 2.2s; }
.ending.show .ending-stats { opacity: 1; transform: translateY(0); }
.ending-stat { background: rgba(0,0,0,.34); border: 1px solid rgba(214,183,122,.45); border-radius: 10px; padding: 10px 8px; }
.ending-stat b { display: block; font-size: 22px; font-weight: 900; color: #ffd58a; line-height: 1.3; }
.ending-stat span { font-size: 12px; color: #e5d6b8; }
.ending-titles { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  opacity: 0; transition: opacity 1s ease 2.8s; }
.ending.show .ending-titles { opacity: 1; }
.ending-title-chip { background: linear-gradient(180deg, #b5462f, #8a2f1f); color: #ffe9c8;
  border: 1px solid #ffd58a; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 800; }
.ending-roll { margin-top: 18px; font-size: 13px; line-height: 2; color: #dcc9a4;
  opacity: 0; transition: opacity 1.2s ease 3.4s; }
.ending.show .ending-roll { opacity: 1; }
.ending-roll .er-name { color: #fdf6e9; font-weight: 700; }
.ending-close { margin-top: 22px; opacity: 0; transition: opacity 1s ease 4s; }
.ending.show .ending-close { opacity: 1; }
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  /* 幅に応じた clamp で決まるので、ここで固定サイズに戻さない。
   * 狭い画面では字間も詰めて、1行に収まる余地を作る。 */
  .ending-title { letter-spacing: .06em; }
  .ending-lead { font-size: 13.5px; }
  .ending-stat b { font-size: 19px; }
}

/* 育成の後日談（エンディング内）。結末の格が一目で分かるよう、称号を大きく置く。 */
.ending-epilogue { margin: 6px 0 14px; text-align: center; }
.ep-tier {
  display: inline-block; padding: 6px 18px; border-radius: 999px;
  font-size: 20px; font-weight: 800; letter-spacing: .08em;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.35);
}
.ep-tier.ep-meijin {
  background: linear-gradient(135deg, #d4a029, #f3d47a 45%, #b9821a);
  color: #3a2b0a; border-color: #f6e3a8;
  box-shadow: 0 0 22px rgba(243,212,122,.55);
}
.ep-style {
  width: fit-content; margin: 9px auto 0; padding: 3px 12px;
  border-top: 1px solid rgba(214,183,122,.55); border-bottom: 1px solid rgba(214,183,122,.55);
  color: #f6d99b; font-size: 13px; font-weight: 800; letter-spacing: .12em;
}
/* 歩み方の称号。到達点（.ep-tier）のすぐ下に、一文を添えて置く。
   「どこまで行ったか」と「どう辿り着いたか」を並べて読ませる。 */
.ep-journey { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.ep-journey-name {
  padding: 4px 16px; border-radius: 999px;
  border: 1px solid rgba(246, 227, 168, .55);
  background: rgba(20, 14, 8, .5);
  color: #f6e3a8;
  font-size: 15px; font-weight: 800; letter-spacing: .1em;
}
.ep-journey-line { max-width: 26em; font-size: 13px; line-height: 1.8; opacity: .92; }
.ep-highlights { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.ep-highlights span {
  padding: 3px 9px; border-radius: 999px; background: rgba(125,77,24,.38);
  border: 1px solid rgba(246,227,168,.38); color: #ffe7b5; font-size: 11px; font-weight: 700;
}
.ep-story-echoes {
  max-width: 30em; margin: 14px auto 2px; padding: 12px;
  border: 1px solid rgba(214,183,122,.35); border-radius: 12px;
  background: rgba(10,8,7,.42); text-align: left;
}
.ep-story-echoes h3 { margin: 0 0 8px; color: #f5d494; font-size: 13px; letter-spacing: .14em; text-align: center; }
.ep-story-echo { display: grid; grid-template-columns: minmax(7em, auto) 1fr; gap: 9px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.09); }
.ep-story-echo:first-of-type { border-top: 0; }
.ep-story-echo b { color: #ffe8b8; font-size: 12px; }
.ep-story-echo span { color: rgba(255,255,255,.88); font-size: 12px; line-height: 1.65; }
.ep-meta { margin-top: 8px; font-size: 12px; opacity: .8; }
.ep-p { margin: 10px auto 0; max-width: 30em; font-size: 14px; line-height: 1.9; text-align: left; }
@media (max-width: 480px) {
  .ep-story-echo { grid-template-columns: 1fr; gap: 3px; }
}

/* AI判断への注意書き。断定的に読まれないよう、目立たせずに常に添える。
   小さく・薄くするが、読めなくはしない（免責が読めないと意味がない）。 */
.ai-caveat {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  opacity: .85;
  text-align: left;
}

/* 感想戦の対局者表示。先手・後手だけでは誰が誰か分からないので、名前を盤の上下に出す。 */
.rp-player {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: min(100%, calc(var(--cell) * 9 + var(--label) * 2));
  margin: 0 auto; padding: 5px 8px;
  background: var(--panel-2); border-radius: 8px;
  font-size: 13px; line-height: 1.3;
}
.rp-player.far { margin-bottom: 4px; }
.rp-player.near { margin-top: 4px; }
.rp-player .rp-mark { font-weight: 800; color: var(--muted); white-space: nowrap; }
.rp-player .rp-name {
  font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-player .rp-you {
  flex-shrink: 0; padding: 1px 7px; border-radius: 999px;
  background: var(--accent, #b5462f); color: #fff; font-size: 10px; font-weight: 700;
}
.rp-hand-adjacent {
  width: min(100%, calc(var(--cell) * 9 + var(--label) * 2));
  min-height: 0;
  padding: 4px 8px;
  margin: 0 auto;
}
.rp-hand-adjacent .hand-title { margin-bottom: 2px; }
.rp-hand-adjacent .hand-pieces { min-height: 30px; }
.rp-hand-adjacent .hand-piece .count { bottom: 0; }

/* ============================================================
   横画面（タブレット等）だけの調整
   ------------------------------------------------------------
   条件を「横向き かつ 幅900px以上 かつ 高さ600px以上」に絞ってある。
   スマホは縦でも横でもこの条件に入らないので、一切影響しない
   （横スマホは高さ520px以下で回転ガードが出る側の担当）。

   直したいのは感想戦。#replay は「左パネル｜盤｜右パネル」の3つ子だが、
   .game の指定が対局画面向けの2カラムなので、3つ目のパネルが次の行へ落ち、
   盤は2列目の幅(280px)まで潰されていた。実機のタブレット横で
   盤が左パネルに食い込んで見えたのはこれが原因。
   ============================================================ */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
  /* 盤の升目は画面の高さから決める。横画面では縦が足りなくなるので、
     幅ではなく高さに合わせないと盤が画面からはみ出す。 */
  /* 升目は「高さに収まる」「左右のパネルを引いた残り幅に収まる」の両方を満たす大きさにする。
     どちらか一方だけだと、もう片方の向きで画面外へはみ出す。 */
  :root {
    --cell: min(62px,
                calc((100vh - 210px) / 9 / 1.09),
                calc((100vw - 600px) / 9));
  }

  /* 感想戦は盤の上下に持ち駒・名前・直前の手・送りの列が積み上がる。
     iPad横（1194x834）で実測すると、盤以外に 542px 使っていて 324px はみ出した。
     名前は駒台の見出しにも入っているので帯は消し、駒台は1段、送りは1行にして
     320px まで詰める。そのうえで、残った高さから升目を決める。 */
  body:has(#replay:not(.hidden)) {
    --cell: min(62px,
                calc((100vw - 560px) / 9),
                calc((100dvh - 320px) / 9 / var(--cell-ratio)));
  }
  #replay .rp-player { display: none; }
  #replay .rp-hand-adjacent {
    display: flex; align-items: center; gap: 8px; padding: 3px 7px; min-height: 0;
  }
  /* 縦画面と同じ理由で、削るのは名前だけにする（上の注記を参照） */
  #replay .rp-hand-adjacent .hand-title {
    flex: 1 1 auto; min-width: 0; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #replay .rp-hand-adjacent .hand-pieces {
    flex: 0 0 auto; max-width: 100%; min-height: 26px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  #replay .rp-hand-adjacent .hand-piece { flex: 0 0 auto; height: 30px; width: 28px; }
  /* ★送りの列。1行に収める狙いで nowrap にしていたが、解析の釦が横いっぱいに
   *   伸びて（幅401px）残りを押し出し、はみ出した釦が重なって押せなくなっていた。
   *   釦は中身なりの幅にし、それでも収まらないときは折り返す（重ねない）。 */
  #replay .replay-controls { flex-wrap: wrap; gap: 6px; min-width: 0; }
  #replay .replay-controls > * { flex: 0 0 auto; min-width: 0; }
  #replay .replay-controls #analyzeBtn,
  #replay .replay-controls #rpResumeBtn,
  #replay .replay-controls #replayBack { flex: 0 1 auto; width: auto; max-width: 100%; }
  /* 盤反転と速度は、使う頻度が低い。ここに残すと1行に収まらず折り返し、
     盤の高さを削ってしまう。細い画面と同じくメニューへ回す。 */
  #replay .replay-controls #rpFlipBtn,
  #replay .replay-controls #rpSpeed { display: none; }
  #replay.menu-open .replay-controls #rpFlipBtn { display: inline-block; }
  #replay.menu-open .replay-controls #rpSpeed { display: inline-block; }

  /* 感想戦は左右のパネルを同じ幅にする。幅が違うと盤が中央からずれる。 */
  #replay {
    grid-template-columns: minmax(0, 240px) max-content minmax(0, 240px);
    gap: 14px;
    padding: 14px;
    align-items: start;
    justify-content: center;
  }
  #replay .side, #replay .boardwrap, #replay .board-frame { min-width: 0; max-width: 100%; }
  #replay .boardwrap { justify-self: center; }
  /* 棋譜と解析は縦に伸びやすいので、画面内で個別にスクロールさせる */
  #replay .rp-log { max-height: calc(100vh - 300px); }
  #replay .analysis-summary { max-height: 30vh; overflow-y: auto; }

  /* 対局画面は「盤｜情報パネル」の2列なので、そのままだと盤が左へ寄る。
     右のパネルと同じ幅の空き列を左に足して、盤を画面の真ん中へ持ってくる。 */
  #game {
    /* 中央は盤の実寸(max-content)。左右は同じ上限で余りを分け合うので、盤が真ん中に来る。
       auto にすると余りの分配で中央列が盤より狭くなり、盤が右のパネルに重なる。 */
    grid-template-columns: minmax(0, 280px) max-content minmax(0, 280px);
    justify-content: center;
  }
  #game .board-area { grid-column: 2; margin-inline: auto; }
  #game .info-panel { grid-column: 3; }
}

/* ============================================================
   ログイン後トップ — 4モードを最初の1画面で選べるホーム
   既存機能は .home-drawer 以下へ移しただけで、削除しない。
   ============================================================ */
#lobby {
  align-items: flex-start;
  padding: clamp(10px, 2.5vw, 28px);
}
#lobby .home-lobby {
  width: min(1100px, 100%);
  max-width: 1100px;
  padding: clamp(12px, 2.2vw, 24px);
  background:
    radial-gradient(circle at 50% -20%, rgba(205, 160, 74, .22), transparent 46%),
    rgba(255, 253, 248, .96);
  border: 1px solid rgba(139, 101, 48, .22);
}
.home-lobby .lobby-site-logo {
  width: min(260px, 55vw);
  max-width: 260px;
  height: clamp(48px, 7vw, 72px);
  object-fit: contain;
  margin: -2px auto 8px;
}
.home-live-strip {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr)) auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px solid rgba(201, 160, 78, .38);
  border-radius: 14px;
  color: #f7e9cc;
  background: linear-gradient(100deg, #302216, #5b3c20);
  box-shadow: 0 5px 14px rgba(50, 31, 14, .18);
  text-align: left;
}
.home-live-strip:hover { background: linear-gradient(100deg, #3a2919, #694723); }
.home-live-strip span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
.home-live-strip b { color: #ffd77d; font-size: 18px; line-height: 1; }
.home-live-strip small { color: #dfcfb0; font-size: 11px; font-weight: 700; }
.home-live-strip em {
  color: #ffe2a4;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.home-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.home-mode-card {
  --home-bg: url("assets/bg/bg_match_room.webp");
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 220px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(247, 218, 158, .35);
  border-radius: 18px;
  color: #fff6df;
  text-align: left;
  background-image:
    linear-gradient(180deg, rgba(25, 16, 8, .10), rgba(25, 16, 8, .94)),
    var(--home-bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 9px 22px rgba(48, 29, 12, .24);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
button.home-mode-card { width: 100%; }
.home-mode-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(48, 29, 12, .3);
}
/* 背景は4枚とも同じ1枚にする。カードごとに違う写真だと視線が散り、どれが主役か
   読めなかった。区別は機能名のロゴが担う。写真は場の空気だけを出す役に徹する。 */
.home-mode-online,
.home-mode-meijin,
.home-mode-story,
.home-mode-dojo {
  --home-bg: url("assets/bg/scene_shoreikai_match_room.webp");
}
.home-mode-card > *:not(.home-mode-portrait) { position: relative; z-index: 2; }
.home-mode-portrait {
  position: absolute;
  z-index: 1;
  right: -7%;
  bottom: 0;
  width: 58%;
  height: 92%;
  object-fit: cover;
  object-position: top center;
  border-radius: 42% 0 16px 42%;
  opacity: .70;
  filter: saturate(.88) contrast(1.04);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%);
  mask-image: linear-gradient(90deg, transparent 0, #000 25%);
}
.home-mode-logo,
.home-mode-card .meijin-banner-logo {
  display: block;
  width: min(82%, 205px);
  max-width: 82%;
  height: 48px;
  max-height: 48px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6));
}
.home-mode-sub,
.home-mode-card .meijin-banner-sub {
  width: 78%;
  min-height: 34px;
  margin: 0;
  color: #f2dfbd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 1px 3px #1b1108;
}
.home-mode-card .meijin-banner-go {
  margin: 0;
  color: #ffd879;
  font-size: 12px;
  font-weight: 900;
}
.home-mode-card.hero {
  padding: 14px 16px;
  background-image:
    linear-gradient(180deg, rgba(25, 16, 8, .36), rgba(25, 16, 8, .96)),
    var(--home-bg);
}
.home-mode-card.hero .home-mode-sub { width: 100%; }
.home-mode-card.hero .primary.big {
  width: 100%;
  margin: 2px 0 0;
  padding: 10px 8px;
  font-size: 14px;
}
.home-mode-card .quick-mode-label { margin: 0; font-size: 10px; }
.home-mode-card .mode-change { width: 100%; margin: 0; font-size: 11px; }
.home-mode-card .mode-change summary {
  padding: 2px 0;
  text-align: left;
  font-size: 11px;
}
.home-mode-card .mode-buttons { grid-template-columns: 1fr; }
.home-mode-card .mode-btn { padding: 5px; font-size: 10px; }
.home-mode-card .mode-note { font-size: 10px; margin: 4px 0; }
.home-mode-card .searching { width: 100%; font-size: 11px; }
.home-mode-card .searching-ai { display: block; }
.home-mode-card .searching-ai button { margin-top: 5px; }
.home-utility-nav {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 7px;
  margin: 10px 0 5px;
}
.home-utility-nav button.mini2 {
  min-height: 36px;
  border-color: rgba(155, 115, 58, .24);
  background: #f2e9d8;
}
.home-lobby .sub-links { margin: 0 0 7px; }
.home-drawer { scroll-margin-top: 70px; }
.home-drawer[open] {
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(144, 101, 45, .08);
}
.home-drawer .lobby-section { margin: 13px 0 0; }
.home-drawer .lobby-section + .lobby-section { border-top: 1px solid var(--line); padding-top: 10px; }
.home-footer {
  margin: 14px 0 0;
  padding: 8px 0 calc(2px + env(safe-area-inset-bottom, 0px));
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-align: center;
  opacity: .58;
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #lobby { padding: 7px; }
  #lobby .home-lobby {
    padding: 8px;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(60, 40, 15, .14);
  }
  .home-lobby .lobby-site-logo {
    width: min(205px, 58vw);
    height: 50px;
    margin-bottom: 4px;
  }
  .home-live-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    min-height: 34px;
    margin-bottom: 7px;
    padding: 5px 6px;
    border-radius: 11px;
  }
  .home-live-strip span { gap: 3px; }
  .home-live-strip b { font-size: 15px; }
  .home-live-strip small { font-size: 9px; }
  .home-live-strip em { display: none; }
  .home-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .home-mode-card {
    min-height: 148px;
    padding: 10px;
    border-radius: 14px;
  }
  .home-mode-portrait {
    right: -12%;
    width: 62%;
    height: 88%;
    border-radius: 44% 0 12px 44%;
    opacity: .61;
  }
  .home-mode-logo,
  .home-mode-card .meijin-banner-logo {
    width: 88%;
    max-width: 88%;
    height: 34px;
    max-height: 34px;
  }
  .home-mode-sub,
  .home-mode-card .meijin-banner-sub {
    width: 88%;
    min-height: 28px;
    font-size: 10.5px;
    line-height: 1.32;
  }
  .home-mode-card .meijin-banner-go { font-size: 10.5px; }
  .home-mode-card.hero { padding: 9px 10px; }
  .home-mode-card.hero .home-mode-logo { height: 31px; }
  .home-mode-card.hero .home-mode-sub { min-height: 14px; }
  .home-mode-card.hero .primary.big {
    padding: 7px 5px;
    font-size: 11.5px;
    border-radius: 9px;
  }
  .home-mode-card .quick-mode-label { font-size: 9px; }
  .home-mode-card .mode-change summary { font-size: 9.5px; }
  .home-mode-card .mode-change[open] {
    position: absolute;
    z-index: 10;
    inset: 7px;
    padding: 7px;
    overflow-y: auto;
    border-radius: 10px;
    background: rgba(40, 27, 15, .97);
  }
  .home-mode-card:has(.mode-change[open]) { min-height: 220px; }
  .home-utility-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin: 7px 0 2px;
  }
  .home-utility-nav button.mini2 {
    min-width: 0;
    min-height: 31px;
    padding: 4px 2px;
    font-size: 10px;
  }
  .home-lobby .sub-links { gap: 20px; margin-bottom: 4px; }
  .home-lobby .link-btn { font-size: 10px; padding: 2px; }
  .home-footer { margin-top: 8px; }
}

@media (max-width: 360px), (max-height: 650px) and (max-width: 820px) {
  .home-lobby .lobby-site-logo { height: 42px; margin-bottom: 2px; }
  .home-live-strip { min-height: 31px; margin-bottom: 5px; }
  .home-mode-grid { gap: 5px; }
  .home-mode-card { min-height: 132px; padding: 8px; }
  .home-mode-logo,
  .home-mode-card .meijin-banner-logo { height: 30px; max-height: 30px; }
  .home-mode-sub,
  .home-mode-card .meijin-banner-sub { min-height: 25px; font-size: 9.5px; }
  .home-mode-card .meijin-banner-go { font-size: 9.5px; }
  .home-utility-nav { margin-top: 5px; }
}

/* ログイン後トップの詳細機能は、カードの高さを変えず全画面で開く。 */
body.home-overlay-open { overflow: hidden; }
body:has(#lobby:not(.hidden)) { overflow: hidden; }
body:has(#lobby:not(.hidden)) header h1 { display: none; }
body:not(:has(#lobby:not(.hidden))) .lobby-user-summary { display: none; }

#lobby {
  height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
  min-height: 0;
  overflow: hidden;
  color: #f2eadb;
  background:
    radial-gradient(circle at 18% 8%, rgba(116, 87, 47, .22), transparent 34%),
    radial-gradient(circle at 84% 72%, rgba(40, 72, 92, .18), transparent 38%),
    linear-gradient(145deg, #0d1117 0%, #17191d 48%, #0a0e13 100%);
}
#lobby .home-lobby {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  border-color: rgba(210, 174, 108, .24);
  color: #f2eadb;
  background:
    linear-gradient(145deg, rgba(26, 29, 34, .97), rgba(13, 17, 22, .98)),
    url("assets/bg/bg_room_night.webp") center / cover;
  box-shadow:
    0 18px 48px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.05);
}
#lobby .home-lobby::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 212, 129, .04), transparent 34%, rgba(84, 126, 154, .05));
}
#lobby .home-lobby > *:not(.home-drawer) { position: relative; }
.home-lobby .lobby-site-logo {
  width: min(360px, 50vw);
  max-width: none;
  height: 92px;
  margin-bottom: 6px;
  object-fit: contain;
  transform: scale(1.15);
}

/* ===== 題字の両脇の惹句 =====
   左「完全自作エンジン」右「強豪レベル」。このサイトの売りを、いちばん先に見える
   ところへ置く。題字の絵は横幅の半分しか使っていないので、その余白へ収める。
   縦に2語で積み、画面が細いときは字を詰める。題字より前に出ない濃さにする。 */
.site-logo-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(4px, 2vw, 12px); width: 100%; min-width: 0;
}
/* 題字は画面ごとに幅と拡大が何度も指定し直されている（.home-lobby .lobby-site-logo が
   media ごとに何枚もある）。ここではそれより強く指して、中央ぶんだけ取らせる。
   拡大も外す。1.15倍のままだと、縮めたぶんがそのまま両脇へはみ出す。 */
#lobby .home-lobby .site-logo-row .lobby-site-logo {
  flex: 0 1 auto;
  width: min(210px, 46vw);
  transform: none;
  /* .site-logo の margin:auto は、横並びにすると余白を全部吸って惹句を両端へ飛ばす。
     広い画面で題字と離れて浮いてしまうので、ここでは切る。 */
  margin-inline: 0;
}
.site-flank {
  flex: 0 0 auto;   /* 惹句は縮めない。縮むのは題字のほう */
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(9px, 2.7vw, 14px); font-weight: 900; line-height: 1.12;
  letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(180deg, #fff6da 0%, #ffd97a 42%, #e29a24 58%, #ffeaba 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(72, 34, 0, .95))
    drop-shadow(0 0 7px rgba(255, 186, 74, .55));
}
.site-flank b { display: block; }
.site-flank-l { transform: rotate(-7deg); }
.site-flank-r { transform: rotate(7deg); }
/* 動きを控える設定・演出を切っている人には、傾けるだけで光らせない */
@media (prefers-reduced-motion: reduce) {
  .site-flank { filter: drop-shadow(0 1px 0 rgba(72, 34, 0, .95)); }
}

.home-mode-card {
  height: 220px;
  min-height: 220px;
  border-color: rgba(223, 186, 116, .3);
  box-shadow:
    0 11px 26px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.home-mode-card .home-mode-logo,
.home-mode-card .meijin-banner-logo,
.home-mode-card.hero .home-mode-logo {
  width: 100%;
  max-width: 100%;
  height: 64px;
  max-height: 64px;
  padding: 5px 8px;
  border-radius: 10px;
  /* 下敷きは暗い側にする。ロゴは金の炎なので、明るい板に乗せると浮いて白い箱に見える */
  background: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.75));
}
.home-mode-title {
  z-index: 2;
  width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px 12px;
  border-radius: 11px;
  /* 写真の上でも読めるだけの暗さを敷き、金の細線で枠を締める */
  background: linear-gradient(90deg, rgba(14, 11, 8, .78), rgba(14, 11, 8, .44));
  border: 1px solid rgba(223, 186, 116, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.home-mode-title .home-mode-logo,
.home-mode-title .meijin-banner-logo {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  background: none;
  transform-origin: center;
}
.home-mode-online .home-mode-title img { transform: scale(1.32); }
.home-mode-meijin .home-mode-title img { transform: scale(.95); }
.home-mode-story .home-mode-title img { transform: scale(1.22); }
.home-mode-dojo .home-mode-title img { transform: scale(.95); }
.home-mode-card {
  background-image:
    linear-gradient(180deg, rgba(8, 12, 18, .18), rgba(7, 10, 15, .96)),
    var(--home-bg);
  filter: saturate(.80) contrast(1.08);
}
.home-mode-card.hero {
  background-image:
    linear-gradient(180deg, rgba(7, 10, 15, .32), rgba(7, 10, 15, .98)),
    var(--home-bg);
}
.home-mode-card:hover { filter: saturate(.9) contrast(1.1) brightness(1.07); }
.home-utility-nav button.mini2 {
  border-color: rgba(211, 177, 112, .24);
  color: #f1e4cc;
  background: linear-gradient(180deg, #2b3037, #20242a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.home-utility-nav button.mini2:hover { background: linear-gradient(180deg, #373d45, #282d34); }
.home-lobby .sub-links .link-btn {
  border-color: rgba(211, 177, 112, .18);
  color: #d8c8ad;
  background: rgba(31, 36, 43, .86);
}
/* お知らせの帯はトップから外した。ログイン直後のお知らせ窓で読ませる。 */
.home-footer { color: #b9ad9a; }
.home-admin-slot {
  display: flex;
  justify-content: center;
  min-height: 0;
}
.home-admin-slot .link-btn {
  margin: 0;
  padding: 3px 10px;
  border-color: rgba(211, 177, 112, .14);
  color: #aa9e8d;
  background: transparent;
  font-size: 9px;
}

.online-match-menu {
  display: grid;
  gap: 12px;
  width: min(100%, 620px) !important;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  /* ここだけ白の直書きが残っていて、上に載る明るい文字が消えていた。
     地はトークンで塗り、暗い側の見た目に合わせる。 */
  background: var(--panel-2);
  box-shadow: var(--shadow);
}
/* 機能ごとのロゴ。トップの大きな絵と同じものを画面の頭に置き、
   いまどの機能に居るのかが一目で分かるようにする。 */
.drawer-feature-logo {
  display: block;
  width: min(100%, 390px);
  height: 86px;
  margin: 0 auto 10px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.online-match-menu .drawer-feature-logo { margin-bottom: 0; }
.online-match-menu .section-sub { margin: 0; text-align: center; }
.online-match-menu .primary.big {
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 14px;
  font-size: 17px;
}
.online-match-menu .quick-mode-label { margin: 0; text-align: center; }
.online-match-menu .mode-change { width: min(100%, 480px); margin: 0 auto; }
.online-match-menu .searching { width: min(100%, 520px); margin: 0 auto; }

.dojo-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  width: min(100%, 920px);
  margin: 12px auto 16px;
}
.dojo-service-grid > * {
  min-width: 0;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  background: var(--panel-2);
}
.dojo-service-grid b { font-size: 15px; }
.dojo-service-grid span { color: var(--muted); font-size: 11px; }
.dojo-service-grid button { cursor: pointer; }
.dojo-service-grid button:hover { background: var(--panel-3); }

.home-drawer:not([open]) { display: none; }
.home-drawer[open] {
  position: fixed;
  z-index: 12000;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding:
    max(14px, env(safe-area-inset-top, 0px))
    max(14px, env(safe-area-inset-right, 0px))
    max(22px, env(safe-area-inset-bottom, 0px))
    max(14px, env(safe-area-inset-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  /* 全画面パネル（オンライン対戦・道場・広場）も暗い側で組む。
     ここだけ明るいままだと、トップから開いた瞬間に画面が白く飛ぶ。 */
  --text: #f2ece0;
  --muted: #b7ab98;
  color: #f2ece0;
  background:
    linear-gradient(rgba(12, 16, 21, .93), rgba(9, 12, 17, .96)),
    url("assets/bg/bg_kaikan_day.webp") center / cover fixed;
  box-shadow: none;
  overscroll-behavior: contain;
}
.home-drawer[open] .section-head h3,
.home-drawer[open] .player-row .pname,
.home-drawer[open] .watch-vs {
  color: #f2ece0;
}
.home-drawer[open] .section-sub,
.home-drawer[open] .empty-note,
.home-drawer[open] .watch-info small {
  color: #b7ab98;
}
.home-drawer[open] > summary {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 920px);
  min-height: 52px;
  margin: 0 auto 16px;
  padding: 12px 58px 12px 16px;
  border: 1px solid rgba(160, 115, 49, .26);
  border-radius: 14px;
  color: #f4e7cf;
  background: rgba(28, 34, 42, .96);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  font-size: clamp(17px, 3.8vw, 22px);
  font-weight: 900;
  list-style: none;
}
.home-drawer[open] > summary::-webkit-details-marker { display: none; }
.home-drawer[open] > summary::after {
  content: "×";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #5a4024;
  background: #efe2cb;
  font-size: 27px;
  line-height: 33px;
  text-align: center;
  transform: translateY(-50%);
}
.home-drawer[open] > :not(summary) {
  width: min(100%, 920px);
  margin-right: auto;
  margin-left: auto;
}

/* 検索状況はオンライン対戦画面の中を伸ばさず、独立した全画面表示にする。 */
.online-match-menu #searching:not(.hidden) {
  position: fixed;
  z-index: 12100;
  inset: 0;
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding:
    max(80px, calc(env(safe-area-inset-top, 0px) + 60px))
    max(20px, env(safe-area-inset-right, 0px))
    max(28px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  justify-content: center;
  overflow-y: auto;
  border-radius: 0;
  color: #3d2a15;
  background:
    linear-gradient(rgba(250, 244, 232, .96), rgba(244, 232, 211, .98)),
    url("assets/bg/scene_shoreikai_match_room.webp") center / cover;
}
.online-match-menu #searching:not(.hidden) > * {
  width: min(100%, 520px);
  margin-right: auto;
  margin-left: auto;
}
.online-match-menu #searching:not(.hidden) .searching-status {
  color: #4d361e;
  font-size: 17px;
  font-weight: 800;
}
.online-match-menu #searching:not(.hidden) .searching-ai {
  padding: 18px;
  border-color: rgba(154, 109, 44, .35);
  background: rgba(255,255,255,.8);
}

/* 時間設定もトップ内展開ではなく全画面パネルにする。 */
.online-match-menu .mode-change[open] {
  position: fixed;
  z-index: 12150;
  inset: 0;
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding:
    max(70px, calc(env(safe-area-inset-top, 0px) + 50px))
    max(20px, env(safe-area-inset-right, 0px))
    max(28px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  border-radius: 0;
  color: #fff5dd;
  background:
    linear-gradient(rgba(37, 24, 13, .96), rgba(55, 34, 16, .98)),
    url("assets/bg/scene_shoreikai_match_room.webp") center / cover;
}
.online-match-menu .mode-change[open] > summary,
.online-match-menu .mode-change[open] > .mode-buttons,
.online-match-menu .mode-change[open] > .mode-note {
  width: min(100%, 560px);
  margin-right: auto;
  margin-left: auto;
}
.online-match-menu .mode-change[open] > summary {
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid rgba(255, 221, 154, .35);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}
.online-match-menu .mode-change[open] .mode-buttons {
  grid-template-columns: 1fr;
  gap: 10px;
}
.online-match-menu .mode-change[open] .mode-btn {
  min-height: 62px;
  font-size: 15px;
}
.online-match-menu .mode-change[open] .mode-note {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
}

.home-lobby .sub-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.home-lobby .sub-links .link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
}

.settings-help-actions {
  display: grid;
  gap: 9px;
  margin: 18px 0 8px;
}
.settings-action-link {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(166, 116, 48, .28);
  border-radius: 11px;
  color: var(--ink, #2b261f);
  background: var(--panel-2, #f2ecde);
  font: inherit;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #lobby {
    height: calc(100dvh - 58px - env(safe-area-inset-top, 0px));
  }
  #lobby .home-lobby {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .home-lobby .lobby-site-logo {
    flex: 0 0 auto;
    width: min(290px, 76vw);
    /* 残りは 4 枚のカードが等分する。看板を少し譲るぶんが、そのまま本文と文字へ回る */
    height: clamp(46px, 7.2dvh, 66px);
    margin-bottom: 2px;
    transform: scale(1.22);
  }
  .home-live-strip { flex: 0 0 auto; }
  .home-mode-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .home-mode-card {
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 11px;
    text-align: center;
  }
  .home-mode-card:has(.mode-change[open]) {
    height: auto;
    min-height: 0;
  }
  .home-mode-portrait {
    right: -3%;
    width: 43%;
    height: 100%;
    border-radius: 48% 0 12px 48%;
    opacity: .66;
  }
  .home-mode-card .home-mode-logo,
  .home-mode-card .meijin-banner-logo,
  .home-mode-card.hero .home-mode-logo {
    width: min(72%, 330px);
    max-width: 72%;
    height: clamp(38px, 5.4dvh, 52px);
    max-height: 52px;
    padding: 4px 7px;
    border-radius: 8px;
    transform: scale(1.08);
    transform-origin: left center;
  }
  .home-mode-title {
    width: 100%;
    height: clamp(44px, 6.0dvh, 58px);
    padding: 2px 8px;
    border-radius: 9px;
  }
  .home-mode-title .home-mode-logo,
  .home-mode-title .meijin-banner-logo {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    transform-origin: center;
  }
  .home-mode-online .home-mode-title img { transform: scale(1.42); }
  .home-mode-meijin .home-mode-title img { transform: scale(.98); }
  .home-mode-story .home-mode-title img { transform: scale(1.3); }
  .home-mode-dojo .home-mode-title img { transform: scale(.98); }
  .home-mode-sub,
  .home-mode-card .meijin-banner-sub {
    width: 92%;
    min-height: 0;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }
  .home-mode-card .meijin-banner-go { font-size: 11px; }
  .home-utility-nav {
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-lobby .sub-links,
  .home-footer,
  .home-admin-slot { flex: 0 0 auto; }
  .home-drawer[open] {
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
  }
  .home-drawer[open] > summary {
    min-height: 48px;
    margin-bottom: 10px;
    padding: 10px 52px 10px 12px;
    border-radius: 11px;
    font-size: 17px;
  }
  .home-lobby .sub-links { gap: 3px; }
  .home-lobby .sub-links .link-btn {
    min-width: 0;
    font-size: 10px;
    white-space: nowrap;
  }
  .trainee-competition {
    grid-column: 1 / -1; grid-row: 3; justify-self: start;
    margin-top: 0; padding: 2px 7px; font-size: 9.5px;
  }
  .trainee-companions { grid-row: 4; }
  .dojo-service-grid { grid-template-columns: 1fr; }
  .dojo-service-grid > * { min-height: 60px; }
}

@media (max-width: 360px), (max-height: 650px) and (max-width: 820px) {
  .home-lobby .lobby-site-logo { height: clamp(46px, 8dvh, 54px); }
  .home-mode-grid { gap: 4px; }
  .home-mode-card { padding: 6px 9px; }
  .home-mode-card .home-mode-logo,
  .home-mode-card .meijin-banner-logo,
  .home-mode-card.hero .home-mode-logo {
    height: clamp(38px, 6.3dvh, 46px);
    max-height: 46px;
  }
  .home-mode-sub,
  .home-mode-card .meijin-banner-sub { font-size: 10.5px; }
  .home-mode-card .meijin-banner-go { display: none; }
  body:has(#lobby:not(.hidden)) .app-version,
  body:has(#lobby:not(.hidden)) .engine-label { display: none; }
}

/* --- トップの文字の階層（2026-07-30） ------------------------------------
 *  10〜11px が並んでいて、どれが主役か読み取れなかった。押せるものほど小さい状態も
 *  逆だったので、次の順に整える。
 *    モードの説明 12.5px > 導線 12px > 便利機能 12px > 広場のラベル 10.5px
 *  ロゴ画像が視覚の重心を持っているので、文字はそれを説明する役に徹する。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .home-mode-sub { font-size: 12.5px; line-height: 1.35; color: rgba(255,248,232,.92); }
  .home-mode-card .meijin-banner-go { font-size: 12px; color: #f0d9a6; font-weight: 800; }
  .home-utility-nav button.mini2 { font-size: 12px; }
  .home-lobby .sub-links .link-btn { font-size: 12px; }
  .home-live-strip b { font-size: 17px; }
  .home-live-strip small { font-size: 10.5px; }
}

/* --- トップ: 主役をオンライン対戦に寄せ、1枚あたりを2層にする（2026-07-30） ----
 *  以前は 4 枚が同じ重みで、カード内も「ロゴ画像＋説明＋導線」の3層あった。
 *  どれが主役か読めず、文字も詰まっていた。次の2つで整える。
 *    説明と導線を1行に置く（.home-mode-line）
 *    オンライン対戦だけ背を高くし、ロゴも大きくする
 *  背景写真は4枚とも同じにしてあるので、区別はロゴと大きさだけが担う。 */
.home-mode-line {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.home-mode-line .home-mode-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 導線は先に縮めない。押す場所が読めなくなるほうが困る。
   ただし枠の外へは出さない。人数の内訳を並べたとき、細い画面で帯を突き抜けて
   頭の文字まで切れていた（2026-08-04）。収まらないぶんは「…」で丸める。 */
.home-mode-line .meijin-banner-go {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  /* 主役を1枚だけ大きくする。残り3枚は等分 */
  .home-mode-grid { grid-template-rows: 1.42fr repeat(3, minmax(0, 1fr)); }
  .home-mode-online .home-mode-title { height: clamp(56px, 7.6dvh, 74px); }
  .home-mode-online .home-mode-title img { transform: scale(1.5); }
  .home-mode-online .home-mode-sub { font-size: 13.5px; }
  .home-mode-online .meijin-banner-go { font-size: 13px; }
  /* 主役以外は説明を控えめにして、視線が主役へ行くようにする */
  .home-mode-meijin .home-mode-sub,
  .home-mode-story .home-mode-sub,
  .home-mode-dojo .home-mode-sub { color: rgba(255,248,232,.80); }
  /* 1行にしたので、行間のぶんを詰められる */
  .home-mode-line { gap: 6px; }
  /* 名人への道と強豪列伝だけ .meijin-banner-sub で 11.5px になり、4枚で不揃いだった */
  .home-mode-card .meijin-banner-sub { font-size: 12.5px; }
  .home-mode-online .meijin-banner-sub { font-size: 13.5px; }
  /* 行の高さは 4 枚とも同じにする。カードが自分の行を埋めないと、最後だけ低く見える */
  .home-mode-grid > .home-mode-card { height: 100%; align-self: stretch; }
}

/* --- トップの字を大きく / 管理を押せる大きさに / ログインを同じトンマナへ ------
 *  （2026-07-30）
 *  下に余白が残っていたので、看板と機能名の字を戻す。管理者ボタンは 9px で押しづらい。
 *  ログイン画面はロビーと同じ暗い面にして、入口と中で世界が変わらないようにする。 */

/* 1) 看板と機能名を大きく。余白のぶんを字に回す */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .home-lobby .lobby-site-logo {
    height: clamp(56px, 8.6dvh, 82px);
    transform: scale(1.3);
  }
  .home-mode-card .home-mode-sub,
  .home-mode-card .meijin-banner-sub { font-size: 14px; }
  .home-mode-online .home-mode-sub,
  .home-mode-online .meijin-banner-sub { font-size: 15px; }
  .home-mode-card .meijin-banner-go { font-size: 13.5px; }
  .home-mode-online .meijin-banner-go { font-size: 14.5px; }
  .home-utility-nav button.mini2 { font-size: 13.5px; padding: 9px 6px; }
  .home-lobby .sub-links .link-btn { font-size: 13.5px; }
  .home-live-strip b { font-size: 18px; }
  .home-live-strip small { font-size: 11.5px; }
}

/* 2) 管理者ボタン。9px は指で狙えない。押せる大きさへ */
.home-admin-slot .link-btn {
  padding: 8px 18px;
  min-height: 34px;
  font-size: 12.5px;
  color: #c8bba6;
  border-color: rgba(211, 177, 112, .30);
}

/* 3) ログイン画面をロビーと同じトンマナへ。入口と中で世界が変わらないようにする。
      面は暗く、文字は明るく、金の細線で締める。盤の色（--board-*）には触れない。 */
#auth {
  background:
    radial-gradient(circle at 50% -10%, rgba(205, 160, 74, .18), transparent 52%),
    linear-gradient(180deg, #17120c, #0d0b08);
}
#auth .lobby-card {
  background:
    radial-gradient(circle at 50% -20%, rgba(205, 160, 74, .16), transparent 48%),
    rgba(22, 18, 13, .96);
  border: 1px solid rgba(223, 186, 116, .26);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  color: #f4ecdd;
}
#auth .site-tagline { color: #d8c9ab; }
#auth .lobby-card label { color: #cbbda3; font-weight: 700; }
#auth .lobby-card input {
  background: rgba(255, 253, 248, .06);
  border: 1px solid rgba(223, 186, 116, .28);
  color: #f6efe2;
}
#auth .lobby-card input::placeholder { color: rgba(233, 220, 196, .45); }
#auth .lobby-card input:focus {
  border-color: rgba(223, 186, 116, .6);
  box-shadow: 0 0 0 3px rgba(205, 160, 74, .18);
  outline: none;
}
/* 選んでいる方が分かるように、非選択は沈め、選択は金で起こす */
#auth .auth-tab {
  background: rgba(255, 253, 248, .05);
  border: 1px solid rgba(223, 186, 116, .20);
  color: #cbbda3;
}
#auth .auth-tab.active {
  background: linear-gradient(180deg, rgba(205, 160, 74, .30), rgba(205, 160, 74, .14));
  border-color: rgba(223, 186, 116, .55);
  color: #fff6e4;
}
#auth .hint, #auth .auth-forgot a { color: #b3a68f; }
#auth .auth-forgot a { text-decoration: underline; }
/* 区切りの「または」。暗い面では線と字の両方を落とす */
#auth .oauth-sep { color: #9d907b; }
#auth .oauth-sep::before, #auth .oauth-sep::after { background: rgba(223, 186, 116, .22); }
/* Google のボタンは白のまま（他社の見た目なので勝手に暗くしない） */
#auth .auth-error { color: #ff9d86; }

/* --- トップ: 最下部を外したぶんを、機能名の字へ回す（2026-07-30） -------------
 *  会社名（設定画面には残る）と管理スロットをトップから外した。空いた高さは
 *  4 枚のカードが等分するので、そのまま字の大きさへ回せる。
 *  管理はヘッダーの歯車の隣へ移した（最下部の 9px は指で狙えなかった）。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .home-mode-card .home-mode-sub,
  .home-mode-card .meijin-banner-sub { font-size: 15.5px; }
  .home-mode-online .home-mode-sub,
  .home-mode-online .meijin-banner-sub { font-size: 17px; }
  .home-mode-card .meijin-banner-go { font-size: 15px; }
  .home-mode-online .meijin-banner-go { font-size: 16px; }
  .home-utility-nav button.mini2 { font-size: 14.5px; padding: 11px 6px; }
  .home-lobby .sub-links .link-btn { font-size: 14.5px; padding: 7px 12px; }
  /* 説明が長い行は折り返さず省略する。2行になると4枚の高さが揃わない */
  .home-mode-line { gap: 8px; }
}
/* ヘッダーの管理ボタン。歯車と同じ大きさに揃える */
#adminBtn.icon-btn { font-size: 15px; }

/* --- トップ: 説明を省略せず読ませる / 機能名の枠を広げる（2026-07-30）--------
 *  説明を1行に収めるため省略記号で切っていたが、字を大きくしたぶん切れ幅が増えて
 *  読めなくなった。切るのをやめ、入りきらなければ折り返す。
 *  機能名の枠は、背景写真の上側が空いているぶんだけ縦へ広げる。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  /* 説明は省略しない。折り返して全部見せる */
  .home-mode-line { flex-wrap: wrap; row-gap: 2px; }
  .home-mode-line .home-mode-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
  /* 機能名の枠を広げ、ロゴも大きくする。背景の上側が空いているので縦に伸ばせる */
  .home-mode-title { height: clamp(56px, 7.6dvh, 74px); }
  .home-mode-online .home-mode-title { height: clamp(68px, 9.2dvh, 90px); }
  .home-mode-card .home-mode-logo,
  .home-mode-card .meijin-banner-logo,
  .home-mode-card.hero .home-mode-logo {
    height: clamp(48px, 6.8dvh, 66px);
    max-height: 66px;
  }
  /* 強豪列伝は元の絵に余白が多く、同じ枠でも字が小さく見える。拡大で釣り合わせる */
  .home-mode-story .home-mode-title img { transform: scale(1.5); }
  .home-mode-meijin .home-mode-title img { transform: scale(1.12); }
  .home-mode-dojo .home-mode-title img { transform: scale(1.12); }
  .home-mode-online .home-mode-title img { transform: scale(1.5); }
  /* 枠を広げたぶん、看板を少し譲る */
  .home-lobby .lobby-site-logo { height: clamp(48px, 7.2dvh, 68px); transform: scale(1.24); }
}

/* --- トップ: 文字画像を切らずに、絵の中の字の大きさで揃える（2026-07-30）------
 *  機能名は文字画像なので、枠の高さより「絵の中の余白」が効く。同じ枠に入れても、
 *  余白の多い絵は字が小さく見える。枠を広げるだけでは揃わないので、
 *    ・枠は overflow を開けて、拡大しても切れないようにする
 *    ・絵ごとの拡大率で、字の大きさを目で揃える
 *  はみ出しはカード側が切るので、絵が隣へ漏れることはない。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  /* 拡大した絵が枠で切られないようにする */
  .home-mode-title { overflow: visible; }
  /* 下の3枚は枠を少し広げる。字が枠に触れて切れて見えていた */
  .home-mode-meijin .home-mode-title,
  .home-mode-story .home-mode-title,
  .home-mode-dojo .home-mode-title { height: clamp(62px, 8.4dvh, 80px); }
  /* 絵ごとの拡大率。オンライン対戦は絵の余白が広く、同じ枠でも字が小さく見える */
  .home-mode-online .home-mode-title img { transform: scale(1.78); }
  .home-mode-meijin .home-mode-title img { transform: scale(1.2); }
  .home-mode-story .home-mode-title img { transform: scale(1.42); }
  .home-mode-dojo .home-mode-title img { transform: scale(1.2); }
}

/* transform: scale() で大きくすると縦横とも伸びて、横がカードを超えて切れていた
   （実測 562px 対 カード 358px）。拡大をやめ、幅をカードいっぱいに取り、
   高さは object-fit: contain に任せる。これなら絵は1文字も切れない。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .home-mode-title { overflow: hidden; }
  .home-mode-card .home-mode-logo,
  .home-mode-card .meijin-banner-logo,
  .home-mode-card.hero .home-mode-logo {
    width: 97%;
    max-width: 97%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 0;
    transform: none;
  }
  /* 絵の中の余白が違うので、枠の高さで字の大きさを揃える */
  .home-mode-online .home-mode-title { height: clamp(74px, 9.8dvh, 96px); }
  .home-mode-meijin .home-mode-title,
  .home-mode-dojo .home-mode-title { height: clamp(60px, 8.0dvh, 76px); }
  .home-mode-story .home-mode-title { height: clamp(66px, 8.8dvh, 84px); }
  .home-mode-online .home-mode-title img,
  .home-mode-meijin .home-mode-title img,
  .home-mode-story .home-mode-title img,
  .home-mode-dojo .home-mode-title img { transform: none; }
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  /* 枠が縮められて指定の高さが効いていなかった。縮まないようにする */
  .home-mode-title { flex: 0 0 auto; }
  /* contain は高さで決まるので、枠を高くしたぶんだけ字が大きくなる */
  .home-mode-online .home-mode-title { height: 92px; }
  .home-mode-meijin .home-mode-title,
  .home-mode-dojo .home-mode-title { height: 72px; }
  .home-mode-story .home-mode-title { height: 76px; }
  /* 枠を高くしたぶん、説明まわりの余白を詰める */
  .home-mode-card { gap: 1px; padding: 5px 10px; }
}

/* --- トップ: 絵の透明な余白を切り落とし、字そのものを大きくする（2026-07-31）----
 *  「オンライン対戦」「強豪列伝」だけ字が小さく見えていた。原因は枠ではなく絵で、
 *  この2枚は上下に透明な余白があり、縦の45%が空白だった（実測）。
 *
 *    オンライン対戦  900x450 のうち字は 892x242（上 23.3% / 下 22.9% が空白）
 *    強豪列伝        900x450 のうち字は 890x259（上 23.8% / 下 18.7% が空白）
 *    名人への道      1000x250 のうち字は 978x224（余白ほぼ無し）
 *    道場            900x291 が全面（余白無し）
 *
 *  contain は空白ごと枠に収めるので、余白の多い2枚だけ字が小さくなる。
 *  そこで、この2枚は img の箱を「字の範囲の縦横比」にし、cover で余白だけ切る。
 *  箱も絵も幅に比例して伸びるので、画面幅が変わっても切る量は変わらない
 *  （＝どの幅でも字は切れない）。縦は max-width で頭打ちにして高さを抑える。
 *  余白の無い2枚は今までどおり contain のまま（切るものが無いため）。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .home-mode-online .home-mode-title,
  .home-mode-story .home-mode-title { height: auto; }
  .home-mode-online .home-mode-title img,
  .home-mode-story .home-mode-title img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
  }
  /* 字の範囲の縦横比。cover がこの比に合わせて上下の余白だけを削る */
  .home-mode-online .home-mode-title img {
    aspect-ratio: 892 / 242;
    max-width: 320px;
    /* 字の中心は絵の中心とほぼ同じ（105/450 上・104/450 下） */
    object-position: center 51%;
  }
  .home-mode-story .home-mode-title img {
    aspect-ratio: 890 / 259;
    /* 字が少し下寄り（上 107/450・下 85/450）なので、その分だけ下へ寄せる */
    object-position: center 57%;
  }
  /* 強豪列伝の絵は #storyBanner 側の指定が強いので、そちらで幅を止める */
  #storyBanner .meijin-banner-logo { max-width: 261px; max-height: none; margin: 0 auto; }

  /* 説明と導線が枠からはみ出して、下の行が半分に切れていた（実測 8〜10px 超過）。
     行間と余白を詰めて、2行が中に収まるようにする */
  .home-mode-line { row-gap: 0; }
  .home-mode-line .home-mode-sub { line-height: 1.16; }
  .home-mode-card { gap: 0; padding: 2px 10px; }
  /* オンライン対戦の枠は絵の高さで決まるようになったので、その分を下3枚へ回す */
  .home-mode-grid { grid-template-rows: 1.17fr 1fr 1.09fr 1fr; }
}

/* 背の低い画面（375x667 など）では 4 枚ぶんの高さが足りず、説明の 2 行目が切れる。
   絵の大きさと枠の高さを画面の高さにも追随させ、どの高さでも切れないようにする。
   812 以上の画面では上の px 上限が先に効くので、見え方は変わらない。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .home-mode-online .home-mode-title img { max-width: min(320px, calc(10.4dvh * 3.686)); }
  #storyBanner .meijin-banner-logo { max-width: min(261px, calc(9.4dvh * 3.436)); }
  .home-mode-meijin .home-mode-title,
  .home-mode-dojo .home-mode-title { height: min(72px, 8.9dvh); }
}
@media (max-width: 820px) and (max-height: 720px) {
  .home-mode-card .home-mode-sub,
  .home-mode-card .meijin-banner-sub { font-size: 13px; }
  .home-mode-online .home-mode-sub,
  .home-mode-online .meijin-banner-sub { font-size: 14px; }
  .home-mode-card .meijin-banner-go { font-size: 12.5px; }
  .home-mode-online .meijin-banner-go { font-size: 13.5px; }
}
@media (max-width: 820px) and (max-height: 720px) {
  .home-mode-online .home-mode-title img { max-width: calc(8.6dvh * 3.686); }
  #storyBanner .meijin-banner-logo { max-width: calc(8.0dvh * 3.436); }
  .home-mode-meijin .home-mode-title,
  .home-mode-dojo .home-mode-title { height: 7.1dvh; }
  .home-mode-card { padding: 1px 9px; }
}

/* エンジン名の帯がロビーの最下段（ミッション／アリーナ）に 6px 重なっていた。
   位置指定は fixed なので、ロビーでは出さない。版番号は残す（反映の確認に使う）。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  body:has(#lobby:not(.hidden)) .engine-label { display: none; }
}

/* --- トップ: 補助ボタン2段を薄くし、主機能カードの説明へ高さを返す（2026-08-01）
 * ショップ段とミッション段の上下余白が大きく、4つの主機能カードの説明末尾が
 * 切れていた。文字の大きさは保ち、ボタンの縦余白と段間だけを詰める。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .home-utility-nav {
    gap: 4px;
    margin: 3px 0 0;
  }
  .home-utility-nav button.mini2 {
    min-height: 28px;
    padding: 2px 4px;
    font-size: 13px;
    line-height: 1.08;
  }
  .home-lobby .sub-links {
    gap: 3px;
    margin: 0;
  }
  .home-lobby .sub-links .link-btn {
    min-height: 22px;
    padding: 1px 4px;
    font-size: 13px;
    line-height: 1.05;
  }
}

/* 戦歴（持ち時間ごと）。区分を選んで、その条件だけの通算・先後・連勝を見る。
   持ち時間が違えば指し方も勝ち方も別物なので、ひとまとめの数字だけでは見えない。 */
.timerec { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.timerec-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.timerec-tab {
  width: auto; flex: 0 0 auto; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-3); color: var(--text);
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: none;
}
.timerec-tab.on { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.trt-games { margin-left: 6px; font-size: 11px; font-weight: 600; opacity: .8; }
.timerec-body { margin-top: 8px; display: grid; gap: 4px; }
.timerec-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: 8px; }
.tr-name { font-size: 12px; font-weight: 700; color: var(--muted); }
.tr-val { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-sub { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* 解析の注意書き。毎回3行を占領しないよう畳んでおく。 */
.ai-caveat-box { margin-top: 8px; }
.ai-caveat-box > summary {
  cursor: pointer; font-size: 11px; color: var(--muted);
  list-style: none; padding: 4px 0;
}
.ai-caveat-box > summary::-webkit-details-marker { display: none; }
.ai-caveat-box > summary::before { content: '▸ '; }
.ai-caveat-box[open] > summary::before { content: '▾ '; }

/* エンジンのログ（管理者コンソール）。
   1対局＝1枠。上から「いつ・何のモード・誰と」「勝敗」「端末と実性能」の順に読む。
   束ねた集計だけでは何の記録か読み取れなかったので、言葉で書く。 */
.perf-log { display: flex; flex-direction: column; gap: 8px; }
.perf-log-row {
  border-left: 3px solid var(--line, #c9a24a);
  background: rgba(255,255,255,.04);
  border-radius: 8px; padding: 8px 10px;
}
.perf-log-head { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.perf-log-matchup { font-weight: 800; font-size: 13px; line-height: 1.45; margin: 3px 0 5px; }
.perf-log-verdict {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13px; font-weight: 800; margin-bottom: 6px;
}
.perf-log-result-badge {
  flex: 0 0 auto; min-width: 76px; padding: 5px 9px; border-radius: 999px;
  text-align: center; color: #fff; background: #6f7784;
}
.perf-log-verdict.win .perf-log-result-badge { background: #b45d20; }
.perf-log-verdict.loss .perf-log-result-badge { background: #536784; }
.perf-log-verdict.draw .perf-log-result-badge { background: #657069; }
.perf-log-result-detail { min-width: 0; line-height: 1.45; }
.perf-log-body { font-size: 12px; opacity: .85; line-height: 1.6; }
.perf-log-flags { font-size: 12px; margin-top: 4px; color: #d98a3a; }

/* 研究連戦の途中成績。スマホでは右のログ欄が見えないので盤の直前に固定する。 */
.arena-series-live {
  margin: 4px 0 6px; padding: 6px 9px;
  border: 1px solid rgba(112, 181, 219, .48); border-radius: 10px;
  background: linear-gradient(135deg, rgba(21, 39, 58, .94), rgba(33, 30, 45, .94));
  color: #f7f2e8; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.arena-series-live-head {
  margin-bottom: 4px; color: #a9d7ee; font-size: 11px; font-weight: 800;
  text-align: center; letter-spacing: .02em;
}
.arena-series-live-score {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 7px;
}
.arena-series-live-side { min-width: 0; text-align: center; }
.arena-series-live-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; opacity: .9;
}
.arena-series-live-record { display: block; margin-top: 1px; font-size: 14px; color: #fff; }
.arena-series-live-draw {
  padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.1);
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
@media (max-width: 420px) {
  .arena-series-live { margin-top: 3px; padding: 5px 7px; }
  .arena-series-live-score { gap: 4px; }
  .arena-series-live-record { font-size: 13px; }
}

/* 管理画面: キャラのエンジン設定をまとめて初期化する行 */
.admin-engine-reset {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid rgba(255, 200, 120, .35); border-radius: 8px;
  background: rgba(255, 200, 120, .08);
}
.admin-engine-reset .muted { flex: 1 1 200px; font-size: .86rem; }

/* 管理画面: 出る場所のタブ。
   1行に3つのチェックが並んでいたころは、どこを触るとどこに効くのか読めなかった。
   場所でタブを分け、そのタブでは「そこに出すか」だけを扱う。 */
.ac-tabs { display: flex; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
.ac-tab {
  flex: 1 1 100px; padding: 9px 8px; border-radius: 9px 9px 0 0;
  border: 1px solid rgba(255, 255, 255, .14); border-bottom: none;
  background: rgba(255, 255, 255, .04); color: inherit;
  font-size: .86rem; font-weight: 700; cursor: pointer;
}
.ac-tab.on { background: var(--accent, #b5462f); color: #fff; border-color: transparent; }
.ac-tabhint { font-size: .8rem; color: var(--muted); margin: 0 0 8px; line-height: 1.6; }
/* まとめて操作する相手を選ぶ印。行の先頭に置いて、目で追えるようにする。 */
.ac-pick { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent, #b5462f); }
.ac-place-toggle { flex: 0 0 auto; font-size: .82rem; gap: 4px; }
.ac-selcount { font-size: .82rem; font-variant-numeric: tabular-nums; }
.ac-bulk button[disabled] { opacity: .45; cursor: default; }

/* 研究対局: 中断中に席の指し手を替える窓 */
.arena-swap .modal-box { max-width: 380px; }
.arena-swap-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 10px 0; font-size: .92rem;
}
.arena-swap-row select { flex: 0 1 220px; }

/* 研究対局を中断中: 押すと指し手を替えられる席のカード */
.opp-info.opp-swappable {
  outline: 1px dashed rgba(255, 200, 120, .55);
  outline-offset: 2px;
  border-radius: 8px;
}
.opp-info.opp-swappable::after {
  content: '⚙ 替える';
  font-size: .68rem; color: rgba(255, 200, 120, .9);
  margin-left: 6px; white-space: nowrap;
}

/* ===== 全画面 UI/UX 共通Gate（2026-08-09） =====
 * 小さな見た目を優先した結果、390px実測でヘッダー23px、タブ37px、
 * モーダルの×27pxまで縮んでいた。操作領域は画面を問わず44px確保する。 */
:root { --tap-target: 44px; }
button,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select {
  min-height: var(--tap-target);
}
button {
  line-height: 1.25;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
button.small,
button.mini,
button.mini2,
.link-btn,
.rank-tab,
.ptab,
.auth-tab,
.timerec-tab,
.ac-tab {
  min-height: var(--tap-target);
}
.icon-btn,
.modal-close {
  min-width: var(--tap-target);
  width: var(--tap-target);
  height: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.modal-close {
  top: 6px;
  right: 6px;
  z-index: 4;
  border-radius: 50%;
  font-size: 24px;
}
.modal-card:has(> .modal-close) { padding-top: 54px; }
.kifu-search input,
.kifu-search button,
.shop-row button,
.equip-shop-row button { min-height: var(--tap-target); }
.deco-toggle,
.settings-row,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { min-height: var(--tap-target); }

/* 操作名・固有名詞を「…」で隠さない。固有名詞は最大2行まで見せる。 */
.sc-label,
.review-opp,
.rank-name,
.arena-name,
.kifu-vs,
.ann-manage-title,
.equip-slot-state span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.review-opp,
.rank-name,
.arena-name,
.kifu-vs,
.ann-manage-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  /* 便利機能を小さくして一画面へ押し込まず、必要なら縦へスクロールさせる。 */
  .home-utility-nav button.mini2,
  .home-lobby .sub-links .link-btn {
    min-height: var(--tap-target);
    padding: 7px 6px;
    line-height: 1.2;
  }
  header .userbox button { min-width: var(--tap-target); }
  #logoutBtn { min-width: auto; padding-inline: 10px; }
  .profile-tabs,
  .rank-tabs { scrollbar-width: thin; }
  .profile-tabs .ptab,
  .rank-tabs .rank-tab { min-height: var(--tap-target); }
}

/* ===== 名人への道: 装備カテゴリと3画面 ===== */
.trainee-gear-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 2px 0 12px;
}
.trainee-gear-nav-btn,
.equip-view-btn {
  min-width: 0;
  border: 1px solid rgba(153,112,45,.28);
  background: #f5eddf;
  color: #55432b;
  box-shadow: none;
}
.trainee-gear-nav-btn {
  display: grid;
  gap: 2px;
  padding: 7px 4px;
  position: relative;
}
.trainee-gear-nav-label { font-size: 11px; font-weight: 900; }
.trainee-gear-nav-count { font-size: 10px; color: #8b7657; }
.trainee-gear-nav-btn.active,
.equip-view-btn.active {
  border-color: #b5462f;
  background: linear-gradient(180deg, #c85b3f, #a43d29);
  color: #fff;
}
.trainee-gear-nav-btn.active .trainee-gear-nav-count { color: #ffe5cb; }
.trainee-attention-note {
  display: block;
  width: 100%;
  margin: -4px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(199, 132, 20, .38);
  border-radius: 10px;
  background: #fff5d8;
  color: #704b13;
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}
.trainee-attention-note::after { content: ' ›'; }
.trainee-tab.can-improve,
.trainee-gear-nav-btn.can-improve {
  position: relative;
  border-color: #d19725;
  box-shadow: 0 0 0 2px rgba(225,166,45,.2), 0 0 12px rgba(225,166,45,.28);
}
.trainee-improve-badge {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #fff8df;
  border-radius: 50%;
  background: linear-gradient(180deg, #f4b83c, #c96b16);
  color: #fff;
  box-shadow: 0 2px 6px rgba(82,42,8,.34);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
  animation: trainee-improve-pulse 1.65s ease-in-out infinite;
}
@keyframes trainee-improve-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.12); filter: brightness(1.18); }
}
body.no-anim .trainee-improve-badge { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .trainee-improve-badge { animation: none; }
}
.equip-view-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
}
.equip-view-btn {
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 52px;
  padding: 6px 4px;
}
.equip-view-label { font-size: 11.5px; font-weight: 900; }
.equip-view-count { font-size: 10px; opacity: .8; }
.equip-view-lead {
  margin: 4px 0 10px;
  color: #756752;
  font-size: 11px;
  line-height: 1.55;
}
.equip-current-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.equip-current-slot {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 92px auto minmax(30px, auto) auto;
  justify-items: center;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(153,112,45,.25);
  border-radius: 12px;
  background: rgba(255,251,240,.74);
  text-align: center;
}
.equip-current-slot.filled { border-color: rgba(75,126,56,.42); background: #f0f7e9; }
.equip-current-slot.can-fill {
  border-color: #df9c27; background: #fff8df;
  box-shadow: 0 0 0 2px rgba(231,163,42,.14), 0 0 12px rgba(231,163,42,.16);
}
.equip-current-slot-label { justify-self: stretch; color: #6b5635; font-size: 11px; font-weight: 900; text-align: left; }
.equip-current-art {
  width: 68px;
  height: 92px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(130,95,35,.35);
  background: #17121c;
}
.equip-current-art.rarity-ssr { border-color: #b85acb; box-shadow: 0 0 9px rgba(184,90,203,.35); }
.equip-current-art.rarity-ur { border-color: #e3b84f; box-shadow: 0 0 12px rgba(203,108,236,.48); }
.equip-current-empty-mark {
  width: 68px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(100,80,45,.28);
  border-radius: 8px;
  color: #a09176;
  font-size: 28px;
}
.equip-current-name { min-width: 0; font-size: 12px; font-weight: 900; overflow-wrap: anywhere; }
.equip-current-attention { color: #9b5d00; font-size: 10px; font-weight: 900; line-height: 1.25; }
.equip-current-eff { min-width: 0; color: #a3412d; font-size: 10px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.equip-current-change { align-self: end; width: 100%; }
.equip-total-effect {
  margin: 9px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #efe5d0;
  color: #634c2e;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
}
.equip-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 8px;
}
.equip-filter-row button { width: 100%; padding-inline: 4px; }
.equip-filter-row button.active { background: #6e5130; color: #fff; }
.equip-empty-state {
  padding: 22px 14px;
  border: 1px dashed rgba(120,95,55,.3);
  border-radius: 12px;
  color: #7e705d;
  background: rgba(255,251,240,.6);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.equip-shop-list { margin-top: 0; }

@media (max-width: 370px) {
  .trainee-gear-nav-label { font-size: 10px; }
  .equip-view-label { font-size: 10.5px; }
  .equip-current-slot { padding: 7px; }
}

/* ===== Device responsive policy: mobile first, tablet/desktop expansion ===== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #e3a62f;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover,
  .link-btn:hover,
  [role="button"]:not([aria-disabled="true"]):hover {
    filter: brightness(1.06);
  }
  .equip-current-slot.filled:hover {
    border-color: rgba(181, 70, 47, .6);
    box-shadow: 0 5px 14px rgba(67, 43, 20, .12);
  }
}

@media (min-width: 700px) {
  .equip-current-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .equip-current-slot {
    grid-template-rows: auto 108px auto minmax(44px, auto) auto;
    padding: 10px 8px;
  }
  .equip-current-art,
  .equip-current-empty-mark {
    width: 80px;
    height: 108px;
  }
}

@media (min-width: 1024px) {
  .equip-view-lead,
  .equip-total-effect { font-size: 12px; }
  .equip-current-name { font-size: 13px; }
  .equip-current-eff { font-size: 11px; }
}

@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  /* ホームは一画面に収める専用レイアウトを維持する。
     共通Gateから縦スクロールを足すと、こだわって調整した4枚の主役が崩れる。 */
  /* 上部の補助操作も従来のコンパクトな見た目を維持する。
     全画面44px Gateをここへ重ねると、白い箱が主役より目立ってしまう。 */
  body:has(#lobby:not(.hidden)) header .userbox .icon-btn {
    min-width: 30px;
    width: 30px;
    min-height: 30px;
    height: 30px;
    padding: 4px 6px;
    font-size: 13px;
  }
  body:has(#lobby:not(.hidden)) header .userbox #logoutBtn {
    width: auto;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    padding: 5px 7px;
    font-size: 10px;
  }
  #traineeDialog .modal-close {
    min-width: var(--tap-target);
    width: var(--tap-target);
    min-height: var(--tap-target);
    height: var(--tap-target);
  }
  .trainee-hero { align-items: flex-start; }
  .trainee-identity {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .trainee-name {
    grid-column: 1 / -1;
    grid-row: 1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
  .trainee-rank { grid-column: 1; grid-row: 2; }
  .trainee-remain { grid-column: 2; grid-row: 2; }
  .trainee-hero-sub { grid-column: 1 / -1; grid-row: 3; }
  .trainee-competition { grid-column: 1 / -1; grid-row: 4; }
  .trainee-companions { grid-column: 1 / -1; grid-row: 5; }
}

/* ===== 名人への道以外: 周辺画面の操作Gate（2026-08-09） ===== */
/* 対局専用の高詳細度ルールが、全画面44px Gateを34pxへ戻していた。 */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  body:has(#game:not(.hidden)) .controls button {
    min-height: var(--tap-target);
  }
}

/* 再生ボタンは高さだけでなく、親指で押せる横幅も確保する。 */
#replay .replay-controls #rpFirst,
#replay .replay-controls #rpPrev,
#replay .replay-controls #rpPlay,
#replay .replay-controls #rpNext,
#replay .replay-controls #rpLast {
  min-width: var(--tap-target);
}

/* divで描く一覧行も、マウスだけでなくタッチ・キーボードから同じ入口にする。 */
.kifu-info[role="button"],
.rank-name[role="button"],
.profile-namerow[role="button"],
.char-thumb[role="button"] {
  min-height: var(--tap-target);
  border-radius: 8px;
}

/* 横向きでも、回転前の縦画面と同じ高さ基準でホームを組む。 */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .home-lobby .lobby-site-logo { height: clamp(48px, 7.2dvw, 68px); }
  .home-mode-online .home-mode-title img { max-width: min(320px, calc(10.4dvw * 3.686)); }
  #storyBanner .meijin-banner-logo { max-width: min(261px, calc(9.4dvw * 3.436)); }
  .home-mode-meijin .home-mode-title,
  .home-mode-dojo .home-mode-title { height: min(72px, 8.9dvw); }
}