/* 再利用する部品だけを置く。ここに書くものの条件は 2 つ：
   ・2 か所以上で使う（1 か所しか使わないものは、その画面の CSS に書く）
   ・値は tokens.css のトークンで書く（16 進数を直書きしない）
   ページ固有の並べ方は base.css、盤やスキンは game.css の担当。

   2026-08-30 改版：設計稿 2a / 5a の実値で組み直した。
   この層の要点は「箱を面ではなく物として描く」こと —— 輪郭 2px、実体影、
   そして器の縁に噛ませる押し出し札。縦棒の見出しはこの 3 点に置き換わった。 */

/* ---------- カード ---------- */
/* 白い面 + 太い輪郭 + 実体影。この 3 点がこのサイトの「箱」の定義。
   輪郭を 2px にしたのは絵と界面を同じ線で描くため —— 挿絵が 2.5〜3.5px の
   輪郭を持つので、界面だけ 1px だと絵が貼り付けたシールに見える */
.card {
  position: relative;
  background: var(--surface);
  border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}

/* ---------- 押し出し札（このサイトの見出しの既定形）---------- */
/* 器の上辺に噛ませた札。箱に貼ったラベルとして読ませるので、
   器の縁より外へ 14px 出し、輪郭は器と同じ 2px で描く。
   ⚠ 親に position: relative が要る（.card は上で持っている）*/
.card-label {
  position: absolute; top: -14px; left: 18px; z-index: 1;
  background: var(--soft);
  border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--radius-pill);
  padding: 3px 16px;
  font-weight: 900; font-size: 13px; color: var(--ink);
  /* ⚠ line-height を明示する。札を置く先のひとつ .screen は canvas の下に出る
     行内の余白を消すため line-height:0 を持っており、それを継ぐと札が
     padding だけの 10px に潰れる（PLAY の札が実際そうなっていた）*/
  line-height: 1.6;
  white-space: nowrap;
}
/* 札の地色は節ごとに変える。全部同じ色だと節の切れ目が目で拾えない ——
   ミノの淡色をそのまま使うので、盤の色と札の色が同じ体系に乗る */
.card-label[data-tone="i"] { background: var(--mino-i); }
.card-label[data-tone="o"] { background: var(--mino-o); }
.card-label[data-tone="t"] { background: var(--mino-t); }
.card-label[data-tone="s"] { background: var(--mino-s); }
.card-label[data-tone="z"] { background: var(--mino-z); }
.card-label[data-tone="j"] { background: var(--mino-j); }
.card-label[data-tone="l"] { background: var(--mino-l); }
/* 遊技機の PLAY 札だけは帽子の赤。ここが画面で最も強い記号になる */
.card-label[data-tone="play"] { background: var(--brand-red); color: var(--brand-body); letter-spacing: 2px; }
/* 機体の上辺に札を 2 枚並べるための器。札は既定で絶対配置なので、
   中では静的配置に戻して横に並べる。
   ⚠ 位置の値（top: -14px / left: 18px）は .card-label から移しただけ。
   両方に書くと片方だけ直したときにずれる */
.screen-labels {
  position: absolute; top: -14px; left: 18px; z-index: 1;
  display: flex; align-items: center; gap: 8px;
}
.screen-labels .card-label { position: static; }

/* カード内の小見出し。札にするほどではない 2 段目 */
.card-title {
  position: absolute; top: -14px; left: 14px; z-index: 1;
  background: var(--mino-t);
  border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--radius-pill);
  padding: 3px 14px;
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  font-size: 12px; font-weight: 900; letter-spacing: 1px; color: var(--ink);
  white-space: nowrap;
}

/* ---------- バッジ ---------- */
.badge {
  display: inline-block;
  background: var(--soft); color: var(--ink);
  border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
  padding: 2px 12px; font-size: 12px; font-weight: 800; white-space: nowrap;
}
/* NEW 札。新しく足した遊技の項目名の後ろへ小さく付ける（header・footer の共通ブロック）。
   地色を黄にしたのは、現在地の項目が赤（--brand-red）で塗られるから ——
   赤系の札だと、その頁にいるときだけ札が地に溶けて見えなくなる。
   ⚠ 大きくしないこと。PC のナビは 1 行に並べているので、札のぶん項目が伸びて
     折り返すと、ヘッダーの高さが跳ねる */
