/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Orbitron:wght@400;700&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+Thai:wght@400;700&display=swap');

:root {
    /* Default Light Cyber Theme */
    --bg-base: #f8fafc;
    --bg-grid: rgba(2, 132, 199, 0.05);
    --panel-bg: rgba(255, 255, 255, 0.85);
    --text-main: #0f172a;
    --text-muted: #475569;
    --accent-primary: #2563eb;
    --accent-primary-hover: #1d4ed8;
    --accent-secondary: #059669;
    --accent-secondary-hover: #047857;
    --accent-danger: #dc2626;
    --border-glow: 0 10px 30px rgba(37, 99, 235, 0.15);
    --panel-border: 1px solid rgba(37, 99, 235, 0.2);
    --input-bg: rgba(255, 255, 255, 0.9);
    --radius-lg: 16px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --quiz-prompt-box-scale: 1;
    --quiz-prompt-font-scale: 1;
    --quiz-option-box-scale: 1;
    --quiz-option-font-scale: 1;
    --quiz-braille-scale: 1;
}

[data-theme="light"] {
    /* Explicit Light Theme */
    --bg-base: #f8fafc;
    --bg-grid: rgba(2, 132, 199, 0.05);
    --panel-bg: rgba(255, 255, 255, 0.85);
    --text-main: #0f172a;
    --text-muted: #475569;
    --accent-primary: #2563eb;
    --accent-primary-hover: #1d4ed8;
    --accent-secondary: #059669;
    --accent-secondary-hover: #047857;
    --accent-danger: #dc2626;
    --border-glow: 0 10px 30px rgba(37, 99, 235, 0.15);
    --panel-border: 1px solid rgba(37, 99, 235, 0.2);
    --input-bg: rgba(255, 255, 255, 0.9);
    --radius-lg: 16px;
    --radius-md: 8px;
    --radius-sm: 6px;
}

[data-theme="dark"] {
    /* Dark Neon Theme */
    --bg-base: #0b0f19;
    --bg-grid: rgba(56, 189, 248, 0.05);
    --panel-bg: rgba(15, 23, 42, 0.7);
    --text-main: #e2e8f0;
    --text-muted: #64748b;
    --accent-primary: #0ea5e9;
    --accent-primary-hover: #0284c7;
    --accent-secondary: #10b981;
    --accent-secondary-hover: #059669;
    --accent-danger: #ef4444;
    --border-glow: 0 0 15px rgba(14, 165, 233, 0.3);
    --panel-border: 1px solid rgba(14, 165, 233, 0.3);
    --input-bg: rgba(0, 0, 0, 0.5);
    --radius-lg: 16px;
    --radius-md: 8px;
    --radius-sm: 6px;
}

[data-theme="cyber"] {
    /* Cyberpunk Angular Theme */
    --bg-base: #050505;
    --bg-grid: rgba(250, 204, 21, 0.05);
    --panel-bg: rgba(15, 15, 20, 0.9);
    --text-main: #e2e8f0;
    --text-muted: #64748b;
    --accent-primary: #facc15;
    --accent-primary-hover: #eab308;
    --accent-secondary: #06b6d4;
    --accent-secondary-hover: #0891b2;
    --accent-danger: #ef4444;
    --border-glow: 0 0 10px rgba(250, 204, 21, 0.2);
    --panel-border: 2px solid var(--accent-primary);
    --input-bg: rgba(0, 0, 0, 0.8);
    --radius-lg: 0px;
    --radius-md: 0px;
    --radius-sm: 0px;
}

* {
    box-sizing: border-box; /* 패딩이 너비를 초과하여 오른쪽으로 치우치는 현상 방지 */
}

body {
    font-family: 'Orbitron', 'Noto Sans KR', 'Noto Sans Thai', sans-serif;
    background-color: var(--bg-base);
    background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px),
                      linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
    background-size: 30px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: var(--text-main);
    transition: background-color 0.4s, color 0.4s;
    overflow: hidden;
}

/* Navigation Controls (Top Left) */
.nav-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
}

/* System Controls (Top Right) */
.system-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    max-width: min(100vw - 40px, 520px);
    z-index: 100;
}
.system-controls__menu-toggle {
    display: none;
}
.system-controls__menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* 모바일 로그인(device-mobile) 또는 좁은 화면 → ☰ 한 버튼 + 드롭다운 */
@media (max-width: 768px) {
    #system-controls {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        position: fixed !important;
        top: max(8px, env(safe-area-inset-top)) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 200 !important;
    }
    #system-controls .system-controls__outside {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0 !important;
        flex-shrink: 0;
    }
    #system-controls .system-controls__menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0 !important;
        padding: 8px 14px;
        border-radius: 20px;
        position: relative !important;
    }
    #system-controls .system-controls__menu {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        width: min(260px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 10px;
        border-radius: 14px;
        background: var(--panel-bg);
        border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
        z-index: 210 !important;
    }
    #system-controls.is-menu-open .system-controls__menu {
        display: flex !important;
    }
    #system-controls .system-controls__menu .ctrl-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: center;
        position: static !important;
    }
}

/* device-mobile(넓은 화면 포함): ui_layout_pc.css !important 상단 바 덮어쓰기 */
body.device-mobile #system-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
    z-index: 200 !important;
    background: transparent !important;
}
body.device-mobile #system-controls .system-controls__outside {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    flex-shrink: 0;
    position: relative !important;
    pointer-events: auto !important;
}
body.device-mobile #system-controls .system-controls__menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    padding: 8px 14px;
    border-radius: 20px;
    position: relative !important;
    pointer-events: auto !important;
}
body.device-mobile #system-controls .system-controls__menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: min(260px, calc(100vw - 20px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px;
    border-radius: 14px;
    background: var(--panel-bg);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    z-index: 210 !important;
    pointer-events: auto !important;
}
body.device-mobile #system-controls.is-menu-open .system-controls__menu {
    display: flex !important;
}
body.device-mobile #system-controls .system-controls__menu .ctrl-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: center;
    position: static !important;
    pointer-events: auto !important;
}

/* 한·영 등 라벨 교체 시 너비 고정은 app.js refreshTopChromeButtonMinWidths()에서 실측(px) */
.system-controls .ctrl-btn,
.nav-controls .ctrl-btn {
    text-align: center;
    box-sizing: border-box;
}

/* 상단 시스템 버튼: 테마(cyber)에서 --panel-border 2px·radius 0 적용 시 박스 크기·형태가 바뀌지 않도록 고정 */
.ctrl-btn {
    background: var(--panel-bg);
    border: 1px solid rgba(37, 99, 235, 0.22);
    color: var(--text-main);
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.lang-select {
    min-width: 170px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-main) 50%),
        linear-gradient(135deg, var(--text-main) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.lang-select option {
    color: #111827;
}

[data-theme="dark"] .ctrl-btn {
    border-color: rgba(14, 165, 233, 0.32);
}

[data-theme="cyber"] .ctrl-btn {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.12);
}

.ctrl-btn:hover {
    box-shadow: var(--border-glow);
    background: var(--accent-primary);
    color: white;
}

.ctrl-btn.muted {
    color: var(--text-muted);
    border-color: var(--text-muted);
}
.ctrl-btn.muted:hover {
    background: var(--accent-danger);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
}

/* 점자(UEB): 각 Braille Patterns 문자(U+2800–) 셀 테두리 — 점 1–6 위치 가늠 */
.braille-display-row {
    letter-spacing: normal;
}
.braille-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1.15em;
    min-height: 1.35em;
    margin: 0 0.06em;
    padding: 0.06em 0.1em;
    vertical-align: middle;
    border: 1px solid var(--text-muted);
    border-radius: 6px;
    line-height: 1;
}

/* 점자 객관식 선지: 게임 화면 기본 13px보다 크게 */
#game-screen .option-btn.option-btn--braille-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: clamp(1.65rem, 4.8vw, 2.5rem) !important;
    line-height: 1.25;
    min-height: 3.25rem;
    text-align: center;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols2', 'Apple Symbols', 'Braille', ui-sans-serif, sans-serif !important;
}
#game-screen .option-btn.option-btn--braille-cell .braille-pick-option-num {
    flex: 0 0 auto;
    font-size: 0.72em;
    font-weight: 700;
    opacity: 0.75;
    align-self: flex-start;
    margin-top: 0.15em;
}
#game-screen .option-btn.option-btn--braille-cell .braille-pick-option-cell {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}
#game-screen .option-btn.option-btn--braille-cell .braille-cell {
    min-width: 2.1em;
    min-height: 2.5em;
    font-size: 1em;
    border-width: 1.5px;
}
#game-screen .option-btn .english-braille-reveal-append-inner .braille-display-row {
    font-size: clamp(1.35rem, 3.6vw, 1.85rem) !important;
    line-height: 1.45;
}
#game-screen .option-btn .english-braille-reveal-append-inner .braille-cell {
    min-width: 1.65em;
    min-height: 1.95em;
}

/**
 * 영어 점자 "칸마다 고르기" 슬롯: `.btn`(width:100%)·`secondary-btn`(흰 글자)를 쓰지 않는다.
 * 전체 너비 녹색 막대 + 보이지 않는 빈 칸(nbsp)으로 "빈 화면"처럼 보이는 문제 방지.
 */
button.braille-pick-slot {
    width: auto;
    max-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2.35em;
    min-height: 2.35em;
    padding: 10px 14px;
    margin: 0;
    font-size: 1.65em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols2', 'Apple Symbols', 'Braille', ui-sans-serif, sans-serif;
    cursor: pointer;
    border-radius: 10px;
    border: 2px dashed var(--text-muted);
    background: var(--input-bg);
    color: var(--text-main);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
button.braille-pick-slot:hover {
    border-color: var(--accent-primary);
    background: rgba(14, 165, 233, 0.08);
}
button.braille-pick-slot:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
button.braille-pick-slot.braille-pick-slot--active {
    border-style: solid;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.28);
}
button.braille-pick-slot.braille-pick-slot--filled {
    border-style: solid;
    border-color: rgba(16, 185, 129, 0.55);
}

/* Main Container — 로비 등 기본; 게임 중 추가 타이트는 :has(#game-screen.active) */
.app-container {
    background: var(--panel-bg);
    padding: 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--border-glow);
    border: var(--panel-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 750px;
    text-align: center;
    position: relative;
    min-height: 420px;
    max-height: 90vh;
    overflow-y: auto;
    /* 제출/다음 버튼이 아래에서 잘리지 않도록 하단 여유 */
    padding-bottom: 64px;
}

/* 퀴즈 진행 중: 문제+선지 한 화면에 들어오도록 여백·최소높이 축소 */
.app-container:has(#game-screen.active) {
    padding: 10px 10px 36px;
    min-height: 0;
    max-height: min(96vh, 940px);
}

/* Text Styles */
.logo-area { font-size: 50px; margin-bottom: 10px; text-shadow: 0 0 10px var(--accent-primary); }
.main-title { font-family: 'Orbitron', sans-serif; font-size: 24px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.subtitle { color: var(--text-muted); margin-bottom: 30px; letter-spacing: 2px; font-size: 14px; }
.highlight { color: var(--accent-primary); font-family: 'Orbitron', sans-serif; }
.neon-text { color: var(--accent-primary); text-shadow: 0 0 5px var(--accent-primary); font-family: 'Orbitron', sans-serif; font-size: 32px; letter-spacing: 2px;}
.score-number { font-family: 'Orbitron', sans-serif; font-size: 18px; }
.room-player-chip {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.35);
    color: var(--accent-primary);
    font-size: 13px;
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
    vertical-align: middle;
}
.room-player-chip:empty {
    display: none;
}

.mode-badge {
    display: inline-block;
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Animations */
.screen { display: none; animation: uiLoad 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); will-change: transform, opacity; }
.screen.active { display: block; }

@keyframes uiLoad {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes comboPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 10px rgba(37, 99, 235, 0.4); }
    50% { box-shadow: 0 0 20px rgba(5, 150, 105, 0.6); }
    100% { box-shadow: 0 0 10px rgba(37, 99, 235, 0.4); }
}

/* Input Fields & Menu */
.menu-box, .input-group { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 25px; 
    max-width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
}

input[type="text"] {
    background: var(--input-bg);
    color: var(--text-main);
    padding: 16px;
    font-size: 16px;
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-md);
    outline: none;
    transition: all 0.3s;
    text-align: center;
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
}

input[type="text"]:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.2) inset;
}

.shake {
    animation: shake 0.4s ease-in-out;
    border-color: var(--accent-danger) !important;
    will-change: transform;
}

/* Multiple Choice Options (Phrasal Verb Mode) — 항상 2열, 너비에 맞춰 칸 확장 */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.option-btn {
    background: var(--input-bg);
    color: var(--text-main);
    padding: 9px 12px;
    font-size: 14px;
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-md);
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
    z-index: 1;
}

.option-btn:hover {
    border-color: var(--accent-primary);
    background: rgba(14, 165, 233, 0.1);
}

.option-btn.selected {
    border-color: var(--accent-primary);
    background: rgba(14, 165, 233, 0.2);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
    color: var(--accent-primary);
    font-weight: bold;
}

.option-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 정답 공개(피드백) 시간: 제출은 끝났지만 클릭으로 설명은 볼 수 있음 */
.option-btn.reveal-choice {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    text-shadow:
        0 0 2px var(--bg-card),
        1px 0 0 rgba(0, 0, 0, 0.14),
        -1px 0 0 rgba(0, 0, 0, 0.14),
        0 1px 0 rgba(0, 0, 0, 0.14),
        0 -1px 0 rgba(0, 0, 0, 0.14);
}
.option-btn.reveal-choice:disabled {
    cursor: not-allowed;
    pointer-events: none;
}
/* 4·5형식 등: 문제 본문 위 뜻(의미) 힌트 */
.grammar-prompt-sense {
    display: block;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.55;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    text-align: left;
    color: var(--text-main);
    background: linear-gradient(120deg, rgba(16, 185, 129, 0.14), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-left: 4px solid var(--accent-secondary);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.12);
}
.grammar-prompt-sense-label {
    font-weight: 800;
    color: var(--accent-secondary);
    font-size: 0.95em;
    letter-spacing: 0.02em;
}

