:root {
  /* 白い琺瑯（ほうろう）の台所（v0.13.1）。frontend-design スキルの手順で決め直した。
     v0.11〜v0.13 の「暖かいクリーム地＋橙」は、AI が作るページの定番の配色そのものだったので、
     題材（台所の器）から取り直した：地はタイルの白、面は琺瑯の白、押すものは琺瑯の縁の紺、
     いま見る所・選んだものは人参の橙。機能の色（葉・ガスの火・トマト）は形か語と必ず組で使う */
  --bg: #edf2ee;            /* タイルの白（ページの地。わずかに青緑に寄せて清潔に） */
  --panel: #ffffff;         /* 琺瑯の白（面） */
  --panel-2: #f2f5f2;       /* 面の一段沈んだ所 */
  --card-bg: #fdfbf6;       /* カードは紙（面の白と見分ける） */
  --line: #d3dcd5;          /* タイルの目地 */
  --outline: #c3cfc6;
  --text: #2b2723;          /* 醤油 */
  --muted: #6c6862;
  --primary: #2d4e80;       /* 琺瑯の縁の紺：押すもの */
  --primary-dark: #1f3a63;  /* 縁の厚み（ボタンの下端） */
  --primary-soft: #e6ecf5;
  --accent: #e2701f;        /* 人参：いま見る所・選んだもの（白地で 3:1。v0.13.1 の #ee7a2c は 2.8:1 で届いていなかった） */
  --accent-ink: #b5551a;    /* 人参の濃い方（白地の文字はこちら。4.5:1 以上） */
  --accent-soft: #fdebdc;
  --veg: #3e9a5a;           /* 葉：うまくいった・野菜 */
  --crit: #b98300;
  --fail: #d6463a;          /* トマト：受けたダメージ・失敗 */
  --gauge: #2c76d0;         /* ガスの火：火力・コスト */
  --mint: #3e9a5a;          /* v0.12 のミントは葉の緑に寄せた（差し色を増やさない） */
  --mint-ink: #2b7a45;
  --mint-soft: #dcefe2;
  --on-primary: #ffffff;    /* 押すものの上の文字 */
  --on-accent: #ffffff;     /* 人参の濃い方（吹き出し・選んだ印）の上の文字 */
  /* カードは紙。面が暗いデザインでも、カードの中は紙の上の濃い文字にする（v0.13.3） */
  --card-text: #2b2723;
  --card-muted: #6c6862;
  --primary-hover: var(--primary-dark);
  --life-fill: var(--accent);
  /* 卓と題名の素材（デザインの切り替えで差し替える。v0.13.2） */
  --wall: #f8faf8;                       /* 卓の壁のタイル */
  --wall-grout: rgb(130 160 145 / .16);  /* タイルの目地 */
  --wall-light: rgb(255 255 255 / .85);  /* 上からの灯り */
  --lamp: rgb(255 255 255 / .7);         /* 手元に落ちる灯り */
  --stone-edge: rgb(110 125 118 / .45);
  --stone-1: #e6ebe8; --stone-2: #dce2de; --stone-3: #c8d0cb;
  --card-back-a: #e6ecf4; --card-back-b: #d9e2ee;
  --title-grout: rgb(150 175 160 / .28);
  /* 書体（本文と、ロゴ・大きな語の2役。既定は1書体） */
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-display: var(--font-body);
  /* 透かしに使う色の成分（rgb(var(--x-rgb) / .3) のように使う） */
  --ink-rgb: 43 39 35;
  --rim-rgb: 45 78 128;
  --carrot-rgb: 226 112 31;
  --tomato-rgb: 214 70 58;
  /* 文字の段（The Elements of Typographic Style の古典的な階段から） */
  --fs-1: 12px; --fs-2: 14px; --fs-3: 16px; --fs-4: 18px; --fs-5: 24px; --fs-6: 36px; --fs-7: 48px; --fs-8: 72px;
  --radius: 10px;
  /* カードの寸法は1か所で持つ。低い画面では下のメディアクエリで縮める */
  --card-w: 150px;
  --card-h: 132px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* 丸ゴシック1書体（v0.13.1）：丸みでかわいらしく、ゴシックの骨格で清潔に。読めなければ端末の丸ゴシック → ゴシック */
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
}

button { font: inherit; color: inherit; cursor: pointer; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 16px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--primary); }
.btn:not(.btn--primary):not(:disabled):hover { background-color: rgb(var(--rim-rgb) / .06); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 主ボタンは琺瑯の器：紺の面と、下端に一段濃い縁（押すと縁が沈む） */
.btn--primary:hover:not(:disabled) { background-color: var(--primary-hover); }
.btn--primary:active:not(:disabled) { box-shadow: inset 0 1px 0 var(--primary-dark); translate: 0 1px; }
.btn:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; box-shadow: inset 0 -2px 0 var(--primary-dark); }
.btn--ghost { color: var(--muted); }
.btn--small { padding: 1px 10px; font-size: 12px; }
.btn--big { font-size: 16px; padding: 10px 30px; }

.chip {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
  font-weight: 400;
}

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab {
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 12px; font-size: 13px; color: var(--muted);
}
.tab:hover { border-color: var(--primary); }
.tab.is-on { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

/* --- メニュー（v0.12.1：タイトル → ホーム → PLAY / DECK） -------------------
   1画面で決めることを1つにした。白い面と余白で清潔に、角は丸く、色は台所の暖色のまま */
.screen--menu { max-width: 980px; margin: 0 auto; padding: 24px 20px 48px; }
.menu-body { padding-top: 4px; }

/* 下の階層の見出し：左に戻る、中央に画面名、右に参照 */
.menu-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.menu-bar__back { justify-self: start; font-size: 14px; }
.menu-bar__title { margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: .08em; display: flex; align-items: baseline; gap: 10px; }
.menu-bar__title small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.menu-bar__links { justify-self: end; display: flex; gap: 8px; }

/* タイトル：ロゴと START だけ。壁のタイルを淡く敷く */
.screen--title {
  max-width: none; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  /* 白いタイル（目地は薄い青緑の灰） */
  background:
    linear-gradient(var(--bg), transparent 45%, var(--bg)),
    repeating-linear-gradient(0deg, transparent 0 47px, var(--title-grout) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, var(--title-grout) 47px 48px),
    var(--bg);
}
.title { display: grid; justify-items: center; gap: 14px; text-align: center; }
.title__art { display: flex; gap: 6px; margin-bottom: 4px; }
.title__veg {
  width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--panel); border: 2px solid var(--line); border-radius: 50%;
}
.title__veg svg { width: 46px; height: 46px; filter: drop-shadow(0 0 1px rgb(var(--ink-rgb) / .35)); }
/* ロゴ：「Slice」の字そのものが包丁で斜めに切れている（v0.13.1）。この画面で大胆なのはここだけ。
   開いたときに1度だけ切れて、下半分がずれる。動きを減らす設定では、はじめから切れた形で止める */
.logo { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: .02em; line-height: 1.05; display: inline-flex; align-items: baseline; gap: .22em; }
.logo__amp { font-weight: 500; font-size: .7em; color: var(--muted); }
.logo__slice { position: relative; display: inline-block; color: transparent; }
.logo__slice::before, .logo__slice::after { content: attr(data-text); position: absolute; inset: 0; color: var(--text); }
.logo__slice::before { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 66%); }
.logo__slice::after {
  clip-path: polygon(0 66%, 100% 40%, 100% 100%, 0 100%);
  transform: translate(.07em, .06em);
}
.logo__cut {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--panel); clip-path: polygon(-4% 64%, 104% 38%, 104% 41%, -4% 67%);
  opacity: 0;
}
.logo--title { font-size: clamp(44px, 9vw, var(--fs-8)); }
/* 切れる動きはタイトルに入ってきた1回だけ（.is-arriving。v0.15.4：描き直しのたびに切れ直していた） */
.is-arriving .logo--title .logo__slice::after { animation: slice-apart .45s .55s both cubic-bezier(.2, .8, .2, 1); }
.is-arriving .logo--title .logo__cut { animation: slice-glint .5s .35s both; }
@keyframes slice-apart { from { transform: translate(0, 0); } }
@keyframes slice-glint { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
.logo--home { font-size: var(--fs-6); }
.title__tag { margin: 0; color: var(--muted); font-size: 14px; }
.btn--start {
  margin-top: 10px; font-size: var(--fs-5); letter-spacing: .2em; padding: 14px 64px 16px calc(64px + .2em);
  box-shadow: inset 0 -4px 0 var(--primary-dark);
}
.title__hint { margin: 0; color: var(--muted); font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .logo .logo__slice::after, .logo .logo__cut { animation: none !important; } }

/* ホーム：PLAY と DECK の大きな札が2枚 */
.home { display: grid; gap: 24px; justify-items: center; padding-top: 6vh; }
.home__tiles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; width: 100%; max-width: 820px; }
.home-tile {
  display: grid; align-content: center; justify-items: center; gap: 6px; min-height: 240px; padding: 24px;
  border-radius: 28px; border: 2px solid var(--line); background: var(--panel); text-align: center;
  transition: border-color .15s, background-color .15s;
}
.home-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* PLAY は紺の琺瑯（白抜きの文字・下端に厚み）。DECK は白い器に縁 */
.home-tile--play { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: inset 0 -6px 0 var(--primary-dark); }
.home-tile--play:hover { background: var(--primary-hover); }
.home-tile--deck { border-radius: 20px; }
.home-tile--deck:hover { border-color: var(--primary); }
.home-tile__en { font-family: var(--font-display); font-size: var(--fs-6); font-weight: 900; letter-spacing: .14em; line-height: 1; color: var(--primary); }
.home-tile--play .home-tile__en { font-size: var(--fs-7); color: var(--on-primary); }
.home-tile__ja { font-size: 16px; font-weight: 700; }
.home-tile__sub { font-size: var(--fs-1); color: var(--muted); }
.home-tile--play .home-tile__sub { color: var(--on-primary); opacity: .85; }
.home-tile__warn { font-size: 12px; color: var(--fail); }
.home__links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* PLAY：遊び方を2枚から選ぶ */
.using {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 14px 4px 6px;
}
.using:hover { border-color: var(--primary); }
.using b { color: var(--text); }
.mode-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.mode-card { position: relative; border-radius: 24px; border: 2px solid var(--line); background: var(--panel); transition: border-color .15s; }
.mode-card:has(.mode-card__main:not(:disabled)):hover { border-color: var(--primary); }
.mode-card__main {
  width: 100%; display: grid; justify-items: center; gap: 10px; padding: 28px 20px 24px;
  background: none; border: 0; border-radius: 24px; text-align: center;
}
.mode-card__main:disabled { opacity: .5; cursor: not-allowed; }
.mode-card__main:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mode-card__art { height: 72px; display: grid; place-items: center; }
.mode-card__art .glyph { width: 60px; height: 60px; color: var(--accent); stroke-width: 1.6; }
.mode-card__art .pot { width: 76px; height: 66px; }
.mode-card__title { font-size: 20px; font-weight: 700; }
.mode-card__chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.mode-card__chips .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text); background: var(--panel); }
.mode-card__go {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 7px 22px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font-weight: 700; box-shadow: inset 0 -2px 0 var(--primary-dark);
}
.mode-card__opt { position: absolute; top: 12px; right: 12px; }
.nowrap { white-space: nowrap; }

@media (max-width: 640px) {
  .home__tiles, .mode-cards { grid-template-columns: 1fr; }
  .home-tile { min-height: 150px; }
  .menu-bar { grid-template-columns: auto 1fr; }
  .menu-bar__links { grid-column: 1 / -1; justify-self: start; }
}
.select__h { font-size: 14px; color: var(--muted); margin: 26px 0 10px; font-weight: 500; }
.select__start { margin-top: 28px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.select__warn { color: var(--fail); font-size: 12px; }
.deck-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.deck-card {
  display: grid; align-content: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s;
}
.deck-card:hover { border-color: var(--primary); }
.deck-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; position: relative; }
.deck-card__pick { text-align: left; background: none; border: 0; padding: 14px 16px 8px; }
.deck-card h3 { margin: 0 0 4px; font-size: 16px; }
.deck-card p { margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.deck-card__tools { font-size: 12px !important; }
.deck-card__err { color: var(--fail) !important; }
.deck-card__ops { display: flex; gap: 8px; padding: 0 16px 12px; }
.select__sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.char-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 14px; }
.char-card {
  text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; transition: border-color .15s;
}
.char-card:hover { border-color: var(--primary); }
.char-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; position: relative; }
/* 選んだ札は色だけでなく印も（XAG 103） */
.char-card.is-selected::after, .deck-card.is-selected::after {
  content: '✓' / ''; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 900;
}
.char-card h3 { margin: 0 0 2px; font-size: 16px; }
.char-card p { margin: 0; color: var(--muted); font-size: 12px; }
.char-card__stats { color: var(--text) !important; font-size: 13px !important; margin-bottom: 4px !important; }
.chip--char { color: var(--accent-ink); border-color: #f1c4a3; }

.deck-card--new {
  border-style: dashed; color: var(--muted); min-height: 110px;
  font-size: 15px; justify-content: center; align-content: center;
}

/* --- デッキ構築 --------------------------------------------------------- */
.screen--builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  height: 100dvh;
}
.builder__head { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.builder__name {
  font: inherit; font-size: 16px; font-weight: 700; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; flex: 0 1 300px; min-width: 0;
}
.builder__name:focus { outline: none; border-color: var(--primary); }
.builder__msg { font-size: 12px; color: var(--veg); }
.builder__msg--warn { color: var(--fail); }
.builder__pool, .builder__deck { min-height: 0; overflow-y: auto; }
.builder__pool { display: grid; gap: 10px; align-content: start; }
.builder__note { margin: 0; font-size: 12px; color: var(--muted); }
.pool { display: flex; flex-wrap: wrap; gap: 10px; }
.tabs__label { font-size: 11px; color: var(--muted); align-self: center; margin-right: 2px; }
.pool-item {
  position: relative; padding: 0; background: none; border: 0; border-radius: var(--radius); text-align: left;
  display: grid; gap: 2px; justify-items: center;
}
/* 並べ替えの軸（値段・コスト）が見えるよう、カードの下に添える */
.pool-item__meta { font-size: 11px; color: var(--muted); line-height: 1.3; }
.pool-item:hover .card { border-color: var(--primary); }
.pool-item[aria-disabled="true"] { cursor: not-allowed; }
.pool-item[aria-disabled="true"] .card { opacity: .5; }
.pool-item.is-dim .card { opacity: .55; }
/* 枚数は上端の中央（角には属性・硬さ／コスト・威力、下には名前があるので空いている所に置く） */
.pool-item__count {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  /* 濃い地に濃い字だと読めなかった（おひさまキッチンで 2.6:1）。淡い地に濃い字、縁で「選んだ」を示す（v0.15.5） */
  background: var(--accent-soft); color: var(--text); border: 2px solid var(--accent); font-weight: 700; font-size: 11px;
  border-radius: 999px; padding: 0 7px; line-height: 1.4;
}
.builder__deck { display: grid; gap: 14px; align-content: start; }
.builder__block h3 { font-size: 13px; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.builder__block h3 small { color: var(--muted); font-weight: 400; font-size: 11px; }
.budget__label { font-size: 13px; margin-bottom: 4px; }
.budget__label b { font-size: 16px; }
.budget__label b.is-over { color: var(--fail); }
.budget__bar { height: 8px; background: #e1e7e2; border-radius: 999px; overflow: hidden; }
.budget__fill { height: 100%; background: var(--veg); }
.budget__fill.is-over { background: var(--fail); }
.errors { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12px; color: var(--fail); }
.ok { margin: 0; color: var(--veg); font-size: 12px; }
.deck-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.deck-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 2ch auto; gap: 6px; align-items: center; font-size: 13px; }
.deck-row b { text-align: center; }
.deck-row__meta { color: var(--muted); font-size: 11px; }
.deck-row--empty { display: block; color: var(--muted); font-size: 12px; }
.step-btn {
  width: 24px; height: 22px; padding: 0; line-height: 1;
  background: transparent; border: 1px solid var(--line); border-radius: 6px;
}
.step-btn:hover { border-color: var(--primary); }

/* --- ゲーム画面（卓） ---------------------------------------------------
   上＝相手の席／中＝場／下＝自分の席。画面の高さに収め、あふれた分は場の中でスクロールする。 */
.screen--game {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  height: 100dvh;
}

/* 席：左に状態、右にそのフェイズの手札 */
.seat {
  display: flex; align-items: center; gap: 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; min-width: 0;
}
.status { flex: 0 0 290px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
/* 自分の状態は右端に置き、相手（左端）と向かい合わせにする */
.seat--me { flex-direction: row-reverse; }

.life__label { display: flex; align-items: baseline; gap: 8px; font-weight: 700; margin-bottom: 3px; }
.life__label .life__num { margin-left: auto; font-weight: 700; font-size: 14px; }
.life__num small { font-size: 11px; font-weight: 400; color: var(--muted); }
.life__delta { color: var(--fail); font-size: 18px; line-height: 1; }
/* 動きは調理の瞬間の1回だけ（v0.14。描き直しのたびに繰り返さない） */
.is-moment .life__delta { animation: pop .45s .45s ease-out both; }
/* 自分が与えたダメージ（＝相手の減少）は青。受けたダメージの赤と区別する */
.life__delta--dealt { color: var(--gauge); }
.life__delta--heal { color: var(--veg); }
@keyframes pop { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
.life__bar { position: relative; height: 10px; background: #e1e7e2; border-radius: 999px; overflow: hidden; }
.life__fill { height: 100%; background: var(--life-fill); transition: width .3s; }
/* 直前のラウンドで動いた分を一瞬だけ残す（v0.11）。減った分は赤、回復した分は緑 */
@keyframes ghost-fade { 0%, 45% { opacity: .95; } 100% { opacity: 0; } }
.life__ghost { position: absolute; top: 0; height: 100%; opacity: 0; }
.is-moment .life__ghost { animation: ghost-fade 1.8s .45s ease-out both; }
.life__ghost--hit { background: repeating-linear-gradient(45deg, var(--fail) 0 4px, #8e3226 4px 8px); }
.life__ghost--heal { background: repeating-linear-gradient(45deg, var(--veg) 0 4px, #4a7a32 4px 8px); }

.gauge { display: flex; align-items: center; gap: 8px; }
.gauge .stat { min-width: 34px; font-weight: 700; color: var(--gauge); }
.gauge__pips { display: flex; gap: 3px; }
.gauge__pip {
  width: 10px; height: 10px; border-radius: 3px;
  background: #e1e7e2; border: 1px solid var(--line);
}
.gauge__pip.is-on { background: var(--gauge); border-color: var(--gauge); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* 状態チップ。「次から」は点線にして、今効いているものと見分ける */
.st {
  font-size: 11px; line-height: 1.6; color: #8a5c00;
  background: #fdf0cf; border: 1px solid #e0bb6a; border-radius: 999px; padding: 0 8px;
  cursor: help;
}
.st i { font-style: normal; font-size: 9px; color: var(--muted); margin-right: 4px; }
.st--next { background: transparent; border-style: dashed; }
.st:focus-visible, .hit:focus-visible, .veg-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* そのフェイズの操作（v0.11.5）。手札の並びのすぐ隣に置き、左下から動かさずに済むようにする */
.hand__act { display: grid; gap: 2px; justify-items: center; align-content: start; padding-top: 2px; }
.hand__act--go { align-self: center; padding-top: 0; }
.hand__note { font-size: 12px; color: var(--muted); white-space: nowrap; display: inline-flex; gap: 2px; }

/* 選んだ札のところに出す確定ボタン（v0.11.4）。
   場所は常に確保しておき、出し入れで手札の並びや表の位置が動かないようにする */
.hand__item { display: grid; gap: 3px; justify-items: center; }
.hand__ok { min-height: 25px; display: grid; align-content: start; }
.card-ok { padding: 2px 12px; font-size: 12px; white-space: nowrap; }

.hand { flex: 1 1 auto; min-width: 0; }
.hand h2 {
  font-size: 12px; font-weight: 500; margin: 0 0 6px; color: var(--muted);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.hand__cards { display: flex; gap: 10px; flex-wrap: wrap; }
.hand__cards--mini { gap: 5px; }
.hand__rest { color: var(--muted); font-size: 13px; display: inline-flex; gap: 12px; }
.hand__later { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

/* 場：フェイズの帯＋まな板と構え（＋調理結果） */
.table {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px;
  /* キッチンの壁（タイル）＋上からの灯り。文字の可読性を落とさない濃さに留める */
  background-color: var(--wall);
  background-image:
    radial-gradient(120% 70% at 50% -10%, var(--wall-light), transparent 62%),
    repeating-linear-gradient(90deg, var(--wall-grout) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, var(--wall-grout) 0 1px, transparent 1px 52px);
}
.controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.controls__actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
/* ==========================================================================
   v0.13：文ではなく絵で説明する
   絵（glyphs.js）は文字の高さに並ぶ線画。色は置いた所の文字色。絵だけにせず短い語を添える
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.glyph {
  width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.glyph--bowl { color: var(--accent); }
.glyph--flame { color: var(--gauge); }
.glyph--veg { color: var(--veg); }
.glyph--coin { color: var(--crit); }
.btn .glyph, .chip .glyph, .stat .glyph { color: inherit; }
.stat .glyph--bowl { color: var(--accent); }
.stat .glyph--flame, .btn--pass .glyph--flame { color: var(--gauge); }
.stat .glyph--veg { color: var(--veg); }
.stat { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.stat[data-tip-source] { cursor: help; }
.stat--heal { color: var(--veg); }
.stat.chip { color: var(--muted); }

/* 長押しで詳細を出す所は、端末の選択やメニューを出さない */
.card, [data-tip-source] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* フェイズの段：いまどこかを絵と語で（帯の説明文の代わり） */
.steps { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; row-gap: 4px; }
.steps__round {
  font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 999px; padding: 2px 10px; margin-right: 10px;
}
.step {
  position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--muted);
  padding: 4px 12px; border-radius: 999px; border: 1px solid transparent;
}
.step + .step { margin-left: 18px; }
.step + .step::before {
  content: ''; position: absolute; left: -17px; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--line);
}
.step.is-now { color: var(--text); font-weight: 700; background: var(--panel); border-color: var(--accent); }
.step.is-done { color: var(--mint-ink); }
.step.is-done .glyph { color: var(--mint); }

.count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px;
  border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 12px; font-weight: 700;
}
.hand h2 { font-size: 13px; }
.hand h2 > .glyph { width: 1.35em; height: 1.35em; }
.costs { display: inline-flex; align-items: center; gap: 3px; cursor: help; }
.costs .card__cost { line-height: 18px; }
.chip--hidden { display: inline-flex; align-items: center; gap: 3px; color: var(--text); }

/* 見送る：炎と +2 で「火力が溜まる」を示す。時計の印＝時間切れでもこれになる */
.btn--pass .badge { background: var(--gauge); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.btn__tag { color: var(--muted); }

/* 場：左右に1つずつ「相手／あなた」。枠ごとの名前は読み上げにだけ渡す */
.field__side { position: relative; }
.side-tag {
  position: absolute; top: -26px; left: 4px; z-index: 2;
  font-size: 12px; font-weight: 700; padding: 1px 10px; border-radius: 999px;
  background: rgb(255 255 255 / .92); border: 1px solid var(--line); color: var(--muted);
}
.side-tag--me { color: var(--accent-ink); border-color: #f1c4a3; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgb(var(--carrot-rgb) / .45); } }
.slot.is-cued .board, .slot.is-cued .counter { animation: glow 1.4s ease-in-out infinite; border-radius: 12px; }

/* ガイドの吹き出し：触る場所そのものに2〜5字だけ。× で「もう出さない」 */
@keyframes cue-bob { 50% { translate: 0 -3px; } }
@keyframes cue-nudge { 50% { translate: 3px 0; } }
.cue {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; z-index: 20;
  padding: 3px 4px 3px 12px; border-radius: 999px; position: relative;
  background: var(--accent-ink); color: var(--on-accent); font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 12px rgb(var(--carrot-rgb) / .35); animation: cue-nudge 1.4s ease-in-out infinite;
}
.cue::before {
  content: ''; position: absolute; right: 100%; top: 50%; margin-top: -6px;
  border: 6px solid transparent; border-right-color: var(--accent-ink);
}
.cue__x {
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .25); color: var(--on-accent);
}
.cue__x .glyph { width: 12px; height: 12px; }
.cue__x:hover { background: rgba(255, 255, 255, .4); }
.hand h2 .cue, .gauge .cue { margin-left: 10px; }
/* 決定ボタンの右横に出す（左向きの矢印）。下に出すと低い画面で切れる */
.hand__ok { position: relative; }
.cue--ok { position: absolute; top: 50%; left: calc(50% + 46px); translate: 0 -50%; }
@keyframes cue-nudge-ok { 50% { translate: 3px -50%; } }
.cue--ok { animation-name: cue-nudge-ok; }
/* 早見表の見出しの中に（下向きの矢印＝行を押す） */
.cue--table { display: flex; width: max-content; margin: 4px 0 0 auto; animation-name: cue-bob; }
.cue--table::before { right: 24px; top: 100%; margin-top: 0; border-right-color: transparent; border-top-color: var(--accent-ink); }
/* 結果パネルの右上 */
.result { position: relative; }
.cue--result { position: absolute; top: -14px; right: 12px; animation-name: cue-bob; }
.cue--result::before { right: 24px; top: 100%; margin-top: 0; border-right-color: transparent; border-top-color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .cue, .slot.is-cued .board, .slot.is-cued .counter { animation: none; } }

/* キャラクターとデッキの札：説明文の代わりにメーターと野菜の絵 */
.meter { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 4px; }
.meter__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.meter__bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.meter--coin .meter__bar i { background: var(--crit); }
.meter b { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.deck-card__pick { display: grid; gap: 6px; align-content: start; }
.deck-card__pick h3 { margin: 0; }
.deck-strip { display: inline-flex; gap: 3px; vertical-align: middle; }
.deck-strip__veg {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line);
}
.deck-strip__veg svg { width: 24px; height: 24px; }
.deck-card__tools { display: flex; gap: 4px; flex-wrap: wrap; min-height: 18px; }
.tool-chip { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; color: var(--muted); }
.deck-card__err { color: var(--fail); font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.home-tile .deck-strip { margin: 2px 0; }
.home-tile__sub, .home-tile__warn { display: inline-flex; align-items: center; gap: 4px; }
.home-tile__sub .glyph { margin-left: 4px; }
.using .deck-strip__veg { width: 24px; height: 24px; }
.using .deck-strip__veg svg { width: 18px; height: 18px; }
.mode-card .deck-strip__veg { width: 24px; height: 24px; }
.mode-card .deck-strip__veg svg { width: 18px; height: 18px; }
.select__sub .glyph { margin-right: 2px; }
.hint { display: inline-grid; place-items: center; color: var(--muted); cursor: help; }
.hint .glyph { width: 20px; height: 20px; }
.title__tag { display: flex; gap: 18px; justify-content: center; }
.title__tag span { display: inline-flex; align-items: center; gap: 5px; }
.title__tag .glyph--shield { color: var(--veg); }
kbd {
  font: inherit; font-size: 11px; display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; background: var(--panel);
}
.dialog__elapsed { display: inline-flex; align-items: center; gap: 4px; }

/* デッキ構築：値段は硬貨、コストは青い札、状態は印と短い語 */
.pool-item__meta { display: inline-flex; align-items: center; gap: 4px; }
.pool-item__count { display: inline-flex; align-items: center; gap: 2px; }
.deck-row__meta { display: inline-flex; align-items: center; gap: 4px; }
.tool-chip.is-missing { color: var(--fail); border-color: #f0b8ae; display: inline-flex; align-items: center; gap: 2px; }
.tab small { margin-left: 6px; display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.budget__label { display: flex; align-items: center; gap: 4px; }
.builder__state { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.builder__state.is-ok { color: var(--mint-ink); }
.builder__state.is-ng { color: var(--fail); }

/* 遊び方（図解） */
.howto { --card-w: 104px; --card-h: 96px; }
.howto h2 { display: flex; align-items: center; gap: 6px; }
.howto h3 { display: flex; align-items: center; gap: 4px; }
.howto__goal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.howto__goal p { margin: 0; font-size: 15px; }
.howto__bowl { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; color: var(--accent); }
.howto__bowl .glyph { width: 36px; height: 36px; }
.howto__bowl--empty, .howto__bowl--empty .glyph { color: var(--muted); }
.howto__arrow { color: var(--muted); font-size: 20px; }
.howto__flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.howto__flow li {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center;
  background: var(--panel-2); border-radius: 16px; padding: 14px 10px 12px;
}
.howto__flow b { font-size: 15px; }
.howto__flow li > span:last-child { font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.howto__flow b { display: inline-flex; align-items: center; gap: 6px; }
.howto__step {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-ink); color: var(--on-accent); font-weight: 700; font-size: 12px; display: inline-grid; place-items: center;
}
.howto__fig { display: flex; align-items: center; gap: 6px; min-height: var(--card-h); }
.howto__fig .card { cursor: default; }
.howto__slot {
  width: var(--card-w); height: var(--card-h); border-radius: 10px; border: 2px dashed #c9b89c;
  display: grid; place-items: center; background: #f1dcb6;
}
.howto__slot--knife { background: #e7ecee; border-color: #b9c4c9; }
.howto__slot .glyph { width: 34px; height: 34px; color: #a08a6a; stroke-width: 1.6; }
.howto__fig--grades { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; }
.howto__fig--grades .grade-cell { display: grid; place-items: center; width: 52px; height: 42px; border-radius: 8px; font-size: 18px; }
.howto__fig--grades small { font-size: 11px; line-height: 1; }
.howto__anatomy { display: flex; gap: 14px; align-items: center; }
.howto__anatomy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.howto__anatomy li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.howto__tag {
  display: inline-flex; align-items: center; gap: 2px; min-width: 24px; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font-size: 12px; font-weight: 700; background: var(--panel);
}
.howto__tag--cost { position: static; }
.howto__tag--thrift { color: var(--gauge); border-color: #a8cfe4; }
.howto__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.howto__pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--panel);
}
.howto__pill .glyph { color: var(--gauge); }
.howto__pill--pass { border-color: var(--gauge); }
.howto__seen p, .howto__ops p { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.howto__ok, .howto__ng { margin-left: auto; display: inline-flex; gap: 3px; align-items: center; font-weight: 700; }
.howto__ok { color: var(--mint-ink); }
.howto__ng { color: var(--fail); }
.howto__key { border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; background: var(--panel); font-size: 12px; }
.howto__ops .btn { pointer-events: none; }
@media (max-width: 720px) { .howto__flow { grid-template-columns: 1fr; } }
/* 手順の札の中の図（見本の札 → 置く枠）は、札の幅に合わせて縮める（v0.15.2）。
   札と枠を104pxの固定にしていたので、引き出しが狭い・書体の幅が違う環境では手順の札の縁からはみ出した。
   置き場所が狭くなったら、3枚横並びをやめて縦に積む */
.howto > section { container-type: inline-size; }
.howto__flow li { container-type: inline-size; min-width: 0; }
.howto__flow .howto__fig { --card-w: min(104px, (100cqi - 44px) / 2); --card-h: calc(var(--card-w) * .92); gap: 4px; }
@container (max-width: 720px) { .howto__flow { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   v0.12：タイマー・対戦の形式・マッチング・知らせ
   M3（Material 3）の部品の作り（円形の進捗・セグメントボタン・ダイアログ・スナックバー）に倣い、
   色と形はこのゲームのもの（暖色・丸み）を使う。清潔感はタイルの目地のようなミントを1色だけ足して出す
   ========================================================================== */

/* 残り時間：手札の見出しの頭に出す円形の進捗。割合は .screen--game の --timer-left（1→0）を読む */
.screen--game { --timer-color: var(--mint); }
.screen--game.is-warn { --timer-color: var(--crit); }
.screen--game.is-low { --timer-color: var(--fail); }
.timer { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.timer__dial {
  position: relative; width: 60px; height: 60px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--panel); border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}
.timer__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer__track { fill: none; stroke: var(--mint-soft); stroke-width: 5; }
.timer__bar {
  fill: none; stroke: var(--timer-color); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 100px; stroke-dashoffset: calc((1 - var(--timer-left, 1)) * 100px);
  transition: stroke-dashoffset .2s linear, stroke .3s;
}
.timer__num {
  position: relative; font-size: 22px; font-weight: 900; line-height: 1; color: var(--timer-color);
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.timer__unit { position: relative; font-size: 9px; line-height: 1; color: var(--muted); margin-top: 1px; }
.timer__cap { font-size: 12px; color: var(--muted); }
.is-low .timer__dial { animation: tick-pulse 1s ease-in-out infinite; }
@keyframes tick-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgb(var(--tomato-rgb) / .15); } }
/* 自分の席の上辺にも細い帯で残りを出す（数字を見ていなくても減っていくのが分かる） */
.screen--game.has-timer .seat--me { position: relative; }
.screen--game.has-timer .seat--me::before {
  content: ''; position: absolute; top: -1px; left: var(--radius); height: 4px; border-radius: 0 0 4px 4px;
  width: calc((100% - 2 * var(--radius)) * var(--timer-left, 1));
  background: var(--timer-color); transition: width .2s linear, background .3s;
}
.screen--game.is-low .seat--me { border-color: var(--fail); box-shadow: 0 0 0 3px rgb(var(--tomato-rgb) / .12); }
/* 席は row-reverse なので、最後に置いた輪が左端に来る */
.seat__timer { flex: 0 0 auto; align-self: center; }
.hand__act--go { display: flex; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .is-low .timer__dial { animation: none; } }

/* 制限時間の選択（AI と練習） */
.setting { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.setting__note { color: var(--muted); font-size: 12px; }
/* セグメントボタン（M3）：どれか1つを選ぶ。選んだものに印と色 */
.seg { display: inline-flex; border: 1px solid var(--outline); border-radius: 999px; overflow: hidden; background: var(--panel); }
.seg__item {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; border-right: 1px solid var(--outline); background: transparent;
  min-height: 36px; padding: 0 16px; font-size: 13px; color: var(--text);
}
.seg__item:last-child { border-right: 0; }
.seg__item:hover { background: rgb(var(--rim-rgb) / .06); }
.seg__item.is-on { background: var(--accent-soft); font-weight: 700; }
.seg__check { display: none; font-size: 12px; color: var(--accent-ink); }
.seg__item.is-on .seg__check { display: inline; }
.seg__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ダイアログ（M3）：オンラインの接続中・相手を探している間 */
.scrim { position: fixed; inset: 0; background: rgb(var(--ink-rgb) / .32); z-index: 60; }
.dialog {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 61;
  width: min(420px, calc(100% - 32px)); background: var(--panel); border-radius: 28px;
  padding: 24px; box-shadow: 0 12px 32px rgb(var(--ink-rgb) / .22);
  display: grid; gap: 12px;
}
/* 出てきた1回だけ動かす（main.js が .is-opening を付ける。v0.15.4：相手を探している間の描き直しで出直していた） */
.scrim.is-opening { animation: fade-in .2s ease-out; }
.dialog.is-opening { animation: dialog-in .25s ease-out; }
.dialog--matching { justify-items: center; text-align: center; }
.dialog__title { margin: 0; font-size: 20px; font-weight: 700; }
.dialog__body { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.dialog__elapsed { margin: 0; font-size: 12px; color: var(--muted); }
.dialog__elapsed b { color: var(--mint-ink); font-size: 15px; font-variant-numeric: tabular-nums; margin-left: 4px; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; width: 100%; }
.dialog--matching .dialog__actions { justify-content: center; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
.btn--text { border-color: transparent; color: var(--primary); font-weight: 700; }
.btn--text:hover { background: rgb(var(--rim-rgb) / .08); border-color: transparent; }

/* 湯気の立つ鍋（待っている間の絵） */
.pot { width: 76px; height: 66px; overflow: visible; }
.pot__body, .pot__lid, .pot__knob, .pot__handle { fill: #eef3f4; stroke: #8fa3ab; stroke-width: 2; }
.pot__lid { fill: #f8fbfb; }
.pot__cheek { fill: #f5b3a8; }
.pot__smile { fill: none; stroke: #6b5b4b; stroke-width: 2; stroke-linecap: round; }
.pot__steam { fill: none; stroke: #b9cdd3; stroke-width: 2.5; stroke-linecap: round; animation: steam 2.4s ease-in-out infinite; }
.pot__steam--2 { animation-delay: .8s; }
.pot__steam--3 { animation-delay: 1.6s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* 読み込み中（M3 の不確定な円形の進捗） */
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 4px solid var(--mint-soft); border-top-color: var(--mint);
  animation: spin .9s linear infinite;
}
.spinner--small { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner, .pot__steam { animation-duration: 4s; } }

/* スナックバー（M3）：時間切れ・接続のことを、下の中央に5秒だけ出す */
.snackbar {
  position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translateX(-50%);
  max-width: min(560px, calc(100% - 32px)); padding: 12px 18px; border-radius: 14px;
  background: var(--text); color: #fff; font-size: 13px;
  box-shadow: 0 6px 18px rgb(var(--ink-rgb) / .25);
  animation: snack 5s ease forwards; pointer-events: none;
}
@keyframes snack {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  6%, 88% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 6px); }
}

/* 相手の様子（オンライン）：考え中／決定済み／接続が切れた */
.chip--status { color: var(--mint-ink); border-color: var(--mint-soft); background: #eef7f1; display: inline-flex; align-items: center; gap: 4px; }
.chip--status.is-done { background: var(--mint-soft); font-weight: 700; }
.chip--status.is-done::before { content: '✓'; }
.chip--alert { color: var(--fail); border-color: #f0b8ae; background: #fdeee9; }
.dots { display: inline-flex; gap: 2px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* 自分の接続が切れて繋ぎ直している間 */
.banner {
  margin: 0; font-size: 12px; padding: 6px 12px; border-radius: 12px;
  background: #fff6e2; border: 1px solid #ecd08e; color: var(--text);
}

.field {
  flex: 1 0 auto; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 16px 22px; flex-wrap: wrap;
  /* 上＝タイルの壁、41% から下＝調理台の天板（境目に灯りの当たる縁）。
     負のマージンで広げると .table の横スクロールが出るので、場の幅のままにする */
  border-radius: 6px;
  background:
    /* 手元に落ちる灯り。中央にいちばん重さが来るようにする */
    radial-gradient(70% 58% at 50% 56%, var(--lamp), transparent 70%),
    /* 上＝タイルの壁、35% から下＝調理台の天板（境目に木口、手前に影） */
    /* 天板は石。まな板（暖色の木）が沈まないよう、寒色寄りの明るい灰にする */
    linear-gradient(180deg,
      transparent 0 35%,
      var(--stone-edge) 35% calc(35% + 2px),
      var(--stone-1) calc(35% + 2px) 39%,
      var(--stone-2) 39% 92%,
      var(--stone-3) 94% 100%);
}
.field__side { display: flex; gap: 10px; align-items: flex-start; }
/* 壁に吊るした調理器具（飾り）。場の上＝壁の部分に薄く敷く */
.rack {
  position: absolute; top: 1%; left: 50%; transform: translateX(-50%);
  /* 高さを場の一部に収める（コーチが出ていると場が縮むので、比率でも抑える） */
  /* 塗りは不透明のまま色で沈める（opacity で薄めると鍋にタイルが透ける） */
  width: min(520px, 46%); height: min(118px, 25%); pointer-events: none;
}

/* 場の中央に立てる包丁（飾り。v0.11） */
.field__vs { align-self: center; padding: 0 6px; display: grid; place-items: center; }
.knife { filter: drop-shadow(0 4px 8px rgb(var(--ink-rgb) / .4)); }
.slot { display: grid; gap: 4px; align-content: start; position: relative; }

/* まな板（v0.11）。木の板の上にカードが乗っている見た目にする */
.board {
  position: relative;
  padding: 12px 14px 18px;
  border-radius: 7px 7px 9px 9px;
  background-color: #e8c393;
  background-image:
    repeating-linear-gradient(91deg, rgba(150, 100, 50, .10) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(89deg, rgba(170, 120, 65, .14) 0 3px, transparent 3px 38px),
    linear-gradient(165deg, #f3d6a8, #dfb783 70%, #cfa26c);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, .8),
    inset 0 -3px 6px rgba(150, 100, 50, .3),
    0 8px 16px rgba(120, 85, 45, .35);
}
/* 吊るす穴のある持ち手。相手側は左、自分側は右に出して、卓の左右で向かい合わせる */
.board::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 46%;
  background: linear-gradient(165deg, #f0d2a2, #d5ad78);
  box-shadow: inset 0 1px 0 rgba(255, 252, 240, .7), 0 7px 14px rgba(120, 85, 45, .3);
}
/* 相手の板は左、自分の板は右へ持ち手を出して、卓の左右で向かい合わせる */
.board--foe::after { left: -18px; border-radius: 8px 0 0 8px; }
.board--me::after { right: -18px; border-radius: 0 8px 8px 0; }
.board__marks { position: absolute; inset: 6px; width: auto; height: auto; opacity: .55; }
/* 刃筋はカードの上だけを走らせる（板の外に出ている持ち手は切り取らない） */
.board__top { position: relative; overflow: hidden; border-radius: var(--radius); }
.board .card { box-shadow: 0 7px 14px rgba(120, 85, 45, .38); }
.board .card--empty { background: rgb(255 252 245 / .6); color: #7a5a30; border-color: rgba(140, 95, 45, .5); }

/* 調理台（構えを置くステンレスの天板）。まな板と手触りを変えて場を単調にしない */
.counter {
  padding: 12px 14px 18px;
  border-radius: 7px;
  background-color: #cfd8e0;
  background-image:
    repeating-linear-gradient(90deg, rgba(90, 110, 130, .08) 0 1px, transparent 1px 4px),
    linear-gradient(170deg, #e6edf3, #b7c3cd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -3px 6px rgba(90, 110, 130, .25),
    0 8px 16px rgba(80, 100, 120, .3);
}
.counter .card { box-shadow: 0 7px 14px rgba(80, 100, 120, .35); }
.counter .card--empty { background: rgba(255, 255, 255, .55); color: #4a5a68; border-color: rgba(70, 95, 120, .4); }

/* 調理の瞬間、切られた側のまな板に刃筋が走る */
@keyframes slice {
  0% { transform: translate(-60%, -60%) rotate(24deg); opacity: 0; }
  35% { opacity: .95; }
  100% { transform: translate(60%, 60%) rotate(24deg); opacity: 0; }
}
@keyframes board-shake {
  0%, 100% { transform: none; }
  30% { transform: translateX(-3px); }
  65% { transform: translateX(3px); }
}
.board.is-cut { animation: board-shake .3s .45s ease-in-out both; }
.board.is-cut .board__top::after {
  content: ''; position: absolute; inset: -40%;
  background: linear-gradient(90deg,
    transparent 45%, rgba(255, 255, 255, .95) 48%,
    rgba(90, 120, 150, .85) 51%, transparent 55%);
  animation: slice .45s .45s ease-out both;
  pointer-events: none;
}

/* 遊び方（v0.10） */
.drawer__ops { display: flex; gap: 8px; margin-left: auto; }
.howto__lead { margin: 0; line-height: 1.7; }
.howto__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.howto__steps li { display: flex; gap: 10px; align-items: flex-start; }
.howto__steps p { margin: 2px 0 0; color: var(--muted); line-height: 1.6; }
.howto__steps b { color: var(--text); }
.howto__n {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--panel-2); color: var(--accent); font-weight: 700;
}
.howto__card { display: flex; justify-content: center; margin: 6px 0 10px; }
.howto__card .card { cursor: default; }

.slot__hold {
  position: absolute; top: -9px; left: 50%; translate: -50% 0; z-index: 3;
  color: var(--accent); font-size: 11px; background: var(--panel);
  border: 1px dashed var(--accent); border-radius: 999px; padding: 0 8px;
}

/* ドロップ先。置けるフェイズは縁を少し明るくし、ドラッグ中は光らせる */
[data-drop] .card--empty { border-color: #c08a4a; color: var(--text); }
body.drag-vegetable [data-drop="vegetable"] .card,
body.drag-recipe [data-drop="recipe"] .card { border-color: var(--accent); background: var(--accent-soft); }
.is-drop-over .card { box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgb(var(--carrot-rgb) / .45); }

/* 相性早見表（相手の候補 × 自分の手札）。構えフェイズではこれが手札そのもの（v0.10.1） */
.hand__cards--mx { display: flex; gap: 14px; align-items: flex-start; overflow: auto; }
.hand__sub { color: var(--accent-ink); font-size: 11px; font-weight: 400; }
.mx__table { border-collapse: collapse; font-size: 12px; }
.mx__table th, .mx__table td { border: 1px solid var(--line); padding: 3px 8px; text-align: center; }
/* 決定ボタンの列。罫線を持たせず、余白として見せる */
.mx__table .mx__okcell { border: 0; padding: 0 6px 0 0; width: 104px; }
.mx__corner { color: var(--muted); font-weight: 400; font-size: 12px; text-align: right; position: relative; cursor: help; }
.mx__axes { display: inline-flex; align-items: center; gap: 2px; }
.mx__axes i { font-style: normal; color: var(--line); }
.mx__axes b { margin-left: 4px; color: var(--text); font-size: 12px; }
.mx__veg { padding: 3px 6px; }
.mx__vegname { display: block; font-size: 10px; font-weight: 400; white-space: nowrap; }
.mx__vegname b { color: var(--accent-ink); }
.mx__pick {
  display: flex; gap: 6px; align-items: baseline; width: 100%;
  background: none; border: 0; color: inherit; font: inherit; font-weight: 700;
  padding: 2px 4px; border-radius: 4px; white-space: nowrap; text-align: left;
}
/* 行が手札の1枚。押してもドラッグしても構えに置ける。
   表の行は「押せる」ことが伝わりにくいので、常にボタンの形で組む（v0.11.3） */
button.mx__pick {
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(120, 90, 50, .12);
}
button.mx__pick:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
button.mx__pick:active { transform: translateY(1px); box-shadow: none; }
.mx__go { color: var(--muted); font-weight: 700; }
button.mx__pick:hover .mx__go { color: var(--primary); }

/* ガイド中だけの強調。覚えたら（コーチを切ったら）消える */
.mx__table--guided button.mx__pick { border-color: var(--accent); background: var(--accent-soft); }
.mx__table--guided .mx__name { color: var(--accent-ink); }
.mx__table--guided .mx__go { color: var(--accent-ink); }
.mx__name { flex: 1 1 auto; }
.mx__power, .mx__lock { color: var(--muted); font-weight: 400; font-size: 11px; display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.mx__avg { color: var(--muted); font-weight: 400; }
.mx__table tbody .mx__avg { color: var(--text); font-weight: 700; }
.mx__row.is-disabled th, .mx__row.is-disabled td { opacity: .4; }
.mx__row.is-selected th, .mx__row.is-selected td { background: rgb(var(--carrot-rgb) / .12); }
.mx__row.is-selected .mx__pick { color: var(--accent-ink); }
.mx__table td small { display: block; font-size: 9px; font-weight: 400; color: var(--muted); }
.mx__table .veg-chip { margin: 0 auto; }
.veg-chip {
  width: 30px; height: 30px; padding: 2px;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  font-size: 12px; cursor: help;
}
.veg-chip svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 .6px rgba(96, 70, 40, .6)); }

/* 調理結果 */
.result {
  flex: 0 1 380px; min-width: 260px;
  display: grid; gap: 8px; align-content: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px;
}
.result__banner { font-size: 22px; font-weight: 800; color: var(--crit); text-align: center; }
.result__deltas { display: flex; gap: 10px; }
.result__delta {
  flex: 1; display: grid; justify-items: center;
  background: var(--panel-2); border-radius: 8px; padding: 4px 8px;
}
.result__delta span { font-size: 11px; color: var(--muted); }
.result__delta b { font-size: 26px; line-height: 1.15; color: var(--fail); }
.result__delta--dealt b { color: var(--gauge); }
.result__delta--heal b { color: var(--veg); }
/* 増減が無いラウンドは色を付けない（--taken / --dealt より後に書いて打ち消す） */
.result__delta.is-zero b { color: var(--muted); }
.hit--mine .hit__dmg { color: var(--gauge); }
.hit--mine.hit--crit .hit__dmg { color: var(--crit); }
.result__delta small { font-size: 10px; color: var(--muted); min-height: 1.5em; }
.result__delta.is-zero b { color: var(--muted); }
.result__hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.hit { font-size: 12px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; cursor: help; }
.hit > b { color: var(--muted); font-weight: 500; min-width: 3.2em; }
.hit__mark { font-weight: 700; }
.hit__dmg { font-weight: 800; font-size: 15px; }
.hit__self { color: var(--fail); font-size: 12px; }
.hit--crit .hit__mark, .hit--crit .hit__dmg { color: var(--crit); }
.hit--x .hit__mark, .hit--nil .hit__mark { color: var(--fail); }
.hit--pass { color: var(--muted); cursor: default; }

/* --- ログ（引き出し） --------------------------------------------------- */
.log-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(var(--ink-rgb) / .35); }
.log {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(420px, 100vw); overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgb(var(--ink-rgb) / .28);
  padding: 0 16px 14px;
}
/* 見出しの帯は、下へ読み進めても上に残す（閉じるがいつも届く。v0.15.1） */
.log__head {
  position: sticky; top: 0; z-index: 3; margin: 0 -16px 10px; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; background: var(--panel);
}
.log__head h2 { font-size: 15px; margin: 0; display: flex; align-items: center; gap: 6px; }
.log__rounds { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.log__round h3 {
  font-size: 12px; color: var(--accent); margin: 0 0 4px;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.log__round ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.log__item { font-size: 12px; }
.log__item--action { color: var(--muted); }
.log__item--damage.log__item--p1 { color: #b8402b; }
.log__item--end { color: var(--crit); font-weight: 700; }
.log__empty { color: var(--muted); font-size: 12px; }

/* --- 相性表（引き出し） ------------------------------------------------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(var(--ink-rgb) / .35); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(860px, 100vw); overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgb(var(--ink-rgb) / .28);
  padding: 0 18px 18px;
  display: grid; gap: 18px; align-content: start;
}
.drawer__head {
  position: sticky; top: 0; z-index: 3; margin: 0 -18px; padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center; background: var(--panel);
}
.drawer__head h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 6px; }
.drawer h3 { font-size: 14px; color: var(--text); margin: 0 0 6px; }
.guide__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.guide__scroll { overflow-x: auto; }
.guide__table { border-collapse: collapse; font-size: 12px; width: 100%; }
.guide__table th, .guide__table td {
  border-bottom: 1px solid var(--line); padding: 3px 6px;
  text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.guide__table thead th { color: var(--muted); font-weight: 500; }
.guide__table--grades { width: auto; }
.guide__table--grades th { font-weight: 500; }
.guide__table--grades td:last-child { text-align: left; }
.guide__name { text-align: left !important; }
.guide__note { text-align: left !important; color: var(--muted); white-space: normal !important; min-width: 220px; }
.guide__muted { color: var(--muted); }
.grade-cell { font-weight: 700; }
.grade-cell--crit { color: #8a5c00; background: rgba(240, 196, 80, .35); }
.grade-cell--circle { color: var(--text); }
.grade-cell--triangle { color: var(--muted); }
.grade-cell--x { color: #b8402b; background: rgba(214, 110, 90, .2); }
.guide__rules { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; }
.guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12px; }
.guide__list li { display: grid; gap: 1px; }
.guide__list span { color: var(--muted); }
/* 属性の野菜の絵・キャラクターの顔（v0.15.1。名前は文字で並んでいるので、絵は飾り） */
.guide__icons { display: flex; gap: 3px; margin: 3px 0 1px; }
.guide__icons i { width: 28px; height: 28px; display: grid; place-items: center; background: var(--card-bg); border: 1px solid var(--line); border-radius: 50%; }
.guide__icons svg { width: 21px; height: 21px; }
.guide__list--chars li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.guide__list--chars li > :not(.guide__face) { grid-column: 2; }
.guide__face {
  grid-row: 1 / span 2; width: 48px; height: 48px; display: grid; place-items: end center; overflow: hidden;
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 12px;
}
.guide__face svg { width: 100%; height: 100%; display: block; }

/* --- カード -------------------------------------------------------------
   表面は判断に要る最小限だけ（野菜＝絵・名前・属性・硬さ／調理法＝コスト・名前・威力）。
   残りは .card__detail に畳んであり、ホバーで tooltip.js が .card-tip に写して出す。
   高さを固定して、中身の量でカードの大きさが揃わなくなるのを防ぐ。 */
.card {
  --text: var(--card-text); --muted: var(--card-muted);
  color: var(--text);
  position: relative;
  width: var(--card-w); height: var(--card-h);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  text-align: left;
  display: grid;
  gap: 4px;
  align-content: start;
  overflow: hidden;
}
button.card { transition: transform .12s, border-color .12s; }
button.card:hover { transform: translateY(-4px); border-color: var(--accent); }
/* 手札はドラッグで出せる。タッチでは指の動きをスクロールに取られないようにする */
button.card[data-uid] { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.card.is-dragging { opacity: .35; }
/* 仮置き（まだ確定していない札）。破線で「まだ動かせる」ことを示し、押すと手札に戻る */
@keyframes held-in {
  from { transform: translateY(6px) scale(.96); opacity: .4; }
  to { transform: none; opacity: 1; }
}
.card.is-pending {
  border-style: dashed; border-color: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 2px rgb(var(--carrot-rgb) / .3);
}
/* ドラッグで置いた瞬間だけ、落とした所でぽんと乗る（クリックで置いた札は main.js が手札から飛ばす） */
.field.is-landing .card.is-pending { animation: held-in .16s ease-out; }
.card.is-pending:hover { border-style: solid; }
.drag-ghost {
  position: fixed; left: 0; top: 0; margin: 0; z-index: 200;
  pointer-events: none;
  border-color: var(--accent);
  transform: rotate(-3deg);
  box-shadow: 0 14px 30px rgb(var(--ink-rgb) / .35);
}
.card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.card.is-disabled { opacity: .4; }
.card--back {
  background: repeating-linear-gradient(45deg, var(--card-back-a), var(--card-back-a) 6px, var(--card-back-b) 6px, var(--card-back-b) 12px);
  color: var(--muted); align-content: center; justify-items: center;
}
.card--empty { border-style: dashed; color: var(--muted); align-content: center; justify-items: center; gap: 2px; }
.card--empty .glyph { width: 40px; height: 40px; color: #b5c0b8; stroke-width: 1.6; }
.card--empty small { font-size: 12px; }
[data-drop] .card--empty .glyph { color: #b4844c; }
.card--back .glyph { width: 34px; height: 34px; stroke-width: 1.6; }
/* 伏せ札のコストは、縞の上で埋もれないよう白い縁で囲む（v0.15.5） */
.card--back .card__cost { box-shadow: 0 0 0 2px var(--card-bg); }
.card--mini .glyph { width: 20px; height: 20px; }
/* 相手の非公開札は枚数だけ小さく示す */
.card--mini { width: 40px; height: 56px; padding: 4px; }
.card--mini span { font-size: 9px; }
/* 伏せ札でもコストだけは表に出す（v0.10） */
.card--mini .card__cost { font-size: 13px; margin: 0 auto; }
.card__detail { display: none; }

.card__name { font-weight: 700; font-size: 14px; line-height: 1.3; text-align: center; }

/* 野菜：絵を主役にして、残りの行はすべて絵に譲る */
.card--veg {
  border-left: 3px solid var(--veg);
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 2px;
}
.card__art { min-height: 0; display: flex; justify-content: center; }
/* SVG 側の width/height は 96px 固定なので、ここで枠に合わせる（viewBox で縦横比は保たれる） */
.card__art svg {
  width: 100%; height: 100%; display: block;
  /* 野菜の絵は暗い地色の頃に描いたもので、白っぽい野菜（大根・かぶ・れんこん）は
     明るい地では沈む。輪郭と落ち影を CSS で足して、絵そのものは触らずに立たせる */
  filter:
    drop-shadow(0 0 .6px rgba(96, 70, 40, .65))
    drop-shadow(0 1px 1.5px rgba(96, 70, 40, .22));
}
.card--veg .card__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 属性（左上）と硬さ（右上）は絵の角に重ねる */
.card__badge {
  position: absolute; top: 5px;
  font-size: 10px; line-height: 1.5; padding: 0 4px;
  background: rgba(255, 252, 245, .88); border: 1px solid var(--line); border-radius: 4px;
}
.card__badge--attr { left: 5px; color: var(--veg); font-weight: 700; }
.card__badge--hard { right: 5px; color: var(--muted); }
.card__badge--hard b { color: var(--text); font-size: 13px; margin-left: 1px; }
/* 節約（安い野菜）の印は属性の下に */
.card__badge--thrift { top: 26px; left: 5px; color: var(--gauge); font-size: 9px; }
.card__thrift { font-size: 11px; color: var(--gauge); }
.chip--thrift { color: var(--gauge); border-color: #a8cfe4; }

/* 調理法：コストと威力を上段、名前を中央、予測（または使えない理由）を下段 */
.card--recipe {
  border-left: 3px solid var(--accent);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
}
.card--recipe .card__name { align-self: center; font-size: 15px; }
.card__row { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.card__power { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; }
.card__power b { font-size: 16px; color: var(--text); margin-left: 2px; }
.card--recipe .card__lock { text-align: center; }

/* ホバーで出る詳細（body 直下に置くので、カラムの overflow に切り抜かれない） */
.card-tip {
  position: fixed; z-index: 100;
  width: 250px; max-width: calc(100vw - 16px);
  display: grid; gap: 5px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgb(var(--ink-rgb) / .3);
  color: var(--text);
  font-size: 13px; line-height: 1.5;
  pointer-events: none;  /* 浮き札にマウスが乗ってカードから外れた扱いにならないように */
}
.card-tip[hidden] { display: none; }
.card-tip--veg { border-left-color: var(--veg); }
.card-tip > span { display: block; }
.tip__head { display: flex !important; align-items: center; gap: 6px; }
.tip__name { font-weight: 700; font-size: 15px; margin-right: auto; }
.card-tip .card__text { font-size: 12px; display: block; }
.card__cost {
  font-size: 12px; font-weight: 700; color: #f4fbff;
  background: var(--gauge); border-radius: 4px;
  min-width: 18px; text-align: center; padding: 0 4px;
}
.card__cost--free { background: var(--line); color: var(--muted); }
.card__attr, .card__tool { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.card__stat { font-size: 12px; color: var(--muted); }
.card__stat strong { color: var(--text); font-size: 15px; }
.card__price { float: right; color: var(--veg); font-weight: 700; }
.card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 10px; background: #edf1ee; border-radius: 4px; padding: 0 5px; }
.tag--none { background: transparent; color: var(--muted); }
.card__grades { display: flex; flex-wrap: wrap; gap: 3px; }
.grade { font-size: 10px; border-radius: 4px; padding: 0 4px; background: #edf1ee; }
.grade--crit { background: #f7e2ab; color: #8a5c00; }
.grade--x { background: #f7d8d1; color: #b8402b; }
.card__text { font-size: 11px; color: var(--muted); line-height: 1.4; }
.card__origin { font-size: 10px; color: var(--accent-ink); }
.card__lock { font-size: 10px; color: var(--fail); }

/* 構えフェイズの予測ダメージ（伏せられた候補それぞれに対して何点出るか） */

/* --- 画面の大きさ別 ------------------------------------------------------ */

/* 大きい画面（フル HD 以上）は余白をカードの大きさに回して読みやすくする */
@media (min-width: 1280px) and (min-height: 940px) {
  :root { --card-w: 172px; --card-h: 148px; }
  body { font-size: 15px; }
  .status { flex-basis: 320px; }
  .card { padding: 10px; }
  .card__name { font-size: 16px; }
  .card--recipe .card__name { font-size: 17px; }
  .card__badge { font-size: 11px; }
  .card__badge--hard b,   .card__power b { font-size: 18px; }
  .card-tip { width: 280px; font-size: 14px; }
  .card-tip .card__text { font-size: 13px; }
  .card-tip   .card-tip   .card-tip .card__stat strong { font-size: 17px; }
  .card-tip :is(.grade, .tag, .card__attr, .card__tool) { font-size: 11px; }
  .hit { font-size: 13px; }
}

/* 縦が足りない画面（1366x768 など）は段階的に縮める */
@media (max-height: 779px) {
  :root { --card-w: 136px; --card-h: 118px; }
  body { font-size: 13px; }
  .card { padding: 7px; gap: 3px; }
  .card__name { font-size: 13px; }
  .card--recipe .card__name { font-size: 14px; }
  .screen--game { gap: 8px; padding: 8px; }
  .seat { padding: 8px 12px; }
  .table { padding: 8px 12px; gap: 6px; }
  .hand h2 { margin-bottom: 4px; }
  .result { padding: 8px 12px; gap: 6px; }
  .result__delta b { font-size: 22px; }
}
@media (max-height: 679px) {
  :root { --card-w: 120px; --card-h: 100px; }
  .card { padding: 6px; }
  .card__badge { top: 4px; font-size: 9px; }
  .card__badge--attr { left: 4px; }
  .card__badge--hard { right: 4px; }
  .card__badge--thrift { top: 22px; left: 4px; font-size: 8px; }
  .card__badge--hard b { font-size: 12px; }
  .card__power b { font-size: 15px; }
  .card--veg .card__name { font-size: 12px; }
  /* 決定ボタンの場所を手札の下に常時空けるぶん、卓まわりの余白を詰める（v0.11.4） */
  .screen--game { gap: 5px; padding: 6px; }
  .table { padding: 6px 12px; }
  .seat { padding: 7px 12px; }
  .hand h2 { margin-bottom: 3px; }
  .status { gap: 3px; }
  .result__delta b { font-size: 18px; }
  /* まな板と調理台の縁、壁の飾りを詰める（v0.11） */
  .board, .counter { padding: 6px 8px 8px; }
  .card-ok { padding: 1px 10px; font-size: 11px; }
  .hand__ok { min-height: 19px; }
  .board::after { width: 18px; }
  .board--foe::after { left: -12px; }
  .board--me::after { right: -12px; }
  .rack { width: min(330px, 46%); height: min(76px, 22%); top: 0; }
  /* 早見表を詰めて、1画面に収める（v0.10） */
  /* ボタンの縁のぶん行が高くなるので、狭い画面ではセルの余白を詰める */
  .mx__table th, .mx__table td { padding: 0 6px; }
  .mx__pick { padding: 0 4px; }
}

/* 狭い画面：席の中身を縦に積み、ページごとスクロールさせる */
@media (max-width: 820px) {
  .screen--game { height: auto; min-height: 100dvh; grid-template-rows: none; }
  .seat { flex-direction: column; align-items: stretch; gap: 8px; }
  .status { flex-basis: auto; }
  .table { overflow: visible; }
  .field { justify-content: flex-start; }
  .result { flex-basis: 100%; }
  .screen--builder { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .builder__pool, .builder__deck { overflow: visible; }
}

/* ==========================================================================
   デザインのテンプレ（v0.13.2 → v0.14）。<html data-theme="…"> で全画面の色・書体・ロゴの飾り方を差し替える。
   :root の値は「白い琺瑯」。v0.14 から既定は「おひさまキッチン」（index.html が data-theme="sunny" を付ける）。
   ほかは URL の ?theme=<id> で見られるテンプレとして残す。定義の一覧は src/ui/themes.js の THEMES。
   どのデザインでも、文字と地の濃さの比 4.5:1 以上を tools/checks.js が測る
   ========================================================================== */

/* --- v0.13「暖かいクリーム」：v0.13 の色・書体・ロゴ・ホームの形を再現する。
       ただし控えめな文字と橙の文字だけは、基準（4.5:1）に届くよう濃くした（v0.13 は届いていなかった） */
:root[data-theme="cream"] {
  --bg: #fbf1df; --panel: #fffaf1; --panel-2: #f6ead6; --card-bg: #f6ead6; --line: #e0cdae; --outline: #d9c5a5;
  --text: #3d2e1e; --muted: #75624b;
  --primary: #d4711f; --primary-dark: #d4711f; --primary-hover: #c96619; --primary-soft: #fae2c6; --on-primary: #1a1209;
  --accent: #d4711f; --accent-ink: #a5520f; --accent-soft: #fae2c6;
  --veg: #4a9438; --crit: #b07600; --fail: #cc4230; --gauge: #1f77a8;
  --mint: #2f9c8a; --mint-ink: #22786a; --mint-soft: #d5eee8;
  --ink-rgb: 61 46 30; --rim-rgb: 212 113 31; --carrot-rgb: 212 113 31; --tomato-rgb: 204 66 48;
  --life-fill: linear-gradient(90deg, #d4711f, #f0a93c);
  --wall: #fdf7ec; --wall-grout: rgb(150 120 80 / .13); --wall-light: rgb(255 255 255 / .85); --lamp: rgb(255 240 210 / .75);
  --stone-edge: rgb(120 110 95 / .45); --stone-1: #eae7de; --stone-2: #e1ddd2; --stone-3: #cfc9ba;
  --card-back-a: #ecdcc0; --card-back-b: #e3d0ae; --title-grout: rgb(224 205 174 / .45);
  --font-body: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-display: var(--font-body);
}
:root[data-theme="cream"] .btn--primary, :root[data-theme="cream"] .mode-card__go { box-shadow: none; }
:root[data-theme="cream"] .btn--start { box-shadow: 0 4px 12px rgb(212 113 31 / .3); }
:root[data-theme="cream"] .mode-card--online .mode-card__go { background: var(--mint); color: #fff; }
/* v0.13 のロゴ：字は切れておらず、「&」だけ橙 */
:root[data-theme="cream"] .logo { font-weight: 700; gap: .25em; }
:root[data-theme="cream"] .logo__slice { color: inherit; }
:root[data-theme="cream"] .logo__slice::before, :root[data-theme="cream"] .logo__slice::after, :root[data-theme="cream"] .logo__cut { display: none; }
:root[data-theme="cream"] .logo__amp { color: var(--accent); font-size: 1em; font-weight: inherit; }
/* v0.13 のホーム：PLAY と DECK が同じ大きさ（PLAY は橙・DECK はミント） */
:root[data-theme="cream"] .home__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
:root[data-theme="cream"] .home-tile { border-width: 1px; border-radius: 24px; min-height: 220px; }
:root[data-theme="cream"] .home-tile--play { background: var(--primary-soft); border-color: #e7b989; color: var(--text); box-shadow: none; }
:root[data-theme="cream"] .home-tile--play:hover { background: var(--primary-soft); border-color: var(--accent); }
:root[data-theme="cream"] .home-tile--play .home-tile__en { color: var(--accent); font-size: 40px; }
:root[data-theme="cream"] .home-tile--play .home-tile__sub { color: var(--muted); opacity: 1; }
:root[data-theme="cream"] .home-tile--deck { background: #f1faf7; border-color: var(--mint-soft); }
:root[data-theme="cream"] .home-tile--deck .home-tile__en { color: var(--mint-ink); font-size: 40px; }

/* --- 八百屋の店先：葉の緑（押すもの）と値札の山吹色（いま見る所）。日よけの縞と、手書きの値札のような看板の書体 */
:root[data-theme="yaoya"] {
  --bg: #e6f1dc; --panel: #ffffff; --panel-2: #f1f7ea; --card-bg: #fffef6; --line: #cadcbc; --outline: #b9cfaa;
  --text: #1f2a1c; --muted: #55614e;
  --primary: #2e7a3a; --primary-dark: #1f5a29; --primary-soft: #e3f0dc; --on-primary: #ffffff;
  /* 黄色は白地で 3:1 に届かない（選んだ札の縁が見えない）ので、値札の山吹色を一段深くした */
  --accent: #d97a00; --accent-ink: #8a4f00; --accent-soft: #fdeccb;
  --mint: #3e9a5a; --mint-ink: #2b7a45; --mint-soft: #dcefe2;
  --ink-rgb: 31 42 28; --rim-rgb: 46 122 58; --carrot-rgb: 217 122 0;
  --life-fill: #ee7a2c;
  --wall: #f7fbf3; --wall-grout: rgb(120 160 110 / .18); --wall-light: rgb(255 255 255 / .85); --lamp: rgb(255 252 235 / .7);
  --stone-edge: rgb(110 120 100 / .45); --stone-1: #e9ebe2; --stone-2: #dfe2d6; --stone-3: #cdd2c2;
  --card-back-a: #e3f0dc; --card-back-b: #d3e6c9; --title-grout: rgb(120 160 110 / .25);
  --font-body: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-display: "Mochiy Pop One", var(--font-body);
}
:root[data-theme="yaoya"] .logo, :root[data-theme="yaoya"] .home-tile__en, :root[data-theme="yaoya"] .menu-bar__title { font-weight: 400; font-synthesis: none; }
/* 店先の日よけ（緑と白の縞と、裾の波） */
:root[data-theme="yaoya"] .screen--menu, :root[data-theme="yaoya"] .screen--title { position: relative; }
:root[data-theme="yaoya"] .screen--menu { padding-top: 44px; }
:root[data-theme="yaoya"] .screen--menu::before, :root[data-theme="yaoya"] .screen--title::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 16px; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--primary) 0 30px, #ffffff 30px 60px);
}
:root[data-theme="yaoya"] .screen--menu::after, :root[data-theme="yaoya"] .screen--title::after {
  content: ''; position: fixed; top: 16px; left: 0; right: 0; height: 8px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 15px 0, var(--primary) 7.5px, transparent 8px) 0 0 / 60px 8px repeat-x;
}

/* --- 夜の屋台：藍ののれんの夜に、提灯に照らされた紙。地は暗いが、文字の載る面はすべて紙にする
       （メニューの画面は紙の品書きとして夜の地に浮かべる。暗い地に文字を直に置かない） */
:root[data-theme="yatai"] {
  --bg: #1e2536; --panel: #fbf4e6; --panel-2: #f2e7d1; --card-bg: #fffaf0; --line: #ddcba8; --outline: #cdb994;
  --text: #2a2219; --muted: #66594a;
  --primary: #263a6b; --primary-dark: #18264a; --primary-soft: #e4e8f2; --on-primary: #fbf4e6;
  --accent: #d8452e; --accent-ink: #ad321e; --accent-soft: #fbe1d9;
  --gauge: #2a62b8; --fail: #c8372a;
  --ink-rgb: 20 24 36; --rim-rgb: 38 58 107; --carrot-rgb: 216 69 46; --tomato-rgb: 200 55 42;
  --life-fill: #d8452e;
  --wall: #f4e8d0; --wall-grout: rgb(150 110 60 / .16); --wall-light: rgb(255 214 150 / .55); --lamp: rgb(255 205 140 / .5);
  --stone-edge: rgb(90 70 50 / .5); --stone-1: #e3d6bd; --stone-2: #d8c9ad; --stone-3: #c3b08f;
  --card-back-a: #2c3c66; --card-back-b: #24335a; --title-grout: transparent;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Dela Gothic One", var(--font-body);
}
:root[data-theme="yatai"] .logo, :root[data-theme="yatai"] .home-tile__en, :root[data-theme="yatai"] .menu-bar__title { font-weight: 400; font-synthesis: none; }
:root[data-theme="yatai"] .screen--menu { background: var(--panel); border-radius: 22px; margin: 24px auto; padding: 24px 28px 40px; }
:root[data-theme="yatai"] .screen--title { background: radial-gradient(55% 45% at 50% 40%, rgb(255 180 100 / .22), transparent 70%), var(--bg); }
:root[data-theme="yatai"] .title { background: var(--panel); border-radius: 28px; padding: 36px 52px 30px; box-shadow: 0 0 60px rgb(255 170 90 / .25); }
:root[data-theme="yatai"] .card--back { color: #e9dcc2; }



/* ==========================================================================
   ゲームらしさ（v0.13.3）。フィードバック「ゲームっぽい雰囲気がない・コントラストが低い・操作というより作業っぽい・
   没入感がほしい・スイカゲームのような地色」から。色と書体は「デザイン」（data-theme）、
   操作への返事の動きは「手触り」（data-feel="game"）に分けた。どちらも src/ui/themes.js の THEMES で組む
   ========================================================================== */

/* --- 手触り「ゲーム」：押したら沈み、触ると弾む。どれも操作への返事で、勝手には動き続けない */
:root[data-feel="game"] .btn {
  border-width: 2px; font-weight: 800;
  box-shadow: 0 4px 0 var(--outline-strong, var(--primary-dark));
  transition: translate .08s, box-shadow .08s, background-color .15s, border-color .15s;
}
:root[data-feel="game"] .btn:hover:not(:disabled) { translate: 0 -1px; box-shadow: 0 5px 0 var(--outline-strong, var(--primary-dark)); }
:root[data-feel="game"] .btn:active:not(:disabled) { translate: 0 3px; box-shadow: 0 1px 0 var(--outline-strong, var(--primary-dark)); }
:root[data-feel="game"] .btn--text, :root[data-feel="game"] .btn--text:hover:not(:disabled) { box-shadow: none; translate: none; }
:root[data-feel="game"] .mode-card__go { box-shadow: 0 4px 0 var(--outline-strong, var(--primary-dark)); }
:root[data-feel="game"] .home-tile:active, :root[data-feel="game"] .mode-card__main:active:not(:disabled) { translate: 0 3px; }
/* 手札は触ると跳ね上がって少し傾き、選ぶともう一段持ち上がる。置いた札はぽんと乗る */
:root[data-feel="game"] button.card { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, border-color .15s; }
:root[data-feel="game"] button.card:hover { transform: translateY(-8px) rotate(-1.5deg) scale(1.04); }
:root[data-feel="game"] .card.is-selected { transform: translateY(-10px) scale(1.06); box-shadow: 0 0 0 3px var(--accent), 0 10px 0 rgb(var(--ink-rgb) / .3); }
/* 持ち上げた札が手札の見出し（「野菜 4」）に被らないよう、持ち上がる分だけ上を空けておく */
:root[data-feel="game"] .hand__cards:not(.hand__cards--mini) { padding-top: 8px; }
:root[data-feel="game"] .field.is-landing .card.is-pending { animation: pop-in .3s cubic-bezier(.3, 1.6, .5, 1); }
:root[data-feel="game"] button.mx__pick { transition: transform .15s cubic-bezier(.3, 1.6, .5, 1); }
:root[data-feel="game"] button.mx__pick:hover { transform: scale(1.04); }
:root[data-feel="game"] button.mx__pick:active { transform: scale(.97); }
/* 結果の数字は大きく、調理の瞬間には飛び出す */
:root[data-feel="game"] .result__delta b { font-family: var(--font-display); font-size: 38px; }
:root[data-feel="game"] .result.is-entering .result__delta b { animation: pop-in .4s 1.05s both cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-feel="game"] button.card:hover, :root[data-feel="game"] .card.is-selected, :root[data-feel="game"] button.mx__pick:hover { transform: none; }
  :root[data-feel="game"] .field.is-landing .card.is-pending, :root[data-feel="game"] .result.is-entering .result__delta b { animation: none; }
}

/* --- おひさまキッチン：スイカゲームのような、明るく濃い黄色〜橙の地。太い焦げ茶の縁と硬い影（カジュアルなゲームの窓）、
       白抜きに縁取りのロゴ、看板の書体は RocknRoll One */
:root[data-theme="sunny"] {
  --bg: #ffd25e; --panel: #fffaf0; --panel-2: #fff0cc; --card-bg: #ffffff; --line: #e2b965; --outline: #d9a94f;
  --outline-strong: #4a2f1d;
  --text: #3b2414; --muted: #6b4a2b; --card-text: #3b2414; --card-muted: #6b4a2b;
  --primary: #ff8a1f; --primary-dark: #c95f00; --primary-hover: #ff9a3c; --primary-soft: #ffe7c7; --on-primary: #3b2414;
  --accent: #d6246e; --accent-ink: #b0135c; --accent-soft: #ffdcea; --on-accent: #ffffff;
  --veg: #2c9a4b; --crit: #a86a00; --fail: #d8342c; --gauge: #1f6fd6;
  --mint: #2c9a4b; --mint-ink: #237a3c; --mint-soft: #d7f0dc;
  --ink-rgb: 74 47 29; --rim-rgb: 255 138 31; --carrot-rgb: 214 36 110; --tomato-rgb: 216 52 44;
  --life-fill: #ff8a1f;
  --wall: #fff4d2; --wall-grout: rgb(200 150 60 / .2); --wall-light: rgb(255 255 255 / .7); --lamp: rgb(255 255 255 / .55);
  --stone-edge: rgb(74 47 29 / .5); --stone-1: #ffe2a6; --stone-2: #f7d390; --stone-3: #e9bd6c;
  /* 伏せ札は杏色の縞（v0.15.5。桃色だと不自然と言われた）。押すものの橙 #ff8a1f より明るく、縞と縁で札に見せる */
  --card-back-a: #ffbd6e; --card-back-b: #ffab4f; --title-grout: rgb(255 255 255 / .25);
  --font-body: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-display: "RocknRoll One", var(--font-body);
}
/* 背景の野菜（v0.15.3 → v0.15.7。backdrop.js がタイルを入れる）を、地のぼかしの上に壁紙として重ねる。
   START 以降の画面は白い形（控えめ。DECK などの詰まった画面で文字やボタンと張り合わない） */
:root[data-theme="sunny"] body {
  background: var(--backdrop, none) 0 0 / 420px 420px repeat, radial-gradient(130% 90% at 50% 0%, #ffe48f 0%, #ffd25e 45%, #ffb94a 100%) fixed;
}
/* タイトルだけは絵の色を6割残して大きめに（最初に見る画面なので強く。色そのままは強すぎた）。タイトルの画面そのものに持たせるので、
   START を押すと画面の写しと一緒に抜け、後ろの控えめな背景が現れる。白い目地は外す（目地と柄を重ねるとうるさい） */
:root[data-theme="sunny"] .screen--title {
  background: var(--backdrop-title, none) 0 0 / 504px 504px repeat, radial-gradient(130% 90% at 50% 0%, #ffe48f 0%, #ffd25e 45%, #ffb94a 100%);
}
/* 強い背景の上でも読めるよう、タイトルの1行は白い札に載せる（押せないので下への厚みは付けない） */
:root[data-theme="sunny"] .title__tag {
  background: var(--panel); border: 2px solid var(--outline-strong); border-radius: 999px; padding: 4px 16px;
}
:root[data-theme="sunny"] :is(.seat, .table, .char-card, .deck-card, .mode-card, .home-tile, .dialog, .using, .title__veg, .corner__btn) {
  border: 3px solid var(--outline-strong); box-shadow: 0 5px 0 var(--outline-strong);
}
:root[data-theme="sunny"] :is(.seat, .table) { border-radius: 18px; }
:root[data-theme="sunny"] :is(.seat__face, .char-card__face) { border: 3px solid var(--outline-strong); }
:root[data-theme="sunny"] .card { border: 2px solid var(--outline-strong); }
:root[data-theme="sunny"] .card--veg { border-left: 5px solid var(--veg); }
/* 伏せ札の絵（野菜・伏せた印）は焦げ茶。杏色の縞の上で、緑や控えめな茶色では沈むため（3:1 以上を checks.js が測る） */
:root[data-theme="sunny"] .card--back { color: var(--outline-strong); }
:root[data-theme="sunny"] .card--back .glyph { color: var(--outline-strong); }
/* コスト0の札の数字（地は --line）。控えめな茶色だと 4.4:1 で足りなかったので本文の色に（v0.15.5） */
:root[data-theme="sunny"] .card__cost--free { color: var(--text); }
:root[data-theme="sunny"] .btn { border-color: var(--outline-strong); }
:root[data-theme="sunny"] .btn:not(.btn--primary):not(.btn--text) { background: var(--panel); }
:root[data-theme="sunny"] :is(.logo, .home-tile__en, .menu-bar__title) { font-weight: 400; font-synthesis: none; }
/* ロゴは白抜きに太い縁と下への厚み（ゲームの題字）。切れた2枚にもそれぞれ縁を付ける */
:root[data-theme="sunny"] .logo, :root[data-theme="sunny"] .logo__slice::before, :root[data-theme="sunny"] .logo__slice::after {
  color: #fff; -webkit-text-stroke: 10px var(--outline-strong); paint-order: stroke fill; text-shadow: 0 6px 0 var(--outline-strong);
}
:root[data-theme="sunny"] .logo__slice { -webkit-text-stroke: 0; text-shadow: none; }
:root[data-theme="sunny"] .logo__amp { color: #fff; }
:root[data-theme="sunny"] .home-tile--play .home-tile__en { color: #fff; -webkit-text-stroke: 8px var(--outline-strong); paint-order: stroke fill; }
/* 引き出し（遊び方・相性表・ログ）も卓と同じゲームの窓（v0.15.1）：浮いた窓・太い縁と硬い影・橙の見出しの帯と白抜きの題字。
   中は黄色の地に白い小窓を並べる（卓の画面と同じ「黄色の地に窓」の組み立て） */
:root[data-theme="sunny"] :is(.drawer, .log) {
  top: 12px; right: 12px; bottom: 12px; width: min(860px, calc(100vw - 24px));
  border: 3px solid var(--outline-strong); border-radius: 24px; box-shadow: 0 6px 0 var(--outline-strong);
  background: var(--panel-2);
}
:root[data-theme="sunny"] .log { width: min(420px, calc(100vw - 24px)); }
:root[data-theme="sunny"] :is(.drawer__head, .log__head) { background: var(--primary); border-bottom: 3px solid var(--outline-strong); }
:root[data-theme="sunny"] :is(.drawer__head, .log__head) h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 26px; gap: 10px; color: #fff;
  -webkit-text-stroke: 6px var(--outline-strong); paint-order: stroke fill; text-shadow: 0 3px 0 var(--outline-strong);
}
:root[data-theme="sunny"] :is(.drawer__head, .log__head) h2 .glyph {
  width: 34px; height: 34px; padding: 5px; color: var(--outline-strong); background: #fff;
  border: 3px solid var(--outline-strong); border-radius: 50%; box-shadow: 0 3px 0 var(--outline-strong);
}
:root[data-theme="sunny"] :is(.drawer > section:not(.guide__cols), .drawer .guide__cols > div, .log__round, .log__empty) {
  background: var(--panel); border: 3px solid var(--outline-strong); border-radius: 18px;
  box-shadow: 0 4px 0 var(--outline-strong); padding: 12px 14px 14px;
}
:root[data-theme="sunny"] :is(.drawer h3, .log__round h3) {
  font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--text); display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
:root[data-theme="sunny"] .drawer h3::before {
  content: ''; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--primary); border: 2px solid var(--outline-strong);
}
:root[data-theme="sunny"] .log__round h3 { font-size: 15px; border-bottom: 2px dashed var(--line); padding-bottom: 4px; }
:root[data-theme="sunny"] .log__empty { font-size: 13px; text-align: center; }
/* 表：縁で囲み、見出しの行は橙の淡い帯。長い表は1行おきに色を変えて追いやすく */
:root[data-theme="sunny"] .guide__scroll, :root[data-theme="sunny"] .guide__table--grades {
  border: 2px solid var(--outline-strong); border-radius: 12px; background: var(--card-bg);
}
:root[data-theme="sunny"] .guide__table { border-collapse: separate; border-spacing: 0; font-size: 13px; }
:root[data-theme="sunny"] .guide__table--grades { overflow: hidden; }
:root[data-theme="sunny"] .guide__table :is(th, td) { border-bottom: 1px solid var(--line); padding: 5px 8px; }
:root[data-theme="sunny"] .guide__table tbody tr:last-child :is(th, td) { border-bottom: 0; }
:root[data-theme="sunny"] .guide__table thead th { background: var(--primary-soft); color: var(--text); font-weight: 800; border-bottom: 2px solid var(--outline-strong); }
:root[data-theme="sunny"] .guide__table:not(.guide__table--grades) tbody tr:nth-child(even) > :not(.grade-cell--crit):not(.grade-cell--x) { background: #fff6e2; }
:root[data-theme="sunny"] .grade-cell { font-size: 15px; }
:root[data-theme="sunny"] .guide__rules { list-style: none; padding-left: 0; gap: 7px; font-size: 13px; }
:root[data-theme="sunny"] .guide__rules li { position: relative; padding-left: 20px; }
:root[data-theme="sunny"] .guide__rules li::before {
  content: ''; position: absolute; left: 2px; top: .42em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--outline-strong);
}
:root[data-theme="sunny"] :is(.guide__face, .howto__flow li) { border: 2px solid var(--outline-strong); }
:root[data-theme="sunny"] .guide__icons i { border: 2px solid var(--outline-strong); }
/* 遊び方：手順の札・番号・入力のキー・印 */
:root[data-theme="sunny"] .howto__flow li { box-shadow: 0 3px 0 var(--outline-strong); }
:root[data-theme="sunny"] .howto__step {
  width: 26px; height: 26px; background: var(--primary); color: var(--on-primary); border: 2px solid var(--outline-strong);
  font-family: var(--font-display); font-weight: 400; font-size: 14px;
}
:root[data-theme="sunny"] .howto__key { border: 2px solid var(--outline-strong); box-shadow: 0 2px 0 var(--outline-strong); background: var(--card-bg); font-weight: 700; }
:root[data-theme="sunny"] :is(.howto__pill, .howto__tag) { border: 2px solid var(--outline); }
:root[data-theme="sunny"] .howto__pill--pass { border-color: var(--gauge); }
:root[data-theme="sunny"] .howto__slot { border-width: 2px; }
:root[data-theme="sunny"] .howto__goal p { font-size: 16px; font-weight: 700; }

/* --- 炎の鉄板：鉄の黒褐色の地と面に、火の橙（押すもの）と炎の黄（いま見る所）。卓のまわりに残り火の灯り。
       看板の書体は Reggae One。カードは紙のまま（中の文字は濃い色） */
:root[data-theme="fire"] {
  --bg: #170f0c; --panel: #271a14; --panel-2: #1f1510; --card-bg: #fff6ea; --line: #4d3428; --outline: #5e4133;
  --text: #fbefe2; --muted: #d4bba6; --card-text: #2b1d14; --card-muted: #6b5443;
  --primary: #ff6a1a; --primary-dark: #b84300; --primary-hover: #ff8236; --primary-soft: #3b2216; --on-primary: #1a0f0a;
  --accent: #ffcf3a; --accent-ink: #ffcf3a; --accent-soft: #3d3112; --on-accent: #1a0f0a;
  --veg: #62d388; --crit: #ffc24a; --fail: #ff6b5e; --gauge: #57a8ff;
  --mint: #62d388; --mint-ink: #86e6a6; --mint-soft: #1d3527;
  --ink-rgb: 0 0 0; --rim-rgb: 255 106 26; --carrot-rgb: 255 207 58; --tomato-rgb: 255 107 94;
  --life-fill: linear-gradient(90deg, #ff6a1a, #ffcf3a);
  --wall: #231713; --wall-grout: rgb(255 190 140 / .07); --wall-light: rgb(255 120 40 / .22); --lamp: rgb(255 120 40 / .28);
  --stone-edge: rgb(0 0 0 / .6); --stone-1: #3a3330; --stone-2: #2e2826; --stone-3: #211d1b;
  --card-back-a: #5a1f12; --card-back-b: #471709; --title-grout: rgb(255 190 140 / .05);
  --font-body: "M PLUS 1", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Reggae One", var(--font-body);
}
:root[data-theme="fire"] body { background: radial-gradient(90% 70% at 50% 45%, #2a1a12, #120b09 75%) fixed; }
:root[data-theme="fire"] .table { box-shadow: inset 0 0 70px rgb(255 100 30 / .14); }
:root[data-theme="fire"] :is(.logo, .home-tile__en, .menu-bar__title) { font-weight: 400; font-synthesis: none; }
:root[data-theme="fire"] .logo { color: var(--accent); text-shadow: 0 0 22px rgb(255 106 26 / .55); }
/* 切れた2枚は形で切り抜いてあるので、光を字に付けると切り抜きの四角が見える。切り抜いた後の全体に光を付ける */
:root[data-theme="fire"] .logo__slice::before, :root[data-theme="fire"] .logo__slice::after { color: var(--accent); text-shadow: none; }
:root[data-theme="fire"] .logo__slice { text-shadow: none; filter: drop-shadow(0 0 12px rgb(255 106 26 / .6)); }
:root[data-theme="fire"] .logo__amp { color: var(--primary); }
:root[data-theme="fire"] .home-tile--play { background: linear-gradient(180deg, #ff8a2a, #e8500f); }
:root[data-theme="fire"] .screen--title { background: radial-gradient(50% 45% at 50% 45%, rgb(255 110 40 / .22), transparent 70%), var(--bg); }
:root[data-theme="fire"] .title__veg { background: var(--panel); border-color: var(--line); }
:root[data-theme="fire"] :is(.card.is-selected, button.card:hover) { box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgb(255 160 40 / .45); }
/* 紙のカードの中は、紙の上で読める濃さの色に戻す */
:root[data-theme="fire"] .card { --veg: #2f8a4b; --gauge: #1f6fd6; --fail: #c8372a; --crit: #a86a00; }
:root[data-theme="fire"] .card--back { color: #ffcf9a; }
/* 明るい地を前提に色を直書きしていた部品を、暗い面に合わせる */
:root[data-theme="fire"] .card__cost { color: #0d1a2b; }
:root[data-theme="fire"] .card .card__cost { color: #f4fbff; }
:root[data-theme="fire"] .side-tag { background: var(--panel); color: var(--muted); }
:root[data-theme="fire"] .side-tag--me { color: var(--accent); border-color: var(--accent); }
:root[data-theme="fire"] .chip--status { background: var(--mint-soft); color: var(--mint-ink); border-color: #2e5a40; }
:root[data-theme="fire"] .chip--alert { background: #3a1512; color: var(--fail); border-color: #6a2a24; }
:root[data-theme="fire"] .banner { background: #3a2a12; border-color: #6b5222; }
:root[data-theme="fire"] .snackbar { background: #fff6ea; color: #1a0f0a; }
:root[data-theme="fire"] .st { background: #3a2a12; color: #ffd27a; border-color: #6b5222; }
:root[data-theme="fire"] .tag { color: #2b1d14; }
:root[data-theme="fire"] .grade-cell--crit { color: #ffd27a; background: rgb(255 200 80 / .18); }
:root[data-theme="fire"] .grade-cell--x { color: #ff9a90; background: rgb(255 90 80 / .16); }
:root[data-theme="fire"] .log__item--damage.log__item--p1 { color: #ff9a90; }
:root[data-theme="fire"] :is(.life__bar, .budget__bar, .gauge__pip:not(.is-on)) { background: #3a2a22; }


/* ==========================================================================
   調理の瞬間と、札の飛ぶ動き（v0.14）。「没入感」の UI 側。
   main.js が調理した瞬間の1回だけ .is-moment（画面）/.is-revealing（場）/.is-shake（卓）/.is-entering（結果）を付ける。
   段取りは src/ui/effects.js と同じ：0 伏せ札がめくれる → .45s 刃筋と数字 → .9s 結果
   ========================================================================== */
.field.is-revealing .field__side--foe .card { animation: flip-in .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.field.is-revealing .field__side--foe .counter .card { animation-delay: .08s; }
@keyframes flip-in { 0% { transform: perspective(700px) rotateY(90deg); filter: brightness(1.5); } 100% { transform: none; filter: none; } }
.result.is-entering { animation: result-in .4s .9s both cubic-bezier(.3, 1.3, .5, 1); }
@keyframes result-in { from { opacity: 0; transform: translateX(28px) scale(.95); } }
/* 大きな当たりは卓が少し揺れる */
.table.is-shake { animation: shake .42s .47s both; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -7px 2px; } 40% { translate: 6px -2px; } 60% { translate: -4px 1px; } 80% { translate: 3px 0; } }
/* 切られたまな板の上に飛び出す数字（縁取りの太い数字。相手を切ったら白、自分が切られたらトマト色） */
.dmg-pop {
  position: absolute; left: 50%; top: 16%; z-index: 6; pointer-events: none;
  display: grid; justify-items: center; line-height: 1; translate: -50% 0;
  font-family: var(--font-display); font-weight: 400; font-size: 54px; color: #fff;
  -webkit-text-stroke: 8px var(--outline-strong, #3b2414); paint-order: stroke fill;
  animation: dmg-float 1.6s calc(.45s + var(--i) * .15s) both cubic-bezier(.2, .9, .3, 1);
}
.dmg-pop small { font-size: 18px; color: #ffe066; -webkit-text-stroke: 5px var(--outline-strong, #3b2414); margin-top: 4px; }
.dmg-pop--on-me.dmg-pop--hit, .dmg-pop--on-me.dmg-pop--crit { color: #ff8a7a; }
.dmg-pop--crit { font-size: 66px; color: #ffe066; }
.dmg-pop--miss, .dmg-pop--nil { font-size: 34px; color: #eef2f0; }
.dmg-pop--heal { font-size: 40px; color: #8ff0a8; top: 52%; }
@keyframes dmg-float {
  0% { opacity: 0; transform: translateY(16px) scale(.3); }
  18% { opacity: 1; transform: translateY(0) scale(1.2); }
  30% { transform: scale(1); }
  80% { opacity: 1; transform: translateY(-26px); }
  100% { opacity: 0; transform: translateY(-40px); }
}
/* 手札から場へ飛んでいく札の写し（main.js の flipFrom。画面に固定して、卓のスクロールに影響させない） */
.flight { position: fixed; margin: 0; z-index: 150; pointer-events: none; box-shadow: 0 14px 24px rgb(var(--ink-rgb) / .25); }
/* ドラッグ中の札は、持ち上げて傾けた感じに */
:root[data-feel="game"] .drag-ghost { transform: rotate(-6deg) scale(1.06); box-shadow: 0 16px 0 rgb(var(--ink-rgb) / .25); }
@media (prefers-reduced-motion: reduce) {
  .field.is-revealing .card, .result.is-entering, .table.is-shake, .board.is-cut, .board.is-cut .board__top::after,
  .dmg-pop, .is-moment .life__delta, .is-moment .life__ghost { animation: none; }
}

/* ==========================================================================
   キャラクターと場面の切り替わり（v0.15）。「装飾（キャラゲー化）とアニメーション（画面切り替え時など）」。
   主役はキャラクター（portraits.js）。動きは場面が変わった1回だけで、勝手に動き続けるものは置かない。
   ========================================================================== */
/* 席の顔。表情は状態から（moodOf）。調理の瞬間だけ、切られた顔は揺れ、削った顔は跳ねる */
.seat__face {
  flex: none; width: 68px; height: 68px; display: grid; place-items: end center; overflow: hidden;
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 16px;
}
.seat__face svg { width: 100%; height: 100%; display: block; }
.is-moment .seat__face--hurt svg { animation: face-hurt .5s .45s both; }
.is-moment :is(.seat__face--happy, .seat__face--win) svg { animation: face-hop .5s .45s both cubic-bezier(.3, 1.6, .5, 1); }
.is-moment .seat__face--lose svg { animation: face-sink .6s 1s both; }
@keyframes face-hurt { 0%, 100% { translate: 0 0; } 20% { translate: -5px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes face-hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -9px; } }
@keyframes face-sink { from { translate: 0 -6px; } }
@media (max-height: 679px) { .seat__face { width: 58px; height: 58px; border-radius: 13px; } }

/* キャラクターの札：左に顔。選ぶと笑う（選んだ印は ✓ と縁。顔だけにしない） */
.char-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.char-card > :not(.char-card__face) { grid-column: 2; }
.char-card__face {
  grid-column: 1; grid-row: 1 / span 3; width: 64px; height: 64px; display: grid; place-items: end center; overflow: hidden;
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 14px;
}
.char-card__face svg { width: 100%; height: 100%; display: block; }
/* 跳ねるのは選び直した1回だけ（main.js が .is-picked を付ける）。選んでいる印（.is-selected）に付けると、
   デッキを選ぶ・引き出しを開くなどの描き直しのたびに跳ねた（v0.15.4） */
:root[data-feel="game"] .char-card.is-picked .char-card__face svg { animation: face-hop .45s cubic-bezier(.3, 1.6, .5, 1); }

/* タイトルとホームの下端：調理台の向こうから顔を出すキャラクター */
.screen--title, .screen--home { position: relative; }
.screen--home { min-height: 100dvh; padding-bottom: clamp(120px, 28vh, 240px); }
.screen--title { overflow: hidden; padding-bottom: clamp(110px, 26vh, 220px); }
.cast {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: min(100%, 720px);
  display: grid; justify-items: center; pointer-events: none;
}
.cast__row { display: flex; gap: clamp(8px, 3vw, 40px); margin-bottom: calc(-1 * clamp(14px, 3vh, 26px)); }
.cast__one { display: block; }
.cast__one svg { display: block; width: clamp(96px, 24vh, 200px); height: clamp(96px, 24vh, 200px); }
.cast--1 .cast__one svg { width: clamp(104px, 27vh, 220px); height: clamp(104px, 27vh, 220px); }
.cast__counter {
  position: relative; width: 100%; height: clamp(22px, 4vh, 34px);
  border-radius: 12px 12px 0 0; border: 3px solid var(--outline-strong, #8a6a4a); border-bottom: 0;
  background: linear-gradient(#f3d6a8, #dfb783 60%, #cfa26c);
  box-shadow: inset 0 4px 0 rgb(255 255 255 / .45);
}
/* 画面に入ってきた1回だけ、台の向こうから顔を出す（main.js が .is-arriving を付ける。描き直しでは繰り返さない） */
.is-arriving .cast__one { animation: cast-up .5s calc(.12s + var(--i) * .09s) both cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cast-up { from { translate: 0 70%; } }

/* 画面の移り変わり：深く進むときは右から、戻るときは左から。出ていく画面は写し（main.js）で反対へ抜ける */
.is-entering-forward { animation: screen-in-fwd .28s cubic-bezier(.2, .8, .3, 1) both; }
.is-entering-back { animation: screen-in-back .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes screen-in-fwd { from { opacity: 0; translate: 36px 0; } }
@keyframes screen-in-back { from { opacity: 0; translate: -36px 0; } }
.screen-leave { position: fixed; margin: 0; z-index: 30; pointer-events: none; }
.screen-leave--forward { animation: screen-out-fwd .2s ease-in both; }
.screen-leave--back { animation: screen-out-back .2s ease-in both; }
@keyframes screen-out-fwd { to { opacity: 0; translate: -36px 0; } }
@keyframes screen-out-back { to { opacity: 0; translate: 36px 0; } }
/* 引き出し（遊び方・相性表・ログ）は開いた1回だけ、右から滑り込む */
:is(.drawer, .log).is-opening { animation: drawer-in .26s cubic-bezier(.2, .8, .3, 1) both; }
:is(.drawer-backdrop, .log-backdrop).is-opening { animation: fade-in .2s both; }
@keyframes drawer-in { from { translate: calc(100% + 24px) 0; } }

/* 対戦の始まり：左右から2人が出てきて VS。押すと飛ばせる */
.vs { position: fixed; inset: 0; z-index: 120; cursor: pointer; overflow: hidden; }
.vs__half { position: absolute; inset: 0; border: 0; }
.vs__half--me { background: var(--primary); clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%); animation: vs-left 1.4s both; }
.vs__half--foe { background: var(--accent); clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); animation: vs-right 1.4s both; }
.vs__cast { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.vs__side { display: grid; justify-items: center; gap: 6px; }
.vs__side--me { animation: vs-left 1.4s both; }
.vs__side--foe { animation: vs-right 1.4s both; }
.vs__face {
  width: clamp(130px, 28vh, 230px); height: clamp(130px, 28vh, 230px); display: grid; place-items: end center; overflow: hidden;
  background: var(--panel); border: 4px solid var(--outline-strong, var(--text)); border-radius: 50%;
  box-shadow: 0 8px 0 var(--outline-strong, rgb(var(--ink-rgb) / .4));
}
.vs__face svg { width: 100%; height: 100%; display: block; }
.vs__name, .vs__mark, .round-banner b, .finish__label {
  font-family: var(--font-display); font-weight: 400; color: #fff;
  -webkit-text-stroke: 8px var(--outline-strong, #3b2414); paint-order: stroke fill;
}
.vs__name { font-size: clamp(28px, 5vh, 44px); line-height: 1.1; }
.vs__char {
  font-size: 15px; font-weight: 700; color: var(--text); background: var(--panel);
  border: 2px solid var(--outline-strong, var(--line)); border-radius: 999px; padding: 2px 14px;
}
.vs__mark { font-size: clamp(56px, 12vh, 104px); line-height: 1; animation: vs-mark 1.4s both; text-shadow: 0 7px 0 var(--outline-strong, #3b2414); }
@keyframes vs-left { 0% { translate: -105% 0; } 20%, 82% { translate: 0 0; } 100% { translate: -105% 0; } }
@keyframes vs-right { 0% { translate: 105% 0; } 20%, 82% { translate: 0 0; } 100% { translate: 105% 0; } }
@keyframes vs-mark { 0%, 16% { scale: 0; } 28% { scale: 1.25; } 36%, 80% { scale: 1; opacity: 1; } 100% { scale: 1.4; opacity: 0; } }

/* ラウンドの始まり：卓の上を横切る札（操作は止めない） */
.round-banner {
  position: fixed; z-index: 110; pointer-events: none; translate: -50% -50%;
  display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 26px 10px;
  background: var(--panel); border: 3px solid var(--outline-strong, var(--line)); border-radius: 999px;
  box-shadow: 0 5px 0 var(--outline-strong, rgb(var(--ink-rgb) / .3));
  animation: banner-cross 1s both cubic-bezier(.2, .8, .3, 1);
}
.round-banner small { font-size: 16px; font-weight: 800; color: var(--text); }
.round-banner b { font-size: 44px; line-height: 1; -webkit-text-stroke-width: 7px; }
@keyframes banner-cross { 0% { opacity: 0; transform: translateX(-80px); } 22%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(80px); } }

/* 決着：自分の顔と語を大きく。押すと閉じる（下に結果の表がある） */
.finish { position: fixed; inset: 0; z-index: 115; display: grid; place-items: center; cursor: pointer; background: rgb(var(--ink-rgb) / .3); animation: fade-in .25s both; }
.finish__card { display: grid; justify-items: center; gap: 4px; animation: finish-in .5s both cubic-bezier(.3, 1.5, .5, 1); }
.finish__face {
  width: clamp(150px, 32vh, 250px); height: clamp(150px, 32vh, 250px); display: grid; place-items: end center; overflow: hidden;
  background: var(--panel); border: 4px solid var(--outline-strong, var(--text)); border-radius: 50%;
  box-shadow: 0 8px 0 var(--outline-strong, rgb(var(--ink-rgb) / .4));
}
.finish--win .finish__face { background: radial-gradient(circle at 50% 60%, #fff7c2, #ffd23f 70%); }
.finish--lose .finish__face { background: radial-gradient(circle at 50% 60%, #f2f6fb, #c8d6e8 70%); }
.finish__face svg { width: 100%; height: 100%; display: block; }
.finish__label { font-size: clamp(40px, 9vh, 76px); line-height: 1.1; text-shadow: 0 6px 0 var(--outline-strong, #3b2414); }
@keyframes finish-in { from { scale: .4; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .is-moment .seat__face svg, .char-card__face svg, .is-arriving .cast__one,
  .is-entering-forward, .is-entering-back, .screen-leave, :is(.drawer, .log, .drawer-backdrop, .log-backdrop, .dialog, .scrim).is-opening,
  .vs *, .round-banner, .finish, .finish__card { animation: none !important; }
}

/* ==========================================================================
   アカウント（v0.16。ゲスト＋名前）。アカウントの画面・名前を決める窓・ホームの名前の札
   ========================================================================== */
.input {
  min-width: 0; flex: 1 1 auto; font: inherit; font-size: 15px; padding: 7px 12px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card-bg); color: var(--text);
}
.input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--primary); }
.input--code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }
.account { display: grid; gap: 14px; max-width: 640px; }
.account__block { display: grid; gap: 8px; }
.account__block .select__h { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.account__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.account__record { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px; font-size: 15px; }
.account__record b { font-family: var(--font-display); font-size: 26px; margin-right: 2px; }
.account__code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .04em; word-break: break-all;
  background: var(--panel-2); border: 2px dashed var(--line); border-radius: 10px; padding: 6px 10px; user-select: all;
}
.account__msg { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--mint-soft, #e3f3e8); color: var(--text); font-size: 14px; }
.account__msg--error { background: var(--accent-soft); }
.account__forget { color: var(--fail); justify-self: start; }
.account-chip b { margin-left: 2px; }
/* レートの小さな札（v0.17）。名前の横に（ホームの名前の札・相手の席・VS） */
.rating-tag {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--line); vertical-align: 1px; white-space: nowrap;
}
/* 相手の名前は1行に収め、長ければ「…」で切る（全部は title で読める）。レートの札は縮めない */
.life__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life__label .rating-tag { flex: none; margin-left: 0; }
.account__rating { display: inline-flex; align-items: baseline; gap: 4px; margin-right: 10px; padding-right: 14px; border-right: 2px dashed var(--line); }
.account__rating small { font-size: 12px; color: var(--muted); }
.account__rating b { font-size: 34px; }
.account__rating--none { font-size: 13px; color: var(--muted); }
.dialog--name { justify-items: stretch; }
.dialog__error { margin: 0; color: var(--fail); font-size: 13px; }
:root[data-theme="sunny"] .input { border-color: var(--outline-strong); }
:root[data-theme="sunny"] .account__block {
  background: var(--panel); border: 3px solid var(--outline-strong); border-radius: 18px; box-shadow: 0 4px 0 var(--outline-strong); padding: 12px 14px 14px;
}

/* 画面の右下：音のボタン（#app の外） */
/* 引き出し・ダイアログの暗幕（z-index 50）より下：開いている間は一緒に沈む（v0.15.1） */
.corner { position: fixed; right: 12px; bottom: 12px; z-index: 45; display: flex; gap: 8px; align-items: flex-end; }
.corner__btn {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); box-shadow: 0 4px 14px rgb(var(--ink-rgb) / .2);
}
.corner__btn:hover { border-color: var(--primary); }
.corner__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.corner__btn .glyph { width: 20px; height: 20px; }
@media print { .corner { display: none; } }

/* ==========================================================================
   広告（試し。src/ui/ads.js）。決着のあとホームへ戻ったときだけ、body 直下に重ねる。
   面は他の窓と同じ作り（おひさまキッチンでは太い縁と硬い影）。中の枠は 300×250（よくある広告の大きさ）
   ========================================================================== */
.ad {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  background: rgb(var(--ink-rgb) / .45); animation: fade-in .2s ease-out;
}
.ad__card {
  width: min(340px, 100%); background: var(--panel); border-radius: 20px; padding: 12px 12px 16px;
  box-shadow: 0 12px 32px rgb(var(--ink-rgb) / .28); display: grid; gap: 10px;
}
:root[data-theme="sunny"] .ad__card { border: 3px solid var(--outline-strong); box-shadow: 0 5px 0 var(--outline-strong); }
.ad__head { display: flex; justify-content: space-between; align-items: center; }
.ad__label {
  font-size: 12px; font-weight: 700; color: var(--text); padding: 2px 10px;
  border: 2px solid var(--outline-strong, var(--line)); border-radius: 999px;
}
.ad__close { min-height: 36px; min-width: 64px; padding: 0 14px; font-variant-numeric: tabular-nums; }
.ad__close:disabled { cursor: default; }
.ad__slot { width: 300px; max-width: 100%; min-height: 250px; margin: 0 auto; display: grid; }
.ad__sample {
  display: grid; place-content: center; gap: 6px; text-align: center; border-radius: 12px;
  border: 2px dashed var(--outline-strong, var(--line)); background: var(--panel-2); color: var(--text);
}
.ad__sample b { font-size: 18px; }
.ad__sample small { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ad { animation: none; } }