/* ゲームの操作系を「盤面の外に置かれたページの部品」ではなく
 * 「ひとつづきの筐体（コンソール）」にまとめるための共通スタイル。
 *
 * なぜ共通に置くか: 20本のゲームでばらばらに書くと、同じ見た目にならないうえ、
 * 直すときに20か所さわることになる。骨組みだけをここに置き、色と質感は
 * 各ゲームが CSS 変数で上書きして「そのゲームの世界のUI」に見せる。
 *
 * 使い方（各ゲーム側）:
 *   <div class="gc" data-gc>
 *     <div class="gc-hud">…読み取り値…</div>
 *     <div class="gc-screen">…canvas / overlay / 盤面の上に出すもの…</div>
 *     <div class="gc-dock">…道具・操作ボタン…</div>
 *   </div>
 * 色は .gc に --gc-* を並べて上書きする。 */

.gc{
  --gc-frame:#0d0f1c;          /* 筐体の外枠 */
  --gc-panel:#141830;          /* 帯の下地 */
  --gc-panel-2:#1b2040;        /* ボタンの下地 */
  --gc-line:rgba(255,255,255,.10);
  --gc-ink:rgba(255,255,255,.92);
  --gc-dim:rgba(255,255,255,.52);
  --gc-accent:#c9a04e;         /* 強調（各ゲームで替える） */
  --gc-glow:rgba(201,160,78,.55);
  --gc-warn:#d9634f;
  --gc-radius:10px;

  position:relative;
  border-radius:var(--gc-radius);
  background:var(--gc-frame);
  border:1px solid var(--gc-line);
  box-shadow:0 18px 46px rgba(10,12,26,.42), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  font-family:"Noto Sans JP",sans-serif;
  isolation:isolate;                       /* 中の発光が外へ漏れないように */
}

/* ───── 上帯：読み取り値 ───── */
.gc-hud{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem 1.05rem;
  padding:.5rem .75rem;
  background:linear-gradient(180deg,var(--gc-panel),color-mix(in srgb,var(--gc-panel) 82%, #000));
  border-bottom:1px solid var(--gc-line);
  font-size:.72rem; color:var(--gc-dim); letter-spacing:.02em;
}
.gc-hud b{
  color:var(--gc-ink); font-size:.95rem; font-weight:700;
  font-variant-numeric:tabular-nums; font-family:"Inter","Noto Sans JP",sans-serif;
}
.gc-hud .lead b{ color:var(--gc-accent); font-size:1.15rem; }
.gc-hud .hot b, .gc-hud b.hot{ color:var(--gc-warn); }

/* ───── 盤面 ───── */
.gc-screen{ position:relative; background:#0a0c18; }
.gc-screen > canvas{ display:block; width:100%; height:auto; touch-action:none; }

/* 盤面の上に薄く重ねる帯（凡例・一言メッセージ）。操作を邪魔しないよう当たり判定は殺す。 */
.gc-note{
  position:absolute; left:0; right:0; bottom:0; padding:.4rem .7rem;
  font-size:.72rem; line-height:1.5; color:rgba(255,255,255,.9); pointer-events:none;
  background:linear-gradient(0deg,rgba(8,9,20,.86),rgba(8,9,20,0)); min-height:1.9rem;
}
.gc-legend{
  position:absolute; left:.5rem; top:.5rem; display:flex; flex-wrap:wrap; gap:.15rem .6rem;
  padding:.28rem .5rem; border-radius:6px; pointer-events:none;
  background:rgba(8,9,20,.62); border:1px solid var(--gc-line);
  font-size:.64rem; color:rgba(255,255,255,.78);
}
.gc-legend .sw{ display:inline-block; width:14px; height:6px; border-radius:2px;
  margin-right:.28rem; vertical-align:middle; }

/* ───── 下帯：道具と操作 ───── */
.gc-dock{
  padding:.5rem .6rem .6rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc-panel) 88%, #000),var(--gc-panel));
  border-top:1px solid var(--gc-line);
  display:flex; flex-direction:column; gap:.45rem;
}
.gc-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; }
@media(min-width:520px){ .gc-tools{ grid-template-columns:repeat(6,1fr); } }
.gc-acts{ display:flex; gap:.35rem; flex-wrap:wrap; }
.gc-acts > *{ flex:1 1 0; min-width:5.2rem; }

/* ───── ボタンの共通の質感 ─────
   押した感じを出すのは transform と内側の影だけ。位置やサイズは動かさないので
   レイアウトのずれ（CLS）は起きない。

   .play-btn（覆いの主ボタン）だけは外す。`.gc button` は詳細度 (0,1,1) で
   各ゲームが書く `.play-btn` (0,1,0) に勝ってしまい、「はじめる」の目立つ色が
   下帯のボタン色に塗り替えられてしまうため。 */
.gc button:not(.play-btn), .gc .gc-btn{
  -webkit-appearance:none; appearance:none;
  position:relative; overflow:hidden;
  cursor:pointer; min-height:44px; padding:.35rem .8rem;
  border-radius:7px; border:1px solid var(--gc-line);
  background:linear-gradient(180deg,var(--gc-panel-2),color-mix(in srgb,var(--gc-panel-2) 76%, #000));
  color:var(--gc-ink); font-family:"Noto Sans JP",sans-serif; font-size:.76rem; font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.35);
}
.gc button:disabled{ cursor:default; opacity:.38; }
.gc button.warn{ color:var(--gc-warn); }

/* 道具（アイコン＋名前＋補足の縦積み） */
.gc-tools button{
  min-height:60px; padding:.3rem .1rem .25rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:.74rem; font-weight:700;
}
.gc-tools button small{ font-size:.6rem; font-weight:500; color:var(--gc-dim);
  font-family:"Inter",sans-serif; }
.gc-tools button .sq{ display:block; width:20px; height:20px; border-radius:3px; }

/* 選ばれている道具 */
.gc button.on{
  border-color:var(--gc-accent); color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc-accent) 26%, var(--gc-panel-2)),var(--gc-panel-2));
  box-shadow:inset 0 0 0 1px var(--gc-glow), 0 0 14px -2px var(--gc-glow);
}
.gc button.on small{ color:rgba(255,255,255,.8); }
.gc button.locked{ opacity:.34; }

