/* Gold Serpent Royale page styles. Navy + bright gold, jeweled. No orange/coral, no white backgrounds. */
.g-stage[data-game="serpent"]{position:relative;padding:.5rem;background:#0B2545;border-radius:16px}
.sr-wrap{position:relative;width:100%;height:clamp(320px,74dvh,760px);border-radius:14px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#04122e;box-shadow:inset 0 0 0 2px rgba(255,199,44,.45)}
.g-play.is-full .sr-wrap{height:var(--maxh,calc(100dvh - 120px))}
.sr-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;cursor:crosshair}
.sr-canvas:focus-visible{box-shadow:inset 0 0 0 3px #FFD54F}
.sr-hud{position:absolute;inset:0;pointer-events:none;z-index:1;font-family:Arial,Helvetica,sans-serif;color:#EAF0FF}
.sr-wrap:not([data-mode="play"]):not([data-mode="dead"]) .sr-me,.sr-wrap:not([data-mode="play"]) .sr-boost{display:none}
.sr-pausebtn{pointer-events:auto;position:absolute;left:10px;top:10px;width:52px;height:52px;border-radius:14px;border:2px solid #F5B800;background:rgba(2,12,38,.75);cursor:pointer}
.sr-bars{display:block;width:18px;height:20px;margin:auto;border-left:6px solid #FFD54F;border-right:6px solid #FFD54F;box-sizing:border-box}
.sr-pausebtn:focus-visible,.sr-boost:focus-visible{outline:3px solid #fff;outline-offset:2px}
.sr-clock{position:absolute;left:50%;top:8px;transform:translateX(-50%);margin:0;padding:.3rem .8rem;border-radius:999px;border:2px solid #F5B800;background:rgba(2,12,38,.75);font-weight:800;font-size:clamp(1rem,3.4vw,1.3rem);color:#FFD54F;white-space:nowrap}
.sr-clock.low{border-color:#ff3f74;animation:srPulse .6s ease-in-out infinite alternate}
@keyframes srPulse{to{transform:translateX(-50%) scale(1.06)}}
.sr-big{position:absolute;left:50%;top:52px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:.3rem;padding:.2rem .7rem;border-radius:999px;background:rgba(2,12,38,.7);font-weight:700;font-size:clamp(.9rem,3vw,1.05rem);white-space:nowrap;max-width:62%;overflow:hidden}
.sr-big b{color:#FFD54F}
.sr-crownico{display:inline-block;width:20px;height:14px;background:#FFC72C;clip-path:polygon(0 100%,0 20%,25% 60%,50% 0,75% 60%,100% 20%,100% 100%);flex:none}
.sr-boti{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-2px;margin:0 .15rem;border-radius:3px;background:radial-gradient(circle at 30% 45%,#06152f 0 2px,transparent 2.5px),radial-gradient(circle at 70% 45%,#06152f 0 2px,transparent 2.5px),linear-gradient(#06152f,#06152f) 50% 78%/50% 2px no-repeat,#9fc0ff;box-shadow:0 -4px 0 -2px #FFD54F}
.sr-board{position:absolute;right:8px;top:8px;width:min(46%,230px);padding:.35rem .5rem;border-radius:12px;background:rgba(2,12,38,.62);border:1px solid rgba(255,199,44,.55);font-size:.9rem}
.sr-bh{margin:0 0 .15rem;font-weight:800;color:#FFD54F;font-size:.85rem}
.sr-lb{list-style:none;margin:0;padding:0}
.sr-lb li{display:flex;align-items:center;gap:.2rem;line-height:1.35}
.sr-lb .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-lb .v{font-weight:700;color:#FFE08A}
.sr-lb li.me{color:#FFD54F;font-weight:800}
.sr-lb li:first-child .n::before{content:"\265B ";color:#FFC72C}
.sr-me{position:absolute;left:10px;bottom:10px;margin:0;padding:.3rem .7rem;border-radius:999px;background:rgba(2,12,38,.75);border:2px solid #F5B800;font-weight:800;color:#FFD54F;font-size:clamp(.95rem,3vw,1.15rem)}
.sr-me:empty{display:none}
.sr-boost{pointer-events:auto;position:absolute;right:14px;bottom:148px;width:84px;height:84px;border-radius:50%;border:3px solid #FFD54F;background:radial-gradient(circle at 35% 30%,#FFF3B0,#FFC72C 55%,#a8780a);color:#06152f;font:800 1.05rem Arial,sans-serif;cursor:pointer;touch-action:none;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.sr-boost.on{transform:scale(.94);box-shadow:0 0 22px #FFD54F}
@media (hover:hover) and (pointer:fine){.sr-boost{display:none}}
.sr-toast{position:absolute;left:50%;top:26%;transform:translate(-50%,10px);margin:0;max-width:88%;padding:.55rem 1rem;border-radius:16px;background:rgba(2,12,38,.82);border:2px solid #F5B800;color:#EAF0FF;font:700 clamp(1rem,3.4vw,1.25rem)/1.25 Arial,sans-serif;text-align:center;opacity:0;pointer-events:none;z-index:1;transition:opacity .35s,transform .35s}
.sr-toast.show{opacity:1;transform:translate(-50%,0)}
.sr-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:min(92%,440px);max-height:94%;overflow:auto;box-sizing:border-box;padding:1rem 1.2rem;border-radius:20px;text-align:center;color:#EAF0FF;
  background:linear-gradient(180deg,rgba(11,37,69,.95),rgba(2,12,38,.96));border:3px solid #F5B800;box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,213,79,.25);font-family:Arial,Helvetica,sans-serif}
.sr-panel[hidden]{display:none}
.sr-panel p{margin:.3rem 0}
.sr-title{font:800 clamp(1.4rem,5.5vw,2rem)/1.15 Georgia,serif;color:#FFD54F;text-shadow:0 3px 0 #6b4a00}
.sr-sub{font-size:1.1rem;font-weight:700}
.sr-lbl{font-weight:700;color:#FFE08A;margin-top:.6rem!important}
.sr-field{display:block;text-align:left;font-weight:700;margin:.5rem 0;color:#FFE08A}
.sr-field input,.sr-field select{display:block;width:100%;box-sizing:border-box;margin-top:.2rem;min-height:48px;font-size:1.1rem;border-radius:10px;border:2px solid #F5B800;background:#0B2545;color:#fff;padding:.3rem .6rem}
.sr-skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.4rem}
.sr-skin{display:flex;align-items:center;gap:.4rem;min-height:48px;padding:.3rem .5rem;border-radius:12px;border:2px solid rgba(255,199,44,.45);background:#0B2545;color:#EAF0FF;font:700 .95rem Arial,sans-serif;cursor:pointer;text-align:left}
.sr-skin[aria-pressed="true"]{border-color:#FFD54F;box-shadow:0 0 0 2px #FFD54F,0 0 14px rgba(255,213,79,.5)}
.sr-sw{width:26px;height:26px;border-radius:50%;flex:none;border:2px solid #FFD54F}
.sr-skin-navygold .sr-sw,.sr-wcrown.sr-skin-navygold{background:repeating-linear-gradient(90deg,#14376e 0 6px,#FFC72C 6px 9px)}
.sr-skin-emerald .sr-sw,.sr-wcrown.sr-skin-emerald{background:repeating-linear-gradient(90deg,#0d7a55 0 6px,#FFD54F 6px 9px)}
.sr-skin-sapphire .sr-sw,.sr-wcrown.sr-skin-sapphire{background:repeating-linear-gradient(90deg,#1f4fc4 0 6px,#cfe0ff 6px 9px)}
.sr-skin-ruby .sr-sw,.sr-wcrown.sr-skin-ruby{background:repeating-linear-gradient(90deg,#a3123a 0 6px,#FFD54F 6px 9px)}
.sr-skin-pearl .sr-sw,.sr-wcrown.sr-skin-pearl{background:repeating-linear-gradient(90deg,#e9dcc0 0 6px,#c9a24a 6px 9px)}
.sr-panel .btn{margin-top:.7rem}
.sr-note{font-size:.95rem;color:#cfd9f5}
.sr-wcrown{display:block;width:84px;height:84px;margin:.3rem auto;border-radius:50%;border:4px solid #FFD54F;position:relative;box-shadow:0 0 24px rgba(255,213,79,.6)}
.sr-wcrown::after{content:"";position:absolute;left:50%;top:-30px;width:54px;height:36px;transform:translateX(-50%);background:#FFC72C;clip-path:polygon(0 100%,0 20%,25% 60%,50% 0,75% 60%,100% 20%,100% 100%)}
.sr-win{padding-top:1.6rem}
.sr-endbtns{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.sr-pnote{font-size:1rem;max-width:28rem;margin:.3rem auto}
#g-result > button.btn{display:none}
@media (max-width:620px){.sr-clock{left:70px;top:12px;transform:none;font-size:1.05rem}.sr-big{left:8px;top:68px;transform:none;max-width:50%;font-size:.85rem}.sr-board{top:68px;right:6px;width:46%;font-size:.78rem;padding:.25rem .4rem}.sr-bh{font-size:.75rem}.sr-lb li:nth-child(n+6):not(.me){display:none}@keyframes srPulse{to{transform:scale(1.06)}}.sr-title{font-size:1.35rem}.sr-sub{font-size:1rem}.sr-skin{font-size:.85rem;min-height:44px}.sr-panel{padding:.8rem .9rem}}
@media (max-height:460px){.sr-board{font-size:.75rem;top:8px;width:200px}.sr-board .sr-lb li:nth-child(n+6):not(.me){display:none}.sr-boost{width:70px;height:70px;bottom:12px;right:100px}.sr-wcrown{width:48px;height:48px;margin-top:.8rem}.sr-win{padding-top:.6rem}.sr-panel .btn{margin-top:.3rem}.sr-clock{left:70px;transform:none;top:12px}.sr-big{left:70px;transform:none;top:56px}}
@media (prefers-reduced-motion:reduce){.sr-clock.low{animation:none}.sr-toast{transition:none}}

/* Winner screen: keep it clear of site chrome (vault confetti, back-to-top) */
body.sr-winning .vault-celebrate,body.sr-winning .btt,body.sr-winning .g-fx,body.sr-winning .rain-coin{display:none!important}
.sr-wrap[data-mode=win] .sr-toast{display:none}
@media (max-height:460px){.sr-wrap[data-mode=win] .sr-board,.sr-wrap[data-mode=win] .sr-big,.sr-wrap[data-mode=win] .sr-boost,.sr-wrap[data-mode=win] .sr-me{display:none}.sr-wrap[data-mode=win] .sr-panel{max-height:96%;padding:.5rem 1rem}}
@media (max-height:460px){body.sr-winning header.site{position:static}}
@media (max-height:460px){.sr-wrap[data-mode=win] .sr-wcrown{display:none}.sr-wrap[data-mode=win] .sr-clock{display:none}}
body:has(.sr-wrap[data-mode="play"]) .btt,body:has(.sr-wrap[data-mode="dead"]) .btt{display:none!important} /* keep site Top button off the minimap during play */