/* ============================================================
   ロイヤルテーマ — 深緑のマント／チャコールグレーの卓／アイボリーの情報面／シャンパンゴールド。
   style.css の配置と能力演出を引き継ぐ、画面共通の装い。
   性能色 (--chara-color) と能力固有の色は各データが持つ。
   ============================================================ */
:root {
    --arcade-ink: #482c34;
    --arcade-burgundy: #962d49;
    /* 背景専用。赤い操作・状態表示やキャラ色とは独立させる。 */
    --royal-green-deep: #103e30;
    --royal-green: #18543e;
    --royal-green-light: #286b50;
    --royal-charcoal: #292e2b;
    --arcade-gold: #c9a45c;
    --arcade-red: #b73550;
    --arcade-rose: #d57783;
    --arcade-yellow: #eed395;
    /* キャラ選択と対戦画面で共用する織り模様。 */
    --select-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='80' viewBox='0 0 64 80'%3E%3Cpath d='M32 2 62 40 32 78 2 40Z' fill='none' stroke='%23eed395' stroke-opacity='.16'/%3E%3Cpath d='m32 34 4 6-4 6-4-6Z' fill='%23eed395' fill-opacity='.25'/%3E%3C/svg%3E");
    --select-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cpath d='M44 38 46 42 50 44 46 46 44 50 42 46 38 44 42 42Z' fill='%23c9a45c' fill-opacity='.18'/%3E%3Ccircle cx='0' cy='0' r='1' fill='%23c9a45c' fill-opacity='.16'/%3E%3C/svg%3E");
    --arcade-dots: radial-gradient(circle, rgba(91, 48, 56, 0.055) 1px, transparent 1.5px);
    --canvas: #fff;
    --surface: #f2e7e3;
    --surface-soft: #fcf8f1;
    --hairline: #dfcdc3;
    --hairline-soft: #f4ece4;
    --hairline-strong: #b49a86;
    --charcoal: var(--arcade-ink);
    --slate: #725b58;
    --steel: #7b625f;
    --primary: #962d49;
    --primary-pressed: #702139;
    --brand-pink-deep: #a52e49;
    --tint-rose: #f6dce1;
    --tint-peach: #f6e7ce;
    --tint-lavender: #f4e1e5;
    --color-man: #cc352e;
    --color-pin: #126da6;
    --color-sou: #167447;
    --color-wind: #202d42;
    --color-red: #de2828;
    --color-green: #167447;
    --r-md: 3px;
    --r-lg: 4px;
    --r-xl: 4px;
    --table-border: var(--arcade-ink);
    --table-felt: radial-gradient(ellipse at center, #fcf7ee 0%, #eadbd4 60%, #d1b2af 100%);
    --tile-bg: linear-gradient(125deg, #fff 0 55%, #fff8e9 56% 94%, #c5a064 95%);
    --tile-border: #a18a71;
    --tile-shadow: 0 3px 0 #84694e, 0 5px 3px rgba(78, 43, 31, 0.23), inset 0 0 0 1px #fff;
    --tile-hover-shadow: 0 4px 0 #962d49, 0 8px 12px rgba(150, 45, 73, 0.28);
    /* 伏せ牌は青みのあるグレー。深紅の背景と、ドラを示す黄色から区別する。 */
    --tile-back-bg: linear-gradient(145deg, #dce7ef 0 38%, #9eafbf 39% 92%, #60758a 93%);
}

/* キャラ選択。名簿は左の等間隔グリッド、4席は右のポートレート帯。
   共通の傾斜を保ち、段差を付けずカード・席の基準線を揃える。 */
#character-select,
#title-screen,
#music-room {
    --slant: -8deg;
    --unslant: 8deg;
    /* キャラ選択は淡い山吹の織り地。ワインレッドの帯と金の飾りに馴染ませる。
       地色はリボン（#8c411e〜#cc8844）より明るく、色相も黄側に振って輪郭を埋もれさせない。 */
    isolation: isolate;
    background:
        radial-gradient(ellipse at 12% 15%, #eed39520, transparent 55%),
        repeating-linear-gradient(35deg, transparent 0 56px, #b8896428 57px, #fff3d738 58px, transparent 59px 114px),
        repeating-linear-gradient(145deg, transparent 0 56px, #b8896420 57px, #fff3d730 58px, transparent 59px 114px),
        repeating-linear-gradient(110deg, #b2672c08 0 56px, #ffffff06 56px 112px),
        repeating-linear-gradient(0deg, transparent 0 3px, #ffffff06 3px 4px),
        linear-gradient(125deg, #eccf8a, #e3c37e 48%, #d7b571);
    backdrop-filter: none;
}
/* 大きな斜めのリボン。金の二重縁を持たせ、操作面の背後にだけ描く。 */
#character-select::before,
#character-select::after,
#title-screen::before,
#title-screen::after {
    display: block;
    z-index: 0;
    height: clamp(100px, 17vh, 180px);
    border-block: 1px solid #c9a45c;
    box-shadow: 0 0 0 5px #fff3df80, 0 0 0 6px #c9a45c80;
    background:
        linear-gradient(transparent 0 8px, #eed39570 8px 9px, transparent 9px calc(100% - 9px), #eed39570 calc(100% - 9px) calc(100% - 8px), transparent calc(100% - 8px)),
        var(--select-diamond) 0 0 / 64px 80px,
        linear-gradient(110deg, #8c411e, #b2672c 55%, #cc8844);
    transform: rotate(-8deg);
    pointer-events: none;
}
#character-select::before { top: -100px; }
#character-select::after { bottom: -100px; transform: rotate(-8deg); }
/* 斜めの形は固定し、織り模様だけを1タイルずつ流す。継ぎ目で跳ねない。 */
#character-select::before { animation: selectRibbonFlow 2s linear infinite; }
#character-select::after { animation: selectRibbonFlow 2.5s linear infinite reverse; }
@keyframes selectRibbonFlow {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 0 0, -64px 0, 0 0; }
}

/* 光玉は操作面の背後。各粒の位置・周期をずらし、画面外で静かに折り返す。
   動かすのは小さな要素の transform と opacity だけ（タイマー・追加画像なし）。 */
.character-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.character-ambient--inner { opacity: 0.5; }
.character-mote {
    position: absolute;
    left: var(--mote-x);
    bottom: -80px;
    width: var(--mote-size, 28px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fffef8f5 0 8%, #fff3cfb0 20%, #ffdda65c 42%, #fff6db12 62%, transparent 72%);
    opacity: 0;
    will-change: transform, opacity;
    animation: selectMoteRise var(--mote-time, 22s) linear infinite;
    animation-delay: var(--mote-delay, 0s);
}
.character-mote::after {
    content: '';
    position: absolute;
    inset: 36%;
    border-radius: 50%;
    background: #fffdf3;
    box-shadow: 0 0 9px 2px #ffe9b2a0;
}
@keyframes selectMoteRise {
    0% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
    12% { opacity: 0.8; }
    50% { transform: translate3d(var(--mote-drift, 24px), calc(-50vh - 80px), 0) scale(1); opacity: 0.6; }
    85% { opacity: 0.55; }
    100% { transform: translate3d(0, calc(-100vh - 160px), 0) scale(0.75); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #character-select::before,
    #character-select::after { animation: none; }
    .character-ambient { display: none; }
}

.character-select-panel {
    grid-template-columns: minmax(0, 1fr) 32%;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: 'header header' 'tabs seats' 'roster seats' 'footer footer';
    background: #fffaf2;
    border: 2px solid var(--arcade-ink);
    border-radius: 0;
    clip-path: none;
    filter: none;
    box-shadow: 7px 8px 0 #962d4926;
}
.character-select-panel::before,
.character-select-panel::after { display: none; }
.character-select-header {
    grid-area: header;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 22px;
    margin: 0;
    padding: 20px 24px 18px;
    background:
        var(--select-diamond) right center / 48px 60px,
        linear-gradient(115deg, #962d49 0 64%, #b73550 64%);
    border-bottom: 4px solid var(--arcade-gold);
}
.character-select-header::after {
    display: block;
    height: 8px;
    background: linear-gradient(-1deg, var(--arcade-ink) 0 24%, #fffaf2 28% 48%, transparent 52%);
}
.character-select-header h1 {
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: 0.08em;
    transform: skewX(var(--slant));
    -webkit-text-stroke: 3px #671f35;
    paint-order: stroke fill;
    text-shadow: 2px 3px 0 #671f35;
}
.character-select-kicker {
    justify-self: start;
    padding: 3px 10px;
    color: #ffe8b1;
    background: #702139;
    border-left: 3px solid var(--arcade-gold);
    letter-spacing: 0.2em;
    transform: skewX(var(--slant));
}
.character-select-header > p:last-child {
    grid-column: 1;
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.character-seats {
    grid-area: seats;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
    padding: 20px 26px;
    background: var(--select-spark) 12px 12px / 88px 88px, linear-gradient(110deg, #f1e1ca, #e8ccad);
    border-left: 2px solid #d6b4b5;
}
.character-seat,
.character-seat:nth-child(n) {
    --step: 0px;
    height: 100%;
    min-height: 0;
    border: 2px solid var(--chara-color, #b99891);
    border-radius: 0;
    background: #fffaf2;
    box-shadow: 2px 3px 0 #482c3420;
    transform: skewX(var(--slant));
}
.character-seat.is-active {
    border-color: var(--arcade-burgundy);
    background: #fff3d5;
    box-shadow: 0 0 0 3px var(--arcade-yellow);
    transform: skewX(var(--slant));
}
.character-seat:hover { border-color: var(--arcade-burgundy); }
.character-seat.is-drop-target {
    border-color: var(--arcade-burgundy);
    box-shadow: 0 0 0 4px var(--arcade-yellow), 0 0 0 6px var(--arcade-burgundy);
}
.character-seat-portrait {
    border-radius: 0;
    color: #b58b91;
    background:
        radial-gradient(circle, #ffffff90 1px, transparent 1.5px) 0 0 / 8px 8px,
        color-mix(in srgb, var(--chara-color, #d57783) 25%, #fffaf2);
}
.character-seat-portrait::before { font-size: 40px; }
/* キャラごとの顔位置・拡大率で枠を埋める。顔の中心は名前帯を除いた領域へ。 */
.character-seat-image {
    top: calc(50% - 18px);
    width: var(--portrait-width, 125%);
    left: clamp(calc(100% - var(--portrait-width, 125%)), var(--portrait-left, -12.5%), 0%);
    right: auto;
}
.character-seat-label,
.character-seat.is-filled .character-seat-label,
.character-seat.is-active .character-seat-label {
    top: 0;
    left: 0;
    padding: 4px 12px;
    color: #fff;
    background: var(--arcade-burgundy);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
.character-seat-name,
.character-seat-name.is-mid,
.character-seat-name.is-long {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 4px 10px;
    font-size: 26px;
    line-height: 1.1;
    color: var(--arcade-ink);
    background: #fffaf2f2;
    border-top: 2px solid var(--chara-color, #d6b4b5);
    -webkit-text-stroke: 0;
    text-shadow: none;
}
.character-seat-name.is-long { font-size: 22px; }
.character-seat:not(.is-filled) .character-seat-name { display: none; }

.character-tabs {
    grid-area: tabs;
    gap: 8px;
    padding: 20px 20px 0;
    border-bottom: 2px solid var(--arcade-burgundy);
    background: #fffaf2;
}
.character-tab {
    flex: 1;
    padding: 10px 6px;
    border: 1px solid #c8a9a4;
    border-bottom: 0;
    border-radius: 0;
    color: #63414a;
    background: #f3e1df;
    font-size: 13px;
    transform: skewX(var(--slant));
}
.character-tab::after { display: none; }
.character-tab.is-active { color: #fff; background: var(--arcade-burgundy); border-color: var(--arcade-burgundy); }
.character-tab-count { border-radius: 2px; background: #fffaf2; color: #754653; }
.character-tab.is-active .character-tab-count { color: #702139; background: #ffe8b1; }

.character-grid {
    grid-area: roster;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 14px 22px;
    padding: 20px;
    background: var(--select-spark) 0 0 / 88px 88px;
    scrollbar-color: var(--arcade-burgundy) #f3e1df;
}
.character-card,
.character-card:nth-child(n) {
    --zig: 0px;
    position: relative;
    width: 100%;
    aspect-ratio: 1.28;
    border: 2px solid var(--chara-color, var(--arcade-rose));
    border-radius: 0;
    background: #fff;
    box-shadow: 2px 3px 0 #482c3420;
    transform: skewX(var(--slant));
}
.character-card:hover:not(.is-used) {
    transform: skewX(var(--slant)) translateY(-3px);
    box-shadow: 0 0 0 2px var(--arcade-yellow), 2px 5px 0 #482c3430;
}
.character-card.is-grabbed:not(.is-used) { transform: skewX(var(--slant)) scale(0.97); }
.character-card-portrait {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
    background: color-mix(in srgb, var(--chara-color) 25%, #fffaf2);
}
.character-card-portrait img {
    object-position: center 18%;
    transform: skewX(var(--unslant)) scale(1.12);
}
/* ゆぴ・シャーレは顔が低めなので、一覧では頭より目元を中心に切り抜く。 */
.character-card-portrait img[src$="/yupi.png"] { object-position: center 72%; }
.character-card-portrait img[src$="/syare.png"] { object-position: center 64%; }
/* 全身の参考画像は、元画像を保ったまま顔の位置で一覧用に切り抜く。 */
.character-card.uses-seat-portrait .character-card-portrait { position: relative; }
.character-card.uses-seat-portrait .character-card-portrait img {
    position: absolute;
    top: 50%;
    left: var(--portrait-left);
    width: var(--portrait-width);
    max-width: none;
    height: auto;
    transform: translateY(var(--portrait-top)) skewX(var(--unslant));
}
.character-card[data-group="original"] .character-card-name {
    font-size: clamp(14px, 1.2vw, 17px);
    letter-spacing: 0;
}
.character-card-portrait .character-face-fallback,
.character-seat-portrait .character-face-fallback { transform: skewX(var(--unslant)) scale(1.12); }
.character-card-name {
    flex: none;
    padding: 5px 2px;
    font-size: clamp(15px, 1.65vw, 19px);
    line-height: 1.15;
    color: color-mix(in srgb, var(--chara-color) 60%, #482c34);
    background: color-mix(in srgb, var(--chara-color) 16%, #fffaf2);
    border-top: 2px solid var(--chara-color);
}
.character-card.is-used { filter: none; opacity: 0.65; cursor: pointer; }
.character-card.is-used::after {
    content: '選択済み';
    position: absolute;
    top: 6px;
    left: 0;
    padding: 3px 6px;
    color: white;
    background: #702139;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
}
.character-card-strength,
.character-seat-rate { top: 3px; right: 3px; border: 1px solid currentColor; box-shadow: none; }
.character-card-strength.is-plus,
.character-seat-rate.is-plus { background: #e1f4e7; color: #185238; }
.character-card-strength.is-minus,
.character-seat-rate.is-minus { background: #ffe4e8; color: #8a2942; }
.character-card.character-drag-ghost-card {
    transform: skewX(var(--slant)) rotate(var(--drag-tilt, 0deg)) scale(var(--drag-scale, 1.06));
}

.character-select-footer {
    grid-area: footer;
    gap: 16px;
    margin: 0;
    padding: 20px 24px 14px;
    background:
        var(--select-diamond) right center / 48px 60px,
        linear-gradient(110deg, #702139 0 64%, #962d49 64%);
    border-top: 3px solid var(--arcade-gold);
    clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
}
/* 説明の折り返しで下帯や選択枠が上下しないよう、表示領域を確保する。 */
.character-select-footer .character-ability {
    grid-column: 2;
    height: 84px;
    align-content: flex-start;
    overflow-y: auto;
}
/* 説明を左右のパネルに表示する幅では、下帯はボタンの高さに揃える。 */
@media (min-width: 1620px) {
    .character-select-footer .character-ability { height: 44px; }
}
.character-select-footer .character-ability span { color: #fff2e7; }
.character-select-footer #character-debug-hint { color: #fff2e7; }
.character-select-footer { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; }
.character-select-actions { grid-column: 3; margin-left: auto; justify-content: flex-end; padding: 0; }
.character-select-actions .game-btn { min-height: 44px; border-radius: 0; transform: skewX(var(--slant)); }
.character-select-actions .game-btn[hidden] { display: none; }
#character-monster-btn[hidden] { display: none; }
/* モード名や観戦の補足表示で、繰り返し押す切替ボタンを動かさない。 */
#character-monster-btn {
    grid-column: 1;
    justify-self: start;
    flex: none;
    width: 176px;
    max-width: 100%;
    height: 44px;
    border-radius: 0;
    padding-inline: 8px;
    letter-spacing: 0;
    white-space: nowrap;
    transform: skewX(var(--slant));
}
#character-start-btn:enabled { background: #eed395; color: #482c34; border: 2px solid #ffe8b1; }
/* 魔女討伐は上下の帯を深い青に切り替える。席のモード表示と同じ状態を参照する。 */
.character-select-panel:has(.character-seats.is-monster) .character-select-header {
    background:
        var(--select-diamond) right center / 48px 60px,
        linear-gradient(115deg, #102b67 0 64%, #204a91 64%);
}
.character-select-panel:has(.character-seats.is-monster) .character-select-footer {
    background:
        var(--select-diamond) right center / 48px 60px,
        linear-gradient(110deg, #0b1d48 0 64%, #163877 64%);
}
.character-select-panel:has(.character-seats.is-monster) .character-select-header h1 {
    -webkit-text-stroke-color: #081630;
    text-shadow: 2px 3px 0 #081630;
}
.character-select-panel:has(.character-seats.is-monster) .character-select-kicker {
    background: #0b1d48;
}
.character-select-panel:has(.character-seats.is-monster) .character-title-btn {
    background: #0b1d4850;
}
.character-select-panel:has(.character-seats.is-monster) .character-title-btn:hover {
    background: #0b1d48;
}

/* デバッグ観戦は上下の帯と見出しの装飾を無彩色にする。 */
.character-select-panel:has(.character-seats.is-debug) .character-select-header {
    background:
        var(--select-diamond) right center / 48px 60px,
        linear-gradient(115deg, #454545 0 64%, #606060 64%);
}
.character-select-panel:has(.character-seats.is-debug) .character-select-footer {
    background:
        var(--select-diamond) right center / 48px 60px,
        linear-gradient(110deg, #303030 0 64%, #484848 64%);
}
.character-select-panel:has(.character-seats.is-debug) .character-select-header h1 {
    -webkit-text-stroke-color: #202020;
    text-shadow: 2px 3px 0 #202020;
}
.character-select-panel:has(.character-seats.is-debug) .character-select-kicker {
    background: #303030;
}
.character-select-panel:has(.character-seats.is-debug) .character-title-btn {
    background: #30303050;
}
.character-select-panel:has(.character-seats.is-debug) .character-title-btn:hover {
    background: #303030;
}

/* 魔女討伐に入っているあいだ、切り替えボタンを山吹に */
#character-monster-btn.is-monster { background: #fff3d5; color: #702139; border-color: var(--arcade-ink); }

/* 魔女討伐（右の帯）：あなたの席の下に、強さの3ボタンを縦に積む。席1つぶんの高さを3つで分ける */
.character-seats.is-monster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 3fr);
}
.character-seats.is-monster .character-difficulty {
    grid-row: 2;
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.character-seats.is-monster .character-difficulty[hidden] { display: none; }
.character-difficulty-btn {
    --difficulty-ink: #852a4b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 54px;
    padding: 8px 12px;
    border-radius: 0;
    border: 3px solid var(--difficulty-edge);
    color: var(--difficulty-ink);
    background: linear-gradient(110deg, #fffaf2, #fff4e7);
    box-shadow: inset 5px 0 0 var(--difficulty-color), 3px 3px 0 #482c3438;
    opacity: 1;
    font-family: 'Fibaji', 'KeinannMaruPOPjp', sans-serif;
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 400;
    letter-spacing: .03em;
    -webkit-text-stroke: 0;
    text-shadow: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.character-difficulty-btn.is-normal { --difficulty-ink: #20583f; }
.character-difficulty-btn.is-hard { --difficulty-ink: #234b7d; }
.character-difficulty-name { white-space: nowrap; }
.character-difficulty-selected {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid #fff5d6;
    color: #482c34;
    background: linear-gradient(110deg, #fff0c1, #e7be6a);
    font: 700 14px/1.2 'Zen Maru Gothic', 'Yu Gothic', Meiryo, sans-serif;
    letter-spacing: .04em;
    white-space: nowrap;
    visibility: hidden;
}
.character-difficulty-selected > span { font: 900 18px/1 'Segoe UI', sans-serif; }
.character-difficulty-btn:hover:not([aria-pressed="true"]) {
    transform: skewX(var(--slant)) translateY(-2px);
    background: #fff;
    box-shadow: inset 5px 0 0 var(--difficulty-color), 3px 5px 0 #482c3450;
}
/* 実際の選択状態と同じ属性で、塗り・二重枠・明示ラベルを一緒に切り替える。 */
.character-difficulty-btn[aria-pressed="true"] {
    color: #fff8e8;
    background: var(--select-diamond) center / 48px 60px, var(--difficulty-ink);
    border-color: #ffdf92;
    transform: skewX(var(--slant)) translateY(-2px);
    box-shadow: inset 0 0 0 2px var(--difficulty-ink), inset 0 0 0 3px #f3cf7c, 0 0 0 1px #765531, 4px 6px 0 #482c3455;
    text-shadow: 1px 2px 0 #13231c66;
}
.character-difficulty-btn[aria-pressed="true"] .character-difficulty-selected { visibility: visible; text-shadow: none; }
.character-difficulty-btn:focus-visible { outline: 3px solid #482c34; outline-offset: 4px; }
@media (max-width: 760px), (max-height: 760px) {
    .character-difficulty-btn { flex-direction: row; justify-content: space-between; gap: 8px; padding: 8px 14px; font-size: 24px; }
    .character-difficulty-selected { padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .character-difficulty-btn { transition: none; }
}
#character-start-btn:disabled { background: #e4d0c8; color: #79625f; border-color: #b99891; }

/* 能力詳細と性能チャート。本文は水平の紙面、見出しだけを共通の斜め帯に。 */
.character-radar,
.character-testresult {
    --detail-heading-font: 'KeinannMaruPOPjp', 'Mochiy Pop One', sans-serif;
    --detail-number-font: 'Segoe UI', 'Arial', sans-serif;
    height: min(820px, calc(100dvh - 48px));
    padding: 14px;
    border: 2px solid var(--arcade-ink);
    border-top: 4px solid var(--arcade-gold);
    border-radius: 0;
    background: var(--select-spark) center / 88px 88px, #fffaf2;
    box-shadow: inset 0 0 0 2px #fff, 4px 5px 0 #70213930;
    color: var(--arcade-ink);
    font-family: 'Zen Maru Gothic', 'Yu Gothic', Meiryo, sans-serif;
    font-size: 13px;
    line-height: 1.65;
    scrollbar-width: thin;
    scrollbar-color: var(--arcade-burgundy) #f3e1df;
    overscroll-behavior: contain;
}
.radar-head,
.testresult-head {
    position: relative;
    isolation: isolate;
    margin: 0 2px 16px;
    padding: 12px 10px 14px;
    border: 0;
    color: #fffaf2;
}
.radar-head::before,
.testresult-head::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(-8deg);
    /* 一覧・レーダーと同じタイプ色。白い名前が読める深さを付ける。 */
    background: var(--select-diamond) center / 48px 60px,
        linear-gradient(110deg, color-mix(in srgb, var(--chara-color, #77716a) 70%, #1f2630), color-mix(in srgb, var(--chara-color, #77716a) 88%, #1f2630));
    border-bottom: 3px solid var(--arcade-gold);
    box-shadow: 2px 3px 0 #70213920;
}
.radar-name,
.testresult-who {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: #fffaf2;
    font-family: 'Fibaji', var(--detail-heading-font);
    font-size: clamp(22px, 1.5vw, 28px);
    font-weight: 400;
    line-height: 1.35;
    transform: none;
    overflow-wrap: anywhere;
    text-shadow: 1px 2px 0 #1f263080;
}
.testresult-head { gap: 6px; }
.testresult-title {
    color: #ffe6ae;
    font-family: var(--detail-heading-font);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04em;
}
.testresult-badges { width: 100%; margin: 3px 0 0; flex-wrap: wrap; gap: 6px; }
.testresult-type,
.testresult-strength { font-size: 11px; line-height: 1.5; box-shadow: none; }
.testresult-strength { font-family: var(--detail-number-font); }
.radar-ability { margin: 0; padding: 0; border: 0; }
.radar-ability-name {
    padding: 0 0 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--arcade-gold);
    color: #842c44;
    font-family: var(--detail-heading-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
}
.radar-ability-detail {
    margin-top: 14px;
    padding: 10px 11px 12px;
    border: 1px solid #e6d2c9;
    border-left: 3px solid #c9a45c;
    background: #fffdf9;
    box-shadow: 2px 2px 0 #962d4909;
}
.radar-ability-detail-name {
    color: #842c44;
    font-family: var(--detail-heading-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}
.radar-ability-detail-name::before { color: #b28a47; font-size: 9px; }
.radar-ability-text,
.radar-ability-detail-text { margin: 6px 0 0; color: #482c34; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.radar-chart-card {
    padding: 10px 4px 8px;
    border: 1px solid #d9bfa4;
    background: linear-gradient(150deg, #fff 0 62%, #faf0e9 62%);
    box-shadow: 0 2px 0 #c9a45c26;
}
.radar-chart-title {
    display: block;
    padding-left: 8px;
    color: #842c44;
    font-family: var(--detail-heading-font);
    font-size: 16px;
    font-weight: 400;
}
.radar-chart { width: 100%; max-width: 360px; margin: 4px auto 0; overflow: visible; }
.radar-field { fill: #f5e9e8; }
.radar-ring { fill: none; stroke: #cdb8b5; stroke-width: 1; }
.radar-ring.is-outer { stroke: #ae8a59; stroke-width: 1.6; }
.radar-spoke { stroke: #c5aaa9; stroke-width: 1; stroke-dasharray: 2 3; }
.radar-shape { fill-opacity: .32; stroke: color-mix(in srgb, var(--chara-color) 70%, #482c34); stroke-width: 2.8; }
.radar-label { fill: #62424c; font-family: var(--detail-heading-font); font-size: 16px; font-weight: 400; }
.radar-label-score { fill: #842c44; font-family: var(--detail-number-font); font-size: 22px; font-weight: 700; }
.radar-chart-note { margin: 2px 0 0; color: #75565e; text-align: center; font-size: 11px; line-height: 1.5; }
.testresult-section { margin-top: 18px; }
.testresult-section-title {
    margin-bottom: 6px;
    padding: 4px 6px 4px 8px;
    border: 0;
    border-left: 3px solid var(--arcade-gold);
    background: #f1dfdc;
    color: #754653;
    font-family: var(--detail-heading-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}
/* 統計は見出しから滑らかに展開する。長さが違う表も自然な高さまで開く。 */
.testresult-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 36px;
    margin-bottom: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.testresult-section-title:hover { background: #ead0d0; color: #702139; }
.testresult-section-title:focus-visible { outline: 2px solid #962d49; outline-offset: 3px; }
.testresult-section-arrow {
    flex: none;
    color: #962d49;
    font-family: 'Segoe UI', sans-serif;
    font-size: 11px;
    transition: transform .26s ease;
}
.testresult-section.is-open .testresult-section-arrow { transform: rotate(180deg); }
.testresult-section-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows .26s ease, opacity .2s ease, visibility 0s .26s;
}
.testresult-section.is-open .testresult-section-body {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows .26s ease, opacity .2s ease, visibility 0s;
}
.testresult-section-content { min-height: 0; overflow: hidden; }
.testresult-section-content > :first-child { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
    .testresult-section-title,
    .testresult-section-arrow,
    .testresult-section-body,
    .testresult-section.is-open .testresult-section-body { transition: none; }
}

.testresult-table { font-size: 12px; line-height: 1.6; }
.testresult-table td { padding: 4px 3px; border-bottom: 1px solid #eadbd2; }
.testresult-table tr:nth-child(even) { background: #f5eae4; }
.testresult-table td.is-value,
.testresult-table td.is-diff,
.testresult-hist-label,
.testresult-hist-count { font-family: var(--detail-number-font); }
.testresult-table td.is-value { color: #482c34; font-size: 13px; white-space: nowrap; }
.testresult-hist-row { padding: 3px 0; }
.testresult-hist-track { background: #f1e2dc; }
.testresult-hist-bar { height: 8px; }

@media (max-width: 760px) {
    .character-select-footer { grid-template-columns: minmax(0, 1fr); }
    #character-monster-btn { grid-row: 1; }
    .character-select-actions { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; min-height: 98px; align-content: flex-start; width: 100%; }
    .character-select-footer .character-ability { grid-column: 1; grid-row: 3; }
    .character-select-actions #character-start-btn { margin-left: auto; }
    #character-select { padding: 8px; }
    .character-select-panel {
        height: calc(100dvh - 16px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto minmax(100px, 1fr) auto;
        grid-template-areas: 'header' 'seats' 'tabs' 'roster' 'footer';
    }
    .character-select-header { display: block; padding: 12px; }
    .character-select-header h1 { font-size: 26px; }
    .character-seat-image { top: calc(50% - 12px); }
    .character-seats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 76px);
        gap: 8px;
        padding: 12px;
        border-left: 0;
        border-bottom: 1px solid #d6b4b5;
    }
    .character-seat-name,
    .character-seat-name.is-mid { font-size: 20px; padding: 2px 5px; }
    .character-seat-name.is-long { font-size: 18px; }
    .character-seat-label { font-size: 10px; }
    .character-tabs { padding: 10px 12px 0; gap: 5px; }
    .character-tab { font-size: 11px; padding: 9px 3px; }
    .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; gap: 10px 14px; }
    .character-grid[data-group="original"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .character-card { aspect-ratio: 1.05; }
    .character-card-name { font-size: 15px; }
    .character-select-footer { padding: 10px 12px; gap: 8px; }
    .character-select-footer .character-ability { height: 58px; }
    .character-select-actions { width: 100%; }
    .character-select-actions .game-btn { flex: none; }
}
@media (max-height: 560px) and (min-width: 761px) {
    #character-select { padding: 8px; }
    .character-select-panel { height: calc(100dvh - 16px); }
    .character-select-header { padding: 10px 20px; }
    .character-select-header h1 { font-size: 28px; }
    .character-seat-image { top: calc(50% - 12px); }
    .character-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
    .character-seat-name,
    .character-seat-name.is-mid,
    .character-seat-name.is-long { font-size: 15px; padding: 3px; }
    .character-tabs { padding-top: 10px; }
    .character-select-footer { padding: 8px 16px; }
    .character-select-footer .character-ability { height: 48px; }
}

/* 対戦の卓。チャコールグレーと金のプレイ面を広げ、席ごとのリーチ背景を見せる。 */
#app {
    background: var(--royal-charcoal);
    --tile-bg: linear-gradient(145deg, #fff 0 72%, #fff7e6 73% 96%, #d4b375 97%);
    --tile-border: #b59a76;
    --tile-shadow: 0 3px 0 #987a54, 0 5px 3px #482c3426, inset 0 0 0 1px #fff;
}
#game-table {
    isolation: isolate;
    border: 2px solid var(--arcade-ink);
    background:
        radial-gradient(ellipse at center, #eed39508, transparent 68%),
        var(--select-diamond) center / 96px 120px,
        var(--select-spark) center / 96px 96px,
        linear-gradient(125deg, var(--royal-charcoal), #202522);
    box-shadow: inset 0 0 0 4px var(--arcade-gold), inset 0 0 0 7px var(--royal-charcoal);
}
#game-table::before,
#game-table::after {
    content: none;
    display: none;
}

/* 光玉は対戦の卓にも（キャラ選択と同じ粒・2026-09-08）。
   奥の層（--under）は負の z で、牌・河・情報プレートのさらに下を漂う。
   手前の層は --inner の薄さで最後に重ね、能力演出やダイアログ（z-index 1 以上）は越えない。 */
.character-ambient--under { z-index: -1; }
/* チャコールグレーに浮かぶ金の光玉。牌より後ろで、既存の動きを保つ。 */
#game-table .character-mote {
    background: radial-gradient(circle, #fffdf2f5 0 8%, #ffedbcc4 20%, #f0c67e5e 42%, #efd39514 62%, transparent 72%);
}
#game-table .character-mote::after {
    background: #fff6dc;
    box-shadow: 0 0 9px 3px #e5b96e9e;
}

/* 局情報は白いプレートに直接表示。ドラは色柄を重ねず明瞭に。 */
#center-panel {
    position: relative;
    padding: 12px 16px;
    border: 2px solid var(--arcade-ink);
    border-top: 4px solid var(--arcade-gold);
    border-bottom: 4px solid var(--arcade-gold);
    border-radius: 0;
    background: #fffaf2;
    box-shadow: 3px 4px 0 #962d4930, inset 0 0 0 3px #fff;
    backdrop-filter: none;
}
#round-info {
    margin: 0 0 9px;
    padding: 5px 12px;
    color: var(--arcade-ink);
    background: none;
    border-bottom: 2px solid var(--arcade-gold);
    transform: none;
    text-shadow: none;
}
#remaining-count { color: #63414a; font-weight: 700; font-variant-numeric: tabular-nums; }
#dora-label { color: #75565a; font-weight: 700; }
#dora-section { padding-top: 8px; border-top: 1px solid #dfc5b7; }

/* 2桁本場・ドラ5枚・能力確認の有無で中央の枠と河を動かさない。 */
#center-panel,
#center-panel.is-ability-confirm {
    box-sizing: border-box;
    width: 240px;
    min-width: 240px;
    height: 200px;
    flex: 0 0 240px;
    padding: 10px 16px;
    display: grid;
    grid-template-rows: 32px 38px 24px 1fr;
}
#center-panel #ability-confirm {
    grid-row: 1;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}
#center-panel #ability-confirm-count { font-size: 26px; }
#center-panel #round-info {
    grid-row: 2;
    margin: 0;
    padding: 4px 0;
    white-space: nowrap;
}
#center-panel #remaining-count { grid-row: 3; margin: 0; }
#center-panel #dora-section {
    grid-row: 4;
    flex-direction: column;
    gap: 3px;
    padding-top: 3px;
}
#center-panel #dora-display { min-height: 42px; }

/* 顔・名前・点数を同じ角度の札でまとめる。色は各キャラの意味を引き継ぐ。 */
.player-face-frame {
    border-width: 2px;
    background: #f3e1df;
    box-shadow: 0 0 0 2px #fffaf2, 3px 4px 0 #482c3438;
}
.player-face:not(.chara-sealed) { opacity: 0.86; }
.player-face.current-player:not(.chara-sealed) { opacity: 1; }
.player-avatar.current-player .player-face-frame {
    box-shadow: 0 0 0 2px #fffaf2, 0 0 0 5px var(--arcade-gold), 3px 5px 0 #702139;
}
.player-name,
.player-name.current-player {
    justify-self: stretch;
    padding: 3px 7px;
    color: color-mix(in srgb, var(--chara-color, #962d49) 55%, #482c34);
    background: color-mix(in srgb, var(--chara-color, #962d49) 16%, #fffaf2);
    border: 1px solid var(--chara-color, #c9a45c);
    border-left-width: 4px;
    border-radius: 0;
    -webkit-text-stroke: 0;
    text-shadow: none;
    box-shadow: 2px 2px 0 #482c3420;
}
.player-name.is-mid,
.player-name.is-long { -webkit-text-stroke: 0; }
.player-score {
    justify-self: stretch;
    padding: 3px 7px;
    border: 1px solid #d6b4b5;
    border-left: 4px solid var(--chara-color, #c9a45c);
    border-radius: 0;
    background: #fffaf2;
    color: var(--arcade-ink);
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 0;
    text-shadow: none;
    box-shadow: 2px 2px 0 #482c3420;
}
.player-wind {
    right: -5px;
    bottom: -3px;
    padding: 3px 5px;
    font-size: 26px;
    color: #fff;
    background: var(--arcade-burgundy);
    border: 1px solid #fffaf2;
    border-bottom: 2px solid var(--arcade-gold);
    transform: skewX(var(--slant));
    -webkit-text-stroke: 0;
    text-shadow: 1px 1px 0 #702139;
}
.player-wind.is-dealer { color: #482c34; background: #eed395; text-shadow: none; }
.player-shanten { border-radius: 0; transform: skewX(var(--slant)); }

/* ゲージ専用の段を顔枠の上に確保する。空なら従来の顔＋名前の高さに戻る。 */
.player-info:has(> .ability-gauge:not(:empty)) {
    height: auto;
    grid-template-rows: auto repeat(2, 48px);
}
.player-info:has(> .ability-gauge:not(:empty)) > .player-avatar { grid-row: 2 / 4; }
.player-info:has(> .ability-gauge:not(:empty)) > .player-name { grid-row: 2; }
.player-info:has(> .ability-gauge:not(:empty)) > .player-score,
.player-info:has(> .ability-gauge:not(:empty)) > .player-shanten { grid-row: 3; }

#player-north .player-info:has(> .ability-gauge:not(:empty)) { align-self: flex-start; top: 7px; }
#player-south .player-info:has(> .ability-gauge:not(:empty)) { align-self: flex-end; bottom: 7px; }

/* 「すき」は自席情報の一段目。待ちの吹き出しはその上、能力ゲージは二段目に積む。 */
#player-south .player-info:has(> #yupi-suki:not([hidden])) {
    height: auto;
    align-self: flex-end;
    bottom: 7px;
    grid-template-rows: auto auto repeat(2, var(--suki-info-row, 48px));
}
#player-south #yupi-suki { grid-column: 1 / -1; grid-row: 1; }
#player-south .player-info:has(> #yupi-suki:not([hidden])) > .ability-gauge { grid-row: 2; }
#player-south .player-info:has(> #yupi-suki:not([hidden])) > .player-avatar { grid-row: 3 / 5; }
#player-south .player-info:has(> #yupi-suki:not([hidden])) > .player-name { grid-row: 3; }
#player-south .player-info:has(> #yupi-suki:not([hidden])) > .player-score,
#player-south .player-info:has(> #yupi-suki:not([hidden])) > .player-shanten { grid-row: 4; }

@media (max-width: 700px) {
    #player-south .player-info:has(> #yupi-suki:not([hidden])),
    #player-south .player-info:has(#wait-bubble:not([hidden])),
    #player-south .player-info:has(#ability-gauge-south .is-meteor) {
        position: absolute;
        left: 6px;
        bottom: calc(100% + var(--hand-info-buttons-height, 0px) + 12px);
        /* layout.js が手牌と一緒に付けるインラインの移動から、この札のある欄を外す。 */
        transform: none !important;
    }

    /* メオのロック/checkは立ち絵と同じ定位置。鳴きボタンの高さや待ちの有無で動かさない。 */
    #player-south .player-info:has(> #meow-controls:not([hidden])) {
        position: absolute;
        left: 6px;
        bottom: calc(100% + 12px);
        transform: none !important;
    }
}

/* 印の色は能力固有の色。名前・点数・顔を避けた独立したリボン。 */
.ability-gauge.is-corner {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 8px 3px 10px;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
}

.ability-gauge-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border: 1px solid color-mix(in srgb, var(--gauge-color) 50%, #735563);
    border-left: 3px solid var(--gauge-color);
    border-radius: 3px;
    background: linear-gradient(135deg, #fff 15%, color-mix(in srgb, var(--gauge-color) 13%, #fffaf4));
    box-shadow: 0 0 0 1px #fff, 2px 3px 0 #482c342b;
    transform: skewX(var(--slant, -8deg));
    pointer-events: auto;
}

/* リトルミミ「まねっこ」：いま真似ている子の顔（能力仕様/済_little_mimi_リトルミミ.md §3-3）。
   ゲージの印と同じ高さにそろえて、能力ゲージの並びの先頭に立つ。 */
.ability-gauge-chip.is-mimicry { padding: 3px 4px; }
.ability-gauge-mimicry-face {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: cover;
    object-position: 50% 22%;
    border: 1px solid color-mix(in srgb, var(--gauge-color) 40%, #e0d4d6);
    border-radius: 3px;
    background: color-mix(in srgb, var(--gauge-color) 14%, white);
    transform: skewX(calc(var(--slant, -8deg) * -1));
}

.ability-gauge-marks { display: flex; flex-direction: column; gap: 2px; }
.ability-gauge-row { gap: 2px; }

.ability-gauge .ability-gauge-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--gauge-cell);
    height: var(--gauge-cell);
    border: 1px solid color-mix(in srgb, var(--gauge-color) 30%, #e0d4d6);
    border-radius: 3px;
    background: color-mix(in srgb, var(--gauge-color) 14%, white);
    font-family: 'KeinannMaruPOPjp', sans-serif;
    font-size: calc(var(--gauge-cell) - 3px);
    line-height: 1;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 1px #482c3499;
    filter: none;
    transform: skewX(var(--unslant, 8deg));
}

.ability-gauge .ability-gauge-mark svg {
    width: 90%;
    height: 90%;
    filter: drop-shadow(0 1px 0 #482c3470);
}

.ability-gauge .ability-gauge-mark.is-spent {
    color: #b9adb4;
    background: #f4eef0;
    border-color: #d6cbd0;
    border-style: dashed;
    text-shadow: none;
}
.ability-gauge .ability-gauge-mark.is-spent svg { opacity: 0.45; filter: none; }

/* 札束は1個でも形が読めるよう、通常の小さなゲージ印より少し大きくする。 */
.ability-gauge .ability-gauge-mark.is-money {
    width: 24px;
    height: 24px;
}
.ability-gauge .ability-gauge-mark.is-active { animation: none; }

.ability-gauge-count {
    display: flex;
    align-items: baseline;
    gap: 1px;
    min-width: 24px;
    justify-content: center;
    padding-left: 4px;
    border-left: 1px solid #d8c7cd;
    color: #563747;
    font-family: 'KeinannMaruPOPjp', sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transform: skewX(var(--unslant, 8deg));
}
.ability-gauge-count strong { font-size: 15px; font-weight: 400; }
.ability-gauge-count small { font-size: 9px; color: #806875; }
.ability-gauge-chip.is-empty .ability-gauge-count { color: #95818c; }

/* さにーのひだまり（能力仕様/済_sunny_さにー.md §6）。上限が無いので「/max」ではなく「×12」。
   数が主役なので、ひとまわり大きく出す */
.ability-gauge-count.is-times small { font-size: 12px; color: #806875; }
.ability-gauge-chip.is-count .ability-gauge-count strong { font-size: 18px; }
/* 0点のときも「いま0」と読めるように、空でも沈めきらない */
.ability-gauge-chip.is-count.is-empty .ability-gauge-count { color: #7a6270; }

.ability-gauge-chip.is-symbol { padding: 3px 6px; }
.ability-gauge-chip.is-symbol .ability-gauge-mark { width: 23px; height: 23px; font-size: 19px; }

/* 雨粒は5個×3段。数字だけを右上のタブにして、下の名前に面をかぶせない。 */
.ability-gauge-chip.is-multirow {
    align-items: flex-start;
    gap: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.ability-gauge-chip.is-multirow .ability-gauge-marks {
    padding: 4px 5px;
    border: 1px solid color-mix(in srgb, var(--gauge-color) 50%, #735563);
    border-left: 3px solid var(--gauge-color);
    border-radius: 3px 0 3px 3px;
    background: color-mix(in srgb, var(--gauge-color) 10%, white);
    box-shadow: 0 0 0 1px #fff, 2px 3px 0 #482c342b;
}
.ability-gauge-chip.is-multirow .ability-gauge-count {
    padding: 5px 4px;
    border: 1px solid color-mix(in srgb, var(--gauge-color) 50%, #735563);
    border-left: 0;
    border-radius: 0 3px 3px 0;
    background: #fffaf4;
    box-shadow: 1px 0 0 1px #fff, 2px 3px 0 #482c342b;
}

/* 発動中だけ縁を光らせる。残量ゼロや待機を「使用可能」と誤表示しない。 */
.ability-gauge-chip.is-active {
    border-color: var(--gauge-color);
    outline: 1px solid var(--gauge-color);
    animation: abilityRibbonGlow 1.8s ease-in-out infinite;
}
.ability-gauge-chip.is-active::after {
    content: '✦';
    position: absolute;
    top: -8px;
    right: -5px;
    color: var(--gauge-color);
    font-size: 13px;
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
}
@keyframes abilityRibbonGlow {
    0%, 100% { box-shadow: 0 0 0 1px #fff, 2px 3px 0 #482c342b; }
    50% { box-shadow: 0 0 0 1px #fff, 0 0 9px var(--gauge-color); }
}
@media (prefers-reduced-motion: reduce) {
    .ability-gauge-chip.is-active { animation: none; }
}

/* 牌は配置・回転・当たり判定を保ち、表面と側面に厚みを持たせる。 */
.tile { border-radius: 2px; }
.back-tile {
    border-color: #42576c;
    box-shadow: 0 0 0 1px #f3f7fc, 0 3px 0 #42576c, 0 5px 3px #25394d38, inset 0 0 0 1px #f3f7fc;
}
.back-tile::after { border-color: #637d94; border-radius: 0; }
.tile-label.tile-art { padding: 2px 2px 4px; }

/* 対局ログは選択画面の説明欄と同じ、静かなアイボリーの面に。 */
#side-panel {
    border-left: 2px solid var(--arcade-ink);
    background: var(--select-spark) center / 88px 88px, #fffaf2;
    box-shadow: inset 3px 0 0 #fff;
}
#side-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 16px;
    background: none;
    border: 0;
    border-bottom: 3px solid var(--arcade-gold);
}
#side-header h2 { color: var(--arcade-ink); text-shadow: none; }
#side-header .game-btn { padding: 7px 12px; font-size: 11px; }
#log-panel { padding: 14px 12px; scrollbar-color: var(--arcade-burgundy) #f3e1df; }
#log-chara-info { padding: 14px 12px; background: #fffaf2; scrollbar-color: var(--arcade-burgundy) #f3e1df; }
.log-entry { margin-bottom: 3px; padding: 7px 8px; color: #63414a; border-bottom: 1px solid #e4cec2; }
.log-entry:nth-child(even) { background: #f3e1df80; }
.log-entry:last-child { border-left: 3px solid var(--arcade-burgundy); background: #f3e1df; color: #482c34; }

.game-btn {
    border-radius: 0;
    border: 2px solid var(--arcade-ink);
    transform: skewX(var(--slant));
    box-shadow: 3px 3px 0 var(--arcade-ink);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.game-btn:hover { transform: skewX(var(--slant)) translateY(-2px); box-shadow: 4px 5px 0 var(--arcade-ink); }
.game-btn:active { transform: skewX(var(--slant)) translate(2px, 2px); box-shadow: 1px 1px 0 var(--arcade-ink); }
.game-btn:disabled { cursor: not-allowed; box-shadow: none; }
.game-btn:focus-visible, .character-seat:focus-visible, .character-tab:focus-visible { outline: 3px solid var(--arcade-yellow); outline-offset: 4px; }
.btn-secondary { background: #fff; color: #663947; }
.btn-secondary:hover { background: #f6e6d3; border-color: var(--arcade-ink); }
.btn-riichi, .btn-call { background: #f6e7c8; color: #702139; }
.btn-riichi:hover, .btn-call:hover { background: #edd19c; border-color: var(--arcade-ink); }
.btn-ron, #tsumo-btn { background: linear-gradient(110deg, #982840, #c84660); color: white; }
.btn-ron:hover, #tsumo-btn:hover { background: #7c2039; }
#action-buttons .game-btn { animation-name: arcadeActionPulse; }

@keyframes arcadeActionPulse {
    0%, 100% { box-shadow: 3px 3px 0 var(--arcade-ink); }
    50% { box-shadow: 3px 3px 0 var(--arcade-ink), 0 0 0 3px #eed39560; }
}

.call-select-panel,
.ability-target-panel,
#message-overlay.is-window {
    border: 2px solid var(--arcade-ink);
    border-top: 5px solid var(--arcade-gold);
    border-radius: 0;
    background: var(--select-spark) center / 88px 88px, #fffaf2;
    box-shadow: 5px 6px 0 #962d4950;
}

.call-select-button, .ability-target-button { border-radius: 0; border-color: #c3a270; background: #fcf0dc; }
.ability-target-button img { border-radius: 0; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
#message-overlay:not(.is-window) {
    background: var(--select-spark) center / 88px 88px, #fffaf2f5;
    border-block: 6px solid var(--arcade-burgundy);
    box-shadow: inset 0 3px 0 var(--arcade-gold), inset 0 -3px 0 var(--arcade-gold);
}
#message-text { color: var(--arcade-red); -webkit-text-stroke: 3px white; paint-order: stroke fill; text-shadow: 3px 4px 0 #482c3440; }
.score-flow-seat { border-radius: 0; border-color: #c7aa8b; box-shadow: 3px 3px 0 #482c3420; }

/* 料理のシルエットはそのまま、選択台を共通の深緑の面に。 */
#kaho-tray {
    border-radius: 0;
    border: 2px solid var(--arcade-ink);
    border-top: 5px solid var(--arcade-gold);
    background: radial-gradient(circle, #ffffff18 1px, transparent 1.5px) 0 0 / 8px 8px, var(--royal-green-deep);
    box-shadow: 5px 6px 0 #482c3450;
}
.kaho-dish, .kaho-dish-desc { color: #fff; }

/* るなねる「継ぐ」の選び場も、お盆と同じ深緑の面にそろえる。 */
#lunanel-tsugu {
    border-radius: 0;
    border: 2px solid var(--arcade-ink);
    border-top: 5px solid var(--arcade-gold);
    background: radial-gradient(circle, #ffffff18 1px, transparent 1.5px) 0 0 / 8px 8px, var(--royal-green-deep);
    box-shadow: 5px 6px 0 #482c3450;
}
.lunanel-tsugu-head { color: #fff; }
.lunanel-tsugu-cross { text-shadow: 0 1px 2px rgba(20, 40, 28, 0.9); }

/* メオ「Love scramble」の選び場も、同じ深緑の面にそろえる。 */
#meow-scramble {
    border-radius: 0;
    border: 2px solid var(--arcade-ink);
    border-top: 5px solid var(--arcade-gold);
    background: radial-gradient(circle, #ffffff18 1px, transparent 1.5px) 0 0 / 8px 8px, var(--royal-green-deep);
    box-shadow: 5px 6px 0 #482c3450;
}
.meow-scramble-head { color: #fff; }

/* 低い画面でも左右の14枚と顔が収まる寸法。牌を重ねずに縮める。 */
@media (max-height: 880px) {
    #player-north, #player-east, #player-west {
        --tile-width: clamp(22px, calc((100vh - 280px) / 14), 36px);
        --tile-height: calc(var(--tile-width) * 1.4);
    }
    #player-east, #player-west { padding: 12px 6px; }
    /* 下家の顔を自分の手牌より上に置くため、下側に1席ぶんを空ける。 */
    #player-east { padding-bottom: 160px; }
    .player-info {
        --suki-info-row: 36px;
        width: 206px;
        min-width: 206px;
        height: 72px;
        grid-template-columns: 72px minmax(0, 126px);
    }
    .player-face-frame { width: 72px; }
    .player-info:has(> .ability-gauge:not(:empty)) {
        grid-template-rows: auto repeat(2, 36px);
    }
    .player-name { font-size: 22px; }
    .player-name.is-mid { font-size: 20px; }
    .player-name.is-long { font-size: 16px; }
    .player-score { font-size: 14px; }
}

/* 敵3席を一段小さい牌で配置する。上段は左UI→手牌→上UI→右手牌の順。 */
#game-table {
    container-type: inline-size;
    --enemy-info-width: 254px;
    --enemy-info-height: 158px;
    --enemy-tile-step: 36px;
}
#player-north, #player-east, #player-west {
    /* 右端の縦手牌1枚ぶんも上段に残す。自分の牌と河の寸法には触れない。 */
    --tile-width: min(var(--enemy-tile-step), calc((100cqw - 2 * var(--enemy-info-width) - 110px) / 15.4));
    --tile-height: calc(var(--tile-width) * 1.4);
    --tile-small-width: 22px;
    --tile-small-height: 30px;
    --enemy-hand-height: calc(14 * var(--tile-width) + 62px);
}
#player-north {
    justify-content: flex-start;
    gap: 12px;
    padding-left: calc(var(--enemy-info-width) + 18px);
}
#player-north .player-info {
    position: static;
    flex: none;
}
#player-north .hand-block { justify-content: flex-start; }

/* 左のキャラUIを上に置き、その下から手牌を並べる。 */
#player-east, #player-west {
    position: relative;
    width: calc(var(--enemy-info-width) + 12px);
    padding: 0;
}
#player-west .hand-block,
#player-east .hand-block {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    transform: none;
}
#player-west .hand-block {
    top: calc(var(--enemy-info-height) + 20px);
    left: 6px;
}
#player-east .hand-block {
    top: 8px;
    right: 6px;
}
#player-west .player-info {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    top: 8px;
    left: 6px;
}
/* 右の牌を上に寄せ、空いた下側へキャラUIを右詰めで収める。 */
#player-east .player-info {
    position: absolute;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    top: calc(8px + var(--enemy-hand-height) + 12px);
    bottom: auto;
    right: 6px;
}
@media (max-height: 880px) {
    #game-table {
        --enemy-info-width: 206px;
        --enemy-info-height: 134px;
        --enemy-tile-step: calc(clamp(22px, (100vh - 280px) / 14, 36px) * 0.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-btn, .character-card, .character-seat { transition: none; }
    #action-buttons .game-btn { animation: none; }
}

/* 卓幅に応じて手牌を調整し、中央揃えでも自分のキャラ欄を画面内に残す。 */
#player-south {
    /* 狭い卓でも14枚と余白を収め、端の茨牌・方向矢印を切らない。 */
    --tile-width: min(clamp(26px, calc((100cqw - 2 * var(--enemy-info-width) - 80px) / 14), 75px), calc((100cqw - 64px) / 14));
    --tile-height: calc(var(--tile-width) * 1.4);
}
@media (max-width: 1100px) {
    #app { grid-template-columns: minmax(0, 1fr); }
    /* ログを畳む幅でも、キャラ選択へ戻る操作は残す。 */
    #side-panel {
        display: block;
        position: fixed;
        right: 12px;
        bottom: 12px;
        z-index: 10;
        border: 0;
        background: none;
        box-shadow: none;
    }
    #side-header { padding: 0; border: 0; background: none; }
    #side-header h2, #log-panel, #log-chara-info { display: none; }
}
/* 鳴き牌は各席の手牌と同寸。横倒し・加槓の寸法も同じ変数に追従させる。 */
#game-table .melds-container {
    --tile-width: inherit;
    --tile-height: inherit;
    --tile-small-width: var(--tile-width);
    --tile-small-height: var(--tile-height);
}
.player-area .meld-tile .tile-label { font-size: 14px; }

/* 加槓の4枚目は、席の向きに合わせて元の横倒し牌の上へ積む。 */
.melds-side-top .meld-kakan-stack { flex-direction: row-reverse; }
.melds-side-left .meld-kakan-stack { flex-direction: column; }
.melds-side-bottom .meld-kakan-stack { flex-direction: row; }

/* 和了・流局の結果は卓が見える窓。長い結果は窓の中でスクロールする。 */
#message-overlay.is-window { justify-content: flex-start; }
#message-overlay.is-window > * { flex-shrink: 0; }
#message-overlay.is-window #win-hand-display:not(:empty) {
    /* min(960px, 94vw) は style.css の .is-window の幅。変えるときは両方揃える */
    --tile-width: clamp(18px, calc((min(960px, 94vw) - 110px) / 16), 46px);
    --tile-height: calc(var(--tile-width) * 1.4);
    --tile-small-width: var(--tile-width);
    --tile-small-height: var(--tile-height);
    box-sizing: border-box;
    width: 100%;
    padding: 10px 8px;
    border: 2px solid var(--arcade-gold);
    background: #fffaf2;
    overflow-x: auto;
    justify-content: flex-start;
}

/* 和了専用。通常の約2倍の平行四辺形に、既存のキャラ絵と炎動画を載せる。 */
.cutin-stage.is-win {
    --cutin-w: min(840px, 88vw, calc(84vh * 16 / 9));
    --cutin-h: calc(var(--cutin-w) * 9 / 16);
    inset: calc(50% - var(--cutin-h) / 2) auto auto calc(50% - var(--cutin-w) / 2);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    background: #25232b;
}
.cutin-stage.is-win.is-playing {
    animation: win-cutin-cross var(--cutin-duration, 2200ms) cubic-bezier(.2, .7, .2, 1) both;
    will-change: transform;
}
.cutin-stage.is-win .cutin-chara {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}
.cutin-stage.is-win .cutin-frame {
    inset: 0;
    width: 100%;
    height: 100%;
}
.cutin-stage.is-win::before,
.cutin-stage.is-win::after {
    height: clamp(6px, 1vh, 12px);
    background: linear-gradient(90deg, #b2863d, #fff2c7 35%, #dcbf78 70%, #fff2c7);
}
.cutin-stage.is-win .cutin-name,
.cutin-stage.is-win .cutin-label {
    width: 76%;
    letter-spacing: .04em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    -webkit-text-stroke: 2px #482c34;
    paint-order: stroke fill;
    text-shadow: 0 3px 2px #251920, 0 0 16px #251920;
}
.cutin-stage.is-win .cutin-name {
    top: 9%;
    font-size: clamp(18px, 3vw, 36px);
}
.cutin-stage.is-win .cutin-label {
    bottom: 9%;
    font-size: clamp(26px, 4.5vw, 52px);
}
@keyframes win-cutin-cross {
    0% { opacity: 1; transform: translate3d(calc(50vw + 60%), 0, 0); }
    20% { opacity: 1; transform: translate3d(0, 0, 0); }
    72% { opacity: 1; transform: translate3d(0, 0, 0); }
    100% { opacity: 1; transform: translate3d(calc(-50vw - 60%), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cutin-stage.is-win.is-playing { animation-name: win-cutin-fade; will-change: opacity; }
    .cutin-stage.is-win .cutin-frame { display: none; }
}
@keyframes win-cutin-fade {
    0%, 100% { opacity: 0; }
    12%, 82% { opacity: 1; }
}

/* 追加の和了牌エフェクト。元の焦げ・きらめきに重ね、各辺を2倍にする。 */
#win-fx::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--fx-size) * 2);
    height: calc(var(--fx-size) * 2);
    transform: translate(-50%, -50%);
    pointer-events: none;
    background-repeat: no-repeat;
}
#win-fx.win-fx-scorch::after {
    background-image: url('../img/effect/fx-ron-fire.png');
    background-size: 500% 500%;
    animation: win-ron-fire .833333s steps(1, end) both;
}
#win-fx.win-fx-twinkle::after {
    background-image: url('../img/effect/fx-tsumo-light.png');
    background-size: 500% 300%;
    animation: win-tsumo-light .5s steps(1, end) both;
}
@keyframes win-ron-fire {
    0.000000% { background-position: 0% 0%; opacity: 1; }
    4.000000% { background-position: 25% 0%; opacity: 1; }
    8.000000% { background-position: 50% 0%; opacity: 1; }
    12.000000% { background-position: 75% 0%; opacity: 1; }
    16.000000% { background-position: 100% 0%; opacity: 1; }
    20.000000% { background-position: 0% 25%; opacity: 1; }
    24.000000% { background-position: 25% 25%; opacity: 1; }
    28.000000% { background-position: 50% 25%; opacity: 1; }
    32.000000% { background-position: 75% 25%; opacity: 1; }
    36.000000% { background-position: 100% 25%; opacity: 1; }
    40.000000% { background-position: 0% 50%; opacity: 1; }
    44.000000% { background-position: 25% 50%; opacity: 1; }
    48.000000% { background-position: 50% 50%; opacity: 1; }
    52.000000% { background-position: 75% 50%; opacity: 1; }
    56.000000% { background-position: 100% 50%; opacity: 1; }
    60.000000% { background-position: 0% 75%; opacity: 1; }
    64.000000% { background-position: 25% 75%; opacity: 1; }
    68.000000% { background-position: 50% 75%; opacity: 1; }
    72.000000% { background-position: 75% 75%; opacity: 1; }
    76.000000% { background-position: 100% 75%; opacity: 1; }
    80.000000% { background-position: 0% 100%; opacity: 1; }
    84.000000% { background-position: 25% 100%; opacity: 1; }
    88.000000% { background-position: 50% 100%; opacity: 1; }
    92.000000% { background-position: 75% 100%; opacity: 1; }
    96.000000% { background-position: 100% 100%; opacity: 1; }
    100% { opacity: 0; }
}
@keyframes win-tsumo-light {
    0.000000% { background-position: 0% 0%; opacity: 1; }
    6.666667% { background-position: 25% 0%; opacity: 1; }
    13.333333% { background-position: 50% 0%; opacity: 1; }
    20.000000% { background-position: 75% 0%; opacity: 1; }
    26.666667% { background-position: 100% 0%; opacity: 1; }
    33.333333% { background-position: 0% 50%; opacity: 1; }
    40.000000% { background-position: 25% 50%; opacity: 1; }
    46.666667% { background-position: 50% 50%; opacity: 1; }
    53.333333% { background-position: 75% 50%; opacity: 1; }
    60.000000% { background-position: 100% 50%; opacity: 1; }
    66.666667% { background-position: 0% 100%; opacity: 1; }
    73.333333% { background-position: 25% 100%; opacity: 1; }
    80.000000% { background-position: 50% 100%; opacity: 1; }
    86.666667% { background-position: 75% 100%; opacity: 1; }
    93.333333% { background-position: 100% 100%; opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #win-fx::after { display: none; }
}

/* 能力で引き寄せた牌に共通の15コマの光。牌の操作や印を遮らない。 */
.ability-tile-glare {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: calc(var(--tile-height) * 1.8);
    height: calc(var(--tile-height) * 1.8);
    transform: translate(-50%, -50%);
    background: url('../img/effect/fx-ability-draw.png') no-repeat;
    background-size: 500% 300%;
    pointer-events: none;
    animation: ability-tile-glare .5s steps(1, end) both;
}
@keyframes ability-tile-glare {
    0.000000% { background-position: 0% 0%; opacity: 1; }
    6.666667% { background-position: 25% 0%; opacity: 1; }
    13.333333% { background-position: 50% 0%; opacity: 1; }
    20.000000% { background-position: 75% 0%; opacity: 1; }
    26.666667% { background-position: 100% 0%; opacity: 1; }
    33.333333% { background-position: 0% 50%; opacity: 1; }
    40.000000% { background-position: 25% 50%; opacity: 1; }
    46.666667% { background-position: 50% 50%; opacity: 1; }
    53.333333% { background-position: 75% 50%; opacity: 1; }
    60.000000% { background-position: 100% 50%; opacity: 1; }
    66.666667% { background-position: 0% 100%; opacity: 1; }
    73.333333% { background-position: 25% 100%; opacity: 1; }
    80.000000% { background-position: 50% 100%; opacity: 1; }
    86.666667% { background-position: 75% 100%; opacity: 1; }
    93.333333% { background-position: 100% 100%; opacity: 1; }
    100% { opacity: 0; }
}
/* 能力にツモを逸らされた牌に共通の15コマの紫の澱み（30FPS_ASDark_03_Chaos・5列×3行）。
   作りは上の光と同じで、コマ送りも同じキーフレームを使い回す。 */
.ability-tile-diverted {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: calc(var(--tile-height) * 1.8);
    height: calc(var(--tile-height) * 1.8);
    transform: translate(-50%, -50%);
    background: url('../img/effect/fx-draw-diverted.png') no-repeat;
    background-size: 500% 300%;
    pointer-events: none;
    animation: ability-tile-glare .5s steps(1, end) both;
}
@media (prefers-reduced-motion: reduce) {
    .ability-tile-glare { display: none; }
    .ability-tile-diverted { display: none; }
}

/* のんの素粒子。u/d/c/s/t/bを太字で大きく、牌の上端に浮かせる。 */
.quark-badge {
    top: 0;
    width: clamp(24px, calc(var(--tile-width) * .6), 32px);
    height: clamp(24px, calc(var(--tile-width) * .6), 32px);
    transform: translate(-50%, -85%);
    font-family: Arial, sans-serif;
    font-size: clamp(17px, calc(var(--tile-width) * .4), 22px);
    font-weight: 800;
    border: 2px solid #fffaf2;
    text-shadow: 0 1px 2px #302331, 1px 0 1px #302331, -1px 0 1px #302331;
    box-shadow: 0 0 0 1px #482c34, 0 2px 4px #30233160;
}
.quark-badge.is-discard {
    top: 1px;
    width: 18px;
    height: 18px;
    font-size: 13px;
    transform: none;
    border-width: 1px;
}
.quark-badge::after {
    font-size: 13px;
    font-weight: 500;
    text-shadow: none;
}

/* 鳴き牌のそばの掛け声。白いフィバ字をキャラの軸色で囲う。 */
#call-announcements {
    position: fixed;
    inset: 0;
    z-index: 160;
    overflow: hidden;
    pointer-events: none;
}
.call-announcement {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #fff;
    font-family: 'Fibaji', sans-serif;
    font-size: clamp(64px, 6.4vw, 96px);
    font-weight: 400;
    line-height: 1.05;
    white-space: nowrap;
    -webkit-text-stroke: 5px var(--call-color);
    paint-order: stroke fill;
    filter: drop-shadow(0 2px 1px #30233199);
    pointer-events: none;
    animation: call-announcement-fade var(--call-duration) ease-out both;
}
.call-announcement-word { display: flex; }
.call-announcement-slash {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: .72em;
    line-height: 1;
}
.call-announcement.is-vertical,
.call-announcement.is-vertical .call-announcement-word { flex-direction: column; }
.call-announcement.is-vertical .call-announcement-long-vowel { transform: rotate(90deg); }
@keyframes call-announcement-fade {
    0% { opacity: 0; }
    12%, 72% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .call-announcement { animation: none; }
}

/* 鳴ける牌の案内「これだよ」。提示のあいだ、河のその牌を席の外側から矢印で指す。
   掛け声と同じ白いフィバ字＋軸色の縁だが、ひとまわり小さい。矢印だけ牌へ向かってゆれる。 */
#call-target-hints {
    position: fixed;
    inset: 0;
    z-index: 160;
    overflow: hidden;
    pointer-events: none;
}
.call-target-hint {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #fff;
    font-family: 'Fibaji', 'KeinannMaruPOPjp', sans-serif;
    font-size: clamp(22px, 2.3vw, 34px);
    font-weight: 400;
    line-height: 1.05;
    white-space: nowrap;
    -webkit-text-stroke: 3px var(--call-color);
    paint-order: stroke fill;
    filter: drop-shadow(0 2px 1px #30233199);
    pointer-events: none;
    animation: call-target-hint-in .25s ease-out both;
}
.call-target-hint-word { display: flex; }
.call-target-hint.is-vertical { flex-direction: row; }
.call-target-hint.is-vertical .call-target-hint-word { flex-direction: column; }
.call-target-hint-arrow {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.1em;
    line-height: 1;
    animation: call-target-hint-nudge-y .7s ease-in-out infinite alternate;
}
.call-target-hint.is-vertical .call-target-hint-arrow { animation-name: call-target-hint-nudge-x; }
@keyframes call-target-hint-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes call-target-hint-nudge-y {
    from { transform: translateY(-3px); }
    to { transform: translateY(3px); }
}
@keyframes call-target-hint-nudge-x {
    from { transform: translateX(-3px); }
    to { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .call-target-hint, .call-target-hint-arrow { animation: none; }
}

/* リザルトを一時的に隠し、卓の確認後に同じ表示へ戻す。 */
#result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
#result-actions[hidden], #hide-result-btn[hidden] { display: none; }
#message-overlay.is-peeking { visibility: hidden; pointer-events: none; }

/* 枠と牌の場所を先に確保してから、役・点数の順に表示する。 */
#message-overlay.is-win-result #message-text { animation: none; }
#message-overlay.is-win-result-revealing #message-text,
#message-overlay.is-win-result-revealing .win-dora-label,
#message-overlay.is-win-result-revealing .win-dora-arrow,
#message-overlay.is-win-result-revealing .yaku-total,
#message-overlay.is-win-result-revealing #score-flow > * {
    opacity: 0;
}
#message-overlay.is-win-result-revealing #result-actions { visibility: hidden; }
#message-overlay.is-win-result-revealing #win-yaku-display { overflow: hidden; }
#message-overlay.is-win-result-revealing .yaku-row {
    opacity: 0;
    transform: translateX(100px);
    transition: none;
}
#message-overlay.is-win-result-revealing .yaku-row.is-revealed {
    transition: transform 140ms ease-out, opacity 100ms ease-out;
    opacity: 1;
    transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
    #message-overlay.is-win-result-revealing .yaku-row,
    #message-overlay.is-win-result-revealing .yaku-row.is-revealed { transform: none; transition: none; }
}

/* 満貫以上の名前を大きな見出しにし、最後の点数表示で一緒に出す。 */
#win-yaku-display:has(.yaku-total.has-limit) { width: max-content; }
.yaku-total.has-limit {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    white-space: nowrap;
}
.yaku-total.has-limit > span { flex-shrink: 0; }
.result-limit-name {
    font-family: 'KeinannMaruPOPjp', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    font-size: clamp(36px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1.2;
    -webkit-text-stroke: 2px #fffaf2;
    paint-order: stroke fill;
    text-shadow: 0 2px 1px #30233135;
}
.result-limit-name[data-tier="mangan"] { color: #2477e5; }
.result-limit-name[data-tier="haneman"] { color: #219a57; }
.result-limit-name[data-tier="baiman"] { color: #ef8b19; }
.result-limit-name[data-tier="sanbaiman"] { color: #9552d8; }
.result-limit-name[data-tier="yakuman"] {
    color: #f3c64e;
    -webkit-text-stroke: 3px #171717;
    text-shadow: 0 2px 0 #171717;
}
.result-total-points { font-size: 24px; }

/* 本場込みの点数だと分かるよう、符・翻と点数の下に添える。 */
.yaku-total,
.yaku-total.has-limit {
    flex-wrap: wrap;
    row-gap: 2px;
}
.result-honba {
    flex-basis: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* 5列×2行のチャージを10→1コマで逆再生。文字の幅に合わせて重ねる。 */
.result-limit-name { position: relative; }
.result-limit-fx {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: calc(100% + 48px);
    min-width: 144px;
    max-width: 280px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url('../img/effect/fx-result-charge.png') no-repeat;
    background-size: 500% 200%;
    opacity: 0;
    pointer-events: none;
}
#message-overlay.is-win-result:not(.is-win-result-revealing) .result-limit-fx {
    animation: result-limit-charge-reverse 500ms steps(1, end) both;
}
@keyframes result-limit-charge-reverse {
    0% { background-position: 100% 100%; opacity: 1; }
    10% { background-position: 75% 100%; }
    20% { background-position: 50% 100%; }
    30% { background-position: 25% 100%; }
    40% { background-position: 0% 100%; }
    50% { background-position: 100% 0%; }
    60% { background-position: 75% 0%; }
    70% { background-position: 50% 0%; }
    80% { background-position: 25% 0%; }
    90% { background-position: 0% 0%; }
    100% { background-position: 0% 0%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #message-overlay.is-win-result:not(.is-win-result-revealing) .result-limit-fx { animation: none; }
}

/* かため：河の牌面を残し、岩と×／✓で許可状態を示す。 */
.discard-katame-rock { position: relative; }
.discard-katame-rock[role="button"] { cursor: pointer; }
.discard-katame-rock[role="button"]:focus-visible { outline: 3px solid #44786a; outline-offset: 2px; z-index: 2; }
.katame-rock-badge { position: absolute; top: -5px; right: -3px; width: 17px; height: 16px; color: #95c7b9; pointer-events: none; filter: drop-shadow(0 1px 1px #fff); }
.katame-rock-badge svg { width: 100%; height: 100%; }
.katame-rock-status { position: absolute; inset: 1px 0 0; color: #293e36; font-size: 12px; font-weight: 900; line-height: 15px; text-align: center; }
.discard-katame-rock.is-allowed .katame-rock-badge { color: #edf4ee; }
.katame-cage-badge { position: absolute; left: -3px; top: -4px; padding: 0 2px; border: 1px solid #456357; background: #e6f0de; color: #304d40; font-size: 10px; line-height: 13px; pointer-events: none; }
.katame-cage-hint { display: block; font-size: 12px; line-height: 1.4; font-weight: 600; }
.ability-button.is-armed { outline: 2px solid #548a76; outline-offset: 2px; }
.tile-katame-rock { box-shadow: 0 0 0 2px #7dae98, 0 0 12px #95c7b9; }

#player-south #ability-buttons .ability-button.is-turn-button[data-ability-key="rockcage"] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 18px;
    line-height: 1.2;
    background: var(--semantic-error);
    border: 2px solid #b02525;
    color: #fffaf0;
}
#player-south #ability-buttons .ability-button[data-ability-key="rockcage"] .ability-button-count {
    color: #fffaf0; display: inline; margin: 0; font-size: 13px;
}
#player-south #ability-buttons .katame-cage-hint { order: 2; flex-basis: auto; white-space: nowrap; }
#player-south #ability-buttons .ability-button[data-ability-key="rockcage"] .ability-button-reason { display: none; }
#player-south #ability-buttons:has([data-ability-key="rockcage"]) { translate: 0 12px; }

/* 岩の檻の下見：待ち牌と同じ牌面サイズで、除外する前後2種を表示。 */
.katame-cage-preview { display: flex; flex-direction: column; gap: 6px; color: #36594b; }
.discard-preview-waits + .katame-cage-preview { border-top: 1px solid #a5b9aa; padding-top: 8px; }
.katame-cage-preview-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
.katame-cage-preview-tiles { display: flex; justify-content: center; gap: 14px; }
.katame-cage-preview-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; }
/* みう「常冬」：氷の額縁と舞う結晶。数字は静止し、牌面と操作位置を保つ。 */
.tile.tile-miu-snow {
    border-color: #56bbdf;
    box-shadow: 0 0 0 1px #edfcff, 0 0 0 3px #5bc8e8bd,
        0 0 15px 5px #60d8fa80, var(--tile-shadow);
}

.miu-snow-fx {
    position: absolute;
    inset: -3px;
    z-index: 3;
    border: 1px solid #d9faff;
    border-radius: inherit;
    pointer-events: none;
}

/* 霜は四隅に寄せ、萬子・筒子・索子の中心は透かす。 */
.miu-snow-fx::before,
.miu-snow-fx::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.miu-snow-fx::before {
    background:
        linear-gradient(135deg, #e6fcffff, #91e5f866 28%, transparent 30%) top left / 42% 32% no-repeat,
        linear-gradient(225deg, #f4fcff, #c2e7ff80 28%, transparent 30%) top right / 38% 28% no-repeat,
        linear-gradient(45deg, #c3f4ff, transparent 45%) bottom left / 34% 28% no-repeat,
        linear-gradient(315deg, #e1faff, transparent 45%) bottom right / 42% 34% no-repeat;
    box-shadow: inset 0 0 5px 1px #73d4ed80;
}

.miu-snow-fx::after {
    border: 1px solid #f4fdff;
    box-shadow: 0 0 8px 2px #99ecff, inset 0 0 3px #bdefff;
    opacity: .6;
    animation: miuFrostGleam 4800ms ease-in-out infinite;
    animation-delay: var(--miu-snow-phase, 0ms);
}

.miu-snow-crystal {
    position: absolute;
    top: -14px;
    left: -10px;
    width: clamp(18px, calc(var(--tile-width) * .46), 26px);
    aspect-ratio: 1;
    color: #e9fcff;
    filter: drop-shadow(0 0 1px #12618f) drop-shadow(0 0 3px #42c9ff);
    animation: miuSnowDrift 4800ms ease-in-out infinite;
    animation-delay: calc(var(--miu-snow-phase, 0ms) - var(--snow-index) * 800ms);
    pointer-events: none;
}

.miu-snow-crystal svg {
    display: block;
    width: 100%;
    height: 100%;
    animation: miuSnowTurn 4800ms linear infinite;
    animation-delay: calc(var(--miu-snow-phase, 0ms) - var(--snow-index) * 800ms);
}

.miu-snow-crystal:nth-child(2) {
    top: -18px;
    left: 45%;
    width: 13px;
    color: #b1eaff;
}

.miu-snow-crystal:nth-child(3) {
    top: 12%;
    left: auto;
    right: -8px;
    width: 10px;
    color: #fff;
}

/* 結晶数＝封印される巡数。小さい牌でも数字は縮めすぎない。 */
.miu-snow-marks {
    position: absolute;
    left: 50%;
    top: calc(100% + 3px);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 25px;
    padding: 1px 3px;
    color: #f2fdff;
    background: linear-gradient(145deg, #246287, #143c63);
    border: 1px solid #a9efff;
    border-radius: 6px 2px 6px 2px;
    box-shadow: 0 1px 3px #0b355780, inset 0 1px #ffffff38;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 1px #082a4b;
    transform: translateX(-50%);
    pointer-events: none;
}

.miu-snow-marks svg {
    flex: none;
    width: 12px;
    height: 12px;
    color: #c6f6ff;
}

/* 他家の小さい牌も数を読める幅に。縦並びの札は卓の内側へ逃がす。 */
.back-tile .miu-snow-marks {
    min-width: 0;
    gap: 0;
    padding: 2px 1px;
    font-size: 10px;
}
.back-tile .miu-snow-marks svg { width: 7px; height: 10px; }
.rotated-tile .miu-snow-marks {
    top: 50%;
    left: calc(100% + 5px);
    transform: translateY(-50%);
}
.rotated-tile.rotated-right .miu-snow-marks {
    left: auto;
    right: calc(100% + 5px);
}

/* 細い手牌が並ぶ画面では、個数札を隣の牌へはみ出させない。 */
@media (max-width: 700px) {
    .miu-snow-marks {
        min-width: 0;
        gap: 0;
        padding: 2px 1px;
        font-size: 10px;
    }
    .miu-snow-marks svg { width: 7px; height: 10px; }
}

@keyframes miuFrostGleam {
    0%, 100% { opacity: .45; }
    50% { opacity: .95; }
}

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

/* 六回対称の結晶を60度回すため、ループの継ぎ目でも形が連続する。 */
@keyframes miuSnowTurn {
    to { transform: rotate(60deg); }
}

@media (prefers-reduced-motion: reduce) {
    .miu-snow-fx::after,
    .miu-snow-crystal,
    .miu-snow-crystal svg { animation: none; }
}

.tile.tile-miu-kin {
    background: #203860;
    border-color: #a6cbe7;
    box-shadow: inset 0 0 0 2px #45638c;
}
.tile.tile-miu-kin:not(.back-tile) {
    background: linear-gradient(#eaf3ff 75%, #203860 75%);
}
/* 眷族の紺色・王冠と、常冬の氷枠を同時に読める。 */
.tile.tile-miu-kin.tile-miu-snow {
    border-color: #56bbdf;
    box-shadow: inset 0 0 0 2px #45638c, 0 0 0 1px #edfcff,
        0 0 0 3px #5bc8e8bd, 0 0 15px 5px #60d8fa80, var(--tile-shadow);
}

.miu-kin-mark {
    position: absolute;
    top: 0;
    right: 1px;
    color: #deedff;
    background: #203860;
    border-radius: 2px;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}
.miu-kin-choice { outline: 2px dashed #527ca1; cursor: pointer; }
.miu-kin-choice:hover, .miu-kin-choice:focus-visible { outline: 3px solid #203860; }
/* 冬の姫：ボタンの跡地に出す案内。眷族を決めたら消える（2026-09-14） */
.miu-kin-notice {
    padding: 6px 12px;
    border: 1px solid #80adce;
    border-radius: 8px;
    color: #285779;
    background: #eaf7fff2;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px #fff;
    white-space: nowrap;
    pointer-events: none;
}
.miu-winter-status {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid #a9d3e9;
    border-radius: 6px;
    color: #203860;
    background: #edf8fff5;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    text-shadow: 0 1px #fff;
    pointer-events: none;
}