/*
 * サイバーパンクの見た目。
 *
 * 夜のネオン街に立てた端末——という体で組んでいる。地は黒に近い紺、
 * 線と字はシアン、押してほしいところと危ないところはマゼンタ。
 * 面はほとんど塗らず、細い光る線と薄い発光で形を出す。
 *
 * 部品も端末のものに寄せてある。
 *   上部  … 装置の見出し（両端に隅の括弧、下に走査線）
 *   札    … 角を落とした板。上端の帯で攻守を示す
 *   実況  … 端末の出力（行頭に > が付く）
 *   判定  … 画面いっぱいの枠に打ち出す
 *   地紋  … 方眼と走査線を薄く敷く
 * 素材は持たず、すべてCSSの階調で描いている。
 */

/*
 * 同梱した書体。
 *
 * 画面に出る字だけを抜き出した和文ゴシックを持っている（src/ui/fonts/）。
 * 外へ取りに行かないので、圏外でも、端末に和文書体が無くても字面が変わらない。
 * 作り直しは tools/build-fonts.sh。
 *
 * 明朝は使わない。数字と英字は端末らしく等幅に落とす（下の --mono）。
 */
@font-face {
  font-family: "Fuda Gothic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/NotoSansJP-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fuda Gothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/NotoSansJP-700.woff2") format("woff2");
}
@font-face {
  font-family: "Fuda Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/NotoSansJP-900.woff2") format("woff2");
}

:root {
  /* ── 地と線 ── */
  --void: #05070e;        /* いちばん奥 */
  --deep: #0a0f1c;        /* 版面 */
  --panel: #101828;       /* 盛り上がった面 */
  --raise: #16203a;       /* さらに上 */
  --line: #23324e;        /* 罫 */
  --line-hot: #2f4a72;

  /* ── 光 ── */
  --cyan: #35e0ff;        /* 主。線と見出し */
  --cyan-dim: #1c6c85;
  --magenta: #ff3d8b;     /* 押してほしいところ・危険 */
  --magenta-dim: #8a2450;
  --amber: #ffb347;       /* 注意 */
  --lime: #6bff9e;        /* 良いこと */
  --violet: #a06bff;      /* 両用 */

  /* ── 字 ── */
  --text: #d8e8f7;
  --text-dim: #7f97b4;
  --text-faint: #55688a;

  /* ── 種別 ── */
  --attack: var(--magenta);
  --attack-face: rgba(255, 61, 139, 0.09);
  --defense: var(--cyan);
  --defense-face: rgba(53, 224, 255, 0.09);
  --support: var(--lime);
  --support-face: rgba(107, 255, 158, 0.08);
  --both: var(--violet);
  --both-face: rgba(160, 107, 255, 0.1);

  --ink: var(--text);
  --muted: var(--text-dim);

  /*
   * 日本語の書体。
   *
   * 先頭は同梱したもの。そのうしろに端末の書体を名指しで並べてある。
   * 名指しするのは、和文書体が無いと同じ漢字でも中国語向けの字形で
   * 表示されてしまうため（直・骨・対 などが別の形になる）。
   */
  --jp:
    "Fuda Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic",
    "YuGothic", "Meiryo", "Noto Sans CJK JP", "IPAexGothic", sans-serif;

  /* 見出しと札の名前。太いゴシックを広めに空けて置く */
  --jp-display:
    "Fuda Display", "Fuda Gothic", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic",
    "Meiryo", sans-serif;

  /* 数字・英字・記号。端末らしく等幅にする（和文は上の並びに落ちる） */
  --mono:
    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono",
    "Fuda Gothic", monospace;
}

* { box-sizing: border-box; }

/* button に display を与えているので、hidden を確実に優先させる */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  /* 携帯はアドレスバーの伸び縮みで 100vh がずれるので、対応していれば実寸を使う */
  min-height: 100dvh;
  /* 端で指を滑らせても左右に動かない */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  color: var(--ink);
  font-family: var(--jp);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--void);
  /*
   * 地紋は方眼と走査線。
   * 方眼は端末の座標、走査線はブラウン管のちらつきに見立てている。
   * どちらもうんと薄く敷いて、字の邪魔をしない濃さに留める。
   */
  background-image:
    repeating-linear-gradient(0deg, rgba(53, 224, 255, 0.028) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(53, 224, 255, 0.05) 0 1px, transparent 1px 48px),
    linear-gradient(0deg, rgba(53, 224, 255, 0.05) 0 1px, transparent 1px 48px),
    radial-gradient(ellipse at 12% -10%, rgba(255, 61, 139, 0.14), transparent 55%),
    radial-gradient(ellipse at 88% 110%, rgba(53, 224, 255, 0.14), transparent 55%);
}

h1, h2 {
  font-family: var(--jp-display);
  font-weight: 900;
  letter-spacing: 0.16em;
}

/* 囲い。細い光る線と、内側のわずかな発光 */
.gilt {
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  box-shadow: inset 0 0 12px rgba(53, 224, 255, 0.08);
}

/* ── 見出し（装置の上蓋） ─────────────────────────────── */

.topbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 4px;
  padding: 12px 22px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line-hot);
  background:
    repeating-linear-gradient(0deg, rgba(53, 224, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--panel), var(--deep));
  box-shadow: 0 1px 0 rgba(53, 224, 255, 0.25), 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* 下端を走る光の筋 */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--magenta) 80%, transparent);
  opacity: 0.75;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.34em;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(53, 224, 255, 0.55);
}

/* 屋号の印。角を落とした札に一文字 */
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
  background: var(--cyan);
  color: var(--void);
  font-family: var(--jp-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
}

.setup { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.setup label { display: flex; gap: 6px; align-items: center; color: var(--text-dim); font-size: 13px; }

/* デッキ編集の道具を役割ごとに束ねる：選ぶ／いまのデッキをいじる／消す */
.tool-group { display: inline-flex; gap: 8px; align-items: center; }
.tool-group + .tool-group { padding-left: 12px; border-left: 1px solid var(--line); }
/* 消すのは取り返しがつかないので、離して赤く */
#delete-deck { border-color: rgba(255, 61, 139, 0.55); color: var(--magenta); }
#delete-deck:hover { border-color: var(--magenta); box-shadow: 0 0 12px rgba(255, 61, 139, 0.3); }

/* 広い画面では畳む必要がないので、開閉の見出しを隠して素の横並びに見せる。
   （閉じるのは狭い画面のときだけ。app.js が画面幅を見て決める） */
.setup-fold { flex: 1; min-width: 0; }
.setup-fold > summary { display: none; }

select, input, button, .link-button {
  background: var(--raise);
  color: var(--text);
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  padding: 6px 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

button, .link-button {
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.08em;
  transition: box-shadow 0.14s, border-color 0.14s, color 0.14s;
}
button:hover, .link-button:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(53, 224, 255, 0.3), inset 0 0 10px rgba(53, 224, 255, 0.12);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

/* 押してほしいところはマゼンタで光らせる */
.primary {
  background: linear-gradient(180deg, rgba(255, 61, 139, 0.24), rgba(255, 61, 139, 0.1));
  border-color: var(--magenta);
  color: #ffd7e6;
  font-family: var(--jp-display);
  font-weight: 900;
  letter-spacing: 0.16em;
  box-shadow: 0 0 14px rgba(255, 61, 139, 0.28), inset 0 0 12px rgba(255, 61, 139, 0.14);
}
.primary:hover {
  border-color: var(--magenta);
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 61, 139, 0.5), inset 0 0 14px rgba(255, 61, 139, 0.2);
}

/* ── 配置 ─────────────────────────────────────────────── */

main {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.35fr);
  grid-template-areas: "board panel" "log panel";
  gap: 16px;
  padding: 18px 20px 28px;
  max-width: 1180px;
  margin: 0 auto;
}

.board { grid-area: board; position: relative; }
.panel { grid-area: panel; }
.log { grid-area: log; }

/* 版面の共通の囲い */
.their-hand,
.scoreboard,
.linescore,
.duel,
.panel,
.log,
.card-rows,
.summary {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--deep);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5);
}

/* ── 相手の手札 ───────────────────────────────────────── */

/*
 * 枚数を字で書くだけだと、相手がどれだけ札を抱えているのか実感が湧かない。
 * 裏向きの札を実際にその枚数だけ並べる。少し重ねて扇のように見せる。
 */
.their-hand {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px 10px;
}

.their-hand-label {
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.their-hand-cards { display: flex; justify-content: center; flex-wrap: wrap; min-height: 34px; }

/* 札の裏。回路の走った板 */
.card-back {
  width: 24px;
  height: 34px;
  margin-right: -8px; /* 少しずつ重ねる */
  border: 1px solid var(--cyan-dim);
  border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, rgba(53, 224, 255, 0.22) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(53, 224, 255, 0.14) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #14243c, #0a1120);
  box-shadow: 0 0 8px rgba(53, 224, 255, 0.18);
  animation: draw-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}
.card-back:last-child { margin-right: 0; }

/* 引いた札は上から強く光りながら落ちてくる。増えたことがひと目で分かるように */
@keyframes draw-in {
  0% { opacity: 0; transform: translateY(-26px) rotate(-16deg) scale(0.6); box-shadow: 0 0 20px rgba(53, 224, 255, 0.85); }
  60% { opacity: 1; transform: translateY(2px) rotate(2deg) scale(1.08); box-shadow: 0 0 14px rgba(53, 224, 255, 0.55); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); box-shadow: 0 0 8px rgba(53, 224, 255, 0.18); }
}

/* 使ったり捨てたりして減った札は、上へ舞って消える */
.card-back.out { animation: back-out 0.45s ease-in forwards; }
@keyframes back-out {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-32px) rotate(20deg) scale(0.7); }
}

/* 枚数が動いた瞬間、箱そのものもひと呼吸だけ光る */
.their-hand.ping { animation: hand-ping 0.6s ease-out; }
@keyframes hand-ping {
  0% { border-color: var(--cyan); box-shadow: 0 0 20px rgba(53, 224, 255, 0.45), inset 0 0 24px rgba(0, 0, 0, 0.5); }
  100% { border-color: var(--line); box-shadow: 0 0 0 rgba(53, 224, 255, 0), inset 0 0 24px rgba(0, 0, 0, 0.5); }
}

/* 「相手の手札を公開させる」札が効いている間は、表を見せる */
.their-hand.revealed { border-color: var(--magenta); box-shadow: 0 0 18px rgba(255, 61, 139, 0.3); }
.their-hand.revealed .their-hand-cards { gap: 5px; }
/* 公開中の札。場の札と同じ見た目だが、押せないので別の名前にしておく
   （場に出ている札を数える処理と混ざらないようにするため） */
.their-open {
  width: 96px;
  padding: 5px;
  cursor: default;
  animation: none;
}
.their-open .name { font-size: 10px; min-height: 0; margin: 3px 0 2px; }
.their-open .stats { font-size: 10px; }
.their-open .art { max-height: 32px; }
.their-open .marks { display: none; }

/* ── 得点板 ───────────────────────────────────────────── */

/* 発光する数字盤 */
.scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background:
    repeating-linear-gradient(0deg, rgba(53, 224, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--panel), var(--deep));
}

.team { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 84px; }
.team-name {
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 0.24em;
}

.run {
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #eaf6ff;
  text-shadow: 0 0 16px rgba(53, 224, 255, 0.8), 0 0 40px rgba(53, 224, 255, 0.4);
}
.run.bump { animation: bump 0.5s ease-out; color: var(--magenta); text-shadow: 0 0 20px rgba(255, 61, 139, 0.9); }

/* 一度縮んでから跳ね直す。数字が「打たれた」感じになる */
@keyframes bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.55); }
  55% { transform: scale(0.92); }
  75% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── 回ごとの得点 ─────────────────────────────────────── */