.new-badge {
  display: inline-block; margin-left: 5px; padding: 1px 5px;
  border: 1.5px solid var(--stroke); border-radius: var(--radius-pill);
  background: var(--mino-o); color: var(--ink);
  font-size: 9px; font-weight: 900; letter-spacing: .04em; line-height: 1.2;
  vertical-align: 1px;
}

/* ---------- 行動喚起ボタン ---------- */
/* 影を 0 4px 0 の実体にして「押せる物」に見せる。押すと沈む。
   木の机の上でいちばん強い暖色なので、視線が必ず最初にここへ落ちる */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
  background: var(--cta); color: var(--brand-body);
  padding: 10px 44px; font-size: 15px; font-weight: 900; letter-spacing: 2px;
  box-shadow: var(--shadow-solid);
}
.cta:hover { background: var(--cta-hover); }
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cta-edge); }
/* 二番手の釦（「ふつうに遊ぶ」）。同じ形のまま地色と影だけ落として主従を付ける */
.cta.is-sub {
  background: var(--surface); color: var(--ink);
  padding: 8px 44px; font-size: 14px; font-weight: 800;
  box-shadow: 0 3px 0 var(--stroke);
}
.cta.is-sub:hover { background: var(--soft); }

/* ---------- キーキャップ ---------- */
/* 操作説明の「←→」「Space」を物理キーに見せる。
   下辺だけ 3px にして厚みを出す。等幅にしないと 1 文字キーと Space で高さが揃わない */
.keycap {
  display: inline-grid; place-items: center; min-width: 34px;
  border: var(--stroke-w) solid var(--stroke); border-bottom-width: 3px; border-radius: 6px;
  background: var(--soft); padding: 1px 7px;
  font-family: 'Share Tech Mono', ui-monospace, Menlo, monospace;
  font-size: 12px; color: var(--ink); line-height: 1.3;
}

/* ---------- 順位バッジ ---------- */
/* 上位 3 つだけ色を変える。4 位以下も同じ丸にしておかないと、
   「自分は圏外」という印象が強く出すぎて次を打つ気が失せる */
.rank-badge {
  display: grid; place-items: center; width: 22px; height: 22px;
  border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.rank-badge[data-rank="1"] { background: var(--gold); }
.rank-badge[data-rank="2"] { background: var(--silver); }
.rank-badge[data-rank="3"] { background: var(--bronze); }

/* ---------- 節の内側で中身を割るカード ---------- */
/* 節そのものは 1 行 1 つ。そのぶん中身が長くなるので、
   並列に読める要素（コツ、特徴、操作一覧）はここでカードに割る。
   内側の箱は輪郭を淡い方（--line）で引く —— 濃い輪郭を入れ子にすると
   線が二重に見えて、どちらが箱の縁なのか分からなくなる */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
/* 2 枚しか入らないものは 2 列で固定。auto-fill だと 3 枚目の空き枠ができて、
   カードが痩せたまま右に間が空く */
.sub-grid.is-two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .sub-grid.is-two { grid-template-columns: 1fr; } }
.sub-card {
  background: transparent; border: var(--stroke-w) solid var(--line);
  border-radius: var(--radius-inner); padding: 14px 16px;
}
.content-section .sub-card h3, .sub-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.content-section .sub-card p, .sub-card p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--sub); }
/* コツは「見出し語＋説明」。見出し語を丸札にすると一覧性が上がる */
.sub-card .tag {
  display: inline-block; margin-bottom: 6px;
  background: var(--soft); color: var(--ink);
  border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
  padding: 1px 10px; font-size: 11.5px; font-weight: 900;
}
.sub-card .tag[data-tone="i"] { background: var(--mino-i); }
.sub-card .tag[data-tone="o"] { background: var(--mino-o); }
.sub-card .tag[data-tone="t"] { background: var(--mino-t); }
.sub-card .tag[data-tone="s"] { background: var(--mino-s); }
.sub-card .tag[data-tone="z"] { background: var(--mino-z); }
.sub-card ul { margin: 0; padding-left: 1.15em; }
.content-section .sub-card li, .sub-card li { font-size: 13px; line-height: 1.95; color: var(--sub); margin-bottom: 2px; }
.sub-card li b { color: var(--ink); font-weight: 700; }

/* ---------- スマホのメニュー（引き出し）----------
   押した釦のすぐ下に開く。入口は 2 か所あるが開き方は 1 つ ——
   同じ三本線の釦が、ページによって違う開き方をしないため。
   位置（top / right）は開くときに JS が釦の座標から入れる。 */
