@charset "UTF-8";
/*
 * arena.css — アリーナモード（ゲーム性のあるダーク UI）の見た目
 *
 * 前提:
 *   - 色・字・余白は css/arena-tokens.css の変数だけを使う（生のカラーコードを増やさない）
 *   - grid.css に html { font-size: 62.5% } があるので 1rem = 10px になる。
 *     アリーナでは font-size に rem を使わず、必ず px かトークン変数で書く。
 *   - 11px / 12px の指定は禁止（本文 16px / ラベル 14px が下限）
 *   - 共通ヘッダ・フッタ・ナビは include をそのまま使うので body.arena 配下で上書きする
 *   - .ad-rotator に :empty 系の CSS は書かない（過去に広告が永久に読み込まれない事故があった）
 *
 * クラス一覧:
 *   .arena-wrap / .arena-panel / .arena-btn / .arena-stat / .arena-bar /
 *   .arena-badge / .arena-gauge / .arena-flash-* / .arena-roulette / .arena-result-card
 */

/* ============================================================
 * 1. ページ地とサイト共通パーツのダーク化
 * ============================================================ */
body.arena {
    background-color: var(--arena-bg);
    color: var(--arena-text);
    font-family: var(--arena-font);
    font-size: var(--arena-fs-body);
    line-height: var(--arena-lh-body);
}

body.arena img {
    max-width: 100%;
    height: auto;
}

/* style.css の「本文カラムは白いカード」を打ち消す */
body.arena main .container > .row > .col.span-8,
body.arena main .container > .row > .col.span-12 {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

body.arena main {
    margin: var(--arena-sp-5) 0 var(--arena-sp-6);
}

/* ---- ヘッダ ---- */
body.arena header {
    background: var(--arena-panel);
    background-image: none;
    border-bottom: 1px solid var(--arena-line);
    box-shadow: none;
}
body.arena .head .site-title a,
body.arena .head h1 a {
    color: var(--arena-gold);
    font-size: var(--arena-fs-h2);
}

/* ---- ナビ ---- */
body.arena nav a,
body.arena .gnav-toggle {
    color: var(--arena-text-muted);
    font-size: var(--arena-fs-label);
}
body.arena nav a:hover,
body.arena .gnav-toggle:hover,
body.arena .gnav-toggle[aria-expanded="true"] {
    background-color: var(--arena-panel-2);
    color: var(--arena-text);
}
body.arena nav li {
    border-bottom-color: var(--arena-line);
}
body.arena .gnav-sub {
    background: var(--arena-panel-2);
    border-color: var(--arena-line);
    box-shadow: var(--arena-shadow);
}
body.arena .gnav-sub a {
    font-size: var(--arena-fs-label);
}

/* ---- パンくず ----
   クラシック側の nav.breadcrumb が淡色背景＋枠線を当てているため、
   背景・枠線・文字色まで明示的に打ち消さないとダーク面から浮く */
body.arena .breadcrumb,
body.arena nav.breadcrumb {
    font-size: var(--arena-fs-label);
    margin: 0 0 var(--arena-sp-4);
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: var(--arena-radius-sm);
    color: var(--arena-text-muted);
}
body.arena .breadcrumb a {
    color: var(--arena-text-muted);
}
body.arena .breadcrumb a:hover {
    color: var(--arena-gold);
}
body.arena .breadcrumb li[aria-current] {
    color: var(--arena-text-dim);
}

/* ---- フッタ ---- */
body.arena footer {
    background-color: var(--arena-panel);
    border-top: 1px solid var(--arena-line);
    color: var(--arena-text-muted);
    font-size: var(--arena-fs-label);
}
body.arena footer a {
    color: var(--arena-text-muted);
    font-size: var(--arena-fs-label);
}
body.arena footer a:hover {
    color: var(--arena-gold);
}
body.arena .copyright {
    background-color: var(--arena-bg);
    color: var(--arena-text-dim);
    font-size: var(--arena-fs-label);
}

/* ---- リンク ---- */
body.arena a {
    color: var(--arena-gold);
}
body.arena a:hover {
    color: var(--arena-gold);
    opacity: 0.85;
}

/* ============================================================
 * 2. レイアウト
 * ============================================================ */
.arena-wrap {
    max-width: var(--arena-maxw);
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.arena-panel {
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: var(--arena-radius);
    box-shadow: var(--arena-shadow), var(--arena-shadow-inset);
    padding: var(--arena-sp-4);
    margin: 0 0 var(--arena-sp-4);
    box-sizing: border-box;
}
.arena-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--arena-sp-2);
    margin: 0 0 var(--arena-sp-3);
}

