* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body { 
    background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif;
    min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; 
    padding: 32px 16px 56px; overflow-x: hidden;
}

.wrap { width: 100%; max-width: 390px; }
.screen { display: none; }
.screen.on { display: block; animation: fadein .35s ease both; }
@keyframes fadein { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.logo { text-align: center; margin-bottom: 32px; padding-top: 8px; }
.logo-img { 
    width: auto; 
    max-width: 240px; 
    height: 200px; 
    border-radius: 8px; 
    object-fit: contain; 
    margin: 0 auto 12px; 
    display: block; 
}
.logo h1 { font-family: 'Playfair Display', serif; font-size: 22px; letter-spacing: .04em; }
.logo p { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }

.box { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 22px; margin-bottom: 12px; position: relative; }

.field { margin-bottom: 16px; }
label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

input[type=text], input[type=tel], input[type=password], input[type=number] {
    width: 100%; background: var(--card2); border: 1px solid #2e2e2e; border-radius: 12px;
    padding: 13px 15px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; outline: none; transition: border-color .2s;
}
input:focus { border-color: var(--accent); }

.btn { width: 100%; padding: 15px; border-radius: 13px; border: none; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .18s; }
.btn-gold { background: var(--accent); color: var(--btn-text, #000000); margin-top: 4px; }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); margin-top: 8px; }

.error-msg { font-size: 12px; color: #e07070; text-align: center; margin-top: 8px; min-height: 18px; }
.success-msg { font-size: 12px; color: #28a745; text-align: center; margin-top: 8px; min-height: 18px; }

/* Dynamic Grid - Now controlled by PHP variable */
.grid { 
    display: grid; 
    grid-template-columns: repeat(var(--per-row, 5), 1fr); 
    gap: 12px; 
    justify-content: center; 
    margin-bottom: 15px; 
}

/* Bulletproof Image Rendering */
.stamp-img {
    width: 100%; 
    height: auto; 
    max-width: 80px; /* Safety net so they never become massive again! */
    aspect-ratio: 1; 
    object-fit: contain; 
    transition: all .3s ease;
    display: block;
}

/* Unclaimed stamp: Dark and Gray */
.stamp-img:not(.on) { filter: grayscale(100%) brightness(30%) opacity(0.5); }
/* Claimed stamp: Full color and slightly larger */
.stamp-img.on { filter: none; transform: scale(1.05); }
.stamp-img.pop { animation: pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0% {transform:scale(1)} 45% {transform:scale(1.3)} 100% {transform:scale(1.05)} }

/* Progress Bar */
.pbar-wrap { background: var(--card2); border-radius: 99px; height: 3px; margin: 14px 0 6px; overflow: hidden; }
.pbar { height: 100%; background: var(--accent); border-radius: 99px; transition: width .6s ease; }
.plabel { font-size: 11px; color: var(--muted); text-align: center; }

/* Stats Bar & Card Header Layout */
.stats-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.stat-box { text-align:center; }
.stat-box.left { color: var(--muted); }
.stat-box.right { color: var(--accent); }
.stat-num { font-family:'Playfair Display',serif; font-size: 28px; line-height:1; margin-bottom:4px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.stat-num.pop { transform: scale(1.4); }
.stat-label { font-size: 10px; text-transform:uppercase; letter-spacing:0.1em; }
.sh { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px }
.sh h2 { font-family:'Playfair Display',serif; font-size:17px }
.sh span { font-size:12px; color:var(--muted) }

/* Card Area Slide Animations */
.card-area { transition: transform 0.4s ease, opacity 0.4s ease; }
.card-area.slide-out { transform: translateX(-100%); opacity: 0; }
.card-area.slide-in { animation: slideIn 0.5s forwards cubic-bezier(0.25, 0.8, 0.25, 1); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }