/* Games played right inside the activities page (js/play-here.js). */

.play-here {
    position: relative;
    padding: 4rem 0 3.5rem;
}
.play-here-painter {
    background: linear-gradient(180deg, #e3f1fc 0%, #f5faff 100%);
}
.play-here-shop {
    background: linear-gradient(180deg, #fff1d6 0%, #fffaf0 100%);
}
.play-here-pyramid {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    color: white;
}
.play-here-golf {
    background: linear-gradient(180deg, #e3f5d8 0%, #f5fbf1 100%);
}

.play-here-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 1.75rem;
    padding: 0 1rem;
}
.play-here-badge {
    display: inline-block;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.95rem;
    border-radius: 50px;
    background: #7c3aed;
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.play-here-head h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
}
.play-here-head p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.55;
    opacity: 0.8;
}

.play-here-stage {
    position: relative;
    margin: 0 auto;
    padding: 0 1rem;
}
/* Big, but each screen still fits under the sticky site header (~70px): the
   shop picture is 1.07 wide to 1 tall, and the counter (cropped to 1.75 to 1,
   below) plus the wallet under it come to about 0.78 of the width + 112px.
   School laptops show about 650px, so the counter is the one that binds. */
.play-here-shop .play-here-stage {
    max-width: max(22rem, min(940px, calc((100vh - 86px) * 1.073 + 2rem), calc((100vh - 198px) * 1.28 + 2rem)));
}
.play-here-shop .mshop-counter-image {
    aspect-ratio: 1.75;
    object-fit: cover;
    object-position: center 75%;   /* trims the shelf at the top, keeps the counter */
}
/* The shop picture is a backdrop for the deal cards: they sit a little low,
   clear of the shopkeeper's speech. */
.play-here-shop .mshop-deal-overlay {
    top: 57%;
}
.play-here-shop .mshop-deal-view .mshop-speech-overlay {
    max-width: 62%;
}
.play-here-shop .play-here-game {
    container-type: inline-size;
}
.play-here-shop .mshop-activity {
    padding: 0;
}
.play-here-shop .mshop-scene,
.play-here-shop .mshop-payment-scene {
    box-shadow: 0 16px 48px rgba(146, 64, 14, 0.18);
}

/* The two deal cards stay side by side and shrink with the shop. */
.play-here-shop .mshop-deal-cards {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: min(1.5rem, 3cqw);
}
.play-here-shop .mshop-deal-card {
    width: min(260px, 40cqw);
    min-height: min(200px, 34cqw);
    padding: min(1.75rem, 4cqw) min(1.5rem, 3cqw);
}
.play-here-shop .mshop-deal-card-visual,
.play-here-shop .mshop-bxgf-items {
    font-size: clamp(1.15rem, 4.6cqw, 1.8rem);
}
.play-here-shop .mshop-deal-card-price {
    font-size: clamp(0.9rem, 3.2cqw, 1.15rem);
}

/* Notes and coins, in the wallet and on the counter, scale with the game. */
.play-here-shop .mshop-money-piece.note {
    width: clamp(140px, 21.5cqw, 215px);
    height: auto;
    aspect-ratio: 215 / 108;
}
.play-here-shop .mshop-money-piece.coin-2 { width: clamp(52px, 10.2cqw, 102px); height: auto; aspect-ratio: 1; }
.play-here-shop .mshop-money-piece.coin-1 { width: clamp(47px, 9cqw, 90px); height: auto; aspect-ratio: 1; }
.play-here-shop .mshop-money-piece.coin-50 { width: clamp(44px, 8.3cqw, 83px); height: auto; aspect-ratio: 1; }
.play-here-shop .mshop-money-piece.coin-20 { width: clamp(40px, 7.4cqw, 74px); height: auto; aspect-ratio: 1; }
.play-here-shop .mshop-money-piece.coin-10 { width: clamp(37px, 6.6cqw, 66px); height: auto; aspect-ratio: 1; }
.play-here-shop .mshop-deal-card:focus-visible,
.play-here-shop .mshop-money-piece:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

/* Until the game arrives: a calm placeholder the shape of the shop. */
.play-here-placeholder {
    aspect-ratio: 1286 / 1198;
    border-radius: 16px;
    background: linear-gradient(110deg, #fde7bf 30%, #fff4dc 50%, #fde7bf 70%);
    background-size: 200% 100%;
    animation: playHereShimmer 1.6s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #92400e;
    font-weight: 600;
}
/* Painter Pete: big, but the whole wall still fits on the screen (the bedroom's door wall is 2048 by 1917). */
.play-here-painter .play-here-stage {
    max-width: min(1000px, calc((100vh - 110px) * 1.08));
}
.play-here-painter .painter-activity {
    padding: 0;
}
.play-here-painter .painter-wall-scene {
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(30, 64, 120, 0.22);
}
.play-here-painter .play-here-placeholder {
    aspect-ratio: 2048 / 1917;
    background: linear-gradient(110deg, #dbeafe 30%, #eff6ff 50%, #dbeafe 70%);
    background-size: 200% 100%;
    color: #1e40af;
}
/* Golf: the game's own 16:9 picture, as big as fits under the sticky header (on a phone its card sits under the picture). */
.play-here-golf .play-here-stage {
    max-width: calc(min(1060px, (100vh - 150px) * 16 / 9) + 2rem);
}
.play-here-golf .golf {
    width: 100%;
}
.play-here-golf .play-here-placeholder {
    aspect-ratio: 16 / 9;
    background: linear-gradient(110deg, #c8eab4 30%, #e3f5d8 50%, #c8eab4 70%);
    background-size: 200% 100%;
    color: #2f6b2a;
}
/* Set for Class, a quiet see-through button in the corner of each taster (Ken, 2026-10-21: the tasters only, not the game
   pages). Bottom right of the picture, unless a game needs that corner (below). */
.play-here-class {
    display: none;
    position: absolute;
    z-index: 5;
    right: calc(1rem + 14px);
    bottom: 14px;
    align-items: center;
    gap: 6px;
    padding: 7px 13px 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #1e293b;
    font: 600 0.8rem/1 'Poppins', sans-serif;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease, background 0.2s ease, visibility 0.2s;
}
.play-here.ready .play-here-class,
.play-here-pyramid .play-here-class {
    display: inline-flex;
}
.play-here-class:hover,
.play-here-class:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.92);
}
/* Golf: bottom right is free in the taster (no map, full screen or corner Next button). On a phone the game's card and its
   Putt pointer sit there, under the picture, so it goes top right, and fades out while the drive's ball is in the top rows
   (the game moves its prompt down then), when the ball can be right under that corner. */
@media (max-width: 700px) {
    .play-here-golf .play-here-class {
        top: 12px;
        bottom: auto;
    }
    .play-here-golf .play-here-stage:has(.golf.prompt-low) .play-here-class {
        opacity: 0;
        visibility: hidden;
    }
}
/* Money Shop: on the counter, under the deal cards, and out of the way while paying (the wallet fills the bottom). On a
   phone the tallest deal cards reach that corner, so it sits just under the picture instead. */
.play-here-shop .play-here-stage:has(.mshop-payment-view) .play-here-class {
    opacity: 0;
    visibility: hidden;
}
@media (max-width: 460px) {
    .play-here-shop.ready .play-here-class {
        position: static;
        display: flex;
        width: max-content;
        margin: 10px 0 0 auto;
    }
}
/* Painter Pete: his answer box fills the bottom right of the wall, so the button sits bottom left, on the floor. On a phone
   the answer box reaches that far, so it goes just under the picture, like the shop's. */
.play-here-painter .play-here-class {
    right: auto;
    left: calc(1rem + 14px);
}
@media (max-width: 460px) {
    .play-here-painter.ready .play-here-class {
        position: static;
        display: flex;
        width: max-content;
        margin: 10px 0 0 auto;
    }
}
/* Sum Pyramid: there's no frame, so it sits at the board's top right, level with the level buttons, in the board's own
   see-through white. On a phone the level buttons fill that row, so it goes beside the top brick, a little smaller. */
.play-here-pyramid .pyr-board {
    position: relative;
}
.play-here-pyramid .play-here-class {
    top: 9px;
    right: 0;
    bottom: auto;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: rgba(255, 255, 255, 0.85);
}
.play-here-pyramid .play-here-class:hover,
.play-here-pyramid .play-here-class:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
@media (max-width: 640px) {
    .play-here-pyramid .play-here-class {
        top: calc(61px + var(--pyr-cell-h) / 2 - 14px);
        padding: 6px 10px 6px 9px;
        font-size: 0.72rem;
    }
}
.play-here-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.4rem;
}
.play-here-cta.play-here-cta-alt {   /* beats .play-here-cta, which comes later */
    background: white;
    box-shadow: 0 4px 0 #c4b5fd;
    color: #5b21b6;
    border: 2px solid #c4b5fd;
}
.play-here-done-card .play-here-cta + .play-here-cta {
    margin-top: 0.6rem;
}
.play-here.ready .play-here-placeholder,
.play-here.failed .play-here-placeholder {
    display: none;
}
.play-here-failed {
    display: none;
    padding: 2rem 1rem;
    text-align: center;
}
.play-here.failed .play-here-failed {
    display: block;
}
@keyframes playHereShimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.play-here-foot {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.75;
}
.play-here-foot a {
    color: inherit;
    font-weight: 600;
}

/* ---- The card over a finished round ---- */
.play-here-done {
    position: absolute;
    inset: 0 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.play-here-done.show {
    opacity: 1;
}
/* display: flex above would otherwise beat the hidden attribute and leave an
   invisible card on top of the game, swallowing every click. */
.play-here-done[hidden] {
    display: none;
}
.play-here-done-card {
    max-width: 440px;
    margin: 1rem;
    padding: 1.75rem 1.75rem 1.4rem;
    border-radius: 18px;
    background: white;
    color: #1f2937;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.play-here-done-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
}
.play-here-done-card p {
    margin: 0 0 1.25rem;
    color: #4b5563;
    line-height: 1.5;
}
.play-here-done-card .play-here-done-why {
    margin-bottom: 0.75rem;
    color: #1f2937;
}
.play-here-done-card .play-here-done-more {
    font-size: 0.9rem;
}
.play-here-cta {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    background: linear-gradient(180deg, #ffd43b, #fab005);
    box-shadow: 0 4px 0 #d9930d;
    color: #3b2a00;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.play-here-cta:hover {
    transform: translateY(-2px);
}
.play-here-done-links {
    margin-top: 1rem;
    font-size: 0.9rem;
}
.play-here-done-links a,
.play-here-again {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ---- Sum Pyramid ---- */
.pyr-board {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    --pyr-cell-w: 96px;
    --pyr-cell-h: 82px;
}
/* Integers / Algebra / Challenge */
.pyr-levels {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.pyr-levels button {
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.pyr-levels button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}
.pyr-levels button[aria-pressed="true"] {
    background: #7c3aed;
    color: white;
}

/* Algebra: wider bricks for answers like 3x − 2, and x and + on the keypad. */
.pyr-board.algebra {
    --pyr-cell-w: 128px;
}
.pyr-board.algebra .pyr-cell {
    font-size: 1.3rem;
}
.pyr-keypad .pyr-alg {
    display: none;
}
.pyr-board.algebra .pyr-keypad {
    grid-template-columns: repeat(4, 64px);
}
.pyr-board.algebra .pyr-keypad .pyr-alg {
    display: block;
}

/* The rows are in the page bottom-up (so Tab follows the working order);
   column-reverse stacks them the right way up. */
.pyr-pyramid {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
}
.pyr-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.pyr-cell {
    width: var(--pyr-cell-w);
    height: var(--pyr-cell-h);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font: inherit;
    font-size: 1.9rem;
    font-weight: 700;
    color: white;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pyr-cell.seed {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.4);
}
/* Empty bricks are real text boxes. */
input.pyr-cell {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0 4px;
    min-width: 0;
    text-align: center;
    caret-color: #c4b5fd;
}
.pyr-cell.input {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(124, 58, 237, 0.6);
    cursor: text;
}
.pyr-cell.input:hover {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.12);
}
.pyr-cell.input:focus {
    outline: none;
    border-style: solid;
    border-color: #a78bfa;
    background: rgba(124, 58, 237, 0.22);
    box-shadow: 0 0 22px rgba(124, 58, 237, 0.45);
}
.pyr-cell.input.solved,
.pyr-cell.input.solved:focus {
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.75);
    background: rgba(34, 197, 94, 0.18);
    box-shadow: none;
    cursor: default;
}
.pyr-cell.input.wrong {
    border-style: solid;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    animation: pyrShake 0.45s ease;
}
.pyr-pyramid.won .pyr-cell {
    border-color: rgba(34, 197, 94, 0.85);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}
@keyframes pyrShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .pyr-cell.input.wrong { animation: none; }
    .play-here-placeholder { animation: none; }
}

.pyr-message {
    min-height: 1.6em;
    margin: 0;
    text-align: center;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
}
.pyr-message.good { color: #86efac; }
.pyr-message.bad { color: #fca5a5; }

.pyr-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.pyr-actions button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 1.4rem;
    border-radius: 12px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
}
.pyr-actions .pyr-check {
    background: #7c3aed;
    border: 1px solid #7c3aed;
}
.pyr-actions .pyr-check:hover {
    background: #6d28d9;
}
.pyr-actions .pyr-pad-toggle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.pyr-actions .pyr-pad-toggle:hover,
.pyr-actions .pyr-pad-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
}

.pyr-keypad {
    display: grid;
    grid-template-columns: repeat(3, 72px);
    gap: 8px;
}
/* display: grid above would otherwise beat the hidden attribute. */
.pyr-keypad[hidden] {
    display: none;
}
.pyr-keypad button {
    height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font: inherit;
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.pyr-keypad button:hover {
    background: rgba(255, 255, 255, 0.16);
}
.pyr-keypad button:active {
    background: rgba(124, 58, 237, 0.35);
}

/* On a phone the shop picture is only a backdrop: the speech, the badge and
   the cards stack in order, so a long line or a tall card never overlaps. */
@media (max-width: 600px) {
    .play-here-shop .mshop-deal-view .mshop-scene {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.9rem;
        min-height: calc((100vw - 1.5rem) * 1198 / 1286);
        padding: 0.9rem 0.75rem 1.25rem;
    }
    .play-here-shop .mshop-deal-view .mshop-bg-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .play-here-shop .mshop-deal-view .mshop-speech-overlay {
        position: relative;
        top: auto;
        left: auto;
        max-width: none;
        align-self: stretch;
    }
    .play-here-shop .mshop-deal-overlay {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        margin: auto 0;
    }
}

@media (max-width: 640px) {
    .play-here {
        padding: 2.75rem 0 2.5rem;
    }
    .play-here-head p {
        font-size: 1rem;
    }
    .play-here-stage {
        padding: 0 0.75rem;
    }
    .play-here-done {
        inset: 0 0.75rem;
    }
    .play-here-class {
        right: calc(0.75rem + 12px);
    }
    .pyr-board {
        --pyr-cell-w: min(76px, calc((100vw - 48px) / 4));
        --pyr-cell-h: 64px;
    }
    .pyr-cell {
        font-size: 1.45rem;
    }
    .pyr-keypad {
        grid-template-columns: repeat(3, 64px);
    }
    .pyr-keypad button {
        height: 48px;
    }
    /* Algebra answers need the whole width; 16px keeps iPhones from zooming. */
    .pyr-board.algebra {
        --pyr-cell-w: calc((100vw - 48px) / 4);
    }
    .pyr-board.algebra .pyr-cell {
        font-size: 1rem;
    }
    .pyr-levels button {
        padding: 0.45rem 0.85rem;
        font-size: 0.9rem;
    }
}