noscript{display:none !important}

/* ============================================================
   将棋定跡ガイド — Refined CSS (2026 redesign)
   - 盤面を本物の比率（縦:横 ≒ 1.10:1）に補正
   - ダーク × 真鍮ゴールドの上品な再構築
   - JS（joseki-engine.js）の座標系（52px グリッド）はそのまま
============================================================ */

:root{
  /* ── 盤面セル ──
     JSは 52px グリッドで pieces.style.left/top を計算する。
     CSS 側で .board に scaleY を掛けて視覚的な縦長比率を得る。
  */
  --cell:        52px;          /* JS と一致（変更不可） */
  --cell-w:      52px;          /* 横セル */
  --cell-ratio:  1.0961;        /* 36.4cm / 33.3cm ≒ 1.0961 */
  --cell-h:      calc(var(--cell-w) * var(--cell-ratio));   /* 約 57px */

  /* ── サーフェス ── 紙と墨をデジタルで再解釈した深いベース */
  --bg-0:        #0c0b14;
  --bg-1:        #14121e;
  --bg-2:        #1c1928;
  --bg-3:        #252233;
  --bg-glass:    rgba(28,25,40,.62);
  --bg-glass-2:  rgba(36,32,52,.55);
  --hair:        rgba(255,255,255,.06);
  --hair-2:      rgba(255,255,255,.10);
  --hair-warm:   rgba(232,200,140,.10);

  /* ── 文字 ── */
  --ink:         #ece4d3;
  --ink-2:       #c9c0ad;
  --ink-3:       #8a826f;
  --ink-4:       #56503f;

  /* ── アクセント ── */
  --gold:        #e8c068;
  --gold-bright: #f6d98a;
  --gold-deep:   #b8902f;
  --gold-soft:   rgba(232,192,104,.14);
  --accent:      #d05c3d;       /* 朱（少しトーン落とし） */
  --green:       #4cb287;
  --blue:        #6fa6ff;
  --orange-warm: #ff9b64;       /* 後手記号色（既存と整合） */
  --blue-cool:   #82b4ff;       /* 先手記号色（既存と整合） */

  /* ── 盤面 / 駒 ── 榧色を維持しつつ、わずかに深みを */
  --board-bg-1:  #d8b262;
  --board-bg-2:  #c89a48;
  --board-line:  #6a4310;
  --board-rim:   #3a230a;

  --sente-bg1:   #f7f1e2;
  --sente-bg2:   #e4d6b8;
  --sente-ink:   #1a0e04;
  --gote-bg1:    #b69a76;
  --gote-bg2:    #8f7654;
  --gote-ink:    #16090a;

  /* ── 影 ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --shadow-md:   0 6px 18px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
  --shadow-lg:   0 18px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  --shadow-board:
                 0 26px 60px -16px rgba(0,0,0,.75),
                 0 8px 22px -8px rgba(0,0,0,.55),
                 inset 0 0 0 1px rgba(255,220,150,.08);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --easing: cubic-bezier(.22,.61,.36,1);
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'BIZ UDPGothic','Noto Sans JP',system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(232,192,104,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(208,92,61,.05), transparent 60%),
    var(--bg-0);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* =================================================================
   PAGE NAV (sticky top)
================================================================= */
.page-nav{
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:10px 14px;
  background:rgba(12,11,20,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hair);
}
.page-nav-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; color:var(--ink-2);
  padding:7px 12px 7px 11px; border-radius:10px;
  border:1px solid var(--hair);
  transition:color .18s, border-color .18s, background .18s;
}
.page-nav-link .pn-ico{width:14px;height:14px;flex-shrink:0;color:var(--ink-3)}
.page-nav-link:hover{color:var(--gold); border-color:rgba(232,192,104,.35); background:rgba(232,192,104,.05)}
.page-nav-link:hover .pn-ico{color:var(--gold)}

.pnav-pager{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--hair); border-radius:10px;
  background:rgba(255,255,255,.025);
  padding:2px;
}
.pnav-arrow{
  width:32px; height:32px; padding:0; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--ink-2);
  cursor:pointer; transition:color .18s, background .18s;
}
.pnav-arrow svg{width:14px;height:14px}
.pnav-arrow:hover{color:var(--gold); background:rgba(232,192,104,.08)}
.pnav-arrow:disabled{color:var(--ink-4); cursor:not-allowed; background:transparent}
.pnav-counter{
  font-size:.72rem; color:var(--ink-2);
  min-width:54px; text-align:center;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
  padding:0 4px;
}
.pnav-report{
  width:36px; height:36px; padding:0; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--hair); color:var(--ink-3);
  transition:color .18s, border-color .18s, background .18s;
}
.pnav-report svg{width:15px;height:15px}
.pnav-report:hover{color:var(--gold); border-color:rgba(232,192,104,.35); background:rgba(232,192,104,.05)}

@media(max-width:480px){
  .page-nav{padding:8px 10px; gap:6px}
  .page-nav-link span{display:none}
  .page-nav-link{padding:8px 10px}
  .page-nav-link .pn-ico{width:16px;height:16px}
}

/* =================================================================
   HEADER
================================================================= */
.site-header{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 320px at 50% 110%, rgba(232,192,104,.08), transparent 60%),
    linear-gradient(180deg,#0c0b14 0%, #15121f 60%, #1a1525 100%);
  padding:clamp(40px, 8vw, 72px) 24px clamp(32px, 6vw, 52px);
  text-align:center;
  border-bottom:1px solid var(--hair);
}
.site-header::before{
  content: attr(data-watermark); position:absolute;
  font-family:'Noto Serif JP',serif;
  font-size:clamp(160px, 28vw, 320px); font-weight:700;
  color:rgba(255,255,255,.022);
  top:50%; left:50%; transform:translate(-50%,-58%);
  pointer-events:none; white-space:nowrap; letter-spacing:.05em;
  user-select:none;
}
.site-header::after{
  content:''; position:absolute; left:50%; bottom:0;
  width:min(420px,70%); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(232,192,104,.5),transparent);
}
.site-header > *{position:relative; z-index:1}

