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

/* ピクセル風日本語フォント（メッセージアイテム用、サブセット） */
/* k8x12: 8x12ドットのビットマップ風ゴシック（num_kadoma氏作） */
@font-face {
    font-family: 'k8x12';
    src: url('../fonts/k8x12-subset.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   PixelGameKit - 繧ｷ繝ｳ繝励Ν繝｢繝弱け繝ｭUI
   ======================================== */

:root {
    /* 繧ｫ繝ｩ繝ｼ繝��繝橸ｼ医す繝ｳ繝励Ν繝｢繝弱け繝ｭ�� */
    --bg-body: #ffffff;
    --bg-device: #ffffff;
    --bg-screen: #2a2a3a;
    --color-dark: #4a4a4a;
    --color-medium: #888888;
    --color-light: #cccccc;
    --text-dark: #333333;
    --text-light: #ffffff;
    --border-color: #e0e0e0;

    /* 繧ｵ繧､繧ｺ */
    --header-height: 44px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

html,
body {
    height: 100%;
    overflow: hidden;
    font-family: 'BIZ UDPGothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-body);
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* フォーム系にもフォント継承（デフォルト別フォントを回避） */
input, textarea, select, button {
    font-family: inherit;
}

/* ========================================
   繧｢繝励Μ繧ｳ繝ｳ繝�リ
   ======================================== */

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-device);
    padding-top: calc(var(--safe-area-top) + 10px);
}

/* ========================================
   繝倥ャ繝€繝ｼ�医い繧､繧ｳ繝ｳ繝��繝ｫ繝舌���
   ======================================== */

#header {
    height: var(--header-height);
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-device);
    border-top: 1px solid var(--border-color);
}

#toolbar-left {
    display: flex;
    align-items: center;
}

#toolbar-file {
    display: flex;
    gap: 0px;
}

#toolbar-nav {
    display: flex;
    gap: 0px;
}

.toolbar-icon {
    width: 34px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: none;
    background: transparent;
    color: var(--color-dark);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    padding: 2px 0;
}

.toolbar-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.toolbar-icon .icon-label {
    font-size: 7px;
    line-height: 1;
    white-space: nowrap;
    font-weight: 400;
}

.toolbar-icon:active {
    background: var(--border-color);
}

/* プレイヤーモードでロック中（見た目は通常、タップでエディットキー入力へ誘導） */
.toolbar-icon.locked {
    pointer-events: auto;
}

/* ナビアイコン：常時ON表示、アクティブは背景ハイライトで示す */
.nav-icon {
    color: var(--color-dark);
}

.nav-icon.active-nav {
    color: #ffffff;
    background: var(--color-dark);
}



#lang-icon-btn.lang-eng {
    color: var(--color-dark);
}

/* ========================================
   繧ｹ繧ｯ繝ｪ繝ｼ繝ｳ蜈ｱ騾�
   ======================================== */

.screen {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.screen.active {
    display: flex;
}

/* ========================================
   繝励Ξ繧､逕ｻ髱｢
   ======================================== */

#play-screen {
    position: relative;
    background: var(--bg-device);
}

/* PUSH START state UI: canvas上にabsolute配置、タイトル画面時のみ表示 */
/* ===== PLAY画面Canvasオーバーレイ（タイトル画面） =====
   基準: Canvas 352×352px。座標/フォントは --canvas-css-w に連動
   Player: REMIX OF / タイトル(改行可,中央,下揃え) / by 作者 / ♥数
   Creator: REMIX OF / タイトル(編集可) / クリエイター(編集可) / EDIT KEY */
#push-start-ui {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    /* 全体のBIZ UDPGothicを継承 */
    font-family: inherit;
}

#push-start-ui.hidden {
    display: none !important;
}

/* --- 使い方ガイドリンク（クリエーターモードのタイトル画面のみ表示） --- */
#manual-link {
    display: none;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(var(--canvas-css-w, 375px) * 0.034);
    color: #9a9a9a;
    text-decoration: underline;
    text-decoration-color: #555;
    text-underline-offset: 3px;
    pointer-events: auto;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
#push-start-ui.creator-mode #manual-link {
    display: block;
}
#manual-link:hover {
    color: #cfcfcf;
    text-decoration-color: #888;
}

/* --- REMIX OF: 上部固定 --- */
#game-remix-info {
    position: absolute;
    top: 4%;
    left: 4.5%;
    right: 4.5%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

#game-remix-info.hidden {
    display: none;
}

#game-remix-info .remix-label {
    font-size: calc(var(--canvas-css-w, 375px) * 0.024);
    letter-spacing: 0.05em;
    color: #6a6a6a;
}

#game-remix-info .remix-link {
    font-size: calc(var(--canvas-css-w, 375px) * 0.0284);
    line-height: 1.35;
    color: #b8b8b8;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #555;
    text-underline-offset: 2px;
    pointer-events: auto;
}

#game-remix-info .remix-sep {
    color: #555;
    margin: 0 4px;
    text-decoration: none;
}

/* --- 編集ラベル (タイトル ✎ / クリエーター ✎) --- */
.edit-label {
    font-size: calc(var(--canvas-css-w, 375px) * 0.028);
    letter-spacing: 0.05em;
    color: #6fd3ff;
    margin-bottom: 3px;
    display: none;
    align-items: center;
    gap: 4px;
}
.edit-label .edit-pen-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}
#push-start-ui.creator-mode .edit-label {
    display: flex;
}
#push-start-ui.creator-mode .author-prefix {
    display: none;
}
#push-start-ui.player-mode .edit-label {
    display: none;
}

/* --- タイトル: 中央/下揃え、改行可 (bottom-anchor) --- */
#game-title-block {
    position: absolute;
    left: 4.5%;
    right: 4.5%;
    bottom: 60%; /* クリエイター名との間隔を確保 */
    display: flex;
    flex-direction: column;
    align-items: center;
}
#push-start-ui.creator-mode #game-title-block .edit-label {
    align-self: stretch;
    text-align: left;
}

#game-title {
    width: 100%;
    text-align: center;
    font-size: calc(var(--canvas-css-w, 375px) * 0.074); /* Player: 26px @ 352 */
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: #ffffff;
    background: transparent;
    border: none;
    outline: none;
    padding: 4px 6px;
    margin: 0;
    resize: none;
    overflow: hidden;
    font-family: inherit;
    box-sizing: border-box;
}
/* rows=1: 自動折り返し無し（\nのみで改行） */
#game-title[rows="1"] {
    white-space: pre;
}
/* rows=2: \n含む時のみ2行表示 */
#game-title[rows="2"] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- クリエイター名: タイトル直下、固定Y --- */
#game-author-block {
    position: absolute;
    left: 4.5%;
    right: 4.5%;
    top: 42%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    color: #d0d0d0;
    flex-wrap: wrap;
}
#push-start-ui.creator-mode #game-author-block {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

.author-prefix {
    font-size: calc(var(--canvas-css-w, 375px) * 0.042);
    color: #d0d0d0;
}

/* Creatorモードではクリエイターラベル (タイトル ✎ 相当) は authorのdashed枠で表現 */
#game-author {
    font-size: calc(var(--canvas-css-w, 375px) * 0.042);
    color: #ffffff;
    background: transparent;
    border: none;
    outline: none;
    padding: 2px 1px;
    text-align: center;
    font-family: inherit;
    width: auto;
    field-sizing: content;
    min-width: 3ch;
    max-width: 70%;
}

/* クリエイターモードでは通常のpaddingに戻す */
#push-start-ui.creator-mode #game-author {
    padding: 2px 6px;
}

/* クリエイターモードのクリエイター名: タイトルと同じ横幅 */
#push-start-ui.creator-mode #game-author {
    width: 100%;
    max-width: 100%;
    field-sizing: unset;
}

/* --- 読み取り専用（プレイヤーモード） --- */
#game-title[readonly],
#game-author[readonly] {
    cursor: default;
    pointer-events: none;
}

/* --- 編集可能（クリエイターモード）: シアン破線＋✎ --- */
#game-title:not([readonly]),
#game-author:not([readonly]) {
    pointer-events: auto;
    cursor: text;
    border: 1px dashed #6fd3ff;
    border-radius: 3px;
}

#game-title:not([readonly]):hover,
#game-author:not([readonly]):hover {
    background: rgba(111, 211, 255, 0.06);
}

#game-title:not([readonly]):focus,
#game-author:not([readonly]):focus {
    border-color: #a4e4ff;
    background: rgba(111, 211, 255, 0.1);
}

/* デフォルト値（NEW GAME / You）はプレースホルダー風に薄く表示 */
#game-title.is-default,
#game-author.is-default {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* --- いいね (Player) --- */
#game-likes-display {
    position: absolute;
    left: 0;
    right: 0;
    top: 62%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: #f5f5f5;
    font-size: calc(var(--canvas-css-w, 375px) * 0.0398); /* 14px @ 352 */
    letter-spacing: 0.05em;
}

#game-likes-display.hidden {
    display: none;
}

#game-likes-display .like-icon-small {
    filter: brightness(0) invert(1);
    width: calc(var(--canvas-css-w, 375px) * 0.048); /* 約17px @ 352 */
    height: calc(var(--canvas-css-w, 375px) * 0.048);
}

#game-likes-count {
    font-weight: 600;
    color: #f5f5f5;
    line-height: 1;
}

/* ゲームビューポート */
#game-viewport {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#game-canvas {
    background: #000000;
    border: none;
    border-radius: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* 繧ｳ繝ｳ繝医Ο繝ｼ繝ｩ繝ｼ繧ｨ繝ｪ繧｢ */
#controller-area {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 4px;
    background: var(--bg-device);
}

#controls-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

/* 十字キー */
#dpad-container {
    position: relative;
    width: 145px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    /* 窪んだサークル: 光源は左上・凹面は左上が暗く右下が明るい */
    background: radial-gradient(circle at 65% 65%,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(230, 230, 230, 0.6) 30%,
            rgba(200, 200, 200, 0.4) 60%,
            rgba(180, 180, 180, 0.3) 100%);
    border-radius: 50%;
    box-shadow:
        inset 2px 2px 6px rgba(0, 0, 0, 0.15),
        inset -2px -2px 8px rgba(255, 255, 255, 0.5);
}

#dpad {
    position: relative;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 3px 0 #a8a8a8);
    transition: transform 0.06s ease-out, filter 0.06s ease-out;
}

/* 十字キー 方向別フィードバック */
#dpad.press-up {
    transform: translateY(-2px);
    /* 上方向 → 影は下にあるのでそのまま */
}

#dpad.press-down {
    transform: translateY(2px);
    filter: drop-shadow(0 1px 0 #a8a8a8);
}

#dpad.press-left {
    transform: translateX(-2px);
    /* 左押し → 右側に影が見えるべき */
    filter: drop-shadow(2px 3px 0 #a8a8a8);
}

#dpad.press-right {
    transform: translateX(2px);
    /* 右押し → 左側に影が見えるべき */
    filter: drop-shadow(-2px 3px 0 #a8a8a8);
}

#dpad.press-up-right {
    transform: translate(1.4px, -1.4px);
    /* 右上 → 影は下にあるのでそのまま */
}

#dpad.press-up-left {
    transform: translate(-1.4px, -1.4px);
    /* 左上 → 影は下にあるのでそのまま */
}

#dpad.press-down-right {
    transform: translate(1.4px, 1.4px);
    filter: drop-shadow(-1px 1px 0 #a8a8a8);
}

#dpad.press-down-left {
    transform: translate(-1.4px, 1.4px);
    filter: drop-shadow(1px 1px 0 #a8a8a8);
}

.dpad-btn {
    position: absolute;
    border: none;
    background: var(--color-dark);
    cursor: pointer;
    border-radius: 6px;
    box-shadow: none;
    /* #dpad::after (十字プラス形の横バー) より上に出して三角シェイプを見せる */
    z-index: 1;
    /* 髟ｷ謚ｼ縺玲凾縺ｮ譁�ｭ鈴∈謚樣亟豁｢ */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    pointer-events: none;
    /* 繧ｿ繝�メ繧､繝吶Φ繝医ｒ騾城℃ */
}

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

#btn-up {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 6px 6px 0 0;
}

#btn-down {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 0 0 6px 6px;
}

#btn-left {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 6px 0 0 6px;
}

#btn-right {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 0 6px 6px 0;
}

/* 各方向ボタン中央の三角シェイプ（方向を指す） */
.dpad-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#btn-up::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #a8a8a8;
}
#btn-down::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #a8a8a8;
}
#btn-left::after {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #a8a8a8;
}
#btn-right::after {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #a8a8a8;
}

/* 蜊∝ｭ励く繝ｼ縺ｮ荳ｭ螟ｮ繝舌� */
#dpad::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: calc(100% - 16px);
    background: var(--color-dark);
    border-radius: 6px;
    pointer-events: none;
    /* 繧ｯ繝ｪ繝�け繧帝€城℃ */
}

#dpad::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 16px);
    height: 48px;
    background: var(--color-dark);
    border-radius: 6px;
    pointer-events: none;
    /* 繧ｯ繝ｪ繝�け繧帝€城℃ */
}

/* PLAY画面のFAMITORYロゴ（ゲーム画面とコントローラーの間・フローに影響しない絶対配置） */
#play-logo {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 95px;
    aspect-ratio: 77 / 14;
    background: url('../Images/famitory_logo.png') no-repeat center / contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    user-select: none;
}

/* ダークモード時は文字色を背景色(#0a0a0f)にした版に差し替え、輪郭のみ浮き出る */
#app.dark-mode #play-logo {
    background-image: url('../Images/famitory_logo_dark.png');
}

/* 横向き(landscape)時はロゴを画面左上(十字キーの上)に配置 */
#app.landscape-play #play-logo {
    top: 12px;
    left: max(env(safe-area-inset-left, 0px), 8px);
    transform: none;
}

/* Start繝懊ち繝ｳ */
#start-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 4px;
}

#btn-start {
    width: 86px;
    height: 29px;
    border: none;
    border-radius: 14px;
    background: var(--color-dark);
    color: #a8a8a8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 2px 0 #a8a8a8;
}

#btn-start:active,
#btn-start.pressed {
    transform: translateY(2px);
    box-shadow: none;
}

/* A/B繝懊ち繝ｳ */
#action-btns-container {
    position: relative;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.action-btn {
    position: absolute;
    width: 86px;
    height: 86px;
    border: none;
    border-radius: 50%;
    background: var(--color-dark);
    color: #a8a8a8;
    font-size: 30px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 0 #a8a8a8;
    font-family: inherit;
    touch-action: manipulation;
}

/* A=右上・B=左下（AがBより上） */
#btn-a {
    top: 0;
    right: 0;
}

#btn-b {
    bottom: 40px;
    left: -30px;
}

/* A/Bボタン 判定エリア拡張（見た目変更なし） */
#btn-a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -70px;
    left: 0;
    right: -100px;
}

#btn-b::before {
    content: '';
    position: absolute;
    top: -30px;
    bottom: -50px;
    right: 0;
    left: -10px;
}

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

/* --- PC環境でのみ表示されるキーラベル --- */
.key-hint {
    display: none;
    position: absolute;
    font-size: 10px;
    color: #a8a8a8;
    opacity: 0.75;
    font-weight: 400;
    pointer-events: none;
    line-height: 1;
    letter-spacing: 0;
    font-family: inherit;
}

body.pc-env .key-hint {
    display: block;
}

/* 十字キー: 矢印の反対側（ボタン外周寄り、ほんの少し内側へ） */
#btn-up .key-hint {
    top: 6px;
    left: calc(50% + 1px);
    transform: translateX(-50%);
}
#btn-down .key-hint {
    bottom: 6px;
    left: calc(50% + 1px);
    transform: translateX(-50%);
}
#btn-left .key-hint {
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
}
#btn-right .key-hint {
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
}

/* A/B: ボタン下・水平中央（ボタンとの距離を少し空ける） */
.action-btn .key-hint {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    font-size: 9px;
    white-space: nowrap;
}
/* 押下時はボタンがtranslateY(3px)するので、キーラベルは逆方向にずらして位置を維持 */
.action-btn:active .key-hint,
.action-btn.pressed .key-hint {
    transform: translate(-50%, -3px);
}

/* START: ボタン下・水平中央（本体テキストはそのまま） */
#btn-start {
    position: relative;
}
#btn-start .key-hint {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    font-size: 10px;
}
/* 押下時はボタンがtranslateY(2px)するので、キーラベルは逆方向にずらして位置を維持 */
#btn-start:active .key-hint,
#btn-start.pressed .key-hint {
    transform: translate(-50%, -2px);
}

/* --- リザルト画面 リミックスボタンとその補足説明 --- */
.result-remix-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.result-remix-wrapper.hidden {
    display: none;
}

.result-remix-hint {
    margin: 0;
    font-size: 11px;
    color: #888;
    text-align: center;
    line-height: 1.4;
}