/*
 * 得点板と回ごとの得点は同じ場所の裏表。タップするたびに札のように
 * 裏返って入れ替わる。出っぱなしにしない代わりに、いつでも1タップで見られる。
 *
 * ふたつの面は同じマスに重ねて置く（grid-area 1/1）。箱の高さは常に
 * 大きいほうの面に合うので、裏返しても縦にガタつかない。
 * 消すのは display ではなく visibility。高さの計算に残しておくため。
 */
.scoreflip {
  display: grid;
  perspective: 700px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.scoreflip > * { grid-area: 1 / 1; }
.scoreflip .linescore-wrap { visibility: hidden; display: flex; align-items: center; }
.scoreflip .linescore { align-self: center; }
/* 塁ランプ。二塁を頂点に三つ菱を組み、走者のいる塁が白く点く */
.runner-lamp {
  position: relative;
  width: 46px;
  height: 32px;
  margin: 6px auto 0;
}
.runner-lamp .lamp {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #3a4356;
  transform: rotate(45deg);
  border-radius: 2px;
  transition: background 0.18s, box-shadow 0.18s;
}
.runner-lamp .lamp-2 { left: 16px; top: 0; }
.runner-lamp .lamp-3 { left: 3px; top: 13px; }
.runner-lamp .lamp-1 { left: 29px; top: 13px; }
.runner-lamp .lamp.on {
  background: #f4fbff;
  box-shadow: 0 0 10px rgba(53, 224, 255, 0.9), 0 0 3px #fff;
}

.scoreflip.open .scoreboard { visibility: hidden; }
.scoreflip.open .linescore-wrap { visibility: visible; animation: score-turn 0.4s ease-out; }
.scoreflip:not(.open) .scoreboard { animation: score-turn 0.4s ease-out; }

/* 上端を軸にめくれ返る */
@keyframes score-turn {
  0% { transform: rotateX(-88deg); opacity: 0.3; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

/* 狭い画面では横に流す。盤面ごと横に伸びないように、ここだけで受け止める */
.linescore-wrap { overflow-x: auto; }

.linescore {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: center;
}
.linescore th,
.linescore td { padding: 4px 6px; border: 1px solid var(--line); }
.linescore-head th {
  color: var(--cyan);
  font-weight: 700;
  background: rgba(53, 224, 255, 0.07);
  letter-spacing: 0.06em;
}
.linescore-name { font-family: var(--jp); text-align: left; white-space: nowrap; color: var(--text); letter-spacing: 0.1em; }
.linescore-total { font-weight: 700; color: #eaf6ff; background: rgba(53, 224, 255, 0.1); }
.linescore-none { color: var(--text-faint); }
/* いま攻めている側に印を付ける */
.linescore-atbat .linescore-name::before { content: '▶ '; color: var(--magenta); }
.linescore-atbat .linescore-name { color: var(--magenta); font-weight: 700; }

.inning-box { text-align: center; }
.inning { font-family: var(--jp-display); font-size: 17px; letter-spacing: 0.2em; color: var(--text); }

/*
 * 判定は端末の打ち出し。四隅を落とした枠に、字を広く空けて出す。
 */
.flash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
.flash.show { animation: flash 1.2s ease-out; }

.flash-mark {
  display: grid;
  place-content: center;
  justify-items: center;
  min-width: 150px;
  padding: 10px 22px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-family: var(--jp-display);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.2em;
  text-align: center;
  text-indent: 0.2em; /* 字間を空けたぶん、中心をとり直す */
}
/* 点は一段小さく、下の行に置く */
.flash-runs { font-family: var(--mono); font-size: 18px; letter-spacing: 0.1em; text-indent: 0; }

/* ヒットはマゼンタ、アウトはシアン */
.flash.hit .flash-mark {
  color: #ffd7e6;
  background: rgba(255, 61, 139, 0.16);
  box-shadow: inset 0 0 0 2px var(--magenta), 0 0 30px rgba(255, 61, 139, 0.55);
  text-shadow: 0 0 14px rgba(255, 61, 139, 0.9);
}
.flash.out .flash-mark {
  color: #cdf3ff;
  background: rgba(53, 224, 255, 0.14);
  box-shadow: inset 0 0 0 2px var(--cyan), 0 0 30px rgba(53, 224, 255, 0.5);
  text-shadow: 0 0 14px rgba(53, 224, 255, 0.9);
}

/* 立ち上がって、締まって、消える */
@keyframes flash {
  0% { opacity: 0; transform: scale(1.5) skewX(-8deg); filter: blur(3px); }
  16% { opacity: 1; transform: scale(0.97) skewX(0); filter: blur(0); }
  26% { transform: scale(1); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.03); }
}

/* 打ち出しの瞬間、色が一度だけ割れる（ブラウン管のにじみ） */
.flash.show .flash-mark { position: relative; overflow: hidden; }
.flash.show .flash-mark > span { animation: glitch 0.28s steps(2, end) 1; }

@keyframes glitch {
  0% { text-shadow: -3px 0 var(--cyan), 3px 0 var(--magenta); transform: translateX(2px); }
  50% { text-shadow: 3px 0 var(--cyan), -3px 0 var(--magenta); transform: translateX(-2px); }
  100% { text-shadow: none; transform: none; }
}

/* 白い走査線がひと筋、上から下へ抜ける */
.flash.show .flash-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateY(-100%);
  animation: mark-sweep 0.5s ease-out 0.1s forwards;
}

@keyframes mark-sweep {
  to { transform: translateY(100%); }
}

/*
 * 大きい一打（本塁打・2点以上）の衝撃波。
 * 菱形の輪がふたつ、時間差で広がる。
 */
.flash.big::before,
.flash.big > .flash-ring {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border: 2px solid var(--magenta);
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  animation: shockwave 0.9s ease-out forwards;
}
.flash.big > .flash-ring { animation-delay: 0.14s; border-color: var(--amber); }

@keyframes shockwave {
  0% { transform: rotate(45deg) scale(0.4); opacity: 0.95; }
  100% { transform: rotate(45deg) scale(4.2); opacity: 0; }
}

/* 判定の衝撃で場が揺れる。アウトは場だけ、大きい一打は盤面ごと */
.shake { animation: shake 0.35s ease-out; }

@keyframes shake {
  0% { transform: translate(3px, 0); }
  25% { transform: translate(-4px, 1px); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-2px, 0); }
  100% { transform: translate(0, 0); }
}

/* ── 札がぶつかる場 ───────────────────────────────────── */

/*
 * 出した札を向かい合わせに置く。
 * 手札から消えて結果の字だけが出るのでは、札で戦っている感じにならない。
 * 攻撃札は左から、守備札は右から差し込まれ、間に判定が浮かぶ。
 */
.duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  min-height: 116px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 61, 139, 0.08), transparent 62%),
    linear-gradient(180deg, var(--panel), var(--deep));
  perspective: 900px;
}

.duel-slot { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.duel-who { font-size: 10px; color: var(--cyan); letter-spacing: 0.24em; }

.duel-vacant {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 74px;
  border: 1px dashed var(--line-hot);
  border-radius: 2px;
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 4px;
}

/* 場の札は手札より一回り小さく。押せる札ではないので影も浅く */
.duel-card {
  width: 100%;
  max-width: 132px;
  padding: 6px;
  cursor: default;
  animation: none;
}
.duel-card .name { font-size: 12px; min-height: 0; margin: 4px 0 2px; }
.duel-card .art { max-height: 46px; }
.duel-card .marks { display: none; }

/* 左右から差し込まれる */
.duel-slot.attack .duel-card { animation: slide-from-left 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards; }
.duel-slot.defense .duel-card { animation: slide-from-right 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards; }

/* 必殺札は着地してから紫に燃え上がる */
.duel-slot.attack .duel-card.hissatsu {
  animation:
    slide-from-left 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
    hissatsu-surge 0.9s ease-out 0.3s backwards;
}
.duel-slot.defense .duel-card.hissatsu {
  animation:
    slide-from-right 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards,
    hissatsu-surge 0.9s ease-out 0.3s backwards;
}

@keyframes hissatsu-surge {
  0% { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45); }
  30% { box-shadow: inset 0 0 14px rgba(160, 107, 255, 0.4), 0 0 30px rgba(160, 107, 255, 0.85); }
  100% { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45), 0 0 12px -6px var(--violet); }
}

@keyframes slide-from-left {
  0% { opacity: 0; transform: translateX(-70px) rotateY(-55deg) scale(0.85); }
  100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
}
@keyframes slide-from-right {
  0% { opacity: 0; transform: translateX(70px) rotateY(55deg) scale(0.85); }
  100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
}

.duel-clash {
  min-width: 46px;
  text-align: center;
  font-family: var(--jp-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.duel-clash.show { animation: clash 0.5s cubic-bezier(0.2, 1.4, 0.3, 1) backwards; font-size: 17px; }
.duel-clash.out { color: var(--cyan); text-shadow: 0 0 14px rgba(53, 224, 255, 0.8); }
.duel-clash.hit { color: var(--magenta); text-shadow: 0 0 14px rgba(255, 61, 139, 0.8); }

@keyframes clash {
  0% { opacity: 0; transform: scale(2.4); }
  55% { opacity: 1; transform: scale(0.86); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── 札の山（山札・捨て札・退場） ─────────────────────── */

.counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pile-group {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 8px 12px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(8, 17, 29, 0.6);
}
.pile-owner {
  align-self: center;
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
}
/* 山ひとつ。ボタンのときも枠は持たない（山の絵そのものが口） */
.pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}
button.pile:hover { border: 0; box-shadow: none; }
button.pile:hover .pile-stack i:last-child {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(53, 224, 255, 0.4);
}
.pile-stack { position: relative; width: 30px; height: 40px; }
.pile-stack i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--cyan-dim);
  border-radius: 3px;
  background: linear-gradient(135deg, #10263d, #081422);
}
.pile-stack i:nth-child(1) { transform: translate(4px, -4px); opacity: 0.4; }
.pile-stack i:nth-child(2) { transform: translate(2px, -2px); opacity: 0.7; }
/* 枚数は札の真ん中に。何の山かはラベルが言うので、絵柄の字は置かない */
.pile-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: #dff2ff;
  text-shadow: 0 0 8px rgba(53, 224, 255, 0.5);
}
.pile-label { font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.1em; }
/* 空の山はうっすら。退場は場外に消えた札なので、覗けず、色も引く */
.pile-empty .pile-stack { opacity: 0.35; }
.pile-exile .pile-stack i { border-style: dashed; border-color: var(--line-hot); background: rgba(10, 14, 22, 0.8); }
.pile-exile .pile-num { color: var(--text-dim); text-shadow: none; }
.pile-note { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

/* 山札の上を覗いた札。押せないので、手札とは別の見た目にする */
.peek-card { cursor: default; border-style: dashed; }
.peek-order { display: block; font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.1em; }

.pile-title { margin: 0 0 4px; font-family: var(--jp-display); color: var(--cyan); font-size: 16px; letter-spacing: 0.16em; }
.pile-hint { margin-bottom: 8px; color: var(--text-dim); font-size: 12px; }
.pile-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 2px;
}
.pile-card { width: 108px; padding: 5px; animation: none; }
.pile-card .name { font-size: 12px; min-height: 2.4em; margin: 3px 0 2px; }
.pile-card .art { max-height: 40px; }
.pile-card .marks { display: none; }

/* ── 場のサポート札 ───────────────────────────────────── */

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.field-side h2 { margin: 0 0 6px; font-size: 12px; color: var(--cyan); letter-spacing: 0.24em; }
.field-cards { display: flex; flex-wrap: wrap; gap: 7px; min-height: 34px; }

/* 場に挿した札は、手札と同じ「札」の顔の小さな一枚にする */
.field-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  padding: 8px 7px 9px;
  font-weight: 700;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  border: 1px solid var(--support);
  border-radius: 2px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: var(--support-face);
  color: #cfffe2;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  animation: appear 0.35s ease-out;
  transition: box-shadow 0.14s;
}
.field-chip .field-kind {
  position: absolute;
  top: 3px;
  right: 5px;
  font-family: var(--jp-display);
  font-size: 10px;
  color: var(--support);
  letter-spacing: 0;
}
.field-chip .art { width: 100%; max-height: 46px; }
.field-chip .field-name { font-size: 12px; line-height: 1.3; }
.field-chip:hover { box-shadow: 0 0 14px rgba(107, 255, 158, 0.4); }
.field-chip.empty {
  min-height: 104px;
  justify-content: center;
  border-style: dashed;
  border-color: var(--line-hot);
  color: var(--text-faint);
  cursor: default;
  background: none;
  clip-path: none;
}

