/* === Prefecture exercise ============================================
   Companion to js/games/prefecture.js + games/prefecture.partial.html.
   Loaded via <link> in index.html; lives in the same #game-stage as
   Swipe / Fall / Rain (opacity-toggled, only one active at a time).

   Tokens come from css/theme.css — never hard-code colors. The map's
   selected-path styling deliberately uses --accent (vermillion in
   light theme, indigo in dark) so the design language stays unified.
   ==================================================================== */

.prefecture-game {
    /* Overlays .card-area-stage (column-section bounds). Same canvas
       pattern as Rain / Swipe / Fall: cream background + dashed
       outline, flex column for header / map+info stage / writing
       canvas / answer line / feedback. Inner blocks keep their own
       widths and stay centered inside the full-width canvas. */
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 2;
    background: var(--bg);
    border: var(--dash);
    border-radius: 14px;
    padding: 14px;
    box-sizing: border-box;
}

.prefecture-game.active {
    opacity: 1;
    pointer-events: auto;
}

/* === Stage =========================================================
   Single full-area surface that holds the map, the transparent
   writing-canvas overlay, and the floating controls (region badge,
   reset, hint, close). The map SVG fills .prefecture-stage edge-to-
   edge; the canvas centers on top of it; controls float over both. */
.prefecture-stage {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;          /* let flex shrink the stage to fit the canvas */
}

.prefecture-map-wrap {
    position: absolute;
    inset: 0;
    background: var(--carousel-bg);
    border: 1px solid var(--subtle-border);
    border-radius: 14px;
    overflow: hidden;
}

.prefecture-map-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

.prefecture-map-wrap svg path {
    fill: var(--char-fill);
    stroke: var(--container-border);
    stroke-width: 0.6;
    transition: fill 0.25s ease, stroke 0.25s ease;
    cursor: pointer;
}

.prefecture-map-wrap svg path:hover {
    fill: var(--accent-hover);
}

.prefecture-map-wrap svg.has-selection path {
    fill: var(--char-fill);
    opacity: 0.35;
}

.prefecture-map-wrap svg path.is-selected,
.prefecture-map-wrap svg.has-selection path.is-selected {
    /* Outline-only selection — the prefecture's fill stays its normal
       beige so the writing surface above it isn't tinted red, but the
       red stroke (boosted in width) makes the boundary clearly read
       as the answer target. */
    fill: var(--char-fill);
    stroke: var(--accent);
    stroke-width: 0.5;
    opacity: 1;
}


/* === Floating chrome on the stage ====================================
   All four controls (reset, region badge, hint, close) are absolutely
   positioned over .prefecture-stage so they ride above both the map
   and the writing-canvas overlay. Same cream-bg + dashed-outline
   language as the toolbar buttons so the controls read as chrome,
   not gameplay. */
