/* ================================
   Design Tokens
   色・フォント・余白・形はここで一括管理する。ルールは DESIGN.md を参照。
   コンセプト：「ポップなステージ」（ポップンミュージック風）
   ================================ */
:root {
    /* --- Stage (light): ホーム・プレビュー・完成画面・モーダル --- */
    --color-bg: #FFF4D6;             /* クリーム。画面の地 */
    --color-bg-dot: #FFE19A;         /* 地の水玉（装飾のみ） */
    --color-surface: #FFFFFF;        /* カード・入力欄・モーダル */
    --color-surface-alt: #FFF9E8;    /* 控えめな面・スライダーの溝 */
    --color-ink: #2B1A4F;            /* ぶどう色。本文・見出し・縁取り (bg 比 14.06) */
    --color-ink-2: #5B4A7A;          /* 補助テキスト (bg 比 7.08) */
    --color-ink-3: #6E5E8C;          /* プレースホルダ・注記 (bg 比 5.26) */
    --color-outline: var(--color-ink); /* 部品の太い縁取り */
    --color-line: #E8DDC0;           /* 薄い区切り線（装飾のみ） */

    --color-primary: #D6176A;        /* ホットピンク。主要操作 (白文字 5.01) */
    --color-primary-hover: #C8105F;  /* (白文字 5.68) */
    --color-primary-soft: #FFE7F1;   /* 淡いピンクの面 (ink 文字 13.17) */
    --color-on-primary: #FFFFFF;
    --color-focus: #1E5BE6;          /* キーボードフォーカスの枠 (bg 比 5.19) */

    /* ポップカラー：面や飾りに使う。上に載せる文字は必ず --color-ink */
    --pop-pink: #FF5FA2;             /* ink 文字 5.44 */
    --pop-yellow: #FFD23F;           /* ink 文字 10.67 */
    --pop-cyan: #3EC7F0;             /* ink 文字 7.80 */
    --pop-green: #4FD67A;            /* ink 文字 8.24 */
    --pop-orange: #FF8A3D;           /* ink 文字 6.57 */
    --pop-lavender: #C9B8F0;         /* ink 文字 8.51 */
    --pop-red: #FF6B5E;              /* ink 文字 5.51。難易度「むずかしい」 */

    --color-gold: var(--pop-yellow); /* 達成・ベスト記録・証明書 (ink 文字) */
    --color-success: #17803F;        /* 完了バッジ (白文字 5.00) */
    --color-warning: var(--pop-orange); /* 途中バッジ */
    --color-danger: #C2312E;         /* 破壊的操作 (白文字 5.57) */

    --color-scrim: rgba(43, 26, 79, 0.6);  /* モーダル背面 (ink の 60%) */

    /* --- Night stage (dark): 塗り画面・リプレイ --- */
    --viewer-bg: #2A1652;            /* js/canvas.js render() の背景と同色 */
    --viewer-surface: #3A2370;       /* パレットの台 */
    --viewer-surface-2: #4A2F8A;     /* ホバー面・進捗バーの溝 */
    --viewer-ink: #FFFFFF;           /* viewer-bg 比 15.73 */
    --viewer-ink-2: #C9B8F0;         /* viewer-bg 比 8.69 / surface 比 7.01 */
    --viewer-line: rgba(255, 255, 255, 0.18);
    --viewer-accent: var(--pop-yellow); /* 進捗バー */
    --viewer-gold: var(--pop-yellow);   /* 「答え」ボタン (ink 文字) */
    --viewer-danger: #FF9A9A;        /* surface 比 6.25 */

    /* --- 背景（画像を後で差し込む場所） ---
       --bg-image を url(...) に差し替えると、水玉の上に重なる。none のままで成立する */
    --bg-image: none;
    /* --bg-pattern は .screen で定義する（画面ごとに --color-bg-dot を上書きできるように） */
    --bg-pattern-size: 24px 24px;
    --viewer-bg-image: none;

    /* --- Typography --- */
    --font-display: 'Dela Gothic One', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
    --font-body: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
    --font-weight-body: 500;
    --font-weight-bold: 800;
    --font-size-xs: 0.75rem;   /* 12px 注記 */
    --font-size-sm: 0.875rem;  /* 14px 補助・ボタン小 */
    --font-size-base: 1rem;    /* 16px 本文・入力 (iOS のズーム防止) */
    --font-size-lg: 1.125rem;  /* 18px 小見出し */
    --font-size-xl: 1.375rem;  /* 22px 画面見出し */
    --font-size-2xl: 1.75rem;  /* 28px タイトル */
    --font-size-3xl: 2.25rem;  /* 36px 完成 */
    --letter-spacing-label: 0.06em;

    /* --- Spacing (4px グリッド) --- */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --gutter: 16px;                  /* 画面左右の余白 */

    /* --- Size --- */
    --tap-min: 44px;                 /* タップ領域の最小サイズ */
    --btn-height: 48px;              /* 二次ボタン */
    --btn-height-lg: 56px;           /* 主要ボタン */
    --swatch-size: 48px;             /* 色見本 */
    --content-max: 640px;

    /* --- Shape: 大きな角丸＋太い縁取り＋ベタ影 --- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    --border-width: 3px;
    --border: var(--border-width) solid var(--color-outline);

    /* ベタ影（ぼかしなし）。押すと --press-depth だけ沈む */
    --press-depth: 4px;
    --shadow-pop: 0 var(--press-depth) 0 var(--color-outline);
    --shadow-pop-sm: 0 2px 0 var(--color-outline);
    --shadow-pop-lg: 0 8px 0 var(--color-outline);
    --shadow-soft: 0 10px 30px rgba(43, 26, 79, 0.18);

    /* --- Safe area (ノッチ・ホームインジケータ) --- */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* --- Motion --- */
    --transition-fast: 120ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 400ms ease;
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Z-Index --- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-toast: 2000;
}

/* ================================
   Reset & Base
   ================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-body);
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button,
input,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

button,
input {
    border: none;
    background: none;
}

button {
    cursor: pointer;
}

input:focus,
button:focus,
select:focus {
    outline: none;
}

button:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

/* 押せる部品の共通の「押し込み」：ベタ影の分だけ沈む */
.pop-press,
.start-game-btn,
.action-btn,
.confirm-btn,
.continent-btn,
.mode-btn,
.tab-btn,
.show-answer-btn,
.replay-btn,
.ai-btn,
.menu-item.close-item {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

/* ================================
   Screen System
   ================================ */
.screen {
    --bg-pattern: radial-gradient(circle, var(--color-bg-dot) 3px, transparent 3.5px);
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    opacity: 0;
    background-color: var(--color-bg);
    background-image: var(--bg-image), var(--bg-pattern);
    background-size: cover, var(--bg-pattern-size);
    background-position: center, 0 0;
    transition: opacity var(--transition-base);
}

.screen.active {
    display: flex;
    opacity: 1;
}

/* ================================
   Loading Screen
   ================================ */
#loading-screen {
    justify-content: center;
    align-items: center;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: var(--border);
    background: conic-gradient(var(--pop-pink) 0 25%, var(--pop-yellow) 0 50%, var(--pop-cyan) 0 75%, var(--pop-green) 0);
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-md);
}

.loading-spinner.small {
    width: 28px;
    height: 28px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    letter-spacing: var(--letter-spacing-label);
}

/* ================================
   Home Screen
   ================================ */
#home-screen {
    overflow: hidden;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.app-header {
    position: relative;
    flex-shrink: 0;
    text-align: center;
    padding: calc(var(--space-lg) + var(--safe-top)) var(--gutter) var(--space-md);
}

/* 対戦の入口と表示言語の切り替えを横に並べる（狭い画面では折り返す） */
.header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 var(--space-sm);
}