/* 답 공개 시 뜻/피드백 줄: 가로 한 줄에 붙이지 않고 아래 전체 너비로 배치 (겹침 방지) */
.option-btn .option-reveal-append {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
    border: 1px solid rgba(20, 184, 166, 0.4);
    background: linear-gradient(165deg, rgba(20, 184, 166, 0.2), rgba(14, 165, 233, 0.12));
    color: #0f766e;
}
[data-theme="dark"] .option-btn .option-reveal-append,
[data-theme="cyber"] .option-btn .option-reveal-append {
    color: #5eead4;
    background: linear-gradient(165deg, rgba(20, 184, 166, 0.22), rgba(14, 165, 233, 0.14));
    border-color: rgba(45, 212, 191, 0.45);
}
.option-btn .option-reveal-append--correct {
    border-color: rgba(16, 185, 129, 0.55);
    color: #047857;
}
[data-theme="dark"] .option-btn .option-reveal-append--correct,
[data-theme="cyber"] .option-btn .option-reveal-append--correct {
    color: #6ee7b7;
}
.option-btn .option-reveal-append--wrong {
    opacity: 1;
    color: #c2410c;
    font-weight: 600;
    border-color: rgba(251, 146, 60, 0.45);
    background: linear-gradient(165deg, rgba(251, 191, 36, 0.18), rgba(248, 113, 113, 0.1));
}
[data-theme="dark"] .option-btn .option-reveal-append--wrong,
[data-theme="cyber"] .option-btn .option-reveal-append--wrong {
    color: #fdba74;
}

/* 피드백 패널에서 선지 클릭 시 하단 설명 */
.choice-explain-header {
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--text-main);
    font-weight: 600;
}
.choice-explain-pick {
    color: var(--accent-primary);
    font-size: 1.08em;
}
.choice-explain-correct-badge {
    color: var(--accent-secondary);
    font-weight: 800;
}

[data-theme="dark"] .option-btn.reveal-choice,
[data-theme="cyber"] .option-btn.reveal-choice {
    text-shadow:
        0 0 3px var(--bg-base),
        1px 0 0 rgba(255, 255, 255, 0.2),
        -1px 0 0 rgba(255, 255, 255, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.2),
        0 -1px 0 rgba(255, 255, 255, 0.2);
}

/* 동사 변화 객관식: 본문 영역이 줄바꿈되고 🔊과 겹치지 않도록 */
.option-btn--inflection {
    align-items: flex-start;
    gap: 10px;
}
.option-btn--inflection .option-num {
    flex-shrink: 0;
    font-weight: 700;
    line-height: 1.45;
    min-width: 1.5em;
    padding-top: 2px;
}
.option-btn--inflection .option-text-wrap {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.5;
    font-family: 'Noto Sans', 'Noto Sans KR', sans-serif;
}
.option-btn--inflection .option-speak-btn {
    align-self: flex-start;
    margin-top: 0;
}
.inflection-option-inner {
    overflow-wrap: break-word;
    word-break: normal;
    font-family: 'Noto Sans', 'Noto Sans KR', sans-serif;
}
.inflection-option-inner[dir="rtl"] {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
    letter-spacing: 0;
}

.btn-speak-tts {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
    padding: 6px 10px;
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid var(--text-muted);
    background: var(--input-bg);
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s, background 0.2s;
}
.btn-speak-tts:hover {
    border-color: var(--accent-primary);
    background: rgba(14, 165, 233, 0.12);
}
.option-btn .option-speak-btn {
    margin-top: 0;
}
/* 제출 후 부모에 pointer-events: none 이어도 발음 버튼은 클릭 가능 */
.option-btn .btn-speak-tts,
.option-btn .option-speak-btn {
    pointer-events: auto;
}

body.tts-buttons-hidden .btn-speak-tts {
    display: none !important;
    pointer-events: none;
}

/* 방 만들기: 학습 언어+기타 한 줄 / 데이터는 아래 전체 너비 */
.data-type-split-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
}
.data-type-split-col {
    flex: 1;
    min-width: min(100%, 280px);
}
/* .setting-group 이 기본 column 이라 같은 박스의 가로 배치가 깨짐 → 행만 덮어씀 */
#create-room-modal .setting-group.data-type-split-row.study-lang-other-pair {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 12px;
}
#create-room-modal .data-type-split-row.study-lang-other-pair .data-type-split-col {
    flex: 1 1 50%;
    min-width: 0;
    max-width: 100%;
}

/* Mode Selector */
.mode-selector { display: flex; gap: 10px; margin-bottom: 15px; }
.mode-label {
    flex: 1;
    background: transparent;
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-md);
    padding: 12px 5px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.3;
}
.mode-label input { display: none; }
.mode-label:has(input:checked) {
    border-color: var(--accent-primary);
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
}

/* Lobby & Room Features */
.user-profile {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid var(--accent-primary);
    padding: 12px 15px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
}
.user-profile .nickname { color: var(--accent-primary); font-size: 18px; font-weight: bold; }

.room-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.room-actions .btn {
    flex: 1;
}

.room-code-display {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--accent-primary);
    margin: 10px 0;
    text-align: center;
}