.prefecture-map-reset,
.prefecture-name-label,
.prefecture-hint-btn,
.prefecture-close {
    position: absolute;
    z-index: 4;
    background: var(--bg);
    border: var(--dash);
    border-radius: 8px;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.prefecture-map-reset {
    top: 10px;
    left: 10px;
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.prefecture-map-reset:hover {
    background: var(--accent-hover);
    color: var(--accent);
}
.prefecture-map-reset[hidden] { display: none; }
.prefecture-map-reset-arrow { font-size: 0.9rem; line-height: 1; }

/* Prefecture name label — anchored directly below the 240×240
   writing canvas so the prompt sits where the user is looking.
   Centered on the same axis (left:50% translateX(-50%)) and
   offset by half the canvas height + an 8px gap. */
.prefecture-name-label {
    top: calc(50% + 128px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.prefecture-name-label[hidden] { display: none; }
.prefecture-name-value { font-weight: 600; }

.prefecture-hint-btn {
    /* Bottom-right of the stage, clear of the answer line below. */
    bottom: 10px;
    right: 10px;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.prefecture-hint-btn:hover {
    background: var(--accent-hover);
    color: var(--accent);
    border-color: var(--accent-border);
}
.prefecture-hint-btn[hidden] { display: none; }

.prefecture-close {
    /* Top-right corner. The prefecture name moved out of the top-right
       badge to a label below the writing canvas, so this corner is
       free for the close button. */
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--close-color, var(--text-muted));
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prefecture-close:hover { color: var(--text); }

/* === Writing surface — transparent ink layer over the map ===========
   The wrap covers the stage with the four dashed crosshair guide lines
   (::before / ::after); the canvas itself has no background so the
   highlighted prefecture underneath stays visible. The user's ink
   draws at full opacity on top. */
.prefecture-canvas-wrap {
    position: absolute;
    /* Fixed square centered over the stage. The map zoom-in animation
       centers the selected prefecture inside the stage, so it always
       falls under the crosshair guide. The canvas inside fills the
       wrap exactly, so any pointer event that lands in this 240×240
       region hits the canvas (not the wrap as an empty hit area) —
       no pointer-events override needed. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    z-index: 3;
    border-radius: 14px;
    overflow: hidden;
    /* White fill lives on the WRAP (a <div>), not the <canvas>, so
       mobile renderers (which sometimes fail to composite CSS bg
       under live canvas pixels) treat it like any other div bg.
       Default 0; .has-selection animates up to writing opacity.
       Asymmetric timings mirror the canvas rule pair: 1.4s fade-out
       in the base rule, 2.6s fade-in in the has-selection override. */
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 1.4s ease;
}
.prefecture-game.has-selection .prefecture-canvas-wrap {
    background-color: rgba(255, 255, 255, 0.425);
    transition: background-color 2.6s ease;
}

/* Vertical + horizontal centerline guides. Explicit rgba values
   instead of a theme token — the standard tokens (--guide-line,
   --subtle-border, --container-border) step too coarsely between
   "barely visible" and "loud" for this use case. */
.prefecture-canvas-wrap::before,
.prefecture-canvas-wrap::after {
    content: '';
    position: absolute;
    border: 0;
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 1;
    /* Fade with the canvas white fill — invisible at the
       whole-country view, full when zoomed in on a prefecture.
       Asymmetric timings mirror the .prefecture-canvas rules: fast
       fade-out (1.4s), slower fade-in (2.6s — set in the
       .has-selection override below). */
    opacity: 0;
    transition: opacity 1.4s ease;
}
.prefecture-game.has-selection .prefecture-canvas-wrap::before,
.prefecture-game.has-selection .prefecture-canvas-wrap::after {
    opacity: 1;
    transition: opacity 2.6s ease;
}
body.dark .prefecture-canvas-wrap::before,
body.dark .prefecture-canvas-wrap::after {
    border-color: rgba(255, 255, 255, 0.45);
}
.prefecture-canvas-wrap::before {
    left: 50%; top: 0; bottom: 0;
    border-left-width: 2px;
}
.prefecture-canvas-wrap::after {
    top: 50%; left: 0; right: 0;
    border-top-width: 2px;
}

.prefecture-canvas {
    width: 100%;
    height: 100%;
    display: block;
    /* Canvas itself stays fully transparent — the wrap's
       background-color handles the white fill (see
       .prefecture-canvas-wrap above). The canvas pixel buffer
       only carries the user's ink strokes. */
    background-color: transparent;
    box-sizing: border-box;
    /* Default: do NOT capture pointer events. The canvas is positioned
       inside #card-area-stage and persists in the DOM even after
       Prefecture closes — without this, it would intercept clicks
       meant for the homepage's main draw canvas underneath. The
       .active rule below opts in only while the game is running. */
    pointer-events: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: crosshair;
    transition: box-shadow 0.2s ease;
}
.prefecture-game.active .prefecture-canvas {
    pointer-events: auto;
}

.prefecture-canvas.miss-flash {
    border-color: var(--red);
    animation: prefecture-shake 0.4s ease;
}

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

/* === Answer line ====================================================
   One .prefecture-slot per srs_unit. Pending slots show a subtle dashed
   placeholder; the active slot has an accent underline (the kana the
   user is writing right now); cleared slots show the canonical kana in
   the green confirmation color.
   ==================================================================== */
.prefecture-answer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
}

.prefecture-slot {
    width: 44px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--subtle-border);
    font-size: 1.8rem;
    line-height: 1;
    color: transparent;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.prefecture-slot.active {
    border-bottom-color: var(--accent);
}

.prefecture-slot.cleared {
    color: var(--green);
    border-bottom-color: var(--green);
    animation: prefecture-slot-pop 0.4s ease;
}

@keyframes prefecture-slot-pop {
    0%   { transform: translateY(4px) scale(0.85); opacity: 0; }
    60%  { transform: translateY(-2px) scale(1.08); opacity: 1; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* === Feedback line ================================================== */
.prefecture-feedback {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.3s ease;
    min-height: 1.4em;
}

/* === Empty state ==================================================== */
.prefecture-empty-state {
    width: 100%;
    padding: 30px 20px;
    text-align: center;
    background: var(--subtle-bg);
    border: 1px dashed var(--subtle-border);
    border-radius: 14px;
}
.prefecture-empty-state[hidden] { display: none; }

.prefecture-empty-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 6px;
}

.prefecture-empty-body {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* === Responsive ===================================================== */
@media (max-width: 640px) {
    .prefecture-stage {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .prefecture-map-wrap {
        max-height: 38vh;
    }

    .prefecture-info {
        padding: 12px;
    }

    .prefecture-prompt-name {
        font-size: 1.6rem;
    }

    .prefecture-canvas-wrap {
        width: 220px;
        height: 220px;
    }
    .prefecture-slot {
        width: 36px;
        height: 48px;
        font-size: 1.5rem;
    }
}