.header-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  margin-bottom:22px;
  font-size:.7rem; letter-spacing:.32em; font-weight:700;
  color:var(--gold);
  text-transform:uppercase;
}
.eyebrow-num{font-family:'Noto Serif JP',serif; font-size:.78rem; letter-spacing:.18em}
.eyebrow-sep{
  width:28px; height:1px;
  background:linear-gradient(90deg,rgba(232,192,104,.6),rgba(232,192,104,.15));
}
.eyebrow-cat{color:var(--ink-2); letter-spacing:.28em}

.site-title{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(2.1rem, 7vw, 3.2rem);
  font-weight:700; color:#fff;
  letter-spacing:.06em; margin-bottom:14px;
  text-wrap:balance;
  line-height:1.15;
}
.site-title span{
  background:linear-gradient(180deg,var(--gold-bright) 10%,var(--gold-deep) 95%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.site-subtitle{
  font-size:clamp(.78rem, 2.4vw, .9rem);
  color:var(--ink-3);
  letter-spacing:.12em;
  text-wrap:balance;
}

.header-meta{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0; list-style:none;
  margin-top:28px; padding:0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  max-width:520px; margin-inline:auto;
}
.header-meta li{
  flex:1 1 0; min-width:0;
  padding:14px 12px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  position:relative;
}
.header-meta li + li::before{
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:1px; background:var(--hair);
}
.header-meta a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:100%;
  transition:color .18s;
}
.header-meta a:hover{color:var(--gold)}
.hm-k{
  font-size:.62rem; color:var(--ink-3);
  letter-spacing:.18em; font-weight:600;
}
.hm-v{
  font-family:'Noto Serif JP',serif;
  font-size:.92rem; color:var(--ink); font-weight:600;
  letter-spacing:.04em;
}
.header-meta a:hover .hm-v{color:var(--gold-bright)}

@media(max-width:420px){
  .header-eyebrow{gap:10px; font-size:.65rem}
  .eyebrow-sep{width:18px}
  .header-meta li{padding:12px 6px}
  .hm-v{font-size:.82rem}
  .hm-k{font-size:.58rem; letter-spacing:.14em}
}

/* =================================================================
   STATS BLOCK
================================================================= */
.stats-block{
  padding:clamp(28px, 5vw, 44px) 24px clamp(28px, 5vw, 40px);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-0));
  border-bottom:1px solid var(--hair);
  max-width:720px; margin:0 auto;
}
.stats-title{
  font-family:'Noto Serif JP',serif;
  font-size:.78rem; font-weight:600;
  color:var(--ink-3);
  letter-spacing:.34em; text-transform:uppercase;
  text-align:center; margin-bottom:24px;
  position:relative; padding-bottom:14px;
}
.stats-title::after{
  content:''; position:absolute; left:50%; bottom:0;
  width:24px; height:1px; transform:translateX(-50%);
  background:rgba(232,192,104,.4);
}
.stats-grid{
  display:grid; gap:14px;
  max-width:520px; margin:0 auto;
}
.stat-row{
  display:grid;
  grid-template-columns:6.5em 1fr;
  align-items:center; gap:18px;
}
.stat-row dt{
  font-size:.82rem; color:var(--ink-2);
  font-weight:600; letter-spacing:.04em;
  font-family:'Noto Serif JP',serif;
}
.stat-row dd{
  display:flex; align-items:center; gap:12px;
}
.stat-bar{
  flex:1; height:6px; border-radius:3px;
  background:rgba(255,255,255,.05);
  overflow:hidden; position:relative;
  border:1px solid rgba(255,255,255,.04);
}
.stat-bar > span{
  display:block; height:100%;
  width:calc(var(--v) / 5 * 100%);
  background:linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius:3px;
  position:relative;
  box-shadow:0 0 14px rgba(232,192,104,.18);
}
.stat-row--key .stat-bar > span{
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow:0 0 18px rgba(246,217,138,.3);
}
.stat-num{
  font-family:'Noto Serif JP',serif;
  font-size:1.05rem; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums;
  min-width:1.2em; text-align:right;
}
.stat-row--key .stat-num{color:var(--gold-bright)}
.stat-max{
  font-size:.7rem; color:var(--ink-4);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}

@media(max-width:480px){
  .stat-row{grid-template-columns:5.5em 1fr; gap:14px}
  .stat-row dt{font-size:.78rem}
  .stat-num{font-size:.95rem}
}

/* レガシー互換（不可視） */
.radar-strip-wrap,.stat-strip,.stat-chip,.stats-table-wrap{display:none}