@keyframes appear {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 手札 ─────────────────────────────────────────────── */

/* 札を並べる台。薄い方眼を敷いて、札の面と地を見分けやすくする */
.panel {
  padding: 14px 16px;
  background:
    linear-gradient(90deg, rgba(53, 224, 255, 0.03) 0 1px, transparent 1px 32px),
    linear-gradient(0deg, rgba(53, 224, 255, 0.03) 0 1px, transparent 1px 32px),
    var(--deep);
}

/* 触れ書き。端末からの指示という体で出す */
.prompt {
  position: relative;
  margin-bottom: 10px;
  padding: 8px 12px 8px 26px;
  border: 1px solid var(--cyan-dim);
  border-left: 3px solid var(--cyan);
  border-radius: 2px;
  background: rgba(53, 224, 255, 0.07);
  color: #d8f3ff;
  font-size: 15px;
  letter-spacing: 0.04em;
}
/* 行頭の合図 */
.prompt::before {
  content: '>';
  position: absolute;
  left: 11px;
  color: var(--cyan);
  font-family: var(--mono);
  font-weight: 700;
}
.pending-card { min-height: 22px; margin-bottom: 8px; font-size: 13px; color: var(--text-dim); }

.hand { display: flex; flex-wrap: wrap; align-items: stretch; gap: 9px; }
/* チュートリアルの説明は札の並びに混ぜて出すが、札の幅には合わせない */
.hand .guide { flex: 1 1 100%; }
/*
 * 同じ行の札で絵と足元の位置を揃える。
 * 行の高さは一番背の高い札に合い、札の中身は縦積みで、バッジは底に吸い付く。
 * 数値行が折り返す札やバッジの無い札が混ざっても、段々にならない
 */
.hand .card { display: flex; flex-direction: column; }
.hand .card .marks { margin-top: auto; }

/*
 * 札。
 *
 * 角を落とした暗い板に、細い光る枠。上端の帯だけを種別の色で光らせ、
 * 面はその色をごく薄く敷く。字が沈まないよう、面は塗り込まない。
 */
.card {
  position: relative;
  width: 132px;
  padding: 9px 9px 10px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45);
  animation: deal 0.3s ease-out backwards;
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}

/* 上端の帯。遠目でも攻守が分かるようにするため */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--text-faint);
}

@keyframes deal {
  0% { opacity: 0; transform: translateY(28px) rotateX(-55deg) scale(0.9); }
  60% { opacity: 1; transform: translateY(-3px) rotateX(0) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

/* 場へ放った札。押した位置から場の中心へ飛ばす */
.card.flying {
  z-index: 20;
  pointer-events: none;
  animation: fly-to-field 0.28s cubic-bezier(0.4, 0, 0.7, 1) forwards;
}

@keyframes fly-to-field {
  0% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% {
    transform: translate(var(--fly-x, 0), var(--fly-y, 0)) scale(0.55) rotate(8deg);
    opacity: 0;
  }
}

/* 場に着く札。上からストンと落ちて、着いた瞬間だけ明るく光る。
   相手が複数枚出したときは animation-delay をずらして、ひと枚ずつ着かせる */
.duel-card.land-in,
.field-chip.land-in {
  animation: land-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.18) backwards;
}
@keyframes land-in {
  0% { opacity: 0; transform: translateY(-30px) scale(1.2); filter: brightness(1.9); }
  55% { opacity: 1; transform: translateY(2px) scale(0.97); filter: brightness(1.3); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* 同じ札の描き直し（判定の数値が入った等）では、着地も出直しもやり直さない */
.duel-card.settled,
.field-chip.settled { animation: none; }

/* 攻撃が通った。相手側へぐっと押し込んで、ひと呼吸光る */
.duel-card.pierce { animation: pierce 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
@keyframes pierce {
  0% { transform: none; }
  35% { transform: translateX(16px) scale(1.09); filter: brightness(1.7); box-shadow: 0 0 28px rgba(255, 61, 139, 0.7); }
  100% { transform: none; filter: none; }
}
/* 受け止められた。勢いが死んで、沈んだまま残る */
.duel-card.stopped { animation: stopped 0.8s ease-out forwards; }
@keyframes stopped {
  0% { transform: none; filter: none; }
  30% { transform: translateX(8px); filter: none; }
  100% { transform: none; filter: grayscale(0.55) brightness(0.75); }
}

/* 飛んでいる間は他の札を押させない */
.hand.busy { pointer-events: none; }

.card:not(:disabled):hover {
  transform: translateY(-6px);
  border-color: var(--cyan);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(53, 224, 255, 0.28);
}
.card:disabled { opacity: 0.35; filter: grayscale(0.8); cursor: default; }

/* 長押ししている間の手応え。
   選んだ印より先に書いておく。あとに書くと、長押しの印が消え損ねたときに
   選んだ印を上書きしてしまい、押しても光らない札ができる */
.card.held, .field-chip.held { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
/*
 * 選んだ札。マゼンタで光らせる。
 *
 * 触っているときの見た目（.card:hover）より必ず優先させること。
 * `.card:not(:disabled):hover` のほうが強さで勝っていたころは、
 * 押した直後の――つまりカーソルや指が乗っている――札だけが光らず、
 * 「選んでも光らないことがある」という状態になっていた。
 * 触った状態が指に残る端末では、そのまま光らないままになる。
 *
 * 枠線も outline で描いておく。outline は他のどの見た目も触らないので、
 * 長押しの印などが残っていても消えない。
 */
.card.picked,
.card.picked:not(:disabled):hover {
  transform: translateY(-6px);
  border-color: var(--magenta);
  outline: 1px solid var(--magenta);
  outline-offset: 2px;
  box-shadow: 0 0 22px rgba(255, 61, 139, 0.55), inset 0 0 22px rgba(255, 61, 139, 0.16);
}

.card .name {
  display: block;
  /* 名前が1行でも2行でも札の高さが揃うようにする */
  min-height: 2.6em;
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 14px;
  margin: 6px 0 3px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: #eaf6ff;
}
/* ── 札の数値 ─────────────────────────────────────────── */

/*
 * 「力P5」と字で書くと読み取るのに一拍かかるので、
 * 数字を枠で囲んで大きく出し、何の数かは小さな一文字だけ添える。
 */
.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

.stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 1px 4px;
  border: 1px solid var(--line-hot);
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.35);
}

.stat-label {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--void);
  background: var(--text-dim);
  padding: 0 3px;
  letter-spacing: 0;
}

.stat-value {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: #eaf6ff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(53, 224, 255, 0.5);
}

/* 副守備力は控えめに。主の数値と取り違えないようにするため */
.stat-sub { border-color: var(--line); }
.stat-sub .stat-label { background: var(--text-faint); }
.stat-sub .stat-value { font-size: 13px; color: var(--text-dim); text-shadow: none; }

/* サポート札で上がっている数値。上がったあとの数を大きく、元の数を小さく添える */
.stat-boosted {
  border-color: var(--lime);
  background: rgba(107, 255, 158, 0.12);
  box-shadow: 0 0 12px rgba(107, 255, 158, 0.3);
}
.stat-boosted .stat-label { background: var(--lime); color: var(--void); }
.stat-boosted .stat-value { color: #d5ffe6; text-shadow: 0 0 12px rgba(107, 255, 158, 0.8); }
.stat-base {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  /* 元の数だと分かるように、はっきり消し線を引く */
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--magenta);
}

.stat-text { color: var(--text-dim); }
.stat-result { color: var(--magenta); font-weight: 700; }

/* 狭いところ（手札・一覧の行）では枠を一回り小さく */
.stats-compact { gap: 4px; font-size: 11px; }
.stats-compact .stat { padding: 0 5px 0 3px; }
.stats-compact .stat-value { font-size: 14px; }
.stats-compact .stat-sub .stat-value { font-size: 12px; }

/* レア度は数ではなく星を並べる */
.stars { color: var(--amber); letter-spacing: 0.06em; text-shadow: 0 0 8px rgba(255, 179, 71, 0.5); }
/* 「必殺」などの但し書き */
.card .marks {
  display: inline-block;
  margin-top: 5px;
  padding: 0 7px;
  border-radius: 1px;
  background: var(--magenta);
  color: var(--void);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.card .blocked { display: block; margin-top: 4px; font-size: 11px; color: var(--magenta); }


/* 札の絵 */
.art {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.4);
}
.art-small { width: 30px; border: 0; background: none; vertical-align: middle; }

/*
 * 種別の塗り分け。
 * 上端の帯を種別の色で光らせ、面はその色をごく薄く敷く。
 */
.card.attack { background: linear-gradient(180deg, var(--attack-face), transparent 60%), var(--panel); }
.card.attack::before { background: var(--attack); box-shadow: 0 0 10px var(--attack); }
.card.defense { background: linear-gradient(180deg, var(--defense-face), transparent 60%), var(--panel); }
.card.defense::before { background: var(--defense); box-shadow: 0 0 10px var(--defense); }
.card.support { background: linear-gradient(180deg, var(--support-face), transparent 60%), var(--panel); }
.card.support::before { background: var(--support); box-shadow: 0 0 10px var(--support); }
.card.both { background: linear-gradient(180deg, var(--both-face), transparent 60%), var(--panel); }
.card.both::before { background: var(--both); box-shadow: 0 0 10px var(--both); }

/*
 * 必殺札の印。
 * 右肩に「必」の札紐を掛け、枠をわずかに紫で光らせる。
 * 種別の帯（::before）はそのまま生かし、::after だけを使う。
 */
.card.hissatsu {
  border-color: color-mix(in srgb, var(--violet) 45%, var(--line-hot));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45), 0 0 12px -6px var(--violet);
}
.card.hissatsu::after,
.card-row.hissatsu::after,
.card-detail.hissatsu::after {
  content: '必';
  position: absolute;
  top: 2px;
  right: 0;
  padding: 1px 6px 2px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  background: var(--violet);
  color: var(--void);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
  pointer-events: none;
}
.card-row.hissatsu { position: relative; border-color: color-mix(in srgb, var(--violet) 40%, var(--line)); }
.card-detail.hissatsu { position: relative; }
.card-detail.hissatsu::after { top: 0; font-size: 12px; padding: 2px 8px 3px; }

.actions { display: flex; gap: 8px; margin-top: 14px; }

/* ── 実況（端末の出力） ───────────────────────────────── */

.log {
  padding: 12px 14px;
  max-height: 250px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-dim);
  background:
    repeating-linear-gradient(0deg, rgba(53, 224, 255, 0.022) 0 1px, transparent 1px 3px),
    var(--void);
}

/* 行頭に合図を付けて、端末の出力に見せる */
.log div {
  position: relative;
  padding-left: 15px;
  animation: appear 0.3s ease-out;
}
.log div::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--line-hot);
}
/* 増えた行は左から流れ込み、一瞬だけ照らされる */
.log .fresh { animation: log-in 0.3s ease-out backwards; }

@keyframes log-in {
  0% { opacity: 0; transform: translateX(-8px); background: rgba(53, 224, 255, 0.14); }
  60% { opacity: 1; transform: translateX(0); }
  100% { background: transparent; }
}