/* ヘッダーの丸ボタン（設定） */
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    justify-content: center;
    margin-top: var(--space-sm);
    margin-bottom: var(--press-depth);
    padding: 0 var(--space-sm);
    border-radius: var(--radius-full);
    border: var(--border);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-pop);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.lang-btn:hover {
    background: var(--pop-yellow);
}

.lang-btn:active {
    transform: translateY(var(--press-depth));
    box-shadow: none;
}

/* 設定ボタンはヘッダーの右上に置く */
.lang-btn.sound-corner-btn {
    position: absolute;
    top: calc(var(--space-sm) + var(--safe-top));
    right: var(--gutter);
    margin: 0;
    z-index: 5;
    font-size: var(--font-size-lg);
}

/* タイトルロゴ（画像がなくても成立する文字ロゴ）。
   単語ごとにポップカラーのブロックに載せ、少しずつ傾ける */
.app-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-ink);
}

.title-icon {
    font-size: 0.95em;
    line-height: 1;
    transform: rotate(-12deg);
}

.title-word {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm) var(--space-xs);
    border: var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
}

.title-word-1 {
    background: var(--pop-yellow);
    transform: rotate(-4deg);
}

.title-word-2 {
    background: var(--pop-cyan);
    transform: rotate(3deg);
}

.app-subtitle {
    display: inline-block;
    margin-top: var(--space-sm);
    color: var(--color-ink);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
}

/* Search */
.search-container {
    flex-shrink: 0;
    padding: 0 var(--gutter) var(--space-sm);
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-xs) 0 var(--space-md);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-pop-sm);
    transition: box-shadow var(--transition-fast);
}

.search-box:focus-within {
    box-shadow: var(--shadow-pop-sm), 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus);
}

.search-icon {
    width: 20px;
    height: 20px;
    color: var(--color-ink);
    flex-shrink: 0;
}

#search-input {
    flex: 1;
    min-width: 0;
    height: var(--tap-min);
    padding: 0 var(--space-sm);
    font-size: var(--font-size-base);
}

#search-input::placeholder {
    color: var(--color-ink-3);
}

.search-clear {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-ink);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background var(--transition-fast);
}

/* 見た目 40px、タップ領域は 44px 以上 */
.search-clear::before {
    content: '';
    position: absolute;
    inset: -4px;
}

.search-clear:hover {
    background: var(--color-primary-soft);
}

/* Category Tabs: ポップなチップ。選択中はイエローの面＋ベタ影 */
/* モード切り替え：地図（シアン）と国旗（ピンク）。プレビュー・塗り画面のルールの札と同じ色 */
.mode-switch {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-sm);
    width: 100%;
    max-width: calc(var(--content-max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: var(--space-xs) var(--gutter) var(--space-sm);
}

.mode-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--btn-height);
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop-sm);
    text-align: left;
}

.mode-btn:hover {
    background: var(--color-surface-alt);
}

.mode-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.mode-btn.map.active {
    background: var(--pop-cyan);
}

/* その他も国旗と同じ色あてクイズなので、ルールの札と同じピンク */
.mode-btn.flag.active,
.mode-btn.other.active {
    background: var(--pop-pink);
}

.mode-btn.active {
    box-shadow: var(--shadow-pop);
    transform: translateY(-2px);
}

.mode-icon {
    font-size: 1.5em;
    line-height: 1;
}

.mode-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mode-name {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    line-height: 1.2;
}

.mode-rule {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

/* 3 つ並ぶとスマホでは横幅が足りないので、アイコンを上に積む */
@media (max-width: 479px) {
    .mode-btn {
        flex-direction: column;
        gap: 2px;
        text-align: center;
    }

    .mode-icon {
        font-size: 1.25em;
    }

    .mode-text {
        align-items: center;
    }
}

.category-tabs {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--gutter) var(--space-md);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--tap-min);
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-pop-sm);
    white-space: nowrap;
}

.tab-btn:hover {
    background: var(--color-surface-alt);
}

.tab-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.tab-btn.active {
    background: var(--pop-yellow);
    box-shadow: var(--shadow-pop);
    transform: translateY(-2px);
}

.tab-btn .tab-icon {
    font-size: 1.1em;
    line-height: 1;
}

/* Continent Filter (for world-map sub-selection) */
.continent-filter {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-2xs) var(--space-md);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.continent-filter::-webkit-scrollbar {
    display: none;
}

.continent-btn {
    flex-shrink: 0;
    min-height: var(--tap-min);
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border);
    white-space: nowrap;
}

.continent-btn:hover {
    background: var(--color-surface-alt);
}

.continent-btn.active {
    background: var(--pop-cyan);
    box-shadow: var(--shadow-pop-sm);
}

/* 並び替え（その他モード）：つながった切り替えボタン */
.sort-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-2xs) var(--space-md);
}

.sort-segment {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    border: var(--border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    box-shadow: var(--shadow-pop-sm);
}

.sort-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 40px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-2);
    background: transparent;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.sort-btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-ink);
}

.sort-btn.active {
    background: var(--pop-cyan);
    color: var(--color-ink);
}

.sort-btn-icon {
    line-height: 1;
}

/* Gallery */
.gallery-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-xs) var(--gutter) calc(var(--space-lg) + var(--safe-bottom));
    scrollbar-width: thin;
    scrollbar-color: var(--color-ink-3) transparent;
    /* スクロール中だけ、固定部分の下に縁取りと同じ線を出す（線の太さぶんは常に確保してずれを防ぐ） */
    border-top: var(--border-width) solid transparent;
    transition: border-color var(--transition-base);
}

#home-screen.is-scrolled .gallery-container {
    border-top-color: var(--color-outline);
}

.artwork-grid {
    display: grid;
    /* auto-fit＋上限幅で、余白が出ても（枚数が少なくても）カード列を中央に寄せる */
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    justify-content: center;
    gap: var(--space-lg) var(--space-md);
    padding-bottom: var(--space-sm);
}

/* auto-fit の列数は上限幅（200px）で数えるため、スマホ幅だと 1 列になってしまう。479px 以下は 2 列に固定 */
@media (max-width: 479px) {
    .artwork-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md) var(--space-sm);
    }
}

@media (min-width: 768px) {
    .artwork-grid {
        grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
    }
}

/* 作品カード：白い台紙＋太い縁取り＋ベタ影。キャプションは下の白帯 */
.artwork-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    border: var(--border);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-surface);
    transition: transform var(--transition-base) var(--ease-bounce), box-shadow var(--transition-fast);
}

/* 4 枚ごとにポップカラーの影色を変えて、並びにリズムを付ける */
.artwork-card:nth-child(4n+1) { --card-accent: var(--pop-pink); }
.artwork-card:nth-child(4n+2) { --card-accent: var(--pop-cyan); }
.artwork-card:nth-child(4n+3) { --card-accent: var(--pop-yellow); }
.artwork-card:nth-child(4n+4) { --card-accent: var(--pop-green); }

.artwork-card {
    box-shadow: 0 var(--press-depth) 0 var(--color-outline), 0 calc(var(--press-depth) + 3px) 0 var(--card-accent, var(--pop-pink));
}

.artwork-card:hover {
    transform: translateY(-3px) rotate(-1deg);
}

.artwork-card:active {
    transform: translateY(var(--press-depth));
    box-shadow: none;
}

.artwork-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 地図は形が分かるよう全体を収める（cover だと切れる） */
.artwork-card img.map-thumb {
    object-fit: contain;
    background: #ffffff;
}

/* 国旗は色当てなので、サムネイルは「？」で隠す */
.flag-mystery {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20%;
    background: var(--color-surface-alt);
    color: var(--color-ink-3);
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
}

/* Play Status Badge on Cards (top-left) */
.play-status-badge {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    z-index: 10;
    color: #FFFFFF;
    border: 2px solid var(--color-outline);
}

.play-status-badge.completed {
    background: var(--color-success);
}

