:root{
  --navy:#061b37;
  --navy2:#102c50;
  --red:#c92e2b;
  --gold:#e6b63b;
  --cream:#f6efdf;
  --paper:#fffaf0;
  --ink:#10233e;
  --muted:#6f756f;
  --line:rgba(16,44,80,.18);
  --move-time:520ms;
  --move-ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:url('images/desktop-bg.jpg') center/cover no-repeat;
}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}

.site-shell{
  width:100vw;height:100dvh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:clamp(12px,2vw,28px);padding-bottom:clamp(42px,5vh,58px);
}
.cards-layout{
  --gap:clamp(16px,2vw,34px);
  height:min(92dvh, calc((94vw - var(--gap)) * 7 / 10));
  width:calc((100% * 10 / 14) + var(--gap));
  max-width:94vw;
  display:flex;align-items:center;justify-content:center;gap:var(--gap);
}
.site-card{
  position:relative;height:100%;width:auto;aspect-ratio:5/7;flex:0 0 auto;
  overflow:hidden;border-radius:4.8%;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.38));
  transform:translateY(115dvh);opacity:0;
  transition:transform var(--move-time) var(--move-ease),opacity 320ms ease;
  will-change:transform,opacity;
}
.site-card.is-visible{transform:translateY(0);opacity:1}
.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.front-content,.back-content{position:absolute;inset:0;z-index:1}

.front-content{display:flex;flex-direction:column;align-items:center;padding:3.5% 9% 7%}
.logo-button{width:42%;padding:0;border:0;background:none;cursor:pointer;transition:transform .18s ease}
.logo-button:hover{transform:scale(1.04)}
.logo-button img{display:block;width:100%;height:auto}
h1{margin:1.5% 0 1%;text-align:center;text-transform:uppercase;font-size:clamp(17px,1.75vw,32px);letter-spacing:.045em;color:var(--navy)}
.hero{width:74%;height:auto;max-height:35%;object-fit:contain;margin:0 auto 2%}
.main-menu{width:82%;display:grid;gap:8px;margin-top:auto;margin-bottom:4%}
.main-menu button{
  border:2px solid var(--navy);border-radius:12px;background:rgba(255,255,255,.92);color:var(--navy);
  padding:10px 14px;cursor:pointer;text-align:left;box-shadow:0 3px 0 rgba(6,27,55,.15);
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.main-menu button:hover{transform:translateY(-2px);background:#fff;border-color:var(--red)}
.main-menu strong{display:block;text-transform:uppercase;font-size:clamp(12px,1.05vw,19px);letter-spacing:.04em}
.main-menu span{display:block;font-size:clamp(9px,.78vw,14px);margin-top:2px;opacity:.78}

.back-content{
  padding:9% 10% 10%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
}
.content-panel{min-height:100%;display:flex;flex-direction:column}
.page-head{text-align:center;margin-bottom:14px}
.eyebrow{color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.13em;font-size:clamp(10px,.78vw,12px)}
.content-panel h2{margin:4px 0 7px;text-transform:uppercase;letter-spacing:.045em;color:var(--navy);font-size:clamp(21px,1.8vw,34px);line-height:1}
.lead{font-size:clamp(12px,.98vw,17px)!important;font-weight:700;color:#30435c;text-align:center;margin-bottom:16px!important}
.content-panel p{font-size:clamp(12px,.93vw,16px);line-height:1.48;margin:0 0 12px}
.section-title{margin:18px 0 8px;color:var(--navy);text-transform:uppercase;font-size:clamp(14px,1.05vw,18px);letter-spacing:.045em}

.info-card,.step,.town-row,.mini-panel,.form-card{
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.52);box-shadow:0 2px 0 rgba(16,44,80,.05)
}
.info-card,.mini-panel,.form-card{padding:12px 13px;margin-bottom:10px}
.notice{background:rgba(230,182,59,.16);border-color:rgba(201,46,43,.18)}

.steps{display:grid;gap:9px}
.step{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;padding:11px}
.step-num{width:38px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-weight:900;box-shadow:inset 0 0 0 3px var(--gold);font-size:13px}
.step h3,.town-row h3,.mini-panel h3,.form-card h3{margin:0 0 4px;text-transform:uppercase;color:var(--navy);font-size:clamp(13px,1vw,17px)}
.step p,.town-row p,.mini-panel p,.form-card p{margin:0;font-size:clamp(11px,.86vw,15px);line-height:1.42}

.town-list{display:grid;gap:9px}
.town-row{padding:11px 12px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.town-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:5px 8px;background:#edf0f3;color:var(--navy)}
.pill.rookie{background:#ffe7a3;color:#653d00}
.progress{height:7px;background:rgba(16,44,80,.12);border-radius:999px;overflow:hidden;margin-top:8px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:inherit}

.btn,.text-link{
  border:0;cursor:pointer;font-weight:900;text-transform:uppercase;letter-spacing:.045em
}
.btn{border-radius:9px;padding:10px 13px;background:var(--navy);color:#fff;white-space:nowrap}
.btn.red{background:var(--red)}
.btn.gold{background:var(--gold);color:#382700}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid rgba(16,44,80,.35)}
.btn:active{transform:translateY(1px)}
.text-link{background:none;color:var(--red);padding:4px 0;text-align:left}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.field{display:grid;gap:5px;margin-bottom:10px}
.field.full{grid-column:1/-1}
.field label{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--navy);letter-spacing:.03em}
.field input,.field select,.field textarea{
  width:100%;border:1px solid rgba(16,44,80,.3);background:rgba(255,255,255,.82);border-radius:8px;padding:9px 10px;color:var(--ink);outline:none
}
.field textarea{min-height:82px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(201,46,43,.12)}
.choice-row{display:flex;gap:7px;flex-wrap:wrap}
.choice-row label{font-size:11px;font-weight:700;text-transform:none;border:1px solid rgba(16,44,80,.25);padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.7)}
.form-note{font-size:10px!important;color:#646b73}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.auth-box{display:grid;gap:9px}
.login-box{padding:13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.5)}

.bullets{margin:4px 0 12px;padding-left:20px}
.bullets li{margin:5px 0;font-size:clamp(11px,.86vw,15px);line-height:1.4}
.rule-line{text-align:center;font-weight:900;color:var(--navy);letter-spacing:.045em;text-transform:uppercase;margin:15px 0 3px!important}
.rule-line span{color:var(--gold)}
.small-print{font-size:10px!important;color:#6f756f}

.mobile-back{display:none}

@media (prefers-reduced-motion:reduce){.site-card{transition:none}}

@media(max-width:760px){
  body{background-image:url('images/mobile-bg.jpg')}
  .site-shell{padding:10px;align-items:center;justify-content:center}
  .cards-layout{position:relative;width:min(94vw,calc(94dvh * 5 / 7));height:min(94dvh,calc(94vw * 7 / 5));max-width:none;display:block}
  .site-card{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:5/7;visibility:hidden}
  .site-card.is-current{visibility:visible}
  .front-content{padding:3% 8% 7%}
  .logo-button{width:40%}
  h1{font-size:clamp(18px,5.8vw,29px)}
  .hero{width:70%;max-height:34%}
  .main-menu{width:84%;gap:7px;margin-bottom:5%}
  .main-menu button{padding:9px 12px}
  .main-menu strong{font-size:clamp(13px,3.7vw,18px)}
  .main-menu span{font-size:clamp(9px,2.8vw,13px)}
  .back-content{padding:8.5% 8.5% 10.5%}
  .mobile-back{display:inline-block;margin-bottom:10px;border:0;background:none;color:var(--red);font-weight:900;text-transform:uppercase;cursor:pointer;padding:0}
  .content-panel h2{font-size:clamp(22px,6vw,32px)}
  .content-panel p{font-size:clamp(12px,3.55vw,16px)}
  .town-row{grid-template-columns:1fr}
  .town-row .btn{justify-self:start}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
}


.secondary-menu{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:-1%;margin-bottom:2%;font-size:clamp(8px,.65vw,11px);
}
.secondary-menu button{
  border:0;background:none;padding:2px;color:var(--navy);cursor:pointer;
  font-weight:900;text-transform:uppercase;letter-spacing:.035em;
}
.secondary-menu button:hover{color:var(--red)}
.secondary-menu span{color:var(--gold)}

.site-footer{
  position:fixed;z-index:20;left:0;right:0;bottom:0;
  min-height:34px;padding:7px clamp(12px,2.5vw,38px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  background:rgba(4,18,38,.88);backdrop-filter:blur(5px);
  color:rgba(255,255,255,.78);font-size:11px;
}
.footer-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.footer-links button,.footer-social a{
  border:0;background:none;color:inherit;padding:0;text-decoration:none;cursor:pointer;
  font-size:11px;
}
.footer-links button:hover,.footer-social a:hover{color:#fff}
.footer-social{display:flex;justify-content:flex-end;gap:12px}

.legal-page .lead{margin-bottom:10px!important}
.legal-block{
  padding:11px 12px;margin-bottom:9px;border-left:4px solid var(--gold);
  background:rgba(255,255,255,.46);border-radius:7px;
}
.legal-block h3{
  margin:0 0 5px;color:var(--navy);text-transform:uppercase;
  font-size:clamp(12px,.95vw,16px);
}
.legal-block p{margin:0 0 8px}
.legal-block p:last-child{margin-bottom:0}
.rules-list{display:grid;gap:9px}

.consent-card{border-color:rgba(201,46,43,.28);background:rgba(230,182,59,.12)}
.consent-check{
  display:grid!important;grid-template-columns:auto 1fr;align-items:start;gap:9px;
  text-transform:none!important;letter-spacing:0!important;font-weight:600!important;
  line-height:1.4;font-size:clamp(11px,.86vw,14px)!important;
}
.consent-check input{width:18px;height:18px;margin:1px 0 0}
.inline-link{
  border:0;background:none;padding:0;color:var(--red);font:inherit;font-weight:900;
  text-decoration:underline;cursor:pointer;
}

@media(max-width:760px){
  .site-shell{padding-bottom:54px}
  .secondary-menu{font-size:9px;margin-bottom:1%}
  .site-footer{
    min-height:44px;padding:6px 9px;grid-template-columns:1fr;
    gap:3px;text-align:center;font-size:9px;
  }
  .footer-left{display:none}
  .footer-links,.footer-social{justify-content:center;gap:9px}
  .footer-links button,.footer-social a{font-size:9px}
}


/* --- V4.1 background atmosphere --- */
body{position:relative}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

body::before{
  z-index:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,224,142,.12) 0, rgba(255,224,142,.055) 18%, transparent 43%),
    radial-gradient(circle at 18% 72%, rgba(255,255,255,.045) 0, transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(230,182,59,.045) 0, transparent 22%);
  animation:townieGlow 8s ease-in-out infinite alternate;
}

body::after{
  z-index:0;
  opacity:.34;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.78) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(230,182,59,.66) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.48) 0 .8px, transparent 1.4px);
  background-size:137px 139px, 193px 181px, 251px 227px;
  background-position:11px 19px, 61px 89px, 127px 37px;
  animation:townieSparkle 12s linear infinite;
}

.site-shell{position:relative;z-index:1}

@keyframes townieGlow{
  from{opacity:.68;transform:scale(1)}
  to{opacity:1;transform:scale(1.035)}
}
@keyframes townieSparkle{
  0%{transform:translate3d(0,0,0);opacity:.22}
  50%{opacity:.42}
  100%{transform:translate3d(0,-18px,0);opacity:.22}
}

@media(prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
}


/* --- V4.2 visible About option --- */
.main-menu{gap:6px;margin-bottom:2.5%}
.main-menu button{padding:8px 12px}
.about-menu-button{
  background:rgba(230,182,59,.16)!important;
  border-color:rgba(16,44,80,.65)!important;
}
.secondary-menu{
  margin-top:0!important;
  margin-bottom:1%!important;
}

/* --- V4.2 background lighting / sparkle atmosphere --- */
.background-atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.background-atmosphere .glow{
  position:absolute;
  border-radius:50%;
  filter:blur(34px);
  mix-blend-mode:screen;
  opacity:.46;
  animation:floatGlow 5.5s ease-in-out infinite alternate;
}
.glow-a{
  width:44vw;height:44vw;
  left:28vw;top:18vh;
  background:radial-gradient(circle,rgba(255,215,118,.34) 0,rgba(255,215,118,.10) 34%,transparent 70%);
}
.glow-b{
  width:28vw;height:28vw;
  left:-5vw;top:52vh;
  background:radial-gradient(circle,rgba(220,52,46,.16) 0,rgba(230,182,59,.08) 38%,transparent 72%);
  animation-delay:-3s!important;
}
.glow-c{
  width:30vw;height:30vw;
  right:-4vw;top:4vh;
  background:radial-gradient(circle,rgba(255,240,190,.16) 0,rgba(230,182,59,.08) 38%,transparent 72%);
  animation-delay:-6s!important;
}
.background-atmosphere .sparkles{
  position:absolute;
  inset:-10%;
  opacity:.58;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 1.2px,transparent 1.8px),
    radial-gradient(circle,rgba(244,196,75,.92) 0 1.25px,transparent 1.9px),
    radial-gradient(circle,rgba(255,255,255,.65) 0 .9px,transparent 1.5px);
  background-size:109px 113px,163px 171px,229px 211px;
  background-position:17px 29px,81px 43px,137px 101px;
  animation:sparkleDrift 8s linear infinite;
  mask-image:radial-gradient(ellipse at center,black 20%,rgba(0,0,0,.85) 55%,transparent 100%);
}
.site-shell{position:relative;z-index:2}
.site-footer{z-index:30}

@keyframes floatGlow{
  0%{transform:translate3d(-2vw,1vh,0) scale(.94);opacity:.34}
  100%{transform:translate3d(2vw,-2vh,0) scale(1.07);opacity:.58}
}
@keyframes sparkleDrift{
  0%{transform:translate3d(0,10px,0);opacity:.34}
  50%{opacity:.64}
  100%{transform:translate3d(18px,-22px,0);opacity:.34}
}

/* The previous body pseudo effects are no longer needed. */
body::before,body::after{display:none!important}

/* --- V4.2 mobile footer copyright --- */
@media(max-width:760px){
  .site-shell{padding-bottom:68px}
  .site-footer{
    min-height:58px;
    padding:5px 8px 6px;
    grid-template-columns:1fr;
    gap:3px;
  }
  .footer-left{
    display:block!important;
    order:3;
    font-size:8.5px;
    opacity:.82;
  }
  .footer-links{order:1}
  .footer-social{order:2}
  .main-menu{gap:5px;margin-bottom:1.5%}
  .main-menu button{padding:7px 10px}
  .secondary-menu{margin-bottom:0!important}
}

@media(prefers-reduced-motion:reduce){
  .background-atmosphere .glow,
  .background-atmosphere .sparkles{animation:none}
}

/* Townie Cards V2.3 — persistent submission confirmation */
.submission-success{
  text-align:center;
}
.submission-success .lead{
  margin-bottom:18px;
}
.success-mark{
  width:64px;
  height:64px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#102c50;
  color:#f2bd2d;
  font-size:34px;
  font-weight:900;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.reference-box{
  margin:18px 0;
  padding:16px;
  border:2px solid #102c50;
  border-radius:14px;
  background:#fffaf0;
}
.reference-box span{
  display:block;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  font-weight:800;
  color:#5f6570;
}
.reference-box strong{
  display:block;
  font-size:22px;
  letter-spacing:.04em;
  color:#102c50;
  overflow-wrap:anywhere;
}


/* Accounts V1 */
.signed-in-account{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  background:rgba(16,44,80,.08);
  border:1px solid rgba(16,44,80,.18);
  border-radius:10px;
}
.signed-in-account strong,
.signed-in-account span{display:block}
.signed-in-account span{font-size:12px;margin-top:3px;opacity:.75}
.account-summary{margin-bottom:16px}
.account-login-panel .actions{margin-top:10px}
.my-card-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:13px;
  margin-bottom:9px;
  border:1px solid rgba(16,44,80,.17);
  background:rgba(255,255,255,.43);
  border-radius:11px;
}
.my-card-row h3{margin:0 0 4px;color:#102c50}
.my-card-row p{margin:0;font-size:13px}
.my-card-ref{text-align:right}
.my-card-ref small{display:block;text-transform:uppercase;font-size:9px;letter-spacing:.06em}
.my-card-ref strong{font-size:11px;overflow-wrap:anywhere}
#cardFormDetails[hidden]{display:none!important}

@media(max-width:760px){
  .signed-in-account{align-items:flex-start;flex-direction:column}
  .my-card-row{grid-template-columns:1fr}
  .my-card-ref{text-align:left}
}


/* Accounts V1.1 / fair Rookie reservations */
.account-check-status{
  display:none;
  margin:10px 0 2px;
  padding:11px 12px;
  border-radius:9px;
  line-height:1.35;
}
.account-check-status.is-new{
  display:block;
  background:rgba(35,130,74,.10);
  border:1px solid rgba(35,130,74,.30);
  color:#174f2d;
}
.account-check-status strong,
.account-check-status span{display:block}
.account-check-status span{margin-top:3px;font-size:12px}

.rookie-reservation-success{
  margin:14px 0;
  padding:14px;
  border:2px solid #c99424;
  border-radius:13px;
  background:rgba(230,182,59,.16);
  color:#102c50;
  text-align:center;
}
.rookie-reservation-success strong,
.rookie-reservation-success span{display:block}
.rookie-reservation-success strong{font-size:18px;text-transform:uppercase}
.rookie-reservation-success span{margin-top:5px;font-size:13px}
.confirmation-home-action{justify-content:center;margin:14px 0}
.submission-success{padding-bottom:90px!important}
.email-verified,.email-unverified{display:block;margin-top:4px;font-size:10px;font-weight:800}
.email-verified{color:#176b35}
.email-unverified{color:#9a6a08}
/* V1.1.1 — live database town counts */
.live-town-row{
  padding:13px;
  margin-bottom:10px;
  border:1px solid rgba(16,44,80,.17);
  border-radius:11px;
  background:rgba(255,255,255,.43);
}
.town-row-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.town-row-main h3{margin:0 0 3px;color:#102c50}
.town-row-main p{margin:0;font-size:12px}
.town-progress{margin:10px 0}
.progress-track{
  height:8px;
  margin-bottom:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(16,44,80,.12);
}
.progress-track span{
  display:block;
  height:100%;
  background:#c99424;
}
.town-progress strong{font-size:12px}
/* V1.1.3 — mobile action/button cleanup */

/* The generic mobile-back rule intentionally styles the small top "Back to Home"
   text link. The confirmation button is a real CTA and needs its own stronger style. */
.confirmation-home-action .mobile-back{
  display:inline-block;
  margin:0;
  padding:11px 18px;
  border:0;
  border-radius:9px;
  background:var(--red);
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}
.confirmation-home-action .mobile-back:hover,
.confirmation-home-action .mobile-back:focus{
  color:#fff;
}

/* New-account email correction should look secondary, not like the next required step. */
.change-email-row{
  margin-top:10px;
}
.change-email-link{
  border:0;
  background:none;
  padding:2px 0;
  color:var(--red);
  font:inherit;
  font-size:12px;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}

.my-card-row.has-generated-card{grid-template-columns:1fr auto}.my-generated-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}.my-generated-cards span{display:block;margin-bottom:4px;font-size:10px;font-weight:900;text-transform:uppercase}.my-generated-cards img{display:block;width:100%;border-radius:9px;box-shadow:0 4px 12px rgba(0,0,0,.16)}.generator-pending-note{grid-column:1/-1;margin-top:8px!important;font-size:11px!important;opacity:.72}


/* Collection / binder V1 */
.collection-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:14px;
}
.collection-stats>div{
  padding:11px 8px;
  text-align:center;
  border:1px solid rgba(16,44,80,.14);
  border-radius:10px;
  background:rgba(255,255,255,.58);
}
.collection-stats strong{display:block;color:var(--navy);font-size:clamp(18px,1.7vw,27px);line-height:1}
.collection-stats span{display:block;margin-top:5px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.collection-subtitle{margin:14px 0 7px;color:var(--navy);font-size:12px;text-transform:uppercase;letter-spacing:.055em}
.collection-set-list{display:grid;gap:8px}
.collection-set{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 12px;
  align-items:center;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid rgba(16,44,80,.14);
  background:rgba(255,255,255,.55);
}
.collection-set h3{margin:0;color:var(--navy);font-size:14px;text-transform:uppercase}
.collection-set p{margin:2px 0 0;font-size:11px}
.collection-set .town-meta{grid-column:1/-1;margin-top:0}
.collection-set-count{text-align:center}
.collection-set-count strong{display:block;color:var(--navy);font-size:18px}
.collection-set-count span{font-size:9px;text-transform:uppercase;font-weight:900}
.binder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.binder-card{
  overflow:hidden;
  border:1px solid rgba(16,44,80,.16);
  border-radius:11px;
  background:rgba(255,255,255,.65);
}
.binder-card>img,.binder-placeholder{display:block;width:100%;aspect-ratio:1462/2048;object-fit:cover;background:#0b274a}
.binder-placeholder{display:grid;place-items:center;color:#fff;font-size:30px;font-weight:900}
.binder-card-info{padding:9px}
.binder-card-info>strong{display:block;color:var(--navy);font-size:12px}
.binder-card-info>span{display:block;margin-top:2px;font-size:10px}
.binder-card-info .town-meta{gap:4px}
.binder-card-info .pill{font-size:8px;padding:4px 6px}
.collection-empty{margin-bottom:0}
.collection-coming{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(16,44,80,.28);
}
.collection-coming strong,.collection-coming span{display:block}
.collection-coming>div>span{margin-top:2px;font-size:10px}
@media(max-width:560px){
  .collection-stats{grid-template-columns:repeat(3,1fr)}
  .binder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* My Sets / Set Detail V1 */
.collection-set-button{
  grid-column:1/-1;
  justify-self:start;
  padding:7px 11px;
  font-size:9px;
}
.set-progress-card{
  padding:13px;
  margin-bottom:12px;
  border:1px solid rgba(16,44,80,.16);
  border-radius:12px;
  background:rgba(255,255,255,.58);
}
.set-progress-main{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.set-progress-main strong{font-size:22px;color:var(--navy)}
.set-progress-main span{font-size:10px;font-weight:900;text-transform:uppercase}
.set-progress-track{
  height:9px;
  margin:10px 0 7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(16,44,80,.12);
}
.set-progress-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--red),var(--gold));
}
.set-progress-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  font-size:9px;
  font-weight:800;
}
.collection-set-toolbar{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.set-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.set-card-tile{
  appearance:none;
  border:1px solid rgba(16,44,80,.16);
  border-radius:10px;
  padding:0;
  overflow:hidden;
  background:rgba(255,255,255,.6);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.set-card-tile.is-missing{opacity:.58}
.set-card-tile:hover{transform:translateY(-2px);border-color:var(--red)}
.set-card-image{
  position:relative;
  width:100%;
  aspect-ratio:1462/2048;
  overflow:hidden;
  background:#0b274a;
}
.set-card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ownership-tag{
  position:absolute;
  left:5px;
  bottom:5px;
  padding:3px 5px;
  border-radius:999px;
  background:rgba(6,27,55,.92);
  color:#fff;
  font-size:7px;
  font-weight:900;
  letter-spacing:.05em;
}
.is-missing .ownership-tag{background:rgba(115,35,35,.9)}
.set-card-copy{padding:7px}
.set-card-copy strong{display:block;font-size:10px;color:var(--navy);line-height:1.15}
.set-card-copy span,.set-card-copy small{display:block;margin-top:3px;font-size:8px;line-height:1.2}
.card-detail-back{margin-bottom:8px}
.card-detail-art{
  width:min(72%,330px);
  margin:0 auto 13px;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.card-detail-art img,.card-detail-art .binder-placeholder{
  display:block;
  width:100%;
  aspect-ratio:1462/2048;
  object-fit:cover;
}
.card-detail-art.missing{opacity:.58}
.card-detail-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.card-detail-info>div{
  padding:9px;
  border:1px solid rgba(16,44,80,.14);
  border-radius:9px;
  background:rgba(255,255,255,.55);
}
.card-detail-info span,.card-detail-info strong{display:block}
.card-detail-info span{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.card-detail-info strong{margin-top:3px;font-size:11px;color:var(--navy)}
@media(max-width:760px){
  .set-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:460px){
  .set-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Collection pre-release cleanup */
.collection-status-note{
  align-items:flex-start;
}
.collection-status-note>div>span{
  max-width:42ch;
  line-height:1.35;
}


/* Automatic Bonus Tracking V1 */
.bonus-set-list{display:grid;gap:10px}
.bonus-user-card{padding:12px;border:1px solid rgba(16,44,80,.16);border-radius:12px;background:rgba(255,255,255,.55)}
.bonus-user-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.bonus-user-head strong,.bonus-user-head span,.bonus-total strong,.bonus-total span{display:block}
.bonus-user-head>div:first-child>strong{color:var(--navy);font-size:13px;text-transform:uppercase}
.bonus-user-head>div:first-child>span{margin-top:3px;font-size:9px}
.bonus-total{text-align:center}
.bonus-total strong{color:var(--red);font-size:22px;line-height:1}
.bonus-total span{margin-top:3px;font-size:8px;font-weight:900;text-transform:uppercase}
.bonus-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.bonus-mini-stats>div{padding:8px 5px;text-align:center;border-radius:8px;background:rgba(16,44,80,.065)}
.bonus-mini-stats strong,.bonus-mini-stats span{display:block}
.bonus-mini-stats strong{font-size:11px;color:var(--navy)}
.bonus-mini-stats span{margin-top:3px;font-size:7px;font-weight:900;text-transform:uppercase}
.bonus-explain{margin-top:10px;padding:9px;border-radius:8px;background:rgba(230,182,59,.10)}
.bonus-explain p{margin:0 0 5px!important;font-size:9px!important}
.bonus-explain p:last-child{margin-bottom:0!important}
.bonus-link-box{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:9px}
.bonus-link-box input{min-width:0;width:100%;padding:8px;border:1px solid rgba(16,44,80,.22);border-radius:8px;background:rgba(255,255,255,.75);font-size:8px;color:var(--ink)}
.bonus-link-box .btn{font-size:8px;padding:8px 9px}
.bonus-frozen-note{margin:10px 0 0}
@media(max-width:460px){.bonus-link-box{grid-template-columns:1fr}.bonus-link-box .btn{justify-self:start}}


/* Automatic Bonus Tracking V1.1 — share choices */
.bonus-share-choices{margin-top:10px;padding:11px;border:1px solid rgba(16,44,80,.17);border-radius:10px;background:rgba(230,182,59,.12)}
.bonus-share-choices>strong{display:block;color:var(--navy);font-size:12px;text-transform:uppercase}
.bonus-share-choices>p{margin:4px 0 9px!important;font-size:9px!important}
.bonus-share-buttons{display:flex;gap:6px;flex-wrap:wrap}
.bonus-share-buttons .btn{font-size:8px;padding:8px 9px}