.log .out { color: var(--cyan); }
.log .out::before { color: var(--cyan); }
.log .hit { color: var(--magenta); }
.log .hit::before { color: var(--magenta); }
.log .support { color: var(--lime); }
.log .support::before { color: var(--lime); }
.log .end {
  color: #eaf6ff;
  font-weight: 700;
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 6px;
}

/* ── 幕（相手の札の確認・札の詳細） ───────────────────── */

.curtain {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 5, 10, 0.86);
  z-index: 10;
  animation: fade 0.22s ease-out;
}
.curtain[hidden] { display: none; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.reveal-box, .detail-box {
  position: relative;
  width: min(430px, 100%);
  padding: 18px 20px;
  border: 1px solid var(--cyan-dim);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--panel), var(--deep));
  box-shadow: 0 0 40px rgba(53, 224, 255, 0.18), inset 0 0 30px rgba(0, 0, 0, 0.6);
  animation: rise 0.28s ease-out;
}

@keyframes rise {
  0% { opacity: 0; transform: translateY(18px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal-title {
  font-family: var(--jp-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--void);
  background: var(--cyan);
  border-radius: 1px;
  padding: 5px 10px;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
  text-align: center;
}
/* 裏から表へめくる。相手が札を切った、という間を作る */
.flip { position: relative; transform-style: preserve-3d; }
.flip-back, .flip-front { backface-visibility: hidden; }

.flip-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan-dim);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(53, 224, 255, 0.16) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(53, 224, 255, 0.1) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #14243c, #0a1120);
  color: var(--cyan);
  font-family: var(--jp-display);
  font-size: 30px;
  font-weight: 900;
  text-shadow: 0 0 16px rgba(53, 224, 255, 0.8);
  animation: flip-back 0.42s ease-in forwards;
}
.flip-front { animation: flip-front 0.42s ease-out backwards; }

@keyframes flip-back {
  0% { transform: rotateY(0); opacity: 1; }
  49% { opacity: 1; }
  50%, 100% { transform: rotateY(90deg); opacity: 0; }
}
@keyframes flip-front {
  0%, 50% { transform: rotateY(-90deg); opacity: 0; }
  51% { opacity: 1; }
  100% { transform: rotateY(0); opacity: 1; }
}

.reveal-note {
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid var(--magenta-dim);
  border-radius: 2px;
  background: rgba(255, 61, 139, 0.1);
  color: #ffc6dd;
  font-size: 13px;
  text-align: center;
}

/* サイコロ（面に「先」「後」とだけ書かれた1個を振る） */
.dice-roll { display: grid; justify-items: center; gap: 14px; }
.dice-role {
  font-family: var(--jp-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.24em;
  animation: dice-settle 0.4s ease-out 1.05s backwards;
}
.dice-face {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan);
  border-radius: 2px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: linear-gradient(160deg, rgba(53, 224, 255, 0.2), rgba(53, 224, 255, 0.05));
  color: #eaf6ff;
  font-family: var(--jp-display);
  font-size: 42px;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(53, 224, 255, 0.9);
  box-shadow: 0 0 30px rgba(53, 224, 255, 0.3), inset 0 0 20px rgba(53, 224, 255, 0.12);
  animation: dice-tumble 1.1s cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
}

/* 転がっている間は面が入れ替わり続ける（app.js が字を差し替える） */
.dice-face.rolling { filter: blur(0.6px); }

/* 転がって、跳ねて、止まる */
@keyframes dice-tumble {
  0% { transform: translateY(-70px) rotate(-540deg) scale(0.5); opacity: 0; }
  35% { transform: translateY(0) rotate(-140deg) scale(1.1); opacity: 1; }
  55% { transform: translateY(-22px) rotate(-40deg) scale(0.96); }
  75% { transform: translateY(0) rotate(14deg) scale(1.06); }
  90% { transform: translateY(-6px) rotate(-4deg) scale(1); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

@keyframes dice-settle {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
.reveal-box .primary { width: 100%; margin-top: 16px; padding: 11px; font-size: 15px; }

.card-detail {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px 14px;
  background: var(--void);
}

.card-detail .art { margin-bottom: 8px; max-width: 210px; }
.card-detail h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: 0.1em; color: #eaf6ff; }
.card-detail .line { font-size: 13px; color: var(--cyan); margin-bottom: 4px; }
.card-detail ul { margin: 8px 0 0; padding-left: 1.1em; font-size: 13px; }
.card-detail li { margin-bottom: 4px; }
.card-detail li { color: var(--text); font-weight: 500; }
.card-detail .traits li { color: var(--magenta); }
.card-detail .conds li { color: var(--amber); }
.detail-box .close { width: 100%; margin-top: 14px; }

/* ── デッキ編集画面 ───────────────────────────────────── */

.editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 18px 20px 28px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.filters label { display: flex; gap: 5px; align-items: center; font-size: 13px; color: var(--text-dim); }
.filters input[type="search"] { flex: 1 1 160px; }

.hint { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }

.card-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 68vh;
  overflow-y: auto;
  padding: 6px;
}

.card-row {
  display: grid;
  grid-template-columns: 34px minmax(96px, 1fr) minmax(0, 2fr) 48px 36px;
  gap: 8px;
  align-items: center;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 1px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.card-row:hover { border-color: var(--cyan-dim); background: rgba(53, 224, 255, 0.07); }
.card-row .row-mark { display: flex; align-items: center; color: var(--text-dim); font-size: 11px; }
.card-row .row-meta { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 11px; overflow: hidden; }
.card-row .row-meta em { color: var(--magenta); font-style: normal; white-space: nowrap; }
.card-row .row-name { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
.card-row .row-name .stars { font-size: 10px; }
.card-row .row-count { text-align: right; color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
/* 行の右端の丸ボタン。＋は足す（シアン）・−は抜く（マゼンタ） */
.card-row .row-act {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--cyan-dim);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(53, 224, 255, 0.08);
}
.card-row .row-act-remove {
  border-color: rgba(255, 61, 139, 0.55);
  color: var(--magenta);
  background: rgba(255, 61, 139, 0.08);
}

/* 知らせのトースト。帯の上に浮かんで、ひと呼吸で消える */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(480px, calc(100vw - 32px));
  padding: 11px 18px;
  border: 1px solid var(--lime, #7dff9a);
  border-radius: 3px;
  background: rgba(8, 20, 14, 0.95);
  color: #d7ffe4;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 0 18px rgba(125, 255, 154, 0.35);
  animation: toast-in 0.22s ease-out;
  pointer-events: none;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (min-width: 881px) {
  .toast { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 14px); }
}

/* 「落とす札選び」：自分の場が押せる印に光り、手札は触れない */
body.field-picking #field-mine .field-chip:not(.empty) {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  box-shadow: 0 0 16px rgba(255, 179, 71, 0.5);
}
body.field-picking #hand .card,
body.field-picking .actions #end-attack {
  pointer-events: none;
  opacity: 0.45;
}
.card-row.attack { border-left: 3px solid var(--attack); }
.card-row.defense { border-left: 3px solid var(--defense); }
.card-row.support { border-left: 3px solid var(--support); }
.card-row.both { border-left: 3px solid var(--both); }

.summary {
  padding: 11px 14px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: rgba(53, 224, 255, 0.07);
  border-color: var(--cyan-dim);
}

.errors { margin-bottom: 8px; font-size: 12px; line-height: 1.7; color: var(--magenta); min-height: 20px; }

/* 保存に失敗した知らせ。見逃すとデッキを失うので、消さずに目立たせる */
.flash-error {
  padding: 7px 10px;
  border: 1px solid var(--magenta);
  border-radius: 2px;
  background: rgba(255, 61, 139, 0.14);
  color: #ffc6dd;
  font-weight: 700;
}

/* 自動保存の様子。触れば勝手に残るので、状態だけ小さく出す */
.save-state { font-size: 12px; color: var(--text-dim); letter-spacing: 0.08em; }
.save-state.unsaved { color: var(--amber); }

/* 入力欄の下に出す、その場のエラー（文字数オーバーなど） */
.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--amber);
}

/* 設定のヘルプ入り口はPCだけ。スマホの帯にはヘルプの項目がある。
   .mode-card の display 指定（後方）に負けないよう、二重の指定で上書きする */
@media (max-width: 880px) {
  .mode-card.help-entry { display: none; }
}

/* ヘルプ「あそびかた」の図解 */
.howto-fig { margin: 12px 0 4px; }
.howto-fig svg { display: block; width: 100%; max-width: 430px; height: auto; }
.howto-fig figcaption { margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.errors.ok { color: var(--text-dim); }
.errors .flash-line { color: var(--text); }

/* ── 狭い画面 ─────────────────────────────────────────── */

@media (max-width: 880px) {
  main { grid-template-columns: 1fr; grid-template-areas: "board" "panel" "log"; }
  .editor { grid-template-columns: 1fr; }
  .card-rows { max-height: 42vh; }
}

/*
 * 手のひらの中。
 *
 * 指で触ることが前提になるので、
 *   ・浮き上がる装飾（hover）はやめる（触ったまま残ってしまう）
 *   ・押すところは指の腹くらいの大きさにする
 *   ・札は画面幅に合わせて並べ、横スクロールを起こさない
 *   ・よく押すボタンは下端に貼り付けて、親指の届く場所に置く
 * ようにしている。
 */
@media (max-width: 700px) {
  body { font-size: 15px; }

  /* 設定は畳んでおき、見出しを押して開く */
  .topbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 12px; }
  .brand { justify-content: center; font-size: 19px; letter-spacing: 0.28em; }
  .setup-fold > summary {
    display: block;
    padding: 9px 12px;
    border: 1px solid var(--line-hot);
    border-radius: 2px;
    background: rgba(53, 224, 255, 0.06);
    color: var(--cyan);
    font-size: 13px;
    letter-spacing: 0.24em;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .setup-fold[open] > summary { margin-bottom: 8px; }
  .topbar .setup { flex-direction: row; justify-content: center; gap: 8px; }
  .topbar .setup button { flex: 1; text-align: center; padding: 10px; }
  /* モード選択の中の入力は縦に積む */
  .mode-settings label { justify-content: space-between; }
  .mode-settings select,
  .mode-settings input[type='text'] { flex: 1; min-width: 0; }

  /*
   * 縦持ちの並び替え。
   * 遊びの輪（相手の様子 → 場 → 指示 → 手札 → ボタン）をひとまとまりに置き、
   * 野球場・回ごとの得点・枚数などの控えは下へ送る。
   * こうしないと、場を見る→手札を選ぶ、のたびに上下へ往復させられる。
   */
  main { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 16px; }
  main .board, main .panel { display: contents; }
  .scoreflip { order: 1; margin: 0; }
  .their-hand { order: 2; margin: 0; }
  .duel { order: 3; margin: 0; }
  .prompt { order: 4; margin: 0; }
  .pending-card { order: 5; margin: 0; }
  /* 説明の箱は手札の直前。order を忘れると先頭（order 0）に飛んでしまう */
  #lesson { order: 5; }
  .hand { order: 6; }
  .actions { order: 7; }
  .counts { order: 10; }
  .fields { order: 11; margin: 0; }
  .log { order: 12; }

  /* 盤面を詰めて、手札が画面に入るようにする */
  .scoreboard { padding: 9px 10px; }
  .team { min-width: 0; }
  .run { font-size: 32px; }
  .inning { font-size: 15px; }
  .duel-power { min-width: 30px; font-size: 17px; right: -4px; bottom: -6px; padding: 1px 6px 2px; }
  .flash-mark { min-width: 120px; padding: 8px 16px; font-size: 20px; }
  .flash-runs { font-size: 15px; }
  /* スマホでは自分の場・相手の場を縦に積み、札は横に並べる（縦に伸びすぎないように） */
  .fields { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
  .field-cards { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .field-chip { flex: 0 0 auto; width: 84px; padding: 6px 6px 7px; }
  .field-chip .art { max-height: 38px; }
  .field-chip .field-name { font-size: 11px; }
  .field-chip.empty { min-height: 84px; width: 84px; }

  /* 手札は画面幅で割り付ける。横にはみ出させない */
  .hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
  .card { width: auto; padding: 7px; }
  .card .name { font-size: 13px; min-height: 2.5em; }
  .card .stats { font-size: 10px; gap: 4px; }
  .card .stat-value { font-size: 13px; }

  /* よく押すボタンは下端に貼り付ける */
  .actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    gap: 6px;
    margin: 10px -10px -10px;
    padding: 9px 10px;
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.75), var(--deep) 45%);
    border-top: 1px solid var(--line-hot);
  }
  .actions button { flex: 1; padding: 12px 8px; }

  .log { max-height: 160px; padding: 10px; }

  /* 幕は画面いっぱいに近づけ、押しやすくする */
  .curtain { padding: 12px; }
  .reveal-box, .detail-box { padding: 14px; max-height: 88vh; overflow-y: auto; }
  .reveal-box .primary { padding: 13px; }
  .dice-face { width: 76px; height: 76px; font-size: 36px; }

  /* デッキ編集 */
  .card-rows { max-height: 46vh; }
  .card-row { grid-template-columns: 30px minmax(72px, 1fr) 42px 40px; row-gap: 2px; padding: 9px; }
  .card-row .row-meta { grid-column: 2 / 4; white-space: normal; }
  /* 指で押す丸は大きめに。2行ぶんの右端に据える */
  .card-row .row-act { width: 40px; height: 40px; font-size: 20px; grid-column: 4; grid-row: 1 / 3; align-self: center; }
  .card-row .row-count { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}

/* 指で触る画面では、浮き上がる装飾を出さない（触れたまま残ってしまうため） */
@media (hover: none) {
  .card:not(:disabled):hover {
    transform: none;
    border-color: var(--line-hot);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45);
  }
  .field-chip:hover { box-shadow: none; }
  .card-row:hover { border-color: transparent; background: transparent; }
  button:hover, .link-button:hover { border-color: var(--line-hot); color: var(--text); box-shadow: none; }
  .primary:hover {
    border-color: var(--magenta);
    color: #ffd7e6;
    box-shadow: 0 0 14px rgba(255, 61, 139, 0.28), inset 0 0 12px rgba(255, 61, 139, 0.14);
  }
}

/* iOS は文字が小さい入力欄に触れると勝手に拡大するので、それを避ける大きさにする */
@media (max-width: 700px) and (pointer: coarse) {
  select, input { font-size: 16px; }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── チュートリアルの説明 ─────────────────────────────── */

#lesson .guide { margin-bottom: 12px; }

.guide {
  padding: 14px 16px 8px;
  border: 1px solid var(--cyan-dim);
  border-left: 3px solid var(--cyan);
  border-radius: 2px;
  background: rgba(53, 224, 255, 0.06);
  max-width: 560px;
  animation: deal 0.3s ease-out backwards;
}
/* 会話の送り。箱のどこを押しても進み、右下で ▼ が瞬いて誘う */
.guide-tap { cursor: pointer; }
.guide-adv {
  display: block;
  margin-left: auto;
  padding: 2px 6px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--cyan);
  font-size: 14px;
  line-height: 1;
  animation: adv-blink 1.15s ease-in-out infinite;
}
.guide-adv:hover { border: 0; background: none; box-shadow: none; }
@keyframes adv-blink {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.3; transform: translateY(3px); }
}
.guide-title {
  margin-bottom: 8px;
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(53, 224, 255, 0.5);
}
.guide p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.9; color: var(--text); }
.guide .primary { margin-top: 6px; padding: 8px 26px; }