/* ========================================
   繝壹う繝ｳ繝育判髱｢
   ======================================== */

#paint-screen {
    background: var(--bg-device);
    min-height: 0;
}

/* ========== プレビューエリア（折りたたみ式） ========== */
#preview-area {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#preview-title {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    background: #f5f5f5;
}

#preview-area.collapsed #preview-title {
    border-bottom: 2px solid var(--border-color);
}

#preview-toggle {
    font-size: 10px;
    transition: transform 0.2s;
}

#preview-area.collapsed #preview-toggle {
    transform: rotate(-90deg);
}

#preview-area.collapsed #preview-body {
    display: none;
}

#preview-body {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 12px;
    background: #f5f5f5;
}

#preview-canvas {
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    border: 2px solid var(--color-dark);
    border-radius: 2px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #3CBCFC;
}

#preview-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    transition: opacity 0.3s ease;
}

#preview-controls.disabled-preview {
    opacity: 0.3;
    pointer-events: none;
}

.preview-row {
    display: flex;
    align-items: center;
}

.preview-row-top {
    gap: 8px;
}

.preview-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.preview-frame-info {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 0.5px;
}

.preview-transport {
    gap: 4px;
}

.preview-transport-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #f5f5f5;
    color: var(--color-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s;
}

.preview-transport-btn:active {
    background: var(--border-color);
}

.preview-transport-btn svg {
    width: 16px;
    height: 16px;
}

.preview-transport-btn.preview-play {
    width: 40px;
    background: var(--color-dark);
    color: var(--text-light);
    border-color: var(--color-dark);
}

.preview-transport-btn.preview-play:active {
    opacity: 0.8;
}

.preview-transport-btn.preview-play.playing {
    background: #c04040;
    border-color: #c04040;
}

#preview-speed-gauge {
    gap: 4px;
}

/* 繝斐け繧ｻ繝ｫ繝ｻ繧ｹ繝��繧ｸ逕ｻ髱｢繧ｳ繝ｳ繝�Φ繝�Λ繝�ヱ繝ｼ�井ｸ句ｯ�○�� */
#paint-content-wrapper,
#stage-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    overflow: hidden;
}

/* 繧ｮ繝｣繝ｩ繝ｪ繝ｼ陦悟�騾夲ｼ医せ繝励Λ繧､繝医�繧ｫ繝ｩ繝ｼ繝代Ξ繝�ヨ�� */
.gallery-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    padding: 6px 0;
    /* sprite / color / tile の全ギャラリー行を60pxで共通化（中身量による高さジャンプ防止） */
    min-height: 60px;
}

/* 霑ｽ蜉�繝懊ち繝ｳ�亥ｷｦ蝗ｺ螳壹€√ヤ繝ｼ繝ｫ縺ｨ邵ｦ霆ｸ謠�∴=48px蟷�€∵棧邱壹↑縺暦ｼ� */
.gallery-add-btn {
    flex-shrink: 0;
    width: 48px;
    min-width: 48px;
    height: 44px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-medium);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧ｳ繝ｳ繝�リ�医く繝｣繝ｳ繝舌せ蟷�崋螳�=320px�� */
.gallery-scroll {
    width: 320px;
    max-width: calc(100% - 48px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* PCのクラシックスクロールバーで帯の縦幅が変動するのを防ぐ(iOSはオーバーレイで元々非表示)。
       スクロール機能自体は保持(マウスドラッグ/トラックパッド/タッチ)。 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gallery-scroll::-webkit-scrollbar {
    display: none;
}

/* 繧ｹ繝励Λ繧､繝医Μ繧ｹ繝� */
#sprite-list {
    display: flex;
    gap: 4px;
    padding: 2px 8px;
}

.sprite-item {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--bg-screen);
    border: 2px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    image-rendering: pixelated;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.sprite-item.selected {
    border-color: #00ff66;
    transform: scale(1.09);
    z-index: 1;
}

.sprite-item.dragging {
    opacity: 0.5;
}

.sprite-item canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* 繝｡繧､繝ｳ繧ｨ繝ｪ繧｢�医ヤ繝ｼ繝ｫ蟾ｦ + 繧ｭ繝｣繝ｳ繝舌せ蜿ｳ�� */
#paint-main-area,
#stage-main-area,
.paint-main-area {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    min-height: 0;
    overflow: hidden;
}

/* 邱ｨ髮�ヤ繝ｼ繝ｫ�亥ｷｦ蛛ｴ邵ｦ1蛻励€∽ｸ顔ｫｯ繧偵く繝｣繝ｳ繝舌せ荳顔ｫｯ縺ｫ謠�∴繧具ｼ� */
#paint-tools,
#stage-tools,
.paint-tools {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    width: 48px;
    min-width: 48px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 320px;
    align-self: flex-start;
    scrollbar-width: none; /* Firefox */
}

#paint-tools::-webkit-scrollbar,
#stage-tools::-webkit-scrollbar,
.paint-tools::-webkit-scrollbar {
    display: none; /* PCブラウザのスクロールバーで横幅が削られてボタンが切れるのを防止 */
}

.paint-tool-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-light);
    cursor: pointer;
    transition: color 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.paint-tool-btn svg {
    width: 100%;
    height: 100%;
}

.paint-tool-btn:hover {
    color: var(--color-medium);
}

.paint-tool-btn.active {
    background: var(--color-dark);
    color: var(--text-light);
    border-radius: 6px;
}

.paint-tool-btn:active {
    transform: scale(0.9);
}

/* おてほんボタン状態 */
.paint-tool-btn.guide-loaded {
    color: var(--color-medium);
}

.paint-tool-btn.guide-active {
    color: var(--color-dark);
    background: rgba(0, 0, 0, 0.1);
}

.tool-divider {
    flex-shrink: 0;
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 4px 0;
    width: 100%;
}

/* 荳贋ｸ句渚霆｢�壼ｷｦ蜿ｳ蜿崎ｻ｢繧｢繧､繧ｳ繝ｳ繧�90蠎ｦ蝗櫁ｻ｢ */
.flip-v-btn svg {
    transform: rotate(90deg);
}

/* キャンバス包み（おてほん調整完了ボタンのオーバーレイ用） */
#paint-canvas-wrap {
    position: relative;
    width: 320px;
    max-width: calc(100% - 48px);
    aspect-ratio: 1;
    flex-shrink: 0;
    line-height: 0;
}
#paint-canvas-wrap > #paint-canvas {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
}

/* おてほん調整完了ボタン（調整モード時のみ表示） */
#guide-adjust-done-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid var(--color-dark);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
#guide-adjust-done-btn svg {
    width: 24px;
    height: 24px;
}
#guide-adjust-done-btn:active {
    background: var(--color-dark);
    color: #fff;
}

/* 繧ｭ繝｣繝ｳ繝舌せ */
#paint-canvas,
#stage-canvas,
.paint-canvas {
    width: 320px;
    max-width: calc(100% - 48px);
    aspect-ratio: 1;
    flex-shrink: 0;
    /* 閭梧勹濶ｲ: 阮�げ繝ｬ繝ｼ */
    background: #ffffff;
    /* 繧ｰ繝ｪ繝�ラ陦ｨ遉ｺ�育區縲�0.5px/50%騾乗� - 繝斐い繝弱Ο繝ｼ繝ｫ縺ｨ蜷後§�� */
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.5) 0.5px, transparent 0.5px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    border: 2px solid var(--color-dark);
    border-radius: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* 繧ｫ繝ｩ繝ｼ繝ｪ繧ｹ繝� */
#color-list {
    display: flex;
    gap: 4px;
    padding: 2px 8px;
}

.palette-color {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 2px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    /* transition: transform 0.15s ease, border-color 0.15s ease; */
}

.palette-color.selected {
    border-color: #00ff66;
    transform: scale(1.09);
    z-index: 1;
}

/* 繧ｫ繝ｩ繝ｼ繝代Ξ繝�ヨ繧ｨ繝ｪ繧｢荳矩Κ菴咏區 */
#color-area,
#tile-area {
    padding-bottom: calc(6px + var(--safe-area-bottom));
    border-bottom: 2px solid var(--border-color);
}

/* 繧ｿ繧､繝ｫ繝ｪ繧ｹ繝� */
#tile-list {
    display: flex;
    gap: 4px;
    padding: 2px 8px;
}

/* タイル帯はタイル数・プラットフォームに関わらずカラー帯と同じ高さ(62px)で固定。
   .gallery-scroll のスクロールバーを非表示化したことでカラー帯は常に62pxとなり、
   それに合わせて #tile-area にのみ min-height を効かせる(他のgallery-rowには影響しない)。 */
#tile-area {
    min-height: 62px;
}

.tile-item {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--bg-screen);
    border: 2px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    image-rendering: pixelated;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.tile-item.selected {
    border-color: #00ff66;
    transform: scale(1.09);
    z-index: 1;
}

.tile-item canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* スプライト未登録（空）のタイル */
.tile-item.empty {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
    /* 薄いグレー */
    font-size: 24px;
    font-weight: 300;
    /* 細字にする */
}

.tile-item.empty::after {
    content: '+';
    /* 位置調整不要（flex centerで中央配置） */
}

/* ========================================
   繧ｹ繝繧ｸ逕ｻ髱｢
   ======================================== */

#stage-screen {
    background: var(--bg-device);
}

/* 繧ｹ繝��繧ｸ逕ｨ繝��繝ｫ縺ｯ #paint-tools 縺ｨ蜷後§繧ｯ繝ｩ繧ｹ縺ｧ驕ｩ逕ｨ */

#stage-canvas-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#stage-canvas {
    width: 320px;
    max-width: calc(100% - 48px);
    aspect-ratio: 1;
    flex-shrink: 0;
    /* 繝斐け繧ｻ繝ｫ逕ｻ髱｢縺ｨ蜷後§閭梧勹繝ｻ繧ｰ繝ｪ繝�ラ */
    background: #ffffff;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
    /* 16ﾃ�16繧ｰ繝ｪ繝�ラ: 320px ﾃｷ 16 = 20px */
    background-size: 20px 20px;
    border: 2px solid var(--color-dark);
    border-radius: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* 繝ｬ繧､繝､繝ｼ蛻�崛繧ｿ繝� */
#layer-toggle {
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}

.layer-label {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-light);
    cursor: pointer;
}

.layer-label.active {
    color: var(--color-dark);
}

/* ========================================
   繧ｿ繧､繝ｫ險ｭ螳壹ヱ繝阪Ν�医う繝ｳ繝ｩ繧､繝ｳ螻暮幕��
======================================== */
#tile-config-panel {
    display: none;
    background: #f5f5f5;
    border-top: none;
    padding: 0 10px 12px;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
}

#tile-config-panel:not(.hidden) {
    display: block;
}

/* ヘッダー（グラバー+属性ラベル+保存+閉じるボタン、スクロールに追従せず上端に固定） */
#tile-config-header {
    position: sticky;
    top: -2px; /* sub-pixel 描画による1px隙間を上側で吸収 */
    z-index: 2;
    background: #f5f5f5;
    margin: 0 -10px 8px;
    padding: 12px 0 6px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    border-bottom: 1px solid var(--border-color);
}

/* ヘッダー内の行：属性ラベル・保存・閉じるを横並び */
.tile-config-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 10px 0;
    position: relative;
}

#tile-config-header:active {
    cursor: grabbing;
}

#tile-config-grabber {
    width: 40px;
    height: 4px;
    margin: 4px auto 2px;
    background: var(--color-medium, #b0b0b0);
    border-radius: 2px;
    opacity: 0.55;
}

/* ヘッダー内の属性ラベル（大項目）：太字・一文字分右にオフセット */
#tile-config-header .config-type-label {
    margin: 0;
    padding: 2px 0 2px 14px;
    border-bottom: none;
    flex: 1;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    color: var(--text-dark);
}

/* ヘッダー内の保存ボタン：ゲーム設定の「設定を保存」と同シェイプ */
#tile-config-header #config-save-btn {
    touch-action: manipulation;
    padding: 6px 22px;
    border: none;
    border-radius: 999px;
    background: var(--color-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

#tile-config-header #config-save-btn:active {
    opacity: 0.8;
}

/* ヘッダー内の閉じるボタン：フローに沿わせる */
#tile-config-header .panel-close-btn {
    position: static;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* 拡大状態：max-height を解除して flex で残り領域を全て使う */
#tile-config-panel.expanded {
    max-height: none;
    flex: 1;
    min-height: 0;
}

/* 拡大時はキャンバスとツール列を隠す（キャンバス操作衝突防止も兼ねる） */
#paint-content-wrapper.tile-config-expanded #paint-main-area {
    display: none;
}

/* 繝代ロ繝ｫ髢峨§繧九�繧ｿ繝ｳ�亥承荳岩恤�� */
.panel-close-btn {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-close-btn:hover {
    color: var(--text-dark);
}

.panel-close-btn:active {
    transform: scale(0.9);
}

/* 險ｭ螳夊｡� */
.config-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.config-row label {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-dark);
    min-width: 40px;
}

/* 螻樊€ｧ繝ｩ繝吶Ν�井ｸｭ螟ｮ蟇�○�� */
.config-type-label {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-dark);
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* 繧ｹ繝励Λ繧､繝郁ｨｭ螳壹そ繧ｯ繧ｷ繝ｧ繝ｳ */
#sprite-config-section {
    margin-bottom: 0;
}

/* ============ カード（中項目） ============ */
.config-card {
    background: #ffffff;
    border: 1px solid #d5dae2;
    border-radius: 8px;
    margin: 0 0 10px 0;
    padding: 6px 10px 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.config-card-label {
    font-size: 12px;
    font-weight: bold;
    color: #3a4b6b;
    padding: 2px 0 6px;
    margin: 0 0 4px;
    border-bottom: 1px dashed #d5dae2;
    letter-spacing: 0.02em;
}

.config-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* カード内は param-section-label を使わない（旧見出しの余白を無効化） */
.config-card-body .param-section-label {
    display: none;
}

/* スプライト行（統一グリッド：ラベル / スロット / ゲージ / トグル） */
.sprite-row {
    display: grid;
    grid-template-columns: 82px 44px 1fr auto;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 4px;
    padding: 3px 0;
}

.sprite-row-label {
    font-size: 12px;
    line-height: 1.2;
    font-weight: bold;
    color: var(--text-dark);
    white-space: pre-line;
    /* \n で改行させる */
}

/* スプライトスロット */
.sprite-slot {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-radius: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.sprite-slot:active {
    background: rgba(0, 0, 0, 0.1);
}

.sprite-slot canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* 譫壽焚陦ｨ遉ｺ */
.sprite-count {
    width: 16px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

/* 騾溷ｺｦ繧ｹ繝ｩ繧､繝€繝ｼ */
.sprite-speed {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
}

.sprite-speed::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-dark);
    cursor: pointer;
}

/* LOOP繝√ぉ繝�け */
.sprite-loop-label {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--text-muted);
}

.sprite-loop-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

/* 繝代Λ繝｡繝ｼ繧ｿ險ｭ螳壹そ繧ｯ繧ｷ繝ｧ繝ｳ */
#param-config-section {
    padding-top: 0;
    margin-top: 0;
}

/* パラメータ行（統一グリッド：ラベル / [空] / ゲージ・入力 / トグル） */
.param-row {
    display: grid;
    grid-template-columns: 82px 44px 1fr auto;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 0;
    padding: 3px 0;
}

.param-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-dark);
}

.param-value {
    width: 30px;
    font-size: 12px;
    color: var(--text-dark);
    text-align: center;
}

.param-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
}

.param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-dark);
    cursor: pointer;
}

/* 繝代Λ繝｡繝ｼ繧ｿ繝√ぉ繝�け繝懊ャ繧ｯ繧ｹ */
.param-check-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-dark);
}

.param-check-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* セレクト */
.param-select {
    width: 50%;
    flex: none;
    height: 28px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
}

/* テキスト入力（セレクトと同じスタイル） */
.param-input {
    width: 50%;
    flex: none;
    height: 28px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
}

/* SE驕ｸ謚櫁｡� */
.param-section-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-dark);
    margin: 12px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.se-row {
    gap: 4px;
}

.se-select {
    flex: 1;
    width: auto;
}

.se-preview-btn {
    width: 32px;
    height: 28px;
    padding: 0;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-screen);
    color: var(--text-dark);
    cursor: pointer;
}

.se-preview-btn:active {
    background: var(--color-dark);
    color: var(--color-light);
}

/* 髢峨§繧九�繧ｿ繝ｳ */
.config-actions {
    justify-content: center;
    margin-top: 8px;
}

.config-btn {
    padding: 8px 24px;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid var(--color-dark);
    border-radius: 0;
    background: var(--bg-screen);
    color: var(--text-dark);
    cursor: pointer;
}

.config-btn:active {
    background: var(--color-dark);
    color: var(--color-light);
}

.config-btn.primary {
    background: var(--color-dark);
    color: var(--color-light);
}

