/* ============================================================
   style.css - 麻雀ゲーム スタイルシート
   ============================================================ */

/* ---------- リセット・ベース ---------- */
/* 見出し・ラベルの類は **けいなん丸ポップ体JP**（font/ に同梱・会長指示 2026-09-07）。
   Mochiy Pop One は後ろに残した控え。Zen Maru Gothic＝本文・説明書きは据え置き。
   キャラの名前だけは別で、'Fibaji' が持っていく（下の @font-face のところ） */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Mochiy+Pop+One&display=swap');

/* ---------- 持ち込みフォント（font/ に同梱・2026-09-07 会長指示） ----------

   'Fibaji'（フィバ字／元ファイル IoEI.ttf）
     … **キャラの名前専用**。パチンコ台の役物みたいな、太くて跳ねた字。
       ⚠ 持っている字は **かな・カタカナ・「・ー！？」だけ**（166字）。
       漢字も英数字も無いので、名前に漢字を使うと**そこだけ他のフォントに落ちる**。
       だから平原清貴は「ひらさん」に改名した（data/chara_text.js）。
       名前を増やすときは、かなだけで書くこと。

   'KeinannMaruPOPjp'（けいなん丸ポップ体JP）
     … **見出し・ラベル・タイトル・カットインのスキル名**。漢字まで揃った丸ポップ体（9838字）。
       もともと 'Mochiy Pop One' を当てていたところを丸ごと引き継いだ（会長指示・2026-09-07）。
       説明書きの本文（'Zen Maru Gothic' 先頭のルール）はそのまま。
       SIL Open Font License 1.1（font/keinan-maru-pop-jp_OFL.txt）。制作：やっちゃん様
   ------------------------------------------------------------------------ */
@font-face {
    font-family: 'Fibaji';
    src: url('../font/fibaji.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KeinannMaruPOPjp';
    src: url('../font/keinan-maru-pop-jp.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ============================================================
       Notion の DESIGN.md を当てたもの
       （awesome-design-md / design-md/notion・MIT・2026-08-28）

       当てていないもの：**能力の色**（のんの粒6色・ゲージの印・ツモの演出）と
       **キャラの色**（characters.js の color・43人ぶん）と**カットインの虹枠**（動画素材）。
       あれは色そのものが中身を指しているので、装いのパレットとは別に持つ

       牌の色は当てている。a08 は牌を 08「めろのブティック」の配色から引いていて、
       パレットに紐づいているのが元の設計なので、**色相（萬＝赤・筒＝青・索＝緑）だけ保って
       Notion の色から取り直した**
       ============================================================ */

    /* ---- 面と線 ---- */
    --canvas: #ffffff;
    --surface: #f6f5f4;
    --surface-soft: #fafaf9;
    --hairline: #e5e3df;
    --hairline-soft: #ede9e4;
    --hairline-strong: #c8c4be;

    /* ---- 字。7段ある階層から4つ取る ---- */
    --ink-deep: #000000;
    --ink-1a: #1a1a1a;
    --charcoal: #37352f;
    --slate: #5d5b54;
    --steel: #787671;
    --stone: #a4a097;

    /* ---- 効かせる色。**紫は CTA 専用**で、本文にも大きい面にも使わない（Do/Don't） ---- */
    --primary: #5645d4;
    --primary-pressed: #4534b3;
    --on-primary: #ffffff;
    /* リンクの青と CTA の紫は**混ぜない**（役割が違う・Don't） */
    --link-blue: #0075de;
    --link-blue-pressed: #005bab;

    /* ---- 淡い面の色。DESIGN.md は「たっぷり使ってよい」と書いている ---- */
    --tint-peach: #ffe8d4;
    --tint-rose: #fde0ec;
    --tint-mint: #d9f3e1;
    --tint-lavender: #e6e0f5;
    --tint-sky: #dcecfa;
    --tint-yellow: #fef7d6;
    --tint-cream: #f8f5e8;
    --tint-gray: #f0eeec;

    /* ---- 意味を持つ色（Notion 側の semantic） ---- */
    --semantic-error: #e03131;
    --semantic-warning: #dd5b00;
    --semantic-success: #1aae39;
    /* 索と發に使う緑。Notion の brand-green(#1aae39) は白い牌の上で 2.88:1 しかなく、
       牌の字としては読めない。**牌は読めることが先**なので、同じ色相のまま濃くした（5.18:1） */
    --green-on-tile: #0f7d27;
    --brand-pink-deep: #a02e6d;
    --brand-teal: #2a9d99;
    --brand-purple: #7b3ff2;

    /* ---- かたち。**ボタンは四角（8px）。Notion はピルを使わない**（Don't） ---- */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-xxl: 20px;
    --r-full: 9999px;

    /* ---- 影。既定は影なし＋線1本 ---- */
    --shadow-1: rgba(15, 15, 15, 0.04) 0px 1px 2px 0px;
    --shadow-2: rgba(15, 15, 15, 0.08) 0px 4px 12px 0px;
    --shadow-4: rgba(15, 15, 15, 0.16) 0px 16px 48px -8px;

    /* ---- 書体。Notion Sans は入手できないので、DESIGN.md のフォールバック順に従う ---- */
    --f-body: 'Inter', -apple-system, system-ui, 'Noto Sans JP', sans-serif;

    /* ============================================================
       ここから下は、もとから a08 が持っていた名前。上の色へつなぎ替える
       ============================================================ */
    /* 卓をグレーにしたので、そのまわりも一段グレー寄りへ寄せる。
       surface-soft（ほぼ白）のままだと、卓だけ浮いて見える（会長指示・2026-08-28） */
    --bg: var(--surface);
    --ink: var(--charcoal);
    --pink: var(--tint-rose);
    --pink-deep: var(--brand-pink-deep);
    --mint: var(--tint-mint);
    --mint-deep: var(--semantic-success);
    --peach: var(--tint-peach);
    --peach-deep: var(--semantic-warning);
    --lemon: var(--tint-yellow);
    --line: var(--hairline);
    --card: var(--canvas);
    /* 弱い字。steel(#787671) は淡い面（lavender・卓）の上で 3.5〜3.9:1 しかないので、
       ひとつ濃い slate を使う。Notion の字の階層はどちらも正規のトークン */
    --muted: var(--slate);
    --danger: var(--semantic-error);
    --blue-deep: var(--link-blue);

    /* ---- 卓まわり ---- */
    /* 卓は tint-mint を土台に、縁と奥を一段ずつ落とす。
       「牌との差をはっきりさせる」という以前の判断（2026-08-28）はそのまま引き継ぐ */
    /* 卓をグレー系に（会長指示・2026-08-28）。**Notion の中間色（hairline 三段）を敷いた**。
       冷たい青寄りのグレーではなく、**わずかに温かいグレージュ**にしてある。
       牌もキャラも色が強いので、卓は色を主張せず、下がって受ける側に回す。
       外へ行くほど暗くしているのは、白い牌が浮いて見えるようにするため
       （縁の2色だけはトークンより少し深い。牌とのコントラストが要るため） */
    /* 斜めの基調角（キャラ選択の全面改修と同じ値・2026-09-07）。対戦UIでも使う */
    --slant: -8deg;
    --unslant: 8deg;
    --table-bg: var(--hairline);
    /* 卓の縁と外周を、キャラ選択のバラ色に半歩寄せる（会長指示・2026-09-07）。
       牌とキャラの色が主役なのは変えないので、彩度はごく浅く */
    --table-border: #c9aab2;
    --table-felt: radial-gradient(ellipse at center,
        var(--hairline-soft) 0%,
        var(--hairline) 42%,
        #dccbcd 76%,
        #c9b3b8 100%);
    --tile-bg: linear-gradient(145deg, #ffffff, #fafaf9);
    --tile-border: var(--hairline-strong);
    /* 牌の影は Elevation Level 1〜2。牌が**物**であることの表現なので残す */
    --tile-shadow: rgba(15, 15, 15, 0.08) 0px 2px 6px 0px;
    --tile-hover-shadow: rgba(15, 15, 15, 0.12) 0px 6px 16px 0px;
    /* 1.5倍にした（会長指示・2026-08-28）。40×56 → 60×84。
       ほかの寸法は全部ここから calc で出しているので、ここだけで追従する */
    --tile-width: 60px;
    --tile-height: 84px;
    /* 捨て牌と鳴き牌は**全員そろえる**（会長指示・2026-08-28）。
       手牌は席で大きさが変わるが、河まで自分だけ大きいのは違う。
       ここが唯一の出どころで、席ごとの上書きは置かない */
    --tile-small-width: 35px;
    --tile-small-height: 47px;
    /* 左右の席で、縦に並ぶ牌を重ねる深さ。
       **既定は0＝重ねない**（会長指摘・2026-08-28。1.5倍でも縦は足りていた）。
       画面が低いときだけ、下の @media が段階的に重ねる */
    --side-hand-overlap: 0px;
    /* 伏せ牌。card-tint-lavender を濃くして、卓の緑と分ける */
    --tile-back-bg: linear-gradient(145deg, #e6e0f5, #cdc2ea);

    /* ---- 牌の文字。**色相は麻雀の約束、具体的な色は Notion から** ---- */
    --color-man: var(--brand-pink-deep);
    --color-pin: var(--link-blue);
    --color-sou: var(--green-on-tile);
    --color-wind: var(--charcoal);
    --color-red: var(--semantic-error);
    --color-green: var(--green-on-tile);

    --panel-bg: var(--canvas);
    --panel-border: var(--hairline);
    --text-primary: var(--charcoal);
    --text-secondary: var(--steel);
    --accent: var(--primary);
    /* ボタンは単色。グラデーションを持たない */
    --btn-bg: var(--primary);
    --btn-hover: var(--primary-pressed);
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
}

/* ---------- 全体レイアウト ---------- */
#app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    /* 行を画面の高さに固定する。
       これがないと中身（特にログ）が増えるたびに行が伸びて
       卓全体が下方向に押し出されていく */
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100vh;
}

/* ---------- ゲームテーブル ---------- */
#game-table {
    position: relative;
    background: var(--table-felt);
    border: 4px solid var(--table-border);
    min-height: 0;
    min-width: 0;
    display: grid;
    /* minmax(0, 1fr): 中央（河）が増えても行・列を押し広げず、
       上下のプレイヤーエリアを画面内に固定する */
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 10px;
    overflow: hidden;
}

/* テーブルのフェルト模様 */
#game-table::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(rgba(255, 255, 255, 0.02) 0% 25%, transparent 0% 50%) 0 0 / 40px 40px;
    pointer-events: none;
}

/* ---------- 中央エリア（捨て牌＋情報パネル） ---------- */
#center-area {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 1;
    /* 画面が低い時は河側を切り詰める（手牌を画面外に出さない） */
    overflow: hidden;
}

#center-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#center-panel {
    /* キャラ選択のパネルとおそろいの、ドット地＋ピンクの枠（2026-09-07） */
    background:
        radial-gradient(circle at 2px 2px, rgba(217, 139, 163, 0.12) 1.2px, transparent 1.5px) 0 0 / 12px 12px,
        var(--panel-bg);
    backdrop-filter: blur(10px);
    border: 2px solid var(--pink);
    border-radius: 6px;
    padding: 14px 20px;
    text-align: center;
    min-width: 140px;
}

#center-panel.is-ability-confirm {
    min-width: 200px;
    padding: 18px 24px;
}

/* カホ「ありあわせ献立」のお盆が出ているあいだだけ、中央パネルを上へ寄せて場所を空ける。
   `_全体仕様.md` §4-6 は「フェイズ中も場・ドラ表示・点数は見える」と決めているので、
   お盆がドラ表示を覆ってはいけない（実機で覆っていたのを直した・2026-09-01）。
   みあの五芒星は中央パネルを囲む作りなので、**カホのときだけ**動かす（クラスを分ける） */
#center-panel.has-kaho-tray {
    transform: translateY(-92px);
    transition: transform 0.25s ease;
}

#round-info {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--pink-deep);
    margin-bottom: 6px;
}

#remaining-count {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

#dora-section {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

#dora-label {
    font-size: 12px;
    color: var(--text-secondary);
}

#dora-display {
    display: flex;
    gap: 4px;
}

.dora-tile {
    width: 30px !important;
    height: 42px !important;
    font-size: 11px !important;
}

/* ---------- 捨て牌（河） ---------- */
.discards-container {
    position: relative;
}

/* 各席の左端を起点に、横倒し牌も実寸ぶん進める。段の起点は動かさない。 */
.discards-container .discard-tile {
    position: absolute;
    --discard-along: calc(var(--discard-position) * (var(--tile-small-width) + 2px) + var(--discard-sideways-before) * (var(--tile-small-height) - var(--tile-small-width)));
    --discard-depth: calc(var(--discard-line) * (var(--tile-small-height) + 2px));
}
.discards-bottom .discard-tile { left: var(--discard-along); top: var(--discard-depth); }
.discards-right .discard-tile { bottom: var(--discard-along); left: var(--discard-depth); }
.discards-top .discard-tile { right: var(--discard-along); bottom: var(--discard-depth); }
.discards-left .discard-tile { top: var(--discard-along); right: var(--discard-depth); }

/* 上（対面）の河：右→左。文字は180°回転（対面視点） */
.discards-top {
    justify-self: center;
}

.discards-top .discard-tile {
    transform: rotate(180deg);
}

/* 下（自分）の河：左→右（そのまま） */
.discards-bottom {
    justify-self: center;
}

/* 上下の河は3段ぶんの高さを常に確保する。
   捨て牌が増えてもレイアウトが動かない（18枚=1局でほぼ上限） */
.discards-top,
.discards-bottom {
    width: calc(5 * var(--tile-small-width) + var(--tile-small-height) + 10px);
    height: calc(3 * var(--tile-small-height) + 4px);
}

/* 左右の河も6枚×3段を確保。横倒し1枚ぶんの長さを最初から空ける。 */
.discards-left,
.discards-right {
    align-self: center;
    width: calc(3 * var(--tile-small-height) + 4px);
    height: calc(5 * var(--tile-small-width) + var(--tile-small-height) + 10px);
}

.discards-left .discard-tile,
.discards-right .discard-tile {
    width: var(--tile-small-height) !important;
    height: var(--tile-small-width) !important;
}

.discards-left .discard-tile .tile-label {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
}

/* 右（下家）の河：下→上に6個、次の段は右へ */
.discards-right .discard-tile .tile-label {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
}

/* 最後に捨てた牌のハイライト */
.discard-tile.last-discard {
    border-color: #ff6b6b;
    box-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
}

/* ふうか「紅蓮一閃」: 燃料になった捨て牌 */
.tile-burning {
    z-index: 4;
    animation: tileBurning 0.6s ease-out;
}

.tile-burning::before {
    content: '';
    position: absolute;
    inset: -5px -3px;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 100%, rgba(255, 224, 72, 0.9), transparent 45%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 72, 20, 0.8), transparent 55%);
    filter: blur(3px);
    mix-blend-mode: screen;
    animation: tileBurnFlicker 0.6s ease-out;
}