.play-status-badge.in-progress {
    /* ⏳ の絵文字自体がオレンジ系なので、補色寄りの水色で見分けやすくする */
    background: var(--pop-cyan);
    font-size: 0.95rem;
}

/* 人気順の順位（その他モード、右上）。1〜3 位は金・銀・銅 */
.rank-badge {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    min-width: 30px;
    height: 30px;
    padding: 0 var(--space-2xs);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 2px solid var(--color-outline);
    color: var(--color-ink);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    z-index: 10;
    pointer-events: none;
}

.rank-badge.rank-1 { background: var(--color-gold); }
.rank-badge.rank-2 { background: #D9DEE6; }
.rank-badge.rank-3 { background: #E8B48A; }

/* カード下部のキャプション（常時表示）：白帯にぶどう色の文字 */
.artwork-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-xs) var(--space-sm) var(--space-xs);
    background: var(--color-surface);
    border-top: var(--border);
    color: var(--color-ink);
    pointer-events: none;
}

.artwork-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.artwork-card-artist {
    font-size: var(--font-size-xs);
    color: var(--color-ink-2);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-loading,
.gallery-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--color-ink);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-align: center;
}

.gallery-empty p {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
}

/* ================================
   Preview Screen
   ================================ */
#preview-screen {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.screen-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: calc(var(--space-sm) + var(--safe-top)) var(--space-sm) var(--space-sm);
    /* スクロール中だけ下線を出す（.gallery-container と同じ考え方） */
    border-bottom: var(--border-width) solid transparent;
    transition: border-color var(--transition-base);
}

.screen.is-scrolled .screen-header {
    border-bottom-color: var(--color-outline);
}

/* 丸いアイコンボタン（ポップンの丸ボタン風） */
.back-btn,
.menu-btn {
    flex-shrink: 0;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-ink);
    border: var(--border);
    box-shadow: var(--shadow-pop-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.back-btn:hover,
.menu-btn:hover {
    background: var(--pop-yellow);
}

.back-btn:active,
.menu-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.back-btn svg,
.menu-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 3;
}

.screen-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--color-ink);
    letter-spacing: var(--letter-spacing-label);
}

.header-spacer {
    width: var(--tap-min);
    flex-shrink: 0;
}

.preview-content {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xs) var(--gutter) calc(var(--space-md) + var(--safe-bottom));
    overflow-y: auto;
}

/* 画像エリアが残りの高さを使い、ボタンは常に画面内に収める */
.preview-canvas-container {
    position: relative;
    flex: 1 1 auto;
    min-height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-sm);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

#preview-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    text-align: center;
    background: var(--color-surface);
}

.preview-loading p {
    color: var(--color-ink-2);
    font-size: var(--font-size-sm);
}

.processing-step {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold);
}

.preview-info {
    flex-shrink: 0;
    text-align: center;
}

.preview-title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: 1.35;
}

.preview-artist {
    color: var(--color-ink-2);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2xs);
}

/* クイズのルール（地図と国旗で遊び方が違うので、モードの札＋一言で区別する） */
.preview-rule {
    margin-top: var(--space-xs);
    color: var(--color-ink-2);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}

.rule-tag {
    display: inline-block;
    margin-right: var(--space-xs);
    padding: 0 var(--space-sm);
    border: 2px solid var(--color-outline);
    border-radius: var(--radius-full);
    background: var(--pop-cyan);
    color: var(--color-ink);
    font-weight: var(--font-weight-bold);
}

.rule-tag.flag {
    background: var(--pop-pink);
}

/* 難易度（かんたん／ふつう／むずかしい）：プレビュー画面と対戦の待合室 */
.difficulty-picker {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.difficulty-legend {
    padding: 0;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-2);
}

#difficulty-picker .difficulty-legend {
    width: 100%;
    text-align: center;
}

.difficulty-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.difficulty-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: var(--space-2xs) var(--space-xs);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-pop-sm);
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
}

.difficulty-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 選んだ難易度の色：かんたん＝緑、ふつう＝黄、むずかしい＝赤（参加者の欄の札も同じ色） */
.difficulty-option:has(input[value="easy"]:checked) {
    background: var(--pop-green);
}

.difficulty-option:has(input[value="normal"]:checked) {
    background: var(--pop-yellow);
}

.difficulty-option:has(input[value="hard"]:checked) {
    background: var(--pop-red);
}

.difficulty-option:has(input:checked) .difficulty-stars {
    color: var(--color-ink);
}

.difficulty-option:has(input:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.difficulty-option:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.difficulty-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.difficulty-stars {
    font-size: var(--font-size-xs);
    color: var(--color-ink-2);
    letter-spacing: 1px;
}

.difficulty-desc {
    margin-top: var(--space-xs);
    color: var(--color-ink-2);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    text-align: center;
}

.battle-difficulty-picker {
    margin-top: var(--space-md);
}

/* 待合室の説明：参加者の欄と同じ薄い背景の枠。説明の長さで高さが変わらないよう 2 行分の高さに固定し、中央に置く */
.battle-difficulty-picker .difficulty-desc {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(2 * 1.6em + 2 * var(--space-xs));
    margin-top: var(--space-md);  /* 難易度のボタン（影つき）とくっつかないように */
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    text-align: center;
}

/* ランキング（かんたん・ふつう）：「あと N」の札の下に大陸ごとの残り数 */
.region-name-sub {
    display: block;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: normal;  /* 大陸が多いときは折り返す（札の幅は 1 行目に合わせる） */
}

/* 大陸 1 つ分（「アジア あと3」）は途中で折り返さない */
.continent-left {
    white-space: nowrap;
}

/* かんたん：地図の大陸の色と同じ色の丸 */
.continent-dot {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.2em;
    border: 1.5px solid var(--color-ink);
    border-radius: 50%;
    vertical-align: -0.05em;
}

/* Color Slider */
.color-slider-container {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
}

.slider-label {
    display: block;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-ink-2);
}

#color-count {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
}

#color-slider {
    width: 100%;
    height: var(--tap-min);
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

#color-slider::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--pop-pink), var(--pop-yellow), var(--pop-green), var(--pop-cyan));
    border: 2px solid var(--color-outline);
}

#color-slider::-moz-range-track {
    height: 10px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--pop-pink), var(--pop-yellow), var(--pop-green), var(--pop-cyan));
    border: 2px solid var(--color-outline);
}

#color-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--color-surface);
    border: var(--border);
    box-shadow: var(--shadow-pop-sm);
}

#color-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-surface);
    border: var(--border);
    box-shadow: var(--shadow-pop-sm);
}

.slider-range {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-ink-3);
}

/* Primary action：画面でいちばん目立つボタン */
.start-game-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: var(--btn-height-lg);
    margin-bottom: var(--press-depth);
    padding: 0 var(--space-lg);
    border-radius: var(--radius-full);
    border: var(--border);
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-pop);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-label);
}

.start-game-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.start-game-btn:active:not(:disabled) {
    transform: translateY(var(--press-depth));
    box-shadow: none;
}

.start-game-btn:disabled {
    background: var(--color-surface-alt);
    color: var(--color-ink-3);
    border-color: var(--color-ink-3);
    box-shadow: none;
    cursor: not-allowed;
}

.start-game-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 3;
}

/* 途中の作品だけに出す控えめなリセットボタン（主ボタンより目立たせない） */
.preview-reset-btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--tap-min);
    margin-bottom: var(--press-depth);
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    border: var(--border);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-pop);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.preview-reset-btn:hover {
    background: var(--color-surface-alt);
}

.preview-reset-btn:active {
    transform: translateY(var(--press-depth));
    box-shadow: none;
}

.preview-reset-btn svg {
    width: 18px;
    height: 18px;
}

/* ================================
   Game Screen (Night stage / dark)
   ================================ */