/* Room List (Lobby Browser) */
.room-list-container {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.room-item { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 15px 20px; background: var(--panel-bg); border-radius: var(--radius-md);
    border: 1px solid rgba(14, 165, 233, 0.2); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.room-item:hover { 
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(37, 99, 235, 0.2);
    border-color: var(--accent-primary); background: rgba(37, 99, 235, 0.05);
}
.room-info { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.room-name { font-weight: bold; color: var(--text-main); font-size: 24px; font-family: 'Noto Sans KR', sans-serif; letter-spacing: 0.5px; margin-bottom: 2px;}
.room-meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.room-badge { 
    background: rgba(14, 165, 233, 0.15); color: var(--accent-primary); 
    padding: 4px 8px; border-radius: var(--radius-sm); font-weight: bold; font-size: 11px; text-transform: uppercase; 
}
.room-players { 
    display: flex; align-items: center; gap: 5px; color: var(--text-main); 
    font-weight: bold; background: rgba(0,0,0,0.1); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 12px; 
}

.cyber-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}
.room-join-btn { padding: 8px 12px; font-size: 12px; width: auto !important; min-width: 50px; border-radius: var(--radius-md); flex-shrink: 0; text-align: center; }

/* Buttons */
.btn {
    width: 100%; padding: 15px; font-size: 15px; font-weight: bold;
    border: none; border-radius: var(--radius-md); cursor: pointer;
    text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.2s; font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.primary-btn { background: var(--accent-primary); color: #fff; box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4); }
.primary-btn:hover { background: var(--accent-primary-hover); }

.secondary-btn { background: var(--accent-secondary); color: #fff; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
.secondary-btn:hover { background: var(--accent-secondary-hover); }

/* 방 설정 — 점자 범위·G2 주제 전체 선택/해제 (작은 보조 버튼) */
.btn-bulk-mini {
    padding: 3px 9px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 600;
}

.danger-btn { background: transparent; color: var(--accent-danger); border: 1px solid var(--accent-danger); }
.danger-btn:hover { background: var(--accent-danger); color: #fff; }

.quick-play-btn {
    background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border: none;
    animation: pulseGlow 2s infinite;
    will-change: box-shadow;
}

/* Player List */
.player-list-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-md); padding: 15px; margin-bottom: 25px; text-align: left;
    max-height: 200px;
    overflow-y: auto;
}
#player-list { list-style: none; padding: 0; margin: 0; }
#player-list li { padding: 10px 0; border-bottom: 1px dashed var(--text-muted); color: var(--text-main); font-family: 'Orbitron', sans-serif;}
#player-list li:last-child { border-bottom: none; }
#player-list li::before { content: "► "; color: var(--accent-primary); }

/* In-Game Status (Timer & Players) */
.game-status-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; padding: 6px 10px; border-radius: var(--radius-md);
}
.round-info { font-weight: bold; font-family: 'Orbitron', sans-serif; color: var(--text-main); flex-shrink: 0; }

/* 타이머 + 점수: 라운드 정보 오른쪽에 나란히 */
.status-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}
.timer-wrapper { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 280px; min-width: 0; margin-left: 0; }
.timer-bar { flex: 1; height: 10px; background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); overflow: hidden;}
.timer-fill { height: 100%; background: var(--accent-primary); width: 100%; transition: width 0.1s linear, background-color 0.3s; }
.timer-fill.warning { background: var(--accent-danger); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
.timer-text { font-family: 'Orbitron', sans-serif; font-weight: bold; width: 40px; text-align: right; color: var(--text-main); }
.in-game-players { margin-bottom: 8px; padding: 6px 10px; border-radius: var(--radius-md); text-align: left; display: flex; gap: 8px; align-items: stretch; }
.in-game-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.in-game-list li { font-size: 13px; background: rgba(0,0,0,0.1); padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.05); }
.in-game-list li.me { border-color: var(--accent-primary); background: rgba(37, 99, 235, 0.1); font-weight: bold; }
.in-game-list li .p-score { color: var(--accent-primary); margin-left: 5px; font-weight: bold; font-family: 'Orbitron', sans-serif;}
.in-game-list li .p-name {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Game Screen Elements */
.game-header {
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px;
    margin-bottom: 8px; border-bottom: 1px solid var(--text-muted); padding-bottom: 8px;
}
.game-header h2 { margin: 0; font-size: 18px; text-transform: uppercase; }

#game-screen { position: relative; }

.game-header-left {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}

.game-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}
.game-actions .btn { padding: 7px 12px; font-size: 12px; flex: 0 1 auto; }

.ingame-score-board {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.combo-counter {
    position: absolute;
    top: 92px;
    right: 18px;
    left: auto;
    transform: none;
    font-size: 24px;
    font-weight: bold;
    color: var(--accent-secondary);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
    z-index: 3;
    pointer-events: none;
    text-align: right;
    max-width: calc(100% - 36px);
}
.combo-pop { animation: comboPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); will-change: transform; }

.score-board {
    background: rgba(14, 165, 233, 0.1); border: 1px solid var(--accent-primary);
    padding: 6px 12px; border-radius: var(--radius-sm); color: var(--accent-primary); font-weight: bold;
}

.base-verb { font-size: 17px; margin-top: 0; margin-bottom: 10px; color: var(--text-muted); }
.phrasal-text { font-size: 16px; margin-bottom: 8px; line-height: 1.45; font-weight: bold; font-family: 'Orbitron', sans-serif;}
.hint-text { font-size: 17px; color: var(--accent-primary); margin-bottom: 8px; font-weight: bold; background: rgba(37, 99, 235, 0.1); padding: 10px 12px; border-radius: var(--radius-md); border-left: 4px solid var(--accent-primary); }

.hidden { display: none !important; }

#feedback-area { margin-top: 0; padding-top: 0; border-top: none; }
#feedback-message { display: none !important; }

.correct-answer { 
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(14, 165, 233, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 10px; text-align: left;
    font-size: 15px; line-height: 1.5; color: var(--text-main);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
}

.success { color: var(--accent-secondary); text-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
.error { color: var(--accent-danger); text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }

/* TTS 안내 토스트 (약 5초) */
.tts-toast {
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    max-width: min(520px, calc(100% - 24px));
    z-index: 10050;
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-main);
    background: var(--bg-card);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    text-align: left;
    word-break: keep-all;
    pointer-events: none;
}

/* Modal (Room Creation / Join Popup) */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.modal-content {
    background: var(--panel-bg);
    padding: 30px; border-radius: var(--radius-lg);
    border: var(--panel-border);
    box-shadow: var(--border-glow);
    width: 90%; max-width: 400px;
}
.modal-study-reference-content {
    width: 92%;
    max-width: min(640px, 96vw);
}
.modal-study-search-hit-content {
    width: 92%;
    max-width: min(560px, 96vw);
}
.modal-study-search-hit-body {
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--text-main);
}
.modal-study-search-hit-body .study-lang-section:first-of-type .study-lang-section-title {
    margin-top: 0;
}
.study-search-hit-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
}
.study-search-hit-lang {
    font-weight: 700;
    color: var(--accent-primary);
}

/* 검색 항목 팝업: 뜻·예문·선지 블록 */
.study-search-hit-structured,
.study-search-hit-quiz {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.study-search-hit-block {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.12);
}
.study-search-hit-block--headword {
    background: rgba(56, 189, 248, 0.09);
}
.study-search-hit-label {
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin: 0 0 6px 0;
    opacity: 0.95;
}
.study-search-hit-value {
    font-size: 1em;
    line-height: 1.65;
    color: var(--text-main);
}
.study-search-hit-value p {
    margin: 0 0 0.5em 0;
}
.study-search-hit-value p:last-child {
    margin-bottom: 0;
}
.modal-study-search-hit-body .study-lang-section--filled {
    margin-top: 4px;
}