@keyframes tileBurning {
    0% { border-color: #ffdf55; box-shadow: 0 0 4px #ffdf55; }
    35% { border-color: #ff6a1a; box-shadow: 0 -5px 13px #ff6a1a, 0 0 8px #ffb52e; }
    70% { border-color: #d83212; box-shadow: 2px -3px 9px #d83212; }
    100% { border-color: var(--tile-border); box-shadow: var(--tile-shadow); }
}

@keyframes tileBurnFlicker {
    0% { opacity: 0; transform: translateY(3px) scale(0.85); }
    25% { opacity: 1; transform: translateY(-2px) scale(1.08, 1.2); }
    50% { opacity: 0.8; transform: translate(2px, -4px) scale(0.95, 1.3); }
    75% { opacity: 0.55; transform: translate(-2px, -6px) scale(1.05, 1.15); }
    100% { opacity: 0; transform: translateY(-9px) scale(0.8, 1.35); }
}

/* ふうか「紅蓮一閃」: 引き寄せたツモ牌 */
.tile-flame {
    animation: tileFlame 0.4s ease-out;
}

@keyframes tileFlame {
    0% { border-color: #fff1a8; box-shadow: 0 0 3px #fff1a8, var(--tile-shadow); }
    35% { border-color: #ff9d24; box-shadow: 0 0 13px #ff5a16, 0 -4px 8px #ffc247; }
    70% { border-color: #e34218; box-shadow: 0 0 8px #e34218, 0 -2px 5px #ff8a22; }
    100% { border-color: var(--accent); box-shadow: 0 0 8px rgba(240, 192, 64, 0.4), var(--tile-shadow); }
}

/* ちか「瞬歩」: 配牌へ横から滑り込む風牌 */
.tile-wind-slide {
    animation: tileWindSlide 0.5s ease-out;
}

@keyframes tileWindSlide {
    0% { opacity: 0; transform: translateX(-18px); border-color: #e2ffd4; }
    55% { opacity: 1; transform: translateX(2px); border-color: #3fd98a; box-shadow: 0 0 10px #3fd98a, var(--tile-shadow); }
    100% { transform: translateX(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ちか「瞬歩」: 引き寄せたツモ牌を走る緑の風 */
.tile-wind-trail {
    animation: tileWindTrail 0.4s ease-out;
}

.tile-wind-trail.tile-wind-trail-strong {
    animation-name: tileWindTrailStrong;
}

@keyframes tileWindTrail {
    0% { transform: translateX(-1px); border-color: #e2ffd4; box-shadow: -2px 0 3px #e2ffd4, var(--tile-shadow); }
    35% { transform: translateX(2px); border-color: #3fd98a; box-shadow: -5px 0 12px #3fd98a, 3px 0 7px #e2ffd4; }
    70% { transform: translateX(1px); border-color: #1f9d63; box-shadow: 4px 0 8px #1f9d63, var(--tile-shadow); }
    100% { transform: translateX(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ステラ「三連星」「十星輝」: 配牌へ落ちてくる星。青紫の光をまとって着地する */
.tile-star-slide {
    animation: tileStarSlide 0.5s ease-out;
}

/* ひまわり・すみにゃん「助走」：配牌におさえた役牌の対子。橙の残像で滑り込む */
.tile-runup {
    animation: tileRunup 0.5s ease-out;
}

@keyframes tileRunup {
    0% { opacity: 0; transform: translateX(-18px); border-color: #ffd7b0; }
    55% { opacity: 1; transform: translateX(2px); border-color: #e8703c; box-shadow: 0 0 12px #e8703c, var(--tile-shadow); }
    100% { transform: translateX(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

@keyframes tileStarSlide {
    0% { opacity: 0; transform: translateY(-16px) scale(0.9); border-color: #d9ccff; }
    55% { opacity: 1; transform: translateY(2px); border-color: #8a6ee0; box-shadow: 0 0 12px #8a6ee0, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ステラ「星の巡り」: 引き寄せたツモ牌に落ちる青紫の光 */
.tile-starlight {
    animation: tileStarlight 0.45s ease-out;
}

@keyframes tileStarlight {
    0% { border-color: #ece5ff; box-shadow: 0 0 3px #ece5ff, var(--tile-shadow); }
    35% { border-color: #a189ee; box-shadow: 0 0 14px #8a6ee0, 0 -4px 9px #c3b0ff; }
    70% { border-color: #6f52c9; box-shadow: 0 0 9px #6f52c9, 0 -2px 5px #a189ee; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ぽにゃるぱ「蕾」: 配牌におさえた対子が、桜色をまとって降りてくる */
.tile-bud-bloom {
    animation: tileBudBloom 0.5s ease-out;
}

@keyframes tileBudBloom {
    0% { opacity: 0; transform: translateY(-14px) scale(0.92); border-color: #ffe3ee; }
    55% { opacity: 1; transform: translateY(2px); border-color: #f4a7c0; box-shadow: 0 0 12px #f4a7c0, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ぽにゃるぱ「桜花の予感」: 縦に重ねた牌へ、桜色の光が落ちる */
.tile-bloom {
    animation: tileBloom 0.45s ease-out;
}

@keyframes tileBloom {
    0% { border-color: #ffe3ee; box-shadow: 0 0 3px #ffe3ee, var(--tile-shadow); }
    35% { border-color: #f4a7c0; box-shadow: 0 0 14px #f4a7c0, 0 -4px 9px #ffd2e2; }
    70% { border-color: #d1789a; box-shadow: 0 0 9px #d1789a, 0 -2px 5px #f4a7c0; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ぽにゃるぱ「桜花の予感」: 呼んだ4枚目は、横から花びらが添うように来る */
.tile-bloom-call {
    animation: tileBloomCall 0.45s ease-out;
}

@keyframes tileBloomCall {
    0% { transform: translateX(-2px); border-color: #ffe3ee; box-shadow: -3px 0 4px #ffe3ee, var(--tile-shadow); }
    40% { transform: translateX(2px); border-color: #f4a7c0; box-shadow: -6px 0 13px #f4a7c0, 3px 0 8px #ffd2e2; }
    75% { transform: translateX(1px); border-color: #d1789a; box-shadow: 4px 0 8px #d1789a, var(--tile-shadow); }
    100% { transform: translateX(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ぽにゃるぱ「開花」: 嶺上牌は、他の2つより長く・大きく落ちてくる。ここが本命 */
.tile-ridge-bloom {
    animation: tileRidgeBloom 0.6s ease-out;
}

@keyframes tileRidgeBloom {
    0% { opacity: 0; transform: translateY(-20px) scale(0.85); border-color: #ffe3ee; }
    45% { opacity: 1; transform: translateY(3px) scale(1.06); border-color: #f4a7c0; box-shadow: 0 0 18px #f4a7c0, 0 6px 12px #ffd2e2; }
    75% { transform: translateY(0) scale(1); border-color: #d1789a; box-shadow: 0 0 11px #d1789a, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* こがね「金の盾」: 振り込んだときの翻数を、牌の上に赤字で載せる。
   ステラの青紫（光らせるだけ）と役割を分ける — こちらは「いくら払うか」を出す */
.danger-han {
    position: absolute;
    top: -9px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    padding: 0 4px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 10px;
    line-height: 1.5;
    color: var(--danger);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--danger);
    border-radius: 7px;
    pointer-events: none;
}

.danger-han.is-yakuman {
    color: #fff;
    background: var(--danger);
}

.tile.tile-danger {
    border-color: var(--danger);
    box-shadow: 0 0 7px rgba(210, 69, 63, 0.5), var(--tile-shadow);
}

/* キャラ欄の上に出る吹き出しは、こがね・つばめ・予見・待ち表示がありうる。
   同じ場所に置くと重なるので、**縦に積む**（能力仕様/lunanel_るなねる.md §6）。
   卓に近いほうが下（待ち表示がいちばん下）。
   置き場所は**名前の上あたりを中央**（会長指示・2026-09-08。以前はアイコンの上で、
   アイコンが欄の左端にあるぶん、左へはみ出して見切れていた）。
   66% ＝ 名前列（欄の右側）の中心あたり */
.avatar-bubbles {
    /* 吹き出しの牌は小さく固定する。ここで上書きしないと、後ろで定義される
       .tile の width: var(--tile-width) が勝って、自席の大きい牌（最大75px）になる */
    --tile-width: 26px;
    --tile-height: 36px;
    --tile-small-width: 26px;
    --tile-small-height: 36px;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 66%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: translateX(-50%);
    pointer-events: none;
    /* 絶対配置の入れ物は「置き場所から右端まで」の残り幅に縮もうとする。
       中身の幅で決めないと、吹き出しが細長く折れてしまう */
    width: max-content;
}

/* 待ちが多い手（九蓮・国士など）は横に伸びすぎるので、折り返して画面内に収める。
   280px ＝ 中央（キャラ欄の66%）から左右に140px。キャラ欄が画面の左端（6px）に
   寄った画面でも、左へはみ出さない幅 */
#wait-bubble,
#kogane-danger,
#tsubame-meisou {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 280px;
}

.avatar-bubbles > * {
    pointer-events: auto;
}

/* 自席情報を基準に置き、左の他家の伏せ牌1列ぶんを空ける。 */
.avatar-bubbles:has(#wait-bubble:not([hidden])) {
    left: calc(var(--enemy-tile-step, 36px) + 12px);
    align-items: flex-start;
    transform: none;
}

/* こがね「リジェクト」: リーチ中は、手に持っていない危険牌もアイコンの上に並べる */
#kogane-danger {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 16px 8px 5px;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid var(--danger);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(61, 43, 34, 0.24);
}

#kogane-danger[hidden] {
    display: none;
}

.kogane-danger-label {
    position: absolute;
    top: 3px;
    left: 9px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 9px;
    color: var(--danger);
}

.kogane-danger-cell {
    position: relative;
    display: flex;
}

.kogane-danger-tile {
    width: 26px;
    height: 36px;
    min-width: 26px;
}

/* 魔女討伐モード（会長指示・2026-09-09）。相手3席を隠して、あなたの席の隣に強さの3ボタン。
   .character-seat は display: block なので、hidden を効かせるにはこちらで消す */
.character-seat[hidden] {
    display: none;
}

.character-seats.is-monster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.character-difficulty {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.character-difficulty[hidden] {
    display: none;
}

/* やさしい＝ピンク／ふつう＝緑／むずかしい＝青。選んだものだけ持ち上がって光る */
.character-difficulty-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(61, 43, 34, 0.35);
    background: var(--difficulty-color, var(--pink));
    border: 2px solid var(--difficulty-edge, var(--pink-deep));
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.82;
    transform: skewX(var(--slant));
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.character-difficulty-btn.is-easy { --difficulty-color: #e98ea9; --difficulty-edge: #c96684; }
.character-difficulty-btn.is-normal { --difficulty-color: #7cc07f; --difficulty-edge: #4f9a56; }
.character-difficulty-btn.is-hard { --difficulty-color: #6f9fe0; --difficulty-edge: #4674b8; }

.character-difficulty-btn:hover {
    opacity: 1;
}

.character-difficulty-btn.is-selected {
    opacity: 1;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--difficulty-edge, var(--pink-deep));
    transform: skewX(var(--slant)) translateY(-2px);
}

.character-difficulty-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ゆぴ「すき」: この局のすきな牌。ゆぴと、手にした人だけに見える。
   ぽにゃるぱの桜色（#f4a7c0）とは別物なので、もっと鮮やかなピンクにして見分ける。
   .tile 本体が後ろで定義されるので、クラスを2つ重ねて強さを上げる（星の加護と同じ事情） */
.tile.tile-yupi-suki,
.tile.back-tile-yupi-suki {
    border-color: #f33792;
    box-shadow: 0 0 0 2px #ffb7dc, 0 0 12px 4px #ff63b58c, var(--tile-shadow);
}

/* 別の能力の疑似要素を使わず、牌面の外周にだけ装飾を重ねる。 */
.yupi-suki-fx {
    position: absolute;
    inset: -2px;
    z-index: 3;
    border: 2px solid #ff76bb;
    border-radius: inherit;
    box-shadow: inset 0 0 6px #ff8dc16b, 0 0 9px #ff62b880;
    pointer-events: none;
    animation: yupiSukiAura 2400ms ease-in-out infinite;
    animation-delay: var(--suki-phase, 0ms);
}

.yupi-suki-jewel,
.yupi-suki-float {
    position: absolute;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 1;
    color: #f83294;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 2px 4px #cd327e;
    pointer-events: none;
}

.yupi-suki-jewel {
    left: -5px;
    top: -10px;
    font-size: clamp(13px, calc(var(--tile-width) * .36), 22px);
    transform-origin: center 70%;
    animation: yupiSukiHeartbeat 2400ms ease-in-out infinite;
    animation-delay: var(--suki-phase, 0ms);
}

.yupi-suki-float {
    top: -5px;
    right: 0;
    font-size: 12px;
    opacity: 0;
    animation: yupiSukiFloat 2400ms ease-out infinite;
    animation-delay: var(--suki-phase, 0ms);
}

.yupi-suki-float--second {
    right: 35%;
    font-size: 9px;
    color: #ff91c9;
    animation-delay: calc(var(--suki-phase, 0ms) - 1200ms);
}

@keyframes yupiSukiAura {
    0%, 100% { opacity: .65; }
    45% { opacity: 1; }
}

@keyframes yupiSukiHeartbeat {
    0%, 45%, 100% { transform: rotate(-12deg) scale(1); }
    15% { transform: rotate(5deg) scale(1.2, 1.12); }
    28% { transform: rotate(-8deg) scale(.96, 1.04); }
}

@keyframes yupiSukiFloat {
    0%, 15% { opacity: 0; transform: translate(0, 3px) scale(.6) rotate(-15deg); }
    30% { opacity: .95; }
    80%, 100% { opacity: 0; transform: translate(5px, -22px) scale(1.05) rotate(15deg); }
}

@media (prefers-reduced-motion: reduce) {
    .yupi-suki-fx, .yupi-suki-jewel, .yupi-suki-float,
    .yupi-suki-heart svg { animation: none !important; }
    .yupi-suki-float { display: none; }
}

/* りーちゅ「木霊の共鳴」：河に出た索子・發と響き合う手牌。
   縁だけでは目に留まらない（会長指摘・2026-09-10）ので、**牌の面ぜんたい**を青緑に染める。
   面の色は内側に広げた影で乗せる。牌の絵は子要素なので、染めても上に残る */
.tile.back-tile-riichu-kodama {
    background: #23c9a8;
    border-color: #12806b;
    box-shadow: 0 0 11px rgba(35, 201, 168, 0.85), var(--tile-shadow);
}

.tile.back-tile-riichu-kodama::after {
    border-color: rgba(255, 255, 255, 0.7);
}

.tile-riichu-kodama {
    animation: tileRiichuKodama 1.2s ease-out;
}

@keyframes tileRiichuKodama {
    0% {
        border-color: #d5f6ee;
        box-shadow: inset 0 0 0 60px rgba(35, 201, 168, 0), var(--tile-shadow);
    }
    15% {
        border-color: #12806b;
        box-shadow: inset 0 0 0 60px rgba(35, 201, 168, 0.92), 0 0 18px #23c9a8, var(--tile-shadow);
    }
    70% {
        border-color: #12806b;
        box-shadow: inset 0 0 0 60px rgba(35, 201, 168, 0.85), 0 0 12px #45997a, var(--tile-shadow);
    }
    100% {
        border-color: var(--tile-border);
        box-shadow: inset 0 0 0 60px rgba(35, 201, 168, 0), var(--tile-shadow);
    }
}

/* ゆぴ「これ、すき！」: 引き寄せたツモ牌に落ちるピンクの光 */
.tile-yupi-like {
    animation: tileYupiLike 0.45s ease-out;
}

@keyframes tileYupiLike {
    0% { border-color: #ffd9ec; box-shadow: 0 0 3px #ffd9ec, var(--tile-shadow); }
    35% { border-color: #ff8fc4; box-shadow: 0 0 15px #ff5fa8, 0 -4px 9px #ffb3d9; }
    70% { border-color: #e0468c; box-shadow: 0 0 9px #e0468c, 0 -2px 5px #ff8fc4; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* あゆまる：星は牌上中央。演出の位相を維持し、再描画時の点滅を防ぐ。 */
.tile.tile-ayumaru-marked {
    border-color: #e6ac27;
    box-shadow: 0 0 0 2px #ffe6a0, 0 0 13px 3px #ffcd467a, var(--tile-shadow);
}
.ayumaru-star-badge {
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 100%;
    height: 38px;
    font-size: clamp(23px, calc(var(--tile-width) * .65), 34px);
    line-height: 1;
    color: #ffcf32;
    text-shadow: -1px -1px 0 #fff7ce, 1px 1px 0 #9c650b, 0 0 7px #ffc52b, 0 2px 3px #593b0d;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.ayumaru-star-badge[aria-disabled="true"] { cursor: default; }
.ayumaru-star-badge:focus-visible { outline: 2px solid #fff3b0; border-radius: 8px; }
.ayumaru-star-fx {
    position: absolute;
    inset: -2px;
    border: 2px solid #ffda62;
    border-radius: inherit;
    box-shadow: inset 0 0 6px #ffcd4560, 0 0 10px #ffcc4899;
    z-index: 3;
    pointer-events: none;
    animation: ayumaruStarAura 2400ms ease-in-out infinite;
    animation-delay: var(--star-phase, 0ms);
}
.ayumaru-star-fx > span {
    position: absolute;
    top: 10%; left: -7px;
    color: #fff2b5;
    font-size: 15px;
    text-shadow: 0 0 4px #e8a61c, 0 1px 2px #84540d;
    animation: ayumaruStarSpark 2400ms ease-out infinite;
    animation-delay: var(--star-phase, 0ms);
}
.ayumaru-star-fx > span + span { left: auto; right: -6px; top: 45%; animation-delay: calc(var(--star-phase, 0ms) - 1200ms); }
@keyframes ayumaruStarAura { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes ayumaruStarSpark {
    0%,100% { opacity: 0; transform: translateY(4px) scale(.6); }
    35% { opacity: 1; }
    80% { opacity: 0; transform: translateY(-18px) scale(1.1); }
}
.ayumaru-star-source .ayumaru-star-badge { opacity: .4; cursor: grabbing; }
.tile.ayumaru-star-target { outline: 2px dashed #ffe075; outline-offset: 2px; }
.tile.ayumaru-star-over { outline: 3px solid #ffe075; box-shadow: 0 0 18px #ffc83d; }
.ayumaru-star-link {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 120;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 0 3px #9e6c11);
}
.ayumaru-star-arch { fill: none; stroke: #ffdc42; stroke-width: 3; stroke-dasharray: 3 6; stroke-linecap: round; }
.ayumaru-star-link marker path { fill: none; stroke: #ffdc42; stroke-width: 2; stroke-linejoin: round; }
.ayumaru-star-ghost { fill: #ffdb45; stroke: #fff6c8; stroke-width: 1; font-size: 30px; }
.ayumaru-star-hint {
    position: absolute;
    bottom: calc(100% + 55px);
    left: 50%; transform: translateX(-50%);
    z-index: 6;
    display: flex; align-items: center; gap: 10px;
    width: max-content; max-width: 95vw;
    padding: 5px 10px;
    border: 1px solid #e5bf51; border-radius: 10px;
    background: #302711ed; color: #fff0b7;
    font-size: 13px;
}
.ayumaru-star-hint button { color: inherit; background: transparent; border: 1px solid #dbb74e; border-radius: 6px; min-height: 32px; padding: 3px 8px; cursor: pointer; }
@media (pointer: coarse) { .ayumaru-star-badge { height: 44px; top: -29px; } }
@media (prefers-reduced-motion: reduce) {
    .ayumaru-star-fx, .ayumaru-star-fx > span { animation: none; }
    .ayumaru-star-fx > span { display: none; }
}

/* あゆまる: 引き寄せたなかま・字牌のツモ牌に落ちる山吹色の光 */
.tile-ayumaru-star {
    animation: tileAyumaruStar 0.45s ease-out;
}

@keyframes tileAyumaruStar {
    0% { border-color: #ffe9b3; box-shadow: 0 0 3px #ffe9b3, var(--tile-shadow); }
    35% { border-color: #ffcf4d; box-shadow: 0 0 15px #ffb52e, 0 -4px 9px #ffe08a; }
    70% { border-color: #e09a1f; box-shadow: 0 0 9px #e09a1f, 0 -2px 5px #ffcf4d; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ゆぴ「すき」: 顔・名前欄と幅をそろえた札。牌面と牌名で読む。 */
#yupi-suki {
    --tile-width: 32px;
    --tile-height: 44px;
    --suki-rose: #dc327f;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 32px;
    align-items: center;
    column-gap: 9px;
    min-width: 0;
    margin: 0 0 5px;
    padding: 6px 10px 8px;
    color: var(--arcade-ink, #482c34);
    background: linear-gradient(115deg, #fff9fc, #ffe1f0);
    border: 1px solid #f39ec6;
    border-left: 4px solid var(--suki-rose);
    border-bottom-width: 2px;
    border-radius: 2px;
    box-shadow: 0 0 12px #ff69b44d, 2px 2px 0 #ad336729;
    transform: skewX(var(--slant, -8deg));
    pointer-events: none;
}

#yupi-suki > * {
    transform: skewX(var(--unslant, 8deg));
}

#yupi-suki[hidden] {
    display: none;
}

.yupi-suki-heart {
    display: grid;
    place-items: center;
    width: 24px;
    height: 28px;
    color: var(--suki-rose);
    background: #ffd0e6;
    border-radius: 50%;
}

.yupi-suki-heart svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
    filter: drop-shadow(0 1px 0 #fff);
    animation: yupiSukiHeartbeat 2400ms ease-in-out infinite;
}

.yupi-suki-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    line-height: 1.2;
    white-space: nowrap;
}

.yupi-suki-label {
    font-size: 14px;
    color: #93405e;
}

.yupi-suki-name {
    font-size: 18px;
}

#yupi-suki .yupi-suki-tile {
    min-width: var(--tile-width);
    cursor: default;
}

/* 待ちと下見は同じ情報面。数字を牌の下に揃え、多面待ちも段組みで読む。 */
#wait-bubble,
#discard-preview {
    --tile-width: 32px;
    --tile-height: 44px;
    --tile-small-width: 32px;
    --tile-small-height: 44px;
    --wait-accent: var(--arcade-gold, #c9a45c);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 8px;
    color: var(--arcade-ink, #482c34);
    background: #fffaf2;
    border: 1px solid #c9b58e;
    border-top: 3px solid var(--wait-accent);
    border-radius: 3px;
    box-shadow: 2px 3px 0 #482c342b;
}

#wait-bubble {
    position: relative;
    min-width: min(206px, calc(100vw - 24px));
    flex-wrap: nowrap;
}

#wait-bubble[hidden],
#discard-preview[hidden] {
    display: none;
}

/* るなねる「見立て」のときだけ、枠を抹茶色にして別物だと分かるようにする */
#wait-bubble.is-mitate {
    --wait-accent: #7d8535;
}

.wait-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e8dac5;
}

.wait-bubble-label {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--arcade-ink, #482c34);
}

.wait-total {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #694c3c;
}

#wait-bubble.is-mitate .wait-bubble-label {
    color: #7d8535;
}

.wait-grid {
    display: grid;
    grid-template-columns: repeat(var(--wait-columns), minmax(0, 1fr));
    gap: 6px;
    width: min(calc(var(--wait-columns) * 42px + (var(--wait-columns) - 1) * 6px), calc(100vw - 48px));
    min-width: min(186px, calc(100vw - 48px));
    max-height: min(264px, 40dvh);
    overflow-y: auto;
    scrollbar-width: thin;
}

.wait-grid:focus-visible {
    outline: 2px solid var(--arcade-burgundy, #962d49);
    outline-offset: -2px;
}

.wait-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 3px;
    background: #fffdf8;
    border: 1px solid #e9ddcb;
    border-radius: 2px;
}

.wait-cell.is-empty {
    background: #eee7dc;
    border-style: dashed;
    border-color: #b3a691;
}

.wait-cell.is-empty .wait-count:not(.is-struck) {
    color: #786a5a;
}

.wait-grid .wait-tile {
    min-width: var(--tile-width);
    cursor: default;
}

.wait-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 20px;
    font-variant-numeric: tabular-nums;
}

/* 見えている牌から数えた残り。ここだけなら、ふつうの待ち表示 */
.wait-count {
    position: relative;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 18px;
    line-height: 1;
    color: var(--arcade-ink, #482c34);
}

/* 見立て：見えている残りに赤いバツを重ねて打ち消す */
.wait-count.is-struck {
    color: #85796b;
    font-size: 14px;
}

.wait-count.is-struck::before,
.wait-count.is-struck::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: var(--danger);
    border-radius: 1px;
}

.wait-count.is-struck::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.wait-count.is-struck::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 見立て：山と伏せた王牌に本当に残っている枚数。赤数字で置く */
.wait-count-true {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 18px;
    line-height: 1;
    color: var(--danger);
}

/* 打牌の下見（会長指示・2026-09-10）。**これも全キャラに出る土台**。
   手牌の1枚にカーソルを合わせたとき、その1枚を切るとテンパイなら
   待ち牌と見かけの残り枚数を牌の真上に出す。見た目は待ちの吹き出しと同じ流儀。
   位置は renderer が牌の矩形から都度決める（position: fixed） */
#discard-preview {
    position: fixed;
    z-index: 8;
    /* カーソルの下へ潜り込んで mouseleave がちらつかないように */
    pointer-events: none;
}

#discard-preview .wait-bubble-label {
    padding-bottom: 5px;
    border-bottom: 1px solid #e9bec6;
}

/* 待ちの段。多い形（国士の13面待ちなど）は折り返して画面内に収める */
.discard-preview-waits {
    min-width: 0;
    max-height: none;
    overflow: visible;
}

/* フリテン：ロンできない待ちなので、ふつうの下見と見分けが付くようにする。
   肩の字が「⚠フリテン」まで伸びる（renderer）ので、色が見えなくても分かる */
#discard-preview.is-furiten {
    --wait-accent: var(--danger);
    border-color: #b35a6a;
}

#discard-preview.is-furiten .wait-bubble-label,
#discard-preview.is-furiten .wait-count {
    color: var(--danger);
}

/* るなねる「継ぐ」: 戻ってきた牌が、抹茶色をまとって降りてくる。
   競り負けて落ちた牌には付かないので、どこが欠けたかが見える */
.tile-tsugu {
    animation: tileTsugu 0.5s ease-out;
}

@keyframes tileTsugu {
    0% { opacity: 0; transform: translateY(-14px) scale(0.92); border-color: #eaeecd; }
    55% { opacity: 1; transform: translateY(2px); border-color: #c5c56a; box-shadow: 0 0 12px #c5c56a, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ステラ「星の加護」: リーチ者の当たり牌。点滅させず、じんわり灯したままにする。
   .tile 本体はこのファイルの後ろで定義されるので、animation ではないこの指定は
   クラスを2つ重ねて強さを上げないと負ける */
.tile.tile-guardian {
    border-color: #8a6ee0;
    box-shadow: 0 0 9px rgba(138, 110, 224, 0.75), var(--tile-shadow);
}

/* こがね・しろがね「シスターリンク」: 引き寄せたツモ牌を走る金と銀の線。
   2人で同じ演出を使う（つながっていることが見える） */
.tile-sisterlink {
    animation: tileSisterLink 0.4s ease-out;
}

@keyframes tileSisterLink {
    0% { border-color: #fdf0c4; box-shadow: -2px 0 3px #fdf0c4, var(--tile-shadow); }
    35% { border-color: #e3c766; box-shadow: -5px 0 12px #e3c766, 3px 0 7px #eef1f5; }
    70% { border-color: #b9c0ca; box-shadow: 4px 0 9px #b9c0ca, 0 0 6px #e3c766; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

@keyframes tileWindTrailStrong {
    0% { transform: translateX(-2px); border-color: #e2ffd4; box-shadow: -3px 0 4px #e2ffd4, var(--tile-shadow); }
    35% { transform: translateX(2px); border-color: #3fd98a; box-shadow: -6px 0 15px #3fd98a, 3px 0 9px #e2ffd4; }
    70% { transform: translateX(1px); border-color: #1f9d63; box-shadow: 5px 0 10px #1f9d63, var(--tile-shadow); }
    100% { transform: translateX(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* あかり「守護の意志」: 危険牌を避けたツモの白い膜 */
.tile-ward {
    animation: tileWard 0.4s ease-out;
}

@keyframes tileWard {
    0% { border-color: #ffffff; box-shadow: 0 0 4px #ffffff, var(--tile-shadow); }
    35% { border-color: #fff4c2; box-shadow: 0 0 14px #ffffff, 0 0 8px #f4d77c; }
    70% { border-color: #e8c96a; box-shadow: 0 0 9px #e8c96a, var(--tile-shadow); }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ひめ「ホーリーベール」: 白から淡い金へほどける薄い帳 */
.tile-veil {
    animation: tileVeil 0.4s ease-out;
}

/* ミミ「星の光」: もう1枚おさえた牌が、空色で一瞬光る */
.tile-starlight {
    animation: tileStarlight 0.4s ease-out;
}

@keyframes tileStarlight {
    0% { border-color: #ffffff; box-shadow: inset 0 0 12px #ffffff, 0 0 4px #ffffff, var(--tile-shadow); }
    40% { border-color: #d8f0ff; box-shadow: inset 0 0 9px rgba(226, 245, 255, 0.9), 0 0 14px #9fd0f2; }
    75% { border-color: #9fd0f2; box-shadow: inset 0 0 5px rgba(200, 232, 250, 0.65), 0 0 8px #9fd0f2; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ミミ「月光波」: 海底の席に届いた牌が、深い青からほどける */
.tile-moonwave {
    animation: tileMoonWave 0.45s ease-out;
}

@keyframes tileMoonWave {
    0% { border-color: #eaf9ff; box-shadow: inset 0 0 12px #eaf9ff, 0 0 4px #eaf9ff, var(--tile-shadow); }
    40% { border-color: #7ed6f0; box-shadow: inset 0 0 9px rgba(226, 249, 255, 0.9), 0 0 15px #7ed6f0; }
    75% { border-color: #3f8fc4; box-shadow: inset 0 0 5px rgba(190, 232, 250, 0.6), 0 0 9px #3f8fc4; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ------------------------------------------------------------
   ミミ「月光波」: 海底を引く席を、卓の上に映す（能力仕様/済_mimi §6）

   卓を **X 字（2本の対角線）** で4つの三角に切り、
   **海底牌を引く席の三角だけ**に泡を浮かべる。
   席の並びは 0=下（自分）／1=右／2=上／3=左。
   ミミが卓にいるあいだだけ出て、**鳴きのたびに移る**。
   泡は下から上へゆっくり昇る（あわあわ）
   ------------------------------------------------------------ */
/* 対象の三角に、淡い泡を間隔をあけて浮かべる。 */
.mimi-wave {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .35;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20fill%3D%22%23b7ecfa%22%20fill-opacity%3D%22.10%22%20stroke%3D%22%2351859a%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%224%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2227%22%20r%3D%2213%22%2F%3E%3Ccircle%20cx%3D%22115%22%20cy%3D%2218%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%22151%22%20cy%3D%2272%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%22123%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%22107%22%20cy%3D%22137%22%20r%3D%2214%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c8f3ff%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2227%22%20r%3D%2213%22%2F%3E%3Ccircle%20cx%3D%22115%22%20cy%3D%2218%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%22151%22%20cy%3D%2272%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%22123%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%22107%22%20cy%3D%22137%22%20r%3D%2214%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 180px 180px;
    animation: abilityParticleRise 12s linear infinite;
}
@keyframes abilityParticleRise {
    from { background-position: 0 0; }
    to { background-position: 0 -180px; }
}

/* 4つの三角。頂点は卓の隅ふたつと中心（＝X 字の交点） */
.mimi-wave.seat-south { clip-path: polygon(0 100%, 100% 100%, 50% 50%); }
.mimi-wave.seat-east { clip-path: polygon(100% 0, 100% 100%, 50% 50%); }
.mimi-wave.seat-north { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.mimi-wave.seat-west { clip-path: polygon(0 0, 0 100%, 50% 50%); }

/* ------------------------------------------------------------
   ロア「血の契約」：契約相手の席の三角に、ワインレッドのハートを浮かべる。
   ⚠ **ロアを操作している本人にしか出ない**（game.getRoaTargetSeat が絞る）。
   作りは月光波（X 字の三角・下から昇る粒）と同じ。面を塗らずリーチ色と共存する
   ------------------------------------------------------------ */
.roa-target {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cdefs%3E%3Cpath%20id%3D%22h%22%20d%3D%22M16%2029C12%2024%200%2017%201%209%202%200%2012-2%2016%206%2021-2%2031%200%2032%209c1%208-11%2015-16%2020Z%22%20fill%3D%22%239e3152%22%20stroke%3D%22%23ed9cb4%22%20stroke-opacity%3D%22.65%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fdefs%3E%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate%2813%2016%29%20rotate%28-15%2016%2016%29%22%2F%3E%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate%28105%2011%29%20scale%28.55%29%22%2F%3E%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate%28142%2062%29%20rotate%2812%2012%2012%29%20scale%28.8%29%22%2F%3E%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate%2864%2063%29%20scale%28.7%29%22%2F%3E%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate%2817%20122%29%20scale%28.6%29%22%2F%3E%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate%2896%20124%29%20rotate%2810%2016%2016%29%22%2F%3E%3Cuse%20href%3D%22%23h%22%20transform%3D%22translate%28157%20156%29%20scale%28.45%29%22%2F%3E%3C%2Fsvg%3E");
    background-size: 180px 180px;
    animation: abilityParticleRise 14s linear infinite;
}

.roa-target.seat-south { clip-path: polygon(0 100%, 100% 100%, 50% 50%); }
.roa-target.seat-east { clip-path: polygon(100% 0, 100% 100%, 50% 50%); }
.roa-target.seat-north { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.roa-target.seat-west { clip-path: polygon(0 0, 0 100%, 50% 50%); }

@keyframes tileVeil {
    0% { border-color: #ffffff; box-shadow: inset 0 0 12px #ffffff, 0 0 4px #ffffff, var(--tile-shadow); }
    40% { border-color: #fff7d6; box-shadow: inset 0 0 9px rgba(255, 255, 255, 0.9), 0 0 14px #f5dfa0; }
    75% { border-color: #e8cd7c; box-shadow: inset 0 0 5px rgba(255, 244, 204, 0.65), 0 0 8px #e8cd7c; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ひめ「ヒーリングスター」: おさえていた役牌に星がひとつ灯る */
.tile-heal {
    animation: tileHeal 0.4s ease-out;
}

.tile-heal::after {
    content: '\2726';
    position: absolute;
    top: 2px;
    right: 3px;
    color: #fff4ad;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 3px #ffffff, 0 0 8px #e8c54f;
    animation: tileHealStar 0.4s ease-out;
}

@keyframes tileHeal {
    0% { border-color: #ffffff; box-shadow: 0 0 3px #ffffff, var(--tile-shadow); }
    45% { border-color: #f6df83; box-shadow: 0 0 13px #f6df83, 0 0 6px #ffffff; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

@keyframes tileHealStar {
    0% { opacity: 0; transform: scale(0.25) rotate(-35deg); }
    45% { opacity: 1; transform: scale(1.35) rotate(8deg); }
    100% { opacity: 0; transform: scale(0.75) rotate(20deg); }
}

/* ひまわり「パニックダッシュ」: 鳴いて呼び込んだツモ牌。青緑の残像を曳いて横から入る */
.tile-dash-trail {
    animation: tileDashTrail 0.5s ease-out;
}

@keyframes tileDashTrail {
    0% { transform: translateX(-6px); border-color: #d7fff9; box-shadow: -8px 0 10px #d7fff9, var(--tile-shadow); }
    30% { transform: translateX(4px); border-color: #45d9c4; box-shadow: -12px 0 16px #45d9c4, 4px 0 8px #d7fff9; }
    65% { transform: translateX(-1px); border-color: #2f8f86; box-shadow: 6px 0 10px #2f8f86, var(--tile-shadow); }
    100% { transform: translateX(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ひまわり「＋アタック」: 副露ぶんのドラ。金色をまとって一拍だけ跳ねる */
.tile-dora-pull {
    animation: tileDoraPull 0.4s ease-out;
}

@keyframes tileDoraPull {
    0% { transform: translateY(0); border-color: #fff3c4; box-shadow: 0 0 4px #fff3c4, var(--tile-shadow); }
    40% { transform: translateY(-5px); border-color: #f0c246; box-shadow: 0 7px 12px #d8a021, 0 0 10px #f0c246; }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* すみにゃん「スライスダッシュ」: 斜めに走る火の残像。ひまわりの横薙ぎと向きを変える */
.tile-blaze-trail {
    animation: tileBlazeTrail 0.5s ease-out;
}

@keyframes tileBlazeTrail {
    0% { transform: translate(-5px, 5px); border-color: #ffe0cf; box-shadow: -7px 7px 10px #ffe0cf, var(--tile-shadow); }
    30% { transform: translate(3px, -3px); border-color: #e8703c; box-shadow: -11px 11px 16px #e8703c, 3px -3px 8px #ffc9a8; }
    65% { transform: translate(-1px, 1px); border-color: #a8442a; box-shadow: 5px -5px 10px #a8442a, var(--tile-shadow); }
    100% { transform: translate(0, 0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* すみにゃん「＋ムーブ」: もう一歩ぶんの引き寄せ。小さく跳ねる */
.tile-step {
    animation: tileStep 0.3s ease-out;
}

@keyframes tileStep {
    0% { transform: translateY(0); border-color: var(--accent); }
    40% { transform: translateY(-4px); border-color: #e8703c; box-shadow: 0 6px 8px #a8442a, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* 平原「重ねる」: 鳴いた直後に重なる牌。金の光が縦に落ちる */
.tile-kiyotaka-stack {
    animation: tileKiyotakaStack 0.5s ease-out;
}

@keyframes tileKiyotakaStack {
    0% { opacity: 0.45; transform: translateY(-12px); border-color: #fff2c0; box-shadow: 0 0 4px #fff2c0, var(--tile-shadow); }
    45% { opacity: 1; transform: translateY(3px); border-color: #e0b23c; box-shadow: 0 -8px 14px #e0b23c, 0 0 10px #fff2c0; }
    75% { transform: translateY(0); border-color: #b8892a; box-shadow: 0 -3px 7px #b8892a, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* 平原「演技（引き）」: 毎ツモの引き寄せ。金をひと撫でするだけの控えめな動き */
.tile-kiyotaka-pull {
    animation: tileKiyotakaPull 0.35s ease-out;
}

@keyframes tileKiyotakaPull {
    0% { border-color: #fff2c0; box-shadow: 0 0 3px #fff2c0, var(--tile-shadow); }
    45% { border-color: #d8ab3e; box-shadow: 0 0 11px #d8ab3e, var(--tile-shadow); }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* Non quark visuals: nonquark.css */

/* さにー「ひだまりの輪」: 送られた牌に、やわらかい陽が差す。押し付けがましくない明るさ */
.tile-sunny-glow {
    animation: tileSunnyGlow 0.45s ease-out;
}

@keyframes tileSunnyGlow {
    0% { border-color: #fff6df; box-shadow: 0 0 3px #fff6df, var(--tile-shadow); }
    40% { border-color: #f5c66a; box-shadow: 0 0 14px #ffd98e, 0 0 8px #f5c66a; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* さにー「ぽかぽかロード」: 溜めたひだまりが配牌に降りてくる。あゆみと同じ動きで色を変える */
.tile-sunny-slide {
    animation: tileSunnySlide 0.5s ease-out;
}

@keyframes tileSunnySlide {
    0% { opacity: 0; transform: translateY(-14px) scale(0.92); border-color: #fff6df; }
    55% { opacity: 1; transform: translateY(2px); border-color: #f5c66a; box-shadow: 0 0 14px #ffd98e, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* リーチ宣言牌（90°左回転） */
.discard-tile.riichi-tile {
    z-index: 1;
}

.discards-bottom .discard-tile.riichi-tile,
.discards-top .discard-tile.riichi-tile {
    width: var(--tile-small-height) !important;
    height: var(--tile-small-width) !important;
    transform: none;
    margin: 0;
}

.discards-bottom .discard-tile.riichi-tile .tile-label,
.discards-top .discard-tile.riichi-tile .tile-label {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.discards-bottom .discard-tile.riichi-tile .tile-label {
    transform: rotate(-90deg);
}

.discards-top .discard-tile.riichi-tile .tile-label {
    transform: rotate(90deg);
}

.discards-left .discard-tile.riichi-tile,
.discards-right .discard-tile.riichi-tile {
    width: var(--tile-small-width) !important;
    height: var(--tile-small-height) !important;
    transform: none;
    margin: 0;
}

.discards-left .discard-tile.riichi-tile .tile-label,
.discards-right .discard-tile.riichi-tile .tile-label {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.discards-left .discard-tile.riichi-tile .tile-label {
    transform: none;
}

.discards-right .discard-tile.riichi-tile .tile-label {
    transform: rotate(180deg);
}

/* ---------- プレイヤーエリア ---------- */

/*
 * 情報ブロックは各プレイヤー自身から見て手牌の左側へ置く。
 * 画面上では、自分=左／下家=上／対面=右／上家=下になる。
 */

/* 下（自分）：情報 → 手牌 → 操作 → 鳴き牌 */
#player-south {
    grid-row: 3;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 牌を1.5倍にしたぶん、**キャラとボタンを左端へ寄せて**手牌の場所を空ける
       （会長指示・2026-08-28）。中央寄せのままだと手牌が入りきらない */
    justify-content: flex-start;
    gap: 6px;
    /* 牌の高さから出す。牌が大きくなったのに欄が112pxのままだと、上下が切れる。
       キャラ欄が96pxあるので、そこは下回らせない（会長指示・2026-08-28） */
    height: max(112px, calc(var(--tile-height) + 30px));
    min-height: max(112px, calc(var(--tile-height) + 30px));
    max-height: max(112px, calc(var(--tile-height) + 30px));
    padding: 7px 6px;
}

/* 上（対面）：鳴き牌 → 手牌 → 情報 */
#player-north {
    grid-row: 1;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 対面も**手牌を卓の中央**に置く（会長指示・2026-08-28）。
       自分の席と同じ作りで、キャラ欄を流れから外して手牌の右端に付ける。
       並びは 鳴き牌 → 手牌 → キャラ なので、キャラは右側 */
    justify-content: center;
    gap: 6px;
    /* 牌の高さから出す。牌が大きくなったのに欄が112pxのままだと、上下が切れる。
       キャラ欄が96pxあるので、そこは下回らせない（会長指示・2026-08-28） */
    height: max(112px, calc(var(--tile-height) + 30px));
    min-height: max(112px, calc(var(--tile-height) + 30px));
    max-height: max(112px, calc(var(--tile-height) + 30px));
    padding: 7px 6px;
    position: relative;
    /* 手牌の枠の幅。位置をこれから逆算する（自分の席と同じ考え方） */
    --north-hand-w: calc(14 * var(--tile-width) + 13 * 2px + 12px + 24px);
    --north-side: max(6px, calc(50% - var(--north-hand-w) / 2 - 260px));
}

#player-north .player-info {
    position: absolute;
    right: var(--north-side);
}

/* 対面の手牌は 14×45＝692px。中央に置くと左右にキャラ欄（254px）ぶんの
   余白が要るので、1490px を下回る画面では**中央ぞろえをやめて右へ詰める** */
@media (max-width: 1500px) {
    #player-north {
        justify-content: flex-end;
    }

    #player-north .player-info {
        position: static;
    }
}

/* 右（下家）：上から 鳴き牌 → 手牌 → 情報。手牌自体は従来どおり縦向き
   下家は画面の左を向いているので、その子から見た左手側＝画面の下。
   鳴き牌は右手側（画面の上）に出るので、情報とぶつからない

   3行の grid にして、真ん中の行に手牌を置く。上下の行は同じ高さで伸び縮みするので、
   鳴き牌や情報が増えても【手牌は卓の中心線から動かない】。
   flex で中身をまとめて中央寄せすると、鳴き牌のぶんだけ手牌が押されて
   左右の席が下に見切れていた */
#player-east {
    grid-row: 1 / -1;
    grid-column: 3;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    /* 下に余白を取って、席ぜんたいを**少し上へ**寄せる（会長指示・2026-08-28）。
       左（西）とは逆向きにして、卓を回した感じにそろえる */
    padding: 8px 6px 56px;
}

/* 左（上家）：上から 情報 → 手牌 → 鳴き牌。手牌自体は従来どおり縦向き
   上家は画面の右を向いているので、その子から見た左手側＝画面の上。
   鳴き牌は右手側（画面の下）に出る */
#player-west {
    grid-row: 1 / -1;
    grid-column: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    /* 上に余白を取って、席ぜんたいを**少し下へ**寄せる（会長指示・2026-08-28） */
    padding: 56px 6px 8px;
}

/* 席ごとの並び順。DOMを組み替えず、既存の描画参照を保つ。 */
#player-south .player-info { order: 0; }
#player-south #ability-buttons { order: 1; }
#player-south .hand-block { order: 2; }
#player-south #action-buttons { order: 3; }

#player-north .hand-block { order: 1; }
#player-north .player-info { order: 2; }

/* 左右は grid。真ん中の行が手牌＋鳴き牌の枠で、そこが卓の中心線に合う */
#player-east .hand-block { grid-row: 2; }
#player-east .player-info { grid-row: 3; align-self: start; }

#player-west .player-info { grid-row: 1; align-self: end; }
#player-west .hand-block { grid-row: 2; }

/* 押して使う能力の残量（能力仕様/_全体仕様.md §4-6）。
   キャラごとの記号を並べて、使ったぶんを黒くする。
   置き方は2つ：orbit＝アイコンを囲う／corner＝左上にちょこんと */
.ability-gauge {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.ability-gauge:empty {
    display: none;
}

.ability-gauge-mark {
    font-size: 37px;
    line-height: 1;
    color: var(--muted);
    /* 立ち絵の上に乗るので、白フチで抜いて浮かせる */
    -webkit-text-stroke: 5px var(--card);
    paint-order: stroke fill;
    text-shadow: 0 2px 5px rgba(61, 43, 34, 0.32);
    transition: color 0.2s ease;
}

/* 使いきったぶんは黒く沈める */
.ability-gauge-mark.is-spent {
    color: #2b2119;
}

/* 数の多いゲージ（ふうかの雨粒＝10粒）は、ひと粒を小さくする（会長指示・2026-09-06） */
.ability-gauge-mark.is-small {
    font-size: 14px;
    -webkit-text-stroke: 2px var(--card);
    text-shadow: 0 1px 3px rgba(61, 43, 34, 0.28);
}

/* ひめのハート。未使用は黄緑、使用済みは消さずに灰色で残す。 */
.ability-gauge-mark.is-heart {
    font-size: 34px;
    -webkit-text-stroke: 4px var(--card);
    filter: drop-shadow(0 0 5px rgba(168, 219, 66, 0.42));
}

.ability-gauge-mark.is-heart.is-spent {
    color: #969b93;
    filter: none;
}

/* 左上に並べる。1つでも4つでも同じ置き方 */
.ability-gauge.is-corner {
    top: -20px;
    left: -20px;
    display: flex;
    /* ゲージが2種類あるキャラ（ミミの月と星）は**段で分ける**（会長指示・2026-08-29）。
       1種類しか持たないキャラは1段のままなので、見え方は変わらない */
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* ゲージ1本ぶんの段 */
.ability-gauge-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* 土星（輪つき）。SVG なので色は currentColor 経由で変わる */
.ability-gauge-mark.is-saturn {
    width: 37px;
    height: 37px;
    /* 白フチはテキスト用なので、こちらは影で浮かせる */
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
}

.ability-gauge-mark.is-saturn svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* （お茶碗 .is-bowl は 2026-09-12 にゲージごと廃止した。→ #lunanel-tsugu） */

/* 流星（尾つき）。土星と同じ扱い。ステラの星が溜まると点く */
.ability-gauge-mark.is-meteor {
    width: 37px;
    height: 37px;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
}

.ability-gauge-mark.is-meteor svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ミミの三日月と星（能力仕様/mimi_クレセント・ミミ.md §6）。土星・流星と同じ扱い。
   月は和了るほど、星は和了れないほど溜まる */
.ability-gauge-mark.is-moon,
.ability-gauge-mark.is-star {
    width: 37px;
    height: 37px;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
}

/* 星は5つ並ぶので、月より一回り小さく */
.ability-gauge-mark.is-star {
    width: 29px;
    height: 29px;
}

.ability-gauge-mark.is-moon svg,
.ability-gauge-mark.is-star svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 月の光が効いているあいだ、残っている三日月がゆっくり明滅する */
.ability-gauge-mark.is-moon.is-active {
    animation: mimiMoonPulse 1.8s ease-in-out infinite;
}

@keyframes mimiMoonPulse {
    0%, 100% {
        filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 9px #f0d98c) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
    }
}

/* つばめの羽（能力仕様/済_tsubame_つばめ.md §6）。舞は5つ、一息は3つ並ぶ */
.ability-gauge-mark.is-feather {
    width: 29px;
    height: 29px;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
}

.ability-gauge-mark.is-feather svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 舞・一息が効いているあいだ、残っている羽がゆっくり明滅する */
.ability-gauge-mark.is-feather.is-active {
    animation: tsubameFeatherPulse 1.8s ease-in-out infinite;
}

@keyframes tsubameFeatherPulse {
    0%, 100% {
        filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 9px #c9834a) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
    }
}

/* さにーの陽（能力仕様/済_sunny_さにー.md §6）。ひだまりは上限が無いので1つだけ置き、
   数は横の「×12」で見せる。受け取る局（X4局）のあいだだけゆっくり明滅する */
.ability-gauge-mark.is-sun {
    width: 33px;
    height: 33px;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
}

.ability-gauge-mark.is-sun svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ability-gauge-mark.is-sun.is-active {
    animation: sunnyHidamariPulse 1.8s ease-in-out infinite;
}

@keyframes sunnyHidamariPulse {
    0%, 100% {
        filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 10px #ffd98e) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
    }
}

/* 開始時 能力使用確認フェイズ（能力仕様/_全体仕様.md §4-6）。 */
#ability-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--panel-border);
}

#ability-confirm[hidden] {
    display: none;
}

#ability-confirm-title {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 14px;
    color: var(--ink);
}

#ability-confirm-count {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: clamp(52px, 9vh, 92px);
    line-height: 1;
    color: var(--pink-deep);
    text-align: center;
}

#ability-confirm-count.is-urgent {
    color: #d2453f;
    animation: ability-confirm-pulse 1s ease-in-out infinite;
}

@keyframes ability-confirm-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

#ability-confirm-skip {
    min-width: 92px;
    padding: 6px 12px;
    font-size: 11px;
}

/* るなねる「継ぐ」の選び場（能力仕様/済_lunanel_るなねる.md §2・§6）。
   準備時間だけ、手元に**前の局の配牌が✕つきで**並ぶ。ボタンの代わり（会長指示・2026-09-12）。
   **✕が付いている牌は継がない。** 押して外した牌だけが抹茶色をまとう */
#lunanel-tsugu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 92vw;
    padding: 6px 10px 8px;
    border: 1px solid #c9c98a;
    border-radius: var(--r-md, 10px);
    background: linear-gradient(180deg, rgba(253, 251, 240, 0.96), rgba(243, 241, 222, 0.96));
    box-shadow: 0 4px 12px rgba(61, 43, 34, 0.18);
}

#lunanel-tsugu[hidden] {
    display: none;
}

.lunanel-tsugu-head {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 12px;
    line-height: 1.2;
    color: var(--ink);
}

.lunanel-tsugu-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

/* 牌そのものがボタン。枠も地色も持たせない（輪郭は牌のまま） */
.lunanel-tsugu-tile {
    position: relative;
    display: block;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
    transition: transform 0.15s ease;
}

/* ⚠ 牌の大きさは **--tile-width を自分で上書きして**決める。
   `.tile` はこのファイルの後ろにあるので、width を直に書くと詳細度が同じで後勝ちの
   `.tile { width: var(--tile-width) }` に負ける（`.wait-tile` と同じ逃げ方） */
/* 🚨 **牌を大きくした**（会長指摘・2026-09-12。34×47 → 48×66）。
   ✕が太くて牌が読めなかったので、**牌のほうを広げて**✕との比を下げる
   （✕は 27px → 30px なので、牌に対する太さは 0.79 → 0.63 に落ちる）。
   13枚 × 48px ＋ すきま ＝ 約 660px。入りきらない画面では `flex-wrap` で折り返す */
.lunanel-tsugu-art {
    --tile-width: 48px;
    --tile-height: 66px;
    min-width: 48px;
}

/* ✕は牌の上にかぶせる。牌を押せば消える＝「継ぐ」。
   ⚠ **薄い膜を敷いてから✕を置く。** 牌の絵は細かいので、
   膜なしだと赤い✕が絵に紛れて読めない（実物で確認・2026-09-12）。
   ただし膜が濃いと今度は牌が読めないので、**牌を大きくしたぶん膜は薄くした**（.45 → .32） */
.lunanel-tsugu-cross {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(34, 24, 28, 0.32);
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 30px;
    line-height: 1;
    color: #ff5f52;
    text-shadow: 0 0 4px rgba(20, 10, 12, 0.95), 0 1px 2px rgba(20, 10, 12, 0.9);
    pointer-events: none;
}

/* ✕が付いたまま＝継がない牌。沈めて、これから来る牌と見分ける。
   ⚠ 灰色にしすぎると牌そのものが読めなくなるので浅めに（0.55 → 0.4・2026-09-12） */
.lunanel-tsugu-tile:not(.is-kept) .lunanel-tsugu-art {
    filter: grayscale(0.4);
}

/* ✕を外した牌＝継ぐ牌。抹茶色の光をまとう（`.tile-tsugu` と同じ色） */
.lunanel-tsugu-tile.is-kept .lunanel-tsugu-cross {
    opacity: 0;
}

.lunanel-tsugu-tile.is-kept .lunanel-tsugu-art {
    border-color: #c5c56a;
    box-shadow: 0 0 3px 2px rgba(197, 197, 106, 0.85),
        0 0 12px rgba(197, 197, 106, 0.55), var(--tile-shadow);
}

.lunanel-tsugu-tile:hover:not(.is-locked):not(.is-capped) {
    transform: translateY(-3px);
}

/* 東1局・封印中・前の局で和了った局。理由は見出しに出ているので、牌は沈めるだけ */
.lunanel-tsugu-tile.is-locked {
    cursor: default;
    filter: grayscale(0.9);
    opacity: 0.45;
}

/* もう12枚選んでいて、これ以上は外せない牌（会長指示・2026-09-12 の上限）。
   封印とは別の見え方にする ―― **押せば戻せる牌（選んだ12枚）と区別が付くこと**が要る。
   沈めるだけの is-locked より浅く、色は残したまま少しだけ引っこめる */
.lunanel-tsugu-tile.is-capped {
    cursor: default;
    opacity: 0.55;
}

/* カホ「ありあわせ献立」（能力仕様/kaho_カホ.md §6）。
   準備時間だけ、卓の中央にお盆が出て、皿が2つ並ぶ。
   中央パネル（残り秒数・場・ドラ表示）を覆わないよう、**その下**に置く */
#kaho-tray {
    position: absolute;
    /* 中央パネルは has-kaho-tray で上へ逃がしてある（→ #center-panel.has-kaho-tray）。
       その下、かつ手元のスキップボタンとぶつからない高さに収める */
    top: calc(50% + 44px);
    left: 50%;
    z-index: 6;
    display: flex;
    gap: 10px;
    max-width: 92vmin;
    padding: 10px 14px 12px;
    border-radius: 18px;
    /* お盆は敷物。主役は上に浮いている料理なので、濃さを抑えて下地に徹する */
    background: linear-gradient(160deg, rgba(108, 70, 46, 0.86), rgba(80, 50, 32, 0.9));
    box-shadow: 0 6px 18px rgba(40, 26, 18, 0.45), inset 0 1px 0 rgba(255, 236, 214, 0.22);
    transform: translate(-50%, 0);
    animation: kahoTrayIn 0.35s ease-out;
}

#kaho-tray[hidden] {
    display: none;
}

@keyframes kahoTrayIn {
    0% { opacity: 0; transform: translate(-50%, 12px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

/* ボタンは**料理の形そのもの**（会長指示・2026-09-01）。
   丸い皿に文字を入れるのはやめて、料理の絵を浮かせる。
   枠も背景も持たせない（輪郭は料理のシルエットだけ） */
.kaho-dish {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: 132px;
    padding: 4px 6px 8px;
    border: none;
    background: none;
    color: #fff3e2;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}

/* 料理の絵。ふわりと浮いて見えるよう、輪郭に沿った影を落とす。
   2つの皿で拍をずらす（--kaho-float-delay は renderer が席ごとに入れる） */
.kaho-dish-art {
    display: block;
    width: 108px;
    height: 108px;
    filter: drop-shadow(0 7px 5px rgba(30, 18, 10, 0.5));
    animation: kahoFloat 3.2s ease-in-out infinite;
    animation-delay: var(--kaho-float-delay, 0s);
}

.kaho-dish-art svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

@keyframes kahoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 乗せると、もう一段だけ持ち上がる */
.kaho-dish:hover:not(.is-locked) {
    transform: translateY(-6px) scale(1.05);
    filter: drop-shadow(0 0 12px rgba(255, 226, 176, 0.75));
}

.kaho-dish-name {
    margin-top: 2px;
    font-size: 20px;
    line-height: 1.1;
    text-shadow: 0 2px 3px rgba(30, 18, 10, 0.65);
}

.kaho-dish-desc {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 11px;
    line-height: 1.35;
    color: #f0dcc2;
    text-align: center;
    text-shadow: 0 1px 2px rgba(30, 18, 10, 0.7);
}

/* 選んだ料理は光らせて残す。もう片方は沈む（何を食べたかが見えるように） */
.kaho-dish.is-picked .kaho-dish-art {
    filter: drop-shadow(0 0 14px rgba(255, 226, 176, 0.95))
        drop-shadow(0 7px 5px rgba(30, 18, 10, 0.5));
    animation: none;
    transform: translateY(-4px);
}

.kaho-dish.is-locked:not(.is-picked) {
    cursor: default;
}

.kaho-dish.is-locked:not(.is-picked) .kaho-dish-art {
    filter: grayscale(0.85) drop-shadow(0 4px 4px rgba(30, 18, 10, 0.4));
    opacity: 0.45;
    animation: none;
}

.kaho-dish.is-locked:not(.is-picked) .kaho-dish-name,
.kaho-dish.is-locked:not(.is-picked) .kaho-dish-desc {
    opacity: 0.5;
}

/* 配られた牌がひと呼吸だけ光る（冷奴の白・鍋の種・パフェの13枚） */
.tile-kaho-serve {
    animation: kahoServe 0.5s ease-out;
}

@keyframes kahoServe {
    0% { box-shadow: 0 0 0 rgba(226, 181, 107, 0); }
    45% { box-shadow: 0 0 14px 4px rgba(226, 181, 107, 0.95); }
    100% { box-shadow: 0 0 0 rgba(226, 181, 107, 0); }
}

/* みあ「六芒星」（能力仕様/mia_みあ.md §6）。
   準備時間だけ、卓の中央に緑の五芒星が浮かぶ。中央パネルは星の内側に収まる */
#mia-star {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 450px;
    height: 450px;
    max-width: 92vmin;
    max-height: 92vmin;
    transform: translate(-50%, -50%);
    /* 星そのものは飾り。押せるのは数字だけ */
    pointer-events: none;
}

#mia-star[hidden] {
    display: none;
}

#mia-star svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 線は中央パネルの上を通るので、少し透かして文字を潰さない */
#mia-star svg path {
    fill: rgba(63, 179, 106, 0.06);
    stroke: #2e9e57;
    stroke-opacity: 0.55;
    stroke-width: 3;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(63, 179, 106, 0.55));
    animation: miaStarDraw 0.6s ease-out;
}

@keyframes miaStarDraw {
    0% { opacity: 0; transform: scale(0.9) rotate(-8deg); transform-origin: center; }
    100% { opacity: 1; transform: scale(1) rotate(0); transform-origin: center; }
}

/* 星の先端に置く数字。押せるのはここだけ */
.mia-star-point,
.mia-star-center {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    color: #1f6b3c;
    background: linear-gradient(145deg, #f2fff6, #d7f4e2);
    border: 2px solid #2e9e57;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mia-star-point {
    position: absolute;
    z-index: 5;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    font-size: 24px;
    line-height: 1;
    pointer-events: auto;
    box-shadow: 0 0 10px rgba(63, 179, 106, 0.5), 0 3px 8px rgba(61, 43, 34, 0.25);
}

.mia-star-point:hover:not(:disabled),
.mia-star-center:hover:not(:disabled) {
    border-color: #1f6b3c;
    box-shadow: 0 0 16px rgba(63, 179, 106, 0.8), 0 4px 10px rgba(61, 43, 34, 0.3);
    transform: scale(1.08);
}

/* 使った数字は沈む。消さずに残して、あと何が使えるかを見せる。
   disabled ではなく .is-locked にしてあるのは、押せない数字でも
   ポインタを乗せたら説明が出るようにするため */
.mia-star-point.is-locked,
.mia-star-center.is-locked {
    background: #eae6de;
    border-color: var(--line);
    color: var(--muted);
    box-shadow: none;
    cursor: not-allowed;
}

.mia-star-point.is-locked:hover,
.mia-star-center.is-locked:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: none;
}

/* 数字にポインタを乗せたときの説明。**その漢字のすぐ横**に浮かべる。
   星の外側へ逃がすので、中央パネルにも星の線にも重ならない */
#mia-hint {
    position: absolute;
    z-index: 6;
    width: max-content;
    max-width: 190px;
    padding: 5px 9px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #1f6b3c;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #2e9e57;
    border-radius: 9px;
    box-shadow: 0 3px 10px rgba(61, 43, 34, 0.2);
    pointer-events: none;
}

#mia-hint[hidden] {
    display: none;
}

/* 先端のどちら側に出すか。数字に触れない位置で止める */
#mia-hint.is-above { transform: translate(-50%, -100%); }
#mia-hint.is-right { transform: translate(0, -50%); }
#mia-hint.is-left  { transform: translate(-100%, -50%); }

.mia-star-point.is-spent {
    opacity: 0.55;
}

/* 陸。五芒星の中心＝中央パネルの中に出る */
#mia-center {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#mia-center[hidden] {
    display: none;
}

.mia-star-center {
    width: 64px;
    height: 64px;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 0 14px rgba(63, 179, 106, 0.65), 0 3px 8px rgba(61, 43, 34, 0.25);
}

/* あゆみ：捨てたドラが翻数になって返ってくる。配牌へ落ちてくる牌は琥珀色 */
.tile-ayumi-slide {
    animation: tileAyumiSlide 0.5s ease-out;
}

@keyframes tileAyumiSlide {
    0% { opacity: 0; transform: translateY(-14px) scale(0.92); border-color: #ffeec2; }
    55% { opacity: 1; transform: translateY(2px); border-color: #e0a63a; box-shadow: 0 0 12px #f0c060, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* みあが呼び寄せた牌・引き寄せた牌は緑で見せる */
.tile-mia-slide {
    animation: tileMiaSlide 0.5s ease-out;
}

@keyframes tileMiaSlide {
    0% { opacity: 0; transform: translateY(-14px) scale(0.92); border-color: #d7f4e2; }
    55% { opacity: 1; transform: translateY(2px); border-color: #2e9e57; box-shadow: 0 0 12px #3fb36a, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

.tile-mia-draw {
    animation: tileMiaDraw 0.45s ease-out;
}

@keyframes tileMiaDraw {
    0% { border-color: #eafaf0; box-shadow: 0 0 3px #eafaf0, var(--tile-shadow); }
    35% { border-color: #3fb36a; box-shadow: 0 0 14px #3fb36a, 0 -4px 9px #d7f4e2; }
    70% { border-color: #1f6b3c; box-shadow: 0 0 9px #1f6b3c, 0 -2px 5px #3fb36a; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* つばめ「推量の舞」（能力仕様/済_tsubame_つばめ.md §6）。
   縛って引いたツモ牌が、つばめ色にすっと灯る */
.tile-tsubame-dance {
    animation: tileTsubameDance 0.4s ease-out;
}

/* つばめ「瞑想」（能力仕様/済_tsubame_つばめ.md §3-B・§6）：休みのあいだに引く牌を、
   アイコンの上に届く順で並べる。つばめ本人にだけ出る。届いた牌は舞と同じくつばめ色にすっと灯る */
#tsubame-meisou {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 16px 8px 5px;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid #996245;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(61, 43, 34, 0.24);
}

#tsubame-meisou[hidden] {
    display: none;
}

.tsubame-meisou-label {
    position: absolute;
    top: 3px;
    left: 9px;
    white-space: nowrap;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 9px;
    color: #996245;
}

.tsubame-meisou-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tsubame-meisou-tile {
    width: 26px;
    height: 36px;
    min-width: 26px;
}

.tsubame-meisou-order {
    font-size: 9px;
    line-height: 1;
    color: #996245;
}

.tile-tsubame-meisou {
    animation: tileTsubameDance 0.4s ease-out;
}

@keyframes tileTsubameDance {
    0% { border-color: #f4e3d3; box-shadow: 0 0 3px #f4e3d3, var(--tile-shadow); }
    40% { border-color: #c9834a; box-shadow: 0 0 14px #c9834a, 0 -4px 9px #f0d7bd; }
    75% { border-color: #996245; box-shadow: 0 0 9px #996245, 0 -2px 5px #c9834a; }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}


/* 押して使う能力のボタン（能力仕様/_全体仕様.md §4-6）。
   持っているキャラのときだけ中身が入るので、空のときは場所を取らない */
#ability-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: none;
}

#ability-buttons[hidden] {
    display: none;
}

/* アステル「流転」の選択も、ほかの能力と同じく手元に出す（会長指示・2026-08-28）。
   見た目は能力ボタンと共有し、クラス名だけ分ける（描き直しで消えないように） */
.ability-button,
.ruten-button {
    min-width: 92px;
    padding: 7px 10px;
    color: var(--ink);
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 12px;
    line-height: 1.25;
    /* 局の頭に押すもの。card-tint-yellow。グラデーションはやめて単色に */
    background: var(--tint-yellow);
    border: 1px solid #e8d896;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ability-button:hover:not(:disabled),
.ruten-button:hover {
    border-color: #d4bc5e;
    box-shadow: var(--shadow-2);
}

/* 局中に押す能力。手番中の操作だと分かるよう、黄緑の灯りを持たせる。 */
.ability-button.is-turn-button:not(:disabled) {
    /* 局の途中に押すもの。card-tint-mint で、局頭のもの（黄）と分ける */
    color: #1a5c2f;
    background: var(--tint-mint);
    border-color: #a9d8ba;
    box-shadow: none;
}

.ability-button.is-turn-button:hover:not(:disabled) {
    border-color: var(--semantic-success);
    box-shadow: var(--shadow-2);
}

/* 使えないときは消さずに沈める。理由を下の行に出す */
/* 流転の「使わない」。見送る側なので、白い面に線だけ */
.ruten-button.is-decline {
    background: var(--canvas);
    border-color: var(--hairline);
    color: var(--slate);
}

.ruten-button.is-decline:hover {
    background: var(--surface);
    border-color: var(--hairline-strong);
}

.ability-button:disabled {
    background: var(--surface);
    border-color: var(--hairline);
    color: var(--muted);
    cursor: not-allowed;
}

.ability-button.is-turn-button:disabled {
    background: var(--surface);
    border-color: var(--hairline);
    box-shadow: none;
    filter: saturate(0.25);
}

.ability-button .ability-button-count {
    display: block;
    margin-top: 2px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 10px;
    color: var(--muted);
}

.ability-button .ability-button-reason {
    display: block;
    margin-top: 2px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 10px;
    color: var(--muted);
}

/* 横一列に収めるため、自分の操作ボタンだけ卓内向けに詰める。 */
#player-south #action-buttons {
    min-height: 0;
    margin-top: 0;
    flex: none;
}

/* 大きさは下の「手牌のすぐ上に出す」ほうで決めている（2026-08-28）。
   ここで縮めていた指定は外した */

/* 長い名前でも席幅を動かさない固定サイズ。
   アイコンと文字の大きさは、横並びにする前の寸法を保つ（縮めない） */
.player-info {
    width: 254px;
    height: 96px;
    min-width: 254px;
    display: grid;
    grid-template-columns: 96px minmax(0, 150px);
    grid-template-rows: 1fr 1fr;
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
    flex: none;
}

/* プレイヤー名。点数より目立たせる。
   色は characters.js の color を renderer が --chara-color に流し込む */
.player-name {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    min-width: 0;
    font-family: 'Fibaji', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    -webkit-text-stroke: 4px var(--chara-color, var(--ink));
    paint-order: stroke fill;
    text-shadow: 0 2px 4px rgba(61, 43, 34, 0.22);
    white-space: nowrap;
    transition: color 0.3s;
    /* キャラ選択とおそろいの斜めチップ（2026-09-07）。キャラ色のうすい帯にのせる */
    justify-self: start;
    padding: 0 10px 1px;
    background: color-mix(in srgb, var(--chara-color, #e58bb0) 22%, rgba(255, 255, 255, 0.9));
    border-left: 3px solid var(--chara-color, var(--pink));
    border-radius: 2px;
    transform: skewX(var(--slant, -8deg));
}

/* 名前が長い子は字を落として、決めた幅に収める。
   「すみにゃん」「リトルミミ」＝5〜6字、「クレセント・ミミ」＝7字以上 */
.player-name.is-mid {
    font-size: 22px;
    -webkit-text-stroke-width: 3.5px;
}

.player-name.is-long {
    font-size: 18px;
    -webkit-text-stroke-width: 3px;
}

/* 手番でも色は変えない（キャラの色を保つ）。強調はアイコン側が持つ */
.player-name.current-player {
    text-shadow: 0 2px 4px rgba(61, 43, 34, 0.22);
}

/* 点数は名前より一段下げる */
.player-score {
    grid-row: 2;
    grid-column: 2;
    align-self: start;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--muted);
    -webkit-text-stroke: 2px var(--card);
    paint-order: stroke fill;
    text-shadow: 0 1px 3px rgba(61, 43, 34, 0.18);
    /* 名前と同じ向きの、白いチップ（2026-09-07） */
    justify-self: start;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.72);
    border-left: 3px solid var(--pink);
    border-radius: 2px;
    transform: skewX(var(--slant, -8deg));
}

/* 平原「見える」（能力仕様/済_kiyotaka_平原清貴.md §6）: シャンテン数は卓に出たまま。
   点数と同じ行の、右下すみに小さく置く。全員に見える */
.player-shanten {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
    justify-self: end;
    padding: 1px 7px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #6b5a2a;
    background: #f5e6b8;
    border: 1px solid #c9a94a;
    border-radius: var(--r-full);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(61, 43, 34, 0.18);
}

/* テンパイだけは色を強める。全員が索子を止めにくる合図 */
.player-shanten.is-tenpai {
    color: #7a2a2a;
    background: #ffd9d4;
    border-color: #d9705f;
}

/* 顔枠の実寸を席風の基準にする。ゲージや名前の行が伸びても引っ張られない。 */
.player-avatar {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: start;
    justify-self: start;
    position: relative;
    display: inline-block;
    flex: none;
    line-height: 0;
}

/* あかりの後光は css/akarihalo.css（光輪＋聴牌の札）。 */

.player-face-frame {
    width: 96px;
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    border: 3px solid var(--chara-color, var(--card));
    background: var(--line);
    transform: skewX(var(--slant));
    box-shadow: 0 3px 8px rgba(61, 43, 34, 0.18);
    transition: box-shadow 0.2s ease;
}

.player-face {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    background: var(--line);
    /* 枠だけを傾け、顔そのものの縦横比は保つ。 */
    transform: skewX(var(--unslant)) scale(1.15);
    opacity: 0.62;
    transition: opacity 0.2s ease;
}

/* 手番は明るさと光で示し、性能を示す枠色は維持する。 */
.player-face.current-player {
    opacity: 1;
}

.player-avatar.current-player .player-face-frame {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--chara-color, var(--pink)) 55%, transparent);
}

/* あかり「守護の意志」: 聖域で能力を封じられた立ち絵 */
.player-face.chara-sealed {
    filter: grayscale(1);
    opacity: 0.42;
}

.player-face.current-player.chara-sealed {
    opacity: 0.58;
}

/* 席風（東南西北）を丸の右下へ。
   丸で囲うと字が小さくなって読みにくいので、囲わずに白フチで抜いて浮かせる */
.player-wind {
    position: absolute;
    /* 下に出しすぎると、真下に来る名前と噛み合う */
    right: -10px;
    bottom: -2px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 44px;
    line-height: 1;
    color: var(--ink);
    -webkit-text-stroke: 5px var(--card);
    paint-order: stroke fill;
    text-shadow: 0 3px 5px rgba(61, 43, 34, 0.28);
    transition: color 0.2s ease;
    pointer-events: none;
}

/* 東＝親。赤で示す */
.player-wind.is-dealer {
    color: #e0483f;
}

/* ---------- 手牌 ---------- */
/* 手牌と鳴き牌をひとまとめにして、【この枠の大きさだけ】を固定する。
   鳴くと手牌が3枚減って鳴き牌が3枚増えるので、合計はほとんど変わらない。
   枠の中で寄せ直すだけなので、席のキャラUIは動かない */
.hand-block {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    flex: none;
}

#player-south .hand-block,
#player-north .hand-block {
    width: calc(14 * var(--tile-width) + 13 * 2px + 12px + 24px);
}

#player-east .hand-block,
#player-west .hand-block {
    flex-direction: column;
    align-items: center;
    /* 重ねたぶんを引く（重ねないときは 0 なので、元のままの高さになる） */
    height: calc(14 * var(--tile-width) + 13 * 2px - 13 * var(--side-hand-overlap) + 12px + 24px);
}

/* 枠は固定でも中身を中央寄せにしていたので、ツモ・打牌・鳴きで枚数が変わるたび
   手牌全体が左右（東西は上下）にずれていた（会長指摘・2026-08-28）。
   手牌のある側の端に寄せて、そこを動かさない。ツモ牌は反対の端に足される。
   DOM の並びが席ごとに違う（南・西は手牌が先、北・東は鳴き牌が先）ので、寄せる向きを分ける */
#player-south .hand-block,
#player-west .hand-block {
    justify-content: flex-start;
}

#player-north .hand-block,
#player-east .hand-block {
    justify-content: flex-end;
}

.hand-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: calc(var(--tile-height) + 4px);
}

.hand-container.clickable .hand-tile {
    cursor: pointer;
}

.hand-container.clickable .hand-tile:hover {
    transform: translateY(-8px);
    box-shadow: var(--tile-hover-shadow);
    border-color: var(--accent);
}

/* 横向きの手牌。縦の長さは .hand-block（手牌＋鳴き牌）のほうで押さえてある */
#player-east .hand-container,
#player-west .hand-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
    min-width: calc(var(--tile-height) + 4px);
}

/* 対面（上）と下家（右）は、その席から見た「左→右」が画面では逆向きに映る。
   河（layout.js の discardCell）は席の向きどおりに置いているのに、手牌の入れ物だけ
   全席とも自分と同じ向きで流していた（会長指摘・2026-09-09。開いた手牌で発覚）。
   対面＝右→左、下家＝下→上 に流す。ツモ牌（DOM の末尾）もその席の右端に出る。
   上家（左）は「上→下」が席の向きと一致するので、そのままでよい */
#player-north .hand-container {
    flex-direction: row-reverse;
}

#player-east .hand-container {
    flex-direction: column-reverse;
}

/* 高さ800pxでは14枚の縦手牌＋情報欄が収まるよう、牌をわずかに重ねる。 */
/* 左右の席は、牌14枚が**縦に**並ぶ。1.5倍だと 14×60＝840px。
   **ふつうの高さの画面なら、重ねずにそのまま入る**（会長指摘・2026-08-28）。
   入らない低い画面のときだけ、キャラの位置は動かさずに牌を少しずつ重ねて詰める。
   重なるのは縦方向だけなので、牌の絵は上側が見えたまま残る */
#player-east .hand-container > .tile + .tile,
#player-west .hand-container > .tile + .tile {
    margin-top: calc(-1 * var(--side-hand-overlap));
}

/* ⚠ **重ねる指定は置かない**（会長指示・2026-08-28）。
   左右の牌を0.75倍にしたので、14枚 14×45＝630px。ふつうの画面なら重ねずに入る。
   仕組みだけ `--side-hand-overlap` に残してあるので、
   本当に入らない画面が出てきたら、ここに @media を1つ足せば効く */

/* ------------------------------------------------------------
   席ごとに牌の大きさを分ける（会長指示・2026-08-28）

   **自分の手牌がいちばん大きく、他家は小さい。** 見るべきものに大きさを配る。
   カスタムプロパティは**下に受け継がれる**ので、席の箱で上書きするだけで、
   その中の手牌・鳴き牌・捨て牌がまとめて追従する。
   `:root` の 60×84 は「そのほか」（ドラ表示・和了画面・鳴きの選択）に残る
   ------------------------------------------------------------ */

/* 自分（下）の手牌だけ、さらに1.25倍 → 75×105 */
#player-south {
    --tile-width: 75px;
    --tile-height: 105px;
}

/* ------------------------------------------------------------
   自分の手牌は、**解像度を上げても卓の中央**に来る（会長指示・2026-08-28）

   左端に寄せる作りだと、画面が広くなるほど右に場所が余る。
   かといって行ごと中央寄せにすると、**キャラ欄のぶんだけ手牌が右へずれる**
   （並びが キャラ欄 → 手牌 → ボタン なので）。

   そこでキャラ欄とボタンを**流れから外して左右の端に置き**、
   残った真ん中に手牌だけを流す。手牌が唯一の在席物になるので、
   卓の中心と手牌の中心が必ず一致する
   ------------------------------------------------------------ */
#player-south {
    position: relative;
    justify-content: center;
    /* 手牌の枠の幅。位置をこれから逆算する */
    --south-hand-w: calc(14 * var(--tile-width) + 13 * 2px + 12px + 24px);
    /* キャラ欄（254px）を手牌のすぐ左に置くための左位置。
       画面が広がっても**手牌の左端に付いてくる**（会長指示・2026-08-28）。
       max() は画面外へ出さないための歯止め */
    --south-side: max(6px, calc(50% - var(--south-hand-w) / 2 - 260px));
}

#player-south .player-info {
    position: absolute;
    left: var(--south-side);
}

/* ポン・チー・カン・スキップは**手牌のすぐ上**に、大きめに出す
   （会長指示・2026-08-28。右端に置くと手牌から遠すぎて押しにくい）。
   `bottom: 100%` で自分の席の欄より上＝河のあたりへ浮かせる */
/* 手牌のすぐ上に浮かせる器。**能力が上・操作が下の2段**に積む。
   同じところへ重ねると、ミミのように自分の手番で押す能力を持つキャラで
   リーチ／ツモと重なる（会長指摘・2026-08-29）。
   中身が空の段は `hidden` で消えるので、片方だけのときは詰まって見える */
#south-buttons {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% - 4px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#player-south #action-buttons {
    margin-top: 0;
    gap: 12px;
    justify-content: center;
}

/* 1.5倍。押しやすさが要るところなので、字も枠も大きくする */
#player-south #action-buttons .game-btn {
    padding: 15px 33px;
    font-size: 21px;
    border-radius: var(--r-lg, 14px);
    box-shadow: 0 6px 16px rgba(35, 30, 22, 0.25);
}

/* 能力のボタンも**ポン・チー・カンと同じ場所**（手牌のすぐ上）に、同じ大きさで出す
   （会長指示・2026-08-29）。この2つは同時に出る場面が無い
   ── 能力を押すのは局の頭と自分の手番、鳴きは他家の打牌の直後 */
#player-south #ability-buttons {
    /* 横に並べる。縦積みだと手牌の上を大きく塞ぐ */
    flex-direction: row;
    justify-content: center;
    gap: 12px;
}

/* ポン・チー・カンと同じ寸法。**能力を使う側は赤**にして、見送る側と分ける */
#player-south #ability-buttons .ability-button,
#player-south #ability-buttons .ruten-button {
    min-width: 0;
    padding: 15px 30px;
    font-size: 21px;
    border-radius: var(--r-lg, 12px);
    box-shadow: 0 6px 16px rgba(35, 30, 22, 0.25);
    color: var(--on-primary);
    background: var(--semantic-error);
    border-color: #b02525;
}

#player-south #ability-buttons .ability-button:hover:not(:disabled),
#player-south #ability-buttons .ruten-button:hover {
    border-color: #8c1d1d;
    box-shadow: 0 8px 20px rgba(120, 24, 24, 0.4);
}

/* 手番中に押すものも赤。局の頭のものと色で分けていたが、
   置き場所が同じになったので**「押す＝赤」でそろえる** */
#player-south #ability-buttons .ability-button.is-turn-button:not(:disabled) {
    color: var(--on-primary);
    background: var(--semantic-error);
    border-color: #b02525;
}

/* 見送る側（流転の「使わない」・スキップ）は赤にしない */
#player-south #ability-buttons .ruten-button.is-decline,
#player-south #ability-buttons .game-btn {
    color: var(--ink);
    background: var(--canvas);
    border: 1px solid var(--hairline-strong);
    padding: 15px 30px;
    font-size: 21px;
    border-radius: var(--r-lg, 12px);
    box-shadow: 0 6px 16px rgba(35, 30, 22, 0.2);
}

/* 使えないときは沈める。赤のまま暗くする */
#player-south #ability-buttons .ability-button:disabled {
    background: #d8b3b3;
    border-color: #c09a9a;
    box-shadow: none;
}

/* 残量と理由は本体が大きくなったぶんだけ上げる */
#player-south #ability-buttons .ability-button-count {
    font-size: 15px;
}

#player-south #ability-buttons .ability-button-reason {
    font-size: 13px;
}

/* パリィは発動後も残量と停止中の障壁を読むため、無効時の文字を明瞭に保つ。 */
#player-south #ability-buttons .ability-button[data-ability-key="parry"]:disabled {
    color: #503535;
    background: #f5e5df;
    opacity: 1;
}

/* 狭い画面では、自分の牌も一緒に小さくする。
   ⚠ 段の切りどころは「**キャラ欄が手牌に重ならない**幅」で決めてある。
   手牌を中央に置くと、その左右にキャラ欄（254px）ぶんの余白が要るので、
   必要な画面幅は `手牌 + 254×2 + 卓の外枠288` になる */
@media (max-width: 1919px) {
    /* 14×75＝1112px は 1920px 未満では中央に置けない */
    #player-south {
        --tile-width: 58px;
        --tile-height: 81px;
    }
}

/* ここから下は**中央ぞろえを諦める**。左から順に詰めて、重ならないことを優先する。
   14×58＝874px を中央に置くには 1682px 要る */
@media (max-width: 1681px) {
    #player-south {
        justify-content: flex-start;
    }

    /* 操作ボタンと能力ボタンは戻さない。手牌の上に浮かせたままのほうが押しやすく、
       行の横幅も食わないので、狭い画面ではむしろ都合がよい。
       static でなく relative なのは、吹き出し（.avatar-bubbles）の位置の基準で
       あり続けるため。流れの中に戻る点は static と同じ */
    #player-south .player-info {
        position: relative;
    }
}

@media (max-width: 1500px) {
    #player-south {
        --tile-width: 46px;
        --tile-height: 64px;
    }
}

@media (max-width: 1200px) {
    #player-south {
        --tile-width: 38px;
        --tile-height: 53px;
    }
}

/* 対面・左右は 0.75倍 → 45×63。捨て牌と鳴き牌も同じ倍率で下げる。
   河は #player-* の外にあるので、id で名指しする */
#player-north,
#player-east,
#player-west,
#discards-north,
#discards-east,
#discards-west,
#melds-north,
#melds-east,
#melds-west {
    /* 手牌だけ下げる。捨て牌・鳴き牌は `:root` で全員そろえてあるので触らない */
    --tile-width: 45px;
    --tile-height: 63px;
}

/* 1.5倍は広い画面向けの寸法。自分の手牌だけで 14×75＋すき間＝約1110px 要り、
   そこにキャラ欄（254px）とボタンが並ぶ。横が足りない画面では一段戻す
   （さらに狭いぶんは、下のレスポンシブの max-width: 1200px が受ける） */
@media (max-width: 1500px) {
    :root {
        /* 下げるのは手牌だけ。捨て牌・鳴き牌はこの幅ならそのままで収まる */
        --tile-width: 46px;
        --tile-height: 64px;
    }
}

/* ---------- 牌共通 ---------- */
.tile {
    width: var(--tile-width);
    height: var(--tile-height);
    background: var(--tile-bg);
    border: 1.5px solid var(--tile-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tile-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

.tile-label {
    font-size: 14px;
    font-weight: 700;
    user-select: none;
    line-height: 1;
}

/* SVG牌面 */
.tile-label.tile-art {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.tile-label.tile-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 牌色 */
.tile-man .tile-label {
    color: var(--color-man);
}

.tile-pin .tile-label {
    color: var(--color-pin);
}

.tile-sou .tile-label {
    color: var(--color-sou);
}

.tile-wind .tile-label {
    color: var(--color-wind);
}

.tile-red .tile-label {
    color: var(--color-red);
}

.tile-green .tile-label {
    color: var(--color-green);
    font-weight: 900;
}

.tile-white .tile-label {
    color: #999;
    text-shadow: 0 0 1px #ccc;
}

/* 裏面 */
.back-tile {
    background: var(--tile-back-bg);
    border-color: #dfa2b6;
}

.back-tile::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 2px;
}

/* ポポロ「ミサンガ」（能力仕様/済_poporo_ポポロ.md §6）：結んだ相手の伏せ牌そのものを染めて、組み立てを見せる。
   順子＝黒紫に染めて番号／刻子＝赤紫に染めて番号／対子＝紫に染めるだけ（会長指示・2026-09-03）。
   番号は白抜き。アイコンには黒紫のハート */
.back-tile.misanga-run,
.back-tile.misanga-set,
.back-tile.misanga-pair {
    position: relative;
}

.back-tile.misanga-run {
    background: #2b1a4a;
    border-color: #1a0f30;
}

.back-tile.misanga-set {
    background: #8a2a6a;
    border-color: #5c1a46;
}

.back-tile.misanga-pair {
    background: #7a4fb5;
    border-color: #4a2a80;
}

.misanga-badge {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7);
}

/* おいてかないで：結んだ相手の河は押せる。押した牌に黒紫のハート（その牌だけが40%で来る） */
.discard-tile.discard-misanga-target {
    cursor: pointer;
}

.discard-tile.discard-misanga-target:hover {
    box-shadow: 0 0 6px #b48ae6, var(--tile-shadow);
}

.discard-tile.discard-misanga-wanted::before {
    content: '♥';
    position: absolute;
    top: -8px;
    right: -5px;
    z-index: 3;
    font-size: 12px;
    line-height: 1;
    color: #3a1f5a;
    text-shadow: 0 0 4px #b48ae6, 0 0 2px #fff;
    pointer-events: none;
}

/* おいてかないで：引き寄せたツモ牌は紫の残像で落ちてくる */
.tile-misanga-pull {
    animation: tileMisangaPull 0.4s ease-out;
}

@keyframes tileMisangaPull {
    0% { opacity: 0; transform: translateY(-14px); border-color: #c9a6ff; }
    60% { opacity: 1; transform: translateY(2px); border-color: #7a4fb5; box-shadow: 0 0 12px #9a6fd0, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ロア「魅了」の引き寄せ（能力仕様/済_roa_クレセント・ロア.md §3-B）：吸い寄せられた牌は濃いピンクの残像で落ちてくる */
.tile-roa-charm {
    animation: tileRoaCharm 0.4s ease-out;
}

@keyframes tileRoaCharm {
    0% { opacity: 0; transform: translateY(-14px); border-color: #ffc4d8; }
    60% { opacity: 1; transform: translateY(2px); border-color: #e85f93; box-shadow: 0 0 12px #ff8fb8, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ライラ「白竜結び」の引き寄せ（能力仕様/済_raira_ライラ.md §3・効果B）：引き寄せた裏ドラの牌は**白紫**の残像で落ちてくる */
.tile-raira-pull {
    animation: tileRairaPull 0.4s ease-out;
}

@keyframes tileRairaPull {
    0% { opacity: 0; transform: translateY(-14px); border-color: #ded0f6; }
    60% { opacity: 1; transform: translateY(2px); border-color: #a98fd8; box-shadow: 0 0 12px #cbb8ec, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

.player-avatar.chara-misanga::after {
    content: '♥';
    position: absolute;
    right: -4px;
    top: -6px;
    z-index: 3;
    font-size: 15px;
    line-height: 1;
    color: #3a1f5a;
    text-shadow: 0 0 5px #b48ae6;
    pointer-events: none;
}

/* ライラ「ミサンガ」（能力仕様/済_raira_ライラ.md §6）：結んだ相手の伏せ牌のうち、
   **ドラを持っている位置**を白紫に染める。**仕込んだ裏ドラ**の位置には白紫のハート。
   アイコンにも白紫のハート（ポポロは黒紫。並んでも見分けがつく） */
.back-tile.raira-dora,
.back-tile.raira-ura,
.tile-raira-ura {
    position: relative;
}

.back-tile.raira-dora {
    background: #cbb8ec;
    border-color: #9c86c4;
}

/* 白竜結びで仕込んだ裏ドラ。ライラの手牌にも、結んだ相手の伏せ牌にも点く。
   **他家からライラの手のハートは見えない**（出し分けは game.getRairaUraKey） */
.back-tile.raira-ura::after,
.tile-raira-ura::after {
    content: '♥';
    position: absolute;
    top: -8px;
    right: -5px;
    z-index: 3;
    font-size: 12px;
    line-height: 1;
    color: #ded0f6;
    text-shadow: 0 0 4px #a98fd8, 0 0 2px #4a3670;
    pointer-events: none;
}

/* ピノ「不思議な虫眼鏡」（能力仕様/済_pino_ピノ.md §3-A・§6）：他家の伏せ牌を種類の色に染める。
   萬子＝赤・筒子＝青・索子＝緑。字牌は伏せ牌の色のまま。数字は見えない。
   .tile.back-tile-… の2クラスで、後ろの .back-tile（アーケード皮も含む）に勝つ */
.tile.back-tile-pino-man {
    background: #c94a4a;
    border-color: #8c2b2b;
}

.tile.back-tile-pino-pin {
    background: #4a6fc6;
    border-color: #2b478c;
}

.tile.back-tile-pino-sou {
    background: #3f9a5c;
    border-color: #276a3c;
}

.tile.back-tile-pino-man::after,
.tile.back-tile-pino-pin::after,
.tile.back-tile-pino-sou::after {
    border-color: rgba(255, 255, 255, 0.7);
}

/* ピノ「予見」（同 §3-C・§6）：次に引く牌の色を、伏せ牌1枚と種類の名前でアイコンの上に出す。
   作りはつばめの瞑想と同じ。枠はピノの差し色（配色メモ：#AD716A） */
#pino-yoken {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 16px 8px 5px;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid #ad716a;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(61, 43, 34, 0.24);
}

#pino-yoken[hidden] {
    display: none;
}

.pino-yoken-label {
    position: absolute;
    top: 3px;
    left: 9px;
    white-space: nowrap;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 9px;
    color: #ad716a;
}

.pino-yoken-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pino-yoken-tile {
    width: 26px;
    height: 36px;
    min-width: 26px;
}

.pino-yoken-order {
    font-size: 9px;
    line-height: 1;
    color: #ad716a;
}

.pino-yoken-suit {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 11px;
    line-height: 1;
    color: #6d5a4f;
}

.pino-yoken-suit.is-man { color: #c94a4a; }
.pino-yoken-suit.is-pin { color: #4a6fc6; }
.pino-yoken-suit.is-sou { color: #3f9a5c; }

/* ピノ「張り込み」：張り込んだ牌が届いたツモ。琥珀の光がすっと落ちる（ピノの軸色 #F4D995） */
.tile-pino-harikomi {
    animation: tilePinoHarikomi 0.45s ease-out;
}

@keyframes tilePinoHarikomi {
    0% { opacity: 0; transform: translateY(-14px); border-color: #f4d995; }
    60% { opacity: 1; transform: translateY(2px); border-color: #ad716a; box-shadow: 0 0 12px #f4d995, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ピノ「張り込み」の結果。その席のアイコンの上に一瞬浮かんで消える（成功＝琥珀・失敗＝赤） */
.pino-harikomi-toast {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    z-index: 6;
    padding: 3px 8px;
    border-radius: 8px;
    border: 2px solid #ad716a;
    background: rgba(255, 255, 255, 0.95);
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    color: #7a4b3a;
    box-shadow: 0 4px 12px rgba(61, 43, 34, 0.24);
    pointer-events: none;
    animation: pinoHarikomiToast 1.6s ease-out both;
}

.pino-harikomi-toast.is-fail {
    border-color: var(--danger);
    color: var(--danger);
}

@keyframes pinoHarikomiToast {
    0% { opacity: 0; transform: translate(-50%, 8px); }
    15% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; transform: translate(-50%, -2px); }
    100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* 白竜結び：結んだ相手の河は押せる。結んだ牌に白紫のハート（その次の牌が裏ドラになる） */
.discard-tile.discard-raira-target {
    cursor: pointer;
}

.discard-tile.discard-raira-target:hover {
    box-shadow: 0 0 6px #ded0f6, var(--tile-shadow);
}

.discard-tile.discard-raira-tied::before {
    content: '♥';
    position: absolute;
    top: -8px;
    right: -5px;
    z-index: 3;
    font-size: 12px;
    line-height: 1;
    color: #ded0f6;
    text-shadow: 0 0 4px #a98fd8, 0 0 2px #4a3670;
    pointer-events: none;
}

.player-avatar.chara-raira-misanga::after {
    content: '♥';
    position: absolute;
    right: -4px;
    top: -6px;
    z-index: 3;
    font-size: 15px;
    line-height: 1;
    color: #ded0f6;
    text-shadow: 0 0 5px #a98fd8, 0 0 2px #4a3670;
    pointer-events: none;
}

/* りーちゅ「盾モード」（能力仕様/済_riichu_りーちゅ.md §6）：盾を張っているあいだ、
   アイコンに茨の輪。張ったことはログにも出るので全員に見せる。
   ミサンガのハート（右上）とぶつからないよう、こちらは左上に置く */
.player-avatar.chara-riichu-shield::after {
    content: '❁';
    position: absolute;
    left: -5px;
    top: -6px;
    z-index: 3;
    font-size: 15px;
    line-height: 1;
    color: #7ec8a0;
    text-shadow: 0 0 5px #45997a, 0 0 2px #1d4436;
    pointer-events: none;
}

/* シャーレ「siete espejos」（能力仕様/syare_シャーレ.md §6）：当たり牌をおさえているあいだ、
   アイコンに鏡の輪。鳴かれて割れるまで灯る。りーちゅの茨の輪（左上）とぶつからないよう左下へ */
.player-avatar.chara-syare-mirror::after {
    content: '◈';
    position: absolute;
    left: -5px;
    bottom: -6px;
    z-index: 3;
    font-size: 15px;
    line-height: 1;
    color: #e8b9c4;
    text-shadow: 0 0 5px #994553, 0 0 2px #4a1f27;
    pointer-events: none;
    animation: syareMirrorGlow 1.8s ease-in-out infinite;
}

@keyframes syareMirrorGlow {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; text-shadow: 0 0 9px #c9707f, 0 0 3px #4a1f27; }
}

/* シャーレ「ミラージュ」：対子になった2枚が、鏡のように一度だけ光る */
.tile-mirage-pair {
    animation: tileMiragePair 0.4s ease-out;
}

@keyframes tileMiragePair {
    0% { border-color: #e8b9c4; box-shadow: 0 0 2px #e8b9c4, var(--tile-shadow); }
    50% { border-color: #994553; box-shadow: 0 0 14px #c9707f, var(--tile-shadow); }
    100% { border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ミラージュで引き寄せたツモ牌／siete espejos で届いた当たり牌は、鏡面の反射が走る */
.tile-mirage {
    animation: tileMirage 0.4s ease-out;
}

@keyframes tileMirage {
    0% { opacity: 0; transform: translateY(-12px) scaleX(0.86); border-color: #e8b9c4; }
    55% { opacity: 1; transform: translateY(2px) scaleX(1.03); border-color: #994553; box-shadow: 0 0 13px #c9707f, var(--tile-shadow); }
    100% { transform: translateY(0) scaleX(1); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* 茨の盾で引き寄せたツモ牌は緑の残像で落ちてくる。茨の盾（当たり牌）は淡い緑で分ける */
.tile-thorn-draw {
    animation: tileThornDraw 0.4s ease-out;
}

@keyframes tileThornDraw {
    0% { opacity: 0; transform: translateY(-14px); border-color: #8fe0b4; }
    60% { opacity: 1; transform: translateY(2px); border-color: #45997a; box-shadow: 0 0 12px #5fb98f, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

.tile-thorn-shield {
    animation: tileThornShield 0.4s ease-out;
}

/* りーちゅ「立葵」：配牌におさえた索子5枚が、緑の光でそっと入ってくる */
.tile-hollyhock {
    animation: tileHollyhock 0.5s ease-out;
}

@keyframes tileHollyhock {
    0% { opacity: 0; transform: translateY(10px) scale(0.9); border-color: #8fe0b4; }
    50% { opacity: 1; transform: translateY(-2px) scale(1.04); border-color: #45997a; box-shadow: 0 0 14px #5fb98f, var(--tile-shadow); }
    100% { transform: translateY(0) scale(1); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

@keyframes tileThornShield {
    0% { opacity: 0; transform: translateY(-14px); border-color: #e2f4ea; }
    60% { opacity: 1; transform: translateY(2px); border-color: #a8d8c0; box-shadow: 0 0 12px #cfeadd, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ゼノ「テクノヴォイド ／ 収斂砲」（能力仕様/済_zeno_ゼノ.md §6）。
   軸色はペリウィンクルブルー #98B9EE、モチーフは歯車 */

/* 閉じているあいだ、アイコンに歯車の輪（全員に見える）。収斂砲がおさえているあいだは回る */
.player-avatar.chara-zeno-void::after {
    content: '⚙';
    position: absolute;
    left: -5px;
    bottom: -6px;
    z-index: 3;
    font-size: 15px;
    line-height: 1;
    color: #98b9ee;
    text-shadow: 0 0 5px #456b99, 0 0 2px #1d2a3d;
    pointer-events: none;
    animation: zenoVoidGlow 2.2s ease-in-out infinite;
}

.player-avatar.chara-zeno-void.charged::after {
    color: #d8e6fb;
    animation: zenoVoidSpin 1.6s linear infinite;
}

@keyframes zenoVoidGlow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; text-shadow: 0 0 9px #98b9ee, 0 0 3px #1d2a3d; }
}

@keyframes zenoVoidSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* つなぐ2枚を選んでいるあいだ。選べる牌だけが浮く */
.hand-tile.zeno-picking {
    cursor: pointer;
    border-color: #98b9ee !important;
    box-shadow: 0 0 10px rgba(152, 185, 238, 0.75), var(--tile-shadow);
    animation: zenoPicking 1.1s ease-in-out infinite;
}

@keyframes zenoPicking {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.hand-tile.zeno-selected {
    animation: none;
    transform: translateY(-8px);
    outline: 3px solid #98b9ee;
    outline-offset: 2px;
}

/* 1枚目には空の輪。接続を待っている端点を、牌の上に小さく浮かせる。 */
.hand-tile.zeno-selected::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    left: calc(50% - 5px);
    top: -9px;
    border: 1px solid #c8e7ff;
    border-radius: 50%;
    background: #030b17;
    box-shadow: 0 0 0 3px #548ddd55, 0 0 12px #6ab5ff88;
    pointer-events: none;
}

#hand-south {
    position: relative;
}

/* 塗りつぶす光ではなく、青い縁の内側が抜け落ちた裂け目。牌の上の余白だけを使う。 */
.zeno-void-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 3;
}

.zeno-void-link.is-replacing {
    opacity: 0.3;
}

/* 接続と数字の丸に60pxの帯を確保。能力・立直・ツモ・鳴きの列をまとめて上へ。
   区間の長さや数字で位置が動かないよう、最大の弧と丸に合わせた一定の余白にする。 */
#player-south:has(.zeno-void-link) #south-buttons {
    bottom: calc(100% + 56px);
}

@media (max-width: 600px) {
    #player-south:has(.zeno-void-link) #south-buttons {
        left: 50cqw;
        inline-size: max-content;
        max-inline-size: 100cqw;
    }
    #player-south:has(.zeno-void-link) #action-buttons {
        flex-wrap: wrap;
        max-inline-size: 100%;
        gap: 8px;
    }
    #player-south:has(.zeno-void-link) #action-buttons .game-btn {
        min-inline-size: 44px;
        min-block-size: 44px;
        padding: 8px 12px;
        font-size: 18px;
        white-space: nowrap;
    }
}

/* 収斂砲と同じ種類数の条件で、丸・縁・接続端の発光を赤へ切り替える。 */
.zeno-void-link.is-cannon-ready {
    --void-glow: #ff5264;
    --void-light: #ffd1d5;
    --void-edge: #e8707d;
    --void-disc: #ff6575;
    --void-ink: #420915;
    --void-shadow: #35030e;
    --void-depth-top: #501020;
    --void-depth-mid: #110207;
    --void-depth-bottom: #1f070d;
}

.zeno-void-halo {
    fill: none;
    stroke: var(--void-glow, #4c9ef0);
    stroke-width: 5px;
    opacity: 0.25;
    filter: blur(3px);
}

.zeno-void-hollow {
    fill: url(#zeno-void-depth);
    stroke: var(--void-edge, #699ddd);
    stroke-width: 0.8px;
}

.zeno-void-rim {
    fill: none;
    stroke: var(--void-light, #b5dfff);
    stroke-width: 1.2px;
}

/* 縁の微細な光だけがゆっくり進む。空洞そのものは静かに残す。 */
.zeno-void-trace {
    fill: none;
    stroke: var(--void-light, #e1f3ff);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dasharray: 1 28;
    opacity: 0.55;
    animation: zenoVoidTrace 12s linear infinite;
    animation-delay: var(--void-open-delay, 0ms);
}

.zeno-void-port {
    fill: none;
    stroke: var(--void-glow, #98caff);
    stroke-width: 1px;
}

.zeno-void-port-orbit {
    stroke-dasharray: 12 4 2 4;
    opacity: 0.75;
}

.zeno-void-port-core {
    fill: var(--void-depth-mid, #030b17);
    stroke: var(--void-light, #dcf0ff);
}

.zeno-void-link.is-opening .zeno-void-aperture {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: zenoVoidOpen 300ms ease-out both;
    animation-delay: var(--void-open-delay, 0ms);
}

.zeno-void-count-disc {
    fill: var(--void-disc, #91e6f5);
    stroke: var(--void-light, #d9faff);
    stroke-width: 1.5px;
    filter: drop-shadow(0 1px 3px var(--void-shadow, #031b35));
}

.zeno-void-count-digits {
    fill: var(--void-ink, #073346);
}

@keyframes zenoVoidOpen {
    from { transform: scaleY(0.08); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

@keyframes zenoVoidTrace {
    to { stroke-dashoffset: -116; }
}

@media (prefers-reduced-motion: reduce) {
    .zeno-void-link.is-opening .zeno-void-aperture,
    .zeno-void-trace,
    .hand-tile.zeno-picking {
        animation: none;
    }
}

.ability-button[data-ability-key="void"] .ability-button-count {
    color: inherit;
}

/* 張ってあるあいだ、つないだ2枚が光る */
.hand-tile.tile-void-anchor {
    border-color: #98b9ee !important;
    box-shadow: 0 0 0 2px rgba(152, 185, 238, 0.55), var(--tile-shadow);
}

/* ヴォイドで入れ替わったツモ牌／収斂砲で届いた牌に、青い走査線がひとすじ走る */
.tile-zeno-void {
    animation: tileZenoVoid 0.4s ease-out;
}

@keyframes tileZenoVoid {
    0% { opacity: 0.2; transform: translateX(-10px) skewX(-8deg); border-color: #d8e6fb; }
    55% { opacity: 1; transform: translateX(2px) skewX(2deg); border-color: #98b9ee; box-shadow: 0 0 13px #98b9ee, var(--tile-shadow); }
    100% { transform: translateX(0) skewX(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ドラは金色に染めて、手牌の中で一目で見つかるようにする。
   赤ドラ・ふつうのドラ・カンで増えたドラ・裏ドラ（リザルトのみ）を同じ扱いにする
   （会長指摘・2026-08-26。以前は赤ドラだけ光っていた） */
.tile-aka,
.tile-dora {
    background: linear-gradient(145deg, #fdf7dc, #f7e7ac) !important;
    border-color: #dfbe63 !important;
    box-shadow: 0 0 0 2px rgba(223, 190, 99, 0.35), var(--tile-shadow);
}

/* 赤ドラは牌面のSVG自体が赤で描かれる */
.tile-aka .tile-label {
    color: var(--danger);
}

/* ドラ「表示牌」はドラそのものではないので光らせない。
   中央パネルとリザルトの左側（矢印の元）がこれにあたる */
#dora-display .tile-dora,
.win-dora-row .dora-tile:not(.dora-actual).tile-dora {
    background: linear-gradient(145deg, var(--card), #f6efe6) !important;
    border-color: var(--tile-border) !important;
    box-shadow: var(--tile-shadow);
}

/* ポイント中の牌と同じ表向き牌。ドラの金色より青を優先する */
.tile.tile-same-hover,
#dora-display .tile.tile-same-hover,
.win-dora-row .dora-tile.tile.tile-same-hover {
    background: linear-gradient(145deg, #e9f3fd, #c6e0f6) !important;
    border-color: #4a90d9 !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.45), var(--tile-shadow) !important;
}

/* あかり「パリィ」：手牌の当たり牌はドラ・同牌hover・リーチ候補より赤を優先する。
   牌面を読める淡い赤地にして、色だけに頼らず ! も添える。 */
.hand-tile.tile-akari-danger {
    background: #f9c8c2 !important;
    border-color: #be322b !important;
    box-shadow: 0 0 0 2px rgba(190, 50, 43, 0.5), var(--tile-shadow) !important;
}

.akari-danger-mark {
    position: absolute;
    top: -8px;
    right: -5px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1px solid #fff8ef;
    border-radius: 50%;
    color: #fff;
    background: #be322b;
    font: 900 14px/1 sans-serif;
    text-shadow: 0 1px 1px #6c1b17;
    pointer-events: none;
}

/* アガリ画面のドラ表示 */
#win-dora-display {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border-radius: 10px;
    border: 2px solid var(--line);
}

/* 流局は中身が無い。空の枠だけ残さない */
#win-dora-display:empty {
    display: none;
}

.win-dora-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.win-dora-row:last-child {
    margin-bottom: 0;
}

.win-dora-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    min-width: 60px;
}

.win-dora-arrow {
    font-size: 14px;
    color: var(--accent);
    font-weight: bold;
}

.dora-actual {
    border-color: var(--accent) !important;
    box-shadow: 0 0 6px rgba(217, 139, 163, 0.4);
}

/* 横向き牌。既定は上家（左）の向き */
.rotated-tile {
    width: var(--tile-height);
    height: var(--tile-width);
}

.rotated-tile .tile-label {
    width: var(--tile-width);
    height: var(--tile-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
}

/* 下家（右）は左と逆を向く。河（.discards-right）と同じ約束。
   左右で同じクラスを使い回していたので、右の牌だけ上下が逆さまだった
   （会長指摘・2026-08-28。流局で手牌を開いて発覚） */
.rotated-tile.rotated-right .tile-label {
    transform: rotate(-90deg);
}

/* 対面（上）は 180°。こちらは無回転のままで、自分と同じ向きに見えていた（同） */
.flipped-tile .tile-label {
    transform: rotate(180deg);
}

/* 捨て牌 */
.discard-tile {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
}

.discard-tile .tile-label {
    font-size: 11px;
}

/* ツモ牌スペーサー */
.tile-spacer {
    width: 12px;
    flex-shrink: 0;
}

/* ツモ牌 */
.drawn-tile {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(217, 139, 163, 0.4), var(--tile-shadow);
}

/* ---------- 副露（鳴き）---------- */
/* 鳴き牌。増えても席の中身を押し広げないよう、入れ物の大きさを決めておく */
.melds-container {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    min-height: 10px;
    align-items: flex-end;
    flex: none;
}

/* 鳴き牌ぶんの場所は先に取らない。取ると左右の席の縦が足りなくなる。
   手牌の位置は grid の真ん中の行で固定してあるので、増えても中心線は動かない */
#player-east .melds-container,
#player-west .melds-container {
    min-height: 0;
    overflow: hidden;
}

/*
 * 家と配置クラスの対応
 * .melds-side-right  = 自分（画面の下辺）
 * .melds-side-top    = 下家（画面の右辺）
 * .melds-side-left   = 対面（画面の上辺）
 * .melds-side-bottom = 上家（画面の左辺）
 */
.melds-side-right {
    align-self: flex-end;
}

.melds-side-left {
    align-self: flex-start;
    flex-direction: row;
    align-items: flex-start;
}

.melds-side-top {
    order: -1;
    flex-direction: column;
    align-items: flex-end;
}

.melds-side-bottom {
    order: 10;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.meld-group {
    display: flex;
    gap: 1px;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    padding: 2px;
}

.meld-tile {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
    font-size: 11px;
}

.meld-tile .tile-label {
    font-size: 10px;
}

/* 加槓：元のポンで倒した牌の上に、4枚目を重ねて積む。
   column-reverse で、DOM の後ろに置いた加槓牌が上に載る */
.meld-kakan-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 1px;
    flex: none;
}

/* 加槓の4枚目（DOM の末尾）は、まわりの牌より一段奥に描く。
   手前に描くと、影がポンの牌に落ちて「乗っている」ように見える（会長指摘・2026-09-09）。
   isolation は z-index:-1 が卓の背景まで潜らないための囲い */
.meld-group {
    isolation: isolate;
}

.meld-kakan-stack > .meld-tile:last-child {
    position: relative;
    z-index: -1;
}

/* 鳴いた牌（90°左回転） */
.meld-called {
    width: var(--tile-small-height);
    height: var(--tile-small-width);
}

.meld-called .tile-label {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
}

.melds-side-top .meld-group {
    flex-direction: column-reverse;
    align-items: flex-end;
}

.melds-side-left .meld-group {
    flex-direction: row-reverse;
    align-items: flex-start;
}

.melds-side-bottom .meld-group {
    flex-direction: column;
    align-items: flex-start;
}

.melds-side-top .meld-tile,
.melds-side-bottom .meld-tile {
    width: var(--tile-small-height);
    height: var(--tile-small-width);
}

.melds-side-left .meld-tile {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
}

.melds-side-top .meld-tile .tile-label,
.melds-side-left .meld-tile .tile-label,
.melds-side-bottom .meld-tile .tile-label {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.melds-side-top .meld-tile .tile-label {
    transform: rotate(-90deg);
}

.melds-side-left .meld-tile .tile-label {
    transform: rotate(180deg);
}

.melds-side-bottom .meld-tile .tile-label {
    transform: rotate(90deg);
}

.melds-side-top .meld-called,
.melds-side-bottom .meld-called {
    width: var(--tile-small-width);
    height: var(--tile-small-height);
}

.melds-side-left .meld-called {
    width: var(--tile-small-height);
    height: var(--tile-small-width);
}

.melds-side-top .meld-called .tile-label {
    transform: rotate(180deg);
}

.melds-side-left .meld-called .tile-label {
    transform: rotate(90deg);
}

.melds-side-bottom .meld-called .tile-label {
    transform: none;
}

/* ---------- サイドパネル ---------- */
#side-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: linear-gradient(180deg, #ffffff 0%, #fdf4ea 100%);
    border-left: 2px solid var(--line);
}

#side-header {
    padding: 16px;
    border-bottom: 2px dotted var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#side-header h2 {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    /* 丸ポップ体も字幅が広い。260px のパネルで折り返さない大きさに抑える */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--pink-deep);
}

/* ゲームログ */
#log-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    font-size: 12px;
    line-height: 1.6;
}

#log-panel::-webkit-scrollbar {
    width: 4px;
}

#log-panel::-webkit-scrollbar-thumb {
    background: var(--pink);
    border-radius: 2px;
}

/* ログとキャラ解説の重ね場。キャラアイコンにポインタを乗せているあいだだけ、
   解説がログを覆う（外せば元のログがそのまま見える・2026-09-08） */
#log-area {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#log-chara-info {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fdf4ea 100%);
}

.log-entry {
    padding: 2px 0;
    color: var(--muted);
    border-bottom: 1px dotted var(--line);
}

.log-entry:last-child {
    color: var(--ink);
    font-weight: 500;
}

/* ---------- ボタン ---------- */
/* Notion はボタンを**四角（8px）**で持つ。「Don't use pill-shaped buttons」に従った。
   麻雀の操作は5系統あるので、意味を3階層に対応させ直している：
     紫の塗り   ツモ・ロン           和了る。いちばん強い CTA
     紫の淡い面 リーチ・ポン・チー・カン  仕掛ける
     白地＋線   スキップ・キャンセル     見送る */
.game-btn {
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-1);
}

.btn-primary:hover {
    background: var(--primary-pressed);
    box-shadow: var(--shadow-2);
}

/* ロンも和了なので、ツモと同じ紫。グラデーションはやめて単色に */
.btn-ron {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-1);
    display: none;
}

.btn-ron:hover {
    background: linear-gradient(145deg, #f7bcc8, #e894a2);
    box-shadow: 0 5px 14px rgba(224, 128, 143, 0.45);
    transform: translateY(-1px);
}

/* 見送る側。白い面に線だけ */
.btn-secondary {
    background: var(--canvas);
    color: var(--slate);
    border: 1px solid var(--hairline);
}

.btn-secondary:hover {
    background: var(--surface);
    border-color: var(--hairline-strong);
}

#tsumo-btn,
#ron-btn,
#skip-btn,
#riichi-btn,
#riichi-cancel-btn,
#pon-btn,
#chi-btn,
#kan-btn,
#call-skip-btn,
#harikomi-btn {
    display: none;
    z-index: 10;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(217, 139, 163, 0.3);
    }

    50% {
        box-shadow: 0 4px 24px rgba(217, 139, 163, 0.6);
    }
}

#ron-btn {
    animation-name: pulseRon;
}

@keyframes pulseRon {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(212, 54, 54, 0.3);
    }

    50% {
        box-shadow: 0 4px 24px rgba(212, 54, 54, 0.6);
    }
}

/* 仕掛ける側は、紫の淡い面（card-tint-lavender）に紫の字。
   リンクの青は使わない（Don't「link-blue と primary-purple を混ぜない」） */
.btn-riichi {
    background: var(--tint-lavender);
    color: var(--primary-pressed);
    border-color: #cdc2ea;
    display: none;
}

.btn-riichi:hover {
    background: #dbd3f0;
    border-color: var(--primary);
}

#riichi-btn {
    animation-name: pulseRiichi;
}

@keyframes pulseRiichi {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(42, 138, 212, 0.3);
    }

    50% {
        box-shadow: 0 4px 24px rgba(42, 138, 212, 0.6);
    }
}

#riichi-cancel-btn {
    animation: none;
}

/* 鳴きボタン */
/* 鳴きも「仕掛ける」側。リーチと同じ紫の淡い面で、字だけ一段濃くして区別する */
.btn-call {
    background: var(--tint-lavender);
    color: var(--primary-deep, #3a2a99);
    border-color: #cdc2ea;
    display: none;
}

.btn-call:hover {
    background: #dbd3f0;
    border-color: var(--primary);
}

#pon-btn,
#chi-btn,
#kan-btn {
    animation-name: pulseCall;
}

@keyframes pulseCall {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(212, 154, 42, 0.3);
    }

    50% {
        box-shadow: 0 4px 24px rgba(212, 154, 42, 0.6);
    }
}

#call-skip-btn {
    animation: none;
}

/* ピノ「張り込み」：見送る席に出るが、押すと山に手を出す「仕掛ける」側。鳴きと同じ拍動 */
#harikomi-btn {
    animation-name: pulseCall;
}

/* リーチ候補ハイライト */
.riichi-candidate {
    border-color: #3a9ae4 !important;
    box-shadow: 0 0 10px rgba(42, 138, 212, 0.6) !important;
    cursor: pointer !important;
}

.riichi-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* リーチ中の手牌ロック */
.riichi-locked .hand-tile {
    opacity: 0.85;
}

/* 操作ボタンエリア */
#action-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    min-height: 44px;
    align-items: center;
}

/* 操作ボタンも斜め基調（2026-09-07）。各ボタンの hover は transform を
   まるごと上書きするので、ここで傾きごと合成し直す（id の詳細度で勝つ） */
#action-buttons .game-btn {
    transform: skewX(var(--slant, -8deg));
}

#action-buttons .game-btn:hover {
    transform: skewX(var(--slant, -8deg)) translateY(-1px);
}

/* ---------- メッセージオーバーレイ ---------- */
#message-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(253, 249, 242, 0.88);
    backdrop-filter: blur(8px);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* 流局は**開いたテンパイ手牌を見せる場面**なので、全画面の幕だと手牌が隠れる
   （会長指摘・2026-08-28）。同じ要素のまま、卓の上に浮かぶ窓へ切り替える。
   幕もぼかしも敷かないので、卓の牌はそのまま見えるしポイントもできる。
   幕のときの指定より詳細度が高いので、@media 側の上書きにも勝つ */
#message-overlay.is-window {
    /* ログ欄を除いた卓の中央に置く。幅も卓の内側に収める。 */
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 役の右横に点数移動を並べるぶん横長（会長指示・2026-09-08）。
       この幅を変えるときは arcade.css の #win-hand-display の clamp も揃える */
    width: min(960px, 94%);
    max-height: 92vh;
    overflow-y: auto;
    padding: 18px 22px 20px;
    gap: 12px;
    background: linear-gradient(145deg, #fffdf5, #f8edca);
    backdrop-filter: none;
    border: 2px solid #d9b84f;
    border-radius: var(--r-xl);
    box-shadow: 0 20px 55px rgba(42, 35, 22, 0.28), 0 0 22px rgba(238, 196, 73, 0.3);
}

/* 窓に収めるぶん、見出しは一回り小さくする */
#message-overlay.is-window #message-text {
    font-size: 30px;
}

/* あかり「守護の意志」: 聖域の封印対象選択 */
#ability-target-overlay {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(38, 34, 29, 0.56);
    backdrop-filter: blur(7px);
}

#ability-target-overlay[hidden] {
    display: none;
}

.ability-target-panel {
    width: min(660px, 100%);
    padding: 24px;
    text-align: center;
    background: linear-gradient(145deg, #fffdf5, #f8edca);
    border: 2px solid #d9b84f;
    border-radius: var(--r-xl);
    box-shadow: 0 20px 55px rgba(42, 35, 22, 0.28), 0 0 22px rgba(238, 196, 73, 0.3);
}

.ability-target-kicker {
    margin-bottom: 5px;
    color: #9a7921;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.ability-target-panel h2 {
    color: var(--ink);
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 22px;
    font-weight: 400;
}

.ability-target-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.ability-target-button {
    min-width: 0;
    padding: 10px;
    color: var(--text-primary);
    font: inherit;
    background: var(--card);
    border: 2px solid #e4d196;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ability-target-button:hover {
    border-color: #d0a82f;
    box-shadow: 0 7px 18px rgba(112, 87, 22, 0.2);
    transform: translateY(-2px);
}

.ability-target-button img {
    width: 82px;
    aspect-ratio: 1 / 1;
    display: block;
    margin: 0 auto 8px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}

.ability-target-button span {
    display: block;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 能力を持たない相手。封じても意味がないので押せない。
   並べたまま沈めるのは、なぜ選べないかを見せるため */
.ability-target-button.is-unsealable {
    border-color: var(--line);
    background: #f6f1ea;
    cursor: not-allowed;
}

.ability-target-button.is-unsealable:hover {
    border-color: var(--line);
    box-shadow: none;
    transform: none;
}

.ability-target-button.is-unsealable img,
.ability-target-button.is-unsealable span {
    filter: grayscale(1);
    opacity: 0.45;
}

.ability-target-note {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

@media (max-width: 560px) {
    .ability-target-list {
        grid-template-columns: 1fr;
    }

    .ability-target-button {
        display: grid;
        grid-template-columns: 58px 1fr;
        align-items: center;
        text-align: left;
    }

    .ability-target-button img {
        width: 52px;
        margin: 0;
    }
}

/* チー・暗槓・加槓の候補選択。
   **卓を覆わず、手元（手牌の下）に出す**（会長指示・2026-08-28）。
   以前は #ruten-choice-overlay と本体定義を共有した全画面のモーダルで、
   選んでいるあいだ手牌が見えなかった */
/* 鳴きの選択も `#south-buttons` の段のひとつ。いちばん上に出る。
   親が縮んで決まる箱なので、幅は自分で持つ（`width: 100%` だと潰れる） */
#call-select-overlay {
    display: flex;
    justify-content: center;
    width: min(720px, 88vw);
}

#call-select-overlay[hidden] {
    display: none;
}

/* 局頭の能力カットイン。操作を塞がず、虹色の枠の黒を screen で透かす。
   **発動した全員を同時に出す**ので、席ごとに器を置く（会長指摘・2026-08-28）。
   ⚠ fixed にしない。器を卓（#game-table）に貼り、右端＝卓の右端で overflow が切ることで、
   東席のカットインはログ（#side-panel）に被らず、ログの裏から出てくる見え方になる
   （会長指示・2026-09-09）。ログ側の z-index を上げる案は、卓の中の fixed の
   ダイアログ・リザルト（z 150〜210）までログの下に落ちるので採らない */
#cutin-overlay {
    position: absolute;
    z-index: 180;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

#cutin-overlay[hidden] {
    display: none;
}

.cutin-stage {
    position: absolute;
    /* 4つ同時に出しても重ならない大きさ（会長指摘・2026-08-28）。
       ⚠ 高さは aspect-ratio に任せず**明示する**。
       top と bottom を両方置くと高さが「伸びて埋める」側に解決されて、
       枠が縦に伸び、立ち絵の窓（%指定）もつられて狂う */
    --cutin-w: min(420px, 46vw);
    --cutin-h: calc(var(--cutin-w) * 9 / 16);
    width: var(--cutin-w);
    height: var(--cutin-h);
    overflow: hidden;
    /* isolation: isolate は置かない。置くと screen 合成が枠の中だけで閉じてしまい、
       立ち絵の無いところの黒が「黒のまま」出る */
    opacity: 0;
    /* 窓ごと平行四辺形に切る（斜め基調・2026-09-07）。
       ⚠ transform はアニメーションが使うので、傾きは clip-path で出す */
    clip-path: polygon(4.5% 0, 100% 0, 95.5% 100%, 0 100%);
}

/* 上下の縁を走る斜めストライプ（キャラ選択の帯とおそろい） */
.cutin-stage::before,
.cutin-stage::after {
    content: '';
    position: absolute;
    z-index: 3;
    right: -6%;
    left: -6%;
    height: 7px;
    background: repeating-linear-gradient(-52deg,
        var(--pink-deep) 0 12px, #fff 12px 18px,
        var(--peach-deep, #e0a184) 18px 30px, #fff 30px 36px);
    pointer-events: none;
}

.cutin-stage::before { top: 0; }
.cutin-stage::after { bottom: 0; }

.cutin-stage[hidden] {
    display: none;
}

/* 席の並びは playerIndex そのまま（0=自分・下／1=下家・右／2=対面・上／3=上家・左）。
   中央寄せは calc で直に置く。transform はアニメーションが使うので触れない。
   margin: auto に頼ると、対辺の指定が要って高さが伸びてしまう */
.cutin-stage.seat-south {
    left: calc(50% - var(--cutin-w) / 2);
    /* 下は手牌と操作ボタンがあるので、そのぶん持ち上げる */
    bottom: 13vh;
}

.cutin-stage.seat-north {
    left: calc(50% - var(--cutin-w) / 2);
    top: 8vh;
}

.cutin-stage.seat-west {
    left: 2vw;
    top: calc(50% - var(--cutin-h) / 2);
}

.cutin-stage.seat-east {
    right: 2vw;
    top: calc(50% - var(--cutin-h) / 2);
}

/* **その席の側から入って、その席の側へ帰る。** 誰のものかが位置と動きの両方で分かる */
.cutin-stage.is-playing {
    /* ⚠ renderer.js の playAbilityCutins が渡す時間と**同じ値**にすること */
    animation: ability-cutin-sweep 2.2s ease-in-out both;
}

/* ひめ「アシスト」：選ばれた的だけ、押した瞬間に一度光る。 */
.cutin-stage.is-riichi.is-playing {
    animation-duration: 2s;
}

.cutin-stage.seat-west.is-playing {
    animation-name: ability-cutin-west;
}

.cutin-stage.seat-east.is-playing {
    animation-name: ability-cutin-east;
}

.cutin-stage.seat-north.is-playing {
    animation-name: ability-cutin-north;
}

.cutin-stage.seat-south.is-playing {
    animation-name: ability-cutin-south;
}

/* 立ち絵は枠いっぱいに引き伸ばして、はみ出したぶんは切る（会長指摘・2026-08-28）。
   黒が始まるのは上下19%・左右8%だが、**そこに合わせると枠に対して小さすぎた**（同）。
   枠の縁まで広げる。縁の光は screen で立ち絵の上に乗るので、外側は光に溶けて消え、
   ちょうど縁でぼかしたように収まる。
   ⚠ img は置換要素なので、inset だけでは伸びない（width:auto が内在サイズになる）。
   **幅と高さを明示する**こと。左右は枠と同じ幅まで、上下はほぼ枠いっぱい（同）。
   立ち絵は正方形寄りで顔が上のほうにあるので、object-position で顔の高さを残す */
.cutin-chara {
    position: absolute;
    z-index: 1;
    top: 2%;
    left: 0;
    width: 100%;
    height: 96%;
    object-fit: cover;
    object-position: center 20%;
}

.cutin-frame {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    mix-blend-mode: screen;
}

/* 枠の要素は1つだけ。色は renderer が src を差し替えて出し分ける
   （会長指示・2026-08-28。リーチ専用の要素を別に持つのはやめた） */

.cutin-slash {
    display: none;
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    mix-blend-mode: screen;
}

.cutin-stage.is-contested .cutin-slash {
    display: block;
}

.cutin-stage.is-blocked .cutin-frame {
    display: none;
}

.cutin-stage.is-blocked .cutin-chara {
    filter: grayscale(1) brightness(0.55);
    outline: 1px solid rgba(22, 26, 36, 0.8);
    box-shadow:
        0 0 0 2px rgba(14, 17, 24, 0.45),
        0 8px 18px rgba(4, 6, 10, 0.75);
}

.cutin-name,
.cutin-label {
    position: absolute;
    z-index: 3;
    left: 50%;
    width: 88%;
    color: #fffdf4;
    text-align: center;
    text-shadow:
        0 2px 2px rgba(35, 20, 3, 0.95),
        0 0 7px rgba(35, 20, 3, 0.95),
        0 0 14px rgba(232, 182, 43, 0.9);
    transform: translateX(-50%) skewX(var(--slant, -8deg));
}

/* 4つ並ぶぶん枠が小さいので、文字もそれに合わせる */
.cutin-name {
    /* キャラ名（→ 先頭の @font-face） */
    font-family: 'Fibaji', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    top: 12%;
    font-size: clamp(12px, 1.7vw, 18px);
    letter-spacing: 0.08em;
}

.cutin-label {
    /* スキル名は丸ポップ体（→ 先頭の @font-face） */
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    bottom: 11%;
    font-size: clamp(15px, 2.2vw, 26px);
    letter-spacing: 0.12em;
}

/* 席が分からないときの既定。左から入って右へ抜ける */
@keyframes ability-cutin-sweep {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }
    18% {
        opacity: 1;
        transform: translateX(0);
    }
    72% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

@keyframes ability-cutin-west {
    0% { opacity: 0; transform: translateX(-130%); }
    18% { opacity: 1; transform: translateX(0); }
    76% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-130%); }
}

@keyframes ability-cutin-east {
    0% { opacity: 0; transform: translateX(130%); }
    18% { opacity: 1; transform: translateX(0); }
    76% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(130%); }
}

@keyframes ability-cutin-north {
    0% { opacity: 0; transform: translateY(-150%); }
    18% { opacity: 1; transform: translateY(0); }
    76% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-150%); }
}

@keyframes ability-cutin-south {
    0% { opacity: 0; transform: translateY(150%); }
    18% { opacity: 1; transform: translateY(0); }
    76% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(150%); }
}

.call-select-panel {
    width: 100%;
    /* 手元に置くので、モーダルだったころより薄く詰める */
    padding: 8px 12px 10px;
    text-align: center;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
}

/* 手元に降ろしたぶん、見出しは小さく。何を選ぶかは h2 だけで足りる */
.call-select-kicker {
    display: none;
}

.call-select-panel h2 {
    color: var(--muted);
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

/* 候補は横に並べる。数が増えたら折り返す */
.call-select-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.call-select-button {
    min-width: 0;
    padding: 7px 9px;
    color: var(--text-primary);
    font: inherit;
    background: var(--tint-yellow);
    border: 1px solid #e8d896;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.call-select-button:hover {
    border-color: #d4bc5e;
    box-shadow: var(--shadow-2);
}

.call-select-tiles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--tile-height);
}

.call-select-label {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
}

/* 牌のかわりに数字を並べる形（つばめの推量の舞・能力仕様/済_tsubame_つばめ.md §6）。
   高さが一目で分かるよう、牌と同じ高さの枠に**大きく**置く */
.call-select-tiles.is-numbers {
    gap: 10px;
    padding: 0 6px;
}

.call-select-number {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 34px;
    line-height: 1;
    color: #996245;
    text-shadow: 0 1px 0 var(--card);
}

.call-select-cancel {
    margin-top: 8px;
}

.call-select-cancel[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .call-select-list {
        grid-template-columns: 1fr;
    }

    .call-select-button {
        display: grid;
        grid-template-columns: minmax(150px, auto) 1fr;
        align-items: center;
        gap: 10px;
        text-align: left;
    }

    .call-select-label {
        margin-top: 0;
    }
}

#message-text {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 36px;
    font-weight: 400;
    color: var(--pink-deep);
    text-shadow: 0 3px 0 var(--card), 0 5px 14px rgba(217, 139, 163, 0.35);
    animation: slideIn 0.5s ease;
}

/* アガリ手牌表示 */
/* 和了の手は**14枚を一列で見せる**（会長指摘・2026-08-28）。
   折り返すと、どこで手が切れているのか読めなくなる。
   窓を 960px に広げたぶん一回り大きく（会長指示・2026-09-08）。
   14×46＋すき間で 690px ほど。窓の幅に収まる */
#win-hand-display {
    --tile-width: 46px;
    --tile-height: 64px;
    /* 鳴き牌もこの中に並ぶので、同じ縮尺で下げる。
       下げないと、鳴いたぶんだけ手牌より大きくなる */
    --tile-small-width: 38px;
    --tile-small-height: 53px;
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: none;
}

.win-meld-separator {
    align-self: stretch;
    width: 1px;
    min-height: var(--tile-height);
    margin: 0 8px;
    background: var(--line);
}

.win-melds {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* 役・翻数（左）と点数移動（右）を横に並べる段（会長指示・2026-09-08）。
   牌は上で全幅。窓が狭いときは折り返して、従来どおり縦に積む */
#result-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    max-width: 100%;
}

/* 役表示パネル */
#win-yaku-display {
    /* 右横の点数移動と高さを揃えたとき、中身が上に寄らないよう縦中央に置く */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--card);
    border: 2px solid var(--pink);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 30px rgba(61, 43, 34, 0.15);
    padding: 18px 30px;
    min-width: 300px;
    max-width: 420px;
}

/* 結果の無い場面（見出しだけのオーバーレイ）で空の枠を残さない */
#win-yaku-display:empty {
    display: none;
}

.yaku-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: 17px;
    color: var(--text-primary);
    border-bottom: 1px dotted var(--line);
}

.yaku-name {
    /* 役名は漢字で出す（→ js/yaku.js の YAKU_KANJI）。
       「断幺九」「混全帯幺九」「純全帯幺九」の **幺** は、けいなん丸ポップ体JP に
       入っていることを確認ずみ。本文書体まかせにすると欠ける恐れがあるので、
       ここだけ書体を明示する */
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-weight: 500;
}

.yaku-han {
    color: var(--accent);
    font-weight: 700;
}

/* 平原「ロマン砲」: 食い下がりが消えた役に添える印 */
.yaku-note {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #7a5a10;
    background: #f7e7ba;
    border: 1px solid #d8ab3e;
    border-radius: var(--r-full);
    vertical-align: 2px;
}

.yaku-total {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    margin-top: 4px;
    font-size: 21px;
    font-weight: 900;
    color: var(--accent);
    border-top: 2px solid var(--accent);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#next-round-btn {
    display: none;
}

/* ---------- 点数移動の図 ----------
   出す場所は #message-overlay の中（和了・流局はそこが必ず出ている場面）。
   すでにオーバーレイが卓を覆っているので、ここでは下地を敷き直さず、
   役表示パネルと同じ体裁のカードとして並べる。
   寸法は #score-flow-diagram の --flow-w だけで決まり、
   中身は % と em で追従する（矢印を描く座標は renderer.js の ScoreFlowLayout）*/
#score-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px 12px;
    background: var(--panel-bg);
    border: 2px solid var(--pink);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 30px rgba(61, 43, 34, 0.15);
}

#score-flow[hidden] {
    display: none;
}

#score-flow-kicker {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--pink-deep);
}

#score-flow-diagram {
    --flow-w: 440px;
    position: relative;
    width: var(--flow-w);
    aspect-ratio: 440 / 260;
    /* カードも札もすべて em。図を縮めれば文字も一緒に縮む。
       0.02727 = 12px ÷ 440px（矢印の座標系 1 に対して文字 0.02727） */
    font-size: calc(var(--flow-w) * 0.02727);
}

#score-flow-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 矢印は交差する（ツモは3本・流局は最大4本）。
   線の下に白い太線を敷いて、どちらが上を通っているか分かるようにする */
.score-flow-arrow-halo {
    fill: none;
    stroke: var(--card);
    stroke-width: 7;
    stroke-linecap: round;
}

.score-flow-arrow {
    fill: none;
    stroke: var(--pink-deep);
    stroke-width: 3;
    stroke-linecap: round;
}

/* 供託（リーチ棒）からの分は、席どうしのやりとりと色を変える */
.score-flow-arrow.is-pot {
    stroke: var(--peach-deep);
}

#score-flow-head path {
    fill: var(--pink-deep);
}

#score-flow-head-pot path {
    fill: var(--peach-deep);
}

/* カードと金額の札はどちらも図いっぱいの入れ物に、% で置く */
#score-flow-seats,
#score-flow-amounts {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.score-flow-seat {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05em;
    padding: 0.15em;
    overflow: hidden;
    text-align: center;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 0.8em;
    box-shadow: 0 2px 6px rgba(61, 43, 34, 0.12);
}

/* もらった席は縁を立て、払った席は卓で手番以外を沈めるのと同じ要領で少し落とす */
.score-flow-seat.is-gain {
    border-color: var(--pink-deep);
    box-shadow: 0 3px 10px rgba(217, 139, 163, 0.32);
}

.score-flow-seat.is-lose .score-flow-avatar img {
    opacity: 0.72;
}

.score-flow-avatar {
    position: relative;
    flex: none;
    width: 2.4em;
    height: 2.4em;
    line-height: 0;
}

.score-flow-face-frame {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    border: 1.5px solid var(--chara-color, var(--card));
    transform: skewX(var(--slant));
    background: var(--line);
    box-shadow: 0 2px 5px rgba(61, 43, 34, 0.18);
}

.score-flow-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transform: skewX(var(--unslant)) scale(1.15);
}

/* キャラのいない席も斜めの枠で示す。 */
.score-flow-avatar.is-blank {
    background: var(--line);
    border: 1.5px solid var(--card);
    border-radius: 0;
    transform: skewX(var(--slant));
}

/* 席風は卓の .player-wind と同じ流儀で、丸で囲わず白フチで抜いて右下へ。
   下に出しすぎると真下の名前と噛み合うので、はみ出しは横だけにする */
.score-flow-wind {
    position: absolute;
    right: -0.32em;
    bottom: -0.1em;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 1.05em;
    line-height: 1;
    color: var(--ink);
    -webkit-text-stroke: 0.22em var(--card);
    paint-order: stroke fill;
}

/* 東＝親。卓と同じ赤で示す */
.score-flow-wind.is-dealer {
    color: #e0483f;
}

.score-flow-name {
    max-width: 100%;
    overflow: hidden;
    font-family: 'Fibaji', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 0.92em;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 卓の .player-name と同じく、renderer が --chara-color を流し込む */
    color: var(--chara-color, var(--ink));
}

.score-flow-score {
    font-size: 0.72em;
    line-height: 1.1;
    color: var(--muted);
}

.score-flow-delta {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 1em;
    line-height: 1.15;
}

/* もらったぶんは目立つ桃、払ったぶんは沈んだ灰 */
.score-flow-delta.is-plus {
    color: var(--pink-deep);
}

.score-flow-delta.is-minus {
    color: var(--muted);
}

.score-flow-delta.is-zero {
    color: var(--muted);
    opacity: 0.45;
}

/* 矢印に添える金額。線の上に乗るので、白地で抜いて読めるようにする */
.score-flow-amount {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 0.05em 0.4em;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 0.85em;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--pink-deep);
    background: var(--card);
    border: 1.5px solid var(--pink);
    border-radius: 0.9em;
    box-shadow: 0 2px 5px rgba(61, 43, 34, 0.14);
}

.score-flow-amount.is-pot {
    color: var(--peach-deep);
    border-color: var(--peach);
}

/* 供託（リーチ棒）。卓の真ん中に置き、ここから和了者へ矢印が伸びる */
#score-flow-pot {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.15em 0.55em 0.25em;
    line-height: 1.15;
    transform: translate(-50%, -50%);
    background: var(--card);
    border: 1.5px solid var(--peach-deep);
    border-radius: 0.8em;
    box-shadow: 0 2px 6px rgba(61, 43, 34, 0.14);
}

#score-flow-pot[hidden] {
    display: none;
}

.score-flow-pot-label {
    font-size: 0.68em;
    letter-spacing: 0.06em;
    color: var(--muted);
}

#score-flow-pot-amount {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 0.9em;
    color: var(--peach-deep);
}

/* 高さの低い画面。手牌・ドラ・役と縦に並ぶので、図を一回り小さくして収める。
   中身は % と em なので、--flow-w を変えるだけで全部ついてくる */
@media (max-height: 880px) {
    #message-overlay {
        gap: 12px;
        padding: 12px 0;
        overflow-y: auto;
        /* 収まらないときは中央寄せをやめて、上が切れないようにする */
        justify-content: safe center;
    }

    #score-flow {
        gap: 2px;
        padding: 8px 12px 10px;
    }

    #score-flow-kicker {
        font-size: 12px;
    }

    #score-flow-diagram {
        --flow-w: 380px;
    }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1200px) {
    :root {
        --tile-width: 30px;
        --tile-height: 42px;
        --tile-small-width: 24px;
        --tile-small-height: 32px;
    }

    .tile-label {
        font-size: 12px;
    }

    .discard-tile .tile-label {
        font-size: 10px;
    }
}

@media (max-width: 900px) {
    #app {
        grid-template-columns: 1fr;
    }

    #side-panel {
        display: none;
    }
}

/* ---------- キャラクター選択画面 ---------- */
#character-select {
    /* 斜めの基調角（会長指示・2026-09-07 全面改修）。カード・席・タブ・帯ぜんぶで共用する。
       中の絵は --unslant で打ち消して、切り口だけを斜めにする */
    --slant: -8deg;
    --unslant: 8deg;
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        repeating-linear-gradient(-52deg, rgba(246, 205, 216, 0.14) 0 2px, transparent 2px 28px),
        radial-gradient(circle at 50% 12%, rgba(246, 205, 216, 0.65), transparent 42%),
        rgba(253, 249, 242, 0.96);
    backdrop-filter: blur(12px);
}

/* 画面の上下を走る斜めのリボン（手本の画面端のストライプ） */
#character-select::before,
#character-select::after {
    content: '';
    position: absolute;
    right: -10%;
    left: -10%;
    height: 44px;
    background:
        linear-gradient(#fff 0 0) 0 26px / 100% 5px no-repeat,
        linear-gradient(155deg, var(--pink-deep), var(--peach-deep, #e0a184));
    transform: rotate(-2.5deg);
    pointer-events: none;
}

#character-select::before { top: -16px; }
#character-select::after { bottom: -16px; transform: rotate(-2.5deg) scaleY(-1); }

#character-select[hidden] {
    display: none;
}

.character-select-panel {
    position: relative;
    z-index: 1;
    width: min(1050px, 100%);
    height: min(820px, calc(100vh - 48px));
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    /* 右上と左下の角を斜めに切る。⚠ border は clip-path に切られて
       **切り口の辺だけ線が消える**（会長指摘・2026-09-07）ので、枠線は
       「外形いっぱいのピンクの板（::before）＋2px内側の白い板（::after）」の
       二層で描く。影も clip に切られないよう filter で持つ */
    background: transparent;
    border: 0;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
    filter: drop-shadow(0 20px 40px rgba(61, 43, 34, 0.22));
}

.character-select-panel::before,
.character-select-panel::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

/* 輪郭の色板（外形そのまま） */
.character-select-panel::before {
    inset: 0;
    background: var(--pink);
}

/* 2px内側の表面。切り口も2px内側の相似形で切る */
.character-select-panel::after {
    inset: 2px;
    background: linear-gradient(155deg, #ffffff, #fdf4ea);
    clip-path: polygon(0 0, calc(100% - 29px) 0, 100% 29px, 100% 100%, 29px 100%, 0 calc(100% - 29px));
}

.character-select-header {
    position: relative;
    padding: 18px 30px 16px;
    text-align: left;
    border-bottom: 0;
}

/* 見出しの下を走る斜めストライプ（点線の代わり） */
.character-select-header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 7px;
    background: repeating-linear-gradient(-52deg,
        var(--pink) 0 10px, transparent 10px 18px,
        var(--peach, #f2c9a8) 18px 28px, transparent 28px 36px);
}

.character-select-header h1 {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 34px 5px 18px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    color: #fff;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.15;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 0 rgba(61, 43, 34, 0.22);
    background: var(--pink-deep);
    box-shadow: 8px 8px 0 var(--peach, #f2c9a8);
    transform: skewX(var(--slant));
}

.character-select-header > p:last-child {
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
}

.character-select-kicker {
    display: inline-block;
    padding: 2px 14px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    background: var(--ink, #3d2b22);
    transform: skewX(var(--slant));
}

.character-seats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 34px 8px 26px;
}

/* 席は平行四辺形。左から右へ、階段のように一段ずつ下がる（--step） */
.character-seat {
    min-width: 0;
    position: relative;
    display: block;
    height: 112px;
    overflow: hidden;
    padding: 0;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    background: var(--card);
    border: 2px solid var(--chara-color, var(--line));
    border-radius: 4px;
    cursor: pointer;
    transform: skewX(var(--slant)) translateY(var(--step, 0px));
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.character-seat:nth-child(2) { --step: 6px; }
.character-seat:nth-child(3) { --step: 12px; }
.character-seat:nth-child(4) { --step: 18px; }

.character-seat:hover {
    border-color: var(--pink);
    background: #fffaf5;
}

/* 掴んだカードが上に来ている席。ここで離すとこの子が座る */
.character-seat.is-drop-target {
    border-color: var(--chara-color, var(--pink-deep));
    background: #fff3f7;
    box-shadow: 0 0 0 3px var(--pink), 0 10px 20px rgba(61, 43, 34, 0.18);
}

.character-seat.is-active {
    border-color: var(--chara-color, var(--pink-deep));
    background: #fdeef2;
    box-shadow: 0 0 0 3px var(--pink);
    transform: skewX(var(--slant)) translateY(calc(var(--step, 0px) - 2px));
}

.character-seat-label {
    position: absolute;
    top: 5px;
    left: 7px;
    z-index: 2;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.character-seat.is-active .character-seat-label {
    color: var(--accent);
}

.character-seat-portrait {
    width: 100%;
    height: 100%;
    /* レートバッジ（.character-seat-rate）の置き場になる */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d8c9ba;
    font-size: 28px;
    background: var(--line);
    border-radius: 10px;
}

.character-seat-portrait::before {
    content: '？';
}

.character-seat.is-filled .character-seat-portrait::before {
    display: none;
}

.character-seat-image {
    position: absolute;
    top: 44%;
    /* 顔の中心へ寄せる。左右端では画像の外が見えない位置に止める。 */
    left: clamp(calc(100% - var(--portrait-width, 125%)), var(--portrait-left, -12.5%), 0%);
    width: var(--portrait-width, 125%);
    height: auto;
    object-fit: cover;
    object-position: top center;
    /* 顔の高さをキャラごとに合わせ、枠の傾きだけを打ち消す。 */
    transform: translateY(var(--portrait-top, -38%)) skewX(var(--unslant));
}

.character-seat-name {
    position: absolute;
    right: 9px;
    bottom: 6px;
    left: 9px;
    z-index: 2;
    font-size: clamp(28px, 3.3vw, 42px);
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
}

.character-seat-name.is-mid { font-size: clamp(25px, 2.8vw, 34px); }
.character-seat-name.is-long { font-size: clamp(21px, 2.3vw, 28px); }

.character-tabs {
    display: flex;
    gap: 10px;
    padding: 16px 26px 0 30px;
    border-bottom: 2px solid var(--line);
}

.character-tab {
    position: relative;
    padding: 9px 20px 10px;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    background: var(--surface, #fdf4ea);
    border: 2px solid var(--line);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    transform: skewX(-14deg);
    transform-origin: bottom left;
}

/* 立ち絵がまだ無いキャラの受け皿。キャラ色の丸に名前の1文字（2026-08-27） */
.character-face-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(61, 43, 34, 0.5);
    background: #777;
}

.character-tab-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 5px;
    padding: 1px 5px;
    color: var(--card);
    font-size: 10px;
    background: var(--muted);
    border-radius: 9px;
}

.character-tab::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
    background: transparent;
}

.character-tab.is-active {
    color: #fff;
    background: var(--pink-deep);
    border-color: var(--pink-deep);
}

.character-tab.is-active .character-tab-count {
    color: var(--pink-deep);
    background: #fff;
}

.character-tab.is-active::after {
    background: transparent;
    box-shadow: none;
}

/* ⚠ 一覧をスクロールすると、枠から外へ出たカードが**見えないまま手前に残り**、
   タブや席のクリックを奪う（会長報告・2026-09-07。メロタクトの23人で必ず出る）。
   overflow のクリップは絵にしか効いていなくて、当たり判定は素通しになっている。
   `contain: paint` を足しても素通しのままだったので、**積み順で決着させる**。
   一覧の前後に来る帯を明示的に上へ積み、一覧は下に置く */
.character-select-header,
.character-seats,
.character-tabs,
.character-select-footer {
    position: relative;
    z-index: 2;
}

.character-grid {
    position: relative;
    z-index: 0;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: 14px 16px;
    overflow-y: auto;
    padding: 18px 30px 26px;
    scrollbar-gutter: stable;
    scrollbar-color: var(--pink) var(--line);
    scrollbar-width: thin;
}

.character-grid::-webkit-scrollbar {
    width: 6px;
}

.character-grid::-webkit-scrollbar-thumb {
    background: var(--pink);
    border-radius: 3px;
}

/* カードは平行四辺形。枠は**キャラの色**（JS が --chara-color を渡す）。
   偶数番だけ一段さがって、互い違いの段々になる（--zig） */
.character-card {
    min-width: 0;
    aspect-ratio: 5 / 6;
    flex: 0 0 calc((100% - 80px) / 6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: start;
    color: var(--text-primary);
    font: inherit;
    background: var(--card);
    border: 3px solid var(--chara-color, var(--pink));
    border-radius: 4px;
    /* 掴んで運ぶものなので、掴めることを見た目で言う。文字は選択させない */
    cursor: grab;
    user-select: none;
    transform: skewX(var(--slant)) translateY(var(--zig, 0px));
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.character-card:nth-child(even) { --zig: 10px; }

/* ポインタを乗せたときの「みょっ」と持ち上がる演出は残す（会長指示・2026-09-07）。
   **持ち上がるだけ**で、説明は出ない——出すのはクリック */
.character-card:hover:not(.is-used) {
    box-shadow: 0 8px 18px rgba(61, 43, 34, 0.16), 0 0 0 3px var(--pink);
    transform: skewX(var(--slant)) translateY(calc(var(--zig, 0px) - 4px));
}

.character-card.is-used {
    cursor: pointer;
}

/* ---- 上へドラッグして席に入れる（会長指示・2026-09-07 で操作を入れ替え）----
   クリック＝説明を出すだけ／席に座らせるのはドラッグ。
   「掴んでいる」ことが分かるように、手応えを3段に分けてある（会長指摘・2026-09-07）：
     押した瞬間 … .is-grabbed  カードが沈み、席の帯が破線で待ちに入る
     動かした   … .is-dragging 元のカードが薄くなり、影武者が指について回る
     席の上     … .is-drop-target その席が光り、影武者が縮んで吸い付く
   影武者は #character-select の中に入れているので、--slant と --unslant は継いでくる */

/* 押した瞬間。まだ影武者は出さない——ただのクリックでちらつかせないため。
   :hover（0,3,0）に負けないよう :not(.is-used) まで書いて重みをそろえる */
.character-card.is-grabbed:not(.is-used) {
    cursor: grabbing;
    box-shadow:
        0 3px 8px rgba(61, 43, 34, 0.3),
        0 0 0 3px var(--chara-color, var(--pink-deep));
    transform:
        skewX(var(--slant)) translateY(var(--zig, 0px)) scale(0.955);
}

.character-card.is-dragging {
    opacity: 0.22;
    box-shadow: none;
    cursor: grabbing;
}

/* 掴んでいるあいだの席の帯。空いている席が「ここへ置ける」と自分から言う */
#character-select.is-grabbing .character-seat:not(.is-filled) {
    border-style: dashed;
    border-color: var(--pink);
    animation: seat-await 1.1s ease-in-out infinite;
}

#character-select.is-grabbing .character-seat.is-drop-target {
    animation: none;
}

@keyframes seat-await {
    0%, 100% { background: var(--card); }
    50% { background: #fff2f7; }
}

/* 影武者は**器と中身の2枚重ね**。
   器（これ）は指の動きだけを受け持ち、transition を持たない＝遅れずに付いてくる。
   傾きと拡縮は中のカードが transition つきで追う（1枚だと動きまでもったりする） */
.character-drag-ghost {
    position: fixed;
    z-index: 20;
    pointer-events: none;
    /* left / top で元のカードにぴったり重ねてあるので、ここは「指の動き」だけ */
    transform: translate(var(--drag-x, 0px), var(--drag-y, 0px));
    transition: none;
}

/* 席の外で離したとき、元の場所へすっと戻る。
   ⚠ 時間は charaselect.js の CharacterSelect.GHOST_RETURN_MS と**同じ値**にすること */
.character-drag-ghost.is-returning {
    transition: transform 0.19s ease;
}

.character-card.character-drag-ghost-card {
    width: 100%;
    height: 100%;
    opacity: 0.95;
    box-shadow:
        0 18px 32px rgba(61, 43, 34, 0.36),
        0 0 0 3px var(--chara-color, var(--pink));
    /* 段差（--zig）は器の left / top に入っているので、ここでは掛けない */
    transform:
        rotate(var(--drag-tilt, 0deg))
        scale(var(--drag-scale, 1))
        skewX(var(--slant, -8deg));
    transition: transform 0.13s ease, box-shadow 0.13s ease;
}

/* キーボードでも今いる場所が見えるように（色以外の手がかり） */
.character-card:focus-visible,
.character-seat:focus-visible,
.character-tab:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .character-card,
    .character-seat,
    .character-tab {
        transition: none;
    }

    /* 席の点滅と影武者の伸び縮みは止める。位置に付いてくる動きだけ残す */
    #character-select.is-grabbing .character-seat:not(.is-filled) {
        animation: none;
    }

    .character-card.character-drag-ghost-card {
        transition: none;
    }
}

.character-card-portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: none;
    overflow: hidden;
    display: block;
    padding: 0;
    background: var(--line);
}

.character-card-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    user-select: none;
    /* 枠の傾きを打ち消す。少し拡大して、斜めの角まで絵で埋める */
    transform: skewX(var(--unslant)) scale(1.25);
}

/* 立ち絵がまだ無い子の受け皿も、同じ打ち消しで切り口をそろえる */
.character-card-portrait .character-face-fallback,
.character-seat-portrait .character-face-fallback {
    transform: skewX(var(--unslant)) scale(1.25);
}

.character-card-name {
    width: 100%;
    overflow: hidden;
    padding: 6px 5px 7px;
    /* 1100px 以上ではカード幅が固定なので 21px で頭打ち。
       いちばん長い名前でも 5.31em × 21px ≒ 112px で、帯（約136px）に収まる */
    font-size: clamp(13px, 1.9vw, 21px);
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--chara-color, var(--ink));
    /* 名前の帯もキャラ色（うすめ）。文字は傾いたまま＝斜めの名前 */
    background: color-mix(in srgb, var(--chara-color, #e58bb0) 24%, #fff);
}

.character-card.is-used {
    filter: grayscale(1);
    opacity: 0.3;
    cursor: not-allowed;
}

.character-select-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 4px;
    padding: 18px 26px 14px;
    background: linear-gradient(100deg, var(--pink-deep), var(--peach-deep, #e0a184));
    border-top: 0;
    /* 上の辺を斜めに切る（手本の画面下の帯） */
    clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 100%);
}

.character-select-actions .game-btn {
    transform: skewX(var(--slant));
}

.character-ability {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 10px;
}

.character-ability strong {
    color: #fff;
    font-size: 15px;
}

/* 見出しが【名前】になっているあいだだけキャラ名フォント。
   「キャラクター未選択」のときは当てない（漢字が混ざって欠けるため） */
#character-ability-name.is-chara-name {
    font-family: 'Fibaji', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    letter-spacing: 0.04em;
}

.character-ability span {
    color: #ffeef3;
    font-size: 13px;
}

/* カード名と席の名前は、キャラ名専用の 'Fibaji'（→ 先頭の @font-face） */
.character-card-name,
.character-seat-name {
    font-family: 'Fibaji', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
    color: var(--chara-color, var(--ink));
}

/* 決定キャラの名前は絵の右下に、白塗り＋キャラ色の縁取りで重ねる。 */
.character-seat-name {
    color: #fff;
    -webkit-text-stroke: 5px var(--chara-color, var(--ink));
    paint-order: stroke fill;
    text-shadow: 0 2px 3px rgba(61, 43, 34, 0.24);
}

.character-select-actions {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

#character-start-btn:disabled {
    color: #c4b6a8;
    background: var(--line);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 760px) {
    #character-select {
        padding: 10px;
    }

    .character-select-panel {
        height: calc(100vh - 20px);
    }

    .character-select-header {
        padding: 12px 16px 9px;
    }

    .character-select-header > p:last-child,
    .character-select-kicker {
        display: none;
    }

    .character-seats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 9px 12px;
    }

    .character-seat {
        height: 88px;
    }

    /* :nth-child の段差を上書きし、次の行やタブに重ねない。 */
    .character-seat:nth-child(n) {
        --step: 0px;
    }

    .character-seat-name {
        font-size: 30px;
        -webkit-text-stroke-width: 4px;
    }

    .character-seat-name.is-mid { font-size: 25px; }
    .character-seat-name.is-long { font-size: 21px; }

    .character-tabs {
        padding: 0 10px;
    }

    .character-tab {
        flex: 1;
        padding: 9px 6px;
        font-size: 12px;
    }

    .character-grid {
        gap: 7px;
        padding: 10px 12px;
    }

    .character-card {
        flex-basis: calc((100% - 14px) / 3);
    }

    .character-select-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 10px 12px;
    }

    .character-select-actions .game-btn {
        flex: 1;
        padding: 9px 14px;
    }
}

/* ------------------------------------------------------------
   和了の演出（会長指示・2026-08-28）

   ロン＝焦げ（`fx-scorch.png`・5列×8行＝40コマ）
   ツモ＝きらめき（`fx-twinkle.png`・5列×9行＝45コマ）
   どちらも 30FPS・1コマ192×192の透過PNG。

   コマ送りは `steps()` を2本重ねて出す。
   横（列）＝1行ぶん5コマを 5/30秒 で回し、それを行の数だけ繰り返す。
   縦（行）＝全体の長さで行を1つずつ送る。
   器は body 直下に置く。河は #center-area が切り詰めるので、
   牌の中に入れるとはみ出したところで切れてしまう
   ------------------------------------------------------------ */
#win-fx {
    --fx-size: 240px;
    position: fixed;
    z-index: 190;
    width: var(--fx-size);
    height: var(--fx-size);
    /* left/top は牌の中心。そこから自分の半分だけ戻す */
    margin: calc(var(--fx-size) / -2) 0 0 calc(var(--fx-size) / -2);
    pointer-events: none;
    background-repeat: no-repeat;
}

#win-fx[hidden] {
    display: none;
}

.win-fx-scorch {
    background-image: url('../img/effect/fx-scorch.png');
    /* 5列×8行 */
    background-size: calc(var(--fx-size) * 5) calc(var(--fx-size) * 8);
    animation:
        win-fx-col 0.1667s steps(5) 8 both,
        win-fx-row-8 1.3333s steps(8) 1 both;
}

.win-fx-twinkle {
    background-image: url('../img/effect/fx-twinkle.png');
    /* 5列×9行。ツモのほうが一回り大きく出す */
    --fx-size: 150px;
    background-size: calc(var(--fx-size) * 5) calc(var(--fx-size) * 9);
    animation:
        win-fx-col 0.1667s steps(5) 9 both,
        win-fx-row-9 1.5s steps(9) 1 both;
}

@keyframes win-fx-col {
    from { background-position-x: 0; }
    to { background-position-x: calc(var(--fx-size) * -5); }
}

@keyframes win-fx-row-8 {
    from { background-position-y: 0; }
    to { background-position-y: calc(var(--fx-size) * -8); }
}

@keyframes win-fx-row-9 {
    from { background-position-y: 0; }
    to { background-position-y: calc(var(--fx-size) * -9); }
}

/* ------------------------------------------------------------
   くるみ「段取り」「情報整理」（能力仕様/kurumi_くるみ.md §6）
   ------------------------------------------------------------ */

/* 予見ゲージの本。ミミの月・星と同じ扱い */
.ability-gauge-mark.is-book {
    width: 31px;
    height: 31px;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
}

.ability-gauge-mark.is-book svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* じゅーくんの札束ゲージ。少し斜めに重ねて、札束らしい厚みを出す */
.ability-gauge-mark.is-money {
    width: 37px;
    height: 37px;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 1px 2px rgba(61, 43, 34, 0.35));
}

.ability-gauge-mark.is-money svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 段取り：自分の河のうち控えに入っている牌は押せる（×印で次の局へ帰さない） */
.discard-tile.discard-kurumi-plan {
    cursor: pointer;
}

.discard-tile.discard-kurumi-plan:hover {
    box-shadow: 0 0 6px #4ec27a, var(--tile-shadow);
}

/* 段取りの×印。この牌は次の局へ帰らない */
.discard-tile.discard-kurumi-crossed::before {
    content: '✕';
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #d64545;
    text-shadow: 0 0 3px #fff, 0 0 2px #fff;
    pointer-events: none;
}

.discard-tile.discard-kurumi-crossed {
    filter: saturate(0.55) brightness(0.9);
}

/* もう13枚選んでいて、これ以上は×を解けない牌（会長指示・2026-09-12 の上限）。
   押せる牌（＝解ける×）と見分けが付くように、カーソルと光を止めて少し沈める */
.discard-tile.discard-kurumi-capped {
    cursor: default;
    opacity: 0.6;
}

.discard-tile.discard-kurumi-capped:hover {
    box-shadow: var(--tile-shadow);
}

/* 段取りで帰ってきた牌。緑をまとって、少し遅れて着地する */
.tile-kurumi-slide {
    animation: tileKurumiSlide 0.5s ease-out;
}

@keyframes tileKurumiSlide {
    0% { opacity: 0; transform: translateY(-14px); border-color: #d8f2e0; }
    55% { opacity: 1; transform: translateY(2px); border-color: #4ec27a; box-shadow: 0 0 11px #4ec27a, var(--tile-shadow); }
    100% { transform: translateY(0); border-color: var(--accent); box-shadow: var(--tile-shadow); }
}

/* ---------- くるみ「情報整理」の窓（2026-09-09 会長指示） ----------
   移動可能な窓に全34種を並べ、打牌しながら自分の手番だけ枚数を確認する。 */
#kurumi-count-overlay {
    position: fixed;
    z-index: 150;
    inset: 0;
    pointer-events: none;
}

#kurumi-count-overlay[hidden] {
    display: none;
}

.kurumi-count-panel {
    position: absolute;
    width: min(480px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    pointer-events: auto;
}

.kurumi-count-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 牌の一覧。萬・筒・索は9列、字牌は7つ。牌はここだけの小さめの寸法 */
#kurumi-count-grid {
    --tile-width: 34px;
    --tile-height: 48px;
    --tile-small-width: 34px;
    --tile-small-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.kurumi-count-row {
    display: flex;
    gap: 5px;
}

.kurumi-count-tile {
    padding: 3px;
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.kurumi-count-tile:hover:not(:disabled) {
    border-color: #e08a2e;
}

.kurumi-count-tile:focus-visible {
    outline: 2px solid #b45f10;
    outline-offset: 2px;
}

/* いま見ている牌はオレンジ（従来の「選択中」の色を引き継ぐ） */
.kurumi-count-tile.is-picked {
    border-color: #b45f10;
    background: rgba(247, 162, 63, 0.35);
}

.kurumi-count-tile .tile {
    pointer-events: none;
}

/* 数えた結果。選んだ牌の絵＋4か所の数字 */
#kurumi-count-result {
    min-height: 84px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.75);
    border: 2px solid var(--hairline-strong);
    border-radius: var(--r-lg, 12px);
}

#kurumi-count-result[hidden] {
    display: none;
}

#kurumi-count-result .kurumi-count-face {
    --tile-width: 40px;
    --tile-height: 56px;
    width: var(--tile-width);
    height: var(--tile-height);
}

.kurumi-count-places {
    display: flex;
    gap: 16px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    line-height: 1.1;
}

.kurumi-count-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.kurumi-count-place small {
    font-size: 12px;
    opacity: 0.8;
}

.kurumi-count-place b {
    font-size: 27px;
}

/* 山＝引ける側の緑、河＝流れた藍、敵＝取られている赤、自分＝手元の金 */
.kurumi-count-place.is-wall { color: #1d7a44; }
.kurumi-count-place.is-river { color: #38598f; }
.kurumi-count-place.is-enemy { color: #b2342c; }
.kurumi-count-place.is-self { color: #9a7921; }

.kurumi-count-note {
    width: 100%;
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.kurumi-count-gauge {
    margin: 10px 0 6px;
    font-size: 13px;
    color: #2f7a4d;
}

.kurumi-count-gauge b {
    font-size: 17px;
}

/* 自分の手牌にポインタを置いたとき、**牌の面へ直に**重ねる枚数
   （会長指示・2026-09-17）。メオのスート透かし・のんのクォーク透かしと同じ作り。
   左上＝山・右上＝河・左下＝敵の手・右下＝自分の手を、牌いっぱいの丸ポップ体で薄く。
   白い縁（paint-order: stroke）は牌の絵柄の上でも数字の形を残すためで、
   薄さは opacity が決める。数字の色は窓の4か所と同じ */
.kurumi-tile-count {
    position: absolute;
    inset: 1px 1px 3px;
    z-index: 3;
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

/* 牌の外へはみ出させない。書体が差し替わって字が大きく出ても、隣の牌に重ならない
   （メオのスート透かしと同じ扱い） */
.kurumi-tile-count svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.kurumi-tile-count text {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-weight: 700;
    stroke: #fffdf7;
    stroke-width: 3;
    paint-order: stroke;
}

.kurumi-tile-count .is-wall { fill: #1d7a44; }
.kurumi-tile-count .is-river { fill: #38598f; }
.kurumi-tile-count .is-enemy { fill: #b2342c; }
.kurumi-tile-count .is-self { fill: #9a7921; }

/* 窓のチェックボックスで消した場所は、牌の上からだけ引っこめる
   （窓の枚数欄は4つとも出したまま）。卓の根っこに付くクラスで一度に切り替わるので、
   あとから描き直した牌にもそのまま効く */
.kurumi-hide-wall .kurumi-tile-count .is-wall,
.kurumi-hide-river .kurumi-tile-count .is-river,
.kurumi-hide-enemy .kurumi-tile-count .is-enemy,
.kurumi-hide-self .kurumi-tile-count .is-self {
    display: none;
}

/* 牌に出す数字の出し入れ。字の色は窓の4か所とそろえる */
.kurumi-count-toggles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin: 10px 0 0;
    padding: 6px 10px 8px;
    border: 2px solid var(--hairline-strong);
    border-radius: var(--r-lg, 12px);
}

.kurumi-count-toggles legend {
    padding: 0 6px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
}

.kurumi-count-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.kurumi-count-toggle input {
    width: 18px;
    height: 18px;
    accent-color: currentColor;
    cursor: pointer;
}

.kurumi-count-toggle.is-wall { color: #1d7a44; }
.kurumi-count-toggle.is-river { color: #38598f; }
.kurumi-count-toggle.is-enemy { color: #b2342c; }
.kurumi-count-toggle.is-self { color: #9a7921; }

@media (max-width: 600px) {
    #kurumi-count-overlay { padding: 8px; }
    .kurumi-count-panel { padding: 16px 8px; }
    #kurumi-count-title { font-size: 18px; }
    #kurumi-count-grid {
        --tile-width: clamp(20px, 5.6vw, 34px);
        --tile-height: clamp(30px, 8vw, 48px);
    }
    .kurumi-count-row { gap: 1px; }
    .kurumi-count-tile { padding: 2px; min-height: 44px; }
    .kurumi-count-places { gap: 10px; }
    #kurumi-count-result { padding: 8px; gap: 8px; }
    .kurumi-count-toggles { gap: 2px 10px; padding: 4px 6px 6px; }
    .kurumi-count-toggle { font-size: 14px; }
}

/* ============================================================
   メオ「カードリーディング」（能力仕様/済_meow_メオ.md）
   ・#meow-scramble … 初ツモ後の Love scramble の選び場（手牌を覆わない卓の中央）
   ・#meow-suit-overlay … いつでも開けるスート確認の窓（くるみの情報整理と同じ作り）
   ・スートの色は4色トランプ（♠黒・♥紅・♦青・♣緑）。
     白黒の2色だと、記号が小さいとき♠と♣・♥と♦の見分けがつかない
   ============================================================ */

#meow-scramble {
    position: absolute;
    /* 初巡の手牌を見ながら選べるよう、手元より上に収める。 */
    top: 50%;
    left: 50%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 92vmin;
    max-height: min(54vh, 360px);
    overflow-y: auto;
    padding: 8px 12px 10px;
    border: 1px solid #c98aa4;
    border-radius: var(--r-md, 10px);
    background: linear-gradient(180deg, rgba(253, 244, 248, 0.96), rgba(247, 230, 238, 0.96));
    box-shadow: 0 4px 12px rgba(61, 34, 46, 0.2);
    transform: translate(-50%, -50%);
}

#meow-scramble[hidden] { display: none; }

#meow-scramble > .meow-suit-rows {
    min-height: 0;
    overflow-y: auto;
}
.meow-scramble-head, .meow-scramble-actions { flex-shrink: 0; }
.meow-scramble-actions { padding-top: 4px; }
.meow-scramble-confirm { min-height: 44px; }

/* 初めから、元の♥と選んで♥にする牌だけをはっきり見せる。薄い牌も選択可能。 */
#meow-scramble .meow-suit-tile:not(.is-heart):not(.is-picked) { opacity: 0.55; }

.meow-scramble-head {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 12px;
    line-height: 1.2;
    color: var(--ink);
}

/* 34種のグリッド（選び場・確認窓の共用）。牌はここだけの小さめの寸法 */
.meow-suit-rows {
    --tile-width: 34px;
    --tile-height: 48px;
    --tile-small-width: 34px;
    --tile-small-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.meow-suit-row {
    display: flex;
    gap: 4px;
}

.meow-suit-tile {
    position: relative;
    padding: 3px;
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    line-height: 0;
    cursor: pointer;
}

.meow-suit-tile .tile { pointer-events: none; }

.meow-suit-tile:hover:not(.is-readonly):not(.is-fixed):not(.is-capped) {
    border-color: #d94a6a;
}

.meow-suit-tile:focus-visible {
    outline: 2px solid #b23553;
    outline-offset: 2px;
}

/* スート記号。牌の右下の角にちょこんと。牌の絵に紛れないよう薄い膜を敷く */
.meow-suit-mark {
    position: absolute;
    right: 1px;
    bottom: 1px;
    min-width: 15px;
    padding: 1px 2px;
    border-radius: 6px 0 6px 0;
    background: rgba(255, 253, 250, 0.92);
    font-size: 13px;
    line-height: 1.1;
    text-align: center;
    pointer-events: none;
}

/* 4色トランプ。♠黒・♥紅・♦青・♣緑 */
.meow-suit-tile.is-spade .meow-suit-mark { color: #2c2f3a; }
.meow-suit-tile.is-heart .meow-suit-mark { color: #d63d63; }
.meow-suit-tile.is-diamond .meow-suit-mark { color: #2f6fc2; }
.meow-suit-tile.is-club .meow-suit-mark { color: #2c8a4b; }

/* のんのquark-watermarkと同じ、牌面いっぱいの淡い透かし。
   乗算で牌の黒線を白ませず、ドラ枠・赤ドラ・既存の能力印を残す。 */
.meow-tile-suit {
    position: absolute;
    inset: 1px 1px 3px;
    z-index: 1;
    opacity: 0.26;
    mix-blend-mode: multiply;
    font-family: 'Segoe UI Symbol', sans-serif;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

.meow-tile-suit svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.meow-tile-suit text { fill: currentColor; stroke: none; }

/* 茨の盾：実際に引いた1枚だけ。薄緑の輪と、相手を指す濃い緑の矢印。 */
.riichu-tile-thorn {
    position: absolute;
    inset: 0 0 2px;
    z-index: 1;
    color: #68ad78;
    opacity: 0.36;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.riichu-tile-thorn svg { display: block; width: 100%; height: 100%; }
.riichu-tile-arrow {
    position: absolute;
    top: 1%;
    left: 24%;
    width: 52%;
    height: 27%;
    z-index: 2;
    color: #247a45;
    pointer-events: none;
}
.riichu-tile-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px #fff);
}
.riichu-tile-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.riichu-tile-arrow.is-left svg { transform: rotate(180deg); }
.riichu-tile-arrow.is-up svg { transform: rotate(-90deg); }

/* 透かしと併用する角のアイコン。白い下地で牌の模様から分ける。 */
.meow-tile-suit-icon {
    position: absolute;
    right: 0;
    bottom: 1px;
    z-index: 2;
    padding: 0 2px;
    border-radius: 4px 0 2px 0;
    background: rgba(255, 253, 250, 0.94);
    font-family: 'Segoe UI Symbol', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    pointer-events: none;
    user-select: none;
}
.hand-tile .meow-tile-suit-icon {
    font-size: clamp(11px, calc(var(--tile-width, 40px) * 0.36), 16px);
}

.meow-tile-suit.is-spade, .meow-tile-suit-icon.is-spade, .meow-control-suit.is-spade { color: #2c2f3a; }
.meow-tile-suit.is-heart, .meow-tile-suit-icon.is-heart, .meow-control-suit.is-heart { color: #b32d4e; }
.meow-tile-suit.is-diamond, .meow-tile-suit-icon.is-diamond, .meow-control-suit.is-diamond { color: #245fa5; }
.meow-tile-suit.is-club, .meow-tile-suit-icon.is-club, .meow-control-suit.is-club { color: #24733c; }

/* 立ち絵の上に、手番/鳴き操作と独立した2つの定位置を設ける。
   対象が1→3→4スートになっても、checkの位置とクリック領域は動かさない。 */
#meow-controls {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 6;
    display: grid;
    grid-template-columns: 124px 80px;
    gap: 8px;
    width: max-content;
    line-height: 1;
}

#meow-controls[hidden] { display: none; }

.meow-control-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 8px;
    border: 1px solid #b99b68;
    border-radius: 7px;
    font-family: 'Segoe UI Symbol', 'Zen Maru Gothic', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.meow-lock-button {
    grid-column: 1;
    color: #f5d995;
    background: linear-gradient(145deg, #846075, #624257);
    box-shadow: 0 2px 0 #482c34, inset 0 0 0 2px #ffffff24;
}

.meow-lock-button.is-locked {
    background: linear-gradient(145deg, #a04669, #6b2b48);
}

.meow-lock-icon { display: flex; flex: none; width: 24px; height: 28px; }
.meow-lock-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.meow-lock-icon circle { fill: currentColor; stroke-width: 0; }

.meow-control-suits {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 1px;
    min-height: 28px;
    padding: 2px;
    border-radius: 3px;
    background: #fffaf2;
}

.meow-control-suit {
    display: inline-block;
    min-width: 15px;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
}

.meow-check-button {
    grid-column: 2;
    color: #6b5866;
    background: #f5edf2;
    border-color: #cbbdc8;
    box-shadow: 0 2px 0 #b6a4b229, inset 0 0 0 2px #fffcfe;
    font-size: 14px;
}

.meow-control-button:hover:not(:disabled) { outline: 2px solid #c7a869; outline-offset: 1px; }
.meow-control-button:focus-visible { outline: 3px solid #43689c; outline-offset: 3px; }
.meow-control-button:disabled { opacity: 0.55; filter: saturate(0.4); cursor: not-allowed; }

#player-south .player-info:has(> #meow-controls:not([hidden])) > .avatar-bubbles {
    bottom: calc(100% + 64px);
}

/* 同スート一覧は確認窓と同じ萬/筒/索/字の4行。対象外の位置は空欄で残す。
   上限はブラウザ実寸で決め、スマホ縦・狭いノートの端からはみ出させない。 */
#discard-preview.has-meow-suit {
    max-height: calc(100dvh - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.meow-suit-preview {
    --meow-accent: #2c2f3a;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--arcade-ink, #482c34);
}

.meow-suit-preview.is-heart { --meow-accent: #b32d4e; }
.meow-suit-preview.is-diamond { --meow-accent: #245fa5; }
.meow-suit-preview.is-club { --meow-accent: #24733c; }

#discard-preview > .meow-suit-preview:not(:first-child) {
    padding-top: 8px;
    border-top: 1px solid #c9b58e;
}

.meow-suit-preview-label {
    color: var(--meow-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px #fff;
}

.meow-suit-preview-grid {
    --tile-width: clamp(20px, 6.8vw, 30px);
    --tile-height: calc(var(--tile-width) * 1.4);
    --tile-small-width: var(--tile-width);
    --tile-small-height: var(--tile-height);
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: min(340px, calc(100vw - 40px));
}

.meow-suit-preview-row {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 2px;
}

/* 字牌7種は確認窓と同じ中央7列。東を2列目に置き、両端1列ずつ空ける。 */
.meow-suit-preview-row:last-child > .meow-suit-preview-slot:first-child {
    grid-column: 2;
}

.meow-suit-preview-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: calc(var(--tile-height) + 6px);
    padding: 2px 1px;
    border: 1px solid transparent;
    border-radius: 2px;
}

.meow-suit-preview-cell {
    background: #fffdf8;
    border-color: #e9ddcb;
}

.meow-suit-preview-cell.is-source {
    outline: 2px solid var(--meow-accent);
    outline-offset: -2px;
}

/* Love scramble で♥に塗り替え済み（確定後）。ほんのり紅をまとう */
.meow-suit-tile.is-scrambled { background: rgba(214, 61, 99, 0.12); }
.meow-suit-tile.is-scrambled .meow-suit-mark { color: #d63d63; }

/* 選び中（まだ確定前）。紅の縁と♥の予告 */
.meow-suit-tile.is-picked {
    border-color: #d63d63;
    background: rgba(214, 61, 99, 0.18);
}
.meow-suit-tile.is-picked .meow-suit-mark { color: #d63d63; }

/* もう♥の牌（選ぶ意味がない）・7か所選び切ったあとの残り・確認窓（見るだけ） */
.meow-suit-tile.is-fixed { cursor: default; }
.meow-suit-tile.is-capped { cursor: default; opacity: 0.55; }
.meow-suit-tile.is-readonly { cursor: default; }

/* 使えない局（封印など）。理由は見出しに出ているので、牌は沈めるだけ */
#meow-scramble.is-locked .meow-suit-tile {
    cursor: default;
    filter: grayscale(0.7);
    opacity: 0.6;
}

/* 打牌しながら見られる、移動可能な非モーダル窓。窓の外は卓の操作へ通す。 */
#meow-suit-overlay {
    position: fixed;
    z-index: 150;
    inset: 0;
    pointer-events: none;
}

#meow-suit-overlay[hidden] { display: none; }

.meow-suit-panel {
    position: absolute;
    width: min(480px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    pointer-events: auto;
}

.meow-suit-drag-handle {
    min-height: 44px;
    padding: 6px 8px 9px;
    border-bottom: 1px solid #cdb5c3;
    border-radius: 4px;
    background: #f6eaf1;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.meow-suit-drag-handle.is-dragging { cursor: grabbing; }
.meow-suit-drag-handle:focus-visible { outline: 3px solid #43689c; outline-offset: -3px; }
.meow-suit-drag-handle .ability-target-kicker { font-size: 14px; letter-spacing: 0.08em; }
.meow-suit-drag-handle .ability-target-kicker span { float: right; font-size: 20px; }
.meow-suit-panel .meow-suit-drag-handle h2 { font-size: 18px; }
.meow-suit-drag-hint { display: inline-block; margin-top: 5px; font-size: 14px; line-height: 1.3; color: #715568; }

/* 牌の位置やクリック領域はそのまま。同スートだけを残して読み比べる。 */
.meow-suit-tile.meow-suit-dimmed,
.hand-tile.meow-suit-dimmed { opacity: 0.24; }

#meow-suit-grid { margin-top: 10px; }

.meow-suit-state {
    margin: 10px 0 6px;
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 13px;
    color: #a83a58;
}

.meow-suit-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* カードリーディングが呼んだツモの光。紅がふわりと一拍（カットインは出さない・会長指定） */
.tile-meow-suit {
    animation: tileMeowSuit 0.4s ease-out;
}

@keyframes tileMeowSuit {
    0% { box-shadow: 0 0 2px 1px rgba(214, 61, 99, 0.9), 0 0 14px rgba(214, 61, 99, 0.7); }
    100% { box-shadow: var(--tile-shadow, none); }
}

@media (max-width: 600px) {
    .meow-suit-panel { padding: 8px; }
    .meow-suit-rows {
        --tile-width: clamp(20px, 5.6vw, 34px);
        --tile-height: clamp(30px, 8vw, 48px);
    }
    .meow-suit-row { gap: 1px; }
    .meow-suit-tile { padding: 2px; min-height: 44px; }
}

/* ============================================================
   能力詳細パネル（左・2026-09-07 会長指示）
   キャラにポインタを乗せているあいだ（選択中はそのまま）、効果ごとの説明を出す。
   レーダーは右のテスト結果パネルへ移した（説明のスクロールの場所を空けるため）
   ============================================================ */

.character-radar {
    position: fixed;
    /* 画面端からではなく**選択パネル（1050px・中央寄せ）の縁から12px**に吸い付かせる
       （会長指摘・2026-09-07「真ん中との隙間が気になる」）。525＝パネル半分、+12＝隙間 */
    right: calc(50% + 537px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 210;
    /* 幅は画面に合わせて伸び縮み（最大400px）。50vw−537−12＝画面の左端までの残り */
    width: min(400px, calc(50vw - 549px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 10px 14px 12px;
    color: var(--text-primary);
    /* ドット地（手本のハーフトーン）＋対角の角を斜めに落とす。影は clip に切られないよう filter で */
    background:
        radial-gradient(circle at 2px 2px, rgba(217, 139, 163, 0.14) 1.3px, transparent 1.6px) 0 0 / 12px 12px,
        linear-gradient(160deg, #ffffff, #fdf4ea);
    border: 2px solid var(--pink);
    /* 角の斜め落としはやめた（会長指摘・2026-09-07）——スクロール容器では
       輪郭の二層方式が使えず、clip-path だと切り口の線が消えるため。
       斜めの語彙はドット地と名前チップが持つ */
    border-radius: 6px;
    box-shadow: 0 14px 28px rgba(61, 43, 34, 0.24);
    /* 説明が長い子はスクロールして読む（会長指摘・2026-09-07）。
       表示は「最後に指した子」を出しっぱなしで消えないので、そのまま掴んで読める */
    pointer-events: auto;
}

.character-radar[hidden] {
    display: none;
}

/* 画面が狭くて幅260pxを取れないときは出さない（右のパネルと同じ線）。
   50vw−549 ≥ 260 ⇔ 1618px なので、1620px を境にする */
@media (max-width: 1619px) {
    .character-radar {
        display: none;
    }
}

.radar-head {
    margin-bottom: 2px;
}

/* キャラ名。下線にキャラ色を敷いて、どの子のパネルかをひと目で */
.radar-name {
    display: inline-block;
    padding: 1px 16px 3px 10px;
    font-family: 'Fibaji', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: 20px;
    color: var(--chara-color, var(--ink));
    background: color-mix(in srgb, var(--chara-color, #e58bb0) 30%, #fff);
    border-left: 4px solid var(--chara-color, var(--pink));
    transform: skewX(var(--slant, -8deg));
}

.radar-chart {
    display: block;
    width: 100%;
    /* パネルが広がっても（最大400px）チャートだけ膨らみすぎないように */
    max-width: 300px;
    margin: 0 auto;
    height: auto;
}

/* 目盛りの輪と軸線。色に頼らない薄い骨組み */
.radar-ring {
    fill: none;
    stroke: var(--line);
    stroke-width: 1;
}

.radar-ring.is-outer {
    stroke-width: 1.5;
}

.radar-spoke {
    stroke: var(--line);
    stroke-width: 1;
}

/* データの多角形。塗りは薄く、縁と頂点の点で形を立たせる */
.radar-shape {
    fill-opacity: 0.28;
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.radar-label {
    font-size: 14px;
    font-weight: 700;
    fill: var(--text-primary);
}

/* 軸名の下の点数（0〜10 の相対評価・会長指示 2026-09-07。実数は下の表で読む） */
.radar-label-score {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    fill: var(--pink-deep, #c9527d);
}

/* 能力の詳しい説明（下の欄からの引っ越し先・2026-09-07 会長指示） */
.radar-ability {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px dotted var(--line);
}

.radar-ability-name {
    display: block;
    font-size: 14px;
    color: var(--accent);
}

.radar-ability-text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* 効果ごとの「名前＋説明」ブロック（会長差し戻し・2026-09-07）。
   名前を行頭に立てて、説明は半段下げる。縦に並んでもリズムで読める */
.radar-ability-detail {
    margin-top: 6px;
}

.radar-ability-detail-name {
    display: block;
    font-size: 13px;
    color: var(--accent);
}

.radar-ability-detail-name::before {
    content: '◆ ';
    font-size: 10px;
    vertical-align: 1px;
    color: var(--pink-deep, #c9527d);
}

.radar-ability-detail-text {
    margin: 1px 0 0 14px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-primary);
}

/* 背の低い画面では、チャートを縮めて下の表を優先する（右パネル内） */
@media (max-height: 820px) {
    .radar-chart {
        max-width: 210px;
        margin: 0 auto;
    }
}

/* 広い画面では、下の欄の説明はこのパネルに引っ越し済みなので隠す。
   パネルが出ない狭い画面（1619px 以下）では、下の欄がそのまま受け皿になる */
@media (min-width: 1620px) {
    .character-select-footer .character-ability {
        visibility: hidden;
    }
}

/* ============================================================
   テスト結果パネル（あとで外せるおまけ・2026-09-03 会長指示）
   キャラにポインタを乗せているあいだ、右に計測結果を出す。
   data/testresult.js を読み込まなければ、そもそも中身が入らないので出てこない
   ============================================================ */

.character-testresult {
    position: fixed;
    /* 左パネルと同じく、選択パネルの縁から12pxに吸い付かせる（会長指摘・2026-09-07） */
    left: calc(50% + 537px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 210;
    width: min(400px, calc(50vw - 549px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    /* 役を全部出す・翻数を13まで出す（会長指示・2026-09-03）ぶん縦に伸びるので、
       行間と余白を詰めてある。頭にレーダーも載った（2026-09-07）ぶん、
       はみ出したらスクロールして読む */
    padding: 9px 12px 11px;
    color: var(--text-primary);
    /* ドット地（手本のハーフトーン）＋対角の角を斜めに落とす。影は clip に切られないよう filter で */
    background:
        radial-gradient(circle at 2px 2px, rgba(217, 139, 163, 0.14) 1.3px, transparent 1.6px) 0 0 / 12px 12px,
        linear-gradient(160deg, #ffffff, #fdf4ea);
    border: 2px solid var(--pink);
    /* 角の斜め落としはやめた（会長指摘・2026-09-07）——スクロール容器では
       輪郭の二層方式が使えず、clip-path だと切り口の線が消えるため。
       斜めの語彙はドット地と名前チップが持つ */
    border-radius: 6px;
    box-shadow: 0 14px 28px rgba(61, 43, 34, 0.24);
    /* スクロールできるよう当たり判定を持つ（会長指摘・2026-09-07）。
       表示は「最後に指した子」を出しっぱなしで消えないので、そのまま掴んで読める */
    pointer-events: auto;
}

.character-testresult[hidden] {
    display: none;
}

/* 画面が狭くて幅260pxを取れないときは出さない（左のパネルと同じ線・1620px境） */
@media (max-width: 1619px) {
    .character-testresult {
        display: none;
    }
}

.testresult-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--line);
}

.testresult-title {
    width: 100%;
    color: var(--text-secondary, #8a7a70);
    font-size: 11px;
    letter-spacing: 0.06em;
}

.testresult-who {
    font-family: 'Fibaji', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    color: var(--chara-color, var(--text-primary));
    font-size: 20px;
    font-weight: 700;
}

.testresult-badges {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding-inline: 2px;
    white-space: nowrap;
}

.testresult-type,
.testresult-strength {
    display: inline-block;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 0;
    transform: skewX(var(--slant));
    box-shadow: 2px 2px 0 rgba(61, 43, 34, 0.12);
}

.testresult-type {
    color: var(--chara-color);
    border-left: 3px solid currentColor;
    background: color-mix(in srgb, var(--chara-color) 15%, white);
}

.testresult-strength.is-plus {
    color: #1b6b46;
    background: #d8f2e4;
}

.testresult-strength.is-minus {
    color: #8c3341;
    background: #fadfe3;
}

.testresult-section {
    margin-top: 7px;
}

.testresult-section-title {
    display: block;
    margin-bottom: 3px;
    color: var(--text-secondary, #8a7a70);
    font-size: 11px;
    font-weight: 700;
}

.testresult-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.34;
}

.testresult-table td {
    padding: 0;
}

.testresult-table td.is-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.testresult-table td.is-diff {
    width: 3.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--text-secondary, #8a7a70);
}

.testresult-table td.is-diff.is-good { color: #1b6b46; }
.testresult-table td.is-diff.is-bad { color: #8c3341; }
.testresult-table tr.is-dora td { color: var(--text-secondary, #8a7a70); }

.testresult-hist-row {
    display: grid;
    grid-template-columns: 3.6em minmax(0, 1fr) 4ch;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 1.28;
}

.testresult-hist-label {
    /* 「三倍満」（3文字＋余白）が折り返さない幅（会長指摘・2026-09-07） */
    width: 3.6em;
    flex: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.testresult-hist-track {
    display: block;
    min-width: 0;
    padding-inline: 1px;
}

.testresult-hist-bar {
    display: block;
    height: 7px;
    min-width: 0;
    border-radius: 0;
    transform: skewX(var(--slant));
    background: linear-gradient(90deg, var(--chara-color, var(--pink)), color-mix(in srgb, var(--chara-color, var(--pink)) 40%, white));
}

.testresult-hist-bar[hidden] {
    display: none;
}

.testresult-hist-count {
    flex: none;
    text-align: right;
    color: var(--text-secondary, #8a7a70);
    font-variant-numeric: tabular-nums;
}

/* キャラの絵の右上に出す「強さ」＝ 和了率の差 − 放銃率の差（会長の定義） */
.character-card-portrait {
    position: relative;
}

.character-card-strength {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.55;
    /* 親カードが傾いているため、ここでは角丸だけを外す。 */
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(61, 43, 34, 0.28);
}

.character-card-strength.is-plus {
    color: #10553a;
    background: rgba(216, 242, 228, 0.94);
}

.character-card-strength.is-minus {
    color: #7a2a37;
    background: rgba(250, 223, 227, 0.94);
}

/* 席のレート（会長指示・2026-09-07）。カードのバッジと同じ配色の小型版。
   立ち絵の枠は overflow:hidden なので、内側に収める */
.character-seat-rate {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(61, 43, 34, 0.28);
    z-index: 1;
}

.character-seat-rate.is-plus {
    color: #10553a;
    background: rgba(216, 242, 228, 0.94);
}

.character-seat-rate.is-minus {
    color: #7a2a37;
    background: rgba(250, 223, 227, 0.94);
}