#game-screen {
    background-color: var(--viewer-bg);
    background-image: var(--viewer-bg-image);
    color: var(--viewer-ink);
}

.game-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: calc(var(--space-sm) + var(--safe-top)) calc(var(--space-sm) + var(--safe-right)) var(--space-sm) calc(var(--space-sm) + var(--safe-left));
    background: var(--viewer-surface);
    border-bottom: var(--border-width) solid var(--color-outline);
}

#game-screen .back-btn,
#game-screen .menu-btn {
    box-shadow: 0 2px 0 #000;
}

.game-progress {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.progress-bar {
    flex: 1;
    height: 14px;
    background: var(--viewer-bg);
    border: 2px solid var(--viewer-ink);
    border-radius: var(--radius-full);
    overflow: hidden;
}

/* しましまの進捗バー */
.progress-fill {
    height: 100%;
    width: 0%;
    background:
        repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, 0.35) 6px 12px),
        linear-gradient(90deg, var(--pop-pink), var(--viewer-accent));
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.progress-text {
    min-width: 48px;
    text-align: right;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-variant-numeric: tabular-nums;
    color: var(--viewer-ink);
}

/* Canvas Container */
.canvas-container {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    touch-action: none;
    background: var(--viewer-bg);
}

#game-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: crosshair;
}

/* Palette：ポップンのボタン台 */
.palette-container {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;  /* 色が少ないときは中央に。多いときはパレット自体が横スクロールする */
    gap: var(--space-sm);
    padding: var(--space-xs) calc(var(--space-sm) + var(--safe-right)) calc(var(--space-sm) + var(--safe-bottom)) calc(var(--space-sm) + var(--safe-left));
    background: var(--viewer-surface);
    border-top: var(--border-width) solid var(--color-outline);
}

/* 地図（場所あて）の出題バー：パレットの代わりに、いまの地名・残りの数・スキップを出す */
.quiz-bar {
    flex: 1;
    min-width: 0;
    max-width: 640px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.quiz-bar-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
}

.quiz-question {
    max-width: 100%;
    padding: var(--space-xs) var(--space-md);
    border-radius: 1.2em;  /* 1 行なら丸い札、折り返したら角丸の四角 */
    background: var(--pop-yellow);
    border: var(--border);
    box-shadow: 0 var(--press-depth) 0 #000;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);  /* 狭い画面で長い地名（サンティアゴ・デル・エステロ州）が 3 行にならない大きさ */
    text-align: center;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .quiz-question {
        font-size: var(--font-size-xl);
    }
}

.quiz-question:empty {
    visibility: hidden;
}

/* かんたんの国別地図：地名の前にその地方の色の丸（対戦の .battle-prompt.grouped と同じ） */
.quiz-question.grouped::before {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.35em;
    border-radius: 50%;
    border: 2px solid var(--color-ink);
    background: var(--group-color);
    vertical-align: -0.05em;
}

.quiz-left {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--viewer-ink-2);
}

.quiz-skip-btn {
    flex-shrink: 0;
    min-height: var(--tap-min);
    padding: 0 var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--viewer-surface-2);
    border: var(--border-width) solid var(--viewer-ink);
    box-shadow: 0 3px 0 #000;
    color: var(--viewer-ink);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.quiz-skip-btn:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: none;
}

.quiz-skip-btn:disabled {
    opacity: 0.4;
    box-shadow: none;
}

/* トップ10：表の見た目は対戦の .battle-rank-board。台（背景・枠）は .palette-container が持つ */
.palette-container > .rank-board {
    flex: 1;
    min-width: 0;
    max-width: 640px;
    padding: var(--space-xs) 0;
    background: none;
    border-top: none;
}

/* 選んだ地域名（地図クイズの「問題」）：地図の上端中央にイエローの札で出す。
   右上の答えボタン（約 100px）と重ならない幅にし、長い名前は折り返す */
.region-name {
    position: absolute;
    top: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 2 * (100px + var(--space-md)));
    padding: var(--space-xs) var(--space-md);
    border-radius: 1.2em;  /* 1 行なら丸い札、折り返したら角丸の四角 */
    background: var(--pop-yellow);
    border: var(--border);
    box-shadow: 0 var(--press-depth) 0 #000;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    text-align: center;
    text-wrap: balance;
    pointer-events: none;
    z-index: 2;
}

/* 何も選んでいないときの遊び方（地図＝シアン、国旗＝ピンク）。「問題」札と区別するため小さく */
.region-name.mode-hint {
    padding: var(--space-2xs) var(--space-md);
    background: var(--pop-cyan);
    border-width: 2px;
    box-shadow: 0 2px 0 #000;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.region-name.mode-hint.flag {
    background: var(--pop-pink);
}

/* Show Answer Button (Map Mode)：パレットの外、地図の右上に浮かせる */
.show-answer-btn {
    position: absolute;
    top: var(--space-sm);
    right: calc(var(--space-sm) + var(--safe-right));
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--tap-min);
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    background: var(--viewer-gold);
    border: var(--border);
    box-shadow: 0 3px 0 #000;
    color: var(--color-ink);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.show-answer-btn:hover {
    background: var(--color-surface);
}

.show-answer-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

.show-answer-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.palette {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: var(--space-sm) var(--space-xs) var(--space-sm);  /* 選択リングと持ち上げ分が切れないように */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.palette::-webkit-scrollbar {
    display: none;
}

/* 色見本：白い縁の丸ボタン。選ぶと持ち上がってイエローの輪が付く */
.color-swatch {
    position: relative;
    flex-shrink: 0;
    width: var(--swatch-size);
    height: var(--swatch-size);
    border-radius: 50%;
    cursor: pointer;
    border: var(--border-width) solid var(--viewer-ink);
    box-shadow: 0 3px 0 #000;
    transition: transform var(--transition-fast) var(--ease-bounce), box-shadow var(--transition-fast);
}

.color-swatch:hover {
    transform: translateY(-2px);
}

.color-swatch.active {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 0 0 3px var(--pop-yellow), 0 6px 0 3px #000;
}

.color-swatch.completed {
    opacity: 0.5;
    box-shadow: none;
}

.color-swatch.completed::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    border-radius: inherit;
}

/* ランキング：順番に出題するのでパレットは押せない（表示だけ） */
.palette.locked .color-swatch {
    cursor: default;
}

.palette.locked .color-swatch:hover:not(.active) {
    transform: none;
}

/* 番号: palette.js が明るい色のとき color/background をインラインで上書きする */
.color-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 26px;
    height: 26px;
    padding: 0 var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    border-radius: var(--radius-full);
    line-height: 1;
}

/* 番号の代わりの文字（ランキングの「10位」）：色見本に 1 行で収める */
.color-number.label {
    padding: 0 3px;
    font-size: 12px;
    white-space: nowrap;
}

/* ================================
   Modal (common)
   ================================ */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--gutter) + var(--safe-top)) calc(var(--gutter) + var(--safe-right)) calc(var(--gutter) + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
    background: var(--color-scrim);
    z-index: var(--z-modal);
    opacity: 1;
    transition: opacity var(--transition-base);
}

.modal.hidden {
    display: none;
}

.modal-content {
    width: 100%;
    max-height: calc(100% - 8px);
    overflow-y: auto;
    padding: var(--space-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop-lg);
    animation: modal-pop 280ms var(--ease-bounce);
}

@keyframes modal-pop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-content h3 {
    font-family: var(--font-display);
    font-weight: 400;
}

/* Game Menu */
.menu-content {
    max-width: 340px;
}

.menu-content h3 {
    text-align: center;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-md);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-align: left;
    background: var(--color-surface-alt);
    border: 2px solid var(--color-line);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.menu-item:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-outline);
}

.menu-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-ink);
    stroke-width: 2.5;
}

.menu-item.danger,
.menu-item.danger svg {
    color: var(--color-danger);
}

