/* ================================================================
   Pea Media Peel Reveal — Frontend Game Styles
   ================================================================ */

#pmpr-game-wrapper {
    --pmpr-primary:  #e8534a;
    --pmpr-gold:     #f5c518;
    --pmpr-gold-dk:  #c9a200;
    --pmpr-bg:       #fff9f2;
    --pmpr-text:     #2d1a00;
    --pmpr-radius:   18px;
    --pmpr-shadow:   0 10px 40px rgba(0,0,0,0.14);

    font-family: "londrinasolid-regular", sans-serif;
    max-width: 540px;
    margin: 0 auto;
    padding: 24px 20px;
    color: var(--pmpr-text);
    text-align: center;
	font-size: 1.2rem; /* base size — all rem values below are relative to this */
}

/* ── Screens ─────────────────────────────────────────────────────── */
.pmpr-screen { animation: pmprFadeIn 0.45s ease; }
@keyframes pmprFadeIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ── Loading ─────────────────────────────────────────────────────── */
.pmpr-loading-icon { font-size:4rem; animation:pmprBounce 1s ease-in-out infinite; }
@keyframes pmprBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* ── Headings ────────────────────────────────────────────────────── */
.pmpr-game-title { font-size:1.8rem; color:#ddc80f; margin-bottom:6px; }
.pmpr-game-desc  { font-size:1rem; color:#666; margin-bottom:20px; }

/* ── Canvas stack ────────────────────────────────────────────────── */
.pmpr-canvas-area { display:inline-block; margin:0 auto 20px; }
.pmpr-canvas-stack {
    position: relative;
    width:  300px;
    height: 340px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    cursor: grab;
    display: block;
}
#pmpr-reveal-canvas  { position:absolute; inset:0; display:block; }
#pmpr-scratch-canvas { position:absolute; inset:0; display:block; touch-action:none; }
.pmpr-hint { font-size:0.85rem; color:#999; margin-top:10px; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.pmpr-btn {
    display: inline-block;
    padding: 14px 38px;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    letter-spacing: .02em;
    font-family: inherit;
	margin: 0px 20px 10px 20px;
	font-family: "londrinasolid-regular", sans-serif;
}
.pmpr-btn:hover  { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.22); }
.pmpr-btn:active { transform:translateY(0); }
.pmpr-btn-primary { background:var(--pmpr-primary); color:#fff; box-shadow:0 4px 18px rgba(232,83,74,0.38); }
.pmpr-btn-gold    { background:linear-gradient(135deg,#f5c518,#e6a800); color:#2d1a00; box-shadow:0 4px 18px rgba(245,197,24,0.45); }
.pmpr-btn-copy    { background:#f0f0f0; color:#333; font-size:0.9rem; padding:10px 22px; margin-top:12px; }
.pmpr-btn-cta     { background:#111; color:var(--pmpr-primary); border:2.5px solid #FFD627; margin-top:18px; font-size:1rem; text-decoration:none; }
.pmpr-btn-cta:hover { background:#73bb43; color:#fff; }

/* ── Result icons ────────────────────────────────────────────────── */
.pmpr-result-icon { font-size:5rem; display:inline-block; margin:20px auto; }
.pmpr-icon        { font-size:4rem; }
.pmpr-glow-gold   { filter:drop-shadow(0 0 18px rgba(245,197,24,0.75)); animation:pmprGlow 2s ease-in-out infinite; }
@keyframes pmprGlow { 0%,100%{filter:drop-shadow(0 0 10px rgba(245,197,24,0.55))} 50%{filter:drop-shadow(0 0 32px rgba(245,197,24,1))} }

/* ── Prize code box ──────────────────────────────────────────────── */
.pmpr-code-box {
    background: var(--pmpr-bg);
    border: 2.5px dashed var(--pmpr-gold);
    border-radius: var(--pmpr-radius);
    padding: 20px;
    margin: 22px 0;
}
.pmpr-prize-code-label { font-size:.85rem; color:#111; margin-bottom:8px; }
.pmpr-prize-code {
    font-size:2rem; font-weight:bold;
    font-family: "londrinasolid-regular", sans-serif;
    color:var(--pmpr-primary);
    letter-spacing:.1em;
}

/* ── TEXXT SIZES ── */

/* ── Loading screen ── */
#pmpr-loading .pmpr-loading-icon { font-size: 4.3rem; }   /* egg/gift emoji */
#pmpr-loading p                  { font-size: 1.6rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; }   /* "Wrapping your gift…" */

/* ── Game screen ── */
.pmpr-game-title { font-size: 2.2rem; }   /* game title */
.pmpr-game-desc  { font-size: 1.3rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; }     /* description */
.pmpr-hint       { font-size:1.7rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; }  /* "Scratch or swipe to reveal" */

/* ── Buttons ── */
.pmpr-btn        { font-size: 1.1rem; }   /* all buttons */

/* ── Loser screen ── */
#pmpr-loser h2          { font-size: 2rem; line-height: 38px; margin-top: -30px; margin-bottom: 15px;}   /* "Unlucky — not a winner!" */
.pmpr-loser-text        { font-size: 1.5rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; }     /* "Thanks for playing!" */
.pmpr-small             { font-size: 1.2rem; color:#fff; }  /* sub-text / share message */

/* ── Winner / claim form ── */
#pmpr-winner-claim h2        { font-size: 3.5rem; }   /* "You've Won!" */
.pmpr-winner-intro           { font-size: 1.5rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; }     /* "Enter your details…" */
.pmpr-field label            { font-size: 0.9rem; }   /* form labels */
.pmpr-field input            { font-size: 1rem; }     /* form inputs */
.pmpr-check-field label      { font-size: 0.85rem; }  /* marketing checkbox text */

/* ── Prize reveal screen ── */
#pmpr-prize-reveal h2   { font-size: 2.5rem; }   /* prize name */
#pmpr-prize-desc        { font-size: 1.4rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; }     /* prize description */
.pmpr-prize-code-label  { font-size: 1.2rem; }  /* "Your Prize Code:" */
.pmpr-prize-code        { font-size: 2rem; }     /* the actual code */
#pmpr-prize-footer      { font-size: 1.4rem; }  /* footer message */

/* ── Locked / info screens ── */
#pmpr-all-claimed h2,
#pmpr-game-over h2,
#pmpr-already-played h2,
#pmpr-inactive h2       { font-size: 1.5rem; }
.pmpr-msg               { font-size: 1.4rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; }
.pmpr-icon              { font-size: 4rem; }     /* emoji icon on these screens */

/* ── Error message ── */
.pmpr-error             { font-size: 0.9rem; }

/* ── Form ────────────────────────────────────────────────────────── */
.pmpr-form { text-align:left; max-width:360px; margin:20px auto 0; }
.pmpr-field { margin-bottom:16px; }
.pmpr-field label { display:block; font-size:1.4rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; font-weight:bold; margin-bottom:5px; }
.pmpr-field input[type=text],
.pmpr-field input[type=email] {
    width:100%; padding:11px 14px; border-radius:9px; border: 2px solid #d5b426;
    font-size:1rem; box-sizing:border-box; transition:border-color .2s; font-family:inherit;
}
.pmpr-field input[type="text"]::placeholder,
.pmpr-field input[type="email"]::placeholder {
    font-family: "londrinasolid-regular", sans-serif;
    color: #444;
    font-size: 1.2rem;
}
.pmpr-field input:focus { border-color:var(--pmpr-primary); outline:none; }
.pmpr-check-field label { display:flex; align-items:flex-start; gap:10px; font-weight:normal; font-size:1.2rem; font-family: "londrinasolid-regular", sans-serif; color:#fff; cursor:pointer; }
.pmpr-check-field input[type=checkbox] { margin-top:2px; width:16px; height:16px; flex-shrink:0; }

/* ── Misc ────────────────────────────────────────────────────────── */
.pmpr-error  { background:#ffe5e5; border:1px solid #f5c6c6; border-radius:8px; padding:10px 14px; color:#c00; font-size:.9rem; margin-bottom:12px; }
.pmpr-small  { font-size:1.4rem; color:#fff; font-family: "londrinasolid-regular", sans-serif; margin-top:16px; margin-bottom: 15px; }
.pmpr-msg    { color:#555; }
.pmpr-spinner{ width:36px;height:36px;border:4px solid #f0f0f0;border-top-color:var(--pmpr-primary);border-radius:50%;animation:pmprSpin .7s linear infinite;margin:12px auto; }
@keyframes pmprSpin { to{transform:rotate(360deg)} }

/* ── Confetti ────────────────────────────────────────────────────── */
.pmpr-confetti-wrap { position:relative;height:0;overflow:visible;pointer-events:none; }
.pmpr-confetti-piece {
    position:absolute; border-radius:2px;
    animation:pmprConfetti linear forwards;
}
@keyframes pmprConfetti { 0%{transform:translateY(-20px) rotate(0deg);opacity:1} 100%{transform:translateY(220px) rotate(720deg);opacity:0} }

/* ── Custom result icons ─────────────────────────────────────────── */
.pmpr-result-icon img {
    display: block;
    margin: 0 auto;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
}
.pmpr-media-field { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pmpr-media-preview { display:flex; align-items:center; }


@media (max-width: 600px) {
    #pmpr-game-wrapper {
        padding: 12px 10px;
    }

    .pmpr-canvas-area {
        display: block;
        width: 100%;
    }

    .pmpr-canvas-stack {
        width: 220px !important;
        height: 249px !important;
        margin: 0 auto;
        display: block;
    }

    #pmpr-reveal-canvas,
    #pmpr-scratch-canvas {
        width: 220px !important;
        height: 249px !important;
    }
	
    .pmpr-btn  { padding: 11px 28px; font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   MULTI-EGG GRID LAYOUT
   ══════════════════════════════════════════════════════════════════ */

#pmpr-game-multi .pmpr-hint {
    margin-bottom: 14px;
}

.pmpr-multi-grid {
    display: grid;
    grid-template-columns: repeat(3, 140px);
    grid-template-rows: repeat(2, 158px);
    gap: 12px;
    margin: 0 auto 16px;
    width: fit-content;
}

.pmpr-multi-cell {
    position: relative;
    width: 140px;
    height: 158px;
    border-radius: 10px;
    overflow: hidden;
    cursor: grab;
    transition: transform .2s;
}
.pmpr-multi-cell:hover { transform: translateY(-2px); }
.pmpr-multi-cell.pmpr-cell-revealed { cursor: default; }

.pmpr-multi-stack {
    position: relative;
    width: 140px;
    height: 158px;
}

.pmpr-multi-reveal,
.pmpr-multi-scratch {
    position: absolute;
    inset: 0;
    display: block;
    width: 140px;
    height: 158px;
}
.pmpr-multi-scratch { touch-action: none; }

/* Tick overlay that appears when a cell is fully scratched */
.pmpr-multi-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.pmpr-multi-cell.pmpr-cell-revealed::after {
    opacity: 1;
}

/* Progress dots at bottom */
.pmpr-multi-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pmpr-multi-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transition: background .3s;
}
.pmpr-multi-dot.pmpr-dot-done {
    background: #f5c518;
    box-shadow: 0 0 6px rgba(245,197,24,0.7);
}

/* Mobile: shrink grid to 2 cols */
@media (max-width: 520px) {
    .pmpr-multi-grid {
        grid-template-columns: repeat(2, 130px);
        grid-template-rows: repeat(3, 147px);
        gap: 10px;
    }
    .pmpr-multi-cell,
    .pmpr-multi-stack,
    .pmpr-multi-reveal,
    .pmpr-multi-scratch {
        width: 130px !important;
        height: 147px !important;
    }
}