.config-btn.primary:active {
    opacity: 0.8;
}

/* ========================================
   繧ｹ繝励Λ繧､繝磯∈謚槭�繝��繧｢繝��
   ======================================== */

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-overlay.hidden {
    display: none;
}

.popup-content {
    background: var(--bg-device);
    border: 2px solid var(--color-dark);
    border-radius: 0;
    max-width: 90%;
    max-height: 80%;
}

.sprite-select-content {
    width: 340px;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-color);
}

.popup-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-dark);
}

.popup-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-dark);
}

/* 繧ｹ繝励Λ繧､繝磯∈謚槭せ繧ｯ繝ｭ繝ｼ繝ｫ繧ｨ繝ｪ繧｢ */
.sprite-select-scroll {
    padding: 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* 繧ｹ繝励Λ繧､繝磯∈謚槭い繧､繝�Β縺ｯ蠕梧婿縺ｧ螳夂ｾｩ */

/* 驕ｸ謚樣��分蜿ｷ */
.sprite-select-order {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--color-dark);
    color: var(--color-light);
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-actions {
    padding: 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.popup-btn {
    padding: 10px 32px;
    font-size: 13px;
    font-weight: bold;
    border: 2px solid var(--color-dark);
    border-radius: 0;
    cursor: pointer;
}

.popup-btn.primary {
    background: var(--color-dark);
    color: var(--color-light);
}

.popup-btn.primary:active {
    opacity: 0.8;
}

/* SE選択ポップアップ */
.se-select-content {
    width: 240px;
    max-width: 80%;
    padding: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    /* 子要素のスクロールを有効化 */
}

.se-select-list {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.se-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.se-select-item:last-child {
    border-bottom: none;
}

/* 選択中のSE */
.se-select-item.current {
    background: #f0f0f0;
}

.se-select-item .se-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.se-select-item .se-preview-btn {
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid #999;
    background: transparent;
    color: #666;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.se-select-item .se-preview-btn::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}

.num-value {
    width: 32px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

/* 蜉ｹ譫憺浹險ｭ螳� */
.sound-reg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.sound-reg-label {
    width: 80px;
    font-size: 11px;
    color: var(--text-muted);
}

.sound-slot {
    width: 32px;
    height: 32px;
    border: 2px dashed var(--border-color);
    border-radius: 4px;
    background: var(--bg-screen);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sprite-drop-slot {
    width: 40px;
    height: 40px;
    border: 2px dashed var(--border-color);
    border-radius: 4px;
    background: var(--bg-screen);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sprite-drop-slot.has-sprite {
    border-style: solid;
    border-color: var(--color-dark);
}

.sprite-drop-slot canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.slot-placeholder {
    font-size: 10px;
    color: var(--text-muted);
}

#tile-detail-config {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.config-save-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: var(--color-dark);
    color: var(--color-light);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

/* 繝｡繧､繝ｳ繧ｨ繝ｪ繧｢�医ヤ繝ｼ繝ｫ蟾ｦ + 繧ｭ繝｣繝ｳ繝舌せ荳ｭ螟ｮ��- 繝壹う繝ｳ繝医→蜷後§ */
#stage-main-area {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

/* 繧ｹ繝��繧ｸ繝��繝ｫ�亥ｷｦ蛛ｴ邵ｦ1蛻暦ｼ�- 繝壹う繝ｳ繝医→螳悟�蜷後§繧ｹ繧ｿ繧､繝ｫ */
#stage-tools {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 320px;
    max-height: 320px;
    align-self: flex-end;
}

.stage-tool-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-medium);
    cursor: pointer;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.stage-tool-btn svg {
    width: 100%;
    height: 100%;
}

.stage-tool-btn.active {
    background: var(--color-dark);
    color: var(--text-light);
    border-radius: 6px;
}

.stage-tool-btn:active {
    transform: scale(0.9);
}

/* 繧ｹ繝��繧ｸ繧ｭ繝｣繝ｳ繝舌せ繧ｳ繝ｳ繝�リ */
#stage-canvas-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    gap: 4px;
}

/* 繝ｬ繧､繝､繝ｼ蛻�崛��G/FG繝�く繧ｹ繝郁｡ｨ遉ｺ�� */
#layer-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
}

.layer-label {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.layer-label.active {
    color: var(--text-dark);
    opacity: 1;
}

#stage-canvas {
    width: 320px;
    max-width: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    background: #1a1a2e;
    border: 2px solid var(--color-dark);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* #add-tile-btn 縺ｯ .gallery-add-btn 縺ｮ繧ｹ繧ｿ繧､繝ｫ繧剃ｽｿ逕ｨ */

/* ========================================
   繧ｵ繧ｦ繝ｳ繝臥判髱｢
   ======================================== */

#sound-screen {
    background: var(--bg-device);
}

#sound-screen.active {
    flex-direction: column;
}

/* 繧ｽ繝ｳ繧ｰ繝代Ξ繝�ヨ�医ち繧､繝ｫ繝代Ξ繝�ヨ縺ｨ蜷後§繧ｹ繧ｿ繧､繝ｫ�� */
#song-palette-area {
    padding-bottom: calc(6px + var(--safe-area-bottom));
}

#song-gallery {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
}

.song-item {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--bg-screen);
    border: 2px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    image-rendering: pixelated;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.song-item.active {
    border-color: var(--color-dark);
    transform: scale(1.15);
    z-index: 1;
}

/* 繧ｽ繝ｳ繧ｰ險ｭ螳壹ヱ繝阪Ν�井ｸ九°繧画款縺嶺ｸ翫￡�� */
#song-config-panel {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: #f5f5f5;
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: transform 0.3s ease;
}

#song-config-panel.hidden {
    transform: translateX(-50%) translateY(100%);
}

#song-config-panel .config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid var(--border-color);
}

#song-config-panel .config-title {
    font-weight: bold;
    font-size: 14px;
}

#song-config-panel .config-header-btns {
    display: flex;
    gap: 8px;
}

#song-config-panel .header-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #333;
}

#song-config-panel .header-btn:active {
    background: #e0e0e0;
}

#song-config-panel .config-body {
    padding: 12px;
    max-height: 50vh;
    overflow-y: auto;
    padding-bottom: calc(16px + var(--safe-area-bottom));
}

#song-config-panel .config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

#song-config-panel .config-row label {
    font-size: 13px;
    font-weight: 500;
}

#song-config-panel .config-row input[type="text"] {
    width: 150px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
}

#song-config-panel .config-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

#song-config-panel .stepper-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
}

#song-config-panel .config-stepper span {
    min-width: 40px;
    text-align: center;
    font-weight: bold;
}

#song-config-panel .config-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-bottom: calc(8px + var(--safe-area-bottom));
}

#song-config-panel .config-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

#song-config-panel .config-btn.primary {
    background: var(--accent-blue);
    color: #fff;
}

#song-config-panel .config-btn.danger {
    background: var(--accent-red);
    color: #fff;
}

/* 繝医Λ繝�け繝代ロ繝ｫ�井ｸｭ螟ｮ驟咲ｽｮ�� */
#track-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-bottom: 2px solid var(--border-dark);
}

#track-tabs {
    display: flex;
    gap: 4px;
}

.track-tab {
    padding: 6px 12px;
    border: 2px solid var(--border-dark);
    border-radius: 4px;
    background: var(--bg-device);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.track-tab.active {
    background: #4a7c59;
    color: #fff;
    border-color: #fff;
}

#bpm-bar-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.ctrl-label {
    margin-left: 8px;
}

.ctrl-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    background: var(--bg-device);
    font-size: 10px;
    cursor: pointer;
}

/* 繝｡繧､繝ｳ繧ｨ繝ｪ繧｢�育ｷｨ髮�ヤ繝ｼ繝ｫ + 繝斐い繝弱Ο繝ｼ繝ｫ�� */
#sound-main-area {
    flex: 1;
    display: flex;
    gap: 8px;
    padding: 8px;
    min-height: 0;
}

/* 繝励Ξ繧､繝､繝ｼ繧ｳ繝ｳ繝医Ο繝ｼ繝ｫ�亥ｷｦ邵ｦ驟咲ｽｮ�� */
#sound-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.sound-ctrl-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-light);
    cursor: pointer;
    transition: color 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.sound-ctrl-btn svg {
    width: 100%;
    height: 100%;
}

.sound-ctrl-btn:hover {
    color: var(--color-medium);
}

.sound-ctrl-btn.active {
    background: var(--color-dark);
    color: var(--text-light);
    border-radius: 6px;
}

/* 繝斐い繝弱Ο繝ｼ繝ｫ */
#piano-roll-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    min-height: 0;
}

#piano-roll-canvas {
    border: 2px solid var(--color-dark);
    border-radius: 0;
}

/* 繝励Ξ繧､繝､繝ｼ繝代ロ繝ｫ�医い繧､繧ｳ繝ｳ莉倥″繝ｻ邵ｮ蟆冗沿�� */
#sound-player-panel {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border-top: 2px solid var(--border-dark);
    background: #fff;
}

.player-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-family: inherit;
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
    min-width: 40px;
    color: #888;
}

.player-btn svg {
    width: 16px;
    height: 16px;
}

.player-btn.play-stop {
    color: #4a7c59;
}

.player-btn.rec {
    color: #c44;
}

.player-btn.rec.active {
    animation: rec-blink 0.5s infinite;
}

@keyframes rec-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* 骰ｵ逶､繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繝舌���OS蟇ｾ蠢懶ｼ� */
#keyboard-scroll-container {
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.15);
}

#keyboard-scrollbar {
    width: 100%;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    outline: none;
}

#keyboard-scrollbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 24px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    cursor: pointer;
}

#keyboard-scrollbar::-moz-range-thumb {
    width: 60px;
    height: 24px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    cursor: pointer;
    border: none;
}

/* 骰ｵ逶､繧ｨ繝ｪ繧｢ */
#keyboard-area {
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* 繝阪う繝�ぅ繝悶せ繧ｯ繝ｭ繝ｼ繝ｫ繝舌�髱櫁｡ｨ遉ｺ��ebKit邉ｻ�� */
#keyboard-area::-webkit-scrollbar {
    display: none;
}

#piano-keyboard {
    display: flex;
    height: 80px;
    position: relative;
    min-width: max-content;
}

.piano-key {
    cursor: pointer;
    transition: background 0.05s;
}

.piano-key.white {
    width: 40px;
    height: 80px;
    background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
    border: 1px solid #666;
    border-radius: 0 0 6px 6px;
    z-index: 1;
}

.piano-key.black {
    width: 24px;
    height: 40px;
    background: linear-gradient(180deg, #333 0%, #000 100%);
    border: 1px solid #000;
    border-radius: 0 0 4px 4px;
    position: absolute;
    z-index: 2;
}

/* 逋ｽ骰ｵ謚ｼ荳区凾 */
.piano-key.white:active,
.piano-key.white.active {
    background: #ccc !important;
}

/* 鮟帝嵯謚ｼ荳区凾�亥ｰ代＠譏弱ｋ縺擾ｼ� */
.piano-key.black:active,
.piano-key.black.active {
    background: linear-gradient(180deg, #555 0%, #222 100%) !important;
}

.piano-key.highlight {
    background: var(--accent-blue) !important;
}

/* ========================================
   繝｡繝九Η繝ｼ繝代ロ繝ｫ
   ======================================== */

#menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu-panel.hidden {
    display: none;
}

.menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.menu-content {
    position: relative;
    background: var(--bg-device);
    border: 4px solid var(--border-dark);
    border-radius: 12px;
    padding: 20px;
    width: 280px;
    max-height: 90vh;
    overflow-y: auto;
}

.menu-content h2 {
    text-align: center;
    color: var(--text-dark);
    font-size: 20px;
    margin-bottom: 16px;
}

#screen-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.nav-btn {
    padding: 12px 16px;
    border: 2px solid var(--border-dark);
    border-radius: 8px;
    background: var(--bg-device);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.nav-btn.active {
    background: #4a7c59;
    color: #fff;
    border-color: #fff;
}

.nav-btn:active {
    opacity: 0.8;
}

.menu-content hr {
    border: none;
    border-top: 2px solid var(--border-dark);
    margin: 12px 0;
}

.menu-action {
    display: block;
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    background: transparent;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.menu-action:active {
    background: rgba(0, 0, 0, 0.1);
}

.menu-close {
    display: block;
    width: 100%;
    padding: 12px;
    border: 2px solid var(--accent-red);
    border-radius: 8px;
    background: transparent;
    color: var(--accent-red);
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.menu-close:active {
    background: var(--accent-red);
    color: #fff;
}

/* ========================================
   繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繝舌�
   ======================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 3px;
}

/* ========================================
   繝｢繝ｼ繝€繝ｫ
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-overlay.hidden {
    display: none;
}

#editkey-error.hidden {
    display: none;
}

.modal-content {
    background: var(--bg-device);
    border-radius: 12px;
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-content.modal-small {
    max-width: 320px;
}

.modal-header {
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: var(--color-dark);
    color: var(--color-light);
    border-radius: 12px 12px 0 0;
}

.modal-body {
    padding: 16px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px;
    justify-content: center;
    border-top: 1px solid var(--border-color);
}

.modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.modal-btn.ok-btn {
    background: var(--color-dark);
    color: var(--color-light);
}

.modal-btn.cancel-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
}

.modal-btn:active {
    opacity: 0.7;
}

/* 遞ｮ蛻･驕ｸ謚槭げ繝ｪ繝�ラ */
.type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-screen);
    cursor: pointer;
}

.type-btn:active {
    background: var(--color-dark);
    color: var(--color-light);
    border-color: var(--color-dark);
}

.type-icon {
    font-size: 28px;
}

.type-label {
    font-size: 12px;
    font-weight: bold;
}

/* 險ｭ螳壹そ繧ｯ繧ｷ繝ｧ繝ｳ */
.config-section {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.config-label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: var(--text-dark);
    width: 100%;
}

.config-label.inline {
    width: auto;
    margin-left: 8px;
}

.config-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-screen);
    font-family: inherit;
    font-size: 14px;
}

.config-select.small {
    padding: 6px 8px;
    font-size: 12px;
}

/* 繧ｹ繝励Λ繧､繝磯∈謚槭�繧ｿ繝ｳ */
.sprite-select-btn {
    width: 48px;
    height: 48px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    background: var(--bg-screen);
    font-size: 14px;
    font-weight: bold;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sprite-select-btn.small {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.sprite-select-btn.has-sprite {
    border-style: solid;
    border-color: var(--color-dark);
}

.sprite-select-btn canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ繧ｰ繝ｪ繝�ラ */
.anim-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

.anim-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.anim-item span {
    font-size: 11px;
    font-weight: bold;
    width: 55px;
}

/* 繝ｩ繧ｸ繧ｪ繧ｰ繝ｫ繝ｼ繝� */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.radio-group.vertical {
    flex-direction: column;
    gap: 8px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

/* 繧ｵ繧ｦ繝ｳ繝峨�繧ｿ繝ｳ */
.sound-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

.sound-btn {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-screen);
    font-size: 12px;
    cursor: pointer;
}

.sound-btn:active {
    background: var(--color-dark);
    color: var(--color-light);
}

.sound-btn.has-sound {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* 繧ｵ繧ｦ繝ｳ繝芽ｨｭ螳壹げ繝ｪ繝�ラ */
.sound-config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}

.sound-config-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sound-config-item span {
    font-size: 11px;
    font-weight: bold;
}

/* 繧ｹ繝励Λ繧､繝磯∈謚槭Μ繧ｹ繝� */
#sprite-select-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.sprite-select-item {
    width: 44px;
    height: 44px;
    background: transparent;
    /* JS縺ｧ蜍慕噪縺ｫ險ｭ螳� */
    border: 2px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    image-rendering: pixelated;
    overflow: hidden;
    position: relative;
}

.sprite-select-item.selected {
    border-color: var(--color-dark);
}

.sprite-select-item canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    display: block;
}

/* ========================================
   螻樊€ｧ驕ｸ謚槭�繝��繧｢繝��
   ======================================== */

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup-overlay.hidden {
    display: none;
}

.popup-content {
    background: var(--bg-device);
    border-radius: 12px;
    padding: 16px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.popup-title {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 12px;
}

.type-select-content {
    width: 280px;
    background: #fff;
}

.type-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px;
}

.type-select-item {
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-dark);
    cursor: pointer;
    text-align: center;
    transition: all 0.1s;
}

.type-select-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.type-select-item:active {
    background: var(--color-dark);
    color: #fff;
}

.popup-cancel {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
}

/* 繧ｹ繝��繧ｸ險ｭ螳壹ヱ繝阪Ν�域釜繧翫◆縺溘∩蠑上�蠖ｱ莉倥″�� */
#stage-settings-panel {
    position: relative;
    z-index: 10;
    background: #f5f5f5;
    border-bottom: 2px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    overflow: visible;
}

#stage-settings-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    background: #f5f5f5;
}

#stage-settings-toggle {
    font-size: 10px;
    transition: transform 0.2s;
}

#stage-settings-panel.collapsed #stage-settings-toggle {
    transform: rotate(-90deg);
}

#stage-settings-panel.collapsed #stage-settings-content {
    display: none;
}

#stage-settings-panel.collapsed {
    box-shadow: none;
}

#stage-settings-content {
    padding: 8px 12px 12px;
    background: #f5f5f5;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom) - var(--header-height) - 70px);
}

.setting-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

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

.setting-row label {
    width: 90px;
    font-size: 11px;
    font-weight: bold;
    color: var(--text-dark);
    flex-shrink: 0;
}

.setting-row input[type="text"] {
    width: 50%;
    flex: none;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 12px;
    background: #fff;
    color: #000000;
    box-sizing: border-box;
}

.setting-row input[type="text"]:focus {
    outline: none;
    border-color: var(--color-dark);
}

.setting-row select {
    width: 50%;
    flex: none;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 12px;
    background: #fff;
    color: #000000;
    box-sizing: border-box;
}

/* BGM字下げ */
.bgm-indented {
    padding-left: 0;
    margin-left: 0;
    width: 100%;
}

/* ステージサイズ横行（間隔調整） */
.setting-row-size-sub {
    margin-top: -5px;
}

/* 繧ｵ繧､繧ｺ蛻ｶ蠕｡ */
.size-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.size-control-vertical {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
}

.size-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.size-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.size-btn:active {
    background: var(--color-light);
}

#area-w-value,
#area-h-value {
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    color: var(--text-dark);
}

.size-separator {
    font-size: 12px;
    color: var(--color-medium);
    margin: 0 2px;
}

.size-unit {
    font-size: 11px;
    color: var(--color-medium);
    margin-left: 4px;
}

/* カラースウォッチ */
.color-swatch {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    background: #3CBCFC;
}

.color-swatch:active {
    opacity: 0.8;
}

/* 設定ボタン */
.setting-btn {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

.setting-btn:active {
    background: var(--color-light);
}

/* 蛻ｶ髯先凾髢灘�蜉� */
.time-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-control input[type="number"] {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 12px;
    text-align: center;
    height: 28px;
    box-sizing: border-box;
}

.time-control span {
    font-size: 11px;
    color: var(--color-medium);
}

/* 繧ｵ繧､繧ｺ繝ｩ繝吶Ν */
.size-label {
    font-size: 12px;
    color: var(--color-medium);
    margin-right: 4px;
}

/* BGM驕ｸ謚� */
.bgm-selects {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bgm-select-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bgm-label {
    font-size: 11px;
    color: var(--color-medium);
    width: 90px;
    flex-shrink: 0;
    padding-left: 0.5em;
}

.bgm-select-btn {
    width: 50%;
    flex: none;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 12px;
    background: #fff;
    color: #000;
    height: 28px;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bgm-select-btn:hover {
    border-color: var(--color-dark);
}

/* 菫晏ｭ倥�繧ｿ繝ｳ */
.setting-row-center {
    justify-content: center;
    margin-top: 8px;
}

.setting-save-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background: var(--color-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.setting-save-btn:active {
    opacity: 0.8;
}

/* ゲーム設定パネルの保存ボタン: カプセル型（タイル設定パネル側は #tile-config-header #config-save-btn 側で設定） */
#stage-settings-save {
    border-radius: 999px;
    padding: 10px 28px;
}

/* 繧ｹ繝��繧ｸ繧ｿ繧､繝医Ν繝ｩ繝吶Ν蟷�ｪｿ謨ｴ */
.setting-row label {
    min-width: auto;
}

/* 邵ｦ荳ｦ縺ｳ險ｭ螳夊｡鯉ｼ�GM逕ｨ�� */
.setting-row-vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.setting-row-vertical label {
    margin-bottom: 2px;
}

/* ========== 折りたたみ設定グループ（BGM/効果音/基本設定/ARCADE） カード表示 ========== */
#stage-settings-content .setting-group {
    background: #ffffff;
    border: 1px solid #d5dae2;
    border-radius: 8px;
    padding: 6px 10px 8px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

#stage-settings-content .setting-group.collapsed {
    padding-bottom: 6px;
}

.setting-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    padding: 2px 0 6px;
    border-bottom: 1px dashed #d5dae2;
    margin-bottom: 6px;
    width: 100%;
    box-sizing: border-box;
}

#stage-settings-content .setting-group.collapsed .setting-group-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 2px;
}

.setting-group-toggle {
    font-size: 11px;
    line-height: 1;
    color: var(--color-medium);
    width: 12px;
    display: inline-block;
    text-align: center;
    transition: transform 0.15s;
    transform-origin: center;
}

/* 折りたたみ時は ▼ を左向きに回転（サイズ・字形は同一のまま） */
.setting-group.collapsed > .setting-group-header .setting-group-toggle,
.se-subgroup.collapsed > .se-subgroup-header .se-subgroup-toggle {
    transform: rotate(-90deg);
}

.setting-group-label {
    font-size: 13px;
    font-weight: bold;
    color: #3a4b6b;
    letter-spacing: 0.02em;
}

/* 小項目ラベルの色を統一（薄いグレーではなく本文と同じ濃色） */
#stage-settings-content .bgm-label,
#stage-settings-content .se-subgroup-label {
    color: var(--text-dark);
}

/* サムネイル：プレビューの右にボタンを縦に並べる */
.arcade-thumb-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

#arcade-thumb-preview-wrap {
    width: 160px;
    height: 160px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid #666;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
    image-rendering: pixelated;
}

#arcade-thumb-preview {
    width: 100%;
    height: 100%;
    display: none;
    image-rendering: pixelated;
}

#arcade-thumb-placeholder {
    color: #888;
    font-size: 11px;
    text-align: center;
}

.arcade-thumb-btns {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    min-width: 0;
}

.arcade-thumb-btns .setting-save-btn {
    width: 100%;
    font-size: 13px;
    padding: 10px 12px;
    min-width: 0;
    white-space: nowrap;
}

.setting-group-body {
    width: 100%;
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.2s ease-out;
}

.setting-group.collapsed .setting-group-body {
    max-height: 0;
}

/* 効果音サブグループ */
.se-subgroup {
    width: 100%;
    margin-top: 4px;
    padding-left: 0.5em;
    box-sizing: border-box;
}

.se-subgroup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
}

.se-subgroup-toggle {
    font-size: 11px;
    line-height: 1;
    color: var(--color-medium);
    width: 12px;
    display: inline-block;
    text-align: center;
    transition: transform 0.15s;
    transform-origin: center;
}

.se-subgroup-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
}

.se-subgroup-body {
    padding-left: 0.5em;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 0.2s ease-out;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.se-subgroup.collapsed .se-subgroup-body {
    max-height: 0;
    margin-top: 0;
}

/* ========== 蜈ｱ譛峨ム繧､繧｢繝ｭ繧ｰ ========== */
.share-modal-content {
    text-align: center;
}

.share-modal-content h3 {
    margin: 0 0 8px;
    /* font-size/color removed - use .modal-title-simple styling */
}

.share-description {
    margin: 0 0 16px;
    font-size: 14px;
    color: #aaa;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--color-medium);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}

.share-btn:hover {
    background: var(--color-dark);
}

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

.copy-success {
    color: #4ade80;
    font-size: 14px;
    margin-bottom: 16px;
}

.copy-success.hidden {
    display: none;
}

.share-sns-container {
    margin: 16px 0;
}

.share-sns-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    border: 1px solid #333;
    border-radius: 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.2s;
}

.share-sns-btn:hover {
    background: #1a1a1a;
}

.share-sns-btn svg {
    width: 20px;
    height: 20px;
}

#share-close-btn {
    margin-top: 16px;
}

/* ========== 繝代Ξ繝�ヨ繝励Μ繧ｻ繝�ヨ驕ｸ謚槭ム繧､繧｢繝ｭ繧ｰ ========== */
.palette-preset-modal {
    max-width: 360px;
}

.palette-preset-modal h3 {
    margin: 0 0 16px;
    text-align: center;
    color: var(--color-light);
}

.preset-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.preset-item {
    display: flex;
    align-items: center;
    background: #fff;
    color: #333;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    min-height: 48px;
    box-sizing: border-box;
    width: 100%;
    gap: 0;
    transition: background 0.1s;
}

.preset-item:last-child {
    border-bottom: none;
}

.preset-item:hover {
    background: #f5f5f5;
}

.preset-item.selected {
    background: #e0e0e0;
}

.preset-item-arrow {
    width: 24px;
    text-align: center;
    font-size: 13px;
    color: #333;
    flex-shrink: 0;
    margin-right: 8px;
    font-weight: bold;
}

.preset-name {
    flex: 1;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    text-align: left;
}

.preset-count {
    color: #888;
    font-size: 12px;
}

.preset-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.preset-buttons .modal-btn {
    flex: 1;
    max-width: 100px;
}

/* ========================================
   繝ｪ繧ｶ繝ｫ繝育判髱｢繧ｪ繝ｼ繝舌�繝ｬ繧､
   ======================================== */
#result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
    pointer-events: auto;
}

#result-overlay.hidden {
    display: none;
    pointer-events: none;
}
/* リザルト画面内ゲーム情報 */
#result-game-info {
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

#result-game-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
}

#result-game-author {
    font-size: 10px;
    color: var(--color-medium);
    margin-bottom: 4px;
}

#result-remix-info {
    font-size: 9px;
    color: var(--color-medium);
    margin-bottom: 4px;
}

#result-remix-info .remix-link {
    color: var(--color-medium);
    cursor: pointer;
    text-decoration: underline;
    pointer-events: auto;
}

#result-likes-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0.6;
}

#result-likes-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-medium);
}

.result-container {
    background: var(--bg-device);
    padding: 24px;
    border-radius: 16px;
    width: 85%;
    max-width: 300px;
    max-height: 90dvh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: slideUp 0.3s forwards;
}

#result-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -2px;
    font-family: 'Press Start 2P', 'BIZ UDPGothic', Arial;
    white-space: nowrap;
}

@keyframes result-title-rainbow {
    0%,   16.6% { color: #ff4444; }
    16.7%, 33.3% { color: #ffa500; }
    33.4%, 50%   { color: #ffd700; }
    50.1%, 66.6% { color: #00e070; }
    66.7%, 83.3% { color: #40b0ff; }
    83.4%, 100%  { color: #a060ff; }
}

#result-title.rainbow {
    animation: result-title-rainbow 0.6s linear infinite;
    font-size: 20px;
    padding-left: 3px; /* !の後ろの余白で右寄りに見える分を中央補正 */
}

#result-score-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#result-score-container.hidden {
    display: none;
}

.result-score-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.result-score-row.small {
    opacity: 0.7;
    transform: scale(0.9);
}

.result-label {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-medium);
    letter-spacing: 1px;
}

#result-score-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
    font-family: 'BIZ UDPGothic', monospace;
    letter-spacing: 0;
    -webkit-text-stroke: 1px currentColor;
}

#result-highscore-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: 'BIZ UDPGothic', monospace;
    letter-spacing: 0;
    -webkit-text-stroke: 1px currentColor;
}

.result-highscore-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: 'BIZ UDPGothic', monospace;
    letter-spacing: 1px;
}

/* ===== ハイスコアネーム入力モーダル ===== */
.modal-header-simple.highscore-title {
    animation: result-title-rainbow 0.6s linear infinite;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
}

.highscore-body {
    text-align: center;
    padding: 20px 20px 10px;
}

.highscore-score-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.highscore-score-label {
    font-size: 14px;
    color: #a0a0c0;
    letter-spacing: 1px;
}

.highscore-score-value {
    font-size: 20px;
    font-weight: 700;
    color: #00ff66;
    font-family: 'BIZ UDPGothic', monospace;
    letter-spacing: 0;
    -webkit-text-stroke: 1px currentColor;
}

.highscore-name-hint {
    font-size: 12px;
    color: #a0a0c0;
    margin-bottom: 8px;
}

.highscore-no-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 14px;
    background: #ff3344;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 4px;
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    animation: highscore-no-pulse 0.4s ease-out;
}

.highscore-no-badge.hidden {
    display: none;
}

@keyframes highscore-no-pulse {
    0%   { transform: scale(0.5); opacity: 0; }
    50%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s, opacity 0.1s;
}

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

.result-btn:active {
    transform: scale(0.96);
}

.share-btn {
    background: var(--color-dark);
    color: var(--text-light);
}

.share-btn.hidden {
    display: none;
}

.retry-btn {
    background: var(--border-color);
    color: var(--text-dark);
}

.edit-btn {
    background: transparent;
    color: var(--color-medium);
    border: 1px solid var(--border-color);
}

.edit-btn.hidden {
    display: none;
}

/* いいねエリア（リザルト画面） */
#result-like-area {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

#result-like-area.hidden {
    display: none;
}

.result-like-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: 2px solid var(--border-color);
    border-radius: 24px;
    background: transparent;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s, border-color 0.15s;
}

.result-like-btn:active {
    transform: scale(0.95);
}

.result-like-btn.liked {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
    cursor: default;
    pointer-events: none;
}

.like-icon-result {
    width: 20px;
    height: 20px;
}

.result-like-btn.liked .like-icon-result {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(500%) hue-rotate(100deg);
}

.result-like-count {
    font-size: 13px;
    min-width: 1em;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

/* ========================================
   Discord繝懊ち繝ｳ & 蜈ｱ譛峨�繧ｿ繝ｳ諡｡蠑ｵ
   ======================================== */
.discord-btn {
    background-color: #5865F2 !important;
    color: white !important;
}

.discord-btn:active {
    background-color: #4752C4 !important;
}

.share-sns-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.share-sns-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #000;
    color: #fff;
    transition: background 0.2s;
}

.share-sns-btn:hover {
    background: #1a1a1a;
}

.share-sns-btn svg {
    width: 20px;
    height: 20px;
}

/* =========================================
   BGM Editor - Pocket Console Layout (Simplified)
   莉也判髱｢��AME/PIXEL/STAGE�峨→荳€雋ｫ縺励◆繧ｹ繧ｿ繧､繝ｫ
   ========================================= */

/* --- 1. Console Header (繧ｽ繝ｳ繧ｰ蛻ｶ蠕｡繝倥ャ繝€繝ｼ) --- */
#bgm-console-header {
    height: 60px;
    background: #f5f5f5;
    border-bottom: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 12px;
    flex-shrink: 0;
}

.console-lcd-group.left {
    gap: 10px;
}

/* タイトル欄＋曲選択マーク */
.song-title-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 4px;
    padding: 0 2px 0 0;
}

#bgm-console-header .console-nav-btn {
    background: #ffffff;
}

#bgm-console-header .value-lcd {
    background: #ffffff;
}

.song-title-wrap .title-lcd {
    background: transparent;
}

.song-select-btn {
    width: 26px;
    height: 30px;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark);
}

.song-select-btn svg {
    width: 18px;
    height: 18px;
}

.song-select-btn:active {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}

.song-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    padding: 4px 0;
}

.song-select-dropdown.hidden {
    display: none;
}

.song-select-item {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    white-space: nowrap;
}

.song-select-item:hover,
.song-select-item:active {
    background: rgba(0, 0, 0, 0.08);
}

.song-select-item.active {
    background: rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.console-lcd-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.console-lcd {
    font-size: 12px;
    color: var(--text-dark);
    padding: 2px 6px;
    border-radius: 4px;
    background: transparent;
}

.title-lcd {
    width: 120px;
    height: 32px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-dark);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.title-lcd span {
    display: inline-block;
}

.title-lcd span.marquee {
    padding-left: 100%;
    animation: marquee-scroll 6s linear infinite;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.title-lcd:active {
    background: rgba(0, 0, 0, 0.1);
}

.console-nav-btn {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--color-dark);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.console-nav-btn:active {
    background: var(--border-color);
}

/* ソング追加・削除ボタン */
.song-action-btn {
    font-size: 20px;
    font-weight: 300;
}

.song-action-btn svg {
    display: block;
}




.console-param {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.console-param .label {
    font-size: 8px;
    color: var(--color-medium);
    font-weight: bold;
    letter-spacing: 0.5px;
}

.value-lcd {
    width: 3ch;
    box-sizing: content-box;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    color: var(--text-dark);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    padding: 2px 4px;
}

/* STEP表示（現在/総STEP）- 幅を絶対値で固定（font-size変動に依存しない） */
#bar-display.value-lcd {
    width: 56px;
    padding: 2px 0; /* 横パディング0で内容領域を最大化 */
    line-height: 14px; /* SPEED欄と縦高を揃える */
}

/* 4桁を含む場合のみ文字サイズを縮小して同じ枠内に収める */
#bar-display.value-lcd.compact {
    font-size: 0.65em;
}

.value-lcd:active {
    background: rgba(0, 0, 0, 0.1);
}

/* BPM/BAR 繝弱ヶ繧ｰ繝ｫ繝ｼ繝� */
.console-knob-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}


