:root {
    --picture-lane-width: 760px;
}

.picture-page-wrap {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 12px;
}

.picture-shell {
    background: linear-gradient(180deg, #f9f3e4 0%, #f3ead3 100%);
    border: 2px solid #8f7a4c;
    border-radius: 16px;
    padding: 10px;
}

.picture-hero {
    text-align: center;
    margin-bottom: 8px;
}

.picture-title {
    margin: 0;
    color: #223028;
    font-size: 1.85rem;
    line-height: 1.16;
    letter-spacing: -0.01em;
}

.picture-subtitle {
    margin: 3px 0 0;
    color: #526155;
    font-size: 0.96rem;
}

.picture-status-row {
    width: 100%;
    max-width: var(--picture-lane-width);
    margin: 8px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.picture-status-pill {
    min-width: 132px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #b79a61;
    background: #fbf8ef;
    color: #3b3e2f;
    font-size: 0.92rem;
    font-weight: 700;
}

.picture-status-pill span {
    color: #5b644f;
}

.picture-status-pill strong {
    color: #1b4f3a;
}

.picture-game-frame {
    width: 100%;
    max-width: var(--picture-lane-width);
    margin: 0 auto;
}

.target-display {
    background: #fff8e8;
    border-radius: 16px;
    padding: 1.2rem;
    margin: 0 0 0.9rem;
    text-align: center;
    border: 2px solid #ccb27a;
    box-shadow: none;
}

.instruction-text {
    font-size: 1.02rem;
    color: #5b654f;
    margin-bottom: 0.2rem;
}

.target-emoji {
    font-size: 5.2rem;
    margin: 0.5rem 0 0.25rem;
    filter: drop-shadow(0 8px 14px rgba(26, 41, 31, 0.12));
}

.target-name {
    font-size: 1.95rem;
    font-weight: 800;
    color: #3f3a2c;
    margin-bottom: 0;
}

.picture-grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 2px solid #d7b979;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1), transparent 36%),
        linear-gradient(180deg, #1d5a42 0%, #164634 100%);
}

.picture-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 26px 12px;
    color: #f4ecd7;
}

.picture-placeholder-icon {
    font-size: 3rem;
    margin-bottom: 0.4rem;
}

.picture-placeholder-title {
    margin: 0;
    font-size: 1.2rem;
}

.picture-placeholder-text {
    margin: 0.35rem 0 0;
    color: rgba(244, 236, 215, 0.84);
}

.picture-btn {
    aspect-ratio: 1;
    border-radius: 18px;
    border: 2px solid #dec99a;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    font-size: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    background:
        radial-gradient(circle at 78% 18%, rgba(255,255,255,0.72), transparent 42%),
        linear-gradient(180deg, #fff8e7 0%, #f1e0b9 100%);
    box-shadow: 0 8px 18px rgba(8, 20, 14, 0.22);
}

.picture-btn:hover {
    transform: translateY(-3px);
    border-color: #1f5d45;
    box-shadow: 0 12px 18px rgba(8, 20, 14, 0.28);
}

.picture-btn:active {
    transform: translateY(0);
}

.picture-action-lane {
    margin-top: 10px;
}

.picture-control-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.picture-start-btn {
    min-height: 48px;
    border-radius: 10px;
    padding: 0 18px;
    font-size: 0.98rem;
    font-weight: 700;
}

.picture-guide {
    width: 100%;
    max-width: var(--picture-lane-width);
    margin: 8px auto 0;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid #ccb27a;
    background: #f7edd8;
}

.picture-guide h2 {
    margin: 0 0 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #4d583f;
    font-size: 1rem;
}

.picture-guide p {
    margin: 0;
    color: #5e644d;
    text-align: center;
    line-height: 1.6;
}

.picture-bottom-link {
    width: 100%;
    max-width: var(--picture-lane-width);
    margin: 8px auto 0;
    display: flex;
    justify-content: center;
}

.picture-bottom-link .btn-back-bottom {
    background: #1a3b2c;
    color: #f8edd1;
    border: 1px solid #355544;
}

.picture-bottom-link .btn-back-bottom:hover {
    background: #224936;
    color: #fff5dd;
}

@media (max-width: 700px) {
    .picture-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .picture-btn {
        font-size: 3.3rem;
    }

    .picture-control-row {
        flex-direction: column;
    }

    .picture-start-btn {
        width: 100%;
        max-width: 100%;
    }

    .target-emoji {
        font-size: 4.4rem;
    }

    .target-name {
        font-size: 1.55rem;
    }
}
/* 2026-03 tablet fit pass: picture finding */
:root {
    --picture-lane-width: 680px;
}

.picture-shell {
    padding: 8px;
}

.picture-target-display,
.target-display {
    padding: 0.95rem;
    margin-bottom: 0.65rem;
}

.target-emoji {
    font-size: 4.3rem;
    margin: 0.35rem 0 0.2rem;
}

.target-name {
    font-size: 1.62rem;
}

.picture-grid {
    gap: 8px;
    padding: 8px;
}

.picture-placeholder {
    padding: 18px 10px;
}

.picture-btn {
    border-radius: 14px;
    font-size: 3.5rem;
}

.picture-status-row,
.picture-action-lane,
.picture-guide,
.picture-bottom-link {
    margin-top: 6px;
}

@media (min-width: 768px) and (max-width: 1180px) {
    :root {
        --picture-lane-width: 560px;
    }

    .picture-shell {
        padding: 7px;
    }

    .picture-hero {
        margin-bottom: 6px;
    }

    .picture-title {
        font-size: 1.6rem;
    }

    .picture-subtitle {
        font-size: 0.88rem;
    }

    .target-display {
        padding: 0.8rem 0.85rem;
        margin-bottom: 0.55rem;
    }

    .instruction-text {
        font-size: 0.9rem;
    }

    .target-emoji {
        font-size: 3.5rem;
        margin: 0.25rem 0 0.1rem;
    }

    .target-name {
        font-size: 1.3rem;
    }

    .picture-grid {
        gap: 6px;
        padding: 7px;
    }

    .picture-btn {
        font-size: 2.75rem;
        border-radius: 13px;
    }

    .picture-status-pill {
        min-width: 108px;
        padding: 6px 10px;
        font-size: 0.84rem;
    }

    .picture-start-btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

    .picture-guide {
        padding: 0.75rem 0.85rem;
    }

    .picture-guide p {
        font-size: 0.86rem;
    }
}

/* 2026-03 final tablet compact pass: picture finding */
.picture-page-wrap {
    max-width: 1100px;
}

.picture-game-frame {
    max-width: 640px;
}

.target-display {
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.6rem;
}

.target-emoji {
    font-size: 3.9rem;
}

.target-name {
    font-size: 1.45rem;
}

.picture-grid {
    gap: 7px;
    padding: 7px;
}

.picture-btn {
    font-size: 3rem;
    border-radius: 13px;
}

.picture-status-row,
.picture-action-lane,
.picture-guide,
.picture-bottom-link {
    max-width: 640px;
}

@media (min-width: 768px) and (max-width: 1180px) {
    :root {
        --picture-lane-width: 520px;
    }

    .picture-page-wrap {
        max-width: 900px;
    }

    .picture-shell {
        padding: 6px;
    }

    .picture-hero {
        margin-bottom: 4px;
    }

    .picture-title {
        font-size: 1.46rem;
    }

    .picture-subtitle {
        font-size: 0.82rem;
    }

    .target-display {
        padding: 0.7rem 0.75rem;
        margin-bottom: 0.45rem;
        border-radius: 14px;
    }

    .instruction-text {
        font-size: 0.82rem;
    }

    .target-emoji {
        font-size: 3rem;
        margin: 0.18rem 0 0.06rem;
    }

    .target-name {
        font-size: 1.08rem;
    }

    .picture-grid {
        gap: 5px;
        padding: 6px;
        border-radius: 12px;
    }

    .picture-btn {
        font-size: 2.35rem;
        border-radius: 11px;
        border-width: 1px;
    }

    .picture-placeholder {
        padding: 14px 10px;
    }

    .picture-placeholder-icon {
        font-size: 2.2rem;
    }

    .picture-placeholder-title {
        font-size: 1rem;
    }

    .picture-placeholder-text {
        font-size: 0.8rem;
    }

    .picture-status-row {
        gap: 6px;
        margin-top: 5px;
    }

    .picture-status-pill {
        min-width: 96px;
        padding: 5px 9px;
        font-size: 0.78rem;
    }

    .picture-action-lane {
        margin-top: 5px;
    }

    .picture-start-btn {
        min-height: 42px;
        padding: 0 16px;
        font-size: 0.86rem;
    }

    .picture-guide {
        padding: 0.68rem 0.75rem;
        margin-top: 5px;
    }

    .picture-guide h2 {
        margin-bottom: 0.3rem;
        font-size: 0.92rem;
    }

    .picture-guide p {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .picture-bottom-link {
        margin-top: 5px;
    }
}