.nav-drop { display: none; }

@media (max-width: 560px) {
  /* 膜は全面。外を押して閉じられないと「閉じ方が分からない」で詰まる。
     ⚠ touch-action: none —— 膜の上でなぞっても裏の頁を流さない。
     これが無いと、引き出しを触ったつもりで後ろが動く */
  .nav-drop { display: block; position: fixed; inset: 0; z-index: 40; touch-action: none; }
  /* 念のため頁の側も止める。膜の外（引き出しの上）から始まったなぞりも拾う */
  html.is-menu-open, html.is-menu-open body { overflow: hidden; }
  .nav-drop-card {
    position: absolute;
    width: min(232px, calc(100vw - 28px));
    padding: 8px;
    background: var(--surface);
    border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-inner);
    box-shadow: var(--shadow-solid);
    /* 釦から生えるように、上端を起点に開く */
    transform-origin: top right;
    animation: nav-drop-in .14s ease-out;
    /* 背の低い手機では項目が画面の下へはみ出す。高さは開くときに site-menu.js が画面の残りに合わせ、はみ出す分は中で流す。
       ⚠ 膜（.nav-drop）の touch-action: none は、流す器にした引き出しの中までは効かない（器ごとに数え直される）*/
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  }
  @keyframes nav-drop-in {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
  .nav-drop-label {
    margin: 6px 0 2px; padding: 0 8px;
    font-size: 10.5px; font-weight: 900; letter-spacing: 1px; color: var(--muted);
  }
  .nav-drop-label:first-child { margin-top: 2px; }
  .nav-drop-card a,
  .nav-drop-card button {
    display: block; width: 100%; padding: 9px 10px; margin: 0;
    background: none; border: 0; border-radius: 10px;
    font-family: inherit; font-size: 14px; font-weight: 800; color: var(--ink);
    text-align: left; text-decoration: none;
  }
  .nav-drop-card a[aria-current] { background: var(--soft); }
  .nav-drop-card a:active, .nav-drop-card button:active { background: var(--soft); }
  /* 順位表と設定は導航ではないので、線で区切って下に置く */
  .nav-drop-card [data-open-modal="ranking"] { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px; border-radius: 0 0 10px 10px; }
  /* お知らせは先頭に置き、導航と線で分ける */
  .nav-drop-card [data-open-news] { margin-bottom: 4px; border-bottom: 1px solid var(--line); padding-bottom: 12px; border-radius: 10px 10px 0 0; }
}

/* 設定の窓の「HOLD の位置」は PC の画面だけ（手機は状態板の並びが別で、左右を入れ替える場所が無い。ui/hold-side.js）*/
[data-skin="console"] .setting-row.is-hold-side { display: none; }

/* 初めて見た人にだけ出す一言（ui/first-tip.js）。入口の真上に出し、下向きの三角で指す */
.first-tip {
  position: absolute; z-index: 60; max-width: min(260px, calc(100vw - 16px)); padding: 7px 12px;
  background: var(--ink); color: var(--surface); border-radius: 12px;
  font-size: 12px; font-weight: 800; line-height: 1.5;
  box-shadow: 0 4px 12px rgb(0 0 0 / .2); pointer-events: none;
  animation: first-tip-in .2s ease-out;
}
.first-tip::after {
  content: ''; position: absolute; top: 100%; left: calc(var(--tip-x, 50%) - 7px);
  border: 7px solid transparent; border-top-color: var(--ink);
}
@keyframes first-tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* 吹き出しが指している入口そのものも光らせる（站長 2026-09-18「先亮一下」）。
   outline なので周りの並びは 1px も動かない。吹き出しが閉じたら外す（ui/first-tip.js）*/
.is-tip-lit { outline: 3px solid var(--cta); outline-offset: 2px; animation: tip-lit .8s ease-in-out infinite alternate; }
@keyframes tip-lit { to { outline-offset: 6px; } }
@media (prefers-reduced-motion: reduce) { .is-tip-lit { animation: none; } }

/* ランキングの窓の下の「ほかのランキングも見る ›」—— 全站の総合ランキング（/ranking/）へ（docs/plan-ranking-hub.md）*/
.rank-hub-link { margin: 12px 0 0; text-align: center; }
.rank-hub-link a { font-size: 12px; font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }