/* Accessible graded-reveal alternative (Tier-3). Self-paced; no auto motion. */
.pntaWrap { max-width: 460px; margin: 0 auto; text-align: center; }
.pntaStatus { font-size: 15px; color: #3a3a3a; margin: 6px 0 10px; }
.pntaImageWrap { display: flex; justify-content: center; }
.pntaImage { max-width: 100%; max-height: 360px; border-radius: 12px; }
.pntaDesc { margin: 12px auto 4px; max-width: 440px; line-height: 1.5; color: #3a3a3a; text-align: left;
    background: #faf9fe; border-radius: 12px; padding: 12px 14px; min-height: 24px; }
.pntaDescMuted { color: #55565f; font-style: italic; }
.pntaControls { text-align: center; margin: 14px 0 4px; }
.pntaBtn { min-height: 44px; padding: 10px 24px; border: 0; border-radius: 22px; background: #6c5fc0; color: #fff;
    font-size: 16px; font-weight: 600; cursor: pointer; }
.pntaBtn:hover { background: #574bb0; }
.pntaComplete { text-align: center; padding: 8px; }
.pntaCompleteText { font-size: 16px; color: #5b4fb0; font-weight: 600; margin-top: 10px; }
.pntaError { color: #c62828; text-align: center; padding: 20px; }

.paintGameContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

/* Everything in the game area opts out of the browser's double-tap zoom, so quick taps on
   the palette or around the picture can never zoom the whole page. Pinch-zooming the page
   still works for anyone who needs it. */
.paintGameContainer {
    touch-action: manipulation;
}

.paintGameFrame {
    position: relative;
    max-width: 100%;
}

/* The frame. js sizes it so the whole picture fits the page and clips the zoomed picture to
   it. All pinch, pan and tap input lands here, so the browser gets none of it. */
.paintGameViewport {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    cursor: crosshair;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.paintGameViewport--dragging {
    cursor: grabbing;
}

.paintGameViewport--done {
    cursor: default;
}

/* Inner wrapper: the canvases at their natural pixel size, moved and scaled by one transform */
.paintGameCanvasWrapper {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    line-height: 0; /* prevent gap below canvas */
}

/* Numbers, drawn in frame coordinates so they stay one size at every zoom */
.paintLabelCanvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.paintFillCanvas {
    display: block;
    border-radius: 0;
    background-color: #d8d8d8;
    background-image:
        linear-gradient(45deg, #b8b8b8 25%, transparent 25%),
        linear-gradient(-45deg, #b8b8b8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #b8b8b8 75%),
        linear-gradient(-45deg, transparent 75%, #b8b8b8 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}

.paintOutlineCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 900ms ease;
}

/* The outlines fade out from under the photo when the picture is revealed, and
   fade back in when the replay starts the painting over. */
.paintOutlineCanvas--hidden {
    opacity: 0;
}

/* The finished photo. Sits above both canvases and is invisible until the last
   region is filled, then fades in over the painting. */
.paintRevealLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 900ms ease;
}

.paintRevealLayer--shown {
    opacity: 1;
}

/* Find + zoom controls, under the picture so they never cover a region */
.paintZoomBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    padding: 0 4px;
    box-sizing: border-box;
}
.paintZoomBar[hidden] { display: none; }

.paintZoomBtns {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.paintZoomBtn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bia-border, #8a8a94);
    border-radius: 50%;
    background: #ffffff;
    color: var(--bia-fg, #222);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.paintZoomBtn:hover {
    border-color: var(--bia-accent, #5f52b0);
    color: var(--bia-accent, #5f52b0);
}

/* aria-disabled rather than disabled, so a button keeps focus when it reaches its limit */
.paintZoomBtn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.paintZoomBtn[aria-disabled="true"]:hover {
    border-color: var(--bia-border, #8a8a94);
    color: var(--bia-fg, #222);
}

.paintFindBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 2px solid var(--bia-accent, #5f52b0);
    border-radius: 22px;
    background: #ffffff;
    color: var(--bia-accent, #5f52b0);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.paintFindBtn:hover {
    background: #f2f0ff;
}

.paintFindBtn[hidden] { display: none; }

.paintGameZoomHint {
    font-size: 12px;
    color: var(--bia-muted, #5f5f68);
    text-align: center;
    margin: 0;
    padding: 0 12px;
    line-height: 1.4;
    max-width: 420px;
}
.paintGameZoomHint[hidden] { display: none; }

/* Palette row */
.paintGamePalette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 420px;
    padding: 8px 4px;
}

/* Individual color swatch */
.paintSwatch {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid transparent;
    box-sizing: border-box;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.paintSwatch:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.paintSwatch.selected {
    border-color: #ffffff;
    box-shadow: 0 0 0 3px #5f52b0, 0 2px 10px rgba(0,0,0,0.3);
    transform: scale(1.12);
}

.paintSwatchNum {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
}

/* Prompt text */
.paintGamePrompt {
    font-size: 14px;
    color: #555;
    text-align: center;
    min-height: 20px;
    padding: 0 12px;
    max-width: 380px;
}

@keyframes paintPromptFlash {
    0%   { background-color: transparent; }
    20%  { background-color: #ffe0e0; border-radius: 6px; }
    100% { background-color: transparent; }
}

.paintGamePromptFlash {
    animation: paintPromptFlash 0.8s ease;
}

/* Loading state */
.paintGameLoading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: #777;
    font-size: 14px;
}

.paintGameSpinner {
    width: 36px;
    height: 36px;
    border: 4px solid #e3deff;
    border-top-color: #5f52b0;
    border-radius: 50%;
    animation: paintSpin 0.8s linear infinite;
}

@keyframes paintSpin {
    to { transform: rotate(360deg); }
}

/* Error state */
.paintGameError {
    color: #e55;
    text-align: center;
    padding: 20px;
}

/* Mobile adjustments */
@media only screen and (max-width: 480px) {
    .paintSwatch {
        width: 44px;
        height: 44px;
    }
    .paintSwatchNum {
        font-size: 13px;
    }
    .paintGamePalette {
        gap: 6px;
    }
}

/* Color progress strip */
.paintColorProgress {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 420px;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    gap: 3px;
    padding: 0 4px;
    box-sizing: border-box;
}

.pntProgSeg {
    flex: 1;
    border-radius: 3px;
    opacity: 0.25;
    transition: opacity 0.4s ease;
}

.pntProgDone {
    opacity: 1;
}

/* Watch replay / Continue, side by side under the revealed picture */
.paintFinishActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* Watch Replay button */
.paintReplayBtn {
    margin-top: 4px;
    padding: 10px 28px;
    background: #5f52b0;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(145,135,211,0.35);
    transition: background 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.paintReplayBtn:hover {
    background: #7a6fc4;
    transform: scale(1.04);
}

.paintReplayBtn:active {
    transform: scale(0.97);
}

/* Replay is the optional one, so Continue stays the filled button. */
.paintReplayBtn--secondary {
    background: #ffffff;
    color: var(--bia-accent, #6c5fc0);
    border: 2px solid var(--bia-accent, #6c5fc0);
    box-shadow: none;
}

.paintReplayBtn--secondary:hover {
    background: #f2f0ff;
    color: var(--bia-accent, #6c5fc0);
}

/* Respect reduced motion (OS preference; the account toggle also neutralises
   motion globally via html[data-a11y-motion]): the reveal is instant instead. */
@media (prefers-reduced-motion: reduce) {
    .paintRevealLayer, .paintOutlineCanvas, .paintReplayBtn {
        transition: none;
    }
    .paintReplayBtn:hover, .paintReplayBtn:active {
        transform: none;
    }
}

/* Prevent text selection during painting */
.paintGameViewport, .paintGamePalette {
    -webkit-user-select: none;
    user-select: none;
}