/* ================================================================
   CodeCoast — shared chrome + inner pages (loaded after site.css)
   ================================================================ */

[hidden]{display:none!important}

/* ---------- fixed site nav ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:70;padding:1.4rem 2.6rem;transition:transform .5s cubic-bezier(.2,1,.3,1),padding .4s}
.site-nav.scrolled{padding-top:.8rem;padding-bottom:.8rem}
.site-nav.hidden{transform:translateY(-130%)}
.site-nav .logo{background:rgba(250,231,189,0.9);backdrop-filter:blur(10px);border-radius:14px;padding:.35rem .6rem .35rem .35rem}
.nav-pill a.active{color:var(--ink);background:#E2CE9E}
.cart-btn{position:relative;color:var(--ink)}
.cart-count{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:99px;background:var(--blue);color:#FAE7BD;font-size:.65rem;display:grid;place-items:center;padding:0 5px;transform:scale(0)}
.cart-count.on{transform:scale(1)}
.menu-open .menu-btn{background:var(--ink)}
.menu-open .menu-btn span{background:#FAE7BD}
main{display:block;overflow-x:clip}
.sp-logo{flex-wrap:wrap;justify-content:center;text-align:center}
@media (max-width:640px){.sp-logo-xl{font-size:2rem}.sp-row{gap:2rem}}
.hero-content{padding-top:7rem}
.hero-pixels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* ---------- full-screen menu ---------- */
.menu-overlay{position:fixed;inset:0;z-index:65;background:var(--lime);visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:7rem clamp(1.25rem,4vw,3rem) 2rem;overflow:auto}
.menu-links{display:flex;flex-direction:column}
.menu-links a{display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(23,2,8,.12);padding:.2rem 0;overflow:hidden}
.menu-links small{font-size:.75rem;opacity:.5;width:2rem}
.menu-open .nav-pill{visibility:hidden}
.menu-links span{font-size:clamp(2rem,min(6.5vw,7.4vh),5rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;transition:transform .4s cubic-bezier(.2,1,.3,1),color .3s;display:inline-block}
.menu-links a:hover span{transform:translateX(1.2rem);color:var(--blue)}
.menu-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.menu-foot div{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;font-weight:600;font-size:.85rem}
.menu-foot .eyebrow{color:rgba(23,2,8,.5)}
.menu-open{overflow:hidden}

/* ---------- page curtain ---------- */
.curtain{position:fixed;inset:0;z-index:200;pointer-events:none;visibility:visible}
.curtain-cols{position:absolute;inset:0;display:flex}
.curtain-cols i{flex:1;background:var(--blue);margin-right:-1px}
.curtain-cols i:nth-child(even){background:#5A0015}
.curtain-logo{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;color:var(--lime);font-size:1.4rem}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--blue);z-index:300;pointer-events:none;display:none;place-items:center;transition:width .3s,height .3s,margin .3s,background .3s,opacity .3s;mix-blend-mode:normal}
.has-cursor .cursor{display:grid}
.cursor.hover{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(197,160,89,.55);backdrop-filter:blur(2px)}
.cursor.label{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--lime)}
.cursor.text{width:3px;height:26px;margin:-13px 0 0 -1px;border-radius:2px}
.cursor.gone{opacity:0}
.cursor span{font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--ink)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:2rem;z-index:250;transform:translate(-50%,calc(100% + 3rem));visibility:hidden;background:var(--ink);color:#FAE7BD;padding:.9rem 1.4rem;border-radius:99px;font-weight:500;font-size:.9rem;box-shadow:0 20px 50px rgba(23,2,8,.25);transition:transform .5s cubic-bezier(.2,1.3,.4,1);max-width:calc(100% - 2rem);text-align:center}
.toast.show{transform:translate(-50%,0);visibility:visible}
.toast.err{background:#8B0000}
.toast.ok::before{content:'✓ ';color:var(--lime)}

/* ---------- popup art ---------- */
.popup-art{position:relative;height:110px;display:flex;align-items:center;justify-content:center}
.popup-tee{height:100px;transform:rotate(-4deg)}
.popup-stk{position:absolute;left:12px;bottom:6px;height:60px;transform:rotate(-12deg)}
.popup-voucher{position:absolute;right:14px;top:22px;background:var(--lime);border-radius:12px;padding:.4rem .7rem;font-weight:700;font-size:.9rem;line-height:1;transform:rotate(8deg);box-shadow:0 6px 16px rgba(23,2,8,.1)}
.popup-voucher small{font-size:.55rem;letter-spacing:.1em}
.page-admin .popup,.page-admin .footer,.page-admin .to-top,.page-admin .menu-btn,.page-admin .nav-pill,.page-admin .cart-btn{display:none!important}

/* ---------- confetti & spinner ---------- */
.confetti{position:fixed;width:9px;height:14px;z-index:260;pointer-events:none;border-radius:2px}
.spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-2px}
.fly-ghost{position:fixed;z-index:240;pointer-events:none;object-fit:contain}