/* ── ストーリー ───────────────────────────────────────── */

.story-outcome {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--amber);
  border-radius: 2px;
  background: rgba(255, 179, 71, 0.08);
  font-size: 14px;
  font-weight: 700;
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  gap: 16px;
  padding: 18px 20px 28px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.story-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  padding: 11px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--cyan-dim);
  border-radius: 2px;
  background: rgba(53, 224, 255, 0.07);
  font-family: var(--mono);
  font-size: 13px;
}
.story-status .story-chapter {
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--cyan);
}
.story-status .story-note { flex-basis: 100%; font-family: var(--jp); font-size: 12px; color: var(--text-dim); }

.story-stage { display: flex; flex-direction: column; gap: 14px; }

.story-block {
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel);
}
.story-block h2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.story-block h2 .story-here { color: var(--cyan); letter-spacing: 0.06em; }

.story-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.story-row:last-child { border-bottom: 0; }
.story-row .story-row-name { font-weight: 700; min-width: 9em; }
.story-row .story-row-meta { color: var(--text-dim); font-size: 12px; flex: 1; }
.story-row button, .story-row .link-button { padding: 5px 14px; font-size: 12px; }

.story-intro { max-width: 620px; }
.story-intro p { margin: 0 0 10px; font-size: 14px; line-height: 2; }

.story-cleared {
  padding: 20px;
  border: 1px solid var(--amber);
  background: rgba(255, 179, 71, 0.08);
  font-size: 15px;
  line-height: 2;
}
.story-cleared .guide-title { color: var(--amber); text-shadow: 0 0 12px rgba(255, 179, 71, 0.5); }

.story-side { display: flex; flex-direction: column; gap: 14px; }
.story-side .log { max-height: 300px; }

/* 章の導入と場所の描写。地の文なので、控えめに斜めの光を落とす */
.story-flavor {
  border-left: 3px solid var(--cyan);
  font-size: 13.5px;
  line-height: 2;
  color: var(--text);
}
.story-desc { margin: -4px 0 10px; font-size: 12.5px; line-height: 1.9; color: var(--text-dim); }
.story-done {
  display: inline-block;
  padding: 0 6px;
  border-radius: 1px;
  background: var(--lime);
  color: var(--void);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 2px;
}
.story-regions { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.story-region { color: var(--text-dim); }
.story-region.done { color: var(--lime); }

/* ── ガチャの結果 ─────────────────────────────────────── */

.gacha-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

/* 裏から表へ、1枚ずつめくれて出てくる */
.gacha-card {
  width: 118px;
  animation: gacha-flip 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

@keyframes gacha-flip {
  0% { opacity: 0; transform: rotateY(90deg) scale(0.8); }
  60% { opacity: 1; transform: rotateY(-12deg) scale(1.04); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}

.gacha-card .gacha-star {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--amber);
}

/* 星4以上の当たりは、めくれてから琥珀色に輝く */
.gacha-card.gacha-rare {
  border-color: var(--amber);
  /* めくれとの時間差は、行内の animation-delay（1枚ごとのずらし）が両方に効く */
  animation:
    gacha-flip 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards,
    gacha-shine 1.2s ease-out backwards;
}

@keyframes gacha-shine {
  0% { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45); }
  40% { box-shadow: inset 0 0 16px rgba(255, 179, 71, 0.35), 0 0 34px rgba(255, 179, 71, 0.9); }
  100% { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45), 0 0 14px -4px var(--amber); }
}

/* ── ガチャのめくり（独立ガチャ） ──────────────────────
   裏向きで配られ、1枚ずつ表を向く。裏を押せばその場でめくれる */
.gacha-flip3 {
  perspective: 620px;
  cursor: pointer;
  animation: deal 0.3s ease-out backwards;
}
.gacha-turn {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.4, 1);
}
.gacha-flip3.open .gacha-turn { transform: rotateY(180deg); }
/* 表。めくれるまでは裏の後ろ。hover の持ち上がりで向きが崩れないよう固定 */
.gacha-flip3 .gacha-card,
.gacha-flip3 .gacha-card:hover {
  animation: none;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
/* 裏。手札の裏と同じ方眼の意匠を一回り大きく */
.gacha-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  border: 1px solid var(--cyan-dim);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(53, 224, 255, 0.22) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(53, 224, 255, 0.14) 0 1px, transparent 1px 8px),
    var(--deep);
  color: var(--cyan-dim);
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 22px;
}
/* 輝きはめくれてから（裏向きの間に光り終わってしまわないように） */
.gacha-flip3 .gacha-card.gacha-rare { animation: none; }
.gacha-flip3.open .gacha-card.gacha-rare { animation: gacha-shine 1.2s ease-out backwards; }
/* ★5。配られた時点から裏が金色に脈打ち、めくる前から胸を騒がせる */
.gacha-flip3.jackpot .gacha-back {
  border-color: var(--amber);
  color: var(--amber);
  animation: jackpot-throb 0.8s ease-in-out infinite alternate;
}
@keyframes jackpot-throb {
  from { box-shadow: 0 0 8px -2px var(--amber); }
  to { box-shadow: 0 0 26px 2px var(--amber); }
}
.gacha-flip3.jackpot.open .gacha-card {
  border-color: var(--amber);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45), 0 0 22px -2px var(--amber);
}

.story-deck-summary { margin-bottom: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.story-deck .card-rows { max-height: 44vh; }
/* 右端は−＋と枚数が乗るので、決め打ちの幅ではなく中身に合わせる */
.story-deck .card-row { grid-template-columns: 34px minmax(80px, 1.3fr) minmax(0, 1fr) auto; }
.story-count { display: inline-flex; gap: 4px; align-items: center; font-family: var(--mono); font-size: 12px; }
.story-count button { padding: 2px 9px; font-size: 13px; line-height: 1.3; }

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; }
}

/* ── モード選択（ホーム） ─────────────────────────────── */

/*
 * モード選択と試合画面は、どちらか一方だけを出す。
 * 対戦画面（page-play）だけの決まり。素の main に掛けると、
 * デッキ編集やストーリーの画面まで巻き添えで消えてしまう（一度やった）
 */
body.page-play:not(.in-game) main { display: none; }
body.page-play.in-game .home { display: none; }

.home {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 20px 40px;
}

/* 設定・プライバシーは main に .home を使う。main には対戦画面用の
   2カラムの敷き方が掛かっているので、素の縦積みに戻す（図鑑の .zukan と同じ理由）。
   これが無いと、中身が盤面カラム（約4割の幅）に押し込められてしまう */
main.home { display: block; }

.home .resume { display: block; margin: 0 auto 18px; padding: 10px 34px; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  align-items: start;
}

.mode-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(53, 224, 255, 0.05), transparent 40%), var(--panel);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.mode-card:hover { border-color: var(--line-hot); box-shadow: 0 0 18px -8px var(--cyan); }
.mode-card h3 {
  margin: 0;
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.12em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(53, 224, 255, 0.4);
}
.mode-card p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--text-dim); }
.mode-card .primary, .mode-card > .link-button { align-self: flex-start; padding: 8px 26px; }

/* ── アプリらしい操作部品：切り替え（セグメント）とスイッチ ── */

/* 幕の右上の × 。「閉じる」と字で書かない */
.x-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-hot);
  border-radius: 50%;
  background: var(--deep);
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
  z-index: 2;
}
.x-close:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px -3px var(--cyan); }