/* =================================================================
   TABS
================================================================= */
.tab-nav{
  display:flex; background:var(--bg-1);
  border-bottom:1px solid var(--hair);
  padding:0 24px;
  position:sticky; top:54px; z-index:40;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
.tab-btn{
  padding:16px 0; margin-right:32px;
  background:none; border:none;
  color:var(--ink-3); font-size:.88rem; font-weight:600;
  letter-spacing:.06em; cursor:pointer;
  border-bottom:2px solid transparent;
  display:inline-flex; align-items:baseline; gap:10px;
  transition:color .2s, border-color .2s;
}
.tab-btn .tab-num{
  font-family:'Noto Serif JP',serif;
  font-size:.7rem; color:var(--ink-4);
  letter-spacing:.18em; font-weight:500;
  transition:color .2s;
}
.tab-btn .tab-text{font-family:'Noto Serif JP',serif; font-size:.95rem}
.tab-btn.active{color:var(--gold-bright); border-bottom-color:var(--gold)}
.tab-btn.active .tab-num{color:var(--gold)}
.tab-btn:hover:not(.active){color:var(--ink)}

@media(max-width:480px){
  .tab-nav{padding:0 16px}
  .tab-btn{padding:14px 0; margin-right:24px}
  .tab-btn .tab-text{font-size:.88rem}
}

/* =================================================================
   MAIN
================================================================= */
.main-content{max-width:980px; margin:0 auto; padding:40px 24px 60px}
.section{display:none}
.section.active{display:block; animation:fadeUp .5s var(--easing) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* =================================================================
   BOARD LAYOUT
================================================================= */
.board-wrapper{
  display:flex; gap:36px; align-items:flex-start; flex-wrap:wrap;
}
.board-col{display:flex; flex-direction:column; flex-shrink:0; gap:0}
.board-col .controls{margin-top:22px}
.board-scale-outer{flex-shrink:0}
.board-scale-wrap{display:inline-block; transform-origin:top left}
.board-area{user-select:none}

.file-labels{
  display:flex; padding-left:24px; margin-bottom:6px;
}
.file-label{
  width:var(--cell-w); text-align:center;
  font-size:.74rem; color:var(--ink-3);
  font-family:'Noto Serif JP',serif;
  letter-spacing:.04em;
}
.board-row-wrap{display:flex; align-items:stretch}
.rank-labels{
  display:flex; flex-direction:column; margin-right:6px; width:18px;
  /* 段ラベルは scale 後の盤と高さを合わせるため transform 同期 */
  transform:scaleY(var(--cell-ratio)); transform-origin:top center;
}
.rank-label{
  height:var(--cell); /* JS basis */
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; color:var(--ink-3);
  font-family:'Noto Serif JP',serif;
  /* 文字を縦伸びさせない */
  transform:scaleY(calc(1 / var(--cell-ratio)));
}

/* =================================================================
   BOARD (本物の縦長比率を再現)
   - JSは 52×52 グリッドで left/top を計算
   - .board に scaleY を掛けて視覚的に 52 × 57 セルへ
   - .piece-shape を逆 scaleY して文字の歪みを補正
================================================================= */
.board{
  position:relative;
  width:calc(var(--cell)*9);
  height:calc(var(--cell)*9);
  background:
    linear-gradient(180deg, var(--board-bg-1) 0%, var(--board-bg-2) 100%);
  background-image:
    /* 微細な木目（ノイズ風） */
    radial-gradient(1.3px 1px at 12% 18%, rgba(106,67,16,.15), transparent 50%),
    radial-gradient(1.2px 1px at 78% 62%, rgba(106,67,16,.12), transparent 50%),
    radial-gradient(1px 1px at 42% 80%, rgba(106,67,16,.10), transparent 50%),
    /* 罫線 */
    repeating-linear-gradient(0deg,
      transparent, transparent calc(var(--cell) - 1px),
      var(--board-line) calc(var(--cell) - 1px), var(--board-line) var(--cell)),
    repeating-linear-gradient(90deg,
      transparent, transparent calc(var(--cell) - 1px),
      var(--board-line) calc(var(--cell) - 1px), var(--board-line) var(--cell)),
    linear-gradient(180deg, var(--board-bg-1), var(--board-bg-2));
  background-size:
    auto, auto, auto,
    var(--cell) var(--cell),
    var(--cell) var(--cell),
    auto;
  outline:2px solid var(--board-line);
  box-shadow:var(--shadow-board);
  border-radius:3px;
  overflow:visible;
  /* 縦長比率に visual scale。座標は JS の 52 グリッドのまま */
  transform:scaleY(var(--cell-ratio));
  transform-origin:top center;
}
/* 星 */
.board::before, .board::after,
.board .hoshi1, .board .hoshi2{
  content:''; position:absolute;
  width:8px; height:8px; border-radius:50%;
  background:var(--board-rim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transform:translate(-50%,-50%);
}
.board::before{left:calc(var(--cell)*3); top:calc(var(--cell)*3)}
.board::after {left:calc(var(--cell)*6); top:calc(var(--cell)*3)}
.board .hoshi1{left:calc(var(--cell)*3); top:calc(var(--cell)*6)}
.board .hoshi2{left:calc(var(--cell)*6); top:calc(var(--cell)*6)}

/* board-area の高さを scale 後に合わせる */
.board-row-wrap > .board{margin-bottom:calc(var(--cell) * 9 * (var(--cell-ratio) - 1))}

/* =================================================================
   HIGHLIGHTS
================================================================= */
.hl-from, .hl-to, .hl-quiz{
  position:absolute;
  width:var(--cell); height:var(--cell);
  pointer-events:none; border-radius:3px;
  z-index:5; transition:opacity .3s;
}
.hl-from{
  background:radial-gradient(circle at center, rgba(255,210,90,.28), rgba(255,200,40,.12) 70%);
  box-shadow:inset 0 0 0 1.5px rgba(255,210,90,.55);
}
.hl-to{
  background:radial-gradient(circle at center, rgba(232,108,80,.36), rgba(208,92,61,.18) 70%);
  box-shadow:inset 0 0 0 1.5px rgba(232,108,80,.7);
}
.hl-quiz{
  background:rgba(111,166,255,.22);
  border:2px solid rgba(111,166,255,.55);
  cursor:pointer; pointer-events:all; z-index:8;
}
.hl-quiz:hover{background:rgba(111,166,255,.36)}
.hl-correct{background:rgba(76,178,135,.4)!important;border-color:var(--green)!important}
.hl-wrong{background:rgba(208,80,80,.4)!important;border-color:#d05050!important}

/* ── 美濃ハイライト ── */
@keyframes minoPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,140,40,.85), 0 0 14px rgba(255,140,40,.5);background:rgba(255,140,40,.16)}
  50%   {box-shadow:0 0 0 4px rgba(255,170,80,1),    0 0 26px rgba(255,140,40,.85);background:rgba(255,160,60,.28)}
}
.hl-mino{
  position:absolute; width:var(--cell); height:var(--cell);
  pointer-events:none; border-radius:4px; z-index:6;
  animation:minoPulse 1.4s ease-in-out infinite;
}
.piece.mino-piece .piece-shape{
  background:linear-gradient(170deg,#ffb04a 0%,#e85e1c 100%)!important;
  box-shadow:0 3px 16px rgba(255,100,30,.7), inset 0 1px 0 rgba(255,210,140,.55)!important;
  color:#fff!important; text-shadow:0 1px 2px rgba(0,0,0,.5)!important;
}
.piece.mino-piece.gote .piece-shape{
  background:linear-gradient(10deg,#ffb04a 0%,#e85e1c 100%)!important;
}
.mino-legend{
  display:none; margin-top:10px; padding:8px 14px;
  border-radius:var(--r);
  font-size:.78rem; color:#ffbe7c;
  background:linear-gradient(180deg, rgba(255,140,40,.10), rgba(255,140,40,.04));
  border:1px solid rgba(255,140,40,.35);
  align-items:center; gap:8px;
}
.mino-legend.show{display:flex}

/* =================================================================
   PIECES
   - JS が left/top を 52 グリッドで計算 → そのまま採用
   - .board が scaleY(1.0961) で縦伸び → .piece も伸びる
   - .piece-shape を scaleY(1/1.0961) で文字を補正
================================================================= */
.piece{
  position:absolute;
  width:var(--cell); height:var(--cell);
  display:flex; align-items:center; justify-content:center;
  z-index:10;
  transition:left .48s var(--easing), top .48s var(--easing);
  pointer-events:none;
}
.piece.moving{z-index:50}
.piece-shape{
  width:calc(var(--cell) - 6px);
  height:calc(var(--cell) - 4px);
  display:flex; align-items:center; justify-content:center;
  /* 駒の五角形 */
  clip-path:polygon(50% 0%, 96% 16%, 100% 100%, 0% 100%, 4% 16%);
  font-family:'Noto Serif JP',serif;
  font-size:1.18rem; font-weight:700;
  letter-spacing:-.03em;
  /* 親の縦伸びを打ち消し、駒の縦長感はわずかに残す（盤に対する駒比は 1.05:1） */
  transform:scaleY(calc(1.05 / var(--cell-ratio)));
  transform-origin:center;
  box-shadow:
    0 3px 8px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(60,30,0,.18);
}
.piece.sente .piece-shape{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(170deg, var(--sente-bg1) 0%, var(--sente-bg2) 100%);
  color:var(--sente-ink);
}
.piece.gote .piece-shape{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.25), transparent 55%),
    linear-gradient(10deg, var(--gote-bg1), var(--gote-bg2));
  color:var(--gote-ink);
  /* 親の scaleY 打ち消し + 180度回転 */
  transform: rotate(180deg) scaleY(calc(1.05 / var(--cell-ratio)));
}
.piece.gote .piece-label{display:inline-block}

/* キーピース（▲6八飛など主役の駒） */
.piece.key-piece .piece-shape{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,245,200,.6), transparent 55%),
    linear-gradient(170deg,#ffeaa0,#d4a020)!important;
  box-shadow:
    0 0 0 1.5px rgba(232,192,104,.6),
    0 4px 18px rgba(232,192,104,.55),
    inset 0 1px 0 rgba(255,255,255,.55)!important;
  animation:keyPulse 2.6s ease-in-out infinite;
}
@keyframes keyPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
}

/* =================================================================
   COMMENTARY PANEL
================================================================= */
.commentary-panel{flex:1; min-width:280px; max-width:440px}
.step-dots{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;
}
.step-dot{
  width:11px; height:11px; border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--hair);
  cursor:pointer; transition:all .2s var(--easing);
}
.step-dot:hover{border-color:rgba(232,192,104,.4)}
.step-dot.active{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  border-color:transparent; transform:scale(1.25);
  box-shadow:0 0 0 3px rgba(232,192,104,.18);
}
.step-dot.done{background:var(--green); border-color:transparent}

.move-notation-wrap{margin-bottom:10px; min-height:80px}
.move-step-label{
  font-size:.7rem; color:var(--ink-3);
  letter-spacing:.18em; margin-bottom:6px;
  text-transform:uppercase;
}

.player-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em;
  padding:3px 10px; border-radius:999px; margin-bottom:6px;
}
.player-badge.badge-sente{
  background:rgba(130,180,255,.10);
  border:1px solid rgba(130,180,255,.32);
  color:var(--blue-cool);
}
.player-badge.badge-gote{
  background:rgba(255,155,100,.10);
  border:1px solid rgba(255,155,100,.32);
  color:var(--orange-warm);
}
.player-badge .badge-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-sente .badge-dot{background:var(--blue-cool); box-shadow:0 0 6px var(--blue-cool)}
.badge-gote  .badge-dot{background:var(--orange-warm); box-shadow:0 0 6px var(--orange-warm)}

.move-notation{
  font-family:'Noto Serif JP',serif;
  font-size:2rem; font-weight:700; line-height:1.15;
  color:var(--ink);
  letter-spacing:.02em;
}
.move-notation .n-sente{color:var(--blue-cool)}
.move-notation .n-gote {color:var(--orange-warm)}
.move-notation.key-move{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 18px rgba(232,192,104,.35));
}
.move-notation.key-move .n-sente,
.move-notation.key-move .n-gote{
  background:inherit; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.commentary-box{
  background:linear-gradient(180deg, var(--bg-glass), var(--bg-glass-2));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-lg);
  border:1px solid var(--hair);
  padding:18px 18px;
  font-size:.9rem; line-height:1.85;
  margin-bottom:12px;
  box-shadow:var(--shadow-md);
}
.commentary-box .n-sente{color:var(--blue-cool); font-weight:700}
.commentary-box .n-gote {color:var(--orange-warm); font-weight:700}

.origin-box{
  position:relative;
  padding:14px 16px 14px 18px;
  font-size:.82rem; line-height:1.78; color:var(--ink-2);
  display:flex; gap:12px; align-items:flex-start;
  background:
    linear-gradient(180deg, rgba(232,192,104,.05), rgba(232,192,104,.02));
  border:1px solid rgba(232,192,104,.18);
  border-left:3px solid var(--gold);
  border-radius:var(--r);
}
.origin-box .icon{font-size:1.05rem; flex-shrink:0; margin-top:2px; opacity:.85}
.origin-tag{
  flex-shrink:0;
  align-self:flex-start;
  font-family:'Noto Serif JP',serif;
  font-size:.7rem; font-weight:700;
  letter-spacing:.18em;
  color:var(--gold-bright);
  background:rgba(232,192,104,.10);
  border:1px solid rgba(232,192,104,.32);
  padding:3px 9px;
  border-radius:4px;
  white-space:nowrap;
  margin-top:1px;
}

/* =================================================================
   CONTROLS
================================================================= */
.controls{
  display:flex; gap:8px; margin-top:24px;
  align-items:center; flex-wrap:wrap;
}
.btn{
  padding:0 18px; height:44px; border-radius:10px;
  border:1px solid var(--hair-2);
  font-family:inherit; font-size:.86rem; font-weight:600;
  cursor:pointer; transition:transform .15s var(--easing), background .18s, border-color .18s, color .18s;
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  color:var(--ink);
  letter-spacing:.02em;
  white-space:nowrap;
  flex-shrink:0;
}
.btn > span{white-space:nowrap}
.btn:hover:not(:disabled){transform:translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18)}
.btn:active:not(:disabled){transform:translateY(0)}

