.munjeon-game-layer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 6000);
    background: var(--paper, #f6f5f1);
}

.munjeon-game-layer[hidden] {
    display: none;
}

.mun-game {
    --mun-text: #efece3;
    --mun-panel: rgba(16, 15, 20, 0.88);
    --mun-line: rgba(220, 210, 190, 0.34);
    --mun-accent: #e8d9a8;
    --mun-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --mun-action-text: rgba(42, 37, 32, 0.9);
    --mun-action-bg: rgba(255, 250, 238, 0.56);
    --mun-action-bg-hover: rgba(255, 250, 238, 0.68);
    --mun-action-bg-active: rgba(255, 250, 238, 0.74);
    --mun-action-border: rgba(52, 46, 39, 0.14);
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--mun-text);
    /* Sans throughout: everything the game shows is interface — dialogue, labels, hints — and
       design.md §4 keeps serif for narration in the app shell, not for chrome inside a screen. */
    font-family: var(--font-sans, 'Inter', 'Noto Sans KR', -apple-system, sans-serif);
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.mun-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.mun-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mun-zone-label,
.mun-token-chip {
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--ink-90, rgba(44, 40, 35, 0.9));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(246, 245, 241, 0.9), 0 0 8px rgba(246, 245, 241, 0.7);
    opacity: 0;
    transition: opacity 1.1s ease;
}

.mun-token-chip {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-70, rgba(44, 40, 35, 0.7));
    background: var(--paper-overlay, rgba(246, 245, 241, 0.92));
    border: 1px solid var(--ink-12, rgba(44, 40, 35, 0.12));
    border-radius: var(--radius-pill, 999px);
    text-shadow: none;
}

.mun-zone-label.is-visible,
.mun-token-chip.is-visible {
    opacity: 1;
}

.mun-token-chip.is-left-behind {
    opacity: 0.5;
}

.mun-topbar {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

.mun-topbar-node {
    padding: 4px 10px;
    color: var(--ink-70, rgba(44, 40, 35, 0.7));
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    background: var(--paper-overlay, rgba(246, 245, 241, 0.92));
    border: 1px solid var(--ink-12, rgba(44, 40, 35, 0.12));
    border-radius: var(--radius-pill, 999px);
}

.mun-step-hint {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 52px);
    left: 50%;
    margin: 0;
    padding: 5px 10px;
    transform: translateX(-50%);
    color: var(--ink-70, rgba(44, 40, 35, 0.7));
    font-size: 12px;
    white-space: nowrap;
    background: var(--paper-overlay, rgba(246, 245, 241, 0.92));
    border: 1px solid var(--ink-12, rgba(44, 40, 35, 0.12));
    border-radius: var(--radius-pill, 999px);
    pointer-events: none;
}

.mun-step-hint[hidden] {
    display: none;
}

.mun-dialog {
    position: absolute;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 128px);
    left: 10px;
    padding: 13px 15px 12px;
    background: var(--mun-panel);
    border: 2px solid var(--mun-line);
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.mun-dialog[hidden] {
    display: none;
}

.mun-dialog-text {
    margin: 0;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.75;
    word-break: keep-all;
}

.mun-dialog-text::after {
    content: '▾';
    margin-left: 6px;
    color: var(--mun-accent);
    font-size: 12px;
    opacity: 0;
}

.mun-dialog.has-more .mun-dialog-text::after {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .mun-dialog.has-more .mun-dialog-text::after {
        animation: mun-caret 1.1s ease-in-out infinite;
    }
}

@keyframes mun-caret {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}