/* 설정 → 데이터 정보: 긴 본문 스크롤 */
.data-info-modal-content {
    width: 92%;
    max-width: min(640px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 상단 공부 → DB 검색 / 언어별 표 분리 */
.study-lang-modal-content {
    width: 94%;
    max-width: min(720px, 98vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 0;
}
.study-lang-view.hidden {
    display: none !important;
}
.study-lang-hub-hint {
    margin: 0 0 14px 0;
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}
.study-lang-hub-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
}
.study-lang-hub-buttons .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.study-lang-back-btn {
    margin: 0 0 12px 0;
    align-self: flex-start;
}
.study-lang-modal-footer {
    text-align: center;
    margin-top: 16px;
    padding-top: 8px;
}
#study-lang-view-search .study-lang-db-results {
    max-height: min(58vh, 560px);
}
.study-lang-panel {
    padding: 12px 0;
    border-bottom: 1px dashed rgba(56, 189, 248, 0.2);
}
.study-lang-panel:last-of-type {
    border-bottom: none;
}
.study-lang-panel-title {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
}
.study-lang-panel-hint {
    margin: 0 0 10px 0;
    font-size: 0.88em;
    line-height: 1.45;
    color: var(--text-muted);
}
.study-lang-db-results-title {
    margin: 10px 0 6px 0;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* 결과 박스: 기본 글자는 보통 — 플레이스홀더(안내)는 작게 고정, 실제 히트만 크게 */
.study-lang-db-results {
    max-height: min(40vh, 440px);
    overflow-y: auto;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-base);
    padding: 8px;
    font-size: 1rem;
}
.study-lang-db-placeholder {
    margin: 0;
    padding: 12px 10px;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.study-lang-db-hit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 14px 12px;
    margin-bottom: 6px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 8px;
    background: var(--panel-bg);
    cursor: pointer;
    font-family: inherit;
    color: var(--text-main);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-size: clamp(1.02rem, 3.4vw, 2rem); /* 결과 카드 — 이전 대비 약 30% 축소 */
}
.study-lang-db-hit:last-child {
    margin-bottom: 0;
}
.study-lang-db-hit:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15);
}
.study-lang-db-hit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.study-lang-db-hit-kind {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    flex-shrink: 0;
}
/* 검색 결과 유형별 왼쪽 배지 */
.study-lang-db-hit-kind--vocab {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
}
.study-lang-db-hit-kind--quiz {
    background: rgba(52, 211, 153, 0.18);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
}
.study-lang-db-hit-kind--example {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.35);
}
.study-lang-db-hit-kind--phrasal {
    background: rgba(34, 211, 238, 0.2);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.4);
}
.study-lang-db-hit-kind--idiom {
    background: rgba(167, 139, 250, 0.22);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.4);
}
.study-lang-db-hit-kind--proverb {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
}
.study-lang-db-hit-name {
    font-weight: 700;
    color: var(--accent-primary);
    font-size: 0.95em;
}
.study-lang-db-hit-snippet {
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--text-main);
    word-break: break-word;
}
.study-lang-db-hit-action {
    font-size: 0.78em;
    color: var(--text-muted);
}
.study-lang-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: block;
}
.study-lang-search-input,
.study-lang-detail-select {
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
}
.study-lang-detail-empty {
    margin: 8px 0 10px 0;
    font-size: 1.196em; /* was 0.92em, ×1.3 */
    line-height: 1.5;
    color: var(--text-muted);
}
.study-lang-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(48vh, 520px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-base);
    text-align: left;
    font-size: 1.3em; /* 표·문법 설명 본문 전체 1.3× */
}
.study-lang-tense-table-wrap {
    overflow-x: auto;
    margin-bottom: 4px;
}
.study-lang-tense-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
    line-height: 1.45;
}
.study-lang-tense-table th,
.study-lang-tense-table td {
    border: 1px solid rgba(56, 189, 248, 0.2);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.study-lang-tense-table th {
    background: rgba(56, 189, 248, 0.08);
    color: var(--accent-primary);
    font-weight: 600;
    white-space: nowrap;
}
.study-lang-tense-table td:first-child {
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-main);
}
.study-lang-section--tense {
    margin-bottom: 1.25em;
}
.study-lang-section {
    margin-bottom: 1.15em;
}
.study-lang-section:last-child {
    margin-bottom: 0;
}
.study-lang-section-title {
    margin: 0 0 0.4em 0;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--accent-primary);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    padding-bottom: 4px;
}
.study-lang-section-body {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-main);
}
.study-lang-section-body p {
    margin: 0 0 0.65em 0;
}
.study-lang-section-body p:last-child {
    margin-bottom: 0;
}
.data-info-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px 8px 4px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-main);
}
.data-info-body .data-info-h {
    margin: 1.15em 0 0.45em;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--accent-primary);
    border-bottom: 1px solid rgba(56, 189, 248, 0.25);
    padding-bottom: 4px;
}
.data-info-body .data-info-h:first-child {
    margin-top: 0;
}
.data-info-body p {
    margin: 0.45em 0;
}
.data-info-body ul {
    margin: 0.35em 0 0.5em 1.1em;
    padding: 0;
}
.data-info-body li {
    margin: 0.25em 0;
}

/* 설정 — 도움말 / 데이터 정보: 본문 글자 크기 */
.help-modal-body {
    font-size: 17px;
    line-height: 1.65;
}
.help-modal-title {
    font-size: 1.35rem;
}
#data-info-modal-title {
    font-size: 1.35rem;
}
.typing-prompt-row .base-verb {
    min-width: 0;
    flex: 1 1 auto;
}
#base-display {
    word-break: break-word;
    overflow-wrap: anywhere;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}
#base-display:has(.script-card-prompt) {
    display: block;
    width: 100%;
}
/* 문자 카드 힌트: 분류 / 이름 / RTGS·로마자 / IPA */
.script-card-prompt {
    text-align: left;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.script-card-kind {
    font-size: 0.88em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.script-card-dl {
    display: grid;
    grid-template-columns: minmax(4.5em, auto) 1fr;
    gap: 6px 14px;
    margin: 0;
    align-items: start;
}
.script-card-dl dt {
    margin: 0;
    font-size: 0.88em;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1.35;
}
.script-card-dl dd {
    margin: 0;
    font-size: 1.05em;
    line-height: 1.45;
    color: var(--text-main);
    word-break: break-word;
}
.script-card-char-blank {
    display: inline-block;
    min-width: 1em;
    text-align: center;
    font-weight: 800;
    color: var(--accent-primary);
    letter-spacing: 0;
}
.script-card-prompt--plain .script-card-fallback {
    font-size: 1.02em;
    line-height: 1.5;
    color: var(--text-main);
    white-space: pre-wrap;
}
#phrasal-example .script-card-prompt {
    margin-top: 0;
}
.modal-title { font-family: 'Orbitron', sans-serif; margin-top: 0; color: var(--accent-primary); }
.setting-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; text-align: left; }
.setting-label { font-size: 14px; color: var(--text-main); font-weight: bold; font-family: 'Noto Sans KR', sans-serif; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { padding: 12px; font-size: 14px; }

.cyber-select {
    background: var(--input-bg);
    color: var(--text-main);
    padding: 10px;
    font-size: 14px;
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-md);
    outline: none;
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
    width: 100%;
}
.cyber-select:focus { border-color: var(--accent-primary); box-shadow: 0 0 5px rgba(14, 165, 233, 0.2) inset;}

select.cyber-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}
select.cyber-select option {
    background: var(--bg-base);
    color: var(--text-main);
}
select.cyber-select option[data-separator] {
    color: var(--text-muted);
    font-size: 12px;
}

.option-btn.correct-choice {
    border-color: rgba(16, 185, 129, 0.75);
    background: rgba(16, 185, 129, 0.2);
    color: var(--text-main);
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.28);
}

