/* Year-End Bingo — matches the Holiday on Your Terms page: sage, gold ribbon, warm paper, cocoa footer */
:root{
  --bg:#FBF6EC; --surface:#FFFDF8; --sunk:#F3EADA; --ink:#2B211B; --muted:#6A5848; --line:#E3D6BF;
  --sage-deep:#5E7A5B; --sage-soft:#E4ECDF; --sage:#9DB49A; --sage-ink:#1D2A1C;
  --gold:#8C6A22; --gold-fill:#C19A45; --gold-light:#E7CF95; --gold-soft:#F6ECD4; --rose:#A4483F;
  --cocoa:#33241D; --cream:#FFF8EC; --cream-dim:#E9DCC6;
  --ribbon:linear-gradient(90deg,#A9832F 0%,#E7CF95 22%,#C19A45 45%,#F0DCA8 62%,#A9832F 100%);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.eyebrow{font-family:var(--hand);font-weight:600;font-size:1.4rem;line-height:1.05;color:var(--gold)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top band */
.band{background:var(--sage);color:var(--sage-ink);border-bottom:10px solid #C19A45;border-image:var(--ribbon) 1;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;top:-60%;right:-25%;width:80%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,236,190,.55),rgba(255,236,190,0) 65%);pointer-events:none}
.band-in{position:relative;max-width:520px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{font-family:var(--display);font-size:15px;color:var(--sage-ink);text-decoration:none}
.brand b{font-weight:500}
.band .pill{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,248,236,.7);border-radius:999px;padding:4px 10px}

main{flex:1;width:100%;max-width:520px;margin:0 auto;padding:28px 16px 48px}
.stack{display:flex;flex-direction:column;gap:14px}
.title{font-size:clamp(30px,8vw,40px);font-weight:300}
.title em{font-style:italic}
.sub{color:var(--muted);margin:0}

/* Buttons */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;width:100%;border:0;border-radius:14px;padding:15px 18px;background:var(--sage-deep);color:var(--cream);font-weight:600;font-size:16px;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--sage-deep);border:1.5px solid var(--sage-deep)}
.btn.gold{--h:18px;background:var(--gold-fill);color:var(--sage-ink);border-radius:0;padding-left:38px;clip-path:polygon(var(--h) 0,100% 0,100% 100%,var(--h) 100%,0 calc(100% - var(--h)),0 var(--h));position:relative}
.btn.gold::before{content:"";position:absolute;left:15px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 2px var(--gold)}
.btn[disabled]{opacity:.6;cursor:wait}
.link{background:none;border:0;color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px;font-weight:600;padding:8px 0;align-self:center}

/* Card */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sq{position:relative;aspect-ratio:1/1;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:8px 6px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(12px,3.4vw,14.5px);line-height:1.28;font-weight:500;transition:background .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent}
.sq:active{transform:scale(.97)}
.sq[aria-pressed="true"]{background:var(--sage-soft);border-color:var(--sage-deep);font-weight:700}
.sq[aria-pressed="true"]::after{content:"";position:absolute;inset:6px;border:2px solid var(--gold-fill);border-radius:50%;opacity:.6;pointer-events:none}
.sq.free{background:var(--gold-soft);border-color:var(--gold);cursor:default}
.hint{font-size:13px;color:var(--muted);text-align:center;margin:0}
.banner{background:var(--gold-fill);color:var(--sage-ink);font-family:var(--display);font-weight:500;text-align:center;border-radius:12px;padding:10px;letter-spacing:.02em;animation:pop .35s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}

/* Gate */
.bullets{list-style:none;padding:0;margin:4px 0;display:flex;flex-direction:column;gap:10px}
.bullets li{display:flex;gap:10px;align-items:flex-start}
.bullets li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:9px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.field input{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);color:var(--ink);font-size:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:var(--rose);font-size:14px;margin:0}
.consent{font-size:12px;color:var(--muted);line-height:1.45;margin:0}
.consent a{color:inherit}

/* Result */
.confirm{background:var(--sage-soft);border-radius:14px;padding:12px 14px;font-size:14px}
.r-name{font-size:clamp(32px,9vw,40px);font-weight:300;color:var(--sage-deep)}
.r-tag{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.3;margin:0}
.r-block{border-top:1px solid var(--line);padding-top:14px}
.r-block h2,.tool h2{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.r-block p{margin:0}
.r-block p + p{margin-top:8px}
.tool{background:var(--gold-soft);border-radius:14px;padding:14px 16px}
.tool strong{font-family:var(--display);font-weight:500;font-size:18px;display:block;margin-bottom:4px}
.closing{font-style:italic;color:var(--sage-deep);margin:0}
.signoff{font-family:var(--hand);font-size:1.5rem;color:var(--gold);margin:-6px 0 0}
.small{font-size:14px;color:var(--muted);margin:0}
.second{background:var(--sunk);border-radius:16px;padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.second h2{font-size:22px}
.share{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:14px}
.share > h2{font-size:24px}
.share-box{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.share-box h3{font-family:var(--body);font-size:15px;font-weight:700}
.preview-img{border:1px solid var(--line);border-radius:10px;background:var(--sunk);width:100%;max-width:260px;align-self:center}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.row .btn{padding:12px 10px;font-size:15px}
.contest{border:1.5px dashed var(--gold);border-radius:12px;padding:10px 12px;font-size:14px;background:var(--gold-soft)}

/* Preview bar (team only, ?preview=1) */
.pbar{position:sticky;top:0;z-index:5;background:var(--cocoa);color:var(--cream);font-size:13px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.pbar a{color:var(--cocoa);background:var(--gold-light);border-radius:999px;padding:4px 10px;text-decoration:none;font-weight:600}
.pbar a[aria-current="true"]{background:var(--cream)}

/* Rules page */
.prose h2{font-size:22px;margin:24px 0 8px}
.prose p,.prose li{max-width:65ch}
.prose ol,.prose ul{padding-left:22px}
.todo{background:var(--gold-soft);border-left:4px solid var(--rose);padding:10px 12px;border-radius:0 10px 10px 0;font-size:14px}

/* Footer */
.ftr{text-align:center;font-size:.95rem;line-height:1.7;background:var(--cocoa);color:var(--cream-dim);border-top:10px solid #C19A45;border-image:var(--ribbon) 1;padding:28px 16px}
.ftr .g{color:var(--gold-light);font-weight:500}
.ftr a{color:inherit;text-decoration:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}