/*
 * Components added by the recreation (not present in the source stylesheet):
 * demo ad placeholders, demo ad overlay states, disclaimer, inline form errors,
 * selected-state cards, notices and the optional ad sandbox panel.
 */

/* ---------------- Display ad placeholders ---------------- */
.gadsbanner:empty {
    margin-top: 0;
}

/* Live (GPT) slots: reserve room while the ad loads so the page doesn't jump,
   and take no space at all when Google returns nothing or the ad is blocked. */
.gadsbanner[data-ad-state="loading"],
.gadsbanner[data-ad-state="requested"] {
    margin-top: 16px;
    min-height: 250px;
}

.gadsbanner[data-ad-state="no-fill"],
.gadsbanner[data-ad-state="blocked"],
.gadsbanner[data-ad-state="unsupported"] {
    margin-top: 0;
    min-height: 0;
}

.ad-demo {
    margin: 0 16px;
    min-height: var(--ad-demo-height, 250px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed #3a3a46;
    border-radius: 10px;
    background: repeating-linear-gradient(135deg, #15141b 0 12px, #121117 12px 24px);
    color: #8a8a96;
    font-size: 13px;
    letter-spacing: 0.4px;
    white-space: normal;
}

.ad-demo strong {
    color: #b9b9c6;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ad-demo small {
    color: #6c6c78;
    font-size: 11px;
}

/* ---------------- Demo full-screen ad (reuses .game-ad-modal-* from style.css) ---------------- */
.game-ad-modal-overlay {
    white-space: normal;
}

.ad-demo-creative {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    color: #c9c9d4;
    font-size: 14px;
    line-height: 1.4;
}

.ad-demo-creative b {
    color: #ffffff;
    font-size: 16px;
}

.ad-demo-creative code {
    color: #ff9d7f;
    font-size: 12px;
}

.ad-demo-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #ff7655;
    animation: ad-demo-spin 0.9s linear infinite;
}

@keyframes ad-demo-spin {
    to {
        transform: rotate(360deg);
    }
}

.game-ad-continue-btn:disabled {
    cursor: not-allowed;
}

/* ---------------- Disclaimer ---------------- */
.demo-disclaimer {
    margin: 28px 16px 20px;
    padding: 10px 12px;
    border-top: 1px solid #24232b;
    color: #8a8a96;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
}

.main_div[style*="#6a11cb"] .demo-disclaimer {
    color: #e4d7ff;
    border-top-color: rgba(255, 255, 255, 0.25);
}

.coin-note {
    display: block;
    margin-top: 6px;
    color: #8a8a96;
    font-size: 11px;
    letter-spacing: 0.3px;
}

/* ---------------- Calculators ---------------- */
.calc-error {
    min-height: 18px;
    margin: -12px 0 12px;
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: normal;
}

.input-field[aria-invalid="true"] {
    border-color: #ff6b6b;
}

.calc-note {
    margin-top: 10px;
    color: #9a9aa6;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

/* ---------------- Selected state (clothes / anime / skin pickers) ---------------- */
.game_section2.is-selected,
.animesec.is-selected {
    outline: 3px solid #ff852b;
    outline-offset: 2px;
    border-radius: 12px;
}

.picker-summary {
    margin: 10px 16px 0;
    color: #c9c9d4;
    font-size: 13px;
    white-space: normal;
}

.picker-summary span {
    display: inline-block;
    margin: 3px 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #24232b;
    color: #ffb27a;
}

.download-note {
    margin-top: 8px;
    color: #c9c9d4;
    font-size: 12px;
    white-space: normal;
}

/* ---------------- Notices ---------------- */
.storage-notice,
.file-protocol-notice {
    margin: 10px 16px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #3a2a12;
    color: #ffd59a;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
}

.spin-note {
    margin-top: 6px;
    color: #ff6b6b;
    font-size: 16px;
    font-weight: 600;
    white-space: normal;
}

.scratch-status {
    margin-top: 12px;
    font-size: 15px;
    white-space: normal;
}

#scratchCanvas {
    max-width: 100%;
    touch-action: none;
    cursor: crosshair;
}

#scratchCanvas.is-locked {
    cursor: not-allowed;
}

.quiz-card:focus-visible,
.copy-btn:focus-visible,
.quiz-option:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid #ffb27a;
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------------- Ad sandbox (debug panel, off by default) ---------------- */
.ad-sandbox {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 100000;
    max-width: 230px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(20, 20, 28, 0.96);
    border: 1px solid #3a3a46;
    color: #ddd;
    font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: normal;
}

.ad-sandbox label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.ad-sandbox select {
    width: 100%;
    margin-bottom: 6px;
}

.ad-sandbox p {
    margin: 4px 0 0;
    color: #9a9aa6;
}