@charset "UTF-8";
/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

:root {
    --bg-color: #000;
    --text-color: #fff;
    --window-bg: rgba(0, 0, 20, 0.85);
    --window-border: 3px solid #a0a0ff;
    --window-border-outer: 3px solid #4040a0;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
    font-family: 'DotGothic16', sans-serif;
    color: var(--text-color);
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

#game-container {
    position: relative;
    width: 800px;
    height: 600px;
    background-color: var(--bg-color);
    box-shadow: 0 0 50px rgba(0, 0, 0, 1);
    border: 1px solid #333;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin: 0;
    top: 0;
    transform: none;
}

canvas#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hidden {
    display: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    pointer-events: none !important;
}

.window {
    background: var(--window-bg);
    border: var(--window-border);
    outline: var(--window-border-outer);
    border-radius: 6px;
    padding: 8px;
    pointer-events: auto;
}

.shop-selected {
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-color: #ffcc00 !important;
    color: #ffcc00 !important;
    box-shadow: 0 0 10px #ffcc00;
}

/* ===== 全画面ボタン（基本スタイル） ===== */
#fullscreen-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 55px;
    height: 55px;
    background: rgba(0, 5, 20, 0.85);
    border: 2px solid #00d4ff;
    color: #fff;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    cursor: pointer;
    z-index: 10000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.4), inset 0 0 10px rgba(0, 212, 255, 0.2);
    pointer-events: auto;
    text-shadow: 0 0 10px #00d4ff;
}

#fullscreen-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: #ffd700;
    color: #ffd700;
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    text-shadow: 0 0 15px #ffd700;
}

#fullscreen-btn:active {
    transform: scale(0.95);
}

/* フルスクリーンAPI有効時はボタンを隠す（is-fullscreenクラスが付与されない環境へのフォールバック） */
:fullscreen #fullscreen-btn,
:-webkit-full-screen #fullscreen-btn {
    display: none !important;
}

#title-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #000 0%, #0a0a3e 50%, #000 100%);
    pointer-events: auto;
}

#title-screen h1 {
    font-size: 58px;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #fff 0%, #a0a0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(3px 3px 0 #000);
}

#title-screen p {
    font-size: 22px;
    color: #ccc;
    margin: 8px 0;
}

#title-start {
    animation: blink 1.2s ease-in-out infinite;
}

#title-continue {
    color: #88f;
    font-size: 18px !important;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

#title-main-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

#title-slots {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.slot-prompt {
    width: 80% !important;
    max-width: 640px !important;
    margin: 0 auto 15px auto !important;
    text-align: left !important;
    font-size: 22px !important;
    color: #ffffff !important; /* ホワイトに変更 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
}


/* セーブスロットの外枠（Antigravity-UX v5 デザイン） */
.save-slot-wrapper {
    width: 80% !important;
    max-width: 640px !important;
    margin: 0 auto 12px auto !important;
    display: flex !important;
    gap: 10px !important;
}

.save-slot-wrapper .save-slot {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important; /* スロット内を縦並びに配置 */
    align-items: flex-start !important; /* 左寄せ */
    justify-content: center !important;
    text-align: left !important;
    border: var(--window-border) !important; /* 高級感のあるウィンドウボーダー適用 */
    border-radius: 6px !important;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important; /* 読みやすいフォントに変更 */
}

.save-slot-wrapper .save-slot-title {
    font-size: 19px !important;
    margin-bottom: 4px !important; /* スロットタイトルと情報の余白 */
    color: #ffd700 !important; /* ゴールドカラーで強調 */
    font-weight: bold !important;
}

.save-slot-wrapper .save-slot-info {
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

.save-slot-wrapper .delete-btn {
    width: 75px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important; /* 読みやすいフォントに変更 */
    font-size: 15px !important;
}


#title-updates-window {
    width: 98%;
    max-width: 800px;
    margin: 10px auto;
    max-height: 220px;
    display: flex;
    flex-direction: column;
    padding: 12px 15px;
    pointer-events: auto;
    animation: fadeInUpdates 0.5s ease both;
}

@keyframes fadeInUpdates {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.updates-header {
    font-size: 16px;
    color: #a0a0ff;
    font-weight: normal;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(160, 160, 255, 0.4);
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.updates-content {
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7; /* 行間を少し広くして読みやすく */
    color: #eee; /* 少し明るくしてコントラストを上げる */
    flex: 1;
    padding-right: 4px;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; /* 読みやすいフォントを優先 */
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {

    background: rgba(160, 160, 255, 0.4);
    border-radius: 10px;
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(160, 160, 255, 0.8);
    box-shadow: 0 0 10px rgba(160, 160, 255, 0.5);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(160, 160, 255, 0.4) transparent;
}

.update-entry {
    margin-bottom: 12px; /* 項目間の余白を少し増やす */
}

.update-entry-date {
    color: #f1c40f;
    font-size: 13px; /* 日付を少し大きく */
    margin-bottom: 6px;
    font-weight: bold;
}

.update-entry-item {
    display: grid;
    grid-template-columns: 1.2em auto;
    column-gap: 0.4em;
    margin: 0 0 8px 0;
    color: #eee;
    line-height: 1.6;
}

/* スマホ用個別調整 */
.is-mobile-device .updates-content {
    font-size: 15px; /* スマホでは1px大きく */
}
.is-mobile-device .update-entry-item {
    font-size: 15px;
}

.update-entry-item::before {
    content: "・";
    color: #a0a0ff;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}

.hud-name-area {
    display: inline-block;
    width: 96px;
    flex-shrink: 0;
}
.is-mobile-device .hud-name-area {
    width: 88px !important;
}

.tactic-badge {
    font-size: 10px;
    color: #fff;
    background: rgba(160, 160, 255, 0.15);
    border: 1px solid rgba(160, 160, 255, 0.6);
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: 0;
    margin-left: 2px;
    vertical-align: middle;
}
.is-mobile-device .tactic-badge {
    font-size: 9px;
    padding: 1px 3px;
}

.vol-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: #f1c40f;
    width: 150px;
}

.vol-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    font-size: 16px;
}

.vol-btn:hover {
    background: rgba(241, 196, 15, 0.2);
    border-color: #f1c40f;
    transform: scale(1.1);
}

.vol-btn:active {
    transform: scale(0.9);
    background: rgba(241, 196, 15, 0.4);
}

#message-window {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 600px !important;


    background: rgba(0, 0, 40, 0.9) !important;
    border: 2px solid #a0a0ff !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;

    padding: 15px 20px !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
    pointer-events: auto !important;
    white-space: pre-wrap !important;
    text-shadow: 1px 1px 2px #000 !important;
    z-index: 3000 !important;
}

#message-window.hidden {
    display: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

.confirm-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    pointer-events: auto;
}

.confirm-btn {
    background: rgba(0, 0, 80, 0.9);
    border: 2px solid #a0a0ff;
    color: #fff;
    padding: 8px 25px;
    font-family: 'DotGothic16', sans-serif;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    user-select: none;
}

.confirm-btn:hover, .confirm-btn.active {
    background: #a0a0ff;
    color: #000;
    box-shadow: 0 0 10px #a0a0ff;
    transform: scale(1.05);
}

.blink-arrow {
    display: inline-block;
    animation: blink-arrow-anim 1s infinite alternate;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes blink-arrow-anim {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0.2;
        transform: translateY(4px);
    }
}

@keyframes warp-swirl {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) blur(0px);
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        filter: brightness(2) blur(5px);
    }
    100% {
        transform: scale(0) rotate(720deg);
        filter: brightness(5) blur(20px);
        opacity: 0;
    }
}

.warp-animating {
    animation: warp-swirl 1.0s ease-in-out forwards !important;
}

#choice-window {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 180px;
    max-width: 90%;
    max-height: 400px;
    overflow-y: auto;
    background: rgba(0, 0, 40, 0.9);
    border: var(--window-border);
    outline: var(--window-border-outer);
    border-radius: 8px;
    padding: 8px;
    z-index: 3100;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#choice-window.hidden {
    display: none !important;
}

.choice-item {
    padding: 10px 15px;
    margin-bottom: 4px;
    font-size: 18px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    /* iOS Safari でタップ時に文字選択→Web検索ポップアップが出るのを防ぐ */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.choice-item.selected {
    border-color: #a0a0ff;
    background: rgba(160, 160, 255, 0.3);
    transform: scale(1.02);
    box-shadow: 0 0 10px rgba(160, 160, 255, 0.5);
}

#choice-window.multi-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    width: 90%;
    max-width: 480px;
}

#choice-window.multi-column .choice-item {
    font-size: 16px;
    padding: 8px 5px;
    text-align: center;
    white-space: nowrap;
}

.is-mobile-device #choice-window.multi-column .choice-item {
    font-size: 18px !important;
    padding: 10px 5px !important;
}

#field-hud {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -330px;
    width: 320px;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 30, 0.9), rgba(10, 10, 50, 0.85));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 3px solid #4a90e2;
    border-right: none;
    border-top: none;
    border-bottom: none;
    padding: 25px 20px;
    color: #fff;
    font-family: 'DotGothic16', sans-serif;
    pointer-events: auto;
    z-index: 50;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8), inset 1px 0 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

#field-hud::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(74, 144, 226, 0.3);
}

#field-hud::-webkit-scrollbar {
    display: none;
}

#hud-party-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.hud-member-card {
    width: 100%;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hud-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.hud-bar-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    margin-bottom: 3px;
    overflow: hidden;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.hud-bar {
    height: 100%;
    transition: width 0.3s ease;
}

#hud-gold {
    width: 100%;
    font-size: 14px;
    color: #f1c40f;
    text-align: right;
    margin-top: 6px;
    font-weight: normal;
    text-shadow: 1px 1px 1px #000;
    padding-right: 4px;
}

#hud-cmd-btn {
    width: 100% !important;
    display: block !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    padding: 10px 10px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border: 1px solid rgba(160, 160, 255, 0.6) !important;
    outline: none !important;
    background: rgba(20, 20, 60, 0.6) !important;
    color: #fff !important;
    cursor: pointer !important;
    text-align: center !important;
    pointer-events: auto !important;
    font-family: 'DotGothic16', sans-serif !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3) !important;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 5px #4a90e2;
}

#hud-cmd-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 50%
    );
    background-size: 100% 4px;
    animation: scanline 4s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    from { transform: translateY(0); }
    to { transform: translateY(50%); }
}

#hud-cmd-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: all 0.6s;
}

#hud-cmd-btn:hover::before {
    left: 100%;
}

#hud-cmd-btn:hover {
    background: linear-gradient(180deg, rgba(160, 160, 255, 0.4), rgba(64, 64, 160, 0.5));
    border-color: #a0a0ff !important;
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(160, 160, 255, 0.4);
}

#hud-cmd-btn:active {
    transform: scale(0.95);
}

#field-menu,
#settings-menu,
#target-selection,
#equip-slot-menu,
#equip-item-menu,
#field-item-menu,
#field-magic-menu,
#field-status-menu,
#field-battle-records-menu,
#tactics-menu,
#tactics-menu-choice,
#magic-user-select-menu,
#guild-menu,
#guild-main-menu,
#field-sort-menu,
#field-warp-menu {
    position: absolute;
    top: 60px;
    right: -330px;
    width: 320px;
    padding: 7px;
    z-index: 1000;
    pointer-events: auto;
}

.menu-item {
    font-size: 18px;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
}

@media screen and (orientation: landscape) {
    .menu-item {
        font-size: 15px;
        line-height: 1.2;
    }

    #field-menu,
    #settings-menu,
    #target-selection,
    #equip-slot-menu,
    #equip-item-menu,
    #field-item-menu,
    #field-magic-menu,
    #field-status-menu,
    #field-battle-records-menu,
    #tactics-menu,
    #tactics-menu-choice,
    #magic-user-select-menu,
    #guild-menu,
    #guild-main-menu,
    #field-sort-menu,
    #field-warp-menu {
        padding: 4px;
    }
}

#battle-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    background: #000;
    z-index: 40;
}

#screen-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    pointer-events: none;
    background: #fff;
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

#screen-flash.active {
    opacity: 0.5;
    transition: none;
}

#screen-flash.flash-correct { background: rgba(46, 204, 113, 0.4); }
#screen-flash.flash-wrong   { background: rgba(231, 76, 60, 0.4); }
#screen-flash.flash-level { background-color: rgba(241, 196, 15, 0.4); }
#screen-flash.flash-poison { background-color: rgba(128, 0, 128, 0.4); }
#screen-flash.flash-damage  { background: rgba(255, 0, 0, 0.5); }
#screen-flash.flash-white   { background: rgba(255, 255, 255, 0.8); }
#screen-flash.flash-black   { background: rgba(0, 0, 0, 0.8); }

canvas#battle-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    image-rendering: pixelated;
    display: block;
}

#enemy-info {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

#enemy-info h2 {
    margin: 0 0 6px 0;
    font-size: 20px;
    text-shadow: 2px 2px 0 #000;
}

.hp-bar-container {
    position: relative;
    width: 200px;
    margin: 0 auto;
}

.hp-bar-bg {
    width: 100%;
    height: 14px;
    background: #333;
    border: 2px solid #555;
    border-radius: 3px;
    overflow: hidden;
}

.hp-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease-out, background-color 0.4s;
}

.hp-text {
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 2px;
    text-shadow: 1px 1px 0 #000;
}

#battle-timer {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 140px;
    z-index: 10;
}

.timer-bar-bg {
    width: 100%;
    height: 10px;
    background: #333;
    border: 2px solid #555;
    border-radius: 3px;
    overflow: hidden;
}

.timer-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s linear, background-color 0.5s;
}

.timer-blinking {
    animation: timerPulse 0.5s infinite alternate;
}

@keyframes timerPulse {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

.timer-text {
    display: block;
    font-size: 13px;
    text-align: center;
    margin-top: 2px;
    text-shadow: 1px 1px 0 #000;
}

#question-area {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: normal;
    text-align: center;
    text-shadow: 3px 3px 0 #000;
    z-index: 10;
    white-space: pre-wrap;
    line-height: 1.3;
    width: 92%;
    margin: 0;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    padding: 4px 7px;
}

#question-area:empty {
    display: none !important;
}

#answer-input {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 100;
}

#answer-input input {
    font-family: 'DotGothic16', sans-serif;
    font-size: 36px;
    width: 120px;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: 3px solid #a0a0ff;
    outline: 2px solid #4040a0;
    border-radius: 4px;
    padding: 6px;
}

#answer-input input:focus {
    border-color: #f1c40f;
    outline-color: #c0a000;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.4);
}

.rem-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

#answer-input .rem-input {
    width: 100px;
    font-size: 32px;
}

.rem-text {
    font-size: 28px;
    font-weight: normal;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
}

.choice-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    align-items: flex-start;
}

.choice-btn {
    font-family: 'DotGothic16', sans-serif;
    font-size: 16px;
    color: #fff;
    background: var(--window-bg);
    border: var(--window-border);
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, transform 0.1s;
    white-space: normal;
    line-height: 1.3;
    width: 100%;
    box-sizing: border-box;
}

.choice-btn:hover {
    background: rgba(100, 100, 255, 0.35);
    border-color: #f1c40f;
    transform: scale(1.04);
}

#answer-input .choice-btn.selected {
    background: rgba(0, 0, 40, 0.95) !important;
    color: #f1c40f !important;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.8) !important;
    border: 3px solid #f1c40f !important;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.6) !important;
    transform: scale(1.1) !important;
    z-index: 10;
    animation: choice-pulse 1.5s infinite;
}

.choice-btn.selected::before {
    content: "▶";
    position: absolute;
    left: -25px;
    color: #f1c40f;
    font-size: 20px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

@keyframes choice-pulse {
    0% { box-shadow: 0 0 10px rgba(241, 196, 15, 0.6); }
    50% { box-shadow: 0 0 25px rgba(241, 196, 15, 1); }
    100% { box-shadow: 0 0 10px rgba(241, 196, 15, 0.6); }
}

.choice-btn:active {
    transform: scale(0.97);
    background: rgba(100, 100, 255, 0.5);
}

#battle-commands {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 240px;
    max-height: 580px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;
    z-index: 100;
    pointer-events: auto;
    overflow-y: auto;
}

.battle-cmd {
    font-family: 'DotGothic16', sans-serif;
    font-size: 16px;
    color: #fff;
    background: var(--window-bg);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

#battle-commands .item-btn,
#battle-commands .magic-btn,
#battle-commands .magic-cat-btn {
    font-size: 14px;
    padding: 5px 8px;
}

.battle-cmd:hover {
    background: rgba(100, 100, 255, 0.3);
    transform: scale(1.05);
}

.battle-cmd:active {
    transform: scale(0.98);
}

.battle-cmd:disabled {
    opacity: 0.4;
    cursor: default;
}

.battle-cmd:disabled:hover {
    background: var(--window-bg);
    transform: none;
}

#target-select {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
    margin-bottom: 2px;
}

.target-btn {
    font-size: 14px;
    padding: 4px 10px;
    min-width: 48px;
    text-align: left;
}

.target-btn:not([disabled]) {
    border-color: #a0a0ff;
}

.target-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

#player-status {
    position: absolute;
    bottom: 12px;
    left: 230px;
    right: 12px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    z-index: 10;
    pointer-events: none;
}

.player-status-box {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    background: rgba(0, 0, 30, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid #4a90e2;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.player-status-box h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 4px;
}

.combo-text {
    display: block;
    margin-top: 4px;
    color: #f1c40f;
    font-size: 14px;
    animation: comboPulse 0.5s ease;
}

@keyframes comboPulse {
    0% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.combo-text.combo-big {
    color: #ff3f3f;
    font-size: 20px;
    text-shadow: 1px 1px 0 #fff;
    animation: bigComboPulse 0.6s ease;
}

@keyframes bigComboPulse {
    0% { transform: scale(1.6) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

#shop-ui {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400px;
    z-index: 50;
    pointer-events: auto;
}

.shop-window h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
}

.shop-window hr {
    border: 1px solid #4040a0;
    margin: 10px 0;
}

.shop-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.shop-item-name {
    font-size: 20px;
    color: #f1c40f;
}

.shop-item-desc {
    font-size: 14px;
    color: #aaa;
}

.shop-item-price {
    font-size: 16px;
    color: #2ecc71;
}

.shop-item-owned {
    font-size: 14px;
    color: #bbb;
}

.shop-item-diff {
    display: block;
    font-size: 13px;
    color: #c0c0c0;
}

.shop-item-diff-value {
    margin-right: 6px;
}

.shop-item-diff-value.up {
    color: #7bed9f;
}

.shop-item-diff-value.down {
    color: #ff6b81;
}

#shop-ui {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 800px;
    height: 520px;
    margin: auto;
    pointer-events: auto;
    z-index: 400;
}

.shop-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 100px;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.shop-main {
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 統合パネルの上部見出し（タイトル + 所持G） */
.shop-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 6px;
    margin-bottom: 8px;
    border-bottom: 2px solid #a0a0ff;
    flex-shrink: 0;
}
.shop-main-header .shop-title-text {
    font-size: 22px;
    color: #fff;
}
.shop-main-header .shop-gold-inline {
    font-size: 20px;
    color: #f1c40f;
}

/* かう/うる/でる などのコマンドを横並びに */
.shop-main-cmds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.shop-main-cmds .battle-cmd {
    width: auto;
    min-width: 100px;
    text-align: center;
    padding: 6px 14px;
}

.shop-panel {
    background: rgba(0, 0, 30, 0.9);
    border: 4px double #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    color: #fff;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5);
    font-size: 20px;
    line-height: 1.6;
    overflow: hidden;
}

.shop-category {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: calc(100% - 70px);
}

.shop-status {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-self: end;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    color: #f1c40f;
    text-shadow: 2px 2px 0 #000;
}

.shop-items {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 8px;
    min-height: 0;
}

.shop-info {
    grid-row: 2 / 3;
    font-size: 18px;
    color: #ffd700;
    text-shadow: 1px 1px 0 #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    gap: 4px;
}

.shop-item-description {
    font-size: 18px;
    line-height: 1.3;
}

.shop-item-stats {
    font-size: 16px;
    color: #a0a0ff;
    font-weight: normal;
}

.shop-panel-title {
    color: #a0a0ff;
    border-bottom: 2px solid #a0a0ff;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 22px;
    text-align: center;
}

.shop-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s;
}

.shop-item-row.shop-selected {
    background: rgba(255, 255, 255, 0.2);
    border-color: #f1c40f;
    box-shadow: inset 0 0 10px rgba(241, 196, 15, 0.2);
}

/* shop 内では .battle-cmd の拡大 hover を抑制（選択は .shop-selected で示す） */
#shop-ui .battle-cmd:hover {
    background: var(--window-bg);
    transform: none;
}
#shop-ui .battle-cmd.shop-selected,
#shop-ui .battle-cmd.shop-selected:hover {
    background: rgba(100, 100, 255, 0.3);
    transform: none;
}

.shop-item-name {
    flex: 1;
    font-size: 18px;
}

.shop-item-price {
    text-align: right;
    width: 120px;
    color: #f1c40f;
    font-size: 18px;
}

.shop-item-owned {
    text-align: right;
    width: 80px;
    color: #aaa;
    font-size: 18px;
    margin-right: 20px;
}

/* まとめ売り画面：sell-row 全体を grid 化
   col1: 名前（内容ぶん、改行・省略しない）/ col2: 余白（1fr）／ col3: コントロール / col4: 価格 */
.shop-item-row.sell-row {
    display: grid;
    grid-template-columns: auto 1fr auto 90px;
    align-items: center;
    column-gap: 16px;
}

.sell-row .shop-item-name {
    white-space: nowrap;
    grid-column: 1 / 2;
}

.sell-row .sell-qty-controls {
    grid-column: 3 / 4;
    justify-self: end;
}

.sell-row .shop-item-price {
    grid-column: 4 / 5;
    text-align: right;
    width: auto;
}

/* sell-qty-controls 内も grid で各ボタン位置を固定 */
.sell-qty-controls {
    display: grid;
    grid-template-columns: 36px 4.5em 36px 72px;
    align-items: center;
    column-gap: 6px;
    margin: 0;
    flex-shrink: 0;
}

.sell-qty-btn {
    background: rgba(160, 160, 255, 0.2);
    border: 1px solid #6b6bcc;
    color: #fff;
    border-radius: 4px;
    padding: 2px 0;
    width: 100%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.1s;
    line-height: 1.2;
    text-align: center;
}

.sell-qty-btn:hover:not([disabled]) {
    background: rgba(160, 160, 255, 0.45);
    border-color: #a0a0ff;
    box-shadow: 0 0 6px rgba(160, 160, 255, 0.4);
}

.sell-qty-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.sell-qty-display {
    display: inline-block;
    min-width: 4em;
    text-align: center;
    font-size: 18px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.sell-row .shop-item-price {
    color: #f1c40f;
    font-weight: bold;
}

/* 合計とまとめ売り確定ボタン */
.shop-sell-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 8px 12px;
    margin: 8px 0 4px;
    background: rgba(160, 160, 255, 0.12);
    border: 1px solid #a0a0ff;
    border-radius: 6px;
    position: sticky;
    bottom: 0;
}

.shop-sell-total {
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-sell-total strong {
    color: #f1c40f;
    font-size: 24px;
    margin-left: 4px;
}

.shop-sell-confirm-btn {
    width: auto;
    min-width: 120px;
    justify-self: end;
    font-size: 20px;
    padding: 6px 24px;
    background: linear-gradient(180deg, #4caf50, #2e7d32);
    border: 1px solid #66bb6a;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.shop-sell-confirm-btn[disabled] {
    background: rgba(120, 120, 120, 0.4);
    border-color: #555;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

.shop-sell-confirm-btn.shop-selected {
    background: linear-gradient(180deg, #66bb6a, #43a047);
    box-shadow: 0 0 12px rgba(102, 187, 106, 0.6);
}

.shop-category .battle-cmd {
    width: 100%;
    text-align: left;
    padding-left: 20px;
}

#ending-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #0a0a3e 0%, #1a0a4e 50%, #0a0a3e 100%);
    z-index: 200;
    pointer-events: auto;
}

.ending-content {
    text-align: center;
    padding: 14px;
}

.ending-title {
    font-size: 50px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, #f1c40f, #e67e22);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: endingGlow 2s ease-in-out infinite;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes endingGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px #f1c40f);
    }

    50% {
        filter: drop-shadow(0 0 25px #e67e22);
    }
}

.ending-message {
    font-size: 24px;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.6;
    text-shadow: 1px 1px 2px #000;
}

.ending-stats {
    text-align: left;
    margin: 0 auto 30px;
    padding: 20px 30px;
    max-width: 400px;
    background: rgba(0, 0, 20, 0.6);
    border: 2px solid #a0a0ff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(160, 160, 255, 0.3);
}

.ending-stats p {
    margin: 0 0 15px 0;
    font-size: 22px;
    color: #f1c40f;
    text-align: center;
    border-bottom: 1px solid #a0a0ff;
    padding-bottom: 10px;
}

#ending-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
}

#ending-restart-btn {
    font-family: 'DotGothic16', sans-serif;
    font-size: 22px;
    padding: 12px 30px;
    cursor: pointer;
    background: #2c3e50;
    color: #fff;
    border: 2px solid #a0a0ff;
    border-radius: 6px;
    transition: all 0.2s;
}

#ending-restart-btn:hover {
    background: #34495e;
    border-color: #f1c40f;
    transform: scale(1.05);
}

.virtual-pad-container {
    display: none !important;
}

.dpad-wrapper {
    position: absolute;
    bottom: 0px;
    left: 20px;
    width: 120px;
    height: 120px;
    pointer-events: auto;
}

.action-pad-wrapper {
    position: absolute;
    bottom: 0px;
    right: 20px;
    width: 120px;
    height: 120px;
    pointer-events: auto;
}

.pad-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    background: rgba(100, 100, 255, 0.4);
    border: 2px solid rgba(160, 160, 255, 0.7);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
}

.pad-btn:active {
    background: rgba(100, 100, 255, 0.7);
}

.pad-up {
    top: 0;
    left: 38px;
}

.pad-down {
    bottom: 0;
    left: 38px;
}

.pad-left {
    top: 38px;
    left: 0;
}

.pad-right {
    top: 38px;
    right: 0;
}

.pad-b {
    bottom: 10px;
    left: 10px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.4);
    border-color: rgba(231, 76, 60, 0.7);
}

.pad-b:active {
    background: rgba(231, 76, 60, 0.7);
}

.pad-a {
    top: 10px;
    right: 10px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.4);
    border-color: rgba(46, 204, 113, 0.7);
}

.pad-a:active {
    background: rgba(46, 204, 113, 0.7);
}

.pad-magic {
    top: 10px;
    left: 10px;
    border-radius: 50%;
    background: rgba(155, 89, 182, 0.4);
    border-color: rgba(155, 89, 182, 0.7);
    font-size: 11px;
}

.pad-magic:active {
    background: rgba(155, 89, 182, 0.7);
}

#field-hud {
    position: absolute !important;
    left: 815px !important;
    right: auto !important;

    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 320px !important;
    max-height: 580px !important;
    height: auto !important;
    background: #000 !important;
    border: 2px solid #a0a0ff !important;
    border-radius: 6px !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    z-index: 2000 !important;
    font-weight: normal !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    display: flex !important;
    flex-direction: column !important;
}

#field-menu, #target-selection,
#equip-slot-menu, #equip-item-menu, #field-item-menu,
#field-magic-menu, #field-status-menu, #field-battle-records-menu, #tactics-menu,
#tactics-menu-choice, #magic-user-select-menu, #guild-menu, #guild-main-menu,
#field-sort-menu, #field-warp-menu {
    position: absolute !important;
    pointer-events: auto !important;
    left: 815px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 320px !important;
    height: auto !important;
    max-height: 580px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #a0a0ff !important;
    border-radius: 6px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    z-index: 2050 !important;
    font-weight: normal !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#title-updates-window {
    position: absolute !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: -300px !important;
    width: 320px !important;
    height: auto !important;
    max-height: 560px !important;
    background: #000 !important;
    border: 2px solid #a0a0ff !important;
    outline: none !important;
    border-radius: 6px !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    z-index: 2000 !important;
    font-weight: normal !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.updates-content {
    flex: 1;
    width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 5px !important;
}

.unified-menu-list {
    flex: 1;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 4px !important;
    padding-right: 8px !important;
}

#field-hud.hidden, #field-menu.hidden, #target-selection.hidden,
#equip-slot-menu.hidden, #equip-item-menu.hidden, #field-item-menu.hidden,
#field-magic-menu.hidden, #field-status-menu.hidden, #field-battle-records-menu.hidden, #tactics-menu.hidden,
#tactics-menu-choice.hidden, #magic-user-select-menu.hidden, #guild-menu.hidden {
    display: none !important;
}

#field-hud:not(.hidden), #field-menu:not(.hidden), #target-selection:not(.hidden),
#equip-slot-menu:not(.hidden), #equip-item-menu:not(.hidden), #field-item-menu:not(.hidden),
#field-magic-menu:not(.hidden), #field-status-menu:not(.hidden), #field-battle-records-menu:not(.hidden), #tactics-menu:not(.hidden),
#tactics-menu-choice:not(.hidden), #magic-user-select-menu:not(.hidden), #guild-menu:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
}

#hud-party-container {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1;
    justify-content: space-evenly;
    gap: 0 !important;
    margin: 10px 0;
}

.hud-member-card {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent) !important;
    border: none !important;
    border-left: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    padding: 8px 10px !important;
}

.status-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.status-close-btn {
    background: linear-gradient(135deg, rgba(160, 160, 255, 0.1), rgba(64, 64, 160, 0.2)) !important;
    border: 1px solid rgba(160, 160, 255, 0.4) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    text-shadow: 0 0 5px rgba(160, 160, 255, 0.5);
    margin-top: 15px !important;
}

.status-close-btn:hover {
    background: rgba(160, 160, 255, 0.3) !important;
    border-color: #a0a0ff !important;
    box-shadow: 0 0 15px rgba(160, 160, 255, 0.6) !important;
    transform: translateY(-1px);
}

.status-close-btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 5px rgba(160, 160, 255, 0.4) !important;
}

.status-header, .unified-menu-title, .unified-menu h2 {
    font-size: 16px !important;
    font-weight: normal !important;
    border-bottom: 2px solid #a0a0ff !important;
    padding-bottom: 6px !important;
    margin-bottom: 12px !important;
    color: #fff !important;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0 !important;
}

.status-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 2px 0 !important;
    border-bottom: none !important;
    font-weight: normal !important;
    font-size: 16px !important;
}

.status-row span:first-child { color: #aaa !important; }
.status-col-left, .status-col-right { border: none !important; padding: 0 !important; }

.status-skill-list, .status-skill-item {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 5px 0 !important;
}

.status-equip-item, .status-skill-item {
    color: #fff !important;
    padding: 4px 0 4px 10px !important;
    border-left: 2px solid #333 !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.status-skill-label, .status-equip-label {
    font-size: 14px !important;
    color: #a0a0ff !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

.records-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.records-tab {
    flex: 1;
    padding: 8px 4px;
    font-family: 'DotGothic16', sans-serif;
    font-size: 11px;
    line-height: 1.2;
    background: linear-gradient(135deg, rgba(160, 160, 255, 0.05), rgba(64, 64, 160, 0.1));
    border: 1px solid rgba(160, 160, 255, 0.25);
    border-radius: 4px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    outline: none;
}

.records-tab:hover {
    background: rgba(160, 160, 255, 0.15);
    color: #fff;
}

.records-tab.active {
    background: linear-gradient(135deg, rgba(160, 160, 255, 0.3), rgba(64, 64, 160, 0.4));
    border-color: #a0a0ff;
    color: #fff;
    text-shadow: 0 0 5px rgba(160, 160, 255, 0.6);
    box-shadow: 0 0 8px rgba(160, 160, 255, 0.3);
}

.records-summary {
    background: linear-gradient(135deg, rgba(160, 160, 255, 0.08), rgba(64, 64, 160, 0.12));
    border: 1px solid rgba(160, 160, 255, 0.3);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.7;
}

.records-summary .records-num {
    color: #f1c40f;
    font-size: 15px;
    margin: 0 4px;
}

.records-section-label {
    font-size: 11px;
    color: #a0a0ff;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.records-card {
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(160, 160, 255, 0.4);
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 0 4px 4px 0;
}

.records-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    line-height: 1.4;
}

.records-card-name {
    color: #fff;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

.records-card-value {
    flex-shrink: 0;
    font-size: 13px;
    color: #f1c40f;
}

.records-card-value.is-warn { color: #ff6b6b; }
.records-card-value.is-info {
    color: #7fdbff;
    text-shadow: 0 0 6px rgba(127, 219, 255, 0.5);
    font-weight: bold;
}

.records-card.is-undiscovered {
    border-left-color: rgba(160, 160, 255, 0.15);
    opacity: 0.45;
}

.records-card.is-undiscovered .records-card-name {
    letter-spacing: 2px;
    color: #888;
}

.records-card.is-undiscovered .records-card-value {
    color: #666;
}

.records-bar {
    margin-top: 4px;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.records-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.records-bar-fill.is-warn {
    background: linear-gradient(90deg, #c0392b, #e74c3c);
}

.records-bar-fill.is-info {
    background: linear-gradient(90deg, #2980b9, #3498db);
}

.records-card-sub {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}

.records-advice {
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(39, 174, 96, 0.15));
    border: 1px solid rgba(46, 204, 113, 0.4);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: #2ecc71;
    line-height: 1.5;
}

.records-advice::before {
    content: "💡 ";
    margin-right: 2px;
}

.records-empty {
    margin-top: 30px;
    text-align: center;
    color: #aaa;
    font-size: 14px;
    line-height: 1.8;
}

.is-mobile-device .records-tab {
    font-size: 13px !important;
    padding: 10px 4px !important;
}

.is-mobile-device .records-card {
    padding: 10px 12px !important;
}

.is-mobile-device .records-card-row {
    font-size: 14px !important;
}

.is-mobile-device .records-summary {
    font-size: 14px !important;
}

.records-monster-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 8px !important;
}
.records-monster-img-box {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.records-monster-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.records-monster-img-unknown {
    font-size: 32px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-family: 'DotGothic16', sans-serif !important;
    font-weight: bold !important;
    line-height: 1 !important;
}
.records-monster-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* モンスター図鑑（records-monster-card 系）の文字サイズとフォント
   ─ DotGothic16 はピクセル感で小さいと潰れがちなので、図鑑だけ可読性重視のゴシック系へ変更
   ─ スマホは特に小さくて見づらいので大きめに */
.records-monster-card .records-monster-name {
    font-size: 14px !important;
    font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif !important;
    letter-spacing: 0 !important;
}
.records-monster-card .records-monster-count {
    font-size: 13px !important;
    font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif !important;
    letter-spacing: 0 !important;
}
.records-monster-card .records-monster-title {
    width: 120px !important;
    min-height: 22px !important;
    height: auto !important;
    margin-left: auto !important;
    display: inline-flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}
/* モバイル・デスクトップ共通で縦積み: 1行目=名前(全幅), 2行目=ステータス, 3行目=討伐数+称号ボタン
   これで名前は折り返さず一行で全文表示される */
.records-monster-card .records-card-row {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 2px !important;
}
.records-monster-card .records-monster-name {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}
.records-monster-card .records-monster-count {
    text-align: left !important;
    margin-right: auto !important;
}

/* モンスターステータス行（HP/攻/守/速/属性）
   モバイル・デスクトップ共通で表示 */
.records-monster-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px 10px !important;
    margin-top: 2px !important;
    font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif !important;
    font-size: 12px !important;
    color: #cfd8dc !important;
    letter-spacing: 0 !important;
}
.records-monster-stats .rms-stat {
    display: inline-flex;
    align-items: center !important;
    gap: 4px;
    white-space: nowrap;
    line-height: 1 !important;
}
.records-monster-stats .rms-stat b {
    color: #a0a0ff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    margin-right: 2px;
    line-height: 1 !important;
}
.records-monster-stats .rms-elem {
    color: #ffd54f;
}
/* 各ステータス項目の横幅を固定して、縦のグリッド位置を完璧に揃える */
.records-monster-stats .rms-stat:nth-child(1) { width: 44px !important; } /* HP */
.records-monster-stats .rms-stat:nth-child(2) { width: 34px !important; } /* 攻 */
.records-monster-stats .rms-stat:nth-child(3) { width: 34px !important; } /* 守 */
.records-monster-stats .rms-stat:nth-child(4) { width: 34px !important; } /* 速 */
.records-monster-stats .rms-stat.rms-elem, /* 属性クラス直接指定でもカバー */
.records-monster-stats .rms-stat:nth-child(5) { width: 50px !important; } /* 属性 */
.set-title-btn {
    width: 120px !important;
    height: 22px !important;
    padding: 1px 0 0 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    font-size: 12px !important;
    font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif !important;
    line-height: 1 !important;
}
.is-mobile-device .records-section-label {
    font-size: 14px !important;
    font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif !important;
}

.menu-item, .target-btn, .unified-menu-item {
    padding: 12px 14px !important;
    margin-bottom: 6px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    flex-shrink: 0;
    font-weight: normal !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    cursor: pointer;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative;
    list-style: none !important;
    text-indent: 0 !important;
    /* iOS Safari でタップ時に文字が選択されて「Google検索」コールアウトが
       出てしまうバグ対策。テキスト選択とコールアウトを無効化 */
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
}

/* メニュー項目内の子要素（名前ラベル等）もまとめて選択不可にする */
.menu-item *, .target-btn *, .unified-menu-item * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
}

.target-btn::before, .target-btn::after { content: none !important; display: none !important; }

.menu-item:hover, .target-btn.selected, .unified-menu-item.selected, .menu-item.selected {
    border-color: #a0a0ff !important;
    background: rgba(160, 160, 255, 0.3) !important;
    transform: scale(1.02);
    z-index: 10 !important;
}

#target-selection .cancel-btn {
    margin-top: auto !important;
    background: #111 !important;
    border: 1px solid transparent !important;
    font-weight: normal !important;
    color: #ccc !important;
    padding: 12px !important;
    cursor: pointer;
}

#target-selection .cancel-btn.selected {
    border-color: #a0a0ff !important;
    background: rgba(160, 160, 255, 0.3) !important;
    color: #fff !important;
}

.target-name, .item-name {
    font-weight: normal !important;
    white-space: nowrap !important;
}

#hud-gold {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    display: block !important;
}

.hud-mission-title {
    color: #a0a0ff !important;
    font-size: 10px !important;
    font-weight: bold !important;
    margin-bottom: 4px !important;
    border-bottom: none !important;
    padding-bottom: 2px !important;
    white-space: nowrap !important;
    text-align: left;
}

.hud-mission-text {
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    margin-bottom: 4px !important;
    text-align: left;
}

.hud-gold-value {
    color: #ffcc00 !important;
    font-size: 13px !important;
    text-align: right !important;
    font-family: monospace !important;
    white-space: nowrap !important;
}

.target-stats, .item-subtext {
    font-size: 11px !important;
    color: #aaa !important;
    margin-top: 0;
    white-space: nowrap !important;
    margin-left: 8px;
}
.item-subtext.up { color: #0f0 !important; }
.item-subtext.down { color: #f00 !important; }

.equip-preview-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    width: 100%;
}

.diff-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.diff-label {
    color: #aaa;
    min-width: 3em;
}

.diff-value {
    color: #fff;
    margin-left: 8px;
}

.diff-delta {
    font-weight: bold;
    margin-left: 8px;
}

.diff-delta.up { color: #0f0 !important; }
.diff-delta.down { color: #f00 !important; }

#target-selection .unified-menu-item {
    flex-wrap: wrap !important;
}
#target-selection .item-name {
    flex: 1;
}
#target-selection .item-subtext {
    flex-shrink: 0;
}

.rem-input-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}
.rem-input-container input {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #222 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    padding: 8px !important;
    text-align: center !important;
    font-size: 20px !important;
}

#battle-ui {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 800px !important;
    height: 600px !important;
    pointer-events: none !important;
    z-index: 100 !important;
}

#battle-ui:not(.hidden) {
    display: block !important;
}

#battle-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 800px !important;
    height: 600px !important;
    z-index: 1 !important;
}

#battle-ui > * {
    pointer-events: auto !important;
}

#question-area {
    position: absolute !important;
    top: auto !important;
    bottom: 105px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 600px !important;
    background: rgba(0, 0, 40, 0.9) !important;
    border: 2px solid #a0a0ff !important;
    border-radius: 6px !important;
    padding: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
    z-index: 1000 !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 24px !important;
}

.battle-mission {
    position: static !important;
    margin-top: 15px !important;
    padding: 8px !important;
    width: 100% !important;
    color: #ff4d4d !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-top: 1px solid rgba(255, 77, 77, 0.3) !important;
    text-align: left !important;
    z-index: auto !important;
    line-height: 1.2 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    pointer-events: none !important;
}

#battle-left-container {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 2000 !important;
    pointer-events: none !important;
}

#battle-commands {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: transparent;
    padding: 0;
    border: none;
    pointer-events: auto;
}

#answer-input {
    position: static !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: auto !important;
}

#answer-input input {
    width: 150px !important;
    margin-bottom: 5px !important;
}

#battle-ui .battle-cmd {
    width: 150px !important;
    background: rgba(0, 0, 40, 0.85) !important;
    border: 2px solid #a0a0ff !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

:not(.is-mobile-device) .choice-buttons {
    position: absolute !important;
    top: 505px !important;
    left: 390px !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 600px !important;
    z-index: 3000 !important;
}

:not(.is-mobile-device) .choice-btn {
    width: auto !important;
    min-width: 120px !important;
    text-align: center !important;
}

#answer-input button,
#answer-input input,
#mobile-numpad {
    background: rgba(0, 0, 40, 0.85) !important;
    border: 2px solid #a0a0ff !important;
    border-radius: 4px !important;
}

#answer-input input {
    width: 150px !important;
    box-sizing: border-box !important;
    margin-bottom: 5px !important;
}

.ui-layout-left #field-hud {
    left: -330px !important;
    right: auto !important;
}

.ui-layout-left #field-menu,
.ui-layout-left #target-selection,
.ui-layout-left #equip-slot-menu,
.ui-layout-left #equip-item-menu,
.ui-layout-left #field-item-menu,
.ui-layout-left #field-magic-menu,
.ui-layout-left #field-status-menu,
.ui-layout-left #field-battle-records-menu,
.ui-layout-left #tactics-menu,
.ui-layout-left #tactics-menu-choice,
.ui-layout-left #magic-user-select-menu,
.ui-layout-left #guild-menu,
.ui-layout-left #guild-main-menu,
.ui-layout-left #field-sort-menu,
.ui-layout-left #field-warp-menu,
.ui-layout-left #settings-menu {
    left: -330px !important;
    right: auto !important;
}

/* .ui-layout-left #title-updates-window {
    right: auto !important;
    left: -330px !important;
} */

.ui-layout-left #battle-left-container {
    left: auto !important;
    right: 10px !important;
}

.ui-layout-left .choice-buttons {
    left: auto !important;
    right: 390px !important;
    transform: translateX(50%) !important;
}

.is-mobile-device #answer-input {
    width: 100% !important;
    align-items: center !important;
}

.is-mobile-device .choice-buttons {

    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 780px !important;             /* 800(battle-ui蟷・ - 10*2(蟾ｦ蜿ｳ菴咏區) */
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    z-index: 3000 !important;
}

.is-mobile-device.ui-layout-left .choice-buttons {
    left: auto !important;
    right: 0 !important;
}

.is-mobile-device .choice-btn {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 10px 4px !important;
    font-size: 15px !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

.ui-layout-left #player-status {
    left: 12px !important;
    right: 230px !important;
}

.is-mobile-device .window,
.is-mobile-device .menu-item,
.is-mobile-device .unified-menu-item,
.is-mobile-device .battle-cmd,
.is-mobile-device .choice-btn {
    font-size: 18px !important;
    padding: 10px 12px !important;
}
.is-mobile-device .magic-btn {
    font-size: 13px !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
    letter-spacing: -0.5px !important;
}

.unified-menu-item > span:first-child {
    white-space: nowrap !important;
}

.is-mobile-device .vol-control {
    width: 135px !important;
    gap: 4px !important;
}

.is-mobile-device #message-window {
    font-size: 24px !important;
    line-height: 1.6 !important;
}

.is-mobile-device .status-header {
    font-size: 16px !important;
    font-weight: normal !important;
    margin-bottom: 2px !important;
}
.is-mobile-device .status-row {
    font-size: 16px !important;
    font-weight: normal !important;
    padding: 1px 0 !important;
}
.is-mobile-device .status-label {
    font-size: 16px !important;
    width: 40px !important;
}
.is-mobile-device .hud-mission-title {
    font-size: 16px !important;
}
.is-mobile-device .hud-mission-text {
    font-size: 16px !important;
}
.is-mobile-device .hud-gold-value {
    font-size: 16px !important;
}

.is-mobile-device #player-status {
    font-size: 16px !important;
}
.is-mobile-device #player-status .status-name {
    font-size: 16px !important;
    font-weight: normal !important;
}
.is-mobile-device #player-status .status-val {
    font-size: 16px !important;
    font-weight: normal !important;
}

.is-mobile-device .hud-member-card {
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    border-bottom: none !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent) !important;
}

.is-mobile-device .hud-member-card .hud-label-row {
    margin-bottom: 3px !important;
}

.is-mobile-device .hud-member-card .hud-label-row > span:first-child {
    font-size: 14px !important;
}
.is-mobile-device .hud-member-card .hud-label-row > span:last-child {
    font-size: 11px !important;
}
.is-mobile-device .hud-member-card .status-row-hud {
    margin-bottom: 1px !important;
    line-height: 1.2 !important;
}

.is-mobile-device .hud-member-card .status-label {
    font-size: 11px !important;
    width: 30px !important;
}
.is-mobile-device .hud-member-card .status-val {
    font-size: 11px !important;
    width: 54px !important;
    margin-right: 4px !important;
}
.is-mobile-device .hud-member-card .status-row-hud > div:last-child {
    height: 5px !important;
}

.is-mobile-device #hud-party-container {
    gap: 6px !important;
}

.is-mobile-device #hud-gold .hud-mission-text {
    margin-bottom: 2px !important;
}
.is-mobile-device #hud-gold .hud-gold-value {
    margin-bottom: 4px !important;
    padding-bottom: 3px !important;
}

.is-mobile-device #hud-cmd-btn {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    background: linear-gradient(180deg, rgba(160, 160, 255, 0.2), rgba(64, 64, 160, 0.4)) !important;
    border: 1px solid rgba(160, 160, 255, 0.4) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.is-mobile-device #field-hud,
.is-mobile-device #field-menu,
.is-mobile-device #target-selection,
.is-mobile-device #field-item-menu,
.is-mobile-device #field-magic-menu,
.is-mobile-device #field-status-menu,
.is-mobile-device #field-battle-records-menu,
.is-mobile-device #field-warp-menu,
.is-mobile-device #guild-menu,
.is-mobile-device #guild-main-menu {
    width: 320px !important;
    padding: 10px !important;
}

.is-mobile-device .status-columns {
    gap: 5px !important;
}

.is-mobile-device #battle-left-container {
    top: auto !important;
    bottom: 130px !important;
    left: 10px !important;
    justify-content: flex-end !important;
}

.is-mobile-device #player-status {
    bottom: 130px !important;
    left: auto !important;
    right: 10px !important;
}

.is-mobile-device .mob-num-btn,
.is-mobile-device #mob-del,
.is-mobile-device #mob-ok {
    width: 70px !important;
    height: 60px !important;
    font-size: 26px !important;
}

.is-mobile-device #disp-main,
.is-mobile-device #disp-rem {
    font-size: 32px !important;
    padding: 8px 12px !important;
    min-width: 80px !important;
}

.is-mobile-device #question-area {
    font-size: 26px !important;
    position: absolute !important;
    top: auto !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 95% !important;
    min-height: 110px !important;
    height: auto !important;
    max-width: none !important;
    background: rgba(0, 0, 40, 0.95) !important;
    border: 3px solid #ffffff !important;
    border-radius: 10px !important;
    padding: 15px !important;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.8) !important;
    z-index: 2500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.is-mobile-device.ui-layout-left #battle-left-container {
    left: auto !important;
    right: 10px !important;
}

.is-mobile-device.ui-layout-left #player-status {
    right: auto !important;
    left: 10px !important;
}

.is-mobile-device.ui-layout-left #question-area {
    left: 50% !important;
    right: auto !important;
    text-align: center !important;
}

.is-mobile-device #battle-left-container:has(#answer-input:not(:empty)) #battle-commands {
    display: none !important;
}

.is-mobile-device #battle-commands.hidden {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

#super-reload-btn {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ff4e50, #f9d423);
    color: white;
    font-weight: bold;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(249, 212, 35, 0.5);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-family: 'DotGothic16', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), glowPulse 2s infinite;
    user-select: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

#super-reload-btn:hover {
    filter: brightness(1.1);
    transform: translateX(-50%) scale(1.05);
}

#super-reload-btn:active {
    transform: translateX(-50%) scale(0.95);
}

#super-reload-btn .update-icon {
    font-size: 20px;
}

@keyframes bounceIn {
    0% { transform: translateX(-50%) translateY(-100px); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes glowPulse {
    0% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(249, 212, 35, 0.4); }
    50% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 30px rgba(249, 212, 35, 0.8); }
    100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(249, 212, 35, 0.4); }
}

#portrait-notice {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
    z-index: 20000 !important;
    display: none;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
}

.notice-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 90% !important;
    max-width: 500px !important;
    position: relative !important;
}

@media screen and (orientation: portrait) {
    #portrait-notice {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

body:not(.is-fullscreen) #fullscreen-btn {
    position: fixed !important;
    width: 85% !important;
    max-width: 400px !important;
    height: 100px !important;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: auto !important;
    background: linear-gradient(135deg, #001529 0%, #00d4ff 50%, #001529 100%) !important;
    background-size: 200% 200% !important;
    border: 4px solid #fff !important;
    border-radius: 50px !important;
    font-size: 0 !important;
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.6), inset 0 0 20px rgba(255,255,255,0.5) !important;
    z-index: 30000 !important;
    animation: pulse-button-ultra 2s infinite ease-in-out, background-move 4s linear infinite;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
}

body:not(.is-fullscreen) #fullscreen-btn::before {
    content: none !important;
}

@keyframes background-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

body:not(.is-fullscreen) #fullscreen-btn::after {
    content: "ぜんがめん" !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: 0.1em;
    text-shadow: 0 0 15px rgba(0, 212, 255, 1);
}

body:not(.is-fullscreen) #fullscreen-btn:active {
    transform: translate(-50%, -50%) scale(0.9) !important;
    filter: brightness(1.5);
}

body.is-fullscreen #fullscreen-btn {
    display: none !important;
}

body.is-fullscreen #fullscreen-btn::after {
    content: none !important;
}

@media screen and (orientation: portrait) {
    #portrait-notice {
        display: flex !important;
    }


    .menu-item {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    #field-menu,
    #settings-menu,
    #target-selection,
    #equip-slot-menu,
    #equip-item-menu,
    #field-item-menu,
    #field-magic-menu,
    #field-status-menu,
    #field-battle-records-menu,
    #tactics-menu,
    #tactics-menu-choice,
    #magic-user-select-menu,
    #guild-menu,
    #guild-main-menu,
    #field-sort-menu,
    #field-warp-menu {
        padding: 5px !important;
        /* HUD（top:50% + translateY(-50%)）と高さを揃えてマップ中央に整列させる */
        top: 50% !important;
        transform: translateY(-50%) !important;
    }


    body.is-fullscreen #fullscreen-btn {
        display: flex !important;
        position: fixed !important;
        width: 80% !important;
        max-width: 300px !important;
        height: 60px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 30px !important;


        background: rgba(0, 0, 0, 0.8) !important;
        border: 2px solid #00d4ff !important;
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.5) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;

        pointer-events: auto !important;
        z-index: 1000000 !important;


        color: transparent !important;
        font-size: 0 !important;
    }

    body.is-fullscreen #fullscreen-btn::after {
        content: "スマホを横にしてね";

        display: block;
        color: white !important;
        font-size: 24px !important;
        animation: pulse-text 1.5s infinite;
    }

    @keyframes pulse-text {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
}

@keyframes pulse-button-ultra {
    0% { transform: translate(-50%, -50%) scale(1); filter: contrast(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); filter: contrast(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); filter: contrast(1); }
}

#magic-effect-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.magic-particle {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    will-change: transform, opacity;
}

.magic-heal-ripple {
    border: 3px solid #0f0;
    border-radius: 50%;
    box-shadow: 0 0 15px #0f0;
    animation: anim-heal-ripple var(--dur) ease-out forwards;
}
@keyframes anim-heal-ripple {
    0% { transform: scale(0); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.magic-heal-sparkle {
    background-color: #fff;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    box-shadow: 0 0 10px #0f0;
    animation: anim-heal-sparkle var(--dur) ease-out forwards;
}
@keyframes anim-heal-sparkle {
    0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(var(--fx), var(--fy)) rotate(180deg) scale(1); opacity: 0; }
}

.magic-fire {
    background: radial-gradient(circle, #ff4500, #ff8c00, transparent);
    border-radius: 50%;
    filter: blur(4px);
    mix-blend-mode: screen;
    animation: anim-fire var(--dur) ease-out forwards;
}
@keyframes anim-fire {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(var(--fx), var(--fy)) scale(2); opacity: 0; }
}

.magic-ice {
    background: linear-gradient(to bottom, #fff, #add8e6);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    opacity: 0.8;
    animation: anim-ice var(--dur) ease-in forwards;
}
@keyframes anim-ice {
    0% { transform: translateY(-100px) scaleY(2); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(var(--fy)) scaleY(1); opacity: 1; }
}

.magic-ice-shard {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 5px #0ff;
    animation: anim-ice-shard var(--dur) ease-out forwards;
}
@keyframes anim-ice-shard {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--fx), var(--fy)) rotate(var(--rot)); opacity: 0; }
}

.magic-thunder-bolt {
    background: #fff;
    box-shadow: 0 0 20px #ff0, 0 0 40px #fff;
    clip-path: polygon(40% 0%, 100% 0%, 30% 50%, 70% 50%, 0% 100%, 40% 40%, 10% 40%);
    animation: anim-thunder-bolt var(--dur) steps(2) forwards;
}
@keyframes anim-thunder-bolt {
    0% { opacity: 0; transform: scaleX(1); }
    20% { opacity: 1; transform: scaleX(1.5); }
    40% { opacity: 0; }
    60% { opacity: 1; transform: scaleX(0.8); }
    100% { opacity: 0; }
}

.magic-thunder-spark {
    background: #ff0;
    border-radius: 50%;
    animation: anim-thunder-spark var(--dur) ease-out forwards;
}
@keyframes anim-thunder-spark {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--fx), var(--fy)) scale(0); opacity: 0; }
}

.magic-poison {
    background: radial-gradient(circle, #800080, #4b0082, transparent);
    border-radius: 50%;
    filter: blur(2px);
    animation: anim-poison var(--dur) ease-out forwards;
}
@keyframes anim-poison {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    30% { opacity: 0.7; }
    100% { transform: translate(var(--fx), var(--fy)) scale(1.5); opacity: 0; }
}

.magic-holy-glow {
    background: radial-gradient(circle, #fff, rgba(255,255,200,0.5), transparent);
    border-radius: 50%;
    animation: anim-holy-glow var(--dur) ease-in-out forwards;
}
@keyframes anim-holy-glow {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 0.6; }
    100% { transform: scale(1); opacity: 0; }
}

.magic-holy-ray {
    background: linear-gradient(to bottom, transparent, #fff, transparent);
    animation: anim-holy-ray var(--dur) ease-out forwards;
}
@keyframes anim-holy-ray {
    0% { transform: rotate(var(--rot)) scaleY(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(var(--rot)) scaleY(5); opacity: 0; }
}

.magic-dark-wave {
    border: 4px double #4b0082;
    border-radius: 50%;
    animation: anim-dark-wave var(--dur) ease-out forwards;
}
@keyframes anim-dark-wave {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: scale(1.5) rotate(180deg); opacity: 0; }
}

.magic-dark-orb {
    background: #000;
    box-shadow: 0 0 20px #8a2be2;
    border-radius: 50%;
    animation: anim-dark-orb var(--dur) ease-in forwards;
}
@keyframes anim-dark-orb {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(var(--fx), var(--fy)) scale(0); opacity: 0; }
}

.magic-wind {
    background: linear-gradient(45deg, transparent, rgba(200,255,200,0.6), transparent);
    border-radius: 40%;
    animation: anim-wind var(--dur) linear forwards;
}
@keyframes anim-wind {
    0% { transform: rotate(0deg) translate(0, 0) scale(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: rotate(720deg) translate(var(--fx), var(--fy)) scale(1); opacity: 0; }
}

.magic-stone {
    background: #8b4513;
    clip-path: polygon(20% 0%, 80% 10%, 100% 40%, 70% 90%, 20% 100%, 0% 60%);
    animation: anim-stone var(--dur) ease-out forwards;
}
@keyframes anim-stone {
    0% { transform: translateY(0) rotate(0deg) scale(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(var(--fx), var(--fy)) rotate(360deg) scale(1); opacity: 0; }
}

.magic-water {
    background: radial-gradient(circle, #00f, #add8e6, transparent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: anim-water var(--dur) ease-out forwards;
}
@keyframes anim-water {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: translate(var(--fx), var(--fy)) scale(1.5); opacity: 0; }
}

.magic-burst {
    background: var(--bg);
    border-radius: 50%;
    animation: anim-burst var(--dur) ease-out forwards;
}
@keyframes anim-burst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--fx), var(--fy)) scale(0); opacity: 0; }
}

#church-revive-menu {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 300px !important;
    z-index: 3500 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 40, 0.95) !important;
    border: 2px solid #a0a0ff !important;
    border-radius: 6px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}
.unified-menu-title {
    font-size: 18px;
    margin: 0 0 10px 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
}
.unified-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.unified-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.unified-menu-item.selected {
    background: rgba(255, 255, 255, 0.2);
    color: #ffff00;
}
.unified-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.unified-menu-item.cancel-btn {
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    justify-content: center;
}

/* Title screen keyboard focus styles */
.save-slot-wrapper .save-slot.selected {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
    transform: none !important;
}

.save-slot-wrapper .delete-btn.selected {
    background-color: rgba(255, 0, 0, 0.4) !important;
    border-color: #ff4444 !important;
    box-shadow: 0 0 15px #ff4444 !important;
    transform: none !important;
    color: #fff !important;
}

/* タイトル画面：ホバー拡大を抑制（強調は .selected クラスのみで行う） */
#title-screen .battle-cmd:hover {
    background: transparent !important;
    transform: none !important;
}
#title-screen .save-slot:hover,
#title-screen .delete-btn:hover {
    transform: none !important;
}
#title-screen .save-slot.selected:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
#title-screen .delete-btn.selected:hover {
    background-color: rgba(255, 0, 0, 0.4) !important;
}

#title-updates-window.selected {
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
}

/* ========================================
   九九スナイパー（ミニゲーム）
   ======================================== */

/* ========================================
   九九スナイパー（ミニゲーム）: プレミアム・ファンタジー・リニューアル
   ======================================== */

:root {
    --ks-bg-deep: #020617;
    --ks-accent-gold: #fbbf24;
    --ks-accent-blue: #38bdf8;
    --ks-glass-bg: rgba(15, 23, 42, 0.75);
    --ks-glass-border: rgba(255, 255, 255, 0.2);
    --ks-correct: #10b981;
    --ks-wrong: #ef4444;
}

#kuku-sniper-ui {
    /* ビューポート全体に表示してスマホでも余裕のあるレイアウトにする。
       position: fixed + inset: 0 で画面全体を覆い、game-container の 800×600 制約を超える。 */
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* モバイルのURLバー考慮 */
    background: var(--ks-bg-deep);
    background-image:
        radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.2) 0%, transparent 70%),
        url('../assets/ks_magic_background.png');
    background-size: cover;
    background-position: center;
    color: #f8fafc;
    font-family: 'Outfit', 'Hiragino Maru Gothic ProN', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Noto Sans JP', sans-serif;
    font-weight: 900;
    /* コンテンツが画面より縦に長い場合は親側でスクロール（モバイル向け）。
       PC では中の ks-screen が min-height:100% + justify-content:center で中央寄せ */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 他のフィールドメニュー（z-index 2050）よりも上に配置 */
    z-index: 3000;
    /* iOS のノッチ／ホームバー（safe-area）を避けるパディング */
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto;
}

#kuku-sniper-ui.hidden { display: none; }

.ks-screen {
    width: 100%;
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* min-height + justify-content: center で「収まる時は中央、大きい時は上から伸ばしてスクロール」を実現 */
    min-height: 100%;
    justify-content: center;
    animation: ks-fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* PC（非モバイル）では画面が広いので、game-container の transform: scale() で
   1.6倍前後に拡大されていた旧見た目に近づけるよう、ks-screen 全体を物理的に拡大する。 */
#kuku-sniper-ui:not(.is-mobile-device) .ks-screen {
    /* 画面横幅の約85%を使う（ノートPC1366でも約1160px。大型モニタでも 1700px で頭打ち） */
    max-width: min(85vw, 1700px);
    font-size: 1.6em;
}
/* PC版クリア画面（ks-result）は巨大化させず、680px に制限して中央寄せでスタイリッシュに */
#kuku-sniper-ui:not(.is-mobile-device) .ks-screen.ks-result {
    max-width: 680px !important;
    padding: 36px 48px !important;
}
/* 85vw のレイアウトに対してテキストサイズが小さく感じられる問題を解消。
   全要素を概ね 1.3〜1.4倍に底上げしてバランスを取る。
   ※ Chromebook（PC扱いだがビューポート 700px 前後）でも setup 画面が縦に収まるよう
     PCサイズはやや控えめにしてある。極端に大きな画面では .ks-screen の余白で吸収する。 */
#kuku-sniper-ui:not(.is-mobile-device) .ks-title { font-size: 42px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-subtitle { font-size: 20px; margin-bottom: 10px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-fieldset { padding: 8px 20px; margin: 4px 0; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-fieldset legend { font-size: 20px; padding: 0 10px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-card { padding: 8px 14px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-card-title { font-size: 26px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-card-desc { font-size: 15px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-chip { font-size: 22px; padding: 8px 0; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-step-card { padding: 8px 14px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-step-label { font-size: 15px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-step-name { font-size: 22px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-start-btn { font-size: 28px; padding: 10px 50px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-record-btn { font-size: 22px; padding: 10px 36px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-quit-btn { font-size: 20px; padding: 10px 28px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-setup-actions { gap: 14px; margin-top: 12px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-step-list-container { max-height: 240px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-records-title { font-size: 48px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-records {
    /* 左右をさらに広く（90vw 上限 1700px）、上下はガッツリ圧縮 */
    max-width: min(90vw, 1700px);
    padding: 16px 32px;
    max-height: 92vh;
    max-height: 92dvh;
    /* .ks-screen の min-height:100% を打ち消す。これがないと max-height が無効になり
       record-list の overflow-y:auto が機能せず画面外にはみ出す（Chromebook で確認）。 */
    min-height: 0;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-records-header {
    margin-bottom: 10px;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-records-summary {
    padding: 10px 24px;
    margin-bottom: 12px;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-summary-grid { gap: 20px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-summary-text { font-size: 20px; margin-bottom: 4px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-summary-text b { font-size: 26px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-progress-bg { height: 10px !important; }

#kuku-sniper-ui:not(.is-mobile-device) .ks-record-list {
    margin-bottom: 8px;
    padding-right: 8px;
}
/* 段カードを横並び。広い画面を活かして 2〜3列、カード自身は縦に詰める */
#kuku-sniper-ui:not(.is-mobile-device) .ks-record-grid {
    grid-template-columns: repeat(auto-fill, minmax(540px, 1fr));
    gap: 12px;
    padding-bottom: 8px;
}
/* 足し算引き算側はカードが2枚＆表が7列で横長になるため、PC でも常に1列にしてはみ出しを防ぐ。
   九九側（9段カード）の2列レイアウトには影響しない。 */
#kuku-sniper-ui:not(.is-mobile-device) .ks-record-grid.asn-record-grid {
    grid-template-columns: 1fr;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-dan-card {
    padding: 8px 18px 10px;
    border-radius: 18px;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-dan-card-title {
    font-size: 24px;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

/* テーブル本体：列幅と高さをPC向けに最適化 */
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table { font-size: 18px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table th {
    font-size: 14px;
    letter-spacing: 0;
    padding: 2px 2px;
    font-weight: normal;
    color: #94a3b8;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table td { padding: 3px 2px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table th:first-child,
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table td:first-child { width: 80px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table th:nth-child(2),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table td:nth-child(2),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table th:nth-child(4),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table td:nth-child(4),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table th:nth-child(6),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table td:nth-child(6) { width: 78px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table th:nth-child(3),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table td:nth-child(3),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table th:nth-child(5),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table td:nth-child(5),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table th:nth-child(7),
#kuku-sniper-ui:not(.is-mobile-device) .ks-mini-table td:nth-child(7) { width: 95px; }

/* タイム＋ブルー星セルを「時間が上、★が下」の縦並びに変更。
   旧 inline-flex（横並び）+ top:0.6px/2.2px のピクセル微調整は小フォント前提だったので、
   PC の大フォントだと完全にズレて見栄え悪く、列も狭くて押し込まれていた。 */
#kuku-sniper-ui:not(.is-mobile-device) .ks-record-cell-container {
    flex-direction: column;
    height: auto;
    gap: 2px;
    padding: 2px 0;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-record-time-text {
    font-size: 17px;
    top: 0;  /* 旧位置補正をリセット（揃わなくなる） */
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-record-gold-stars,
#kuku-sniper-ui:not(.is-mobile-device) .ks-record-blue-stars {
    font-size: 16px;
    letter-spacing: 0;
    top: 0;  /* 旧位置補正をリセット */
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-diff-tag { width: 76px; font-size: 14px; padding: 3px 0; }
#kuku-sniper-ui:not(.is-mobile-device) .asn-step-tag { width: 76px; }

/* プレイ画面のヘッダー・問題表示のフォントもバランス補正 */
#kuku-sniper-ui:not(.is-mobile-device) .ks-question { font-size: 64px; padding: 14px 0; letter-spacing: 10px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-timer { font-size: 30px !important; width: 140px !important; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-progress { font-size: 24px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-target { font-size: 42px; }

/* プレイ画面はビューポートいっぱいを使う設計に変更。
   transform: scale は視覚オーバーフローが overflow-y:auto の親で
   スクロール発火するので使わない。代わりに ks-playarea を flex:1 で
   残りの縦領域を全部使い、横は ks-screen.ks-play の max-width で広げる。 */
.ks-screen.ks-play {
    /* play フェーズではビューポート高さいっぱいを使い、min-height + center は無効化 */
    height: 100%;
    min-height: 0;
    justify-content: flex-start;
    overflow: hidden;
    max-width: 100%;
    /* 上下にも余白を入れて、ヘッダー・問題・プレイエリアが画面端ギリギリにならないように */
    padding: 24px 12px;
    box-sizing: border-box;
}
.ks-screen.ks-play .ks-playarea {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-screen.ks-play {
    max-width: min(95vw, 1600px);
    /* PC は上下の余白をさらに広げて、画面占有率を約 85% に */
    padding: 48px 20px;
}

@keyframes ks-fade-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ----- 設定画面 ----- */

.ks-setup {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ks-title {
    text-align: center;
    color: var(--ks-accent-gold);
    font-size: 26px; /* 36px から 26px へコンパクトにして縦を節約 */
    margin: 0 0 2px;
    letter-spacing: 1px;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 2px 2px 0 rgba(0,0,0,1);
    font-weight: 900;
}

.ks-subtitle {
    text-align: center;
    color: var(--ks-accent-blue);
    margin: 0 0 4px;
    font-size: 12px; /* 15px から 12px へ */
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.ks-fieldset {
    background: var(--ks-glass-bg);
    border: 2px solid var(--ks-glass-border);
    border-radius: 14px;
    padding: 6px 12px; /* 10px 15px から縦パディングを圧縮 */
    margin: 3px 0;    /* 5px から 3px に縦余白を圧縮 */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.ks-fieldset legend {
    font-size: 13px; /* 16px から 13px へコンパクト化 */
    font-weight: 900;
    padding: 1px 10px; /* パディング圧縮 */
    color: var(--ks-accent-gold);
    background: #1e293b;
    border: 1px solid var(--ks-glass-border);
    border-radius: 20px;
}

.ks-dan-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
}

.ks-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ks-chip {
    padding: 6px 0;
    font-size: 18px;
    font-weight: 900;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    /* ガタつきのない、極めてシンプルかつ上品な0.1秒の高速フェードへ！ */
    transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
}
.ks-chip:hover:not(.ks-locked):not(.selected) { 
    /* background は一切変更しない！中の色は絶対キープ！ */
    border-color: var(--ks-accent-gold) !important; /* 現在地はゴールド統一！ */
    color: #fff;
    transform: none !important; /* 動き・拡大は完全根絶！ */
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.7) !important; /* ゴールドグロー！ */
}
.ks-chip.selected {
    color: #fff;
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    border-color: #fff !important; /* 決定項目は美しい白枠！ */
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

/* ALLチップ（9の右に出現する 1～9段 81問モード解放ボタン、たし算・ひき算タブにも再利用） */
.ks-chip-all {
    background: rgba(255, 255, 255, 0.05) !important; /* 未選択時は他のチップと同じ半透明グレーにして、紫グラデの誤出現を根絶！ */
    color: #94a3b8;
    border: 2px solid rgba(255,255,255,0.1);
    font-size: 13px;
    letter-spacing: 1px;
    transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}
.ks-chip-all:hover:not(.selected) {
    /* background は一切変更しない！中の色は絶対にキープ！ */
    border-color: var(--ks-accent-gold) !important;
    color: #fff;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.75) !important;
    transform: none !important;
}
.ks-chip-all.selected {
    background: linear-gradient(135deg, #d946ef 0%, #9333ea 100%) !important; /* 選択時は元の美しい紫グラデ！ */
    color: #fff;
    border-color: #fff !important;
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.6) !important;
}
/* たし算・ひき算のオペレーション切り替えタブ(data-opあり)が選択された時は、爽やかな青グラデーション！ */
.ks-chip-all.selected[data-op] {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.6) !important;
}
/* 記録ダッシュボードの ALL カード */
.ks-dan-card-all {
    border: 2px solid #a855f7;
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.12) 0%, rgba(147, 51, 234, 0.12) 100%);
}

.ks-card {
    position: relative;
    padding: 8px 5px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    /* ガタつきのない、極めてシンプルかつ上品な0.1秒の高速フェードへ！ */
    transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
}

/* ロックアイコン（既定では非表示。.ks-locked が付いたカードでだけ表示） */
.ks-lock-icon {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 14px;
    line-height: 1;
    display: none;
    pointer-events: none;
}
.ks-card.ks-locked {
    opacity: 0.42;
    filter: grayscale(0.6);
    cursor: not-allowed;
}
.ks-card.ks-locked:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}
.ks-card.ks-locked .ks-lock-icon { display: inline; }
.ks-card:hover:not(.ks-locked):not(.selected) { 
    /* background は一切変更しない！中の色は絶対キープ！ */
    border-color: var(--ks-accent-gold) !important; /* 現在地はゴールド統一！ */
    transform: none !important; /* 上下移動は完全排除！ */
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.7) !important; /* ゴールドグロー！ */
}
.ks-card .ks-card-title { font-size: 16px; font-weight: 900; margin-bottom: 2px; }
.ks-card .ks-card-desc { font-size: 11px; color: #94a3b8; line-height: 1.2; }

.ks-card-order.selected { background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #fff !important; color: #fff; }
.ks-card-diff.selected { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-color: #fff !important; color: #fff; }

/* 選択時の説明文の視認性向上 */
.ks-card.selected .ks-card-desc {
    color: #fff;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.ks-setup-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px; /* 10px から 4px に縮小して下部のはみ出しを防止 */
}

/* ----- セットアップ画面のヘッダー（タイトル＋お題を横並び） ----- */
.ks-setup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ks-setup-header .ks-title { flex: 0 0 auto; margin: 0; }
/* お題パネルは自然幅で、タイトルのすぐ隣に並ぶ */
.ks-setup-header .ks-challenge-panel { flex: 0 1 auto; margin: 0; }

/* モバイル: 折返し禁止で1行に並べる（中央寄せ） */
.is-mobile-device .ks-setup-header {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.is-mobile-device .ks-setup-header .ks-challenge-panel {
    flex: 0 1 auto;
    min-width: 0; /* 必要に応じてラベルを切り詰められるように */
    margin: 0;
}

/* ----- 「いまのおだい」チャレンジパネル ----- */
/* デザイン方針：
   - 常に1行構造（head 左 + chip 右）に統一。タイトル横に並んでも縦に伸びない。
   - 文字は最低 11px キープして読みやすさ確保。
   - モバイルは短ラベル、PC は長ラベル。 */
.ks-challenge-panel {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(56, 189, 248, 0.13));
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 10px;
    padding: 4px 12px;
    margin: 0;
    max-width: 720px;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.08) inset;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ks-challenge-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.ks-challenge-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--ks-accent-gold);
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* 8方向の黒縁取り＋金グロウで小さい字でも視認性◎ */
    text-shadow:
        -1px -1px 0 #000,  1px -1px 0 #000,
        -1px  1px 0 #000,  1px  1px 0 #000,
        -1px  0   0 #000,  1px  0   0 #000,
         0  -1px 0 #000,   0   1px 0 #000,
         0 0 8px rgba(251, 191, 36, 0.5);
}
.ks-challenge-progress {
    font-size: 12px;
    font-weight: 900;
    color: #fbbf24;
    background: rgba(0, 0, 0, 0.4);
    padding: 1px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.ks-challenge-list {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    gap: 4px;
    justify-content: flex-start;
}
.ks-challenge-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 7px;
    padding: 3px 9px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    transition: transform 0.15s ease;
}
.ks-challenge-chip.ks-challenge-done {
    background: linear-gradient(135deg, #15803d, #22c55e);
    border-color: rgba(187, 247, 208, 0.75);
    color: #fff;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
}
.ks-challenge-icon {
    font-size: 12px;
    /* 絵文字には text-shadow が効きにくいので透明な縁取り風シルエットだけ薄く付与 */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}
.ks-challenge-label {
    font-weight: 900;
    letter-spacing: 0.3px;
    /* 黒の8方向アウトラインで小さい文字でもくっきり読めるように */
    text-shadow:
        -1px -1px 0 #000,  1px -1px 0 #000,
        -1px  1px 0 #000,  1px  1px 0 #000,
        -1px  0   0 #000,  1px  0   0 #000,
         0  -1px 0 #000,   0   1px 0 #000;
}
/* デフォルトは長ラベル（PC 想定）。モバイルだけ短ラベルに切替 */
.ks-challenge-label-short { display: none; }

/* PC: 文字サイズだけ大きく。1行構造はそのまま */
#kuku-sniper-ui:not(.is-mobile-device) .ks-challenge-panel {
    padding: 6px 16px;
    border-radius: 12px;
    gap: 14px;
}
#kuku-sniper-ui:not(.is-mobile-device) .ks-challenge-title { font-size: 18px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-challenge-progress { font-size: 15px; padding: 2px 14px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-challenge-chip { font-size: 14px; padding: 4px 12px; border-radius: 9px; }
#kuku-sniper-ui:not(.is-mobile-device) .ks-challenge-icon { font-size: 14px; }

/* モバイル: 余白圧縮のみ。1行構造はベースで担保済 */
.is-mobile-device .ks-challenge-panel {
    padding: 3px 8px;
    border-radius: 8px;
    gap: 6px;
}
.is-mobile-device .ks-challenge-title { font-size: 10.5px; }
.is-mobile-device .ks-challenge-progress { font-size: 10.5px; padding: 0 6px; }
/* モバイルでも 1 つだけ表示なのでスクロール不要 */
.is-mobile-device .ks-challenge-chip {
    font-size: 12px;
    padding: 2px 8px;
    flex-shrink: 0;
}
.is-mobile-device .ks-challenge-icon { font-size: 12px; }
/* モバイルでは短ラベルに切替 */
.is-mobile-device .ks-challenge-label-full { display: none; }
.is-mobile-device .ks-challenge-label-short { display: inline; }

.ks-start-btn {
    padding: 6px 36px; /* 8px 50px からパディングを引き締め */
    font-size: 18px;   /* 22px から 18px へ最適化 */
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 16px; /* 40px (丸) から他の主要ボタンと同じ 16px (美しい角丸四角) に統一！ */
    cursor: pointer;
    box-shadow: 0 0 15px rgba(225, 29, 72, 0.4);
    font-family: inherit;
    transition: all 0.2s;
}
.ks-start-btn:hover { transform: scale(1.05); filter: brightness(1.2); }

.ks-quit-btn {
    padding: 6px 16px; /* パディング圧縮 */
    font-size: 14px;   /* 16px から 14px へ */
    color: #fff;
    background: rgba(30, 41, 59, 0.85); /* 高級ダークスレート (85%不透明度) でくっきり浮き出る！ */
    border: 1.5px solid rgba(255, 255, 255, 0.3); /* やさしい白の枠線 */
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    transition: all 0.2s;
}
.ks-quit-btn:hover {
    background: rgba(244, 63, 94, 0.85); /* ホバー時はやさしい赤に輝く！ */
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

/* ----- プレイ画面 ----- */

.ks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #fff;
    background: var(--ks-glass-bg);
    padding: 6px 20px;
    border-radius: 12px;
    border: 1px solid var(--ks-glass-border);
    backdrop-filter: blur(10px);
}

.ks-progress { font-size: 15px; color: var(--ks-accent-blue); font-weight: 900; }

.ks-lives { display: flex; gap: 5px; }
.ks-heart { font-size: 24px; transition: all 0.3s; }
.ks-heart.on  { color: #f43f5e; filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.8)); }
.ks-heart.off { color: #1e293b; opacity: 0.3; }

.ks-question {
    text-align: center;
    font-size: 44px;
    font-weight: 900;
    background: rgba(15, 23, 42, 0.75); /* 背景を少し暗いダークブルーグラスにして文字との明度差（コントラスト）を圧倒的強化！ */
    border: 2px solid var(--ks-accent-blue);
    border-radius: 16px;
    padding: 8px 0;
    margin-bottom: 8px;
    color: #fff;
    letter-spacing: 6px;
    /* フチ取りを完全廃止し、フォント本来の美しさを際立たせる極上ドロップシャドウ ✖ 上品ブルーグロー！ */
    text-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.9),   /* 漆黒の美しい立体影 */
        0 0 10px var(--ks-accent-blue); /* 浮き上がる上品なブルー光彩 */
}
.ks-q-mark { color: var(--ks-accent-gold); animation: ks-pulse 0.8s infinite alternate; display: inline-block; }
.ks-q-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 3px dashed var(--ks-accent-gold);
    border-radius: 12px;
    color: var(--ks-accent-gold);
    background: rgba(253, 224, 71, 0.1);
    font-size: 32px;
    font-weight: 900;
    vertical-align: middle;
    margin: 0 8px;
    box-shadow: 0 0 10px rgba(253, 224, 71, 0.3);
    animation: ks-box-glow 0.8s infinite alternate;
}

@keyframes ks-pulse {
    from { opacity: 0.8; transform: scale(1); }
    to { opacity: 1; transform: scale(1.1); }
}
@keyframes ks-box-glow {
    from { transform: scale(0.98); box-shadow: 0 0 6px rgba(253, 224, 71, 0.3); opacity: 0.8; }
    to { transform: scale(1.05); box-shadow: 0 0 16px rgba(253, 224, 71, 0.7); opacity: 1; }
}

.ks-playarea {
    position: relative;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--ks-glass-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);
    max-width: 100%;
}

.ks-target {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.6);
    background:
        radial-gradient(circle, rgba(0,0,0,0.4) 0%, transparent 80%),
        url('../assets/magic_target_orb.png');
    background-size: cover;
    background-position: center;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), inset 0 0 10px rgba(0,0,0,0.5);
    transition: left 0.2s cubic-bezier(0.1, 0.7, 0.1, 1), top 0.2s cubic-bezier(0.1, 0.7, 0.1, 1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 強力なアウトライン */
    text-shadow:
        -2px -2px 0 #000,  2px -2px 0 #000,
        -2px  2px 0 #000,  2px  2px 0 #000,
         0px  0px 10px rgba(0,0,0,1);
}

/* スナイパー画面全体のタップ要素に iOS コールアウト無効化を適用
   （的・段チップ・カード・各種ボタンで Google 検索ポップアップを防ぐ） */
.ks-screen,
.ks-screen button,
.ks-target, .ks-chip, .ks-card,
.ks-start-btn, .ks-back-btn, .ks-quit-btn,
.ks-retry-btn, .ks-record-btn {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
}
.ks-target:hover { transform: scale(1.1); border-color: var(--ks-accent-gold); }
/* キーボード操作時のみフォーカスを視覚化（マウス/タップ時は光らない） */
.ks-target:focus { outline: none; }
.ks-target:focus-visible {
    outline: none;
    transform: scale(1.15);
    border-color: var(--ks-accent-gold);
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.9), 0 0 12px rgba(251, 191, 36, 0.7) inset;
}

/* キーボード操作時のフォーカス表示（はみ出し黄色枠を遮断し、はみ出しゼロの極上ゴールド発光で現在地を完璧にハッキリ強調！） */
#kuku-sniper-ui * {
    outline: none !important;
}
#kuku-sniper-ui *:focus,
#kuku-sniper-ui *:active {
    outline: none !important;
}

/* 矢印キー操作でフォーカスが当たった要素（現在地）は、中の色は一切変えず、枠線だけをゴールドに輝かせる！ */
#kuku-sniper-ui button:focus-visible,
#kuku-sniper-ui .ks-step-card:focus-visible,
#kuku-sniper-ui .ks-card:focus-visible,
#kuku-sniper-ui .ks-chip:focus-visible {
    outline: none !important;
    border-color: var(--ks-accent-gold) !important; /* 現在地は誰が見ても一瞬でわかるゴールド！ */
    /* background の強制上書きは完全廃止！中の色は絶対にキープ！ */
    transform: none !important; /* 上下移動などの不要なアニメーション・サイズ変化を完全根絶！ */
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.75) !important; /* 角丸に100%沿う美しいゴールド of グロー */
}

/* すでに選択決定されている状態（.selected）は、シャープな白枠と美しい青いグラデーション背景でどっしり表現！ */
#kuku-sniper-ui .selected {
    outline: none !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; /* グラデーション背景を絶対死守！ */
    border-color: #fff !important; /* 決定項目は美しい白枠！ */
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important; /* スッキリとした青いグロー */
    transform: none !important;
    color: #fff !important;
}

/* 決定されている状態のまま、さらに現在地カーソルが乗った（hover/focus）時は、背景青グラデーションを維持したまま、枠線がゴールドに輝く！ */
#kuku-sniper-ui .selected:hover,
#kuku-sniper-ui .selected:focus,
#kuku-sniper-ui .selected:focus-visible {
    outline: none !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: var(--ks-accent-gold) !important; /* 枠線がゴールドに光る！ */
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.8) !important; /* ゴールドグローに変化！ */
    transform: none !important; /* 選択中のものはガタガタ動かさない */
    color: #fff !important;
}

.ks-target-correct { animation: ks-target-hit 0.6s forwards; z-index: 10; pointer-events: none; }
.ks-target-correct-flash { animation: ks-target-flash-anim 0.6s ease; z-index: 10; pointer-events: none; }
.ks-target-wrong { animation: ks-target-shake 0.4s linear; border-color: #f43f5e; }

@keyframes ks-target-hit {
    0% { transform: scale(1); opacity: 1; filter: brightness(1); }
    100% { transform: scale(3); opacity: 0; filter: brightness(3) blur(10px); }
}

@keyframes ks-target-flash-anim {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.15); filter: brightness(3); box-shadow: 0 0 35px rgba(251, 191, 36, 1); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes ks-target-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-5px); }
}

/* ----- リザルト画面 ----- */

.ks-screen.ks-result {
    width: 90% !important;
    max-width: 580px !important;
    min-height: auto !important;
    height: auto !important;
    margin: auto !important;
    padding: 20px 30px;
    background: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.3) 0%, #0f172a 80%);
    border: 4px solid var(--ks-accent-gold);
    border-radius: 30px;
    text-align: center;
    box-shadow: 
        0 0 80px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(251, 191, 36, 0.3),
        inset 0 0 20px rgba(251, 191, 36, 0.2);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    animation: ks-result-pop 0.7s cubic-bezier(0.25, 1.1, 0.5, 1.15);
    position: relative;
    overflow: hidden;
    align-self: center !important;
}

/* 放射状の光の束 */
.ks-result-rays {
    position: absolute;
    top: 50%; left: 50%; width: 200%; height: 200%;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg, 
        transparent 0deg 15deg, 
        rgba(251, 191, 36, 0.05) 15deg 30deg
    );
    animation: ks-rotate 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* 紙吹雪エフェクト */
.ks-confetti-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.ks-confetti {
    position: absolute;
    /* 各インスタンスは --ks-confetti-* カスタムプロパティでランダム値を流し込む */
    width: var(--ks-confetti-size, 8px);
    height: var(--ks-confetti-size, 8px);
    left: var(--ks-confetti-left, 0%);
    background: var(--ks-confetti-color, var(--ks-accent-gold));
    border-radius: 2px;
    animation: ks-confetti-fall 3s linear infinite;
    animation-delay: var(--ks-confetti-delay, 0s);
}
/* ----- 結果画面の星表示 ----- */
.ks-result-stars-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 8px 0 14px;
    width: 100%;
}
.ks-result-stars-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 20px;
    border-radius: 20px;
    border: 1.5px solid rgba(251, 191, 36, 0.25);
    min-width: 170px;
    justify-content: space-between;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.ks-result-stars-row.ks-stars-row-time {
    border-color: rgba(56, 189, 248, 0.25);
}
.ks-result-stars-row-label {
    font-size: 13px;
    font-weight: 900;
    color: var(--ks-accent-gold);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
    letter-spacing: 1px;
}
.ks-result-stars-row.ks-stars-row-time .ks-result-stars-row-label {
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.ks-result-stars-row-stars {
    font-size: 26px;
    display: flex;
    gap: 8px;
    line-height: 1;
}
/* 星本体: 初期状態（小さく薄く）→ JS で順次フェードイン */
.ks-life-star, .ks-time-star {
    display: inline-block;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.15;
    transform: scale(0.5);
}
.ks-life-star {
    color: var(--ks-accent-gold);
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
}
.ks-time-star {
    color: #38bdf8;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.8);
}
.ks-life-star.ks-star-empty,
.ks-time-star.ks-star-empty {
    color: #4b5563;
    text-shadow: none;
    opacity: 0.2;
    transform: scale(0.8);
}
@keyframes ks-confetti-fall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(500px) rotate(720deg); opacity: 0; }
}

/* ----- 完全クリアボーナス：コインシャワー ----- */
.ks-bonus-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    pointer-events: none; /* 子要素（コイン）のみがタップを受ける */
}
.ks-bonus-banner {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 52;
    text-align: center;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(244, 114, 22, 0.95));
    color: #fff;
    border: 3px solid #fff5b4;
    border-radius: 18px;
    padding: 14px 32px 16px;
    box-shadow: 0 10px 32px rgba(251, 191, 36, 0.7), inset 0 0 16px rgba(255, 255, 255, 0.4);
    animation: ks-bonus-banner-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    min-width: 240px;
}
/* シャワー開始時の一瞬だけ画面上端に出すヒント文字（コインのタップ動線を邪魔しないよう約1.4秒で消える） */
.ks-bonus-intro {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 51;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff5b4;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(251, 191, 36, 0.95);
    pointer-events: none;
    animation: ks-bonus-intro-fade 1.4s ease-out forwards;
    white-space: nowrap;
}
@keyframes ks-bonus-intro-fade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.9); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
    65%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.95); }
}
.is-mobile-device .ks-bonus-intro { font-size: 17px; }
.ks-bonus-title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.1;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 0 18px rgba(255, 255, 255, 0.6);
}
.ks-bonus-subtitle {
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.ks-bonus-final {
    color: #fff8c5;
    animation: ks-bonus-final-pop 0.55s ease-out;
}
@keyframes ks-bonus-banner-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.7); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ks-bonus-final-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    50%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.ks-bonus-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ks-bonus-coin {
    position: absolute;
    top: -80px;
    width: 82px;
    height: 82px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    animation-name: ks-bonus-coin-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.1s ease;
    will-change: transform;
}
.ks-bonus-coin-glyph {
    display: block;
    font-size: 62px;
    line-height: 82px;
    text-align: center;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.95), 0 4px 8px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}
.ks-bonus-coin:hover { transform: scale(1.12); }
.ks-bonus-coin-tapped {
    animation: ks-bonus-coin-burst 0.32s ease-out forwards !important;
    pointer-events: none;
}

/* ---- ドロップ階層別の見た目（数字ラベルは無し。形状とオーラで価値を表す） ---- */
.ks-bonus-coin-t1 .ks-bonus-coin-glyph {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.55));
}
.ks-bonus-coin-t5 {
    width: 86px; height: 86px;
}
.ks-bonus-coin-t5 .ks-bonus-coin-glyph {
    font-size: 70px; line-height: 86px;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.95));
    text-shadow: 0 0 16px rgba(250, 204, 21, 1), 0 4px 8px rgba(0, 0, 0, 0.4);
}
.ks-bonus-coin-t10 {
    width: 94px; height: 94px;
}
.ks-bonus-coin-t10 .ks-bonus-coin-glyph {
    font-size: 74px; line-height: 94px;
    filter: drop-shadow(0 0 12px rgba(110, 231, 245, 0.95));
    text-shadow: 0 0 18px rgba(110, 231, 245, 1), 0 4px 8px rgba(0, 0, 0, 0.4);
}
.ks-bonus-coin-t50 {
    width: 110px; height: 110px;
    animation-name: ks-bonus-coin-fall, ks-bonus-coin-shimmer;
    animation-duration: inherit, 0.8s;
    animation-iteration-count: 1, infinite;
}
.ks-bonus-coin-t50 .ks-bonus-coin-glyph {
    font-size: 88px; line-height: 110px;
    filter: drop-shadow(0 0 16px rgba(216, 180, 254, 1));
    text-shadow: 0 0 22px rgba(216, 180, 254, 1), 0 0 36px rgba(192, 132, 252, 0.85), 0 4px 8px rgba(0, 0, 0, 0.4);
}
.ks-bonus-coin-t100 {
    width: 128px; height: 128px;
    animation-name: ks-bonus-coin-fall, ks-bonus-coin-rainbow;
    animation-duration: inherit, 1.2s;
    animation-iteration-count: 1, infinite;
}
.ks-bonus-coin-t100 .ks-bonus-coin-glyph {
    font-size: 108px; line-height: 128px;
    filter: drop-shadow(0 0 22px rgba(255, 200, 80, 1));
    text-shadow: 0 0 30px rgba(255, 200, 80, 1), 0 0 50px rgba(244, 63, 94, 0.75), 0 4px 8px rgba(0, 0, 0, 0.4);
}
@keyframes ks-bonus-coin-shimmer {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.4); }
}
@keyframes ks-bonus-coin-rainbow {
    0%   { filter: hue-rotate(0deg) brightness(1.1); }
    100% { filter: hue-rotate(360deg) brightness(1.1); }
}

/* ---- アイテム取得時のポップアップ（タップ位置からふわっと浮き上がる） ---- */
.ks-bonus-popgain {
    position: absolute;
    z-index: 60;
    font-size: 22px;
    font-weight: 900;
    color: #fff5b4;
    text-shadow: 0 2px 0 #000, 0 0 18px rgba(251, 191, 36, 1);
    pointer-events: none;
    animation: ks-bonus-popgain-fly 0.9s ease-out forwards;
    white-space: nowrap;
}
.ks-bonus-popgain-t1  { font-size: 20px; }
.ks-bonus-popgain-t5  { font-size: 24px; color: #fef3c7; text-shadow: 0 2px 0 #000, 0 0 18px rgba(250, 204, 21, 1); }
.ks-bonus-popgain-t10 { font-size: 26px; color: #cffafe; text-shadow: 0 2px 0 #000, 0 0 18px rgba(34, 211, 238, 1); }
.ks-bonus-popgain-t50 { font-size: 30px; color: #f3e8ff; text-shadow: 0 2px 0 #000, 0 0 22px rgba(192, 132, 252, 1); }
.ks-bonus-popgain-t100 {
    font-size: 34px;
    background: linear-gradient(135deg, #f43f5e, #f59e0b, #84cc16, #06b6d4, #a855f7);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 16px rgba(255, 200, 80, 1));
}
@keyframes ks-bonus-popgain-fly {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.55); }
    20%  { opacity: 1; transform: translate(-50%, -16px) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -72px) scale(0.9); }
}

@keyframes ks-bonus-coin-fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    100% { transform: translate(var(--coin-drift, 0px), calc(100vh + 120px)) rotate(var(--coin-rot, 360deg)); opacity: 1; }
}
@keyframes ks-bonus-coin-burst {
    0%   { transform: scale(1) translateY(0); opacity: 1; }
    50%  { transform: scale(1.6) translateY(-22px); opacity: 0.9; }
    100% { transform: scale(0.2) translateY(-46px); opacity: 0; }
}
.is-mobile-device .ks-bonus-coin {
    width: 48px;
    height: 48px;
}
.is-mobile-device .ks-bonus-coin-glyph { font-size: 38px; line-height: 48px; }
.is-mobile-device .ks-bonus-coin-t5    { width: 52px; height: 52px; }
.is-mobile-device .ks-bonus-coin-t5  .ks-bonus-coin-glyph { font-size: 42px; line-height: 52px; }
.is-mobile-device .ks-bonus-coin-t10   { width: 56px; height: 56px; }
.is-mobile-device .ks-bonus-coin-t10 .ks-bonus-coin-glyph { font-size: 46px; line-height: 56px; }
.is-mobile-device .ks-bonus-coin-t50   { width: 66px; height: 66px; }
.is-mobile-device .ks-bonus-coin-t50 .ks-bonus-coin-glyph { font-size: 54px; line-height: 66px; }
.is-mobile-device .ks-bonus-coin-t100  { width: 76px; height: 76px; }
.is-mobile-device .ks-bonus-coin-t100 .ks-bonus-coin-glyph { font-size: 64px; line-height: 76px; }
.is-mobile-device .ks-bonus-title { font-size: 22px; }
.is-mobile-device .ks-bonus-subtitle { font-size: 11px; }

@keyframes ks-result-pop {
    0% { opacity: 0; transform: scale(0.5) translateY(100px) rotateX(-20deg); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotateX(0); }
}

.ks-result-icon-container {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    z-index: 2;
}

.ks-result-shine {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: ks-shine-pulse 1.5s infinite alternate;
}

.ks-result-icon {
    font-size: 60px;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1));
}

.ks-result-title {
    font-size: 38px;
    margin: 0 0 8px;
    font-weight: 900;
    background: linear-gradient(to bottom, #fff 20%, var(--ks-accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
    position: relative;
    z-index: 2;
    letter-spacing: 2px;
}

.ks-result-stars {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.ks-star {
    font-size: 32px;
    color: rgba(255,255,255,0.1);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ks-star.active {
    color: var(--ks-accent-gold);
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1));
    transform: scale(1.3) rotate(360deg);
}

.ks-result-message {
    color: #fff;
    font-size: 18px;
    margin-bottom: 18px;
    line-height: 1.5;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.ks-result-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.ks-retry-btn, .ks-back-btn {
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.ks-retry-btn {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 0 10px 20px rgba(217, 119, 6, 0.4);
}
.ks-retry-btn:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 30px rgba(217, 119, 6, 0.6); }

.ks-back-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--ks-glass-border);
}
.ks-back-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); }

.ks-result.gameover {
    background: radial-gradient(circle at 50% 20%, rgba(244, 63, 94, 0.2) 0%, #1e1b1b 80%);
    border-color: #f43f5e;
}
.ks-result.gameover .ks-result-title { 
    background: linear-gradient(to bottom, #fff 20%, #f43f5e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(244, 63, 94, 0.4);
}
.ks-result.gameover .ks-result-shine { background: radial-gradient(circle, rgba(244, 63, 94, 0.4) 0%, transparent 70%); }

/* ----- レコード画面 ----- */

.ks-records {
    max-width: 620px;
    margin: auto;
    padding: 30px;
    background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.2) 0%, #0f172a 90%);
    border: 3px solid var(--ks-glass-border);
    border-radius: 32px;
    /* フルスクリーン化に合わせて高さを動的に。旧 480px 固定だと縦の余白が広すぎる */
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
}

.ks-records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ks-records-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--ks-accent-gold);
    margin: 0;
}

.ks-record-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 20px;
    /* flex column の子はデフォルトで min-height: auto = 内容サイズ。
       これを打ち消さないと overflow-y: auto が機能せず親を押し広げ画面外にはみ出す。
       Chromebook（縦768px程度）で記録カードが多いステージで顕在化。 */
    min-height: 0;
}
/* スクロールバーのカスタマイズ */
.ks-record-list::-webkit-scrollbar { width: 8px; }
.ks-record-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.ks-record-list::-webkit-scrollbar-thumb { background: var(--ks-accent-gold); border-radius: 4px; }

.ks-record-item {
    display: grid;
    grid-template-columns: 60px 100px 100px 1fr;
    gap: 15px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 8px;
    align-items: center;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.ks-record-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    transform: translateX(5px);
}

.ks-rec-dan { font-weight: 900; color: var(--ks-accent-gold); font-size: 18px; }
.ks-rec-mode, .ks-rec-diff { color: #94a3b8; font-size: 14px; }
.ks-rec-time { text-align: right; font-family: monospace; font-size: 18px; color: #fff; }
.ks-rec-empty { color: rgba(255,255,255,0.2) !important; }

/* ニューレコードのラベル */
.ks-new-record-label {
    display: inline-block;
    padding: 2px 8px;
    background: #f43f5e;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 10px;
    animation: ks-pulse 1s infinite alternate;
}

.ks-result-best {
    margin-top: 10px;
    font-size: 18px;
    color: #94a3b8;
}
.ks-result-best b { color: var(--ks-accent-gold); }

/* ----- プレミアム・レコードボタン ----- */
.ks-record-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.ks-record-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.6);
    filter: brightness(1.1);
}
.ks-record-btn::before { content: '🏆'; font-size: 20px; }

/* ----- 刷新・レコード画面 ----- */
.ks-records {
    max-width: 680px;
    width: 95%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 0 50px rgba(0,0,0,0.8), 0 0 20px rgba(251, 191, 36, 0.1);
}

.ks-records-summary {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 25px;
    border-radius: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ライフ/タイムの星覇率を2列で並べて上下サイズを半分に。
   スマホも2列を維持しつつ、内容のフォントを縮めて狭幅でも収める。 */
.ks-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.is-mobile-device .ks-summary-grid {
    gap: 8px;
}
/* スマホ 2 列で星覇率テキストが折り返さないよう、フォントを引き締める */
.is-mobile-device .ks-summary-cell .ks-summary-text {
    font-size: 11px;
    letter-spacing: -0.3px;
    gap: 4px;
}
.is-mobile-device .ks-summary-cell .ks-summary-text b {
    font-size: 13px;
}
.ks-summary-cell {
    min-width: 0;
}
.ks-summary-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 16px;
    color: #94a3b8;
}
.ks-summary-text b { color: var(--ks-accent-gold); font-size: 20px; }

.ks-progress-bg {
    height: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    overflow: hidden;
}
.ks-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ks-accent-gold), #fbbf24);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ks-record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
}

.ks-dan-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 15px;
    transition: transform 0.2s;
}
.ks-dan-card:hover {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(255, 255, 255, 0.05);
}
.ks-dan-card-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--ks-accent-gold);
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.ks-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed; /* 列幅を固定 */
}
.ks-mini-table th, .ks-mini-table td {
    padding: 6px 2px;
    text-align: center;
}
/* テーブルの各列幅を非対称に最適配分（スマホでも折り返さない極上設計） */
.ks-mini-table th:first-child, .ks-mini-table td:first-child {
    width: 62px;
}
.ks-mini-table th:nth-child(2), .ks-mini-table td:nth-child(2),
.ks-mini-table th:nth-child(4), .ks-mini-table td:nth-child(4),
.ks-mini-table th:nth-child(6), .ks-mini-table td:nth-child(6) {
    width: 34px; /* ゴールド星列：スリム */
}
.ks-mini-table th:nth-child(3), .ks-mini-table td:nth-child(3),
.ks-mini-table th:nth-child(5), .ks-mini-table td:nth-child(5),
.ks-mini-table th:nth-child(7), .ks-mini-table td:nth-child(7) {
    width: 66px; /* タイム＆ブルー星列：ワイド */
}

/* ALLカード（難易度タグなし6列）用の非対称配分 */
.ks-dan-card-all .ks-mini-table th:nth-child(1), .ks-dan-card-all .ks-mini-table td:nth-child(1),
.ks-dan-card-all .ks-mini-table th:nth-child(3), .ks-dan-card-all .ks-mini-table td:nth-child(3),
.ks-dan-card-all .ks-mini-table th:nth-child(5), .ks-dan-card-all .ks-mini-table td:nth-child(5) {
    width: 34px;
}
.ks-dan-card-all .ks-mini-table th:nth-child(2), .ks-dan-card-all .ks-mini-table td:nth-child(2),
.ks-dan-card-all .ks-mini-table th:nth-child(4), .ks-dan-card-all .ks-mini-table td:nth-child(4),
.ks-dan-card-all .ks-mini-table th:nth-child(6), .ks-dan-card-all .ks-mini-table td:nth-child(6) {
    width: 66px;
}
.ks-mini-table th {
    color: #cbd5e1;
    font-weight: normal;
    font-size: 10px; /* スマホでの幅を考慮して10pxに微調整 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap; /* 絶対に2行に折り返さない */
    letter-spacing: -0.5px; /* 文字間隔を少し詰めて収まりを良くする */
}
.ks-mini-table td {
    color: #cbd5e1;
    padding: 5px 2px;
    text-align: center;
    vertical-align: middle;
}

/* 九九実績テーブル：ダブルスター＆アライメント統一クラス */
.ks-record-cell-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    height: 16px;
}

.ks-record-gold-stars {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    letter-spacing: -1px;
    line-height: 1;
    position: relative;
    top: 2.2px;
}

.ks-record-time-text {
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    position: relative;
    top: 0.6px;
}

.ks-record-blue-stars {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    letter-spacing: -1px;
    line-height: 1;
    position: relative;
    top: 2.2px;
}
.ks-mini-table .best-time {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: #fff;
    font-size: 12px;
}
.ks-mini-table .no-record {
    color: rgba(255,255,255,0.1);
}

.ks-diff-tag {
    display: inline-block;
    width: 64px;
    padding: 2px 0;
    line-height: 1.4;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}
.ks-diff-easy { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.ks-diff-normal { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.ks-diff-hard { background: rgba(239, 68, 68, 0.2); color: #f87171; }

/* けいさんスナイパー記録のステップタグ（行ラベル用、難易度と区別） */
.asn-step-tag {
    background: rgba(168, 85, 247, 0.18);
    color: #c4b5fd;
    letter-spacing: -0.5px;
}

/* スマホ向け：記録画面の視認性向上 */
.is-mobile-device .ks-records {
    padding: 10px;
    max-height: 95%;
    min-height: 0;
}

.is-mobile-device .ks-records-title {
    font-size: 28px;
    text-align: center;
}

.is-mobile-device .ks-summary-text {
    font-size: 13px; /* スマホ用も視認性確保のため引き上げ。1行は維持 */
    flex-direction: row; /* 横並びに固定 */
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    letter-spacing: -0.3px; /* 1行収まりの安全マージン */
}

.is-mobile-device .ks-summary-text b {
    font-size: 16px;
}

.is-mobile-device .ks-record-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.is-mobile-device .ks-dan-card {
    padding: 15px 8px;
}

.is-mobile-device .ks-dan-card-title {
    font-size: 22px;
    margin-bottom: 15px;
}

.is-mobile-device .ks-mini-table {
    font-size: 12px; /* スマホ用も読みやすさ優先で引き上げ */
}

.is-mobile-device .ks-mini-table th {
    font-size: 9.5px; /* ヘッダーも視認性アップ。列幅に合わせて控えめに */
    padding: 4px 1px;
    letter-spacing: -1px; /* 文字間を極限まで詰め、隣との衝突を防ぐ */
    white-space: nowrap; /* 改行は絶対に防止 */
}

.is-mobile-device .ks-mini-table td {
    padding: 6px 2px;
}

.is-mobile-device .ks-record-cell-container {
    height: 18px;
    gap: 3px; /* タイム+ブルー星の収まりを確保 */
}

.is-mobile-device .ks-record-time-text {
    font-size: 11px; /* タイム表示を読みやすく拡大 */
}

.is-mobile-device .ks-record-gold-stars,
.is-mobile-device .ks-record-blue-stars {
    font-size: 8.5px; /* 星サイズも引き上げ。letter-spacing -1pxで列幅内に収める */
}



.is-mobile-device .ks-diff-tag {
    width: 64px;
    font-size: 13px;
    padding: 3px 0;
}

.is-mobile-device .ks-mini-table th:first-child,
.is-mobile-device .ks-mini-table td:first-child {
    width: 64px; /* タグ列を少し細めにしてメイン列の余裕を確保 */
}

/* スマホ時はタイム列を広めに、星列を細めに振り替えて拡大文字に対応 */
.is-mobile-device .ks-mini-table th:nth-child(2),
.is-mobile-device .ks-mini-table td:nth-child(2),
.is-mobile-device .ks-mini-table th:nth-child(4),
.is-mobile-device .ks-mini-table td:nth-child(4),
.is-mobile-device .ks-mini-table th:nth-child(6),
.is-mobile-device .ks-mini-table td:nth-child(6) {
    width: 30px;
}
.is-mobile-device .ks-mini-table th:nth-child(3),
.is-mobile-device .ks-mini-table td:nth-child(3),
.is-mobile-device .ks-mini-table th:nth-child(5),
.is-mobile-device .ks-mini-table td:nth-child(5),
.is-mobile-device .ks-mini-table th:nth-child(7),
.is-mobile-device .ks-mini-table td:nth-child(7) {
    width: 74px;
}

/* ALLカード（6列）もスマホ用に再配分 */
.is-mobile-device .ks-dan-card-all .ks-mini-table th:nth-child(1),
.is-mobile-device .ks-dan-card-all .ks-mini-table td:nth-child(1),
.is-mobile-device .ks-dan-card-all .ks-mini-table th:nth-child(3),
.is-mobile-device .ks-dan-card-all .ks-mini-table td:nth-child(3),
.is-mobile-device .ks-dan-card-all .ks-mini-table th:nth-child(5),
.is-mobile-device .ks-dan-card-all .ks-mini-table td:nth-child(5) {
    width: 30px;
}
.is-mobile-device .ks-dan-card-all .ks-mini-table th:nth-child(2),
.is-mobile-device .ks-dan-card-all .ks-mini-table td:nth-child(2),
.is-mobile-device .ks-dan-card-all .ks-mini-table th:nth-child(4),
.is-mobile-device .ks-dan-card-all .ks-mini-table td:nth-child(4),
.is-mobile-device .ks-dan-card-all .ks-mini-table th:nth-child(6),
.is-mobile-device .ks-dan-card-all .ks-mini-table td:nth-child(6) {
    width: 74px;
}

/* ----- コンプリート表示のスタイル ----- */
.ks-chip-completed {
    border-color: var(--ks-accent-gold) !important;
    position: relative;
    overflow: visible;
}

.ks-comp-crown {
    position: absolute;
    top: -12px;
    right: -8px;
    font-size: 16px;
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.8));
    animation: ks-crown-bounce 2s infinite alternate ease-in-out;
}

@keyframes ks-crown-bounce {
    from { transform: translateY(0) rotate(-10deg); }
    to { transform: translateY(-4px) rotate(10deg); }
}

.ks-dan-card-completed {
    border: 2px solid var(--ks-accent-gold) !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
    position: relative;
}

.ks-comp-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    transform: rotate(5deg);
    pointer-events: none;
    z-index: 5;
    letter-spacing: 1px;
}

.is-mobile-device .ks-comp-badge {
    font-size: 12px;
    top: 15px;
    right: 5px;
}

.is-mobile-device .ks-comp-crown {
    font-size: 20px;
    top: -15px;
    right: -10px;
}

/* ========================================
   けいさんスナイパー：スモールステップUI
   ======================================== */

.ks-step-list-container {
    max-height: 140px; /* 220px から 140px へ劇的圧縮！スクロール可能なので10ステップすべてへ快適アクセス */
    overflow-y: auto;
    padding-right: 6px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列にしてスッキリ。10ステップなら 4行弱で全部見える */
    gap: 6px; /* gapを詰めて縦スペースを節約 */
}

.ks-step-list-container::-webkit-scrollbar {
    width: 6px;
}
.ks-step-list-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
.ks-step-list-container::-webkit-scrollbar-thumb {
    background: var(--ks-accent-blue);
    border-radius: 4px;
    box-shadow: 0 0 8px var(--ks-accent-blue);
}

.ks-step-card {
    position: relative;
    padding: 5px 10px; /* 8px 12px から 5px 10px へ極薄スリム化 */
    background: rgba(15, 23, 42, 0.6) !important;
    border: 2px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 10px !important; /* 角丸を少しシャープに */
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ガタつきのない、極めてシンプルかつ上品な0.1秒の高速フェードへ！ */
    transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
    font-family: inherit;
    color: #cbd5e1 !important;
    width: 100%;
    box-sizing: border-box;
    outline: none !important; /* どんなお邪魔枠も絶対に弾く！ */
}

.ks-step-card:focus, .ks-step-card:focus-visible, .ks-step-card:active {
    outline: none !important; /* フォーカス時・アクティブ時の金色お邪魔枠を完全排除！ */
    box-shadow: none !important;
}

.ks-step-card:hover:not(.ks-locked):not(.selected) {
    border-color: var(--ks-accent-gold) !important; /* 現在地は完全にゴールド（黄色）で統一！ */
    /* background は一切変更しない！中の色は絶対キープ！ */
    transform: none !important; /* 上下移動アニメーションを完全に廃止！ */
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.7) !important; /* ゴールドの美しい光彩！ */
    outline: none !important;
}

.ks-step-card.selected {
    border-color: #fff !important; /* 決定項目は誰が見ても一瞬でわかる白枠！ */
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important; /* スッキリとした青いグロー */
    outline: none !important;
}

.ks-step-card.selected:focus, .ks-step-card.selected:focus-visible, .ks-step-card.selected:active {
    outline: none !important;
    border-color: var(--ks-accent-gold) !important; /* 現在地が重なったときはゴールドに輝く！ */
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.8) !important; /* まばゆいゴールドグローに！ */
}

.ks-step-card.ks-locked {
    opacity: 0.45;
    cursor: not-allowed !important;
    background: rgba(15, 23, 42, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.ks-step-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
}

.ks-step-label {
    font-size: 10px; /* 11px から 10px へ */
    color: var(--ks-accent-blue);
    font-weight: bold;
}

.ks-step-card.selected .ks-step-label {
    color: var(--ks-accent-gold);
}

.ks-step-name {
    font-size: 13px; /* 15px から 13px へコンパクト化 */
    font-weight: 900;
}

.ks-step-record-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.ks-step-stars {
    font-size: 12px; /* 少しコンパクトに */
    color: var(--ks-accent-gold);
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}

.ks-step-best-time {
    font-size: 9px;
    color: #94a3b8;
}

.ks-step-card.selected .ks-step-best-time {
    color: rgba(255, 255, 255, 0.8);
}

/* モバイル対応の調整 */
.is-mobile-device .ks-step-list-container {
    grid-template-columns: repeat(3, 1fr); /* スマホも3列でスッキリ */
    max-height: 190px; /* サブタイトル非表示で浮いたスペースを活かし、165px から 190px に拡張して見やすく */
}

.is-mobile-device .ks-step-card {
    padding: 4px 6px; /* 8px 8px から 4px 6px へ上下左右を少し狭めてスリム化 */
}

.is-mobile-device .ks-step-name {
    font-size: 13px;
}

/* ===== スマホのセットアップ画面はビューポート内にピッタリ収める ===== */
/* スクロールせずに上下に収まるよう、ステップ一覧（fieldset内）が
   残り高さを flex:1 で吸収する設計に切り替える。 */
.is-mobile-device .ks-screen.ks-setup {
    height: 100%;
    min-height: 0;
    justify-content: flex-start;
    overflow: hidden;
    padding: 4px 8px;
    gap: 4px;
}

/* タイトル・サブタイトルも圧縮 */
.is-mobile-device .ks-screen.ks-setup .ks-title {
    font-size: 19px;
    margin: 0;
}
.ks-screen.ks-setup .ks-subtitle {
    display: none; /* PC・モバイル共通でサブタイトルは非表示。setup を縦に詰めてスタートまで一画面で見えるように。 */
}

/* fieldset の padding/margin を最小化 */
.is-mobile-device .ks-screen.ks-setup .ks-fieldset {
    padding: 4px 10px 6px;
    margin: 0 !important; /* インライン margin-bottom:8px を打ち消し */
}
.is-mobile-device .ks-screen.ks-setup .ks-fieldset legend {
    font-size: 11px;
    padding: 1px 6px;
}

/* チップ／カードも圧縮 */
.is-mobile-device .ks-screen.ks-setup .ks-chip {
    font-size: 15px;
    padding: 4px 0;
}
.is-mobile-device .ks-screen.ks-setup .ks-card {
    padding: 4px 6px;
}
.is-mobile-device .ks-screen.ks-setup .ks-card-title { font-size: 14px; }
.is-mobile-device .ks-screen.ks-setup .ks-card-desc { font-size: 10px; }
.is-mobile-device .ks-screen.ks-setup .ks-three-col { gap: 6px; }
.is-mobile-device .ks-screen.ks-setup .ks-dan-grid { gap: 4px; }

/* ステップ一覧を含む fieldset は flex:1 で残り縦領域を全部使う。
   ただし min-height:0 のままだとお題パネル等で押されて 0 まで潰れる場合があるため、
   78px を最低保証（ステップカード 1 行は必ず見え、内部スクロールで全 10 ステップへアクセス可）。 */
.is-mobile-device .ks-screen.ks-setup .ks-fieldset:has(.ks-step-list-container) {
    flex: 1 1 0;
    min-height: 78px;
    display: flex;
    flex-direction: column;
}
.is-mobile-device .ks-screen.ks-setup .ks-fieldset:has(.ks-step-list-container) .ks-step-list-container {
    flex: 1 1 0;
    min-height: 52px;
    max-height: none;
    overflow-y: auto;
}

/* アクション（スタート／きろく／やめる）も圧縮 */
.is-mobile-device .ks-screen.ks-setup .ks-setup-actions {
    gap: 8px;
    margin-top: 4px;
}
.is-mobile-device .ks-screen.ks-setup .ks-start-btn { font-size: 17px; padding: 7px 28px; }
.is-mobile-device .ks-screen.ks-setup .ks-record-btn { font-size: 14px; padding: 7px 20px; }
.is-mobile-device .ks-screen.ks-setup .ks-record-btn::before { font-size: 16px; }
.is-mobile-device .ks-screen.ks-setup .ks-quit-btn { font-size: 13px; padding: 7px 18px; }

/* ===== スマホのプレイ画面（ks-play）のレイアウト最適化 ===== */
.is-mobile-device .ks-screen.ks-play {
    padding: 8px 12px !important; /* 上下の余白を極限まで引き締め、縦スペースを確保 */
    gap: 4px;
}

.is-mobile-device .ks-screen.ks-play .ks-header {
    padding: 4px 12px;
    margin-bottom: 4px;
}

.is-mobile-device .ks-screen.ks-play .ks-progress {
    font-size: 13px;
}

.is-mobile-device .ks-screen.ks-play .ks-lives .ks-heart {
    font-size: 18px;
}

.is-mobile-device .ks-screen.ks-play .ks-timer {
    font-size: 18px !important;
    width: 90px !important;
    padding: 4px 8px !important;
}

.is-mobile-device .ks-screen.ks-play .ks-question {
    font-size: 28px; /* 問題の文字サイズを小さく引き締め、縦幅を節約 */
    padding: 4px 0;
    margin-bottom: 4px;
    letter-spacing: 2px;
}

.is-mobile-device .ks-screen.ks-play .ks-q-box {
    width: 32px;
    height: 32px;
    font-size: 22px;
    border-width: 2px;
}

/* スマホ版プレイエリアの高さ・的のサイズ調整 */
.is-mobile-device .ks-screen.ks-play .ks-playarea {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 180px; /* スマホ横持ちでも最低 180px はプレイエリアを保証！ */
}

/* スマホ版的の中のフォントサイズ調整 */
.is-mobile-device .ks-target {
    font-size: 22px; /* スマホ版的の中のフォントサイズを最適化 */
    border-width: 2px;
}

/* ===== スマホのクリア画面（ks-result）のレイアウト最適化 ===== */
.is-mobile-device .ks-screen.ks-result {
    padding: 10px 20px !important; /* 上下パディングを半分にして高さを節約 */
    border-radius: 20px !important;
    border-width: 3px !important; /* 枠線を少し細くしてスタイリッシュに */
    box-sizing: border-box !important;
}

.is-mobile-device .ks-screen.ks-result .ks-result-icon-container {
    margin-bottom: 4px;
}

.is-mobile-device .ks-screen.ks-result .ks-result-icon {
    font-size: 40px; /* トロフィーサイズを小さく */
}

.is-mobile-device .ks-screen.ks-result .ks-result-shine {
    width: 80px;
    height: 80px; /* 光彩サイズも縮小し上部のはみ出しを防止 */
}

.is-mobile-device .ks-screen.ks-result .ks-result-title {
    font-size: 26px; /* MISSION CLEAR! の文字を縮小 */
    margin: 0 0 4px;
}

.is-mobile-device .ks-screen.ks-result .ks-result-stars {
    gap: 8px;
    margin-bottom: 6px;
}

.is-mobile-device .ks-screen.ks-result .ks-star {
    font-size: 20px; /* 星のサイズを縮小 */
}

/* ライフ・タイムの行の文字サイズや余白も縮小 */
.is-mobile-device .ks-screen.ks-result .ks-result-stars span {
    font-size: 11px;
    padding: 2px 8px;
}

.is-mobile-device .ks-screen.ks-result .ks-result-message {
    font-size: 13px; /* クリアメッセージを縮小 */
    margin-bottom: 8px;
    line-height: 1.3;
}

.is-mobile-device .ks-screen.ks-result .ks-result-best {
    margin-top: 4px;
    font-size: 13px;
}

.is-mobile-device .ks-screen.ks-result .ks-result-actions {
    gap: 8px;
}

.is-mobile-device .ks-screen.ks-result .ks-retry-btn,
.is-mobile-device .ks-screen.ks-result .ks-back-btn {
    padding: 6px 14px; /* ボタンのパディングを圧縮して下部のはみ出しを完全防止 */
    font-size: 13px;
    border-radius: 12px;
}

/* ========================================
   宿屋クイズテンキーUI（プレミアム・ガラスモルフィズム）
   ======================================== */
#inn-quiz-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: rgba(10, 15, 30, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 2px solid rgba(160, 160, 255, 0.45);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(160, 160, 255, 0.2);
    color: #f8fafc;
    padding: 18px 16px 14px 16px;
    z-index: 3000;
    font-family: 'DotGothic16', 'Hiragino Maru Gothic ProN', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Noto Sans JP', sans-serif;
    box-sizing: border-box;
    text-align: center;
}

#inn-quiz-window.hidden {
    display: none !important;
}

.inn-quiz-header {
    font-size: 20px;
    color: #ffd700;
    text-align: center;
    border-bottom: 2px solid rgba(160, 160, 255, 0.3);
    padding-bottom: 8px;
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    font-weight: bold;
}

.inn-quiz-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.inn-quiz-question {
    font-size: 20px; /* 文字を 14px から 20px に大幅拡大して見やすく！ */
    font-weight: bold; /* クッキリ太字にして視認性を向上 */
    line-height: 1.5;
    text-align: center;
    color: #f8fafc; /* コントラストの高い鮮明な白に変更 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    margin-bottom: 14px;
    word-break: normal; /* 日本語や英語が不自然にちぎれるのを防止 */
    overflow-wrap: break-word;
}

.inn-quiz-disp-wrapper {
    background: rgba(0, 0, 0, 0.75);
    border: 2px solid rgba(160, 160, 255, 0.6);
    border-radius: 8px;
    width: 140px;
    text-align: center;
    padding: 6px 12px;
    margin-bottom: 16px;
    box-shadow: 0 0 10px rgba(160, 160, 255, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.8);
}

#inn-quiz-disp {
    font-size: 28px;
    color: #38bdf8;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
    font-family: monospace;
    font-weight: bold;
}

.inn-quiz-grid {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
    width: 100%;
}

.inn-quiz-btn {
    font-family: inherit;
    font-size: 20px;
    font-weight: bold;
    width: 60px;
    height: 50px;
    color: #fff;
    background: rgba(80, 80, 200, 0.4);
    border: 2px solid rgba(160, 160, 255, 0.6);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.inn-quiz-btn:hover {
    background: rgba(100, 100, 240, 0.6);
    border-color: rgba(200, 200, 255, 0.8);
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(100, 100, 240, 0.4);
}

.inn-quiz-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 宿屋テンキーUI用のキーボードフォーカス時 */
.inn-quiz-btn:focus-visible {
    outline: none !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    transform: scale(1.05);
}

.inn-quiz-btn.btn-danger {
    background: rgba(180, 50, 50, 0.5);
    border-color: rgba(255, 120, 120, 0.6);
}
.inn-quiz-btn.btn-danger:hover {
    background: rgba(210, 70, 70, 0.7);
    border-color: rgba(255, 160, 160, 0.8);
    box-shadow: 0 6px 12px rgba(210, 70, 70, 0.4);
}
.inn-quiz-btn.btn-danger:focus-visible {
    border-color: #ff8888 !important;
    box-shadow: 0 0 15px rgba(255, 136, 136, 0.8) !important;
}

.inn-quiz-btn.btn-success {
    background: rgba(40, 160, 80, 0.5);
    border-color: rgba(80, 220, 120, 0.6);
}
.inn-quiz-btn.btn-success:hover {
    background: rgba(60, 190, 100, 0.7);
    border-color: rgba(120, 255, 160, 0.8);
    box-shadow: 0 6px 12px rgba(60, 190, 100, 0.4);
}
.inn-quiz-btn.btn-success:focus-visible {
    border-color: #88ff88 !important;
    box-shadow: 0 0 15px rgba(136, 255, 136, 0.8) !important;
}

.inn-quiz-cancel-btn {
    font-family: inherit;
    font-size: 14px;
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.6);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 20px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: bold;
}

.inn-quiz-cancel-btn:hover {
    color: #fff;
    background: rgba(244, 63, 94, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}
.inn-quiz-cancel-btn:focus-visible {
    outline: none !important;
    border-color: #fb7185 !important;
    background: rgba(244, 63, 94, 0.6);
    box-shadow: 0 0 15px rgba(244, 63, 94, 0.8) !important;
}

/* モバイル向け最適化 */
.is-mobile-device #inn-quiz-window {
    width: 290px;
    padding: 12px;
}
.is-mobile-device .inn-quiz-grid {
    grid-template-columns: repeat(3, 54px);
    gap: 6px;
}
.is-mobile-device .inn-quiz-btn {
    width: 54px;
    height: 46px;
    font-size: 18px;
}