.seg {
  display: inline-flex;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.seg button {
  flex: 1;
  padding: 8px 6px;
  border: 0;
  border-radius: 0;
  background: var(--deep);
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
  box-shadow: none;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on {
  background: var(--cyan);
  color: var(--void);
  font-weight: 700;
}

.switch { position: relative; display: inline-flex; margin-left: auto; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch-face {
  display: block;
  width: 46px;
  height: 24px;
  position: relative;
  border: 1px solid var(--line-hot);
  border-radius: 13px;
  background: var(--deep);
  transition: background 0.15s, border-color 0.15s;
}
.switch-face::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: left 0.15s ease, background 0.15s;
}
.switch input:checked + .switch-face { background: rgba(53, 224, 255, 0.22); border-color: var(--cyan); }
.switch input:checked + .switch-face::after {
  left: 24px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(53, 224, 255, 0.8);
}

/* 帯の「CPU対戦」「オンライン対戦」から入ったときは、そのカードだけを見せる。
   ホームの顔では対戦カードは出さない（帯に専用の入り口があるため） */
body.only-cpu .mode-card:not(.card-cpu),
body.only-online .mode-card:not(.card-online) { display: none; }
body.face-home .card-cpu,
body.face-home .card-online { display: none; }

/* 取りこぼした例外の控えめな知らせ（offline.js） */
.error-note {
  position: fixed;
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  z-index: 45;
  width: min(420px, calc(100vw - 28px));
  padding: 12px 44px 12px 14px;
  border: 1px solid var(--amber);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--panel), var(--deep));
  color: #ffe9c9;
  font-size: 12px;
  line-height: 1.8;
  box-shadow: 0 0 24px -8px var(--amber), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.error-note .x-close { top: 6px; right: 6px; width: 28px; height: 28px; font-size: 14px; }

/* 上から降りてきて自動で消える知らせ（マッチ成立など） */
.toast {
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 40;
  padding: 12px 26px;
  border: 1px solid var(--cyan);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--panel), var(--deep));
  color: var(--cyan);
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.14em;
  box-shadow: 0 0 24px -6px var(--cyan), 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.3s ease-out;
  transition: opacity 0.4s;
}
.toast.fade { opacity: 0; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 導入で読むポリシーの箱。条文をそのまま流し込む */
.welcome-policy {
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--deep);
  font-size: 12px;
}
.welcome-policy h3 { margin: 14px 0 4px; font-size: 13px; color: var(--cyan); }
.welcome-policy p, .welcome-policy ol { margin: 4px 0; line-height: 1.9; color: var(--text); }
.welcome-policy ol { padding-left: 26px; }

/* ── ホームの案内（チュートリアルの続き） ─────────────── */

.tour {
  position: fixed;
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  z-index: 31;
  width: min(420px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--cyan);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--panel), var(--deep));
  box-shadow: 0 0 30px -8px var(--cyan), 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: rise 0.28s ease-out;
}
.tour-text { margin: 0; flex: 1; font-size: 12.5px; line-height: 1.8; }
.tour-next { flex: 0 0 auto; padding: 8px 16px; font-size: 12px; white-space: nowrap; }

.tour-spot {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(53, 224, 255, 0.5);
}
@media (min-width: 881px) {
  .tour { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px); }
}

/* ── 「つぎへ」の共通ボタン ───────────────────────────────
   字の「→」の代わり。カプセル型に、流れる二枚の山括弧で進む向きを見せる */
.next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 22px;
  border-radius: 999px;
}
.next-btn .next-icon { width: 24px; height: 24px; display: block; }
.next-btn .chev { animation: chev-flow 1.5s ease-in-out infinite; }
.next-btn .chev2 { animation-delay: 0.22s; }
@keyframes chev-flow {
  0%, 100% { opacity: 0.3; transform: translateX(0); }
  40% { opacity: 1; transform: translateX(2.5px); }
  70% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .next-btn .chev { animation: none; }
}

/* ── プレゼントボックス ───────────────────────────────── */

/* ホームに常設する受け口。届いていないときは「いまは届いていません」の一行 */
.gift-home {
  max-width: 560px;
  margin: 0 auto 14px;
  border-color: var(--amber);
  box-shadow: 0 0 18px -9px var(--amber);
}
.gift-home h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 179, 71, 0.4);
}
.gift-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
  background: var(--amber);
  color: var(--void);
}
.gift-mark svg { width: 15px; height: 15px; }
.gift-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; }
.gift-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--amber);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 179, 71, 0.1), var(--deep) 55%);
  text-align: left;
  font-size: 13px;
  transition: transform 0.5s ease-in, opacity 0.5s ease-in;
}
/* 贈り物の箱の印。行の左に置く */
.gift-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
  background: linear-gradient(180deg, var(--amber), #d98a1f);
  color: var(--void);
}
.gift-chip svg { width: 20px; height: 20px; }
.gift-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gift-when { color: var(--text-dim); font-size: 11px; }
/* 受け取り額のピル。押せば入ることが分かる形に */
.gift-claim {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--void);
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(255, 179, 71, 0.45);
}
/* 受け取った行は、ふわっと浮いて右上へ飛んで消える */
.gift-row.gift-fly {
  transform: translate(58px, -46px) rotate(6deg) scale(0.72);
  opacity: 0;
  pointer-events: none;
}
.gift-claim-all { margin-top: 2px; }
.gift-empty { margin: 0; color: var(--text-dim); font-size: 13px; }

/* ── 運営からのお知らせ ───────────────────────────────── */