.volume-controls {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--color-surface-alt);
    border: 2px solid var(--color-line);
    border-radius: var(--radius-md);
}

.volume-controls.muted {
    opacity: 0.5;
}

.volume-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 40px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.volume-label {
    width: 4.5em;
    flex-shrink: 0;
}

.volume-row input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--color-outline);
}

.volume-value {
    width: 2.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 設定の表示言語切り替え */
.settings-lang {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-alt);
    border: 2px solid var(--color-line);
    border-radius: var(--radius-md);
}

.settings-lang-label {
    font-size: var(--font-size-lg);
}

.settings-lang-btn {
    flex: 1;
    min-height: var(--tap-min);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.settings-lang-btn:hover {
    border-color: var(--color-outline);
}

.settings-lang-btn.active {
    background: var(--pop-yellow);
    border: var(--border);
}

.menu-item.close-item {
    justify-content: center;
    margin: var(--space-md) 0 var(--press-depth);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-pop);
    color: var(--color-ink);
}

.menu-item.close-item:hover {
    background: var(--pop-yellow);
}

.menu-item.close-item:active {
    transform: translateY(var(--press-depth));
    box-shadow: none;
}

/* ================================
   Complete Screen
   ================================ */
#complete-screen {
    overflow-y: auto;
}

.complete-content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--space-xl) + var(--safe-top)) calc(var(--gutter) + var(--safe-right)) calc(var(--space-xl) + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
    text-align: center;
}

.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* 「完成」の文字：白い文字＋ぶどう色の太い縁＋ピンクのベタ影 */
.complete-title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--color-ink);
    text-shadow: 3px 3px 0 var(--title-shadow, var(--pop-pink));
    margin-bottom: var(--space-lg);
    transform: rotate(-3deg);
    animation: title-pop 500ms var(--ease-bounce) both;
}

@keyframes title-pop {
    from { transform: rotate(-3deg) scale(0.4); opacity: 0; }
    to { transform: rotate(-3deg) scale(1); opacity: 1; }
}

/* 額装風：白い台紙＋太い縁＋ベタ影 */
.complete-artwork {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    padding: var(--space-md);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop-lg);
    margin-bottom: var(--space-xl);
}

#complete-canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.artwork-info {
    width: 100%;
    max-width: 400px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    text-align: left;
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
}

.artwork-info:empty {
    display: none;
}

.artwork-info h4 {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: var(--space-sm);
}

.artwork-info p {
    color: var(--color-ink-2);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xs);
}

.artwork-info p strong {
    color: var(--color-ink);
    font-weight: var(--font-weight-bold);
}

.artwork-info p:last-child {
    margin-bottom: 0;
}

/* AI Info Section */
.ai-info-section {
    width: 100%;
    max-width: 400px;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.ai-info-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-2);
    margin-bottom: var(--space-sm);
}

.ai-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.ai-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: var(--tap-min);
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border);
    box-shadow: var(--shadow-pop-sm);
}

.ai-btn:hover {
    background: var(--pop-cyan);
}

.ai-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.ai-icon {
    font-size: 1em;
}

.complete-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: 400px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--btn-height);
    padding: 0 var(--space-lg);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border);
    box-shadow: var(--shadow-pop);
}

.action-btn:hover {
    background: var(--color-surface-alt);
}

.action-btn:active {
    transform: translateY(var(--press-depth));
    box-shadow: none;
}

.action-btn.primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.action-btn.primary:hover {
    background: var(--color-primary-hover);
}

.action-btn.secondary {
    background: var(--pop-cyan);
}

.action-btn.secondary:hover {
    background: var(--color-surface);
}

.action-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke-width: 2.5;
}

/* Certificate Button：達成の色（イエロー） */
.action-btn.certificate {
    background: var(--color-gold);
    color: var(--color-ink);
}

.action-btn.certificate:hover {
    background: var(--color-surface);
}

/* ================================
   Certificate Modal
   ================================ */
.certificate-content {
    max-width: 500px;
    text-align: center;
    position: relative;
}

.modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: 50%;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background var(--transition-fast);
}

.modal-close:hover {
    background: var(--pop-yellow);
}

.certificate-wrapper {
    margin: var(--space-xl) 0 var(--space-md);
    padding: var(--space-sm);
    background: var(--color-bg);
    border: 2px solid var(--color-line);
    border-radius: var(--radius-md);
}

#certificate-canvas {
    width: 100%;
    height: auto;
    display: block;
}

.certificate-actions {
    display: flex;
    justify-content: center;
    padding-bottom: var(--press-depth);
}

/* ================================
   Replay Modal (Night stage / dark)
   ================================ */
.replay-content {
    max-width: 600px;
    background: var(--viewer-bg);
    color: var(--viewer-ink);
    border-color: var(--viewer-ink);
    box-shadow: 0 8px 0 #000;
}

.replay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.replay-header h3 {
    font-size: var(--font-size-xl);
    color: var(--pop-yellow);
}

.close-btn {
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: 50%;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--viewer-surface);
    border: 2px solid var(--viewer-ink);
    transition: background var(--transition-fast);
}

.close-btn:hover {
    background: var(--viewer-surface-2);
}

.replay-canvas-container {
    background: var(--viewer-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-md);
}

#replay-canvas {
    width: 100%;
    display: block;
}

.replay-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: 3px;
}

.replay-btn {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--pop-pink);
    color: var(--color-ink);
    border: var(--border);
    box-shadow: 0 3px 0 #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.replay-btn:hover {
    background: var(--pop-yellow);
}

.replay-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

.replay-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.5;
}

.replay-progress {
    flex: 1;
}

.replay-progress-bar {
    height: 12px;
    background: var(--viewer-surface-2);
    border: 2px solid var(--viewer-ink);
    border-radius: var(--radius-full);
    overflow: hidden;
    cursor: pointer;
}

.replay-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--viewer-accent);
    border-radius: var(--radius-full);
    transition: width 100ms linear;
}

.replay-speed {
    min-height: var(--tap-min);
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--viewer-surface);
    color: var(--viewer-ink);
    border: 2px solid var(--viewer-ink);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

/* ================================
   Confirm Modal
   ================================ */
.confirm-content {
    max-width: 360px;
    text-align: center;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

.confirm-icon {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.confirm-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-sm);
}

.confirm-message {
    color: var(--color-ink-2);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
    white-space: pre-line;
}

.confirm-buttons {
    display: flex;
    gap: var(--space-sm);
    padding-bottom: var(--press-depth);
}

.confirm-btn {
    flex: 1;
    min-height: var(--btn-height);
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    border: var(--border);
    box-shadow: var(--shadow-pop);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
}

.confirm-btn:active {
    transform: translateY(var(--press-depth));
    box-shadow: none;
}

.confirm-btn.cancel-btn {
    background: var(--color-surface);
}

.confirm-btn.cancel-btn:hover {
    background: var(--color-surface-alt);
}

.confirm-btn.ok-btn {
    background: var(--color-danger);
    color: #FFFFFF;
}

.confirm-btn.ok-btn:hover {
    filter: brightness(1.08);
}

.confirm-btn.ok-btn.primary {
    background: var(--color-primary);
}

/* ================================
   Highlight Pattern (Checker)
   ================================ */
.checker-pattern {
    background-image:
        linear-gradient(45deg, #808080 25%, transparent 25%),
        linear-gradient(-45deg, #808080 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #808080 75%),
        linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

/* ================================
   Utilities
   ================================ */
.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================
   Scrollbar Styling
   ================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-ink-3);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-ink-2);
}

/* ================================
   Media Queries
   ================================ */
/* タッチ端末ではホバーがないので、持ち上げは行わない */
@media (hover: none) {
    .artwork-card:hover {
        transform: none;
    }

    .artwork-card:active {
        transform: translateY(var(--press-depth));
    }
}