/* --- 2. Main Area (繝｡繧､繝ｳ繧ｨ繝ｪ繧｢: 繝��繝ｫ + 繝斐い繝弱Ο繝ｼ繝ｫ) --- */
/* 荳区純縺医Ξ繧､繧｢繧ｦ繝茨ｼ医ヨ繝ｩ繝�け繝溘く繧ｵ繝ｼ縺ｮ荳奇ｼ� */
/* --- 2. Main Area --- */
#sound-main-area {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    min-height: 0;
    overflow: visible;
    margin-bottom: 0;
}

/* Tool bar (left column) - no scroll, fixed display */
#sound-controls {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    width: 48px;
    min-width: 48px;
    align-self: stretch;
    overflow: hidden;
}

.sound-ctrl-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-light);
    cursor: pointer;
    transition: color 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.sound-ctrl-btn svg {
    width: 100%;
    height: 100%;
}

.sound-ctrl-btn:hover {
    color: var(--color-medium);
}

.sound-ctrl-btn.active,
.sound-ctrl-btn.recording {
    background: var(--color-dark);
    color: var(--text-light);
    border-radius: 6px;
}

.sound-ctrl-btn:active {
    transform: scale(0.9);
}

.ctrl-divider {
    display: none;
}

/* --- 2.5 ピアノロール下部ボタンバー --- */
#sound-bottom-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    flex-shrink: 0;
    background: var(--bg-device);
}

.sound-bottom-btn {
    width: 48px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #e0e0e0;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: all 0.15s;
}

.sound-bottom-btn svg {
    width: 100%;
    height: 100%;
}

.sound-bottom-btn:active,
.sound-bottom-btn.pressed {
    transform: scale(0.9);
    filter: brightness(0.85);
}

.sound-bottom-btn:active:not(.play-stop):not(.step-rec),
.sound-bottom-btn.pressed:not(.play-stop):not(.step-rec) {
    background: #d0d0d0;
}

.sound-bottom-btn.play-stop {
    background: #22b14c;
    color: #0e3a1c;
}

.sound-bottom-btn.play-stop.active {
    background: #1c9640;
}

.sound-bottom-btn.active {
    background: #555;
    color: #e0e0e0;
}

#app.dark-mode .sound-bottom-btn.active {
    background: #8090a0;
    color: #2a2a40;
}

.sound-bottom-btn.step-rec {
    background: #666;
    color: #ccc;
}

.sound-bottom-btn.step-rec.active {
    background: #ff4444;
    color: #fff;
    animation: rec-blink 0.5s infinite;
}

/* 繝斐い繝弱Ο繝ｼ繝ｫ繧ｨ繝ｪ繧｢ - #stage-canvas-area 縺ｨ蜷後§ */
#piano-roll-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    min-height: 0;
}

/* 繝斐い繝弱Ο繝ｼ繝ｫ繧ｭ繝｣繝ｳ繝舌せ - #paint-canvas 縺ｨ蜷後§繧ｹ繧ｿ繧､繝ｫ */
#piano-roll-canvas {
    width: 320px;
    min-width: 320px;
    /* 蠑ｷ蛻ｶ逧�↓320px繧堤｢ｺ菫� */
    max-width: calc(100% - 48px);
    /* 荳€蠢懈ｮ九☆縺稽in-width縺悟━蜈医＆繧後ｋ */
    aspect-ratio: 1;
    flex-shrink: 1;
    box-sizing: border-box;
    /* 閭梧勹濶ｲ: 阮�げ繝ｬ繝ｼ */
    background: #ffffff;
    /* 繧ｰ繝ｪ繝�ラ陦ｨ遉ｺ�育區縲�1繝斐け繧ｻ繝ｫ豈趣ｼ� */
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 2px solid var(--color-dark);
    border-radius: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


/* --- 3. Channel Strip (繝輔ャ繧ｿ繝ｼ繝医Λ繝�け驕ｸ謚�) --- */
#bgm-channel-strip {
    height: 60px;
    background: var(--bg-device);
    border-top: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    flex-shrink: 0;
}

.channel-strip-track {
    background: var(--bg-device);
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
    position: relative;
    cursor: pointer;
    transition: background 0.1s;
    border-right: 1px solid var(--border-color);
}

.channel-strip-track:last-child {
    border-right: none;
}

.channel-strip-track:active {
    background: rgba(0, 0, 0, 0.05);
}

/* 繧｢繧ｯ繝�ぅ繝夜∈謚樒憾諷� */
.channel-strip-track.active {
    background: var(--bg-screen);
}


.track-info {
    position: relative;
    display: flex;
    justify-content: center;
    /* 荳ｭ螟ｮ蟇�○ */
    align-items: center;
    margin-bottom: 2px;
}

.track-mute-badge {
    position: absolute;
    left: 2px;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: #d64545;
    color: #ffffff;
    font-size: 9px;
    font-weight: bold;
    line-height: 1;
    border-radius: 2px;
    pointer-events: none;
    user-select: none;
}

.channel-strip-track.muted .track-mute-badge {
    display: flex;
}

.channel-strip-track.muted .track-icon {
    opacity: 0.35;
}

.track-name {
    display: flex;
    align-items: center;
    justify-content: center;
}

.track-icon {
    width: 40px;
    height: 20px;
    color: var(--color-medium);
}

.channel-strip-track.active .track-icon {
    color: var(--text-light);
}

.track-knobs {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
}

.knob-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: ew-resize;
    touch-action: none;
}

/* 繧ｷ繝ｳ繝励Ν縺ｪ繝弱ヶ繧ｹ繧ｿ繧､繝ｫ */
.knob-ctrl {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-light);
    border: 1px solid var(--color-medium);
    position: relative;
    cursor: ew-resize;
}

.knob-ctrl::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    width: 2px;
    height: 6px;
    background: var(--color-dark);
    transform: translateX(-50%);
    transform-origin: bottom center;
}

.channel-strip-track.active .knob-ctrl {
    background: var(--color-medium);
}

.channel-strip-track.active .knob-ctrl::after {
    background: var(--text-light);
}

.knob-label {
    font-size: 7px;
    color: var(--color-medium);
}

.channel-strip-track.active .knob-label {
    color: var(--text-light);
}


/* --- Jukebox Modal (譌｢蟄倥Δ繝ｼ繝€繝ｫ繧ｹ繧ｿ繧､繝ｫ邯呎価) --- */
#song-jukebox-modal .modal-content {
    background: var(--bg-device);
    width: 90%;
    max-width: 360px;
    max-height: 70vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jukebox-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jukebox-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.jukebox-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px;
    background: var(--bg-device);
}

.jukebox-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    gap: 10px;
    cursor: pointer;
    background: transparent;
}

.jukebox-item:active {
    background: rgba(0, 0, 0, 0.05);
}

.jukebox-item.active {
    background: var(--bg-screen);
}

.jukebox-item.active .jukebox-title,
.jukebox-item.active .jukebox-meta {
    color: var(--text-light);
}

.jukebox-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
}

.jukebox-item.active .jukebox-play-btn {
    border-color: var(--text-light);
    color: var(--text-light);
}

.jukebox-info {
    flex-grow: 1;
}

.jukebox-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark);
}

.jukebox-meta {
    font-size: 10px;
    color: var(--color-medium);
}

.jukebox-menu-btn {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--color-medium);
    font-size: 16px;
    cursor: pointer;
}

.jukebox-item.active .jukebox-menu-btn {
    color: var(--text-light);
}

.jukebox-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.jukebox-add-btn {
    padding: 8px 24px;
    background: #ffffff;
    /* 逋ｽ閭梧勹 */
    color: var(--color-medium);
    /* 繧ｰ繝ｬ繝ｼ譁�ｭ� */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.jukebox-add-btn:active {
    background: var(--color-medium);
}

/* JSスケーリングへ移行 */

/* 髻ｳ濶ｲ驕ｸ謚槭Γ繝九Η繝ｼ */
.tone-select-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(43, 44, 49, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 240px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

.tone-menu-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 4px;
}

.tone-menu-btn {
    padding: 12px;
    background: transparent;
    border: 1px solid var(--color-medium);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.tone-menu-btn.active {
    background: var(--color-dark);
    border-color: var(--text-light);
    color: var(--text-light);
    font-weight: 600;
}

.tone-menu-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.tone-menu-close {
    margin-top: 8px;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--color-medium);
    font-size: 12px;
    cursor: pointer;
}

/* ソング名変更ポップアップ */
.song-name-content {
    max-width: 300px;
}

.song-name-error {
    padding: 0 16px 8px;
    color: #d33;
    font-size: 12px;
    text-align: center;
}

.song-name-error.hidden {
    display: none;
}

/* ========================================
   Block Gauge & Toggle Switch
   ======================================== */

/* 繝悶Ο繝�け繧ｲ繝ｼ繧ｸ��5蛟九�繧ｿ繝��蜿ｯ閭ｽ縺ｪ繝悶Ο繝�け�� */
/* ブロックゲージ（5個のタップ可能なブロック） */
.block-gauge {
    display: flex;
    gap: 6px;
    /* 間隔を少し広げる */
    align-items: center;
}

.block-gauge-item {
    width: 14px;
    height: 24px;
    /* 縦長 */
    background: #ffffff;
    border: 2px solid var(--border-color);
    /* スプライト枠と同じ色 */
    border-radius: 0;
    /* 角丸なし */
    cursor: pointer;
    transition: background 0.15s;
}

.block-gauge-item.active {
    background: var(--color-dark);
    /* スイッチON色と統一 */
    border-color: var(--color-dark);
}

.block-gauge-item:hover {
    opacity: 0.8;
    /* シンプルなホバー効果 */
}

.block-gauge-item:hover {
    opacity: 0.8;
    /* シンプルなホバー効果 */
}

.block-gauge-item.active:hover {
    opacity: 1;
    /* アクティブ時は薄くしない */
}

/* SEプレビューボタン */
.se-preview-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--color-medium);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    /* アイコン位置調整 */
    transition: all 0.2s;
}

.se-preview-btn:hover {
    border-color: var(--color-dark);
    color: var(--color-dark);
}

.se-preview-btn:active {
    background: rgba(0, 0, 0, 0.05);
}

.se-row {
    width: 100%;
}

.se-select {
    width: 50%;
    flex: none;
    margin: 0 8px 0 0;
    /* 左マージンを削除して揃える */
}

.se-preview-btn:active {
    background: rgba(0, 0, 0, 0.05);
}

/* スプライトスロットの空状態（+表示） */
.sprite-slot:not(:has(canvas)) {
    position: relative;
}

.sprite-slot:not(:has(canvas))::before {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--border-color);
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    /* 高さのズレを防ぐ */
    padding-bottom: 2px;
    /* 微調整 */
}

/* パラメータ行 統一グリッド内のセル配置 */
.config-card-body .param-row > .block-gauge,
.config-card-body .sprite-row > .block-gauge {
    grid-column: 3;
    justify-self: start;
}

.config-card-body .param-row > .gauge-infinity {
    grid-column: 4;
    justify-self: start;
}

.config-card-body .param-row > .param-select,
.config-card-body .param-row > .param-input,
.config-card-body .param-row > .param-select-with-preview,
.config-card-body .param-row > .range-slider-container {
    grid-column: 2 / -1;
    width: auto;
    justify-self: stretch;
    min-width: 0;
}

.config-card-body .param-row-toggle > .toggle-switch {
    grid-column: 3 / -1;
    justify-self: start;
}

/* dropItem / spawnerEnemy のセレクト+プレビューまとめ */
.param-select-with-preview {
    display: flex;
    align-items: center;
    gap: 6px;
}
.param-select-with-preview .param-select {
    flex: 1;
    width: auto;
    min-width: 0;
}
.param-select-with-preview canvas {
    border: 1px solid #d0d5dd;
    image-rendering: pixelated;
    width: 28px;
    height: 28px;
    background: #fff;
    flex-shrink: 0;
}

/* レンジスライダー（射程距離用） */
.param-row-range {
    align-items: center;
}

.range-slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.range-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.range-value {
    min-width: 32px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
}

.param-label {
    font-size: 12px;
    color: var(--text-dark);
    min-width: 60px;
    flex-shrink: 0;
}

/* 繝医げ繝ｫ繧ｹ繧､繝�メ */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    width: 36px;
    height: 20px;
    background: var(--border-color);
    border-radius: 10px;
    position: relative;
    transition: all 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.toggle-slider {
    background: var(--color-dark);
}

.toggle-switch input:checked+.toggle-slider::before {
    left: 18px;
}

.toggle-label {
    font-size: 11px;
    color: var(--text-dark);
}

.toggle-inline {
    /* margin-left: auto;  <- 右寄せを解除 */
    margin-right: 0;
    margin-left: 12px;
    /* 少しスペースを空ける */
}

/* 繝代Λ繝｡繝ｼ繧ｿ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ */
.param-section-label {
    font-size: 11px;
    color: var(--color-medium);
    margin-top: 8px;
    margin-bottom: 4px;
    padding-top: 8px;
}

/* ========================================
   シェアモーダル拡張
   ======================================== */
.share-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.share-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.share-section h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.share-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--bg-screen);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-dark);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.share-action-btn:active {
    background: var(--border-color);
    transform: translateY(2px);
}

.share-action-btn svg {
    width: 24px;
    height: 24px;
    color: var(--color-medium);
}

.modal-footer.no-border {
    border-top: none;
    padding-top: 0;
}

/* ========================================
   プロジェクトリストモーダル
   ======================================== */
#project-list-scroll {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-screen);
}

.project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    background: white;
}

.project-item:last-child {
    border-bottom: none;
}

.project-item:hover {
    background: #f8f9fa;
}

.project-item.active {
    background: #e6f7ff;
    border-left: 4px solid var(--color-primary);
}

.project-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-name {
    font-weight: bold;
    font-size: 14px;
    color: var(--text-dark);
}

.project-date {
    font-size: 11px;
    color: var(--text-muted);
}

.project-actions {
    display: flex;
    gap: 8px;
}

.project-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
    color: var(--text-dark);
    font-size: 12px;
    cursor: pointer;
}

.project-btn.primary {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.project-btn.danger {
    color: #ff4d4f;
    border-color: #ffccc7;
    background: #fff1f0;
}

/* ========================================
   シンプルUI（ゲーム風 - 画像再現）
   ======================================== */

/* モーダル共通カードスタイル */
.modal-content,
.share-modal-content {
    background: white;
    border-radius: 24px;
    /* 大きめの角丸 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: 32px;
    width: 320px;
    max-width: 90%;
    text-align: center;
    border: none;
    font-family: inherit;
}

/* SHAREモーダルは開くモーダルと同じ幅に統一 */
.share-modal-content {
    width: 320px;
    max-width: 90%;
}

.modal-header-simple,
.modal-title-simple {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 24px;
    color: #666;
}

.modal-title-simple.sub {
    font-size: 20px;
    color: #666 !important;
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 800;
}

/* 入力フィールド */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.simple-input {
    width: 100%;
    background: #d4d4d4;
    /* グレー背景 */
    border: none;
    border-radius: 8px;
    padding: 16px;
    font-size: 18px;
    text-align: center;
    color: #333;
    outline: none;
    font-weight: bold;
    font-family: inherit;
}

/* 新規/リミックスモーダル：タイトル入力とクリエイター入力を離す */
#new-game-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.simple-input:focus {
    background: #ccc;
}

/* エディットキー認証モーダル */
.editkey-hint {
    font-size: 13px;
    color: #555;
    text-align: center;
    white-space: pre-line;
    line-height: 1.5;
}
.editkey-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}
.editkey-input-row .editkey-input {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: 4px;
}
.editkey-paste-btn {
    flex: 0 0 auto;
    width: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #d4d4d4;
    color: #333;
    cursor: pointer;
}
.editkey-paste-btn:hover {
    background: #ccc;
}
.editkey-paste-btn:active {
    background: #bbb;
}
.editkey-paste-btn svg {
    width: 20px;
    height: 20px;
}
.editkey-error {
    color: #d14343;
    font-size: 12px;
    text-align: center;
}
/* 認証ボタンの横幅をキャンセルに揃える */
.editkey-footer .modal-action-btn {
    min-width: 120px;
}

/* 共通確認モーダル内のエディットキー表示 */
.generic-confirm-key {
    margin: 12px 20px;
    padding: 10px 12px;
    background: #e5e7eb;
    color: #333;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    word-break: break-all;
}

/* フッターボタンエリア */
.modal-footer-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.modal-footer-actions.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    justify-items: stretch;
}

.modal-footer-actions.grid-2 .modal-action-btn {
    width: 100%;
    min-width: 0;
}

