/* THE LOADING SCREEN (play.html #gate, js/play.js ld()): shown from the first paint until the game is up. Dark, a compass rose that swings
   and settles, the title in the pirate hand, a progress line that follows the real loading steps, and a tip that changes. Mobile and desktop
   use the same markup; only the sizes change. When something fails, play.js adds .err and the old card (message, button) takes its place. */
#gate{background:radial-gradient(ellipse at 50% 38%,rgba(120,84,40,.22),rgba(10,8,16,0) 60%),radial-gradient(ellipse at 50% 100%,rgba(30,40,70,.5),rgba(10,8,16,0) 65%),#0a0810;
  transition:opacity .6s ease;overflow:hidden}
#gate.out{opacity:0;pointer-events:none}
#gate .card{display:none}
#gate.err .card{display:block}
#gate.err .ld{display:none}
#gate::before{content:'';position:absolute;inset:-20%;background:radial-gradient(ellipse at 30% 70%,rgba(255,255,255,.04),rgba(255,255,255,0) 50%),radial-gradient(ellipse at 75% 35%,rgba(255,255,255,.035),rgba(255,255,255,0) 55%);
  animation:ldFog 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes ldFog{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,-2%,0)}}
.ld{position:relative;width:min(86vw,420px);display:flex;flex-direction:column;align-items:center;text-align:center;animation:ldIn .8s ease-out both}
@keyframes ldIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ld-rose{width:clamp(96px,26vw,150px);height:auto;overflow:visible;margin-bottom:clamp(14px,3vh,26px);filter:drop-shadow(0 0 18px rgba(232,190,118,.25))}
.ld-ring{fill:none;stroke:#e0b873;stroke-width:1.6;opacity:.75;stroke-dasharray:340;stroke-dashoffset:340;animation:ldDraw 1.6s ease-out .1s forwards}
.ld-ring.thin{stroke-width:.8;opacity:.45;stroke-dasharray:260;stroke-dashoffset:260;animation-delay:.35s}
.ld-star{fill:rgba(224,184,115,.10);stroke:#e0b873;stroke-width:1;stroke-linejoin:round;opacity:0;animation:ldFade .8s ease-out .9s forwards}
.ld-needle{fill:#c24a36;stroke:#f1d9a0;stroke-width:.8;stroke-linejoin:round;transform-origin:60px 60px;animation:ldSwing 3.2s cubic-bezier(.3,1.4,.5,1) .5s both}
.ld-hub{fill:#f1d9a0}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldFade{to{opacity:1}}
@keyframes ldSwing{0%{transform:rotate(-160deg)}35%{transform:rotate(28deg)}55%{transform:rotate(-14deg)}75%{transform:rotate(6deg)}100%{transform:rotate(0)}}
.ld-title{margin:0;font:400 clamp(40px,11vw,68px)/1 'Pirata One',Georgia,serif;letter-spacing:.04em;color:#f6e7c3;text-shadow:0 2px 14px rgba(0,0,0,.8);text-transform:none}
.ld-act{margin:10px 0 0;font:600 12px var(--display,system-ui);letter-spacing:.34em;text-transform:uppercase;color:#e0b873}
.ld-bar{width:min(70vw,300px);height:3px;margin:clamp(22px,5vh,38px) 0 0;border-radius:3px;background:rgba(224,184,115,.18);overflow:hidden}
.ld-bar i{display:block;height:100%;width:6%;border-radius:3px;background:linear-gradient(90deg,#b88a47,#f1d9a0);box-shadow:0 0 10px rgba(241,217,160,.6);transition:width .55s cubic-bezier(.3,.7,.3,1)}
.ld-tip{margin:16px 0 0;min-height:1.4em;font:italic 400 clamp(15px,3.8vw,18px)/1.4 Georgia,'Times New Roman',serif;color:#cdbf9f;transition:opacity .35s ease}
.ld-tip.swap{opacity:0}
@media (max-height:520px) and (orientation:landscape){ .ld-rose{width:72px;margin-bottom:8px} .ld-title{font-size:38px} .ld-bar{margin-top:14px} .ld-tip{margin-top:8px} }
@media (prefers-reduced-motion:reduce){ #gate::before,.ld,.ld-star,.ld-needle,.ld-ring{animation:none} .ld-ring,.ld-ring.thin{stroke-dashoffset:0} .ld-star{opacity:1} .ld-bar i{transition:none} #gate{transition:none} }