.option-btn.wrong-choice {
    border-color: rgba(239, 68, 68, 0.65);
    background: rgba(239, 68, 68, 0.16);
    color: var(--text-main);
    font-weight: bold;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.22);
}

/* Settings Presets */
.preset-group { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.preset-btn {
    background: var(--input-bg); border: 1px solid var(--text-muted);
    color: var(--text-main); padding: 8px 12px; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 13px; transition: all 0.2s; font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
    flex: 1; text-align: center; font-weight: bold;
}
.preset-btn:hover { border-color: var(--accent-primary); background: rgba(14, 165, 233, 0.1); }
.preset-btn.active { background: var(--accent-primary); color: white; border-color: var(--accent-primary); box-shadow: 0 0 10px rgba(37, 99, 235, 0.3); }

/* Player Status & Host Badge */
.host-badge {
    background: var(--accent-danger);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 1px;
}
.player-status { font-size: 12px; float: right; margin-top: 2px; }
.player-status.ready { color: var(--accent-secondary); font-weight: bold; text-shadow: 0 0 5px rgba(16, 185, 129, 0.3); }
.player-status.waiting { color: var(--text-muted); font-style: italic; }
.player-status.spectating { color: var(--accent-primary); font-style: italic; }

/* Player Avatar */
.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-primary);
    display: inline-flex; justify-content: center; align-items: center;
    color: white; font-size: 14px; font-weight: bold;
    margin-right: 10px; vertical-align: middle;
}

/* Practice Mode */
.practice-header {
    font-size: 22px;
    letter-spacing: 2px;
    text-align: center;
    color: var(--accent-secondary);
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Lobby Chat Room */
.chat-box {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--text-muted);
    border-radius: var(--radius-md);
    height: 150px;
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 10px;
    text-align: left;
    font-size: 13px;
    font-family: 'Noto Sans KR', sans-serif;
}
.chat-message { margin-bottom: 8px; line-height: 1.4; }
.chat-message .sender { color: var(--accent-primary); font-weight: bold; margin-right: 5px; }
.chat-input-group { display: flex; gap: 10px; margin-bottom: 25px; }
.chat-input-group input { flex: 1; padding: 10px; font-size: 13px; margin-bottom: 0; }
.chat-input-group button { width: auto; padding: 10px 20px; font-size: 13px; }
#global-chat-container {
    margin-top: 8px !important;
}

/* Game Results & Leaderboard */
.result-board { margin-top: 20px; }
.result-item {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0,0,0,0.05); padding: 12px; border-radius: var(--radius-md); margin-bottom: 8px;
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
}
.result-item.rank-1 { background: rgba(250, 204, 21, 0.1); border: 1px solid #facc15; }
.result-item.rank-1 .rank-badge { color: #facc15; font-size: 20px; text-shadow: 0 0 5px rgba(250,204,21,0.5); }
.rank-badge { font-weight: bold; width: 30px; text-align: left; }
.result-score { font-weight: bold; color: var(--accent-primary); font-size: 16px; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-primary-hover); }

/* ========================================================
   모바일 최적화 (Mobile Responsive)
======================================================== */
@media (max-width: 600px) {
    .app-container {
        padding: 14px;
        max-height: 95vh;
    }

    .nav-controls {
        top: 10px;
        left: 10px;
    }

    #system-controls {
        top: 10px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        flex-wrap: wrap;
        justify-content: center;
        max-width: calc(100vw - 16px);
        gap: 5px;
    }

    .system-controls__menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 72px !important;
    }

    .system-controls__menu {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: min(240px, calc(100vw - 24px));
        padding: 10px;
        border-radius: 14px;
        background: var(--panel-bg);
        border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
        z-index: 120;
    }

    .system-controls.is-menu-open .system-controls__menu {
        display: flex;
    }

    .system-controls__menu .ctrl-btn {
        width: 100%;
        min-width: 0 !important;
        justify-content: center;
        text-align: center;
    }

    .ctrl-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .main-title { font-size: 20px; }
    .subtitle { font-size: 12px; }
    .room-name { font-size: 20px; }
    
    .room-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .game-header-left { flex-direction: column; align-items: flex-start; gap: 10px; }
    .game-actions { width: 100%; justify-content: space-between; }
    .game-actions .btn { flex: 1; padding: 10px 5px; }

    .game-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .status-bar-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }
    .timer-wrapper {
        margin-left: 0;
        max-width: none;
        flex: 1 1 140px;
        min-width: 0;
    }
    .ingame-score-board {
        flex: 0 0 auto;
    }

    .in-game-players {
        flex-direction: column;
    }
    #round-announcement {
        border-left: none;
        border-top: 1px dashed var(--text-muted);
        padding-left: 0;
        padding-top: 15px;
    }

    .option-btn { font-size: 14px; padding: 12px; }
    #ws-grid { max-width: 100%; gap: 2px; }
    .ws-cell { font-size: 14px; }
}

/* --- 유성 협동 모드 --- */
.meteor-coop-area {
    margin: 8px auto 4px;
    max-width: min(2200px, 100%);
    width: 100%;
}
.meteor-coop-hud {
    margin-bottom: 8px;
    padding: 8px 12px;
    font-size: 13px;
}
.meteor-coop-canvas-wrap {
    width: 100%;
    max-width: min(2200px, 100%);
    margin: 0 auto;
}
#meteor-coop-canvas {
    display: block;
    width: 100%;
    max-width: 2200px;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--accent-primary);
    cursor: crosshair;
    background: linear-gradient(180deg, #d4f1ff 0%, #6bb8e8 55%, #4a9fd4 100%);
    box-sizing: border-box;
}
#question-area.meteor-coop-compact {
    margin-top: 4px;
}
#question-area.meteor-coop-compact #phrasal-example {
    font-size: 0.88em;
    line-height: 1.45;
    padding: 10px 12px;
    max-height: 92px;
    overflow: auto;
}

/* 함정 유성: 문제 박스 텍스트 대신 색으로 구분 */
#question-area.meteor-trap #phrasal-example {
    border-color: rgba(239, 68, 68, 0.7);
    background: rgba(239, 68, 68, 0.10);
    box-shadow: inset 0 0 14px rgba(239, 68, 68, 0.18);
}
#question-area.meteor-coop-compact .option-btn {
    font-size: 0.86em;
    padding: 8px 10px;
    min-height: 38px;
}
#question-area.meteor-coop-compact #phrasal-options.options-grid {
    gap: 8px;
    max-height: 168px;
    overflow: auto;
}

/* ---- 게임(퀴즈) 공통: 문제+선지 한 화면에 가깝게 밀도 ↑ ---- */
#game-screen #question-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
}
#game-screen .phrasal-prompt-row {
    margin-bottom: 4px !important;
    align-items: flex-start;
}
#game-screen .phrasal-prompt-row #phrasal-example {
    flex: 0 1 auto;
    width: 100%;
    max-width: 800px;
}
#game-screen .neon-text {
    font-size: 22px;
    letter-spacing: 1px;
}
#game-screen .in-game-players {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.25fr) minmax(180px, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 76px;
}
#game-screen .in-game-players > div:first-child {
    min-width: 0;
}
#game-screen #round-announcement {
    min-height: 76px !important;
    height: 76px !important;
    max-height: 76px !important;
    padding-left: 10px !important;
    overflow: hidden;
    box-sizing: border-box;
    align-self: start;
}
#game-screen .in-game-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    scrollbar-width: thin;
}
#game-screen .in-game-list li {
    flex: 0 0 auto;
    min-width: 108px;
    max-width: 168px;
    white-space: nowrap;
}
#game-screen .in-game-list li .p-name {
    max-width: 118px;
}
#game-screen .in-game-players h4 {
    margin: 0 0 4px 0 !important;
}
#game-screen #submit-btn,
#game-screen #next-btn {
    padding: 10px 16px !important;
    margin-top: 2px;
}

/* 게임 중 객관식·문제 박스만 추가 압축 (로비 등 다른 화면은 유지) */
#game-screen #phrasal-area {
    gap: 6px;
}
#game-screen #phrasal-example {
    padding: calc(10px * var(--quiz-prompt-box-scale)) calc(12px * var(--quiz-prompt-box-scale));
    font-size: calc(0.98rem * var(--quiz-prompt-font-scale));
    line-height: 1.38;
    border-radius: 10px;
}
/* 영어 점자: 문제 박스 여백 축소 + 점자 크기 확대 */
#game-screen #phrasal-example:has(.english-braille-prompt),
#game-screen #phrasal-example:has(.english-braille-pick-cells) {
    padding: calc(6px * var(--quiz-prompt-box-scale)) calc(10px * var(--quiz-prompt-box-scale)) !important;
    line-height: 1.28;
}
#game-screen .english-braille-prompt {
    text-align: center;
}
#game-screen .english-braille-prompt__lead {
    font-size: calc(0.86rem * var(--quiz-prompt-font-scale));
    color: var(--text-muted);
    margin: 0 0 4px;
    line-height: 1.32;
    font-weight: 600;
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
}
#game-screen .english-braille-prompt__cells.braille-display-row {
    font-size: calc(clamp(2.55rem, 6.8vw, 3.5rem) * var(--quiz-braille-scale));
    line-height: 1.12;
    margin: 0;
    letter-spacing: 0.04em;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols2', 'Apple Symbols', 'Braille', ui-sans-serif, sans-serif;
    color: var(--accent-primary);
}
#game-screen .english-braille-prompt .braille-cell {
    min-width: 1.55em;
    min-height: 1.75em;
    margin: 0 0.07em;
    padding: 0.06em 0.1em;
    border-width: 1.5px;
}
#game-screen .english-braille-pick-cells {
    text-align: center;
}
#game-screen .english-braille-pick-cells__lead {
    font-size: calc(0.86rem * var(--quiz-prompt-font-scale));
    color: var(--text-muted);
    margin: 0 0 6px;
    line-height: 1.32;
    font-weight: 600;
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
}
#game-screen .english-braille-pick-cells__word {
    font-size: calc(1.55rem * var(--quiz-prompt-font-scale));
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1.2;
    word-break: break-word;
    margin: 0;
}
#game-screen .english-braille-pick-cells__gloss {
    margin-top: 6px;
    font-size: calc(0.9rem * var(--quiz-prompt-font-scale));
    color: var(--text-muted);
    line-height: 1.4;
}
#game-screen .english-braille-pick-cells__slots-label {
    margin-top: 8px;
    font-size: calc(0.82rem * var(--quiz-prompt-font-scale));
    color: var(--text-muted);
}
/* UEB 점자 해설 — 정답 공개·선지 설명 */
.english-braille-explain-detail,
#feedback-area .english-braille-explain-detail {
    margin-top: 8px;
    font-size: 0.86em;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: left;
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.english-braille-explain-detail__title {
    font-size: 1.02em;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
    line-height: 1.35;
}
.english-braille-explain-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.english-braille-explain-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.english-braille-explain-tabs {
    margin-top: 8px;
}
.english-braille-explain-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.english-braille-explain-tab {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 5px 10px;
    font-size: 0.82em;
    line-height: 1.3;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 88%, var(--accent-primary));
    color: var(--text-muted);
    cursor: pointer;
}
.english-braille-explain-tab.is-active {
    color: var(--text-main);
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 18%, var(--panel-bg));
    font-weight: 700;
}
.english-braille-explain-tab-panel {
    display: none;
}
.english-braille-explain-tab-panel.is-active {
    display: block;
}
.english-braille-feedback-hint {
    margin-top: 8px;
    font-size: 0.88em;
    line-height: 1.45;
    color: var(--text-muted);
}
.english-braille-explain-section__label {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.95em;
    margin-bottom: 4px;
}
.english-braille-explain-section__body {
    padding-left: 1.1em;
}
.english-braille-explain-section__body-text {
    line-height: 1.58;
}
.english-braille-explain-section__item {
    position: relative;
    padding-left: 0.85em;
    margin-top: 5px;
    line-height: 1.52;
}
.english-braille-explain-section__item:first-child {
    margin-top: 0;
}
.english-braille-explain-section__item::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: 700;
}
/* 분해(상세) — 줄 단위 가독성 */
.english-braille-explain-breakdown-line {
    margin-top: 10px;
    padding-left: 0.55em;
    line-height: 1.65;
    border-left: 2px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
}
.english-braille-explain-breakdown-line:first-child {
    margin-top: 0;
}
.english-braille-explain-breakdown-line--head {
    font-weight: 700;
    color: var(--text-main);
    border-left-color: var(--accent-primary);
}
.english-braille-explain-breakdown-block + .english-braille-explain-breakdown-block,
.english-braille-explain-section__item.english-braille-explain-breakdown-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
}
.english-braille-explain-section__item.english-braille-explain-breakdown-block::before {
    top: 14px;
}
/* 해설·팝업 안 점자 셀 테두리 (문제 화면과 동일) */
.english-braille-explain-visual .braille-display-row,
.english-braille-explain-detail .braille-display-row,
.english-braille-explain-text--cells .braille-display-row,
.choice-explanation-popover .braille-display-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}
.english-braille-explain-visual .braille-cell,
.english-braille-explain-detail .braille-cell,
.english-braille-explain-text--cells .braille-cell,
.choice-explanation-popover .braille-cell {
    min-width: 1.35em;
    min-height: 1.55em;
    font-size: 1.12em;
    border-width: 1.5px;
}
.english-braille-study-guide {
    font-size: 0.92em;
    line-height: 1.58;
    color: var(--text-main);
}
.english-braille-study-guide__h {
    margin: 12px 0 6px;
    font-size: 0.98em;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1.35;
}
.english-braille-study-guide__h:first-child {
    margin-top: 0;
}
.english-braille-study-guide__p {
    margin: 0 0 8px;
    color: var(--text-muted);
}
.english-braille-study-guide__list,
.english-braille-study-guide__olist {
    margin: 0 0 10px;
    padding-left: 1.25em;
    color: var(--text-muted);
}
.english-braille-study-guide__list li,
.english-braille-study-guide__olist li {
    margin: 4px 0;
}
.study-braille-hub-guide {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 92%, var(--accent-primary));
}
.study-lang-detail-body .braille-cell,
.study-braille-hub-guide .braille-cell {
    min-width: 1.3em;
    min-height: 1.5em;
    border-width: 1.5px;
}
.study-braille-g2-example-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 14px;
    font-size: 0.9em;
}
.study-braille-g2-example-table th,
.study-braille-g2-example-table td {
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 25%, transparent);
    text-align: left;
    vertical-align: middle;
}
.study-braille-g2-example-table th {
    font-weight: 800;
    color: var(--text-main);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
.english-braille-study-guide__topics {
    margin: 8px 0 12px;
}
.english-braille-study-guide__topic {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-bg) 88%, rgba(0, 0, 0, 0.06));
    border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
}
.english-braille-study-guide__topic-title {
    margin: 0 0 6px;
    font-size: 0.95em;
    font-weight: 800;
    color: var(--accent-secondary);
}
#game-screen #braille-pick-slots-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
/* 글자→점자 칸마다 고르기: 안내 문구는 2열 그리드 전체 너비 */
#game-screen #phrasal-options.options-grid--braille-pick .braille-pick-options-hint,
#phrasal-options.options-grid--braille-pick .braille-pick-options-hint {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 4px;
    text-align: center;
    min-height: 2.75em;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: center;
}
#game-screen #phrasal-options.options-grid--braille-pick,
#phrasal-options.options-grid--braille-pick {
    align-items: stretch;
}
#game-screen .english-braille-typing-head .braille-display-row {
    font-size: calc(clamp(2.35rem, 6.2vw, 3.15rem) * var(--quiz-braille-scale));
    line-height: 1.12;
    margin: 0 0 6px;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols2', 'Apple Symbols', 'Braille', sans-serif;
    color: var(--accent-primary);
}
#game-screen .english-braille-typing-head .braille-cell {
    min-width: 1.5em;
    min-height: 1.7em;
    border-width: 1.5px;
}
#game-screen #phrasal-hint {
    padding: 8px 10px;
    font-size: 0.92rem;
}
#game-screen #phrasal-options.options-grid,
#game-screen .options-grid {
    gap: 4px;
    margin-bottom: 6px;
}
#game-screen .option-btn {
    padding: calc(9px * var(--quiz-option-box-scale)) calc(11px * var(--quiz-option-box-scale));
    font-size: calc(13px * var(--quiz-option-font-scale));
    min-height: calc(48px * var(--quiz-option-box-scale));
    border-radius: 10px;
}
#game-screen .option-btn.reveal-choice--explorable {
    cursor: pointer;
    /* handleUserSubmission() inline pointer-events:none 을 덮어 클릭·탭 가능 */
    pointer-events: auto !important;
    opacity: 1;
}
#game-screen .option-btn.reveal-choice--explorable:disabled {
    pointer-events: auto !important;
    cursor: pointer;
    opacity: 1;
}
#game-screen .quiz-prompt-resizable {
    position: relative;
    touch-action: pan-y;
}
#game-screen .quiz-prompt-resizable.quiz-prompt-resizing {
    outline: 2px dashed var(--accent-primary);
    outline-offset: 3px;
}
#game-screen .quiz-prompt-resize-grip {
    position: absolute;
    right: 6px;
    bottom: 4px;
    width: 18px;
    height: 18px;
    cursor: ns-resize;
    opacity: 0.45;
    background:
        linear-gradient(135deg, transparent 50%, var(--accent-primary) 50%) no-repeat right bottom / 8px 8px,
        linear-gradient(135deg, transparent 60%, var(--accent-primary) 60%) no-repeat right bottom / 14px 14px;
    border-radius: 2px;
    pointer-events: auto;
}
#game-screen .quiz-prompt-resizable:hover .quiz-prompt-resize-grip,
#game-screen .quiz-prompt-resizable.quiz-prompt-resizing .quiz-prompt-resize-grip {
    opacity: 0.85;
}
/* 정답 공개 후 선지별 설명 팝업·모달 — 본문 글자 크기 배율 */
:root {
    --choice-explain-font-scale: 1.5;
}
.choice-explanation-popover,
.choice-explanation-modal-content,
.choice-explanation-inline {
    font-size: calc(1rem * var(--choice-explain-font-scale));
}
.choice-explanation-popover .choice-explanation-body,
.choice-explanation-modal-content .choice-explanation-body,
.choice-explanation-inline .choice-explanation-body {
    line-height: 1.55;
    color: var(--text-main);
}
.choice-explanation-inline {
    margin-top: 12px;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    max-height: min(40vh, 360px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.choice-explanation-inline__title {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--accent-primary);
    margin: 0 0 8px 0;
}
.choice-explanation-inline .choice-explain-header {
    font-size: 1em;
    margin-bottom: 4px;
}
.choice-explanation-modal-content .choice-explanation-body {
    font-size: 0.98em;
}
.choice-explanation-popover .choice-explain-header,
.choice-explanation-modal-content .choice-explain-header {
    font-size: 1em;
}

.choice-explanation-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12040;
    background: rgba(0, 0, 0, 0.42);
    pointer-events: auto;
    touch-action: manipulation;
}
.choice-explanation-backdrop--pass-through {
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.22);
}
.choice-explanation-popover {
    position: fixed;
    z-index: 12050;
    max-width: min(calc(420px * var(--choice-explain-font-scale)), calc(100vw - 24px));
    max-height: min(calc(320px * var(--choice-explain-font-scale)), calc(100vh - 24px));
    overflow: auto;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--panel-bg);
    border: var(--panel-border);
    box-shadow: var(--border-glow);
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
}
.choice-explanation-popover:not(.choice-explanation-popover--message) {
    padding: 12px 14px;
}
.choice-explanation-popover:not(.choice-explanation-popover--message) .choice-explanation-popover__header {
    display: none;
}
.choice-explanation-popover--message {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: min(calc(520px * var(--choice-explain-font-scale)), calc(100vw - 24px));
    max-height: min(72vh, calc(100vh - 48px));
    padding: 0;
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.choice-explanation-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
}
.choice-explanation-popover__title {
    font-size: 0.95em;
    color: var(--text-main);
}
.choice-explanation-popover__close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto;
}
.choice-explanation-popover .english-braille-explain-tab {
    touch-action: manipulation;
    pointer-events: auto;
}
.choice-explanation-popover--message .choice-explanation-body {
    padding: 10px 14px 14px;
    max-height: calc(min(68vh, 100vh - 48px) - 48px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.choice-explanation-modal-content .choice-explanation-body,
.choice-explanation-popover .choice-explanation-body {
    text-align: left;
}
#game-screen .option-btn .option-reveal-append {
    padding-top: 4px;
    margin-top: 4px;
}

.app-container:has(#game-screen.active) #global-chat-container {
    margin-top: 4px;
    padding-top: 8px;
}
.app-container:has(#game-screen.active) #chat-messages {
    height: 72px !important;
}