/* 共通ボタン（ライトグレー角丸・フラット） */
.modal-action-btn {
    padding: 14px 20px;
    border: none;
    border-radius: 30px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    min-width: 80px;
    white-space: nowrap;
    box-shadow: none;
    transition: background 0.15s, transform 0.1s;
    text-align: center;
    font-family: inherit;
}

.modal-action-btn:hover:not(:disabled) {
    background: #d1d5db;
}

.modal-action-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: none;
}

.modal-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.modal-action-btn.primary,
.modal-action-btn.cancel {
    background: #e5e7eb;
    color: #4b5563;
    box-shadow: none;
}

/* SHARE画面のボタンリスト */
.share-simple-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.share-simple-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    background: #666;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 3px 0 #444;
}

.share-simple-btn:hover {
    background: #777;
}

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

.share-simple-btn.primary {
    background: #4a90e2;
    box-shadow: 0 3px 0 #2d5aa0;
}

.share-simple-btn.primary:hover {
    background: #5aa0f2;
}

/* SHARE画面のアイコンボタン（3カラムグリッド） */
.share-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
}

.share-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 4px;
    aspect-ratio: 1 / 1;
    min-width: 0;
    background: #f1f3f5;
    border: none;
    border-radius: 16px;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.05s;
}

.share-icon-btn:hover {
    background: #e5e7eb;
}

.share-icon-btn:active {
    transform: translateY(1px);
}

.share-icon-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #111827;
}

.share-icon-shape svg {
    width: 22px;
    height: 22px;
}

.share-icon-label {
    font-size: 9px;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.35;
    text-align: center;
    word-break: keep-all;
}

/* SHAREモーダルのもどる: 開くモーダルと同じ 2列グリッドで右寄せ */
.share-modal-content .modal-footer-simple {
    margin-top: 4px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.share-modal-content .modal-footer-simple .modal-action-btn.cancel {
    min-width: 140px;
}

/* カラープリセットのフッタ: 開くモーダルと同じ 2列グリッド、とじるは右下 */
.palette-preset-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    justify-items: stretch;
}

.palette-preset-footer .modal-action-btn {
    width: 100%;
    min-width: 0;
}

.palette-preset-footer #preset-close-btn {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    min-width: 120px;
}

/* SHAREモーダル オプションごとのライトグレー背景エリア */
.share-panel-box {
    margin: 8px 0;
    padding: 10px 12px;
    background: #f1f3f5;
    border-radius: 8px;
}

/* SHAREモーダル エディットキー欄 */
.share-editkey-box.hidden {
    display: none;
}

.share-editkey-box .share-panel-desc {
    padding-left: 0;
}

.share-editkey-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.share-editkey-box label[for="share-editkey-value"] {
    flex-shrink: 0;
    cursor: default;
}

.share-editkey-field {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #dcdfe3;
    border-radius: 6px;
    padding: 2px 2px 2px 8px;
}

#share-editkey-value {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #333;
    -webkit-user-select: all;
    user-select: all;
}

.share-editkey-copy-btn {
    background: transparent;
    border: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    flex-shrink: 0;
}

.share-editkey-copy-btn svg {
    width: 60%;
    height: 60%;
}

.share-editkey-copy-btn:hover {
    color: #333;
    background: #f1f3f5;
}

body.dark-mode .share-editkey-label {
    color: #ccc;
}

body.dark-mode .share-editkey-field {
    background: #2a2a2a;
    border-color: #444;
}

body.dark-mode #share-editkey-value {
    color: #e8e8e8;
}

body.dark-mode .share-editkey-copy-btn {
    color: #bbb;
}

body.dark-mode .share-editkey-copy-btn:hover {
    color: #fff;
    background: #3a3a3a;
}

.share-panel-box input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.share-panel-box label[for^="share-"] {
    font-size: 15px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
}

/* アーケード項目内の区切り線（説明文とコメント欄の間） */
.share-panel-divider {
    width: 100%;
    height: 2px;
    margin: 10px auto;
    border: none;
    background: #fff;
}

/* チェック項目の説明文 */
.share-panel-desc {
    margin-top: 4px;
    padding-left: 24px;
    font-size: 11px;
    color: #888;
    text-align: left;
    white-space: pre-line;
    line-height: 1.3;
}

/* 折りたたみ時の高さをリミックスOKパネルと揃える */
.share-panel-box > .setting-row {
    margin-bottom: 0;
}

/* SHAREモーダル内 ARCADE情報エリア（展開時） */
.share-arcade-info {
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    border: none;
}

.share-arcade-info.hidden-slot {
    display: none;
}

/* サムネプレビュー: 上に大きく表示、ボタン: 下に縦並び */
.share-arcade-info .arcade-thumb-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.share-arcade-info #arcade-thumb-preview-wrap {
    width: 160px;
    height: 160px;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
}

.share-arcade-info .arcade-thumb-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.share-arcade-info .arcade-thumb-btns .setting-save-btn {
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
    line-height: 1.3;
    background: #fff;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 999px;
    font-weight: 500;
}

.share-arcade-info .arcade-thumb-btns #arcade-thumb-capture-btn {
    flex: 0 0 auto;
    width: auto;
}

.share-arcade-info .arcade-thumb-btns #arcade-thumb-clear-btn {
    flex: 0 0 auto;
    width: auto;
}

.share-arcade-info .arcade-thumb-btns .setting-save-btn:hover {
    background: #f7f7f7;
}

/* チェックボックス隣接ラベル: 共通設定ラベル(width:90px)を打ち消して、両ラベルの横位置を揃える */
#share-arcade-on + label,
#share-remix-ok + label {
    white-space: nowrap;
    width: auto;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.share-arcade-info label {
    display: block;
    width: auto;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-align: center;
    margin-bottom: 0;
}

.share-arcade-info .setting-row-vertical {
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
}

/* 保存/エクスポート統合モーダル */
.save-as-hint {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    text-align: center;
}

.save-as-export-row {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.save-as-export-link {
    background: none;
    border: none;
    padding: 8px 10px;
    color: #8888aa;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.save-as-export-icon {
    flex-shrink: 0;
}

.save-as-export-link:hover {
    color: #b0b0d0;
}

.save-as-export-link:active {
    color: #ffffff;
}

.share-divider {
    border: none;
    border-top: 2px dashed #ccc;
    margin: 20px 0;
    position: relative;
}

.share-divider::after {
    content: 'データいどう';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0 10px;
    color: #888;
    font-size: 12px;
    font-weight: bold;
}

/* 公開ステータスバッジ */
/* 公開中バッジ+非公開に戻す を横並びに（バッジは中央固定、ボタンはその右） */
.share-status-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.share-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #e8f5e9;
    border: 2px solid #66bb6a;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: bold;
    color: #2e7d32;
    box-sizing: border-box;
}

.share-status.hidden {
    display: none;
}

.share-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #43a047;
    animation: share-pulse 1.6s ease-in-out infinite;
}

@keyframes share-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.share-status-text {
    letter-spacing: 0.04em;
}

/* 非公開に戻すボタン（公開中バッジの右・絶対配置でバッジの中央固定を維持） */
.share-unpublish-btn {
    position: absolute;
    right: 4px;
    bottom: 0;
    padding: 2px 6px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 10px;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.share-unpublish-btn:hover {
    color: #555;
}

.share-unpublish-btn.hidden {
    display: none;
}

/* 公開確認ダイアログ補足テキスト */
.publish-confirm-sub {
    font-size: 13px;
    color: #888;
    margin-top: -12px;
    margin-bottom: 8px;
    text-align: center;
    min-height: 18px;
}

.modal-footer-simple {
    margin-top: 20px;
    text-align: center;
}

.modal-btn-simple.cancel {
    background: #555;
    color: white;
    padding: 8px 24px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 3px 0 #333;
}

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


/* プロジェクトリスト（選択UI） - 強制適用 */
.modal-body.no-padding {
    padding: 0;
    margin: 10px 0;
}

#project-list-scroll.simple-list-scroll {
    height: 280px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* iOS慣性スクロール */
    background: #fff !important;
    /* 背景白 強制 */
    border: 2px solid #ccc !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 20px !important;
}

#project-list-scroll::-webkit-scrollbar {
    width: 6px;
}

#project-list-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

#project-list.selectable-list {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    width: 100%;
}

/* リストアイテム - 詳細度を上げて適用 */
#project-list .list-item {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    /* 白背景 */
    color: #333 !important;
    /* 文字色黒 */
    padding: 12px 16px !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    min-height: 64px !important;
    box-sizing: border-box;
    width: 100%;
    box-shadow: none !important;
}

#project-list .list-item:last-child {
    border-bottom: none !important;
}

#project-list .list-item:hover {
    background: #f9f9f9 !important;
}

#project-list .list-item.selected {
    background: #e0e0e0 !important;
    /* 選択時グレー */
    color: #333 !important;
}

#project-list .list-item .list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
    min-width: 0;
    text-align: left;
}

#project-list .list-item .list-item-name-wrapper {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    height: 22px;
}

#project-list .list-item .list-item-name {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333 !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* スクロールアニメーション（選択中かつオーバーフロー時） */
#project-list .list-item .list-item-name.scrolling {
    text-overflow: clip;
    animation: scroll-left-seq 12s linear infinite;
    padding-left: 0;
}

@keyframes scroll-left-seq {
    0% {
        transform: translateX(0);
    }

    5% {
        transform: translateX(0);
    }

    /* 開始待ち */
    45% {
        transform: translateX(-100%);
        opacity: 1;
    }

    /* 左へ流れる */
    45.1% {
        transform: translateX(100%);
        opacity: 0;
    }

    /* 右へワープ */
    50% {
        transform: translateX(100%);
        opacity: 1;
    }

    /* 右から出現 */
    90% {
        transform: translateX(0);
    }

    /* 定位置に戻る */
    100% {
        transform: translateX(0);
    }

    /* 待機 */
}

#project-list .list-item .list-item-date {
    font-size: 11px !important;
    color: #666 !important;
    margin-top: 0;
    line-height: 1.2;
    font-family: monospace;
    font-weight: normal !important;
    text-align: left;
}

/* SAVEトースト（カスタム） - このまま維持 */
#save-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px 60px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    min-width: 200px;
    white-space: nowrap;
}

#save-toast.visible {
    opacity: 1;
}

#save-toast .save-icon-large {
    font-size: 64px;
    color: #4a4a4a;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

#save-toast .save-msg-large {
    font-size: 20px;
    font-weight: 800;
    color: #222;
}

/* ========================================
   ダークモード（コナミコマンド発動時）
   全画面共通 + 画面別スタイル
   ======================================== */

/* --- 遷移アニメーション --- */
#app,
#header,
.screen,
#controller-area,
#stage-settings-panel,
#stage-settings-header,
#stage-settings-content,
#bgm-console-header,
#tile-config-panel,
#song-config-panel {
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* --- CSS変数オーバーライド（全体） --- */
#app.dark-mode {
    --bg-body: #0a0a0f;
    --bg-device: #0e0e18;
    --color-dark: #2a2a45;
    --color-medium: #5a6070;
    --color-light: #444a5a;
    --text-dark: #c8ccd8;
    --text-light: #e0e4f0;
    --border-color: #252535;
    --border-dark: #303045;
    background: #0a0a0f;
}

/* --- ヘッダー --- */
#app.dark-mode #header {
    background: #0c0c16;
    border-top-color: #1e1e30;
}

#app.dark-mode .toolbar-icon {
    color: #7a8098;
}

#app.dark-mode .toolbar-icon:active {
    background: rgba(255, 255, 255, 0.06);
}

#app.dark-mode .nav-icon {
    color: #8aa0c0;
}

#app.dark-mode .nav-icon.active-nav {
    color: #0a0a0f;
    background: #8aa0c0;
}

#app.dark-mode .icon-label {
    color: inherit;
}

/* --- PLAY画面 --- */
#app.dark-mode #play-screen {
    background: #0a0a0f;
}


#app.dark-mode #game-title {
    color: #d0d4e0;
    text-shadow: 0 0 8px rgba(100, 200, 255, 0.2);
}

#app.dark-mode #game-title:focus {
    background: rgba(255, 255, 255, 0.06);
}

#app.dark-mode #game-author {
    color: #8890b0;
}

#app.dark-mode #game-author:focus {
    background: rgba(255, 255, 255, 0.06);
}

#app.dark-mode #game-likes-count {
    color: #6878a0;
}

#app.dark-mode .like-icon-small,
#app.dark-mode .like-icon-result,
#app.dark-mode .arcade-card-likes img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(10%) saturate(500%) hue-rotate(190deg);
}

#app.dark-mode .result-like-btn {
    border-color: #303050;
    color: #b0b8d0;
}

#app.dark-mode .result-like-btn.liked {
    background: rgba(76, 175, 80, 0.25);
    border-color: #66bb6a;
    color: #81c784;
}

#app.dark-mode #controller-area {
    background: #0a0a0f;
}

#app.dark-mode #dpad-container {
    background: radial-gradient(circle at 35% 35%,
            rgba(40, 40, 55, 0.9) 0%,
            rgba(25, 25, 38, 0.8) 50%,
            rgba(15, 15, 28, 0.7) 100%);
    box-shadow:
        inset 1px 1px 4px rgba(80, 80, 120, 0.15),
        inset -1px -1px 6px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.5);
}

#app.dark-mode .dpad-btn,
#app.dark-mode #dpad::before,
#app.dark-mode #dpad::after {
    background: #2a2a45;
}

#app.dark-mode #dpad {
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6));
}

/* ダークモード時、十字キーの三角シェイプは A/B ボタン文字色に合わせる */
#app.dark-mode #btn-up::after { border-bottom-color: #8090a0; }
#app.dark-mode #btn-down::after { border-top-color: #8090a0; }
#app.dark-mode #btn-left::after { border-right-color: #8090a0; }
#app.dark-mode #btn-right::after { border-left-color: #8090a0; }

#app.dark-mode .action-btn {
    background: #2a2a45;
    color: #8090a0;
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.5),
        0 0 12px rgba(60, 80, 120, 0.12);
}

#app.dark-mode .action-btn:active,
#app.dark-mode .action-btn.pressed {
    box-shadow: none;
}

#app.dark-mode #btn-start {
    background: #2a2a45;
    color: #8090a0;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

#app.dark-mode #btn-start:active,
#app.dark-mode #btn-start.pressed {
    box-shadow: none;
}

#app.dark-mode #result-overlay {
    background: rgba(0, 0, 0, 0.85);
}

#app.dark-mode .result-container {
    background: #14142a;
    border-color: #303050;
}

#app.dark-mode .result-btn {
    border-color: #303050;
    color: #b0b8d0;
}

#app.dark-mode .result-btn:active {
    background: rgba(255, 255, 255, 0.05);
}

/* --- PIXEL画面 --- */
#app.dark-mode #paint-screen {
    background: #0e0e18;
}

#app.dark-mode #paint-content-wrapper,
#app.dark-mode #stage-content-wrapper {
    background: #0e0e18;
}

/* ギャラリー行（スプライト/タイル一覧） */
#app.dark-mode .gallery-row {
    background: #12122a;
    border-color: #252535;
}

#app.dark-mode .gallery-add-btn {
    background: #1a1a2e;
    border-color: #303048;
    color: #6a7090;
}

#app.dark-mode .gallery-add-btn:active {
    background: #222240;
}

/* スプライトリスト */
#app.dark-mode .sprite-item,
#app.dark-mode .tile-item,
#app.dark-mode .song-item {
    border-color: #303048;
    background: var(--bg-screen);
}

#app.dark-mode .sprite-item.active,
#app.dark-mode .tile-item.active,
#app.dark-mode .song-item.active {
    border-color: #6080b0;
}

/* ツールバー（ペン等） */
#app.dark-mode .paint-tool-btn {
    background: transparent;
    color: #5a6078;
    border-color: #303048;
}

#app.dark-mode .paint-tool-btn.active {
    background: #2a2a45;
    color: #a0b0d0;
    border-radius: 6px;
}

#app.dark-mode .paint-tool-btn:active {
    background: #222240;
}

/* カラーパレット */
#app.dark-mode #color-area {
    background: #12122a;
}

/* プレビューエリア */
#app.dark-mode #preview-title,
#app.dark-mode #preview-body {
    background: #12122a;
}

#app.dark-mode #preview-title {
    color: #b0b8d0;
    border-bottom-color: #252540;
}

#app.dark-mode .color-swatch {
    border-color: #303048;
}

#app.dark-mode .color-swatch.active {
    border-color: #6080b0;
}

/* --- STAGE画面 --- */
#app.dark-mode #stage-screen {
    background: #0e0e18;
}

#app.dark-mode #stage-settings-panel {
    background: #12122a;
    border-bottom-color: #252540;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#app.dark-mode #stage-settings-header {
    background: #12122a;
    color: #b0b8d0;
}

#app.dark-mode #stage-settings-panel.collapsed {
    box-shadow: none;
}