/* ---------- headline letter split ---------- */
.split-chars .ch{display:inline-block;will-change:transform}

/* ---------- generic page head ---------- */
.page-head{padding-top:9rem;padding-bottom:2rem}
.page-title{font-size:clamp(3rem,8vw,7rem);font-weight:700;letter-spacing:-.04em;line-height:.95}
.page-title em{letter-spacing:0;font-size:1.02em}
.small-title{font-size:clamp(2.4rem,5vw,4rem);margin:0 0 2rem}
.lead{max-width:640px;font-size:1.1rem;margin-top:1.2rem}
.strip{overflow:hidden;padding:.8rem 0;font-weight:600;font-size:.85rem;letter-spacing:.08em;margin-bottom:3rem}
.strip .marquee-track{gap:2.5rem}
.strip i{font-style:normal}
.strip-lime{background:var(--lime);color:var(--ink)}
.strip-blue{background:var(--blue);color:#FAE7BD}
.center-title{text-align:center;font-size:clamp(2rem,4vw,3.2rem);font-weight:700;margin:5rem 0 2rem}
.center-text{text-align:center}
.lime-ink{color:var(--lime);-webkit-text-stroke:1.5px #9fcc22}
.back-link{display:inline-flex;gap:.4rem;font-size:.85rem;font-weight:500;color:#666;margin-bottom:1.5rem;transition:color .3s,transform .3s}
.back-link:hover{color:var(--blue);transform:translateX(-4px)}
.link-btn{font-size:.8rem;font-weight:600;color:var(--blue)}
.link-btn.danger{color:#8B0000}
.chip-outline{border:1px solid var(--line);color:#777}
.chip-soft{background:#E2CE9E;color:#555;font-size:.6rem}
.chip-row.left{justify-content:flex-start;margin-top:.6rem}
.good{color:#80011F}
.bad{color:#8B0000}
.btn-wide{flex:1;justify-content:space-between}
.btn[disabled]{opacity:.6;pointer-events:none}
.float{animation:bob 3.2s ease-in-out infinite}

/* ---------- forms ---------- */
.card-form{background:#FAE7BD;border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 20px 60px rgba(23,2,8,.05);border:1px solid var(--line)}
.card-form h3{font-size:1.5rem;margin-bottom:1.2rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;margin-bottom:1.6rem}
.span2{grid-column:span 2}
.field{display:flex;flex-direction:column;gap:.45rem;position:relative}
.field>span{font-size:.65rem;font-weight:600;letter-spacing:.14em;color:#6E4A4E}
.field input,.field textarea,.field select{font:inherit;font-weight:500;font-size:1rem;padding:.85rem 1rem;border-radius:.9rem;border:1.5px solid #D4C5A0;background:#EDE0B8;color:var(--ink);transition:border-color .25s,background .25s,box-shadow .25s;width:100%;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--blue);background:#FAE7BD;box-shadow:0 0 0 4px rgba(128,1,31,.12)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#8B0000}
.field.line input,.field.line textarea{border:0;border-bottom:1.5px solid #D4C5A0;border-radius:0;background:transparent;padding:.7rem 0;font-size:1.15rem}
.field.line input:focus,.field.line textarea:focus{box-shadow:none;border-color:var(--blue)}
.field small{font-size:.75rem;font-weight:600}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;font-weight:500;line-height:1.4}
.check input{width:18px;height:18px;accent-color:var(--blue);margin-top:2px}
.check a{color:var(--blue);text-decoration:underline}

/* ---------- apply ---------- */
.apply-wrap{max-width:860px;padding-bottom:6rem}
.steps{position:relative;display:flex;justify-content:space-between;margin-bottom:2rem;padding-bottom:1.2rem}
.step{display:flex;align-items:center;gap:.6rem;font-weight:600;color:#aaa;transition:color .4s}
.step b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#E8D8A0;transition:background .4s,color .4s}
.step.on{color:var(--ink)}
.step.on b{background:var(--blue);color:#FAE7BD}
.steps-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#E8D8A0;border-radius:9px;overflow:hidden}
.steps-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--lime))}
.pane{border:0;display:none}
.pane.on{display:block}
.track-pick{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.6rem}
.tp input{position:absolute;opacity:0}
.tp span{display:flex;flex-direction:column;gap:.3rem;padding:1.4rem;border-radius:1.4rem;cursor:pointer;color:#FAE7BD;border:3px solid transparent;transition:transform .3s,border-color .3s,box-shadow .3s;height:100%}
.tp-blue span{background:var(--blue)}
.tp-black span{background:#170208}
.tp small{font-size:.6rem;letter-spacing:.14em;opacity:.7;font-weight:600}
.tp b{font-size:1.4rem}
.tp em{font-style:normal;font-size:.8rem;opacity:.75}
.tp input:checked+span{border-color:var(--lime);box-shadow:0 14px 40px rgba(128,1,31,.25);transform:translateY(-4px)}
.tp input:focus-visible+span{outline:3px solid var(--ink)}
.member{position:relative;padding:1rem;border:1px dashed #D4C5A0;border-radius:1rem;margin-bottom:1rem}
.m-del{position:absolute;top:.4rem;right:.6rem;font-size:1.3rem;color:#aaa}
.m-del:hover{color:#8B0000}
.form-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem}
.form-nav #nextBtn{margin-left:auto}
.ref-ok{font-size:.75rem}
.ticket{display:grid;grid-template-columns:1fr 220px;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(128,1,31,.2)}
.ticket-l{background:#FAE7BD;padding:2.4rem;border-right:3px dashed #E2CE9E}
.ticket-l h2{font-size:clamp(2rem,4vw,3rem);margin:1rem 0 .3rem}
.ticket-l p{margin-bottom:.6rem}
.ticket-r{background:var(--blue);color:#FAE7BD;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:2rem;text-align:center}
.ticket-r b{font-size:1.25rem;color:var(--lime);white-space:nowrap}
.ticket-r small{font-size:.65rem;letter-spacing:.14em;opacity:.7}

/* ---------- merch ---------- */
.merch-hero{position:relative;background:var(--blue);color:#FAE7BD;border-radius:var(--radius);padding:clamp(1.6rem,4vw,3.4rem);display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:2rem;overflow:hidden;margin-bottom:3rem}
.merch-hero h2{font-size:clamp(2.4rem,5.5vw,4.6rem);font-weight:700;line-height:1}
.merch-hero p{opacity:.8;margin:1rem 0 2rem;max-width:420px}
.merch-offers{display:flex;gap:1rem;flex-wrap:wrap}
.offer{border-radius:1.2rem;padding:1rem 1.4rem;display:flex;flex-direction:column;gap:.15rem;min-width:180px}
.offer small{font-size:.6rem;letter-spacing:.14em;font-weight:600;opacity:.75}
.offer b{font-size:1.3rem;line-height:1.1}
.offer .big{font-size:2.2rem}
.offer-lime{background:var(--lime);color:var(--ink)}
.offer-glass{background:rgba(250,231,189,.12);border:1px solid rgba(250,231,189,.2)}
.merch-hero-img{width:100%;max-width:340px;justify-self:center;filter:drop-shadow(0 30px 40px rgba(23,2,8,.3))}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding-bottom:6rem}
.skeleton{height:440px;border-radius:var(--radius);background:linear-gradient(100deg,#E8D8A0 30%,#FAE7BD 50%,#E8D8A0 70%) 0/300% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-300% 0}}
.product-card{position:relative;background:#FAE7BD;border-radius:var(--radius);padding:1.2rem 1.2rem 1.4rem;box-shadow:0 10px 40px rgba(23,2,8,.04);display:flex;flex-direction:column;text-align:center;transition:box-shadow .4s}
.product-card:hover{box-shadow:0 30px 60px rgba(128,1,31,.15)}
.p-badge{position:absolute;top:1rem;right:1rem;z-index:2}
.product-img{background:#F3E5C8;border-radius:1.4rem;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;margin-bottom:1rem}
.product-img img{width:80%}
.p-cat{font-size:.65rem;letter-spacing:.14em;color:var(--blue);font-weight:600}
.product-card h3{font-size:1.25rem;margin:.3rem 0 .8rem}
.p-price{display:flex;align-items:center;gap:.6rem}
.p-price b{font-size:1.3rem}
.p-price s{color:#aaa;font-size:.85rem}
.p-go{margin-left:auto;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#FAE7BD;display:grid;place-items:center;transition:transform .4s,background .3s}
.product-card:hover .p-go{transform:rotate(45deg);background:var(--blue)}

.product-page{padding-top:8rem;padding-bottom:6rem}
.product-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}
.pg-main{background:#FAE7BD;border-radius:var(--radius);aspect-ratio:1;display:grid;place-items:center;box-shadow:0 10px 40px rgba(23,2,8,.04)}
.pg-main img{width:78%;transition:transform .4s}
.pg-thumbs{display:flex;gap:.8rem;margin:1rem 0}
.pg-thumbs button{width:80px;height:80px;border-radius:1rem;background:#FAE7BD;border:2px solid transparent;padding:.4rem;transition:border-color .3s}
.pg-thumbs button.on{border-color:var(--blue)}
.product-info h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1;margin:.8rem 0}
.p-price.big b{font-size:2rem;color:var(--blue)}
.save{background:#F3E5C8;color:#80011F;font-size:.7rem;font-weight:700;padding:.3rem .6rem;border-radius:99px}
.product-info .muted{margin:1rem 0 1.6rem}
.opt-label{display:block;font-size:.65rem;letter-spacing:.14em;font-weight:600;color:#6E4A4E;margin-bottom:.6rem}
.opt-row{display:flex;justify-content:space-between;align-items:center;margin-top:1.4rem}
.seg{display:inline-flex;background:#E8D8A0;border-radius:99px;padding:.3rem}
.seg button{padding:.6rem 1.4rem;border-radius:99px;font-weight:600;font-size:.85rem;transition:background .3s,color .3s}
.seg button.on{background:var(--ink);color:#FAE7BD}
.sizes{display:flex;flex-wrap:wrap;gap:.5rem}
.sizes button{min-width:52px;height:46px;border-radius:.8rem;border:1.5px solid #D4C5A0;background:#FAE7BD;font-weight:600;transition:all .25s}
.sizes button:hover{border-color:var(--ink)}
.sizes button.on{background:var(--blue);border-color:var(--blue);color:#FAE7BD;transform:translateY(-3px)}
.qty-row{display:flex;gap:1rem;margin:2rem 0 1.4rem;align-items:stretch}
.qty{display:inline-flex;align-items:center;gap:.4rem;background:#FAE7BD;border:1.5px solid #D4C5A0;border-radius:99px;padding:.3rem}
.qty button{width:36px;height:36px;border-radius:50%;font-size:1.1rem;transition:background .2s}
.qty button:hover{background:#E2CE9E}
.qty span{min-width:22px;text-align:center;font-weight:600}
.qty.small button{width:28px;height:28px;font-size:.9rem}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.perks div{background:#FAE7BD;border-radius:1rem;padding:1rem;display:flex;flex-direction:column;gap:.2rem}
.perks small{color:#888;font-size:.75rem}
.size-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}
.size-table th,.size-table td{padding:.6rem;border-bottom:1px solid var(--line);text-align:center}
.size-table th{font-size:.7rem;letter-spacing:.08em;color:#888}

/* ---------- checkout ---------- */
.checkout{padding-top:8rem;padding-bottom:6rem}
.checkout-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:start}
.cart-list{display:flex;flex-direction:column;gap:1rem}
.cart-item{display:flex;gap:1.2rem;align-items:center;background:#FAE7BD;border-radius:1.6rem;padding:1rem;box-shadow:0 10px 30px rgba(23,2,8,.03);overflow:hidden}
.cart-item img{width:96px;height:96px;border-radius:1rem;background:#F3E5C8;object-fit:contain;padding:.4rem}
.ci-info{flex:1;display:flex;flex-direction:column;gap:.4rem}
.ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.ci-right b{color:var(--blue);font-size:1.1rem}
.cart-actions{display:flex;justify-content:space-between;align-items:center;margin:1.4rem 0 2rem}
.cart-actions .back-link{margin:0}
.summary{position:sticky;top:7rem;background:#FAE7BD;border-radius:var(--radius);padding:2rem;box-shadow:0 20px 60px rgba(23,2,8,.06)}
.summary h3{text-align:center;font-size:1.4rem;margin-bottom:1.4rem}
.sum-row{display:flex;justify-content:space-between;padding:.6rem 0;font-size:.9rem;color:#666}
.sum-row.total{border-top:1px solid var(--line);margin-top:.6rem;padding-top:1rem;color:var(--ink);font-size:1.3rem}
.sum-row.total b{color:var(--blue)}
.hint{font-size:.8rem;color:var(--blue);font-weight:600;min-height:1.2em;margin:.6rem 0 1rem;text-align:center}
.summary .btn{width:100%}
.empty-cart{background:#FAE7BD;border-radius:var(--radius);padding:3rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.empty-ic{font-size:3rem;animation:bob 2.4s ease-in-out infinite}
.done-tick{width:80px;height:80px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-size:2.2rem;margin:0 auto 1rem;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(0)}}
.order-ref{font-size:2rem;color:var(--blue);margin:.4rem 0 1rem}
.modal-white{background:#FAE7BD!important;color:var(--ink)!important}
.modal-white h3{color:var(--ink)!important}
.modal-white .popup-close{color:#888!important}
.modal-card.wide{max-width:640px;width:100%}
.modal-card{max-height:calc(100vh - 2rem);overflow:auto}
.modal-list{margin:1rem 0 1.6rem 1.1rem;line-height:1.8;opacity:.9}
.travel-list{list-style:none;margin:1.4rem 0;display:grid;gap:1rem}
.travel-list li{display:flex;flex-direction:column;gap:.2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.travel-list span{color:#666;font-size:.9rem}

/* ---------- refer ---------- */
.amb-hero{position:relative;background:var(--blue);color:#FAE7BD;border-radius:var(--radius);padding:clamp(2rem,5vw,4rem);text-align:center;overflow:hidden}
.amb-hero h2{position:relative;font-size:clamp(2.4rem,6vw,5rem);line-height:1}
.amb-hero p{position:relative;max-width:560px;margin:1.2rem auto 0;opacity:.8}
.amb-pixels{position:absolute;right:0;top:0;width:45%;height:100%;background-image:linear-gradient(rgba(250,231,189,.08) 18px,transparent 18px),linear-gradient(90deg,rgba(250,231,189,.08) 18px,transparent 18px);background-size:40px 40px;mask-image:linear-gradient(90deg,transparent,#000)}
.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.reward{border-radius:var(--radius);padding:2rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.reward-blue{background:var(--blue);color:#FAE7BD}
.reward-white{background:#FAE7BD}
.reward-art{position:relative;height:200px;display:flex;align-items:center;justify-content:center;margin:1rem 0}
.reward-art img{height:190px}
.reward-art .stk{position:absolute;height:110px;left:-10px;bottom:0;transform:rotate(-10deg)}
.voucher{position:absolute;right:-20px;top:20px;background:var(--lime);color:var(--ink);font-weight:700;padding:.5rem .9rem;border-radius:1rem;transform:rotate(10deg)}
.reward h3{font-size:1.8rem;margin-bottom:1rem}
.reward ol{list-style:none;width:100%;display:grid;gap:.6rem}
.reward li{display:flex;gap:.8rem;align-items:center;background:rgba(250,231,189,.12);padding:.8rem 1rem;border-radius:1rem;text-align:left;font-weight:600}
.reward-white li{background:#F3E5C8}
.reward li b{width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:.8rem}
.refer-split{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;margin:5rem 0 6rem;align-items:start}
.side-title{font-size:1.2rem;margin-bottom:1rem}
.rule-cards{display:grid;gap:.8rem}
.rule-card{background:#FAE7BD;border-radius:1.2rem;padding:1.1rem 1.2rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem}
.rule-card span{grid-row:span 2;width:40px;height:40px;border-radius:.8rem;background:#F3E5C8;display:grid;place-items:center}
.rule-card p{font-size:.82rem;color:#777}
.leaderboard{margin-top:2.5rem}
.leaderboard ol{list-style:none;background:#170208;color:#FAE7BD;border-radius:1.4rem;padding:.6rem}
.leaderboard li{display:flex;align-items:center;gap:1rem;padding:.8rem;border-bottom:1px solid rgba(250,231,189,.08)}
.leaderboard li:last-child{border:0}
.lb-rank{width:30px;height:30px;border-radius:50%;background:rgba(250,231,189,.1);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.leaderboard li:nth-child(1) .lb-rank{background:var(--lime);color:var(--ink)}
.leaderboard li:nth-child(2) .lb-rank{background:var(--blue)}
.lb-name{flex:1;display:flex;flex-direction:column}
.lb-name small{opacity:.5;font-size:.72rem}
.leaderboard b{color:var(--lime)}
.form-title{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:700}
.refer-split .card-form{margin-top:1.4rem}
.code-card{margin-top:1.4rem;background:var(--ink);color:#FAE7BD;border-radius:var(--radius);padding:2.2rem;text-align:center}
.code-card small{font-size:.65rem;letter-spacing:.14em;opacity:.6}
.code-card b{display:block;font-size:clamp(2rem,5vw,3.2rem);color:var(--lime);margin:.6rem 0;min-height:1.2em}
.code-card p{opacity:.7;font-size:.9rem}
.share-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

/* ---------- contact page ---------- */
.contact-page{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;padding-top:10rem;padding-bottom:6rem;align-items:start}
.cp-title{font-size:clamp(3.2rem,7vw,6rem);font-weight:700;line-height:.95;margin:1rem 0 1.4rem;color:#999}
.cp-title em{font-size:1.1em}
.cp-direct{display:grid;gap:.8rem;margin-top:2.4rem}
.cp-direct a{background:#FAE7BD;border-radius:1.2rem;padding:1rem 1.3rem;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.cp-direct a:hover{transform:translateX(6px);box-shadow:0 10px 30px rgba(23,2,8,.06)}
.cp-direct small{font-size:.62rem;letter-spacing:.14em;color:#999;font-weight:600}
.sent-card{background:#FAE7BD;border-radius:var(--radius);padding:3rem;text-align:center}
.sent-card h3{font-size:2rem;margin-bottom:.4rem}
.sent-card .btn{margin-top:1.4rem}

/* ---------- sponsorship ---------- */
.sp-hero{background:var(--blue);color:#FAE7BD;border-radius:var(--radius);padding:clamp(2rem,5vw,4.5rem);text-align:center;margin-bottom:5rem}
.sp-hero h2{font-size:clamp(2.6rem,6.5vw,5.6rem);line-height:1;margin:1.2rem 0}
.sp-hero p{max-width:600px;margin:0 auto 2rem;opacity:.8}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:4rem}
.why{background:#FAE7BD;border-radius:var(--radius);padding:2rem;text-align:center}
.why span{width:48px;height:48px;border-radius:1rem;background:#F3E5C8;display:grid;place-items:center;margin:0 auto 1.2rem;font-size:1.2rem}
.why h4{font-size:1.4rem;margin-bottom:.6rem}
.why p{color:#777;font-size:.9rem;line-height:1.6}
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:5rem}
.tier{border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column;gap:.6rem;min-height:340px}
.tier small{font-size:.7rem;letter-spacing:.14em;font-weight:700;opacity:.7}
.tier b{font-size:1.9rem}
.tier ul{list-style:none;display:grid;gap:.5rem;font-size:.88rem;margin:.6rem 0 auto}
.tier li::before{content:'✓ ';opacity:.6}
.tier .btn{align-self:flex-start;padding:.6rem 1.2rem}
.tier-black{background:#170208;color:#FAE7BD}
.tier-blue{background:var(--blue);color:#FAE7BD}
.tier-lime{background:var(--lime)}
.tier-white{background:#FAE7BD}
.table-wrap{overflow-x:auto;background:#FAE7BD;border-radius:var(--radius);margin-bottom:4rem}
.compare{width:100%;border-collapse:collapse;min-width:640px}
.compare th,.compare td{padding:1rem 1.2rem;text-align:center;border-bottom:1px solid var(--line);font-size:.9rem}
.compare th:first-child,.compare td:first-child{text-align:left;font-weight:600}
.compare th{font-size:.75rem;letter-spacing:.08em}
.compare th small{display:block;color:var(--blue);font-weight:500}
.compare tbody tr:hover{background:#F5E0E2}
.inkind{background:#170208;color:#FAE7BD;border-radius:var(--radius);padding:2.4rem;margin-bottom:5rem}
.inkind h3{font-size:2rem;margin:1rem 0 .6rem}
.inkind p{opacity:.7;max-width:640px}
.inkind ul{margin:1.2rem 0 0 1.2rem;line-height:1.9;opacity:.85}
.ready{text-align:center;padding-bottom:6rem}
.ready h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:2rem}

/* ---------- gallery page ---------- */
.dome-wrap{position:relative;height:min(90vh,820px);perspective:1400px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none}
.dome-wrap.grabbing{cursor:grabbing}
.dome-stage{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.dome{position:relative;width:0;height:0;transform-style:preserve-3d}
.dome-item{position:absolute;left:0;top:0;translate:-50% -50%;border-radius:22%;background-size:cover;background-position:center;backface-visibility:hidden;box-shadow:0 6px 20px rgba(23,2,8,.15);transition:filter .3s;cursor:pointer}
.dome-item:hover{filter:brightness(1.15) saturate(1.2);outline:3px solid var(--lime)}
.dome-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,var(--bg) 80%)}
.dome-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);font-size:.72rem;letter-spacing:.12em;color:#888;font-weight:600;text-transform:uppercase}
.filters{display:flex;gap:.4rem;background:#FAE7BD;padding:.3rem;border-radius:99px}
.filters button{padding:.5rem 1.1rem;border-radius:99px;font-weight:600;font-size:.82rem;transition:background .3s,color .3s}
.filters button.on{background:var(--ink);color:#FAE7BD}
.masonry{columns:4 220px;column-gap:1rem;padding-bottom:6rem}
.m-item{position:relative;display:block;width:100%;margin-bottom:1rem;border-radius:1.4rem;overflow:hidden;break-inside:avoid}
.m-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .6s}
.m-item:hover img{filter:none;transform:scale(1.06)}
.m-item span{position:absolute;left:.8rem;bottom:.8rem;background:rgba(23,2,8,.6);color:#FAE7BD;font-size:.6rem;letter-spacing:.12em;padding:.3rem .6rem;border-radius:99px;font-weight:600}
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(23,2,8,.92);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:2rem;opacity:0;pointer-events:none;transition:opacity .35s}
.lightbox.show{opacity:1;pointer-events:auto}
.lightbox figure{display:flex;flex-direction:column;align-items:center;gap:1rem;max-height:100%}
.lightbox img{max-width:100%;max-height:78vh;border-radius:1.4rem;object-fit:contain}
.lightbox figcaption{color:#FAE7BD;opacity:.7;font-size:.85rem}
.lb-close{position:absolute;top:1.2rem;right:1.6rem;color:#FAE7BD;font-size:2.4rem}
.lb-nav{width:54px;height:54px;border-radius:50%;background:rgba(250,231,189,.1);color:#FAE7BD;font-size:2rem;transition:background .3s}
.lb-nav:hover{background:var(--lime);color:var(--ink)}

/* ---------- about & policy ---------- */
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:4rem}
.ap-card{border-radius:var(--radius);padding:2rem;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}
.ap-card p{font-weight:500;line-height:1.5}
.p-dark{background:#170208;color:#FAE7BD}
.prose{max-width:760px;padding-bottom:6rem}
.prose h2{font-size:1.6rem;margin:2.4rem 0 .8rem}
.prose p,.prose li{color:#555;line-height:1.75;font-weight:500}
.prose ul{margin-left:1.2rem}
.prose a{color:var(--blue);text-decoration:underline}
.policy h2::before{content:'';display:inline-block;width:10px;height:10px;background:var(--lime);margin-right:.7rem;vertical-align:middle}

/* ---------- 404 ---------- */
.nf{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:6rem;gap:1rem}
.nf-code{font-size:clamp(6rem,22vw,16rem);color:var(--blue);line-height:1;animation:glitch 2.4s steps(1) infinite}
.nf-msg{font-size:clamp(1.3rem,3vw,2rem);font-weight:600;margin-bottom:1.5rem}
@keyframes glitch{0%,90%,100%{transform:none;text-shadow:none}92%{transform:translate(-4px,2px);text-shadow:4px 0 var(--lime)}95%{transform:translate(3px,-2px);text-shadow:-4px 0 var(--ink)}}

/* ---------- admin ---------- */
.admin{padding-top:7rem;padding-bottom:4rem}
.admin-login{max-width:420px;margin:4rem auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.admin-login form{width:100%;text-align:left;display:grid;gap:1rem}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.admin-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin-bottom:1.5rem}
.stat-card{background:#FAE7BD;border-radius:1.2rem;padding:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.stat-card small{font-size:.65rem;letter-spacing:.1em;color:#888;font-weight:600;text-transform:uppercase}
.stat-card b{font-size:1.6rem;color:var(--blue)}
.admin-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.admin-tabs button{padding:.6rem 1.2rem;border-radius:99px;background:#FAE7BD;font-weight:600;font-size:.85rem}
.admin-tabs button.on{background:var(--ink);color:#FAE7BD}
.admin-bar{display:flex;gap:.8rem;margin-bottom:1rem}
.admin-bar input{flex:1;padding:.7rem 1rem;border-radius:99px;border:1.5px solid #D4C5A0;font:inherit}
.admin-table-wrap{overflow:auto;background:#FAE7BD;border-radius:1.4rem;max-height:70vh}
.admin-table{width:100%;border-collapse:collapse;font-size:.82rem}
.admin-table th{position:sticky;top:0;background:#FAE7BD;text-align:left;padding:.8rem;font-size:.68rem;letter-spacing:.08em;color:#777;white-space:nowrap}
.admin-table td{padding:.75rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;max-width:280px}
.admin-table .c-message,.admin-table .c-idea{white-space:pre-wrap;min-width:220px}
.admin-table a{color:var(--blue)}
.st{font:inherit;font-size:.78rem;font-weight:600;padding:.3rem .5rem;border-radius:99px;border:0;background:#E8D8A0}
.st-shortlisted,.st-paid,.st-collected,.st-replied{background:#F3E5C8;color:#80011F}
.st-rejected,.st-cancelled{background:#F5E0E2;color:#8B0000}
.st-ready{background:#E8D8A0;color:var(--blue)}

/* ---------- folder paper peek (tracks) ---------- */
.folder-paper{position:absolute;top:22px;left:12%;right:8%;height:60px;background:#FAE7BD;border-radius:.6rem;transform:translateY(20px) rotate(-2deg);transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.folder:hover .folder-paper,.folder.active .folder-paper{transform:translateY(-14px) rotate(-3deg)}
.folder-body{z-index:1}

/* tilt glare */
.tilt{position:relative}
.tilt::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(250,231,189,.25),transparent 45%);opacity:0;transition:opacity .4s}
.tilt:hover::after{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .site-nav{padding:1rem 1.25rem}
  .product-grid{grid-template-columns:1fr 1fr}
  .product-layout,.checkout-layout,.refer-split,.contact-page{grid-template-columns:1fr}
  .summary{position:static}
  .why-grid{grid-template-columns:1fr 1fr}
  .tier-grid{grid-template-columns:1fr 1fr}
  .admin-stats{grid-template-columns:repeat(3,1fr)}
  .contact-page{padding-top:8rem;gap:2rem}
}
@media (max-width:640px){
  .page-head{padding-top:7rem}
  .form-grid,.track-pick,.reward-grid,.perks,.why-grid,.tier-grid,.ap-grid{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .product-grid{grid-template-columns:1fr}
  .merch-hero{grid-template-columns:1fr}
  .merch-hero-img{max-width:200px}
  .ticket{grid-template-columns:1fr}
  .ticket-l{border-right:0;border-bottom:3px dashed #E2CE9E}
  .step{font-size:.8rem}
  .qty-row{flex-direction:column}
  .admin-stats{grid-template-columns:1fr 1fr}
  .lightbox{grid-template-columns:1fr;padding:1rem}
  .lb-nav{position:absolute;bottom:1.5rem}
  .lb-nav.prev{left:30%}.lb-nav.next{right:30%}
  .dome-wrap{height:70vh}
  .cart-item{flex-wrap:wrap}
  .cart-item img{width:72px;height:72px}
  .menu-links span{font-size:2.3rem}
}
@media (max-width:640px){
  .page-head{padding-top:7rem}
  .form-grid,.track-pick,.reward-grid,.perks,.why-grid,.tier-grid,.ap-grid{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .product-grid{grid-template-columns:1fr}
  .merch-hero{grid-template-columns:1fr}
  .merch-hero-img{max-width:200px}
  .ticket{grid-template-columns:1fr}
  .ticket-l{border-right:0;border-bottom:3px dashed #e5e5e5}
  .step{font-size:.8rem}
  .qty-row{flex-direction:column}
  .admin-stats{grid-template-columns:1fr 1fr}
  .lightbox{grid-template-columns:1fr;padding:1rem}
  .lb-nav{position:absolute;bottom:1.5rem}
  .lb-nav.prev{left:30%}.lb-nav.next{right:30%}
  .dome-wrap{height:70vh}
  .cart-item{flex-wrap:wrap}
  .cart-item img{width:72px;height:72px}
  .menu-links span{font-size:2.3rem}
}