/* 「次に押すもの」の案内。手順表示と連動する */
.gc button.next{ border-color:var(--gc-accent); box-shadow:0 0 0 2px var(--gc-glow), 0 0 18px -4px var(--gc-glow); }

/* ───── 覆い（開始・結果） ───── */
.gc-over{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:.8rem;
  padding:1.4rem; color:#fff; background:rgba(9,10,22,.90);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  overflow-y:auto;
}
.gc-over.hidden{ display:none; }

/* ───── 動き ─────
   演出はすべて no-preference のときだけ。reduce の人には静止したまま届く。 */
@media (prefers-reduced-motion: no-preference){
  html.hb-motion .gc button{ transition:transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .2s ease; }
  html.hb-motion .gc button:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--gc-accent); }
  html.hb-motion .gc button:active:not(:disabled){ transform:translateY(1px) scale(.985); }

  /* 押した点から広がる輪。console.js が座標を CSS 変数で渡す。 */
  html.hb-motion .gc .gc-ripple{
    position:absolute; left:var(--rx); top:var(--ry); width:8px; height:8px; margin:-4px 0 0 -4px;
    border-radius:50%; background:var(--gc-glow); pointer-events:none;
    animation:gc-ripple .48s ease-out forwards;
  }
  @keyframes gc-ripple{
    from{ transform:scale(1); opacity:.55; }
    to{ transform:scale(16); opacity:0; }
  }

  /* 数字が変わった瞬間だけ光らせる。値そのものは動かさない（読み違いを招くため）。 */
  html.hb-motion .gc [data-gc-num].gc-pop{ animation:gc-pop .34s ease-out; }
  @keyframes gc-pop{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.16); text-shadow:0 0 12px var(--gc-glow); }
    100%{ transform:scale(1); }
  }

  /* 増減を小さな札で見せる。数字の読み取りを邪魔しないよう上へ抜ける。 */
  html.hb-motion .gc .gc-delta{
    position:absolute; left:50%; bottom:100%; translate:-50% 0;
    font-family:"Inter",sans-serif; font-size:.62rem; font-weight:700; white-space:nowrap;
    pointer-events:none; animation:gc-delta .9s ease-out forwards;
  }
  @keyframes gc-delta{
    from{ opacity:.95; translate:-50% 0; }
    to{ opacity:0; translate:-50% -14px; }
  }

  /* 筐体そのものの登場。最初の1回だけ。 */
  html.hb-motion .gc.gc-in{ animation:gc-in .5s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes gc-in{
    from{ opacity:0; transform:translateY(10px) scale(.994); }
    to{ opacity:1; transform:none; }
  }
}

.gc [data-gc-num]{ position:relative; display:inline-block; }