.btn-ghost{background:transparent}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  color:#1a0c04; border-color:transparent;
  box-shadow:0 6px 18px -6px rgba(232,192,104,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover:not(:disabled){filter:brightness(1.06)}
.btn-blue{
  background:linear-gradient(180deg,#5e94f7,#2d62cc);
  color:#fff; border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(60,120,240,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-blue:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{opacity:.34; cursor:not-allowed; transform:none}

.step-counter{
  font-size:.78rem; color:var(--ink-3);
  margin-left:auto; font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

/* =================================================================
   SECTION TITLES
================================================================= */
.section-heading{
  display:flex; align-items:center; gap:16px; margin-bottom:30px;
}
.section-num{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid rgba(232,192,104,.35);
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif JP',serif; font-size:1.15rem;
  color:var(--gold-bright); flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(232,192,104,.08), 0 4px 12px rgba(0,0,0,.3);
}
.section-heading h2{
  font-family:'Noto Serif JP',serif;
  font-size:1.55rem; font-weight:700;
  color:#fff; letter-spacing:.02em;
}
.section-heading p{font-size:.82rem; color:var(--ink-3); margin-top:4px; line-height:1.6}

/* =================================================================
   ORIGIN SECTION
================================================================= */
.origin-section{
  margin-top:44px; padding:26px 28px;
  background:linear-gradient(180deg, var(--bg-glass), var(--bg-glass-2));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-lg);
  border:1px solid var(--hair);
  box-shadow:var(--shadow-md);
}
.origin-section h3{
  font-family:'Noto Serif JP',serif;
  font-size:1.15rem; color:var(--gold-bright);
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.origin-section p{font-size:.88rem; line-height:1.9; color:var(--ink-2)}
.origin-section p+p{margin-top:12px}
.origin-section b{color:var(--ink)}

/* =================================================================
   VARIATION CARDS
================================================================= */
.variation-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:22px; margin-top:26px;
}
.variation-card{
  background:linear-gradient(180deg, var(--bg-glass), var(--bg-glass-2));
  backdrop-filter:blur(8px);
  border-radius:var(--r-lg);
  border:1px solid var(--hair);
  overflow:hidden;
  transition:border-color .25s, transform .25s var(--easing);
}
.variation-card:hover{
  border-color:rgba(232,192,104,.35);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.var-header{
  padding:14px 18px;
  border-bottom:1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:center;
}
.var-title{font-family:'Noto Serif JP',serif;font-size:1.05rem;font-weight:700}
.var-tag{
  font-size:.7rem; padding:3px 11px;
  border-radius:999px; font-weight:700; letter-spacing:.04em;
}
.tag-hard{background:rgba(208,92,61,.18);color:#ee8a72;border:1px solid rgba(208,92,61,.35)}
.tag-mid {background:rgba(232,192,104,.14);color:var(--gold-bright);border:1px solid rgba(232,192,104,.32)}
.tag-easy{background:rgba(76,178,135,.18);color:#7ee2b4;border:1px solid rgba(76,178,135,.35)}

.var-sim-area{padding:0 0 6px}
.var-board-mini{
  width:216px; height:calc(216px * var(--cell-ratio));
  margin:14px auto 0; position:relative; flex-shrink:0;
  background:linear-gradient(180deg,var(--board-bg-1),var(--board-bg-2));
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 23px,var(--board-line) 23px,var(--board-line) 24px),
    repeating-linear-gradient(90deg,transparent,transparent 23px,var(--board-line) 23px,var(--board-line) 24px);
  background-size:24px 24px;
  outline:2px solid var(--board-line);
  border-radius:2px;
  /* 子の mini-piece は scaleY 不要：直接背景比率で扱う */
}
.mini-piece{
  position:absolute; width:20px; height:21px;
  font-family:'Noto Serif JP',serif; font-size:.58rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(50% 0%, 96% 16%, 100% 100%, 0% 100%, 4% 16%);
}
.mini-sente{background:linear-gradient(170deg,var(--sente-bg1),var(--sente-bg2));color:var(--sente-ink)}
.mini-gote {background:linear-gradient(10deg,var(--gote-bg1),var(--gote-bg2));color:var(--gote-ink);transform:rotate(180deg)}
.mini-key  {background:linear-gradient(170deg,#ffeaa0,#d4a020)!important;color:#3a1c00!important}

.var-sim-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px 0}
.var-sim-btn{
  padding:7px 14px; border-radius:8px;
  border:1px solid var(--hair-2);
  background:rgba(255,255,255,.03); color:var(--ink);
  font-family:inherit; font-size:.82rem;
  cursor:pointer; transition:all .15s; min-height:36px;
}
.var-sim-btn:hover:not(:disabled){background:rgba(255,255,255,.08)}
.var-sim-btn:disabled{opacity:.34; cursor:not-allowed}
.var-sim-counter{font-size:.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.var-sim-notation{
  text-align:center; padding:8px 18px 0;
  font-family:'Noto Serif JP',serif;
  font-size:1.08rem; font-weight:700; color:var(--ink);
  min-height:30px;
}
.var-sim-notation .n-sente{color:var(--blue-cool)}
.var-sim-notation .n-gote {color:var(--orange-warm)}
.var-sim-notation.gote-n  {color:var(--ink)}
.var-sim-notation.key-n   {color:var(--gold-bright)}
.var-sim-notation.key-n .n-sente,
.var-sim-notation.key-n .n-gote{color:var(--gold-bright)}
.var-sim-commentary{padding:10px 18px 18px; font-size:.83rem; line-height:1.78; color:var(--ink-2)}
.var-sim-commentary .n-sente{color:var(--blue-cool); font-weight:700}
.var-sim-commentary .n-gote {color:var(--orange-warm); font-weight:700}
.var-sim-commentary .var-key{color:var(--ink); font-weight:700}

/* =================================================================
   QUIZ
================================================================= */
.quiz-grid{display:flex; flex-direction:column; gap:28px}
.quiz-card{
  background:linear-gradient(180deg, var(--bg-glass), var(--bg-glass-2));
  border-radius:var(--r-lg);
  border:1px solid var(--hair);
  padding:24px;
  box-shadow:var(--shadow-md);
}
.quiz-header{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.quiz-num{
  width:34px; height:34px; border-radius:50%;
  background:rgba(232,192,104,.10);
  border:1px solid rgba(232,192,104,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:.84rem; font-weight:700;
  color:var(--gold-bright); flex-shrink:0;
}
.quiz-title{font-size:.98rem; font-weight:700}
.quiz-hint{font-size:.8rem; color:var(--ink-3); margin-top:3px}
.quiz-layout{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap}
.quiz-board-wrap{flex-shrink:0}
.quiz-options{flex:1; min-width:200px}
.quiz-option{
  display:block; width:100%; padding:12px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--hair-2);
  border-radius:10px; margin-bottom:8px;
  font-family:inherit; font-size:.9rem; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .15s, background .15s, color .15s;
  min-height:46px;
}
.quiz-option:hover:not(:disabled){border-color:rgba(111,166,255,.55);background:rgba(111,166,255,.10)}
.quiz-option.correct{border-color:var(--green)!important;background:rgba(76,178,135,.16)!important;color:#9becc4!important}
.quiz-option.wrong  {border-color:#d05050!important;background:rgba(208,80,80,.10)!important;color:#ee8a72!important}
.quiz-option:disabled{cursor:default}
.quiz-feedback{
  margin-top:14px; padding:14px; border-radius:10px;
  font-size:.85rem; line-height:1.75; display:none;
}
.quiz-feedback.show{display:block}
.quiz-feedback.ok{background:rgba(76,178,135,.10);border:1px solid rgba(76,178,135,.32);color:#9becc4}
.quiz-feedback.ng{background:rgba(208,80,80,.10);border:1px solid rgba(208,80,80,.32);color:#ee8a72}

/* =================================================================
   ADVANCED
================================================================= */
.advanced-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
  gap:22px;
}
.adv-card{
  background:linear-gradient(180deg, var(--bg-glass), var(--bg-glass-2));
  border-radius:var(--r-lg);
  border:1px solid var(--hair);
  overflow:hidden;
  transition:border-color .2s, transform .2s var(--easing);
}
.adv-card:hover{border-color:rgba(232,192,104,.35); transform:translateY(-2px)}
.adv-card-top{
  padding:20px 22px;
  border-bottom:1px solid var(--hair);
  background:linear-gradient(135deg, rgba(232,192,104,.06), transparent 70%);
}
.adv-label{font-size:.68rem; color:var(--ink-3); letter-spacing:.18em; margin-bottom:6px}
.adv-title{
  font-family:'Noto Serif JP',serif; font-size:1.35rem; font-weight:700;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.adv-ruby{font-size:.76rem; color:var(--ink-3); margin-top:4px; letter-spacing:.06em}
.adv-body{padding:18px 22px}
.adv-stats{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.adv-stat{
  font-size:.72rem; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--hair);
}
.adv-stat .label{color:var(--ink-3); margin-right:4px}
.adv-stat .val{color:var(--ink); font-weight:700}
.adv-board-wrap{display:flex; justify-content:center; margin-top:14px}
.adv-desc{font-size:.85rem; line-height:1.82; color:var(--ink-2); margin-top:14px}
.adv-desc b{color:var(--ink)}
.adv-board-label{text-align:center; font-size:.7rem; color:var(--ink-3); margin-top:6px; font-style:italic}

/* =================================================================
   復習タブ
================================================================= */
.rv-area{padding:0 0 24px; max-width:540px; margin:0 auto}
.rv-progress-wrap{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.rv-progress-bar{
  flex:1; height:8px;
  background:rgba(255,255,255,.05);
  border-radius:999px; overflow:hidden;
  border:1px solid var(--hair);
}
.rv-progress-fill{
  height:100%;
  background:linear-gradient(90deg,#22b8a8,var(--gold));
  border-radius:999px; transition:width .5s var(--easing);
  box-shadow:0 0 10px rgba(232,192,104,.5);
}
.rv-progress-label{font-size:.78rem; color:var(--ink-3); white-space:nowrap; min-width:42px; text-align:right; font-variant-numeric:tabular-nums}

.rv-turn-box{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, var(--bg-glass), var(--bg-glass-2));
  backdrop-filter:blur(8px);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:12px 16px; margin-bottom:12px;
  min-height:46px;
  transition:border-color .25s, background .25s;
}
.rv-turn-box.turn-sente{
  border-color:rgba(130,180,255,.35);
  background:linear-gradient(180deg, rgba(130,180,255,.07), rgba(130,180,255,.02));
}
.rv-turn-box.turn-gote{
  border-color:rgba(255,155,100,.35);
  background:linear-gradient(180deg, rgba(255,155,100,.07), rgba(255,155,100,.02));
}
.rv-turn-icon{font-size:1.35rem; flex-shrink:0}
.rv-turn-label{
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  padding:2px 9px; border-radius:5px; flex-shrink:0;
}
.turn-sente .rv-turn-label{background:rgba(130,180,255,.18); color:var(--blue-cool); border:1px solid rgba(130,180,255,.32)}
.turn-gote  .rv-turn-label{background:rgba(255,155,100,.18); color:var(--orange-warm); border:1px solid rgba(255,155,100,.32)}
.rv-turn-text{font-size:.86rem; color:var(--ink); font-weight:600; line-height:1.5}

.rv-feedback{
  min-height:36px; border-radius:var(--r);
  padding:8px 14px; font-size:.84rem; font-weight:700;
  text-align:center; transition:all .2s; margin-bottom:8px;
}
.rv-feedback.ok    {background:rgba(76,178,135,.16);border:1px solid rgba(76,178,135,.4);color:#7ee2b4}
.rv-feedback.wrong {background:rgba(208,92,61,.14);border:1px solid rgba(208,92,61,.35);color:var(--accent)}
.rv-feedback.close {background:rgba(232,192,104,.14);border:1px solid rgba(232,192,104,.35);color:var(--gold-bright)}

.rv-hint{
  background:rgba(232,192,104,.10);
  border:1px solid rgba(232,192,104,.3);
  border-radius:var(--r);
  padding:9px 14px; font-size:.82rem;
  color:var(--gold-bright); margin-bottom:10px;
}

.rv-board-outer{flex-shrink:0}
.rv-board-wrap{display:inline-block; transform-origin:top left}
.rv-board-inner{display:inline-flex; flex-direction:column}
.rv-file-labels{display:flex; height:28px; padding-left:24px}
.rv-file-labels span{
  width:52px; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; color:var(--ink-3); font-family:'Noto Serif JP',serif;
}
.rv-rank-labels{display:flex; flex-direction:column; width:24px}
.rv-rank-labels span{
  height:52px; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; color:var(--ink-3); font-family:'Noto Serif JP',serif;
  /* scale 後の盤に高さを合わせるため、自身もスケール */
  transform-origin:center;
}

.rv-board{position:relative!important; width:468px!important; height:468px!important}
/* 復習盤も同様の比率に */
.rv-board{transform:scaleY(var(--cell-ratio)); transform-origin:top center}
/* 復習盤の段ラベル列を同期 */
.rv-rank-labels{transform:scaleY(var(--cell-ratio)); transform-origin:top center}
.rv-rank-labels span{transform:scaleY(calc(1/var(--cell-ratio)))}

.rv-cell{
  position:absolute; width:52px; height:52px;
  cursor:pointer; z-index:5;
  transition:background .15s; box-sizing:border-box;
}
.rv-cell:hover{background:rgba(232,192,104,.14)!important}
.rv-cell.rv-selected{background:rgba(34,184,168,.28)!important; border:2px solid #22b8a8!important}
.rv-cell.rv-hint-from{background:rgba(232,192,104,.28)!important; border:2px solid var(--gold)!important}
.rv-cell.rv-hint-to  {background:rgba(76,178,135,.22)!important; border:2px dashed var(--green)!important}

.rv-controls{display:flex; gap:10px; justify-content:center; margin-top:14px}
.rv-btn{
  padding:10px 22px; border-radius:10px;
  border:1px solid rgba(34,184,168,.4);
  background:rgba(34,184,168,.12);
  color:#22b8a8;
  font-size:.84rem; font-family:inherit; cursor:pointer;
  transition:all .15s; font-weight:700;
  min-height:44px;
}
.rv-btn:hover{background:rgba(34,184,168,.22); border-color:#22b8a8}
.rv-btn.secondary{
  border-color:var(--hair-2); background:transparent; color:var(--ink-3);
}
.rv-btn.secondary:hover{color:var(--ink); border-color:rgba(255,255,255,.22)}

.rv-celebration{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
}
.rv-celebration canvas{position:absolute; inset:0; pointer-events:none}
.rv-celeb-box{
  position:relative; z-index:1;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid rgba(232,192,104,.3);
  border-radius:var(--r-xl); padding:40px 44px;
  text-align:center; max-width:320px;
  box-shadow:var(--shadow-lg), 0 0 60px rgba(232,192,104,.2);
}
.rv-celeb-emoji{font-size:3.6rem; margin-bottom:14px}
.rv-celeb-title{
  font-size:1.85rem; font-weight:900; margin-bottom:10px;
  font-family:"Zen Kaku Gothic New","Noto Serif JP",sans-serif;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rv-celeb-sub{font-size:.9rem; color:var(--ink-2); margin-bottom:22px; line-height:1.6}

/* =================================================================
   持ち駒 (mochi)
================================================================= */
.board-with-mochi{display:flex; align-items:stretch}
.mochi-side{
  width:54px; flex-shrink:0;
  display:flex; flex-direction:column;
  padding:6px 4px;
  background:rgba(212,168,75,.06);
  border:1px solid rgba(212,168,75,.18);
  border-radius:var(--r-sm);
}
.mochi-side-gote {justify-content:flex-start; margin-right:6px}
.mochi-side-sente{justify-content:flex-end;   margin-left:6px}
.mochi-side-title{
  font-size:.6rem; color:rgba(236,228,211,.5);
  text-align:center; letter-spacing:.1em;
  padding-bottom:6px; border-bottom:1px solid var(--hair);
  margin-bottom:6px;
}
.mochi-side-sente .mochi-side-title{
  order:99; padding-bottom:0; padding-top:6px;
  border-bottom:none; border-top:1px solid var(--hair);
  margin-bottom:0; margin-top:6px;
}
.mochi-side-piece{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:39px; margin:2px auto;
  background:linear-gradient(170deg,var(--sente-bg1),var(--sente-bg2));
  color:var(--sente-ink);
  border:1px solid rgba(122,79,15,.35);
  border-radius:3px;
  font-size:.86rem; font-weight:700;
  font-family:'BIZ UDPGothic',sans-serif;
  flex-shrink:0;
  clip-path:polygon(50% 0%, 96% 16%, 100% 100%, 0% 100%, 4% 16%);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.mochi-side-piece.gote-p{
  transform:rotate(180deg);
  background:linear-gradient(10deg,var(--gote-bg1),var(--gote-bg2));
  color:var(--gote-ink);
}
.mochi-side-none{
  font-size:.65rem; color:rgba(236,228,211,.3);
  text-align:center; padding:6px 0;
  writing-mode:vertical-rl;
}

.mochi-mobile-bar{
  display:none; gap:8px; padding:10px 12px;
  margin-top:10px;
  background:rgba(212,168,75,.06);
  border:1px solid rgba(212,168,75,.18);
  border-radius:var(--r-sm); flex-wrap:wrap;
}
.mochi-mobile-half{
  flex:1; min-width:130px;
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
}
.mochi-mobile-label{
  font-size:.7rem; color:var(--ink-3);
  white-space:nowrap; margin-right:4px; font-weight:700;
}
.mochi-mobile-piece{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 5px;
  background:linear-gradient(170deg,var(--sente-bg1),var(--sente-bg2));
  color:var(--sente-ink);
  border:1px solid rgba(122,79,15,.35);
  border-radius:3px;
  font-size:.85rem; font-weight:700;
  font-family:'BIZ UDPGothic',sans-serif;
  clip-path:polygon(50% 0%, 96% 16%, 100% 100%, 0% 100%, 4% 16%);
}
.mochi-mobile-piece.gote-p{
  transform:rotate(180deg);
  background:linear-gradient(10deg,var(--gote-bg1),var(--gote-bg2));
  color:var(--gote-ink);
}
.mochi-mobile-none{font-size:.74rem; color:var(--ink-4)}

@media(max-width:700px){
  .mochi-side{display:none!important}
  .mochi-mobile-bar{display:flex!important}
  .board-with-mochi{display:block}
}

.rv-mochi{
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
  padding:6px 10px; min-height:30px;
  background:rgba(212,168,75,.07);
  border:1px solid rgba(212,168,75,.18);
  border-radius:var(--r-sm);
  width:468px; box-sizing:border-box;
}
.rv-mochi .mochi-mobile-label{font-size:.7rem; min-width:46px}
.rv-mochi .mochi-mobile-piece{min-width:26px; height:26px; font-size:.84rem}
.rv-mochi .mochi-mobile-none{font-size:.72rem}
@media(max-width:520px){.rv-mochi{width:100%}}

/* =================================================================
   START BANNER
================================================================= */
#startBanner{
  position:absolute; bottom:0; left:0; right:0; top:auto;
  height:calc(var(--cell)*3);
  z-index:20; pointer-events:none;
  display:flex; align-items:center; overflow:hidden; opacity:0;
  border-top:2px solid transparent;
}
#startBanner.banner-show{
  animation:bnFade 3.8s ease-in-out forwards;
  border-top-color:rgba(232,192,104,.7);
}
@keyframes bnFade{0%{opacity:0}14%{opacity:1}72%{opacity:1}100%{opacity:0}}
.bn-sweep{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(232,192,104,.32) 0%, rgba(232,192,104,.12) 60%, transparent 100%);
  transform:scaleX(0); transform-origin:left center;
  animation:bnSweep .55s .08s ease-out forwards;
}
@keyframes bnSweep{to{transform:scaleX(1)}}

/* =================================================================
   RESPONSIVE
================================================================= */
@media(max-width:700px){
  .site-header{padding:40px 18px 32px}
  .site-title{font-size:1.95rem}
  .main-content{padding:26px 16px}
  .board-wrapper{gap:12px; flex-direction:column}
  .board-col{width:100%}
  .board-scale-outer{width:100%}
  .commentary-panel{max-width:100%; min-width:0}
  .stats-table-wrap{padding:10px 14px}
  .stats-table{font-size:.74rem}
  .stats-table td{padding:4px 6px 4px 2px}
  .move-notation{font-size:1.7rem}
  .commentary-box{padding:16px}
  .origin-section{padding:22px 20px}
  .controls{gap:6px}
  .btn{padding:0 14px; font-size:.82rem}
  .step-counter{width:100%; text-align:right; margin-left:0}
}

/* ── ナビ コンパクトモード ── */
@media(max-width:520px){
  .page-nav{padding:6px 10px; gap:5px}
  .page-nav-link{font-size:0; padding:8px 10px; min-width:38px; min-height:38px;
    display:inline-flex; align-items:center; justify-content:center}
  .page-nav-link::before{content:'📋'; font-size:1.05rem; line-height:1; display:block}
  .page-nav-btn{padding:8px 12px; font-size:0; min-height:38px; min-width:38px}
  #josekiNavBack::before{content:'◀'; font-size:.9rem}
  #josekiNavNext::after {content:'▶'; font-size:.9rem}
  .pnav-counter{font-size:.68rem; min-width:32px; text-align:center}
  .pnav-report{padding:7px 9px; font-size:.95rem}
  .pnav-report-text{display:none}
}
@media(max-width:360px){
  .pnav-spacer{display:none}
  .page-nav{justify-content:space-between}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}