/* マウス操作ではスクロールバー非表示の横スクロールを動かせないので、折り返して全部見せる */
@media (hover: hover) and (pointer: fine) {
    .category-tabs,
    .continent-filter {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

/* 背の低い画面（iPhone SE・横向きスマホなど）では上部を詰める */
@media (max-height: 700px) {
    .app-header {
        padding-top: calc(var(--space-md) + var(--safe-top));
        padding-bottom: var(--space-sm);
    }

    .app-title {
        font-size: var(--font-size-xl);
    }

    .app-subtitle {
        margin-top: var(--space-xs);
    }
}

@media (min-width: 768px) {
    :root {
        --gutter: 32px;
        --swatch-size: 52px;
    }

    .app-title {
        font-size: var(--font-size-3xl);
    }

    .app-header {
        padding-top: calc(var(--space-xl) + var(--safe-top));
    }

    .category-tabs {
        justify-content: safe center;
    }

    .complete-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* 横に並べるのは完成画面のボタンだけ。縦並び（対戦の入室画面など）で付けると、40% が高さになって伸びる */
    .complete-actions > .action-btn {
        flex: 1 1 40%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0ms !important;
    }

    .modal-content,
    .complete-title {
        animation: none;
    }
}

/* ================================
   Confetti Animation
   ================================ */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    animation: confetti-fall 3s ease-out forwards;
}

/* ================================
   Map Quiz: mistakes and result
   ================================ */
.mistake-counter {
    flex-shrink: 0;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    border: 2px solid var(--viewer-ink-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--viewer-ink-2);
}

.mistake-counter.has-mistakes {
    color: var(--viewer-danger);
    border-color: var(--viewer-danger);
}

.mistake-counter.bump {
    animation: mistake-bump 0.35s ease-out;
}

@keyframes mistake-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 間違えた場所の名前（塗る場所は出さない） */
.wrong-toast {
    position: absolute;
    top: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 2 * var(--gutter));
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-danger);
    border: 2px solid var(--viewer-ink);
    color: #FFFFFF;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 2;
    animation: wrong-shake 0.3s ease-out;
}

@keyframes wrong-shake {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(calc(-50% - 6px)); }
    75% { transform: translateX(calc(-50% + 6px)); }
}

.result-panel {
    width: 100%;
    max-width: 400px;
    margin-bottom: var(--space-lg);
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--radius-lg);
    border: var(--border);
    background: var(--color-surface);
    box-shadow: var(--shadow-pop);
}

.result-emoji {
    font-size: 3.5rem;
    line-height: 1.1;
}

.result-message {
    margin-top: var(--space-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.result-mistakes {
    margin-top: var(--space-sm);
    color: var(--color-ink-2);
    font-weight: var(--font-weight-bold);
}

.result-mistakes strong {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 400;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.result-record {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-gold);
    border: 2px solid var(--color-outline);
    color: var(--color-ink);
    font-weight: var(--font-weight-bold);
    animation: record-pop 0.6s ease-out 0.3s both;
}

@keyframes record-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.result-best {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-ink-3);
}

/* パーフェクト：イエローの放射線（集中線）でめでたく */
#complete-screen.result-perfect {
    background-color: var(--pop-yellow);
    background-image: repeating-conic-gradient(from 0deg at 50% 18%, rgba(255, 255, 255, 0.45) 0 10deg, transparent 10deg 20deg);
    background-size: auto;
}

.result-perfect .complete-title {
    --title-shadow: var(--color-surface);
    animation: title-pop 500ms var(--ease-bounce) both, title-bounce 0.9s ease-in-out 0.5s infinite alternate;
}

.result-perfect .result-panel {
    background: var(--color-surface);
    box-shadow: var(--shadow-pop-lg);
}

.result-perfect .result-emoji {
    animation: emoji-bounce 0.8s ease-in-out infinite alternate;
}

@keyframes title-bounce {
    from { transform: rotate(-3deg) scale(1); }
    to { transform: rotate(-3deg) scale(1.08); }
}

@keyframes emoji-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

/* すごい：シアンの水玉 */
#complete-screen.result-great {
    --color-bg-dot: #B8F0FF;
}

.result-great .complete-title {
    --title-shadow: var(--pop-cyan);
}

.result-great .result-panel {
    box-shadow: 0 var(--press-depth) 0 var(--color-outline), 0 calc(var(--press-depth) + 4px) 0 var(--pop-cyan);
}

/* ざんねん：ラベンダーで控えめに */
#complete-screen.result-sad {
    background-color: #E8E1F7;
    --color-bg-dot: #D7CCF0;
}

.result-sad .complete-title {
    --title-shadow: var(--pop-lavender);
}

.result-sad .result-emoji {
    animation: emoji-droop 2s ease-in-out infinite;
}

@keyframes emoji-droop {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg) translateY(3px); }
}

/* 悲しい結果の雨 */
.rain-drop {
    position: absolute;
    top: 0;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: rgba(91, 74, 122, 0.45);
    animation: rain-fall linear infinite;
}

@keyframes rain-fall {
    from { transform: translateY(-20px); }
    to { transform: translateY(100vh); }
}

@media (prefers-reduced-motion: reduce) {
    .result-perfect .complete-title,
    .result-perfect .result-emoji,
    .result-sad .result-emoji,
    .rain-drop {
        animation: none;
    }
}

/* ================================
   Battle（早塗り対決）
   ================================ */

/* ホームの入口ボタン */
.battle-open-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--tap-min);
    margin-top: var(--space-sm);
    margin-bottom: var(--press-depth);
    padding: 0 var(--space-lg);
    border-radius: var(--radius-full);
    border: var(--border);
    background: var(--pop-yellow);
    color: var(--color-ink);
    box-shadow: var(--shadow-pop);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.battle-open-btn:hover {
    background: var(--color-surface);
}

.battle-open-btn:active {
    transform: translateY(var(--press-depth));
    box-shadow: none;
}

/* 入室・待合室（Stage） */
#battle-entry-screen,
#battle-room-screen {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.battle-content {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xs) var(--gutter) calc(var(--space-lg) + var(--safe-bottom));
    overflow-y: auto;
}

.battle-card,
.battle-code-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-pop);
}

.battle-card-title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-label);
}

.battle-count {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-2);
    font-variant-numeric: tabular-nums;
}

.battle-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.battle-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-2);
}

.battle-input {
    width: 100%;
    min-height: var(--tap-min);
    padding: 0 var(--space-md);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--font-size-base);  /* 16px 未満にしない（iOS の自動ズーム防止） */
    box-shadow: var(--shadow-pop-sm);
}

.battle-input:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.battle-code-input {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
}

.battle-note {
    font-size: var(--font-size-sm);
    color: var(--color-ink-2);
    overflow-wrap: anywhere;  /* 長い招待リンクは折り返す。英語の単語は途中で切らない */
}

.battle-wait {
    text-align: center;
}

/* 準備完了：押すと投票になる。押したあとは投票した人の札と同じ緑 */
.battle-ready-btn {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.battle-ready-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.battle-ready-btn.ready,
.battle-ready-btn.ready:hover:not(:disabled) {
    background: var(--pop-green);
    color: var(--color-ink);
}

.battle-ready-btn:disabled {
    background: var(--color-surface-alt);
    color: var(--color-ink-3);
    border-color: var(--color-ink-3);
    box-shadow: none;
    cursor: not-allowed;
}

.battle-error {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-danger);
    color: #FFFFFF;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.battle-card .start-game-btn,
.battle-card .action-btn {
    width: 100%;
}

.battle-code-card {
    align-items: center;
    text-align: center;
}

.battle-invite-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

/* LINE のブランド色（ink 文字） */
.battle-line-btn,
.battle-line-btn:hover {
    background: #06C755;
}

/* Discord のブランド色（白文字 4.6） */
.battle-discord-btn,
.battle-discord-btn:hover {
    background: #5865F2;
    color: #FFFFFF;
}

.battle-random-card {
    background: var(--pop-yellow);
}

.battle-matching-icon {
    font-size: 3rem;
    line-height: 1;
    animation: battle-matching-spin 2.4s ease-in-out infinite;
}

@keyframes battle-matching-spin {
    0%, 60% { transform: rotate(0deg); }
    80% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .battle-matching-icon { animation: none; }
}

.battle-invited {
    padding: var(--space-sm) var(--space-md);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--pop-yellow);
    color: var(--color-ink);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.battle-room-code {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    line-height: 1.2;
    letter-spacing: 0.25em;
    padding-left: 0.25em;  /* 字間の分だけ中央からずれるのを戻す */
    font-variant-numeric: tabular-nums;
}

.battle-player-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.battle-player {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--tap-min);
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.battle-player.inactive {
    opacity: 0.55;
}

.battle-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-outline);
}

