/* ========================================
   ACTIVITY SKIP ARROWS (shared)
   ======================================== */
.activity-skip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: white;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 5;
    padding: 0;
    line-height: 1;
}
.activity-skip-arrow:hover:not(:disabled) {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}
.activity-skip-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}
.activity-skip-arrow.left {
    left: -48px;
}
.activity-skip-arrow.right {
    right: -48px;
}
.flashcard-card-wrapper,
.bestbuy-card-wrapper {
    position: relative;
}
@media (max-width: 600px) {
    .activity-skip-arrow {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    .activity-skip-arrow.left {
        left: -36px;
    }
    .activity-skip-arrow.right {
        right: -36px;
    }
}

/* ========================================
   SET FOR CLASS BUTTON (shared across all activities)
   ======================================== */
.set-for-class-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.set-for-class-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.set-for-class-btn svg {
    flex-shrink: 0;
}

@media (max-width: 500px) {
    .set-for-class-btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

/* ========================================
   FULLSCREEN TOGGLE BUTTON
   ======================================== */
.fullscreen-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.fullscreen-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #334155;
}

/* Progress row: dots centered, fullscreen button pinned right */
.activity-progress-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0.5rem;
}
.activity-progress-row > .fullscreen-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Fullscreen container styles */
*:fullscreen,
*:-webkit-full-screen {
    background: white;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Override white background for the join-code fullscreen display */
.fullscreen-display:fullscreen,
.fullscreen-display:-webkit-full-screen {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Active fullscreen centering (applied via JS alongside zoom) */
.fullscreen-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Wrapper-based activities: center content, let zoom handle scaling */
.activity-fullscreen-wrapper.fullscreen-active {
    align-items: center;
    justify-content: center;
}

/* Wrapper for activities that replace innerHTML (money shop, painter) */
.activity-fullscreen-wrapper {
    position: relative;
}
.activity-fullscreen-wrapper > .fullscreen-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 10;
}
.activity-fullscreen-wrapper:fullscreen,
.activity-fullscreen-wrapper:-webkit-full-screen {
    display: flex;
    flex-direction: column;
}
.activity-fullscreen-wrapper:fullscreen > .fullscreen-btn,
.activity-fullscreen-wrapper:-webkit-full-screen > .fullscreen-btn {
    position: static;
    align-self: flex-end;
    margin: 4px 8px;
    flex-shrink: 0;
}


/* Money Shop fullscreen: counter-scale text overlays so they don't inflate with zoom.
   --mshop-fs-zoom is set by JS when zoom is applied. */
.activity-fullscreen-wrapper.fullscreen-active .mshop-speech-overlay,
.activity-fullscreen-wrapper.fullscreen-active .mshop-shopping-list,
.activity-fullscreen-wrapper.fullscreen-active .mshop-door-note,
.activity-fullscreen-wrapper.fullscreen-active .mshop-skip-part-btn,
.activity-fullscreen-wrapper.fullscreen-active .mshop-progress,
.activity-fullscreen-wrapper.fullscreen-active .mshop-counter,
.activity-fullscreen-wrapper.fullscreen-active .mshop-wallet-tray,
.activity-fullscreen-wrapper.fullscreen-active .mshop-payment-buttons,
.activity-fullscreen-wrapper.fullscreen-active .mshop-speech-bubble,
.activity-fullscreen-wrapper.fullscreen-active .mshop-register-overlay {
    zoom: calc(1 / var(--mshop-fs-zoom, 1));
}

/* Border-radius on scene containers: counter-scale so corners don't inflate */
.activity-fullscreen-wrapper.fullscreen-active .mshop-exterior-scene,
.activity-fullscreen-wrapper.fullscreen-active .mshop-payment-scene,
.activity-fullscreen-wrapper.fullscreen-active .mshop-register-scene,
.activity-fullscreen-wrapper.fullscreen-active .mshop-scene {
    border-radius: calc(16px / var(--mshop-fs-zoom, 1));
}

/* Pyramid: full-width background and header in fullscreen */
.pyramid-app.fullscreen-active {
    overflow: hidden;
}
.pyramid-app.fullscreen-active .stage-select-view,
.pyramid-app.fullscreen-active .stage-play-view {
    width: 100%;
    height: 100%;
}
.pyramid-app.fullscreen-active .stage-header {
    width: 100%;
    box-sizing: border-box;
}

/* Painter: center content vertically in fullscreen for scenes without wall header */
.fullscreen-active .painter-intro-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}
.fullscreen-active .painter-room-select-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}