.mun-choices {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.mun-choices[hidden] {
    display: none;
}

.mun-choice-button {
    min-height: 52px;
    padding: 10px 14px;
    color: var(--mun-text);
    font-size: 15px;
    font-family: inherit;
    text-align: left;
    word-break: keep-all;
    background: rgba(42, 40, 50, 0.92);
    border: 1px solid var(--mun-line);
    border-radius: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mun-choice-button.is-focused {
    border-color: var(--mun-accent);
    box-shadow: inset 0 0 0 1px var(--mun-accent);
}

.mun-assist {
    position: absolute;
    left: 50%;
    /* Clears the nav dock, same as .mun-dialog. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.mun-assist-button {
    min-height: 36px;
    padding: 7px 12px;
    color: rgba(239, 236, 227, 0.85);
    font-size: 11px;
    font-family: inherit;
    white-space: nowrap;
    background: rgba(16, 15, 20, 0.6);
    border: 1px solid var(--mun-line);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mun-assist-button[hidden] {
    display: none;
}

.mun-choice-button,
.mun-assist-button {
    min-height: var(--tap-size, 44px);
    padding: 0 14px;
    color: var(--mun-action-text);
    font-family: inherit;
    font-size: clamp(14px, 3.7vw, 15px);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    background: var(--mun-action-bg);
    border: 1px solid var(--mun-action-border);
    border-radius: 8px;
    box-shadow:
        0 10px 24px rgba(44, 40, 35, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(44, 40, 35, 0.05);
    -webkit-backdrop-filter: blur(4px) saturate(1.04);
    backdrop-filter: blur(4px) saturate(1.04);
    transition:
        opacity 0.32s var(--mun-ease),
        background-color 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        transform 0.18s ease;
}

.mun-choice-button:hover,
.mun-assist-button:hover {
    background: var(--mun-action-bg-hover);
    border-color: rgba(52, 46, 39, 0.2);
    box-shadow:
        0 12px 28px rgba(44, 40, 35, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(44, 40, 35, 0.05);
}

.mun-choice-button:active,
.mun-assist-button:active {
    background: var(--mun-action-bg-active);
}

.mun-choice-button.is-focused {
    border-color: rgba(52, 46, 39, 0.28);
    box-shadow:
        0 12px 28px rgba(44, 40, 35, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(44, 40, 35, 0.05);
}

.mun-scan-veil {
    position: absolute;
    inset: 0;
    background: #f6f5f1;
    opacity: 1;
    pointer-events: none;
    transition: opacity 1s ease, background 1s ease;
}

.mun-scan-veil.is-dimming {
    background: #0d0c10;
}

.mun-scan-veil.is-clear {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .mun-scan-veil,
    .mun-zone-label,
    .mun-token-chip {
        transition-duration: 0.01ms;
    }
}

/* =========================================================================
   Design-system sweep (design.md §8b)
   Munjeon keeps its game aesthetic and its interaction is untouched. Only the text
   fields and buttons adopt the app's language, so the edges feel like the same product
   while the middle stays a game. The board, pieces, canvas and palette are unchanged.
========================================================================= */

.mun-game {
    /* Dark-context action values: the app's button geometry, read light-on-dark like the
       camera nodes, since the game board is dark. */
    --mun-action-text: rgba(246, 242, 230, 0.96);
    --mun-action-bg: transparent;
    --mun-action-bg-hover: rgba(246, 242, 230, 0.16);
    --mun-action-bg-active: rgba(246, 242, 230, 0.92);
    --mun-action-border: rgba(246, 242, 230, 0.7);
}

/* Buttons: the app's pill, no glass, no stacked inset shadows. */
.mun-choice-button,
.mun-assist-button {
    font-family: var(--font-sans, 'Inter', 'Noto Sans KR', -apple-system, sans-serif);
    font-size: var(--text-body, clamp(14px, 3.6vw, 15px));
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--radius-pill, 999px);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition:
        color var(--dur-press-out, 0.45s) ease,
        background-color var(--dur-press-out, 0.45s) ease,
        border-color var(--dur-press-out, 0.45s) ease,
        transform var(--dur-fast, 0.18s) ease;
}

/* Choice buttons stay left-aligned and roomy — they carry sentences, not labels. */
.mun-choice-button {
    padding: 12px 18px;
    text-align: left;
    background: var(--mun-action-bg);
    border: 1px solid var(--mun-action-border);
}

.mun-choice-button:hover,
.mun-assist-button:hover {
    background: var(--mun-action-bg-hover);
    border-color: var(--mun-action-border);
    box-shadow: none;
}

/* Held: snap to the fill, fade back out (design.md §6). */
.mun-choice-button:active,
.mun-assist-button:active {
    color: rgba(28, 24, 20, 0.94);
    background: var(--mun-action-bg-active);
    border-color: var(--mun-action-bg-active);
    transform: translateY(1px);
    transition-duration: 0s;
}

/* Focus/selection reads as a tint, not another shadow stack. */
.mun-choice-button.is-focused {
    border-color: var(--mun-accent);
    background: rgba(232, 217, 168, 0.14);
    box-shadow: none;
}

.mun-assist-button {
    min-height: 40px;
    padding: 0 16px;
    font-size: var(--text-caption, clamp(12px, 3.1vw, 13px));
}

/* Text fields: app type scale and rhythm, game colours retained. */
.mun-dialog-text {
    font-family: var(--font-sans, 'Inter', 'Noto Sans KR', -apple-system, sans-serif);
    font-size: var(--text-body-lg, clamp(16px, 4.2vw, 18px));
    font-weight: 500;
    line-height: 1.65;
    text-wrap: pretty;
}

.mun-step-hint {
    padding: 7px 14px;
    color: var(--ink-70, rgba(44, 40, 35, 0.7));
    font-family: var(--font-sans, 'Inter', 'Noto Sans KR', -apple-system, sans-serif);
    font-size: var(--text-caption, clamp(12px, 3.1vw, 13px));
    font-weight: 500;
    border-radius: var(--radius-pill, 999px);
}

/* -------------------------------------------------------------------------
   Dialogue panel: paper, not dark mode

   The panel is where the app speaks, so it reads as an app surface (design.md §8b: if an
   element states, instructs or is tappable, it belongs to the design system). The canvas behind
   it stays dark and stays a game. Because the panel flips to paper, everything inside it has to
   flip with it — the choice buttons sit in here and would be invisible on light ground with the
   dark-context action tokens the rest of the game chrome uses.

   Must stay after the sweep rules above: same specificity, so source order decides.
------------------------------------------------------------------------- */

.mun-dialog {
    --mun-action-text: var(--accent, #8a5a33);
    --mun-action-bg: transparent;
    --mun-action-bg-hover: var(--accent-soft, rgba(138, 90, 51, 0.12));
    --mun-action-bg-active: var(--accent, #8a5a33);
    --mun-action-border: var(--accent, #8a5a33);
    /* The nav dock stays visible above the game layer on QR result pages
       (.qr-result-nav-open lifts it over the modal): 16px inset + 66px island. The panel
       must clear its top edge, never hide behind it. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 94px);
    padding: var(--space-4, 16px) var(--space-4, 16px) calc(var(--space-4, 16px) - 2px);
    color: var(--ink-90, rgba(44, 40, 35, 0.9));
    background: var(--paper-overlay, rgba(246, 245, 241, 0.94));
    border: 1px solid var(--ink-12, rgba(44, 40, 35, 0.12));
    border-radius: var(--radius-card, 16px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
    /* The whole panel advances the dialogue. */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mun-dialog-text {
    color: var(--ink-90, rgba(44, 40, 35, 0.9));
}

/* The caret is the only remaining "there is more" affordance now that the 진행 button is gone,
   so it carries real weight and has to be seen, not just present. */
.mun-dialog-text::after {
    margin-left: 8px;
    color: var(--accent, #8a5a33);
    font-size: 20px;
    line-height: 1;
    vertical-align: -2px;
}

/* Held on paper: accent fill needs the light-on-accent text, not the dark-context value. */
.mun-dialog .mun-choice-button:active {
    color: var(--on-accent, #faf6ef);
}

.mun-dialog .mun-choice-button.is-focused {
    border-color: var(--accent, #8a5a33);
    background: var(--accent-soft, rgba(138, 90, 51, 0.12));
}