.arena-h1 {
    font-size: var(--arena-fs-h1);
    line-height: var(--arena-lh-tight);
    color: var(--arena-text);
    margin: 0 0 var(--arena-sp-3);
    font-weight: 700;
}
.arena-h2 {
    font-size: var(--arena-fs-h2);
    line-height: var(--arena-lh-tight);
    color: var(--arena-text);
    margin: 0 0 var(--arena-sp-3);
    font-weight: 700;
}
.arena-lead {
    font-size: var(--arena-fs-body);
    color: var(--arena-text-muted);
    margin: 0 0 var(--arena-sp-4);
}
.arena-note {
    font-size: var(--arena-fs-label);
    color: var(--arena-text-muted);
    margin: var(--arena-sp-2) 0 0;
}
.arena-hidden {
    display: none !important;
}

/* ============================================================
 * 3. フォーム
 * ============================================================ */
.arena-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--arena-sp-3);
    margin: 0;
}
.arena-field {
    display: block;
    font-size: var(--arena-fs-label);
    color: var(--arena-text-muted);
    text-align: left;
}
.arena-field-wide {
    grid-column: 1 / -1;
}
.arena-field > span {
    display: block;
    margin-bottom: var(--arena-sp-1);
}
.arena-field input,
.arena-field select,
.arena-input,
.arena-select {
    display: block;
    width: 100%;
    min-height: var(--arena-tap);
    box-sizing: border-box;
    padding: var(--arena-sp-2) var(--arena-sp-3);
    background: var(--arena-panel-2);
    color: var(--arena-text);
    border: 1px solid var(--arena-line-strong);
    border-radius: var(--arena-radius-sm);
    font-family: var(--arena-font-num);
    font-size: var(--arena-fs-body);
    line-height: 1.4;
}
.arena-field select,
.arena-select {
    font-family: var(--arena-font);
}
.arena-field input:focus,
.arena-field select:focus,
.arena-input:focus,
.arena-select:focus {
    outline: 2px solid var(--arena-gold);
    outline-offset: 1px;
}
.arena-details {
    grid-column: 1 / -1;
    border: 1px dashed var(--arena-line-strong);
    border-radius: var(--arena-radius-sm);
    padding: var(--arena-sp-2) var(--arena-sp-3);
}
.arena-details > summary {
    cursor: pointer;
    font-size: var(--arena-fs-label);
    color: var(--arena-text-muted);
    min-height: var(--arena-tap);
    line-height: var(--arena-tap);
}

/* ============================================================
 * 4. ボタン
 *   grid.css の button { height:38px; line-height:38px; white-space:nowrap }
 *   を必ず打ち消す。nowrap のままだと長い日本語ラベルで横スクロールが出る。
 * ============================================================ */
.arena-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;             /* ★ 必須。共通 CSS の nowrap を打ち消す */
    word-break: normal;
    overflow-wrap: anywhere;
    text-align: center;
    height: auto;
    min-height: var(--arena-tap);
    line-height: 1.35;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--arena-sp-2) var(--arena-sp-4);
    margin: 0;
    border: 1px solid var(--arena-line-strong);
    border-radius: var(--arena-radius-sm);
    background: var(--arena-panel-2);
    color: var(--arena-text);
    font-family: var(--arena-font);
    font-size: var(--arena-fs-body);
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--arena-dur) var(--arena-ease),
                border-color var(--arena-dur) var(--arena-ease);
}
.arena-btn:hover {
    background: var(--arena-line);
    color: var(--arena-text);
}
.arena-btn:focus-visible {
    outline: 2px solid var(--arena-gold);
    outline-offset: 2px;
}
.arena-btn[disabled],
.arena-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.arena-btn.is-primary {
    background: var(--arena-gold);
    border-color: var(--arena-gold);
    color: var(--arena-bg);
}
.arena-btn.is-primary:hover {
    background: var(--arena-gold);
    color: var(--arena-bg);
    opacity: 0.9;
}
.arena-btn.is-ghost {
    background: transparent;
    border-color: var(--arena-line-strong);
    color: var(--arena-text-muted);
}
.arena-btn.is-ghost:hover {
    background: var(--arena-panel-2);
    color: var(--arena-text);
}
.arena-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--arena-sp-2);
    margin: var(--arena-sp-3) 0 0;
}
.arena-btn-row .arena-btn {
    flex: 1 1 160px;
}

/* ============================================================
 * 5. 数字表示
 * ============================================================ */
.arena-stat {
    display: block;
    text-align: left;
    min-width: 0;
}
.arena-stat-label {
    display: block;
    font-size: var(--arena-fs-label);
    color: var(--arena-text-muted);
    line-height: 1.4;
    margin: 0 0 var(--arena-sp-1);
}
.arena-stat-value {
    display: block;
    font-family: var(--arena-font-num);
    font-size: var(--arena-fs-hero);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    line-height: var(--arena-lh-tight);
    color: var(--arena-text);
    word-break: break-all;
}
.arena-stat.is-sub .arena-stat-value {
    font-size: var(--arena-fs-num);
}
.arena-stat.is-gold .arena-stat-value { color: var(--arena-gold); }
.arena-stat.is-red .arena-stat-value { color: var(--arena-red); }
.arena-stat.is-green .arena-stat-value { color: var(--arena-green); }

.arena-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--arena-sp-3);
    margin: 0 0 var(--arena-sp-4);
}

/* ベット額の前ラウンド比（矢印つき） */
.arena-delta {
    display: inline-block;
    font-family: var(--arena-font-num);
    font-size: var(--arena-fs-label);
    font-variant-numeric: tabular-nums;
    padding: 0 var(--arena-sp-2);
    border-radius: var(--arena-radius-pill);
    margin-left: var(--arena-sp-2);
    white-space: nowrap;
}
.arena-delta.is-up {
    color: var(--arena-red);
    background: var(--arena-red-soft);
}
.arena-delta.is-down {
    color: var(--arena-green);
    background: var(--arena-green-soft);
}
.arena-delta.is-flat {
    color: var(--arena-text-dim);
}

/* ============================================================
 * 6. 資金バー（目標金額を 100% とする横棒）
 *   .arena-bar-label はバーの直前に置く行。バーの上に文字を重ねない。
 * ============================================================ */
.arena-bar-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--arena-sp-2);
    font-size: var(--arena-fs-label);
    color: var(--arena-text-muted);
    margin: 0 0 var(--arena-sp-1);
}
.arena-bar-label b {
    font-family: var(--arena-font-num);
    font-variant-numeric: tabular-nums;
    color: var(--arena-text);
    font-weight: 700;
}
.arena-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 18px;
    background: var(--arena-panel-2);
    border: 1px solid var(--arena-line);
    border-radius: var(--arena-radius-pill);
    overflow: hidden;
    box-sizing: border-box;
}
.arena-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--arena-gold);
    border-radius: var(--arena-radius-pill);
    transition: width var(--arena-dur) var(--arena-ease),
                background-color var(--arena-dur) var(--arena-ease);
}
.arena-bar.is-goal .arena-bar-fill { background: var(--arena-status-goal); }
.arena-bar.is-bust .arena-bar-fill { background: var(--arena-status-bust); }
.arena-bar.is-limit .arena-bar-fill { background: var(--arena-status-limit); }
.arena-bar.is-running .arena-bar-fill { background: var(--arena-status-running); }