.news-home {
  max-width: 560px;
  margin: 0 auto 14px;
}
.news-home h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
}
.news-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
  background: var(--cyan);
  color: var(--void);
}
.news-mark svg { width: 15px; height: 15px; }
.news-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 2px; }
.news-row {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--deep);
}
/* 見出しの行。ボタンだが、枠は外側の .news-row に任せて素の顔にする */
.news-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  font-size: 13px;
}
.news-head:hover { box-shadow: none; border: 0; }
.news-date { flex: none; color: var(--text-dim); font-family: var(--mono); font-size: 11px; }
.news-title { flex: 1; min-width: 0; }
.news-new {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.news-arrow { flex: none; color: var(--text-dim); font-size: 11px; transition: transform 0.2s; }
.news-row.open .news-arrow { transform: rotate(180deg); }
.news-body {
  margin: 0;
  padding: 0 12px 10px 44px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.75;
}

/* ── スタミナと動画リワード ───────────────────────────── */

.stamina-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
}
.stamina-pips { display: inline-flex; align-items: center; gap: 2px; }
.stamina-pip {
  font-style: normal;
  font-size: 15px;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 179, 71, 0.6);
}
.stamina-pip.off { color: var(--text-dim); text-shadow: none; opacity: 0.4; }
.stamina-count { margin-left: 4px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.stamina-note { font-size: 12px; color: var(--text-dim); }

/* 動画リワードのボタン。広告のごほうびは琥珀で光らせる */
.ad-button {
  border-color: var(--amber);
  color: var(--amber);
  background: linear-gradient(180deg, rgba(255, 179, 71, 0.18), rgba(255, 179, 71, 0.06));
  box-shadow: 0 0 12px rgba(255, 179, 71, 0.25), inset 0 0 10px rgba(255, 179, 71, 0.1);
}
.ad-button:hover {
  border-color: var(--amber);
  color: #ffe2b0;
  box-shadow: 0 0 18px rgba(255, 179, 71, 0.45), inset 0 0 12px rgba(255, 179, 71, 0.16);
}

/* ── ガチャの筐体とカプセル演出 ───────────────────────── */

/* カプセルの詰まったドーム（CSSだけの絵） */
.gacha-dome {
  position: relative;
  width: min(260px, 82%);
  height: 96px;
  margin: 6px auto 14px;
  border: 1px solid var(--line-hot);
  border-radius: 130px 130px 10px 10px;
  background:
    radial-gradient(circle at 33% 36%, #ff77ac 0 11px, transparent 12px),
    radial-gradient(circle at 55% 30%, #35e0ff 0 11px, transparent 12px),
    radial-gradient(circle at 72% 44%, #b48cff 0 10px, transparent 11px),
    radial-gradient(circle at 20% 66%, #ffb347 0 12px, transparent 13px),
    radial-gradient(circle at 40% 78%, #35e0ff 0 11px, transparent 12px),
    radial-gradient(circle at 58% 64%, #ff3d8b 0 12px, transparent 13px),
    radial-gradient(circle at 76% 78%, #9fff8a 0 10px, transparent 11px),
    radial-gradient(circle at 88% 60%, #ffb347 0 9px, transparent 10px),
    linear-gradient(180deg, rgba(53, 224, 255, 0.14), rgba(9, 14, 26, 0.9));
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55), 0 0 18px -8px var(--cyan);
}
/* ガラスの照り */
.gacha-dome::after {
  content: '';
  position: absolute;
  left: 12%;
  top: 10%;
  width: 32%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.16), transparent 70%);
}
.gacha-machine .online-actions { justify-content: center; }

/* 結果の幕：カプセルが落ちてきて、割れて札が出る */
.capsule-stage { position: relative; height: 112px; margin: 2px 0 6px; overflow: hidden; transition: height 0.25s ease-in; }
.capsule {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  animation: cap-drop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}
.capsule::before,
.capsule::after {
  content: '';
  position: absolute;
  left: 0;
  width: 64px;
  height: 32px;
}
.capsule::before { top: 0; border-radius: 32px 32px 0 0; background: linear-gradient(180deg, #ff9cc4, var(--magenta)); }
.capsule::after { bottom: 0; border-radius: 0 0 32px 32px; background: linear-gradient(180deg, #9ddcf2, #2f8fbf); }
.capsule.gold::before { background: linear-gradient(180deg, #ffe9a8, var(--amber)); box-shadow: 0 0 18px rgba(255, 179, 71, 0.7); }
.capsule.pop::before { animation: cap-top 0.32s ease-out forwards; }
.capsule.pop::after { animation: cap-bottom 0.32s ease-out forwards; }
@keyframes cap-drop {
  0% { transform: translateY(-130px); }
  70% { transform: translateY(40px); }
  85% { transform: translateY(30px); }
  100% { transform: translateY(36px); }
}
@keyframes cap-top { to { transform: translate(-16px, -42px) rotate(-24deg); opacity: 0; } }
@keyframes cap-bottom { to { transform: translate(16px, 26px) rotate(18deg); opacity: 0; } }
.cap-flash { position: absolute; left: 50%; top: 66px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; opacity: 0; }
.capsule-stage.pop .cap-flash { animation: cap-flash 0.55s ease-out; }
@keyframes cap-flash {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
  100% { opacity: 0; box-shadow: 0 0 70px 46px rgba(53, 224, 255, 0); }
}

/* まとめ回しの順送り：1枚を大きく見せて、押すと次へ */
.gacha-count {
  margin: 4px 0 2px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}
.gacha-one {
  display: grid;
  place-items: center;
  min-height: 250px;
  cursor: pointer;
}
.gacha-one .gacha-flip3 { transform: scale(1.35); }
.gacha-one-hint { text-align: center; }

/* ── 日替わりショップ（ガチャ画面） ───────────────────── */

.shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.shop-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--deep);
  text-align: left;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.shop-item:not(:disabled):hover { border-color: var(--cyan); box-shadow: 0 0 12px -6px var(--cyan); }
.shop-item .art { width: 100%; height: auto; }
.shop-item b { font-size: 11.5px; letter-spacing: 0.04em; line-height: 1.5; min-height: 2.6em; }
.shop-star { color: var(--amber); font-size: 10.5px; letter-spacing: 0.06em; }
.shop-price { align-self: flex-end; font-family: var(--mono); font-size: 12px; color: var(--cyan); }
.shop-item:disabled { opacity: 0.55; }
.shop-item.shop-done .shop-price { color: var(--lime); font-size: 14px; }

.sell-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.sell-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--deep);
  text-align: left;
  font-size: 12.5px;
}
.sell-row b { flex: 1; min-width: 0; }
.sell-row span { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; }
.sell-row .sell-price { color: var(--amber); font-family: var(--mono); font-size: 12.5px; }

/* ── 実績（ガチャ画面） ───────────────────────────────── */

.achieve-head {
  margin: 14px 0 6px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.achieve-list { display: flex; flex-direction: column; gap: 6px; }
.achieve-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--deep);
}
button.achieve-row { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.achieve-row.achieve-ready {
  border-color: var(--amber);
  box-shadow: 0 0 14px -6px var(--amber);
  transition: box-shadow 0.14s, transform 0.1s;
}
.achieve-row.achieve-ready:active { transform: scale(0.99); }
.achieve-row.achieve-done { opacity: 0.55; }
.achieve-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.achieve-text b { font-size: 13.5px; letter-spacing: 0.08em; }
.achieve-text span { font-size: 11.5px; color: var(--text-dim); }
.achieve-tail { flex: 0 0 auto; }
.achieve-pill {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-dim);
}
.achieve-pill.hot {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 0 10px -4px var(--amber);
}
.achieve-claimed { font-size: 15px; color: var(--lime); }

/* 初めての人への導入。ひと張りだけ、真ん中に据える */
.welcome-card { max-width: 480px; margin: 6vh auto 0; padding: 22px 24px 24px; }
.welcome-card .welcome-note { font-size: 12px; line-height: 1.9; }
.welcome-card .primary { align-self: stretch; text-align: center; }

/* 引っ越しの案内。旧い住所で開いた人にだけ出る（moved.js が差し込む） */
.moved-note { border-color: var(--amber); }
.moved-note h3 { color: var(--amber); text-shadow: 0 0 10px rgba(255, 179, 71, 0.4); }

/* ── 広告の置き場 ─────────────────────────────────────
   設定（src/ui/ads.js）が眠っている間は hidden のまま、場所も取らない */
.ad-slot { width: 100%; max-width: 728px; margin: 12px auto 4px; padding: 0 10px; }
body.in-game .ad-slot { display: none; } /* 盤面のときは出さない */

/* ── プライバシーポリシー（条文） ─────────────────────── */
.policy {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 4px 30px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel);
}
.policy > * { padding-left: 22px; padding-right: 22px; }
.policy h3 {
  margin: 24px 0 4px;
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 14.5px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}
.policy p { margin: 6px 0; font-size: 13px; line-height: 2; color: var(--text); }
.policy ol { margin: 6px 0; padding-left: 44px; font-size: 13px; line-height: 2; color: var(--text); }
.policy-lead { margin-top: 18px; color: var(--text); }
.policy-date { margin-top: 28px; text-align: right; color: var(--text-dim); }
.mode-settings { display: flex; flex-direction: column; gap: 8px; }
.mode-settings label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); }
/* 入力欄は行の余りに合わせて縮む。size 由来の生まれつきの幅で画面からはみ出させない */
.mode-settings select,
.mode-settings input[type='text'] { flex: 1; min-width: 0; width: 100%; }

/* サーバ中継の部屋番号。電話番号のように読み上げて伝えられる大きさで */
.room-code {
  margin: 6px 0;
  padding: 12px 10px;
  border: 1px solid var(--cyan-dim);
  border-radius: 2px;
  background: rgba(53, 224, 255, 0.06);
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  text-align: center;
  color: #eaf6ff;
  text-shadow: 0 0 14px rgba(53, 224, 255, 0.6);
}
.room-input {
  width: 100%;
  padding: 10px;
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.3em;
  text-align: center;
}

/* ── オンライン対戦の手順 ─────────────────────────────── */

.online-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.online-steps { display: flex; flex-direction: column; gap: 8px; }
.online-steps:empty { display: none; }
.online-note { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--text); }
.online-code {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  background: var(--void);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  word-break: break-all;
  resize: vertical;
}

/* ── 下の行き先の帯（スマホ） ─────────────────────────── */

.appnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line-hot);
  background: linear-gradient(180deg, var(--panel), var(--deep));
  box-shadow: 0 -1px 0 rgba(53, 224, 255, 0.25), 0 -8px 28px rgba(0, 0, 0, 0.5);
  /* iPhoneの下の出っぱりを避ける */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.appnav-item {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 2px 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.appnav-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
  background: var(--raise);
}
.appnav-mark svg { width: 17px; height: 17px; display: block; }
.appnav-item.current { color: var(--cyan); }
.appnav-item.current .appnav-mark {
  background: var(--cyan);
  color: var(--void);
  box-shadow: 0 0 12px rgba(53, 224, 255, 0.6);
}

/*
 * 帯はどの広さでも出す。ガチャ・図鑑・デッキ編集・設定への入り口は
 * ここに一本化した（ホームのカードには置かない）。
 * 帯に隠れないよう、下に余白を空ける
 */
body { padding-bottom: 104px; }
@media (min-width: 881px) {
  body { padding-bottom: 64px; } /* PCでは帯が1段 */
}

/* 音量のつまみ。ネオンの配色に合わせる */
.mode-settings input[type="range"] { flex: 1; min-width: 0; accent-color: var(--cyan); padding: 0; border: 0; background: none; }
.volume-value { min-width: 3.2em; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--text); }

/* ── 攻守交代の旗 ─────────────────────────────────────── */

/*
 * 画面の真ん中あたりを横切る帯。押す幕ではなく、1秒で勝手に消える。
 * 攻撃に回るときはマゼンタ、守備に回るときはシアン。
 *
 * 盤面ではなく画面そのものに立てる（fixed）。どこまでスクロールして
 * いても目に入るように、出ている間はまわり全体もうっすら暗くする。
 */
.turnflag {
  position: fixed;
  left: 0;
  right: 0;
  top: 38%;
  z-index: 45;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 8px 13px;
  pointer-events: none;
  border-top: 1px solid var(--line-hot);
  border-bottom: 1px solid var(--line-hot);
  background: linear-gradient(90deg, transparent, rgba(5, 7, 14, 0.92) 12%, rgba(5, 7, 14, 0.92) 88%, transparent);
}
.turnflag.show {
  animation: turnflag 1.05s ease-out forwards;
  /* 帯の外へ無限に伸びる影。ひと筆で画面全体を暗くできる */
  box-shadow: 0 0 0 100vmax rgba(3, 5, 10, 0.5);
}

.turnflag-head {
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.turnflag-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.turnflag.mine .turnflag-head { color: #ffd7e6; text-shadow: 0 0 16px rgba(255, 61, 139, 0.8); }
.turnflag.mine { border-color: var(--magenta-dim); }
.turnflag.theirs .turnflag-head { color: #cdf3ff; text-shadow: 0 0 16px rgba(53, 224, 255, 0.8); }
.turnflag.theirs { border-color: var(--cyan-dim); }

/*
 * 幕で暗くしている間の入力止め。透明な板を全面にかぶせて、
 * 幕の裏の札やボタンをうっかり押させない（幕そのものは z-index 45）
 */
body.banner-hold::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 44;
}

/* 右から流れ込んで、止まって、左へ抜ける */
@keyframes turnflag {
  0% { opacity: 0; transform: translateX(40px); }
  14% { opacity: 1; transform: translateX(0); }
  82% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-40px); }
}

/*
 * 試合終了の幕。攻守交代と同じ仕組みで画面の真ん中に出るが、
 * 勝負の締めなので、字を大きく・長めに・濃い暗がりで出す。
 */
.turnflag.fin.show {
  animation: turnflag-fin 2.4s ease-out forwards;
  box-shadow: 0 0 0 100vmax rgba(3, 5, 10, 0.65);
}
.turnflag.fin .turnflag-head { font-size: 34px; }
.turnflag.fin .turnflag-sub { font-family: var(--jp); font-size: 12.5px; letter-spacing: 0.12em; }
.turnflag.fin.win .turnflag-head { color: #eaffe9; text-shadow: 0 0 18px rgba(107, 255, 158, 0.9), 0 0 44px rgba(107, 255, 158, 0.5); }
.turnflag.fin.win { border-color: var(--lime); }
.turnflag.fin.lose .turnflag-head { color: #ffd7e6; text-shadow: 0 0 18px rgba(255, 61, 139, 0.9), 0 0 44px rgba(255, 61, 139, 0.5); }
.turnflag.fin.lose { border-color: var(--magenta); }
.turnflag.fin.draw .turnflag-head { color: #cdf3ff; text-shadow: 0 0 18px rgba(53, 224, 255, 0.9), 0 0 44px rgba(53, 224, 255, 0.5); }
.turnflag.fin.draw { border-color: var(--cyan); }

/* ぐっと寄って止まり、余韻を残して消える */
@keyframes turnflag-fin {
  0% { opacity: 0; transform: scale(1.35); filter: blur(4px); }
  10% { opacity: 1; transform: scale(0.98); filter: blur(0); }
  16% { transform: scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.02); }
}

/*
 * 得点の幕。野球中継のスコア表示ふうに、まず入る前のスコアを見せてから、
 * 入った側の数字だけが1点ずつ跳ねて増え、その側の色に光る。
 * 表示時間は app.js が点の数に合わせて animation-duration で延ばす。
 */
.turnflag.score.show {
  animation: turnflag-fin 2s ease-out forwards;
  box-shadow: 0 0 0 100vmax rgba(3, 5, 10, 0.55);
}
.scorebug {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.sb-name { font-size: 13px; letter-spacing: 0.22em; color: var(--text-dim); }
.sb-run {
  min-width: 1.2em;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #eaf6ff;
  text-shadow: 0 0 14px rgba(234, 246, 255, 0.35);
}
.sb-dash { font-size: 22px; color: var(--text-faint); }
/* 増えた側の数字は、その側の色に光ったまま残る */
.sb-run.scored-mine { color: var(--magenta); text-shadow: 0 0 18px rgba(255, 61, 139, 0.9), 0 0 44px rgba(255, 61, 139, 0.45); }
.sb-run.scored-theirs { color: var(--cyan); text-shadow: 0 0 18px rgba(53, 224, 255, 0.9), 0 0 44px rgba(53, 224, 255, 0.45); }
/* 1点ごとに跳ねる。得点板の数字と同じ動き */
.sb-run.tick { animation: bump 0.5s ease-out; }

/* ── 引いた札 ─────────────────────────────────────────── */

/* 山札（右）から手札へ引き込まれる。新しく引いたぶんだけがこう動く。
   引いたあとも1秒ほど縁が光って、どれが新入りかを教える */
.card.drawn {
  animation: draw-new 1.05s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

@keyframes draw-new {
  0% { opacity: 0; transform: translateX(90px) translateY(-12px) rotate(5deg) scale(0.8); }
  32% { opacity: 1; transform: translateX(-5px) translateY(0) rotate(-1.5deg) scale(1.06); box-shadow: 0 0 26px rgba(53, 224, 255, 0.7); border-color: var(--cyan); }
  55% { transform: none; box-shadow: 0 0 18px rgba(53, 224, 255, 0.5); border-color: var(--cyan); }
  85% { box-shadow: 0 0 12px rgba(53, 224, 255, 0.3); border-color: var(--cyan); }
  100% { opacity: 1; transform: none; }
}

/* 手放した札の幻影。その場から下へ沈んで消える（何を捨てたかが目で追える）。
   帯（z-index:30）より下に置く。手札は帯のすぐ上にあるので、沈んだ幻影が
   帯へ潜って消える形になり、手札全捨ての札でも画面が散らからない */
.ghost-out {
  position: fixed;
  z-index: 20;
  margin: 0;
  pointer-events: none;
  animation: ghost-out 0.75s ease-in forwards;
}
@keyframes ghost-out {
  0% { opacity: 0.95; transform: none; }
  100% { opacity: 0; transform: translateY(48px) rotate(6deg) scale(0.92); }
}

/* 捨てる札。下へ落ちて色を失う */
.card.discarding {
  animation: discard-out 0.34s ease-in forwards !important;
  pointer-events: none;
}

@keyframes discard-out {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translateY(70px) rotate(7deg) scale(0.82); filter: grayscale(1); }
}

/* ── 札がぶつかる場を主役にする ───────────────────────── */

/* 判定のスタンプはこの場の上に捺すので、置き場になる */
.duel { position: relative; }

/* 四隅の括弧。照準の中で札がぶつかる */
.duel::before,
.duel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.duel::before { top: 4px; left: 4px; border-top: 2px solid var(--cyan-dim); border-left: 2px solid var(--cyan-dim); }
.duel::after { bottom: 4px; right: 4px; border-bottom: 2px solid var(--magenta-dim); border-right: 2px solid var(--magenta-dim); }

/* ぶつかり合う数の記章。離れていても勝負の数が読める */
.duel-power {
  position: absolute;
  right: -7px;
  bottom: -9px;
  min-width: 40px;
  padding: 2px 8px 3px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  color: var(--void);
  animation: medal-in 0.4s cubic-bezier(0.2, 1.3, 0.3, 1) 0.22s backwards;
}
.duel-power.attack { background: var(--magenta); box-shadow: 0 0 16px rgba(255, 61, 139, 0.7); }
.duel-power.defense { background: var(--cyan); box-shadow: 0 0 16px rgba(53, 224, 255, 0.7); }

@keyframes medal-in {
  0% { opacity: 0; transform: scale(2.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* 札の面がはみ出し部品（記章）を切り落とさないように */
.duel-card { overflow: visible; }

/* 決着の瞬間、ふたつの札の間に稲妻が落ちる */
.duel-clash { position: relative; }
.duel-clash.show::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -46px;
  width: 22px;
  height: 110px;
  margin-left: -11px;
  clip-path: polygon(62% 0, 100% 0, 55% 38%, 86% 38%, 22% 100%, 0 100%, 44% 55%, 14% 55%);
  background: linear-gradient(180deg, #ffffff, currentColor 55%, transparent);
  opacity: 0;
  animation: bolt 0.42s ease-out;
  pointer-events: none;
}

@keyframes bolt {
  0% { opacity: 0; transform: translateY(-10px) scaleY(0.6); }
  18% { opacity: 1; transform: translateY(0) scaleY(1.05); filter: drop-shadow(0 0 14px currentColor); }
  46% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(6px) scaleY(1); }
}

/* ── 広い画面：場を大きく、手札を扇に ─────────────────── */

@media (min-width: 881px) {
  /* 下の帯はPCでは1段9項目に並べ替え、端まで伸ばさず真ん中に寄せる。
     並びは 図鑑→デッキ→実績→CPU対戦→ホーム→オンライン→ガチャ→ストア→設定 で、
     真ん中がホーム。ヘルプは畳んで、設定の中の入り口に任せる */
  .appnav { display: flex; flex-wrap: nowrap; justify-content: center; }
  .appnav-item { flex: 0 1 116px; min-width: 0; }
  .appnav-item[data-id="zukan"] { order: 1; }
  .appnav-item[data-id="deck"] { order: 2; }
  .appnav-item[data-id="feats"] { order: 3; }
  .appnav-item[data-id="cpu"] { order: 4; }
  .appnav-item[data-id="home"] { order: 5; }
  .appnav-item[data-id="online"] { order: 6; }
  .appnav-item[data-id="gacha"] { order: 7; }
  .appnav-item[data-id="store"] { order: 8; }
  .appnav-item[data-id="settings"] { order: 9; }
  .appnav-item[data-id="help"] { display: none; }
  /* ヘルプ画面を開いている間は、代わりに設定を光らせる（DOM上でヘルプの隣） */
  .appnav-item[data-id="help"].current + .appnav-item[data-id="settings"] { color: var(--cyan); }
  .appnav-item[data-id="help"].current + .appnav-item[data-id="settings"] .appnav-mark {
    background: var(--cyan);
    color: var(--void);
    box-shadow: 0 0 12px rgba(53, 224, 255, 0.6);
  }

  .duel { min-height: 200px; padding: 16px 12px 20px; }
  .duel-card { max-width: 184px; padding: 9px; }
  .duel-card .name { font-size: 13.5px; margin: 6px 0 3px; }
  .duel-card .art { max-height: 72px; }
  .duel-who { font-size: 11px; }
  .duel-clash { font-size: 16px; }
  .duel-clash.show { font-size: 20px; }

  /*
   * 手札の扇。真ん中を頂点に、外の札ほど傾いて沈む。
   * 角度と沈みは app.js が1枚ごとに --rot / --sink で振る。
   * 触れた札は立ち上がって前へ出る。
   */
  .hand.fan { padding: 8px 14px 18px; justify-content: center; flex-wrap: nowrap; }
  .hand.fan .card {
    width: 118px;
    flex: 0 0 auto;
    margin-right: calc(var(--overlap, 30px) * -1);
    transform: rotate(var(--rot, 0deg)) translateY(var(--sink, 0px));
    transform-origin: 50% 130%;
    transition: transform 0.16s, box-shadow 0.16s;
  }
  .hand.fan .card:last-child { margin-right: 0; }
  .hand.fan .card .name { font-size: 12px; letter-spacing: 0; }
  .hand.fan .card .blocked { font-size: 10px; }
  .hand.fan .card:not(:disabled):hover,
  .hand.fan .card.picked {
    transform: rotate(0deg) translateY(-16px) scale(1.05);
    z-index: 12;
  }
}

/* ── さらに広い画面（PC）：版面ぜんたいを広げ、盤面へ幅を配る ── */

@media (min-width: 1240px) {
  main {
    max-width: 1320px;
    grid-template-columns: minmax(400px, 1fr) minmax(430px, 1.2fr);
    gap: 20px;
  }
  .duel { min-height: 230px; }
  .duel-card { max-width: 200px; }
  .duel-card .art { max-height: 84px; }
  .hand.fan .card { width: 126px; }
}


/* ── 図鑑 ─────────────────────────────────────────────── */

.zukan {
  /* main には対戦画面用の2カラムの敷き方が掛かっている。図鑑は素の縦積みで使う */
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 20px 32px;
}
.zukan .filters { margin-bottom: 10px; }

.zukan-stars { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.zukan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}

/* 格子の升は中身（絵の固有幅）より狭くなれるようにする。
   これが無いと絵の幅が列を押し広げ、格子が数列しか並ばない */
.zukan-card { width: auto; min-width: 0; animation: none; text-align: left; }
.zukan-card .art { width: 100%; height: auto; }
/*
 * 同じ行の札で絵と足元の位置を揃える。
 * 格子は行の高さを揃えてくれるので、札を縦積みにして足元（収集の行）を
 * 底に吸い付ければ、数値行が1行でも2行でも見た目が段にならない
 */
.zukan-card { display: flex; flex-direction: column; }
.zukan-card .zukan-foot { margin-top: auto; }
.zukan-no {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}
.zukan-foot {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--amber);
}
.zukan-foot .zukan-have { color: var(--lime); font-family: var(--mono); font-style: normal; }
.zukan-foot .zukan-have.none { color: var(--text-faint); }

@media (max-width: 700px) {
  .zukan { padding: 10px 10px 24px; }
  .zukan-stars { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.zukan-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
}

/* 買う・売るの前の小さな確認。他の幕より上に出る */
.confirm-pop { z-index: 60; }
.confirm-box {
  width: min(340px, 100%);
  padding: 18px 20px;
  border: 1px solid var(--cyan);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--panel), var(--deep));
  box-shadow: 0 0 30px -8px var(--cyan);
  animation: rise 0.22s ease-out;
}
.confirm-box p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.9; }

/* まだ持っていない札の空欄。番号と ？ だけの静かな枠 */
.zukan-blank {
  display: grid;
  place-items: center;
  min-height: 120px;
  border-style: dashed;
  opacity: 0.55;
  cursor: default;
}
.zukan-blank .zukan-no { justify-self: start; align-self: start; }
.zukan-blank-mark {
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--text-faint);
}

/* ── チュートリアルのスポットライトと道しるべ ─────────── */

/*
 * スポットライト。対象の周りに巨大な影を敷いて、そこ以外を暗くする。
 * 影はクリックを遮らないので、操作はそのまま。
 */
.coach-mark {
  position: relative;
  z-index: 21;
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 9999px rgba(5, 7, 14, 0.62), 0 0 26px rgba(53, 224, 255, 0.5);
  animation: coach-pulse 1.4s ease-in-out infinite;
}

@keyframes coach-pulse {
  50% { outline-color: rgba(53, 224, 255, 0.3); }
}

/* 説明の枠は、暗くならない側に置く */
.guide { position: relative; z-index: 22; }

/* 道しるべ。次に押すとよいものが琥珀色に浮かぶ。押すのは自由 */
.coach-suggest {
  outline: 2px solid var(--amber) !important;
  outline-offset: 3px;
  z-index: 13;
  animation: suggest-pulse 1.1s ease-in-out infinite !important;
}

@keyframes suggest-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 179, 71, 0.4); }
  50% { box-shadow: 0 0 26px rgba(255, 179, 71, 0.9); transform: translateY(-6px); }
}