#app.dark-mode #stage-settings-content .setting-group {
    background: #1a1a30;
    border-color: #2a2a45;
    box-shadow: none;
}

#app.dark-mode .setting-group-header {
    border-bottom-color: #2a2a45;
}

#app.dark-mode .setting-group-label {
    color: #a0b0d0;
}

#app.dark-mode #stage-settings-content {
    background: #12122a;
}

#app.dark-mode .setting-row label {
    color: #8890a8;
}

#app.dark-mode .setting-row input[type="text"],
#app.dark-mode .setting-row select {
    background: #1a1a30;
    color: #c0c8e0;
    border-color: #303050;
}

#app.dark-mode .setting-row input[type="text"]:focus {
    border-color: #5070a0;
}

#app.dark-mode .size-btn {
    background: #1a1a30;
    color: #8090b0;
    border-color: #303050;
}

#app.dark-mode .size-btn:active {
    background: #252545;
}

/* ステージ用ツールバー */
#app.dark-mode .stage-tool-btn {
    color: #506078;
    border-color: #303048;
}

#app.dark-mode .stage-tool-btn.active {
    background: #2a2a45;
    color: #a0b0d0;
    border-radius: 6px;
}

/* タイル設定パネル */
#app.dark-mode #tile-config-panel {
    background: #12122a;
}

#app.dark-mode #tile-config-header {
    background: #12122a;
    border-bottom-color: #252540;
}

#app.dark-mode #tile-area {
    border-bottom-color: #252540;
}

#app.dark-mode .config-card {
    background: #1a1a30;
    border-color: #2a2a45;
    box-shadow: none;
}

#app.dark-mode .config-card-label {
    color: #a0b0d0;
    border-bottom-color: #2a2a45;
}

#app.dark-mode .param-select-with-preview canvas {
    border-color: #2a2a45;
    background: #0d0d1c;
}

#app.dark-mode #tile-config-grabber {
    background: #444a5a;
    opacity: 0.7;
}

#app.dark-mode .config-row label {
    color: #8890a8;
}

#app.dark-mode .config-type-label {
    color: #a0a8c0;
    border-bottom-color: #303050;
}

#app.dark-mode .config-select {
    background: #1a1a30;
    color: #c0c8e0;
    border-color: #303050;
}

#app.dark-mode .config-save-btn {
    background: #2a2a45;
    color: #ffffff;
}

/* --- SONG画面 --- */
#app.dark-mode #sound-screen {
    background: #0e0e18;
}

/* BGMコンソールヘッダー */
#app.dark-mode #bgm-console-header {
    background: #12122a;
}

#app.dark-mode .song-title-wrap {
    background: rgba(255, 255, 255, 0.05);
}

#app.dark-mode #bgm-console-header .console-nav-btn {
    background: transparent;
}

#app.dark-mode #bgm-console-header .value-lcd {
    background: rgba(255, 255, 255, 0.04);
}

#app.dark-mode .song-select-dropdown {
    background: #1a1a2e;
    border-color: #252535;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#app.dark-mode .song-select-item {
    color: #a0a8c0;
}

#app.dark-mode .song-select-item:hover,
#app.dark-mode .song-select-item:active {
    background: #252545;
}

#app.dark-mode .song-select-item.active {
    background: #2a2a45;
}

#app.dark-mode .console-lcd {
    color: #a0a8c0;
}

#app.dark-mode .title-lcd {
    color: #c0c8e0;
    background: rgba(255, 255, 255, 0.05);
}

#app.dark-mode .title-lcd:active {
    background: rgba(255, 255, 255, 0.08);
}

#app.dark-mode .console-nav-btn {
    border-color: #303050;
    color: #7080a0;
}

#app.dark-mode .console-nav-btn:active {
    background: rgba(255, 255, 255, 0.06);
}

#app.dark-mode .console-param .label {
    color: #506080;
}

#app.dark-mode .value-lcd {
    color: #a0b0d0;
    background: rgba(255, 255, 255, 0.04);
}

/* トラックパネル */
#app.dark-mode #track-panel {
    border-bottom-color: #252540;
    background: #0e0e18;
}

#app.dark-mode .track-tab {
    background: #14142a;
    color: #8090a8;
    border-color: #303050;
}

#app.dark-mode .track-tab.active {
    background: #2a4838;
    color: #c0e0d0;
    border-color: #4a7c59;
}

/* サウンドコントロール（左ツール列） */
#app.dark-mode .sound-ctrl-btn {
    background: transparent;
    color: #5a6078;
    border-color: #303048;
}

#app.dark-mode .sound-ctrl-btn.active,
#app.dark-mode .sound-ctrl-btn:active {
    background: #2a2a45;
    color: #a0b0d0;
    border-radius: 6px;
}

/* ピアノロール下部ボタンバー */
#app.dark-mode #sound-bottom-bar {
    background: #0e0e18;
}

#app.dark-mode .sound-bottom-btn {
    background: #2a2a40;
    color: #8090a0;
}

#app.dark-mode .sound-bottom-btn:active {
    background: #3a3a55;
}

#app.dark-mode .sound-bottom-btn.play-stop {
    background: #22b14c;
    color: #0e3a1c;
}

#app.dark-mode .sound-bottom-btn.step-rec {
    background: #3a3a50;
    color: #8888a0;
}

#app.dark-mode .sound-bottom-btn.step-rec.active {
    background: #cc3333;
    color: #fff;
}

/* メインエリア背景 */
#app.dark-mode #sound-main-area {
    background: #0e0e18;
}

/* ソング設定パネル */
#app.dark-mode #song-config-panel {
    background: #12122a;
    border-top-color: #252540;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.6);
}

#app.dark-mode #song-config-panel .config-header {
    background: #12122a;
    border-bottom-color: #252540;
    color: #b0b8d0;
}

#app.dark-mode #song-config-panel .header-btn {
    background: #1a1a30;
    border-color: #303050;
    color: #8090b0;
}

#app.dark-mode #song-config-panel .config-row label {
    color: #8890a8;
}

#app.dark-mode #song-config-panel .config-row input[type="text"] {
    background: #1a1a30;
    color: #c0c8e0;
    border-color: #303050;
}

#app.dark-mode #song-config-panel .stepper-btn {
    background: #1a1a30;
    border-color: #303050;
    color: #8090b0;
}


/* パネル閉じるボタン */
#app.dark-mode .panel-close-btn {
    color: #6a7090;
}

/* パラメータスライダー */
#app.dark-mode .param-slider {
    background: #252540;
}

#app.dark-mode .param-slider::-webkit-slider-thumb {
    background: #4060a0;
}

#app.dark-mode .sprite-speed {
    background: #252540;
}

#app.dark-mode .sprite-speed::-webkit-slider-thumb {
    background: #4060a0;
}

/* セーブトースト */
#app.dark-mode #save-toast {
    background: rgba(14, 14, 24, 0.95);
}

#app.dark-mode #save-toast .save-icon-large {
    color: #6080a0;
}

#app.dark-mode #save-toast .save-msg-large {
    color: #c0c8e0;
}

/* スクロールバー */
#app.dark-mode ::-webkit-scrollbar-track {
    background: #0e0e18;
}

#app.dark-mode ::-webkit-scrollbar-thumb {
    background: #252540;
}

/* --- PLAYアイコン内の十字・丸の色制御（アクティブ時は反転色に合わせる） --- */
.play-icon-detail {
    fill: white;
}

.nav-icon.active-nav .play-icon-detail {
    fill: var(--color-dark);
}

#app.dark-mode .play-icon-detail {
    fill: #0c0c16;
}

#app.dark-mode .nav-icon.active-nav .play-icon-detail {
    fill: #8aa0c0;
}

/* --- ARCADEアイコン内のラベル穴の色制御 --- */
.arcade-icon-detail {
    fill: white;
}

.nav-icon.active-nav .arcade-icon-detail {
    fill: var(--color-dark);
}

#app.dark-mode .arcade-icon-detail {
    fill: #0c0c16;
}

#app.dark-mode .nav-icon.active-nav .arcade-icon-detail {
    fill: #8aa0c0;
}

/* --- STAGE画面: BGM選択ボタン・制限時間入力・設定selectのダークモード --- */
#app.dark-mode .bgm-select-btn {
    background: #1a1a30;
    color: #c0c8e0;
    border-color: #303050;
}

#app.dark-mode .bgm-select-btn:hover {
    border-color: #5070a0;
}

#app.dark-mode .time-control input[type="number"] {
    background: #1a1a30;
    color: #c0c8e0;
    border-color: #303050;
}

#app.dark-mode .time-control span {
    color: #7080a0;
}

#app.dark-mode .setting-select {
    background: #1a1a30;
    color: #c0c8e0;
    border-color: #303050;
}

#app.dark-mode .bgm-label {
    color: #7080a0;
}

/* --- ゲージ（5個）: active=明るく / 非active=暗く --- */
#app.dark-mode .block-gauge-item {
    background: #1a1a30;
    border-color: #303050;
}

#app.dark-mode .block-gauge-item.active {
    background: #5080c0;
    border-color: #5080c0;
}

/* --- トグルスイッチ: ON=明るく --- */
#app.dark-mode .toggle-slider {
    background: #252540;
}

#app.dark-mode .toggle-slider::before {
    background: #606880;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#app.dark-mode .toggle-switch input:checked+.toggle-slider {
    background: #4080c0;
}

#app.dark-mode .toggle-switch input:checked+.toggle-slider::before {
    background: #e0e8f0;
    box-shadow: 0 0 6px rgba(64, 128, 192, 0.4);
}

#app.dark-mode .toggle-label {
    color: #8890a8;
}

/* --- 保存ボタン文字: 白 --- */
#app.dark-mode .setting-save-btn {
    background: #2a2a45;
    color: #ffffff;
}

/* --- 設定モーダル（プレイヤー/てき/ブロック/アイテム）--- */
/* ※モーダルは #app の外に配置されるため body.dark-mode を使用 */
body.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.75);
}

body.dark-mode .modal-content {
    background: #14142a;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-header {
    background: #1e1e38;
    color: #c0c8e0;
}

body.dark-mode .modal-body {
    background: #14142a;
    color: #b0b8d0;
}

body.dark-mode .modal-footer {
    background: #14142a;
    border-top-color: #252540;
}

body.dark-mode .modal-btn.ok-btn {
    background: #2a2a45;
    color: #ffffff;
}

body.dark-mode .modal-btn.cancel-btn {
    background: transparent;
    border-color: #303050;
    color: #8890a8;
}

/* スプライト登録枠（未登録時） */
body.dark-mode .sprite-select-btn {
    background: #1a1a30;
    border-color: #303050;
    color: #506080;
}

body.dark-mode .sprite-select-btn.has-sprite {
    border-color: #4060a0;
}

body.dark-mode .sprite-drop-slot {
    background: #1a1a30;
    border-color: #303050;
}

body.dark-mode .sprite-drop-slot.has-sprite {
    border-color: #4060a0;
}

body.dark-mode .slot-placeholder {
    color: #506080;
}

/* stage-editor.js用のスプライトスロット */
body.dark-mode .sprite-slot {
    background: #1a1a30;
    border-color: #303050;
}

body.dark-mode .sprite-slot:not(:has(canvas))::before {
    color: #506080;
}

/* 軌道などの選択欄（config-select / param-select） */
body.dark-mode .config-select,
body.dark-mode .param-select,
body.dark-mode .param-input {
    background: #1a1a30;
    color: #c0c8e0;
    border-color: #303050;
}

body.dark-mode .config-select option,
body.dark-mode .param-select option {
    background: #1a1a30;
    color: #c0c8e0;
}

/* SE選択欄（selectタグ .se-select / se-select-btn） */
body.dark-mode .se-select,
body.dark-mode .se-select-btn {
    background: #1a1a30;
    color: #c0c8e0;
    border-color: #303050;
}

body.dark-mode .se-select option {
    background: #1a1a30;
    color: #c0c8e0;
}

/* SEプレビューボタン */
body.dark-mode .se-preview-btn {
    background: #1a1a30;
    border-color: #303050;
    color: #7080a0;
}

body.dark-mode .se-preview-btn:hover {
    border-color: #5070a0;
    color: #a0b0d0;
}

body.dark-mode .se-preview-btn:active {
    background: #252545;
}

/* 効果音ボタン */
body.dark-mode .sound-btn {
    background: #1a1a30;
    border-color: #303050;
    color: #8090a8;
}

body.dark-mode .sound-btn:active {
    background: #2a2a45;
    color: #c0d0f0;
}

body.dark-mode .sound-btn.has-sound {
    background: #2a4860;
    color: #c0e0ff;
    border-color: #3a6890;
}

/* ラジオグループ */
body.dark-mode .radio-group label {
    color: #a0a8c0;
}

/* チェックボックスラベル */
body.dark-mode .checkbox-label {
    color: #a0a8c0;
}

/* 設定ラベル */
body.dark-mode .config-label {
    color: #8890a8;
}

/* アニメーショングリッドのラベル */
body.dark-mode .anim-item span {
    color: #7080a0;
}

/* タイル設定パネルの「保存」ボタン（config-btn.primary） */
body.dark-mode .config-btn {
    background: #1a1a30;
    border-color: #303050;
    color: #8090b0;
}

body.dark-mode .config-btn.primary {
    background: #2a2a45;
    color: #ffffff;
    border-color: #3a3a5a;
}

body.dark-mode .config-btn:active {
    background: #2a2a45;
    color: #c0d0f0;
}

/* タイル設定パネルの保存ボタン（config-save-btn）- 文字を白に */
body.dark-mode .config-save-btn {
    background: #2a2a45;
    color: #ffffff;
}

/* 設定セクション区切り */
body.dark-mode .config-section {
    border-color: #252540;
}

/* パラメータ行のラベル */
body.dark-mode .param-label {
    color: #8890a8;
}

/* パラメータ値表示 */
body.dark-mode .param-value {
    color: #a0b0d0;
}

/* パラメータセクションラベル */
body.dark-mode .param-section-label {
    color: #506080;
    border-top-color: #252540;
}

/* SE行のセクションラベル */
body.dark-mode .se-section-label {
    color: #506080;
    border-bottom-color: #252540;
}

/* シェアモーダル */
body.dark-mode .share-modal-content {
    background: #14142a;
}

body.dark-mode .share-modal-content h3 {
    color: #b0b8d0;
}

body.dark-mode .share-icon-btn {
    background: #1e1e38;
    color: #d0d4e8;
}

body.dark-mode .share-icon-btn:hover {
    background: #272748;
}

body.dark-mode .modal-action-btn,
body.dark-mode .modal-action-btn.primary,
body.dark-mode .modal-action-btn.cancel {
    background: #272748;
    color: #b0b8d0;
}

body.dark-mode .modal-action-btn:hover:not(:disabled) {
    background: #303050;
}

body.dark-mode .share-icon-shape {
    color: #e8eaf6;
}

body.dark-mode .share-icon-label {
    color: #b0b8d0;
}

/* ポップアップ（スプライト選択・SE選択 — #app外） */
body.dark-mode .popup-overlay {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .popup-content {
    background: #14142a;
    border-color: #303050;
}

body.dark-mode .popup-header {
    background: #1a1a30;
    color: #b0b8d0;
    border-bottom-color: #252540;
}

body.dark-mode .popup-btn {
    border-color: #303050;
    color: #8090b0;
}

body.dark-mode .popup-btn.primary {
    background: #2a2a45;
    color: #c0d0f0;
}

body.dark-mode .popup-close {
    color: #6a7090;
}

body.dark-mode .se-select-item {
    border-bottom-color: #252540;
    color: #b0b8d0;
}

body.dark-mode .se-select-item.current {
    background: #1a1a35;
}

body.dark-mode .se-select-item .se-name {
    color: #c0c8e0;
}

/* ========================================
   数値コピー＆ペースト ポップアップ
   ======================================== */

.numcopy-section {
    margin-bottom: 12px;
}

.numcopy-section:last-child {
    margin-bottom: 0;
}

.numcopy-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
}

.numcopy-track-btns {
    display: flex;
    gap: 6px;
}