/* ============================================================
 * 7. 状態バッジ
 * ============================================================ */
.arena-badge {
    display: inline-block;
    padding: 2px var(--arena-sp-3);
    border-radius: var(--arena-radius-pill);
    font-size: var(--arena-fs-label);
    line-height: 1.6;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--arena-line-strong);
    color: var(--arena-text-muted);
    background: var(--arena-panel-2);
}
.arena-badge.is-running {
    color: var(--arena-status-running);
    border-color: var(--arena-status-running);
}
.arena-badge.is-goal {
    color: var(--arena-status-goal);
    border-color: var(--arena-status-goal);
    background: var(--arena-green-soft);
}
.arena-badge.is-bust {
    color: var(--arena-status-bust);
    border-color: var(--arena-status-bust);
    background: var(--arena-red-soft);
}
.arena-badge.is-limit {
    color: var(--arena-status-limit);
    border-color: var(--arena-status-limit);
    background: var(--arena-gold-soft);
}

/* ============================================================
 * 8. 破産ゲージ（あと N 連敗で資金切れ）
 * ============================================================ */
.arena-gauge {
    display: block;
    padding: var(--arena-sp-3);
    border: 1px solid var(--arena-line);
    border-radius: var(--arena-radius);
    background: var(--arena-panel-2);
    margin: 0 0 var(--arena-sp-3);
}
.arena-gauge-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--arena-sp-2);
    font-size: var(--arena-fs-label);
    color: var(--arena-text-muted);
    margin: 0 0 var(--arena-sp-2);
}
.arena-gauge-num {
    font-family: var(--arena-font-num);
    font-size: var(--arena-fs-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--arena-gold);
}
.arena-gauge-track {
    display: flex;
    gap: var(--arena-sp-1);
}
.arena-gauge-cell {
    flex: 1 1 auto;
    height: 10px;
    border-radius: var(--arena-radius-sm);
    background: var(--arena-line);
}
.arena-gauge-cell.is-on {
    background: var(--arena-gold);
}
.arena-gauge.is-danger {
    border-color: var(--arena-red);
    animation: arena-danger var(--arena-dur) var(--arena-ease) infinite alternate;
}
.arena-gauge.is-danger .arena-gauge-num {
    color: var(--arena-red);
}
.arena-gauge.is-danger .arena-gauge-cell.is-on {
    background: var(--arena-red);
}
@keyframes arena-danger {
    from { background-color: var(--arena-panel-2); }
    to   { background-color: var(--arena-red-soft); }
}

/* ============================================================
 * 9. レーサーボード（race.php から ArenaUI.createRacerBoard が組み立てる）
 * ============================================================ */
.arena-racer-board {
    display: block;
}
.arena-racer {
    display: block;
    padding: var(--arena-sp-2) 0;
    border-bottom: 1px solid var(--arena-line);
}
.arena-racer:last-child {
    border-bottom: 0;
}
.arena-racer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--arena-sp-2);
    flex-wrap: wrap;
    margin: 0 0 var(--arena-sp-1);
}
.arena-racer-name {
    display: flex;
    align-items: center;
    gap: var(--arena-sp-2);
    font-size: var(--arena-fs-label);
    color: var(--arena-text);
    font-weight: 700;
    min-width: 0;
}
.arena-racer-chip {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--arena-radius-pill);
    background: var(--arena-gold);
    flex: 0 0 auto;
}
.arena-racer-meta {
    font-family: var(--arena-font-num);
    font-size: var(--arena-fs-label);
    font-variant-numeric: tabular-nums;
    color: var(--arena-text-muted);
    white-space: nowrap;
}
.arena-racer-balance {
    color: var(--arena-text);
    font-weight: 700;
}

/* ============================================================
 * 10. 演出（すべて 300ms 以内）
 * ============================================================ */