/* ── 説明の中の実演 ───────────────────────────────────── */

.lesson-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--void);
}

.demo-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.demo-item { display: grid; justify-items: center; gap: 4px; }
.demo-card { width: 104px; padding: 6px; animation: none; cursor: default; }
.demo-card .name { font-size: 11px; min-height: 0; margin: 3px 0 2px; }
.demo-card .marks { display: none; }
.demo-label { max-width: 120px; font-size: 10.5px; line-height: 1.6; color: var(--text-dim); text-align: center; }
.demo-arrow {
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.demo-note { font-size: 11px; color: var(--text-dim); border: 1px dashed var(--line-hot); padding: 4px 8px; }
.demo-verdict {
  padding: 3px 10px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.demo-verdict.out { background: rgba(53, 224, 255, 0.15); color: #cdf3ff; box-shadow: inset 0 0 0 1px var(--cyan); }
.demo-verdict.hit { background: rgba(255, 61, 139, 0.16); color: #ffd7e6; box-shadow: inset 0 0 0 1px var(--magenta); }
.demo-callouts { margin: 0; padding-left: 1.2em; font-size: 12px; line-height: 1.9; color: var(--text); }

/* ── 独立したガチャの画面 ─────────────────────────────── */

.gacha {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px 32px;
}

.gacha-wallet {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.gacha-wallet b {
  font-family: var(--jp-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255, 179, 71, 0.5);
  margin: 0 2px 0 6px;
}

.gacha-odds { margin: 4px 0 10px; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }

/* ── 対戦の報酬の知らせ ───────────────────────────────── */

.award {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--amber);
  border-radius: 2px;
  background: rgba(255, 179, 71, 0.08);
}
.award-note { font-size: 13px; font-weight: 700; color: #ffe9c9; }
.award .link-button { padding: 8px 16px; font-size: 12px; }
.end-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.end-actions .primary { padding: 8px 18px; font-size: 12.5px; }

/* ── デッキ編集の道具立て（スマホ） ─────────────────────
   実機の大きめの文字設定では、ボタンが flex で搾られて
   一文字ずつ縦に折れてしまう。行ごとに積み、ボタンは潰れない幅で置く */
@media (max-width: 700px) {
  .topbar h1 { margin: 0; font-size: 20px; text-align: center; letter-spacing: 0.2em; }
  /* min-width: 0 の連鎖切りが要。これが無いと、セレクトの中の長いデッキ名の
     固有幅が label → 束 → setup と親をまとめて押し広げ、右へはみ出す */
  .topbar .setup.deck-tools { flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; max-width: 100%; }
  .tool-group { display: flex; width: 100%; gap: 8px; align-items: center; min-width: 0; }
  .tool-group + .tool-group { padding-left: 0; border-left: 0; }
  /* 「デッキ」「名前」の字幅が同じなので、欄の左端がきれいに揃う */
  .tool-group label { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
  .tool-group select,
  .tool-group input { flex: 1; min-width: 0; width: auto; }
  .topbar .setup .tool-group button { flex: 0 0 auto; white-space: nowrap; padding: 10px 16px; }
  /* 保存の状態は行を取らず、右端に小さく添える */
  .deck-tools .save-state { white-space: nowrap; text-align: right; margin-top: -2px; }
}