/* ===== Self-hosted fonts（同梱woff2・起動時の外部リクエストゼロ） ===== */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2');}
  *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

  :root {
    --bg:#e8e0cc;
    --surface:#ddd5bc;
    --panel:#d4cab0;
    --text:#2a2818;
    --text-muted:#7a7458;
    --border:rgba(100,90,50,0.2);
    --green:#a8b87a;
    --you:#c45a7a;
    --com:#4a8aaa;
    --cs:min(56px,calc((100vw - 40px)/6));
    --board-w:calc(var(--cs)*6 + 20px);
  }

  /* ========== ダークモード ========== */
  /* ページロード時のフラッシュ防止：html.dark-earlyはheadの早期スクリプトで付与 */
  html.dark-early body { background:#1a1a14; }
  body.dark,
  html.dark-early body {
    --bg:#1a1a14;
    --surface:#242318;
    --panel:#2e2c1e;
    --text:#c8c0a0;
    --text-muted:#6a6450;
    --border:rgba(180,160,80,0.15);
    --green:#7a9050;
    --cell-bg:#383424;
    --cell-gimmic-bg:#2c2a1c;
    /* ギミックアイコン色 */
    --burst-col:#d87888;
    --bomb-col:#c09030;
    --cross-col:#38aa80;
    --slash-col:#6868c8;
    --swap-col:#b89000;
    --shot-col:#c83838;
  }
  /* ダーク: 背景グリッド */
  body.dark {
    background-image:
      repeating-linear-gradient(0deg, rgba(180,160,80,0.04) 0px, rgba(180,160,80,0.04) 1px, transparent 1px, transparent 28px),
      repeating-linear-gradient(90deg, rgba(180,160,80,0.04) 0px, rgba(180,160,80,0.04) 1px, transparent 1px, transparent 28px);
  }
  /* ダーク: 通常セル・ギミックセル背景 */
  body.dark .cell                { background:var(--cell-bg); }
  body.dark .cell.pond-cell,
  body.dark .cell.bomb-cell,
  body.dark .cell.cross-cell,
  body.dark .cell.slash-cell,
  body.dark .cell.swap-cell,
  body.dark .cell.shot-cell      { background:var(--cell-gimmic-bg); }
  body.dark .cell.dead-cell      { background:transparent; }
  /* ダーク: ギミックアイコン色 */
  body.dark .cell.pond-cell  { border-color:rgba(216,120,136,0.5); }
  body.dark .burst-rays      { background:rgba(216,120,136,0.15); border-color:var(--burst-col); }
  body.dark .burst-rays::before,
  body.dark .burst-rays::after   { background:var(--burst-col); }
  body.dark .burst-label         { color:var(--burst-col); }
  body.dark .cell.bomb-cell  { border-color:rgba(192,144,48,0.5); }
  body.dark .bomb-circle         { background:rgba(192,144,48,0.15); border-color:var(--bomb-col); color:var(--bomb-col); }
  body.dark .bomb-cell-label     { color:var(--bomb-col); }
  body.dark .cell.cross-cell { border-color:rgba(56,170,128,0.5); }
  body.dark .cross-shape::before,
  body.dark .cross-shape::after  { background:var(--cross-col); }
  body.dark .cross-label         { color:var(--cross-col); }
  body.dark .cell.slash-cell { border-color:rgba(104,104,200,0.5); }
  body.dark .slash-shape::before,
  body.dark .slash-shape::after  { background:var(--slash-col); }
  body.dark .slash-label         { color:var(--slash-col); }
  body.dark .cell.swap-cell  { border-color:rgba(184,144,0,0.5); }
  body.dark .swap-shape          { color:var(--swap-col); }
  body.dark .swap-label          { color:var(--swap-col); }
  body.dark .cell.shot-cell  { border-color:rgba(200,56,56,0.5); }
  body.dark .shot-dot            { background:var(--shot-col); }
  body.dark .shot-label          { color:var(--shot-col); }
  /* ダーク: ギミックバッジ */
  body.dark .gimmic-badge.burst  { background:var(--cell-gimmic-bg); border-color:rgba(216,120,136,0.5); }
  body.dark .gimmic-badge.bomb   { background:var(--cell-gimmic-bg); border-color:rgba(192,144,48,0.5); }
  body.dark .gimmic-badge.cross  { background:var(--cell-gimmic-bg); border-color:rgba(56,170,128,0.5); }
  body.dark .gimmic-badge.slash  { background:var(--cell-gimmic-bg); border-color:rgba(104,104,200,0.5); }
  body.dark .gimmic-badge.swap   { background:var(--cell-gimmic-bg); border-color:rgba(184,144,0,0.5); }
  body.dark .gimmic-badge.shot   { background:var(--cell-gimmic-bg); border-color:rgba(200,56,56,0.5); }
  /* ダーク: フラッシュアニメ終端色 */
  body.dark .cell.flash-w    { animation:dark-flash-w    0.22s ease-out forwards; }
  body.dark .cell.flash-b    { animation:dark-flash-b    0.22s ease-out forwards; }
  body.dark .cell.flash-pond { animation:dark-flash-pond 0.45s ease-out forwards; }
  body.dark .cell.flash-bomb { animation:dark-flash-bomb 0.5s  ease-out forwards; }
  body.dark .cell.flash-cross{ animation:dark-flash-cross 0.35s ease-out forwards; }
  body.dark .cell.flash-slash{ animation:dark-flash-slash 0.35s ease-out forwards; }
  body.dark .cell.flash-swap { animation:dark-flash-swap  0.5s  ease-out forwards; }
  body.dark .cell.flash-shot { animation:dark-flash-shot  0.25s ease-out forwards; }
  @keyframes dark-flash-w    { 0%{background:rgba(196,90,122,0.6)}  100%{background:#383424} }
  @keyframes dark-flash-b    { 0%{background:rgba(74,138,170,0.6)}  100%{background:#383424} }
  @keyframes dark-flash-pond { 0%{background:rgba(216,120,136,0.6)} 100%{background:#2c2a1c} }
  @keyframes dark-flash-bomb { 0%{background:rgba(192,144,48,0.7)}  100%{background:#2c2a1c} }
  @keyframes dark-flash-cross{ 0%{background:rgba(56,170,128,0.5)}  100%{background:#2c2a1c} }
  @keyframes dark-flash-slash{ 0%{background:rgba(104,104,200,0.5)} 100%{background:#2c2a1c} }
  @keyframes dark-flash-swap { 0%{background:rgba(184,144,0,0.55)}  100%{background:#2c2a1c} }
  @keyframes dark-flash-shot { 0%{background:rgba(200,56,56,0.5)}   100%{background:#2c2a1c} }
  /* ダーク: .toggle-btn.on の緑 */
  body.dark .toggle-btn.on { background:var(--green); border-color:#5a7038; }

  html { height:100%; }
  body {
    background:var(--bg);
    color:var(--text);
    font-family:'DM Mono',monospace;
    min-height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:60px 16px 24px; overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    user-select:none; -webkit-user-select:none;
    background-image:
      repeating-linear-gradient(0deg, rgba(100,90,50,0.05) 0px, rgba(100,90,50,0.05) 1px, transparent 1px, transparent 28px),
      repeating-linear-gradient(90deg, rgba(100,90,50,0.05) 0px, rgba(100,90,50,0.05) 1px, transparent 1px, transparent 28px);
  }

  #fx-layer { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }

  h1 {
    font-family:'Playfair Display',serif;
    font-size:22px; color:var(--text);
    letter-spacing:0.18em;
    margin-bottom:14px;
    opacity:0.85;
  }

  /* ステージインジケーター */
  #stage-bar {
    width:var(--board-w);
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px;
  }
  #stage-label { font-size:12px; letter-spacing:0.16em; color:var(--text-muted); text-transform:uppercase; }
  #stage-dots { display:flex; gap:6px; align-items:center; }
  .stage-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--surface); border:1px solid var(--border);
    transition:all 0.2s;
  }
  .stage-dot.current { background:#a8b87a; border-color:#a8b87a; box-shadow:0 0 4px rgba(168,184,122,0.5); }
  .stage-dot.done { background:var(--text-muted); border-color:var(--text-muted); }

  /* ギミックバッジ */
  #gimmic-bar { width:var(--board-w); display:flex; gap:5px; margin-bottom:10px; flex-wrap:wrap; }
  .gimmic-badge {
    --bs: 44px;
    width:var(--bs); height:var(--bs);
    border-radius:3px; border:1px solid;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; position:relative;
    /* アイコン内部の --cs を --bs で上書き */
    --cs: var(--bs);
  }
  .gimmic-badge.burst { background:#ccc4a0; border-color:rgba(180,100,100,0.5); }
  .gimmic-badge.bomb  { background:#ccc4a0; border-color:rgba(160,130,50,0.5); }

  /* gimmic-tip は廃止（モーダルに統合） */

  /* ギミック説明モーダル */
  #gimmic-modal {
    display:none; position:fixed; inset:0; z-index:50000;
    background:rgba(42,40,24,0.55); backdrop-filter:blur(2px);
    align-items:center; justify-content:center; flex-direction:column;
  }
  #gimmic-modal.show { display:flex; animation:modal-in 0.2s cubic-bezier(0.15,0,0.25,1) both; }
  @keyframes modal-in { 0%{opacity:0} 100%{opacity:1} }

  #gimmic-modal-inner {
    background:var(--panel); border:1px solid var(--border);
    border-radius:8px; padding:24px 24px 20px;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    position:relative;
    box-shadow:0 8px 32px rgba(0,0,0,0.22);
    animation:modal-card-in 0.22s cubic-bezier(0.15,0,0.25,1) both;
  }
  @keyframes modal-card-in { 0%{transform:scale(0.88) translateY(12px);opacity:0} 100%{transform:scale(1) translateY(0);opacity:1} }

  #gimmic-modal-name {
    font-family:'Playfair Display',serif; font-size:20px;
    letter-spacing:0.14em; color:var(--text);
  }

  /* ミニグリッド */
  #gimmic-mini-grid {
    display:grid; gap:3px; position:relative;
  }
  .mgrid-cell {
    border-radius:3px; border:1px solid rgba(100,90,50,0.2);
    display:flex; align-items:center; justify-content:center;
    position:relative; transition:background 0.15s;
  }
  .mgrid-cell.mg-empty  { background:#c8c4a0; }
  .mgrid-cell.mg-you    { background:#c45a7a; border-color:#a84868; }
  .mgrid-cell.mg-com    { background:#4a8aaa; border-color:#386880; }
  .mgrid-cell.mg-gimmic { border-color:rgba(180,100,100,0.5); }
  .mgrid-cell.mg-flip   { animation:mg-flip-anim 0.25s cubic-bezier(0.1,0,0.2,1) both; }
  @keyframes mg-flip-anim { 0%{transform:scale(0.5);filter:brightness(3) saturate(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1);filter:none} }
  .mgrid-piece {
    width:70%; height:70%; border-radius:50%;
    box-shadow:0 2px 0 0 rgba(0,0,0,0.25), inset 0 1px 2px rgba(255,255,255,0.3);
  }
  .mgrid-piece.you { background:#c45a7a; }
  .mgrid-piece.com { background:#4a8aaa; }

  #gimmic-modal-desc {
    font-size:11px; letter-spacing:0.05em; color:var(--text-muted);
    text-align:center; line-height:1.7; max-width:220px;
  }
  #gimmic-modal-close {
    font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.14em;
    text-transform:uppercase; padding:10px 28px; min-height:40px;
    border:1px solid var(--border); background:var(--surface);
    color:var(--text-muted); border-radius:3px; cursor:pointer;
  }
  #gimmic-modal-close:active { background:var(--panel); }

  /* ========== 先攻後攻決定モーダル ========== */
  #turn-modal {
    display:none; position:fixed; inset:0; z-index:50000;
    background:rgba(42,40,24,0.75); backdrop-filter:blur(3px);
    align-items:center; justify-content:center; flex-direction:column;
  }
  #turn-modal.show { display:flex; animation:modal-in 0.3s cubic-bezier(0.15,0,0.25,1) both; }

  #turn-modal-inner {
    background:var(--panel); border:1px solid var(--border);
    border-radius:12px; padding:24px;
    display:flex; flex-direction:column; align-items:center; gap:16px;
    position:relative;
    box-shadow:0 12px 48px rgba(0,0,0,0.3);
    animation:modal-card-in 0.3s cubic-bezier(0.15,0,0.25,1) both;
    width:190px; height:190px; /* 正方形で完全固定 */
    justify-content:center;
  }

  /* 駒のみシンプル表示 */
  #turn-piece {
    width:45px; height:45px; border-radius:50%;
    transition:all 0.05s ease-out;
  }

  /* 駒の色切り替え */
  #turn-piece.player {
    background:#c45a7a; border:1px solid #a84868;
    box-shadow:0 2px 0 0 #7a3050, 0 3px 4px rgba(0,0,0,0.2);
  }
  
  #turn-piece.com {
    background:#4a8aaa; border:1px solid #386880;
    box-shadow:0 2px 0 0 #224858, 0 3px 4px rgba(0,0,0,0.2);
  }

  /* 結果表示（ゴシック体） */
  #turn-result {
    font-family:'DM Mono',monospace; font-size:16px; font-weight:500;
    letter-spacing:0.08em; text-align:center; text-transform:uppercase;
    opacity:0; transform:translateY(8px);
    transition:all 0.3s cubic-bezier(0.15,0,0.25,1);
  }
  #turn-result.show {
    opacity:1; transform:translateY(0);
  }
  #turn-result.first-attack { color:#c45a7a; }
  #turn-result.second-attack { color:#4a8aaa; }

  #turn-modal-start {
    font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; padding:8px 24px; min-height:36px;
    border:1px solid var(--green); background:var(--green); color:#2a2818;
    border-radius:4px; cursor:pointer; opacity:0;
    transition:all 0.3s cubic-bezier(0.15,0,0.25,1);
  }
  #turn-modal-start.show {
    opacity:1; transform:translateY(0);
  }
  #turn-modal-start:active { background:#98a86a; }

  /* スコアパネル */
  #scores {
    display:flex; margin-bottom:10px;
    border:1px solid var(--border); border-radius:4px; overflow:hidden;
    width:var(--board-w);
    background:var(--panel);
  }
  .score-block { flex:1; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
  .score-block + .score-block { border-left:1px solid var(--border); }
  .score-label { font-size:11px; letter-spacing:0.14em; color:var(--text-muted); text-transform:uppercase; white-space:nowrap; width:100%; text-align:center; }
  .score-num { font-family:'Playfair Display',serif; font-size:26px; color:var(--text); line-height:1.1; display:block; }
  .score-dot { width:9px; height:9px; border-radius:50%; margin-bottom:2px; }
  @keyframes num-bump { 0%{transform:scale(1)} 35%{transform:scale(1.5)} 65%{transform:scale(0.9)} 100%{transform:scale(1)} }
  .score-num.bump { animation:num-bump 0.3s cubic-bezier(0.2,0,0.3,1); }

  #status-bar { width:var(--board-w); margin-bottom:8px; font-size:12px; letter-spacing:0.08em; color:var(--text-muted); display:flex; align-items:center; gap:8px; min-height:18px; }
  #turn-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

  /* 使えないマス */
  .cell.dead-cell {
    background:var(--bg);
    border-color:transparent;
    cursor:default;
    pointer-events:none;
  }

  /* ボード */
  #board { display:grid; grid-template-columns:repeat(var(--grid-cols,6),var(--cs)); gap:3px; transition:grid-template-columns 0.3s; }
  @keyframes board-shuffle-spin { 0%{transform:rotate(0deg);opacity:1} 50%{transform:rotate(180deg);opacity:0.85} 100%{transform:rotate(360deg);opacity:1} }
  #board.shuffle-anim { animation:board-shuffle-spin 0.9s linear forwards; pointer-events:none; }

  /* EXPAND演出 */
  @keyframes cell-expand-in { 0%{transform:scale(0);opacity:0;background:#a8b87a;} 60%{transform:scale(1.15);} 100%{transform:scale(1);opacity:1;} }
  .cell.expand-new { animation:cell-expand-in 0.45s cubic-bezier(0.2,0,0.3,1) both; }

  .cell {
    width:var(--cs); height:var(--cs);
    background:#c8c4a0;
    border:1px solid rgba(100,90,50,0.25);
    border-radius:3px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; position:relative; transition:background 0.08s;
    -webkit-tap-highlight-color:transparent;
  }
  .cell.empty:active { background:#b8b490; }
  .cell.occupied { cursor:default; }

  /* BURST */
  .cell.pond-cell { background:#ccc4a0; border-color:rgba(180,100,100,0.45); }
  .cell.pond-cell:active { background:#d8d0ac; }
  .pond-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
  .burst-rays { position:relative; width:calc(var(--cs)*0.42); height:calc(var(--cs)*0.42); border-radius:50%; background:rgba(180,80,80,0.15); border:2px solid #b86070; display:flex; align-items:center; justify-content:center; }
  .burst-rays::before,.burst-rays::after { content:''; position:absolute; background:#b86070; border-radius:1px; }
  .burst-rays::before { width:130%; height:2px; }
  .burst-rays::after  { width:2px; height:130%; }
  .burst-label { font-size:calc(var(--cs)*0.13); font-weight:500; letter-spacing:0.08em; color:#b86070; line-height:1; margin-top:2px; }


  /* BOMB */
  .cell.bomb-cell { background:#ccc4a0; border-color:rgba(160,130,50,0.45); }
  .cell.bomb-cell:active { background:#d8d0ac; }
  .bomb-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
  .bomb-circle { position:relative; width:calc(var(--cs)*0.42); height:calc(var(--cs)*0.42); border-radius:50%; background:rgba(160,130,50,0.18); border:2px solid #a07828; display:flex; align-items:center; justify-content:center; font-size:calc(var(--cs)*0.2); color:#a07828; font-weight:500; }
  .bomb-cell-label { font-size:calc(var(--cs)*0.13); font-weight:500; letter-spacing:0.06em; color:#a07828; line-height:1; margin-top:1px; }


  /* 駒 */
  .piece { width:calc(var(--cs)*0.58); height:calc(var(--cs)*0.58); border-radius:50%; position:relative; z-index:1; flex-shrink:0; }
  .piece.white {
    background:#c45a7a;
    border:1.5px solid #a84868;
    box-shadow:
      0 3px 0 0 #7a3050,
      0 4px 6px rgba(0,0,0,0.25),
      inset 0 2px 3px rgba(255,180,200,0.4),
      inset 0 -1px 2px rgba(0,0,0,0.15);
  }
  .piece.black {
    background:#4a8aaa;
    border:1.5px solid #386880;
    box-shadow:
      0 3px 0 0 #224858,
      0 4px 6px rgba(0,0,0,0.25),
      inset 0 2px 3px rgba(160,220,255,0.35),
      inset 0 -1px 2px rgba(0,0,0,0.2);
  }

  @keyframes snap-in { 0%{transform:scale(0);opacity:0} 50%{transform:scale(1.4);opacity:1} 68%{transform:scale(0.86)} 84%{transform:scale(1.1)} 100%{transform:scale(1)} }
  @keyframes cap-flip { 0%{transform:scale(0.5);filter:brightness(6) saturate(0);opacity:0.6} 40%{transform:scale(1.25);filter:brightness(2.5) saturate(0.3);opacity:1} 100%{transform:scale(1);filter:brightness(1) saturate(1)} }
  .piece.anim-place { animation:snap-in 0.26s cubic-bezier(0.1,0,0.2,1) both; }
  .piece.anim-flip  { animation:cap-flip 0.2s cubic-bezier(0.1,0,0.2,1) both; }

  @keyframes cell-flash-w    { 0%{background:rgba(196,90,122,0.5)}  100%{background:#c8c4a0} }
  @keyframes cell-flash-b    { 0%{background:rgba(74,138,170,0.5)}  100%{background:#c8c4a0} }
  @keyframes cell-flash-pond { 0%{background:rgba(184,96,112,0.5)}  100%{background:#ccc4a0} }
  @keyframes cell-flash-bomb { 0%{background:rgba(160,130,50,0.6)}  100%{background:#ccc4a0} }
  .cell.flash-w    { animation:cell-flash-w    0.22s ease-out forwards; }
  .cell.flash-b    { animation:cell-flash-b    0.22s ease-out forwards; }
  .cell.flash-pond { animation:cell-flash-pond 0.45s ease-out forwards; }
  .cell.flash-bomb { animation:cell-flash-bomb 0.5s ease-out forwards; }

  .gimmic-badge.cross { background:#ccc4a0; border-color:rgba(26,120,90,0.5); }
  .gimmic-badge.slash { background:#ccc4a0; border-color:rgba(70,70,170,0.5); }
  .gimmic-badge.swap  { background:#ccc4a0; border-color:rgba(160,120,0,0.5); }
  .gimmic-badge.shot  { background:#ccc4a0; border-color:rgba(160,40,40,0.5); }

  /* CROSS */
  .cell.cross-cell { background:#ccc4a0; border-color:rgba(26,120,90,0.45); }
  .cell.cross-cell:active { background:#d8d0ac; }
  .cross-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
  .cross-shape { position:relative; width:calc(var(--cs)*0.44); height:calc(var(--cs)*0.44); display:flex; align-items:center; justify-content:center; }
  .cross-shape::before,.cross-shape::after { content:''; position:absolute; background:#2a8a68; border-radius:2px; }
  .cross-shape::before { width:100%; height:26%; }
  .cross-shape::after  { width:26%; height:100%; }
  .cross-label { font-size:calc(var(--cs)*0.13); font-weight:500; letter-spacing:0.08em; color:#2a8a68; line-height:1; margin-top:2px; }


  /* SLASH */
  .cell.slash-cell { background:#ccc4a0; border-color:rgba(70,70,170,0.45); }
  .cell.slash-cell:active { background:#d8d0ac; }
  .slash-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
  .slash-shape { position:relative; width:calc(var(--cs)*0.42); height:calc(var(--cs)*0.42); }
  .slash-shape::before,.slash-shape::after { content:''; position:absolute; background:#4848a8; border-radius:2px; width:100%; height:24%; top:38%; left:0; }
  .slash-shape::before { transform:rotate(45deg); }
  .slash-shape::after  { transform:rotate(-45deg); }
  .slash-label { font-size:calc(var(--cs)*0.13); font-weight:500; letter-spacing:0.08em; color:#4848a8; line-height:1; margin-top:2px; }


  /* SWAP */
  .cell.swap-cell { background:#ccc4a0; border-color:rgba(160,120,0,0.45); }
  .cell.swap-cell:active { background:#d8d0ac; }
  .swap-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
  .swap-shape { font-size:calc(var(--cs)*0.34); line-height:1; color:#907000; }
  .swap-label { font-size:calc(var(--cs)*0.13); font-weight:500; letter-spacing:0.08em; color:#907000; line-height:1; margin-top:1px; }


  /* SHOT */
  .cell.shot-cell { background:#ccc4a0; border-color:rgba(160,40,40,0.45); }
  .cell.shot-cell:active { background:#d8d0ac; }
  .shot-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
  .pond-icon,.bomb-icon,.cross-icon,.slash-icon,.swap-icon,.shot-icon {
    transform: scale(calc(1 + 0.07 * var(--gp, 0)));
    opacity: calc(0.72 + 0.28 * var(--gp, 0));
    will-change: transform, opacity;
  }
  .shot-dots { display:grid; grid-template-columns:1fr 1fr; gap:3px; width:calc(var(--cs)*0.32); height:calc(var(--cs)*0.32); }
  .shot-dot { border-radius:50%; background:#a02828; }
  .shot-label { font-size:calc(var(--cs)*0.13); font-weight:500; letter-spacing:0.08em; color:#a02828; line-height:1; margin-top:2px; }


  @keyframes cell-flash-cross { 0%{background:rgba(42,138,104,0.45)} 100%{background:#c8c4a0} }
  @keyframes cell-flash-slash { 0%{background:rgba(72,72,168,0.45)}  100%{background:#c8c4a0} }
  @keyframes cell-flash-swap  { 0%{background:rgba(144,112,0,0.5)}   100%{background:#c8c4a0} }
  @keyframes cell-flash-shot  { 0%{background:rgba(160,40,40,0.45)}  100%{background:#c8c4a0} }
  .cell.flash-cross { animation:cell-flash-cross 0.35s ease-out forwards; }
  .cell.flash-slash { animation:cell-flash-slash 0.35s ease-out forwards; }
  .cell.flash-swap  { animation:cell-flash-swap  0.5s  ease-out forwards; }
  .cell.flash-shot  { animation:cell-flash-shot  0.25s ease-out forwards; }

  /* 大災害演出 */
  /* 盤面フラッシュ演出（HOLE/SHUFFLE/EXPAND/REVIVE共通） */
  @keyframes board-flash-anim {
    0%   { transform:scale(1);    filter:brightness(1); }
    40%  { transform:scale(1.04); filter:brightness(2.2) saturate(0.2); }
    100% { transform:scale(1);    filter:brightness(1); }
  }
  #board.board-flash { animation:board-flash-anim 0.45s cubic-bezier(0.2,0,0.3,1) forwards; pointer-events:none; }

  /* HOLE強調マス */
  @keyframes hole-warning { 0%,100%{opacity:1} 50%{opacity:0.25} }
  .cell.hole-warning { animation:hole-warning 0.35s ease-in-out 3; }
  @keyframes hole-gone { 0%{transform:scale(1);opacity:1} 100%{transform:scale(0.1);opacity:0} }
  .cell.hole-gone { animation:hole-gone 0.3s ease-in forwards; }
  @keyframes hole-revive { 0%{transform:scale(0);opacity:0} 65%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
  .cell.hole-revive { animation:hole-revive 0.4s cubic-bezier(0.2,0,0.3,1) forwards; }

  /* SHUFFLE警告 */
  @keyframes gimmic-highlight { 0%{transform:scale(1);filter:brightness(1)} 40%{transform:scale(1.15);filter:brightness(1.4)} 100%{transform:scale(1);filter:brightness(1)} }
  .cell.gimmic-focus { animation:gimmic-highlight 0.9s ease-in-out forwards; z-index:10; }
  #gimmic-announce {
    display:none; position:fixed; top:44%; left:50%; transform:translate(-50%,-50%);
    background:var(--panel); border:1px solid var(--border); border-radius:6px;
    padding:9px 18px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--text); z-index:10000; pointer-events:none; white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
  }
  #gimmic-announce.show { display:block; animation:ann-in 0.18s ease-out both; }
  @keyframes ann-in { 0%{transform:translate(-50%,-50%) scale(0.88);opacity:0} 100%{transform:translate(-50%,-50%) scale(1);opacity:1} }

  .fx-ripple { position:absolute; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) scale(0); animation:fx-rip 0.55s ease-out forwards; }
  @keyframes fx-rip { 0%{transform:translate(-50%,-50%) scale(0);opacity:0.7} 100%{transform:translate(-50%,-50%) scale(1);opacity:0} }
  .fx-ring { position:absolute; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) scale(0); animation:fx-ring-anim 0.6s ease-out forwards; }
  @keyframes fx-ring-anim { 0%{transform:translate(-50%,-50%) scale(0);opacity:0.9} 100%{transform:translate(-50%,-50%) scale(1);opacity:0} }
  .fx-dot { position:absolute; border-radius:50%; pointer-events:none; width:8px; height:8px; transform:translate(-50%,-50%); }

  /* 結果バナー */
  #result-banner { display:none; margin-top:14px; width:var(--board-w); background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:18px; text-align:center; }
  #result-banner.show { display:block; animation:banner-drop 0.3s cubic-bezier(0.15,0,0.25,1) both; }
  @keyframes banner-drop { 0%{transform:translateY(14px);opacity:0} 100%{transform:translateY(0);opacity:1} }
  #result-title { font-family:'Playfair Display',serif; font-size:26px; color:var(--text); letter-spacing:0.06em; }
  #result-title.win  { color:#607830; }
  #result-title.draw { color:#806820; }
  #result-title.lose { color:#a04868; }
  #result-title.perfect { color:#a04868; font-size:32px; text-shadow:0 0 8px rgba(160,72,104,0.5); animation:perfect-glow 1s ease-in-out infinite alternate; }
  #result-title.skunk { color:#4a8aaa; font-size:32px; text-shadow:0 0 8px rgba(74,138,170,0.5); animation:skunk-pulse 0.8s ease-in-out 3; }
  
  @keyframes perfect-glow { 
    0%{text-shadow:0 0 8px rgba(160,72,104,0.5)} 
    100%{text-shadow:0 0 16px rgba(160,72,104,0.8), 0 0 24px rgba(160,72,104,0.3)} 
  }
  @keyframes skunk-pulse { 
    0%,100%{transform:scale(1)} 
    50%{transform:scale(1.05)} 
  }
  #result-sub { font-size:9px; color:var(--text-muted); margin:8px 0 14px; letter-spacing:0.1em; }
  #result-btns { display:flex; gap:8px; justify-content:center; }

  /* クリア演出 */
  #clear-overlay { display:none; position:fixed; inset:0; background:rgba(232,224,204,0.96); align-items:center; justify-content:center; flex-direction:column; gap:16px; z-index:10000; }
  #clear-overlay.show { display:flex; }
  #clear-text { font-family:'Playfair Display',serif; font-size:28px; color:var(--text); letter-spacing:0.12em; animation:clear-in 0.35s cubic-bezier(0.15,0,0.25,1) both; }
  #clear-sub { font-size:10px; color:var(--text-muted); letter-spacing:0.12em; }
  @keyframes clear-in { 0%{transform:scale(0.8) translateY(16px);opacity:0} 100%{transform:scale(1) translateY(0);opacity:1} }

  #controls { margin-top:12px; width:var(--board-w); display:flex; gap:8px; }
  
  /* 通常モード用ステージ選択 */
  #stage-select-normal {
    flex:1.5; min-height:44px; padding:0 8px;
    font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.1em;
    border:1px solid var(--border); background:var(--panel); color:var(--text);
    border-radius:3px; cursor:pointer;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M3 4.5L6 7.5L9 4.5" stroke="%23998b65" stroke-width="1.5" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
  }
  #stage-select-normal:hover { background:var(--surface); }
  #stage-select-normal:focus { outline:1px solid var(--green); }
  
  button {
    font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    padding:12px 16px; min-height:44px;
    border:1px solid var(--border);
    background:var(--panel); color:var(--text-muted);
    border-radius:3px; cursor:pointer;
    -webkit-tap-highlight-color:transparent; flex:1;
    transition:all 0.1s;
  }
  button:active { background:var(--surface); }
  button.primary { background:#a8b87a; color:#2a2818; border-color:#8a9860; }
  button.primary:active { background:#98a86a; }

  /* ========== トップバー ========== */
  #top-bar {
    position:fixed; top:0; left:0; right:0; z-index:99999;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:flex-end; gap:8px;
    padding:8px 12px;
  }

  /* トップバー内の共通ボタンスタイル */
  .top-btn {
    font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.12em;
    text-transform:uppercase; padding:5px 10px;
    border:1px solid var(--border); background:var(--panel); color:var(--text-muted);
    border-radius:3px; cursor:pointer; text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    white-space:nowrap; line-height:normal;
  }
  .top-btn.login { border-color:rgba(26,120,90,0.5); color:#1a7858; }

  .auth-avatar {
    width:28px; height:28px; border-radius:50%;
    border:1px solid var(--border); object-fit:cover;
  }
  .auth-name {
    font-size:10px; letter-spacing:0.08em; color:var(--text-muted);
    max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* ========== 設定パネル ========== */
  #settings-panel {
    display:none; position:fixed; top:44px; right:12px; z-index:99998;
    background:var(--panel); border:1px solid var(--border); border-radius:6px;
    padding:14px 16px; min-width:160px;
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
  }
  #settings-panel.show { display:block; }
  .settings-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:6px 0;
    font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.1em;
    color:var(--text-muted); text-transform:uppercase;
    border-bottom:1px solid var(--border);
  }
  .settings-row:last-child { border-bottom:none; }
  .toggle-btn {
    position:relative; width:50px; height:24px; border-radius:12px;
    border:1px solid var(--border); background:var(--surface);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:all 0.2s ease;
  }
  .toggle-btn::after {
    content:''; position:absolute; top:2px; left:2px;
    width:18px; height:18px; border-radius:50%;
    background:var(--text-muted); transition:all 0.2s ease;
  }
  .toggle-btn.on {
    border-color:rgba(26,120,90,0.5); background:#a8b87a;
  }
  .toggle-btn.on::after {
    left:28px; background:var(--text-muted);
  }