.arena-flash-win,
.arena-flash-lose,
.arena-flash-push {
    animation-duration: var(--arena-dur);
    animation-timing-function: var(--arena-ease);
    animation-iteration-count: 1;
}
.arena-flash-win  { animation-name: arena-flash-win; }
.arena-flash-lose { animation-name: arena-flash-lose; }
.arena-flash-push { animation-name: arena-flash-push; }

@keyframes arena-flash-win {
    0%   { background-color: var(--arena-green-soft); }
    100% { background-color: transparent; }
}
@keyframes arena-flash-lose {
    0%   { background-color: var(--arena-red-soft); }
    100% { background-color: transparent; }
}
@keyframes arena-flash-push {
    0%   { background-color: var(--arena-gold-soft); }
    100% { background-color: transparent; }
}

.arena-roulette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--arena-radius-pill);
    border: 3px solid var(--arena-line-strong);
    background: var(--arena-panel-2);
    color: var(--arena-text-muted);
    font-family: var(--arena-font-num);
    font-size: var(--arena-fs-h2);
    font-weight: 700;
    flex: 0 0 auto;
}
.arena-roulette.is-spinning {
    animation: arena-spin var(--arena-dur) linear 1;
}
.arena-roulette[data-outcome="win"] {
    border-color: var(--arena-green);
    color: var(--arena-green);
}
.arena-roulette[data-outcome="lose"] {
    border-color: var(--arena-red);
    color: var(--arena-red);
}
.arena-roulette[data-outcome="push"] {
    border-color: var(--arena-gold);
    color: var(--arena-gold);
}
@keyframes arena-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
 * 11. リザルト
 * ============================================================ */
.arena-result-card {
    display: block;
    border: 1px solid var(--arena-line);
    border-radius: var(--arena-radius);
    background: var(--arena-panel);
    padding: var(--arena-sp-3);
    margin: 0 0 var(--arena-sp-3);
}
.arena-result-card canvas,
.arena-result-card img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--arena-radius-sm);
}
.arena-result-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--arena-sp-3);
    margin: var(--arena-sp-3) 0 0;
}

/* 最悪の連敗ハイライト */
.arena-streak {
    display: flex;
    flex-wrap: wrap;
    gap: var(--arena-sp-1);
    margin: var(--arena-sp-3) 0 0;
}
.arena-streak-cell {
    width: 26px;
    height: 26px;
    border-radius: var(--arena-radius-sm);
    background: var(--arena-line);
    opacity: 0.25;
    transition: opacity var(--arena-dur) var(--arena-ease),
                background-color var(--arena-dur) var(--arena-ease);
}
.arena-streak-cell.is-on {
    background: var(--arena-red);
    opacity: 1;
}

/* グラフ
 *   Chart.js は responsive: true だと親要素いっぱいに伸びるので、
 *   必ず高さを決めた .arena-chart-box に入れて使う。 */
.arena-chart-box {
    position: relative;
    width: 100%;
    height: 260px;
    margin: var(--arena-sp-3) 0 0;
}
.arena-chart {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* ============================================================
 * 12. 広告枠
 *   ★ .ad-rotator に :empty 系の CSS を書かないこと。
 *     表示制御は ad-rotate.js の showWhen に一本化する。
 * ============================================================ */
body.arena .ad-rotator {
    margin: var(--arena-sp-4) 0;
    text-align: center;
}
body.arena .ad-rotator img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
 * 13. モバイル（375px で横スクロールを出さない）
 * ============================================================ */
@media screen and (max-width: 767px) {
    body.arena .container {
        padding: 0 var(--arena-sp-4);
    }
    .arena-panel {
        padding: var(--arena-sp-3);
    }
    .arena-btn-row .arena-btn {
        flex: 1 1 100%;
    }
    .arena-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .arena-chart-box {
        height: 200px;
    }
}

@media screen and (min-width: 768px) {
    .arena-form {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
 * 14. モーション設定の尊重
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.arena *,
    body.arena *::before,
    body.arena *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}