.battle-player-name {
    flex: 1;
    min-width: 0;
    font-weight: var(--font-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-tag {
    flex-shrink: 0;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-outline);
    background: var(--color-surface);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

/* 名前の上の「あなた」と、ホストの王冠 */
.battle-player-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2px 0;
    line-height: 1.25;
}

.battle-player-main .battle-player-name {
    flex: none;
}

.battle-player-you {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-2);
}

.battle-player-crown {
    margin-right: 0.25em;
}

/* 招待された人は、部屋コードの欄をいちばん下に */
.battle-code-card.guest {
    order: 1;
}

/* 難易度（ハンデ）の札 */
.battle-tag.difficulty.easy {
    background: var(--pop-green);
}

.battle-tag.difficulty.normal {
    background: var(--pop-yellow);
}

.battle-tag.difficulty.hard {
    background: var(--pop-red);
}

/* お題に投票した人の札 */
.battle-tag.voted {
    background: var(--pop-green);
}

/* 投票の発表：？がたくさん出てドラムロール → お題を発表 */
.battle-decide {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--gutter);
    background: var(--color-scrim);
    overflow: hidden;
}

.battle-decide-marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.battle-decide-mark {
    position: absolute;
    font-family: var(--font-display);
    color: var(--pop-yellow);
    text-shadow: 0 4px 0 var(--color-ink);
    opacity: 0;
    transform: rotate(var(--tilt));
    animation: battle-decide-pop 0.35s ease-out forwards, battle-decide-wiggle 0.5s ease-in-out infinite alternate;
}

.battle-decide-mark:nth-child(3n) { color: var(--pop-pink); }
.battle-decide-mark:nth-child(3n + 1) { color: var(--pop-cyan); }

@keyframes battle-decide-pop {
    0% { opacity: 0; scale: 0.2; }
    70% { opacity: 1; scale: 1.25; }
    100% { opacity: 1; scale: 1; }
}

@keyframes battle-decide-wiggle {
    from { translate: 0 -6px; }
    to { translate: 0 6px; }
}

/* 発表したら？は飛び散って消える */
.battle-decide.revealed .battle-decide-mark {
    animation: none;
    opacity: 0;
    scale: 2;
    transition: opacity 0.4s ease-out, scale 0.4s ease-out;
}

.battle-decide-body {
    position: relative;
    width: min(100%, 420px);
    text-align: center;
}

.battle-decide-title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    color: var(--color-on-primary);
    text-shadow: 0 3px 0 var(--color-ink);
    animation: battle-decide-throb 0.6s ease-in-out infinite alternate;
}

.battle-decide.revealed .battle-decide-title {
    animation: none;
}

@keyframes battle-decide-throb {
    from { scale: 1; }
    to { scale: 1.08; }
}

.battle-decide-result {
    margin-top: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-pop-lg);
    animation: battle-decide-reveal 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes battle-decide-reveal {
    from { opacity: 0; scale: 0.3; rotate: -8deg; }
    to { opacity: 1; scale: 1; rotate: 0deg; }
}

.battle-decide-kind {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    line-height: 1.2;
}

.battle-decide-theme {
    margin-top: var(--space-xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.battle-decide-note {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: 0 var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--pop-yellow);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.battle-decide-tally {
    margin: var(--space-md) 0 0;
    padding: var(--space-sm) 0 0;
    border-top: 2px dashed var(--color-line);
    list-style: none;
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-ink-2);
}

.battle-decide-tally-item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-2xs) 0;
}

.battle-decide-tally-count {
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
}

/* ルールの画面：早塗り＝黄、交代制＝水色の札 */
.battle-decide-rule-type {
    display: inline-block;
    margin-bottom: var(--space-sm);
    padding: var(--space-2xs) var(--space-md);
    border: 2px solid var(--color-outline);
    border-radius: var(--radius-full);
    background: var(--pop-yellow);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.battle-decide-rule-type.turns {
    background: var(--pop-cyan);
}

.battle-decide-rule-points {
    margin: var(--space-md) 0 0;
    padding: var(--space-sm) 0 0;
    border-top: 2px dashed var(--color-line);
    list-style: none;
    display: grid;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .battle-decide-mark,
    .battle-decide-title,
    .battle-decide-result {
        animation: none;
        opacity: 1;
    }
}

.battle-settings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

.battle-host-settings {
    display: grid;
    gap: var(--space-sm);
}

/* あそびかた（ラジオボタン）：選んだ種類の地図だけが下の選択欄に出る */
.battle-kind-group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.battle-kind-group legend {
    padding: 0;
    margin-bottom: var(--space-xs);
}

.battle-kind-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.battle-kind {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--tap-min);
    padding: var(--space-xs) var(--space-md);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-pop-sm);
    cursor: pointer;
}

.battle-kind input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.battle-kind:has(input:checked) {
    background: var(--pop-yellow);
}

.battle-kind:has(input:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.battle-kind-name {
    font-weight: var(--font-weight-bold);
}

.battle-kind-icon {
    margin-right: 0.3em;
}

.battle-kind-rule {
    font-size: var(--font-size-sm);
    color: var(--color-ink-2);
}

.battle-map-info {
    font-weight: var(--font-weight-bold);
}

/* 対戦画面（Night stage） */
#battle-game-screen {
    background-color: var(--viewer-bg);
    background-image: var(--viewer-bg-image);
    color: var(--viewer-ink);
}

#battle-game-screen .back-btn {
    box-shadow: 0 2px 0 #000;
}

.battle-qinfo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.battle-qnumber {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-variant-numeric: tabular-nums;
}

.battle-timer-fill {
    transition: none;  /* 100ms ごとに更新するのでアニメーションさせない */
}

.battle-scoreboard {
    flex-shrink: 0;
    list-style: none;
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) calc(var(--space-sm) + var(--safe-right)) var(--space-sm) calc(var(--space-sm) + var(--safe-left));
    overflow-x: auto;
    background: var(--viewer-surface);
    border-bottom: var(--border-width) solid var(--color-outline);
    scrollbar-width: none;
}

.battle-scoreboard::-webkit-scrollbar {
    display: none;
}

.battle-score {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    max-width: 160px;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    border: 2px solid var(--viewer-line);
    background: var(--viewer-bg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    transition: transform var(--transition-fast);
}

.battle-score .battle-dot {
    width: 14px;
    height: 14px;
    border-color: var(--viewer-ink);
}

.battle-score.me {
    border-color: var(--viewer-ink);
}

.battle-score.inactive {
    opacity: 0.5;
}

.battle-score.locked {
    opacity: 0.6;
}

.battle-score.winner,
.battle-score.turn {
    border-color: var(--pop-yellow);
    transform: scale(1.08);
}

.battle-score-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-score-value {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--pop-yellow);
}

.battle-score-mark {
    color: var(--viewer-danger);
}

#battle-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: crosshair;
}

/* 1問目の前のカウントダウン */
/* パフッ：ボタンと、鳴らした人の名前が浮かぶ吹き出し */
.battle-puff-btn {
    font-size: 1.3rem;
    line-height: 1;
}

.battle-puffs {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: calc(var(--z-modal) + 1);  /* 結果発表の上にも出す */
}

.battle-result-puffs {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.battle-puff {
    position: absolute;
    bottom: 12%;
    transform: translateX(-50%);
    max-width: 60%;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--puff-color);
    border: 3px solid var(--puff-color);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: battle-puff-rise 1.6s ease-out forwards;
}

@keyframes battle-puff-rise {
    0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.6); }
    15%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
    25%  { transform: translate(-50%, -8px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -120px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .battle-puff { animation-name: battle-puff-fade; }
    @keyframes battle-puff-fade {
        0%, 70% { opacity: 1; }
        100% { opacity: 0; }
    }
}

.battle-countdown {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 6rem;
    color: var(--pop-yellow);
    text-shadow: 0 6px 0 #000;
    background: rgba(42, 22, 82, 0.55);  /* --viewer-bg の半透明 */
    pointer-events: none;
    z-index: 3;
}

/* ランキング：なにのトップ10か（地図の上の帯） */
.battle-rank-title {
    flex-shrink: 0;
    padding: var(--space-xs) calc(var(--space-sm) + var(--safe-right)) var(--space-xs) calc(var(--space-sm) + var(--safe-left));
    background: var(--pop-yellow);
    color: var(--color-ink);
    border-bottom: var(--border-width) solid var(--color-outline);
    text-align: center;
    line-height: 1.25;
}

.battle-rank-title-main {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
}

.battle-rank-title-sub {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.battle-rank-title-sub:empty {
    display: none;
}

/* ランキング：トップ10の表（地図の下に 5 列 × 2 段。1位〜10位） */
.battle-rank-board {
    flex-shrink: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2xs);
    margin: 0;
    padding: var(--space-xs) calc(var(--space-sm) + var(--safe-right)) var(--space-xs) calc(var(--space-sm) + var(--safe-left));
    background: var(--viewer-surface);
    border-top: var(--border-width) solid var(--color-outline);
}

.battle-rank-cell {
    --finder: var(--viewer-line);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px var(--space-2xs);
    border-radius: var(--radius-md);
    border: 2px solid var(--finder);
    background: var(--viewer-bg);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}

.battle-rank-cell > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-rank-cell-pos {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--pop-yellow);
}

.battle-rank-cell-name {
    font-weight: var(--font-weight-bold);
}

/* 見つけた人の色：枠と、うすく塗った背景 */
.battle-rank-cell:not(.unknown) {
    background: color-mix(in srgb, var(--finder) 28%, var(--viewer-bg));
}

.battle-rank-cell-value {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--viewer-ink-2);
}

.battle-rank-cell.unknown {
    border-style: dashed;
}

.battle-rank-cell.unknown .battle-rank-cell-name {
    color: var(--viewer-ink-2);
    letter-spacing: 0.1em;
}

.battle-rank-cell.missed {
    opacity: 0.6;
}

.battle-rank-cell.new {
    animation: battle-rank-reveal 0.5s ease-out;
}

@keyframes battle-rank-reveal {
    0% { transform: scale(0.6) rotateY(90deg); }
    70% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (min-width: 768px) {
    .battle-rank-cell {
        font-size: var(--font-size-sm);
    }

    .battle-rank-cell-value {
        font-size: 12px;
    }
}

/* 出題（イエローの「問題」札） */
.battle-prompt-bar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) calc(var(--gutter) + var(--safe-right)) calc(var(--space-sm) + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
    background: var(--viewer-surface);
    border-top: var(--border-width) solid var(--color-outline);
}

.battle-prompt {
    max-width: 100%;
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-full);
    background: var(--pop-yellow);
    border: var(--border);
    box-shadow: 0 var(--press-depth) 0 #000;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: rotate(-2deg);
}

/* 難易度かんたんの国別地図：地名の前にその地方の色の丸（js/battle.js setPromptGroupColor） */
.battle-prompt.grouped::before {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.35em;
    border-radius: 50%;
    border: 2px solid var(--color-ink);
    background: var(--group-color);
    vertical-align: -0.05em;
}

.battle-prompt.waiting {
    background: var(--viewer-surface-2);
    color: var(--viewer-ink-2);
    border-color: var(--viewer-ink-2);
    font-size: var(--font-size-lg);
}

.battle-status {
    min-height: 1.6em;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--viewer-ink-2);
    text-align: center;
}

.wrong-toast.good {
    background: var(--color-success);
}

/* ランキングの対戦：「〇〇さんが正解！」の下に「10位 エチオピア（1.32億人）」を 2 行目で出す
   地図クイズ（かんたん・ふつう）：「✕ そこは「〇〇」」の下に「もっと東・近い」を 2 行目で出す */
#battle-toast,
#wrong-toast {
    width: max-content;  /* left: 50% のままだと幅が半分に縮んで、1 行目の途中で折り返すため */
    white-space: pre-line;
    text-align: center;
    border-radius: var(--radius-md);
}

/* 1 人用：上端には地域名の札があるので、まちがいの札は地図の下端に出す */
#wrong-toast {
    top: auto;
    bottom: var(--space-md);
}

/* 国旗：パレットは下に置くので、出題バーの下の余白（セーフエリア）はパレット側で取る */
#battle-game-screen.flag-mode .battle-prompt-bar {
    padding-bottom: var(--space-sm);
}

.battle-palette-bar {
    justify-content: center;
}

/* 自分の番ではないとき：選べないが、手番の人が選んだ色は光って見える */
.battle-palette.locked .color-swatch {
    cursor: default;
}

.battle-palette.locked .color-swatch:not(.active) {
    opacity: 0.6;
    transform: none;
}

/* 結果発表 */
.battle-result-content {
    max-width: 400px;
    text-align: center;
}

.battle-result-content h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-md);
}

.battle-ranking {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    text-align: left;
}

.battle-rank {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--tap-min);
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.battle-rank:first-child {
    background: var(--pop-yellow);
    border: 2px solid var(--color-outline);
}

.battle-rank.me .battle-player-name::after {
    content: '（あなた）';
    font-size: var(--font-size-xs);
    color: var(--color-ink-2);
}

html[lang="en"] .battle-rank.me .battle-player-name::after {
    content: ' (you)';
}

.battle-rank-pos {
    flex-shrink: 0;
    min-width: 2.5em;
    font-weight: var(--font-weight-bold);
}

.battle-rank-score {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

.battle-result-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
}

.battle-show-result {
    position: absolute;
    right: calc(var(--gutter) + var(--safe-right));
    bottom: calc(110px + var(--safe-bottom));
    z-index: 4;
}

@media (min-width: 768px) {
    .battle-settings {
        grid-template-columns: 2fr 1fr;
    }

    .battle-settings.single {
        grid-template-columns: 1fr;
    }

    .battle-kind-options {
        grid-template-columns: repeat(4, 1fr);
    }

    /* 4列のときは、絵文字の下に名前を置いて中央寄せ（名前の途中で改行しない） */
    .battle-kind {
        align-items: center;
        text-align: center;
    }

    .battle-kind-icon {
        display: block;
        margin-right: 0;
    }

    .battle-kind-name,
    .battle-kind-rule {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .battle-score {
        transition: none;
    }

    .battle-rank-cell.new {
        animation: none;
    }
}

/* ランキングの完成画面：順位と値の一覧 */
.ranking-list {
    margin: var(--space-xs) 0;
    padding: 0;
    list-style: none;
}

.ranking-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 2px 0;
    border-bottom: 1px dashed var(--color-outline);
}

.ranking-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ranking-source {
    font-size: var(--font-size-xs, 12px);
    opacity: 0.75;
}