/* S.A.F Coin Game — V20 look: charcoal + burgundy, glass panels, Cinzel everywhere, gold only as a thin accent */
:root{--gold:#e8c168;--gold-bright:#f3d27a;--gold-pale:#fbe6a6;--gold-dim:rgba(156,45,71,.22);--gold-glow:rgba(156,45,71,.1);--gold-border:rgba(156,45,71,.38);--gold-border-strong:rgba(184,68,95,.65);
 --maroon:#751d33;--maroon-dark:#2e0b16;--crimson:#b8445f;--bg:#070708;--bg2:#0d0a0b;--surface:rgba(22,14,18,.8);--surface2:rgba(255,255,255,.05);--surface3:rgba(255,255,255,.08);
 --text:#f1ebdd;--text-m:#c9bdb8;--text-dim:#a79a94;--font-body:'Cinzel',serif;--font-display:'Cinzel',serif;--font-title:'Cinzel',serif;--glass:rgba(255,255,255,.055);--edge:rgba(255,255,255,.12);--blur:blur(22px) saturate(150%)}
html,body{background:#070708;font-family:'Cinzel',Georgia,serif}body *{font-family:inherit}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(160deg,#0f0a0c,#070708 55%,#0b0809)}
.bg i{position:absolute;border-radius:50%;filter:blur(95px);opacity:.5}.bg i:nth-child(1){width:48vw;height:48vw;left:-12vw;top:-14vw;background:#5a1527}.bg i:nth-child(2){width:42vw;height:42vw;right:-10vw;top:8vh;background:#2e0b16}.bg i:nth-child(3){width:36vw;height:36vw;left:32vw;bottom:-20vw;background:#46101f;opacity:.4}
#site-wrapper{background:transparent}
#site-header{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--edge)}
.brand-primary{background:linear-gradient(180deg,#fbe6a6,#b8862b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.header-logo{box-shadow:0 0 0 2px #e8c168,0 0 0 5px rgba(117,29,51,.45)}
#auth-strip{background:rgba(117,29,51,.18);border-bottom:1px solid rgba(156,45,71,.35)}
.page-eyebrow{color:#d9a0ae;letter-spacing:.3em}.page-hero h1{color:var(--text);border-left:3px solid #9c2d47;padding-left:14px}
.section-label{color:#d9a0ae}
.game-lobby-card,.game-info-card,.coin-lb-wrap,.signin-box,#toast.show{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--edge);border-radius:20px;box-shadow:0 22px 50px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08)}
.game-lobby-card:hover{border-color:rgba(184,68,95,.6);box-shadow:0 30px 60px -24px #000,0 0 40px -14px rgba(156,45,71,.5)}
.game-mode-btn{background:var(--glass);border:1px solid var(--edge)}.game-mode-btn.active{background:linear-gradient(135deg,rgba(117,29,51,.6),rgba(117,29,51,.18));border-color:#9c2d47;box-shadow:0 0 28px -8px rgba(156,45,71,.55)}
.btn{letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:12px}
.btn-gold{background:linear-gradient(180deg,#9c2d47,#751d33 55%,#4a1020);color:#fff;border:1px solid rgba(255,120,140,.35);box-shadow:0 10px 24px -10px rgba(156,45,71,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-gold:hover{filter:brightness(1.12)}.btn-outline{background:var(--glass);color:var(--text);border:1px solid var(--edge)}.btn-outline:hover{border-color:#9c2d47;color:#fff}
.signin-input{background:rgba(0,0,0,.3);border:1px solid var(--edge);color:var(--text);border-radius:12px}.signin-input:focus{border-color:#9c2d47;outline:0;box-shadow:0 0 0 3px rgba(156,45,71,.25)}
#signin-modal{z-index:9000;background:rgba(5,2,8,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mp-feat{color:#d9a0ae;background:rgba(117,29,51,.18);border-color:rgba(156,45,71,.4)}
.mp-match-found-card{border-color:rgba(184,68,95,.5)}.mp-spinner{border-top-color:#b8445f}.mp-queue-dots span{background:rgba(184,68,95,.4)}
#lock-screen{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 30%,#2a0c16 0,#0a0507 65%,#050304 100%)}#lock-screen[hidden]{display:none}
.lk-card{max-width:420px;width:100%;text-align:center;padding:38px 28px;border-radius:20px;background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.lk-card img{width:96px;height:96px;border-radius:50%;margin-bottom:14px;box-shadow:0 0 0 2px #e8c168,0 0 0 6px rgba(117,29,51,.55)}.lk-card h1{font-size:1.6rem;letter-spacing:.2em;margin-bottom:6px}
.lk-msg{color:#d9a0ae;letter-spacing:.08em;margin:8px 0 18px}.lk-who{color:var(--text-dim);font-size:.85rem;margin-bottom:16px}.lk-card .btn{width:100%}
body.locked #site-wrapper{visibility:hidden}
/* ── loading screen: ring draws, S.A.F resolves letter by letter, then the curtains open ── */
#boot{position:fixed;inset:0;z-index:300;cursor:pointer;overflow:hidden}
#boot.out{visibility:hidden;transition:visibility 0s 1.5s}
.bt-p{position:absolute;top:0;bottom:0;width:50.3%;transition:transform 1s cubic-bezier(.7,0,.2,1) .4s}
.bt-l{left:0;background:linear-gradient(90deg,#060304,#1b0a12);border-right:1px solid rgba(232,193,104,.3)}
.bt-r{right:0;background:linear-gradient(270deg,#060304,#1b0a12);border-left:1px solid rgba(232,193,104,.3)}
#boot.out .bt-l{transform:translateX(-101%)}#boot.out .bt-r{transform:translateX(101%)}
.bt-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .45s,transform .6s}
.bt-c::before{content:"";position:absolute;width:520px;height:520px;max-width:120vw;border-radius:50%;background:radial-gradient(circle,rgba(117,29,51,.55),transparent 62%);animation:btglow 3.2s ease-in-out infinite alternate}
#boot.out .bt-c{opacity:0;transform:scale(1.08)}
.bt-mark{position:relative;width:148px;height:148px;display:grid;place-items:center}
.bt-logo{width:108px;height:108px;border-radius:50%;animation:btin 1s cubic-bezier(.2,.8,.2,1) both}
.bt-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.bt-ring circle{fill:none;stroke-width:1.2}.bt-ring .trk{stroke:rgba(255,255,255,.08)}
.bt-ring .arc{stroke:#e8c168;stroke-linecap:round;stroke-dasharray:358;stroke-dashoffset:358;animation:btarc 2s cubic-bezier(.65,0,.25,1) .2s forwards}
.bt-title{position:relative;margin-top:32px;font:600 1.6rem Cinzel,serif;letter-spacing:.5em;margin-right:-.5em;color:#f1ebdd}
.bt-title span{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(10px);animation:btl .8s cubic-bezier(.2,.8,.2,1) forwards}
.bt-title span:nth-child(1){animation-delay:.8s}.bt-title span:nth-child(2){animation-delay:.95s}.bt-title span:nth-child(3){animation-delay:1.1s}.bt-title span:nth-child(4){animation-delay:1.25s}.bt-title span:nth-child(5){animation-delay:1.4s}
.bt-line{position:relative;margin-top:16px;height:1px;width:0;background:linear-gradient(90deg,transparent,#e8c168,transparent);animation:btw 1.2s 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.bt-quote{position:relative;margin-top:16px;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:#a79a94;text-align:center;padding:0 24px;opacity:0;animation:btup .9s 1.9s forwards}
@keyframes btarc{to{stroke-dashoffset:0}}@keyframes btin{from{opacity:0;transform:scale(.88)}}@keyframes btl{to{opacity:1;filter:none;transform:none}}
@keyframes btw{to{width:min(240px,60vw)}}@keyframes btup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes btglow{from{opacity:.6;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.bt-c::before,.bt-logo{animation:none}.bt-title span{animation:none;opacity:1;filter:none;transform:none}.bt-line{animation:none;width:220px}.bt-quote{animation:none;opacity:1}.bt-ring .arc{animation:none;stroke-dashoffset:0}.bt-p{transition-duration:.01s}}
/* ── footer ── */
#foot{background:linear-gradient(180deg,transparent,rgba(117,29,51,.14));border-top:1px solid rgba(156,45,71,.35);padding-top:34px}
#foot img{display:block;width:30px;height:30px;margin:0 auto 14px;border-radius:50%;box-shadow:0 0 0 1px var(--gold),0 0 0 4px rgba(117,29,51,.35);opacity:.92}
.ft-name{font:600 .82rem Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--text);overflow-wrap:anywhere}
.ft-est{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;font-size:.64rem;letter-spacing:.36em;text-transform:uppercase;color:var(--mute)}
.ft-est span{width:52px;height:1px;background:linear-gradient(90deg,transparent,rgba(156,45,71,.9))}.ft-est span:last-child{transform:scaleX(-1)}