.numcopy-track-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f5f5f5;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.numcopy-track-btn.active {
    background: var(--color-dark, #4a4a4a);
    color: #fff;
    border-color: var(--color-dark, #4a4a4a);
}

.numcopy-all-btn {
    font-size: 11px;
}

.numcopy-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.numcopy-drag-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 6px 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    font-family: monospace;
    color: var(--text-dark, #333);
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.numcopy-separator {
    font-size: 14px;
    color: #888;
}

.numcopy-unit {
    font-size: 11px;
    font-weight: 600;
    color: #888;
}

/* ダークモード */
body.dark-mode .numcopy-label {
    color: #8888aa;
}

body.dark-mode .numcopy-track-btn {
    background: #2a2a44;
    border-color: #444466;
    color: #8888aa;
}

body.dark-mode .numcopy-track-btn.active {
    background: #5566cc;
    border-color: #5566cc;
    color: #fff;
}

body.dark-mode .numcopy-drag-value {
    background: #1a1a2e;
    border-color: #444466;
    color: #e0e0f0;
}

body.dark-mode .numcopy-separator,
body.dark-mode .numcopy-unit {
    color: #8888aa;
}

/* 外部余白の塗りつぶし */
body.dark-mode {
    background-color: #000000 !important;
}

/* ========================================
   PLAY画面 横向きレイアウト（スマホのみ）
   landscape-play クラスは JS で付与/除去
   ======================================== */

/* アプリ全体: safe-area top パディングを除去してキャンバスエリアを最大化 */
#app.landscape-play {
    padding-top: 0;
}

#app.landscape-play #play-screen {
    flex-direction: row;
    position: relative;
    overflow: hidden;
}

/* キャンバスエリア: 左右コントローラー分のパディングで中央に確保 */
#app.landscape-play #game-viewport {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px
        calc(165px + env(safe-area-inset-right, 0px))
        0
        calc(165px + env(safe-area-inset-left, 0px));
}

/* キャンバス: 高さ基準で正方形を維持 */
#app.landscape-play #game-canvas {
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
}

/* タイトル画面 UI: キャンバスと同じ正方形エリアに収める
   （縦向き時は #game-viewport = canvas だが、横向きは左右にコントローラー用のpaddingが入るため
   そのまま inset:0 だとUIが左右に広がり、remix情報などが canvas から外れる） */
#app.landscape-play #push-start-ui {
    top: 10px;
    bottom: 0;
    left: 50%;
    right: auto;
    width: auto;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
}

/* コントローラーエリア: 全体オーバーレイに変換 */
#app.landscape-play #controller-area {
    position: absolute;
    inset: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
}

/* 十字キー（左）とA/Bボタン（右）を画面端から端に配置 */
#app.landscape-play #controls-row {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    left: max(env(safe-area-inset-left, 0px), 8px);
    right: max(env(safe-area-inset-right, 0px), 8px);
    width: auto;
    align-items: center;
    pointer-events: none;
}

#app.landscape-play #dpad-container,
#app.landscape-play #action-btns-container {
    pointer-events: auto;
}

/* STARTボタン: 右下固定 */
#app.landscape-play #start-btn-container {
    position: absolute;
    right: max(env(safe-area-inset-right, 0px), 10px);
    bottom: 12px;
    padding: 0;
    pointer-events: auto;
}

/* A/Bボタン: 表示位置のみ20px下方向にシフト（::beforeで判定エリアを元位置に補正） */
#app.landscape-play #btn-a {
    top: 20px;
}

#app.landscape-play #btn-a::before {
    top: -20px; /* ボタンが20px下がった分を相殺して判定エリアを元位置に保つ */
}

#app.landscape-play #btn-b {
    bottom: 20px; /* 40px→20px でボタンを20px下方向へ */
}

#app.landscape-play #btn-b::before {
    top: -50px;  /* -30px から -20px 補正 */
    bottom: -30px; /* -50px から +20px 補正 */
}

/* フッター: 区切り線を左右分割・中央は開放 / アイコン余白を左右端から1個分確保 */
#app.landscape-play #header {
    border-top: none;
    position: relative;
    padding-left: 34px;
    padding-right: 34px;
}

#app.landscape-play #header::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: calc(195px + env(safe-area-inset-left, 0px));
    height: 1px;
    background: var(--border-color);
}

#app.landscape-play #header::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 0;
    width: calc(195px + env(safe-area-inset-right, 0px));
    height: 1px;
    background: var(--border-color);
}

/* ----------------------------------------
   リザルト画面: 横向き時のサイズ縮小 + コンテナ内スクロール
   ・オーバーレイは中央固定（スクロールしない）
   ・コンテンツが溢れる場合のみコンテナが内部スクロール
   ---------------------------------------- */
#app.landscape-play #result-overlay {
    align-items: center;
    overflow: hidden;
}

#app.landscape-play .result-container {
    padding: 10px 16px;
    gap: 6px;
    /* play-screen高さ(dvh-44px) から上下余白8px×2を引いた最大高さ */
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
    overscroll-behavior: contain;      /* 親へのスクロール伝播を抑止 */
    touch-action: pan-y;               /* 縦スクロールジェスチャーを明示的に許可 */
}

#app.landscape-play #result-game-info {
    margin-bottom: 0;
    padding-bottom: 3px;
}

#app.landscape-play #result-game-title {
    font-size: 12px;
}

#app.landscape-play #result-game-author {
    font-size: 10px;
    margin-bottom: 2px;
}

#app.landscape-play #result-title {
    font-size: 16px;
    letter-spacing: -1px;
}

#app.landscape-play .result-label {
    font-size: 10px;
}

#app.landscape-play #result-score-container {
    gap: 4px;
}

#app.landscape-play .result-score-row {
    gap: 1px;
}

#app.landscape-play #result-score-value {
    font-size: 24px;
}

#app.landscape-play #result-highscore-value {
    font-size: 14px;
}

#app.landscape-play #result-like-area {
    margin-bottom: 0;
}

#app.landscape-play .result-like-btn {
    padding: 6px 16px;
    font-size: 13px;
}

#app.landscape-play .like-icon-result {
    width: 17px;
    height: 17px;
}

#app.landscape-play .result-actions {
    gap: 5px;
}

#app.landscape-play .result-btn {
    padding: 7px;
    font-size: 13px;
}

/* ========== ARCADE 登録情報パネル ========== */
#arcade-comment-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 44px;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.5;
    padding: 4px 6px;
    border: 1px solid #999;
    border-radius: 6px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#arcade-comment-input:focus {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 1px #2563eb;
}

/* ========== ARCADE 画面 ========== */
#arcade-screen {
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: none;
    background: #eef1f5;
}

#arcade-container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 12px 80px;
    box-sizing: border-box;
}

#arcade-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 4px 12px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 12px;
}

#arcade-search-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

#arcade-search-input {
    flex: 1 1 auto;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #999;
    border-radius: 6px;
    min-width: 0;
}

#arcade-refresh-btn {
    background: #eee;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #333;
}

#arcade-refresh-btn:hover {
    background: #ddd;
}

#arcade-filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    flex-wrap: wrap;
}

#arcade-filter-row label {
    display: flex;
    gap: 4px;
    align-items: center;
}

#arcade-sort-select {
    padding: 3px 6px;
    font-size: 12px;
}

.arcade-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #333;
    color: #fff;
    border-radius: 12px;
    font-size: 11px;
}

.arcade-chip button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}

#arcade-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#arcade-empty,
#arcade-loading {
    padding: 40px 0;
    text-align: center;
    color: #888;
    font-size: 13px;
}


.arcade-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px;
    padding-right: 78px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-size: 11px;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.arcade-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

.arcade-card-thumb {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    background: #222;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 9px;
    image-rendering: pixelated;
}

.arcade-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.arcade-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.arcade-card-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: #111827;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.arcade-card-creator {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.2;
    min-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 60%;
}

.arcade-card-creator.clickable {
    cursor: pointer;
}

.arcade-card-creator.clickable:hover {
    text-decoration: underline;
    color: #4b5563;
}

.arcade-remixtag {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #12b76a;
    border: 1px solid #12b76a;
    font-size: 10px;
    font-weight: 500;
    padding: 0 5px;
    border-radius: 999px;
    line-height: 1.3;
    flex: 0 0 auto;
}

.arcade-card-comment {
    color: #6b7280;
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: 15px;
}

.arcade-card-likes {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.arcade-card-likes img {
    width: 13px;
    height: 13px;
}

.arcade-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
}

.arcade-play-btn:hover {
    background: #1d4ed8;
}

.arcade-card-play {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* ========== ARCADE 詳細モーダル ========== */
#arcade-detail-modal .modal-content {
    position: relative;
    width: 300px;
    max-width: 90vw;
}

#arcade-detail-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
}

#arcade-detail-thumb {
    width: 160px;
    height: 160px;
    max-width: 100%;
    image-rendering: pixelated;
    background: #222;
    border-radius: 10px;
    display: block;
}

#arcade-detail-title {
    font-weight: 700;
    font-size: 17px;
    color: #111827;
    text-align: center;
    margin-top: 4px;
}

#arcade-detail-creator {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

#arcade-detail-comment {
    color: #4b5563;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    max-width: 260px;
    white-space: pre-wrap;
    word-break: break-word;
}

#arcade-detail-remix-source {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    max-width: 260px;
    padding: 6px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 10px;
    color: #6b7280;
    box-sizing: border-box;
}

.arcade-detail-remix-label {
    color: #4b5563;
}

.arcade-detail-remix-sep {
    color: #374151;
}

#arcade-detail-remix-title,
#arcade-detail-remix-author {
    color: #374151;
    word-break: break-word;
}

#arcade-detail-likes {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

#arcade-detail-likes img {
    width: 16px;
    height: 16px;
}

#arcade-detail-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 260px;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.arcade-play-btn-large {
    gap: 8px;
    padding: 12px 36px;
    font-size: 15px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4);
}

.arcade-play-btn-large:hover {
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
}

.arcade-detail-close-x {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    color: #9ca3af;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.arcade-detail-close-x:hover {
    background: #f3f4f6;
    color: #4b5563;
}

/* ============================================================
   リザルト画面: レトロゲーム風ウィンドウ
   背景黒 / 白ピクセル枠 / Press Start 2P フォント統一
   ============================================================ */
#result-overlay {
    background: rgba(0, 0, 0, 0.75);
}

.result-container,
#app.dark-mode .result-container {
    background: #000;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 12px;
    box-shadow: none;
    image-rendering: pixelated;
    padding: 18px 16px;
    gap: 12px;
    width: 88%;
    max-width: 320px;
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    letter-spacing: 0;
}

/* 上部: ゲーム情報ブロック（タイトル / 作者 / Remix / いいね） */
#result-game-info {
    border-bottom: 2px dashed #888;
    margin-bottom: 2px;
    padding-bottom: 10px;
    color: #fff;
}

#result-game-title {
    font-family: 'BIZ UDPGothic', 'Press Start 2P', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
}

#result-game-author {
    font-family: 'BIZ UDPGothic', sans-serif;
    font-size: 11px;
    color: #cfcfcf;
    margin-bottom: 4px;
}

#result-remix-info,
#result-remix-info .remix-link {
    font-family: 'BIZ UDPGothic', sans-serif;
    font-size: 10px;
    color: #a0a0a0;
}

#result-remix-info .remix-link { text-decoration: underline; }

/* いいねボタン（情報ブロック内） */
#result-like-area { margin: 8px 0 0; }
#app.dark-mode .result-like-btn,
.result-like-btn {
    background: transparent;
    border: 2px solid #888;
    color: #aaa;
    border-radius: 999px;
    padding: 4px 14px;
    font-family: 'BIZ UDPGothic', sans-serif;
    font-size: 12px;
}
.result-like-btn.liked,
#app.dark-mode .result-like-btn.liked {
    background: #1a3a1a;
    border-color: #4caf50;
    color: #7ed47e;
}
.like-icon-result {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(70%);
}
.result-like-btn.liked .like-icon-result {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(500%) hue-rotate(100deg);
}
.result-like-count {
    display: inline-block;
    line-height: 1;
    transform: translateY(1px);
}

/* タイトル (GAME OVER / STAGE CLEAR) */
#result-title {
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    font-size: 22px;
    color: #fff;
    letter-spacing: 1px;
    margin: 18px 0 0;
    text-shadow: 2px 2px 0 #000;
}
#result-title.rainbow { font-size: 20px; padding-left: 0; }

/* スコアブロック: SCORE / 値 / HiSCORE行 すべて同じピクセルフォント */
#result-score-container { gap: 6px; }

.result-score-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.result-score-row.small { opacity: 1; transform: none; }

.result-label,
#result-score-value,
#result-highscore-value,
.result-highscore-name {
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    color: #fff;
    -webkit-text-stroke: 0;
    letter-spacing: 1px;
}

.result-label { font-size: 11px; color: #cfcfcf; font-weight: 400; }
#result-score-value { font-size: 22px; font-weight: 400; margin-top: 2px; }

/* HiSCORE は 1 行で横並び（ラベル / 値 / ネーム） */
.result-score-row.hiscore-row {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    font-size: 9px;
    opacity: 0.9;
}
.result-score-row.hiscore-row .result-label,
.result-score-row.hiscore-row #result-highscore-value,
.result-score-row.hiscore-row .result-highscore-name {
    font-size: 9px;
}

/* アクションボタン: カプセル型・固定サイズ */
.result-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.result-btn,
#app.dark-mode .result-btn {
    width: 260px;
    padding: 12px 0;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #000;
    color: #fff;
    font-family: 'BIZ UDPGothic', 'Press Start 2P', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.result-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.result-btn-icon-detail {
    fill: #000;
}
.result-btn:active .result-btn-icon-detail {
    fill: #fff;
}
.result-btn:hover,
#app.dark-mode .result-btn:hover {
    background: #2a2a2a;
    color: #fff;
}
.result-btn:active,
#app.dark-mode .result-btn:active {
    background: #fff;
    color: #000;
    transform: scale(0.97);
}

/* 横向きプレイ時の縮小 */
#app.landscape-play .result-container {
    padding: 10px 12px;
    gap: 6px;
}
#app.landscape-play #result-title { font-size: 16px; }
#app.landscape-play #result-score-value { font-size: 18px; }
#app.landscape-play #result-highscore-value,
#app.landscape-play .result-score-row.hiscore-row .result-label,
#app.landscape-play .result-score-row.hiscore-row .result-highscore-name { font-size: 10px; }
#app.landscape-play .result-btn { width: 230px; padding: 9px 0; font-size: 13px; }

/* ============================================================
   NEW RECORD モーダル: レトロゲーム風
   ============================================================ */
.modal-content.retro-modal,
body.dark-mode .modal-content.retro-modal {
    background: #000;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 12px;
    box-shadow: none;
    padding: 20px 18px;
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    max-width: 320px;
    width: 88%;
}

.retro-modal .highscore-title,
.retro-modal.modal-content .modal-header-simple.highscore-title {
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    font-size: 20px;
    color: #fff;
    letter-spacing: 1px;
    animation: none;
    text-shadow: 2px 2px 0 #000;
    margin-bottom: 14px;
    white-space: nowrap;
    word-spacing: 0.25em;
}

.retro-modal .highscore-body {
    padding: 4px 0 10px;
}

.retro-modal .highscore-score-row {
    gap: 2px;
    margin-bottom: 20px;
}

.retro-modal .highscore-score-label {
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    font-size: 11px;
    color: #cfcfcf;
    letter-spacing: 1px;
}

.retro-modal .highscore-score-value {
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    font-size: 22px;
    color: #fff;
    -webkit-text-stroke: 0;
    margin-top: 2px;
}

.retro-modal .highscore-name-hint {
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    font-size: 11px;
    color: #cfcfcf;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* 3スロット表示 + 透明input重ね */
.retro-modal .highscore-name-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.retro-modal .highscore-slots {
    display: flex;
    gap: 18px;
    justify-content: center;
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    font-size: 28px;
    color: #fff;
    letter-spacing: 0;
    line-height: 1;
}

.retro-modal .highscore-slots .slot {
    width: 24px;
    text-align: center;
    display: inline-block;
}

.retro-modal .highscore-slots .slot.blink {
    animation: hiscore-slot-blink 0.6s steps(1) infinite;
}

@keyframes hiscore-slot-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 入力欄本体はスロットの上に重ねる（iOS で auto-focus を有効にするため opacity:0 は使わず
   color/caret/background のみ透明化し、要素自体は「見える」状態にする） */
.retro-modal .highscore-name-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    color: transparent;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    font-size: 28px;
    caret-color: transparent;
    padding: 0;
    letter-spacing: 18px;
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.retro-modal .highscore-slots.shake {
    animation: hiscore-slot-shake 0.3s linear;
}

@keyframes hiscore-slot-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.retro-modal .highscore-no-badge {
    background: transparent;
    color: #ff5566;
    font-family: 'Press Start 2P', 'BIZ UDPGothic', monospace;
    font-size: 18px;
    border: 2px solid #ff5566;
    padding: 4px 12px;
    border-radius: 6px;
    margin-top: 6px;
}

/* フッタ: OK / スキップをカプセル型（リザルトの .result-btn と同コンセプト） */
.retro-modal .modal-footer-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.retro-modal .modal-action-btn,
body.dark-mode .retro-modal .modal-action-btn {
    width: 220px;
    min-width: 0;
    padding: 11px 0;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #000;
    color: #fff;
    font-family: 'BIZ UDPGothic', 'Press Start 2P', sans-serif;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
    letter-spacing: 1px;
}
.retro-modal .modal-action-btn:hover {
    background: #2a2a2a;
}
.retro-modal .modal-action-btn:active {
    transform: scale(0.97);
    background: #fff;
    color: #000;
    box-shadow: none;
}