.boot-screen{
  --boot-gold:#e7c552;
  --boot-gold-soft:#b99432;
  --boot-green:#42a976;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
  padding:
    max(12px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(12px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,rgba(31,92,66,.42) 0,rgba(11,42,30,.25) 25%,transparent 55%),
    radial-gradient(circle at 50% 110%,rgba(29,104,73,.22),transparent 43%),
    linear-gradient(145deg,#03100b 0%,#071c14 48%,#020d09 100%);
}
.boot-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.2;
  background-image:
    linear-gradient(rgba(231,197,82,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(231,197,82,.035) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(circle at center,#000,transparent 68%);
  mask-image:radial-gradient(circle at center,#000,transparent 68%);
}
.boot-screen::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:-1;
  width:min(640px,80vw);
  max-width:calc(100vw - 24px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(231,197,82,.08);
  border-radius:50%;
  box-shadow:0 0 0 52px rgba(231,197,82,.018),0 0 0 104px rgba(231,197,82,.012);
}
.boot-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none}
.boot-atmosphere i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--boot-gold);box-shadow:0 0 12px var(--boot-gold);opacity:0;animation:boot-drift 5s ease-in-out infinite}
.boot-atmosphere i:nth-child(1){left:20%;top:68%;animation-delay:.4s}
.boot-atmosphere i:nth-child(2){left:73%;top:32%;animation-delay:1.8s}
.boot-atmosphere i:nth-child(3){left:82%;top:74%;animation-delay:3.1s}
.boot-brand{position:relative;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-width:100%;margin:auto;padding:28px 24px 27px;text-align:center}
.boot-brand::before,.boot-brand::after{content:"";position:absolute;left:50%;width:min(420px,75vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(231,197,82,.35),transparent)}
.boot-brand::before{top:0}.boot-brand::after{bottom:0}
.boot-screen .boot-emblem{position:relative;display:grid;place-items:center;width:94px;height:94px;border:0;background:radial-gradient(circle,rgba(231,197,82,.13),transparent 66%);color:transparent;line-height:1;overflow:visible;box-shadow:none}
.boot-screen .boot-emblem::before,.boot-screen .boot-emblem::after{content:"";position:absolute;border:1px solid rgba(231,197,82,.5);border-radius:50%}
.boot-screen .boot-emblem::before{inset:4px;border-top-color:var(--boot-gold);border-bottom-color:var(--boot-gold);animation:boot-ring 9s linear infinite}
.boot-screen .boot-emblem::after{inset:10px;border-color:rgba(66,169,118,.28)}
.boot-emblem-ring{position:absolute;inset:-7px;border:1px solid rgba(231,197,82,.08);border-radius:50%;box-shadow:0 0 42px rgba(231,197,82,.12)}
.boot-screen .boot-emblem img{position:relative;z-index:1;display:block;width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 6px 15px rgba(0,0,0,.55));animation:boot-pokeball-pulse 2.2s ease-in-out infinite}
.boot-eyebrow{display:flex;align-items:center;gap:10px;margin-top:14px;color:#a9b8ae;font-size:7px;font-weight:900;letter-spacing:2.1px}
.boot-eyebrow i{display:block;width:31px;height:1px;background:linear-gradient(90deg,transparent,var(--boot-gold-soft))}
.boot-eyebrow i:last-child{transform:scaleX(-1)}
.boot-screen .boot-brand>strong{display:flex;align-items:baseline;justify-content:center;gap:.24em;width:100%;margin-top:8px;color:#f8f3e7;font:900 clamp(29px,3vw,38px) Georgia,serif;letter-spacing:1.5px;line-height:1.1;text-align:center;white-space:nowrap;text-shadow:0 3px 22px rgba(0,0,0,.7)}
.boot-screen .boot-brand>strong b{color:var(--boot-gold);font:inherit}
.boot-screen .boot-brand>p{margin:7px 0 0;color:#83b89e;font-size:8px;font-weight:900;letter-spacing:3px}
.boot-screen .boot-brand>small{margin-top:27px;color:#d8c47a;font-size:8px;font-weight:900;letter-spacing:2.6px}
.boot-screen .boot-progress{position:relative;flex:none;width:min(320px,calc(100vw - 72px));height:3px;margin:12px auto 0;overflow:visible;border-radius:4px}
.boot-screen .boot-progress-track{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit;background:rgba(255,255,255,.09);box-shadow:0 1px 0 rgba(255,255,255,.03)}
.boot-screen .boot-progress::before,.boot-screen .boot-progress::after{content:"";position:absolute;top:1px;width:3px;height:3px;border-radius:50%;background:rgba(231,197,82,.48)}
.boot-screen .boot-progress::before{left:-8px}.boot-screen .boot-progress::after{right:-8px}
.boot-screen .boot-progress i{display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--boot-green) 25%,var(--boot-gold) 85%,#fff0a5);box-shadow:0 0 10px rgba(231,197,82,.3);animation:boot-brand-slide 1.35s ease-in-out infinite}
.boot-world{margin-top:17px;color:rgba(212,223,216,.52);font-size:7px;font-weight:800;letter-spacing:1.7px}
@keyframes boot-pokeball-pulse{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 6px 13px rgba(0,0,0,.5))}50%{transform:translateY(-3px) scale(1.035);filter:drop-shadow(0 8px 18px rgba(231,197,82,.25))}}
@keyframes boot-ring{to{transform:rotate(360deg)}}
@keyframes boot-brand-slide{0%{transform:translateX(-105%)}100%{transform:translateX(165%)}}
@keyframes boot-drift{0%{transform:translateY(28px);opacity:0}35%{opacity:.55}100%{transform:translateY(-75px);opacity:0}}
@media(max-width:600px){
  .boot-screen{justify-content:center}
  .boot-screen::after{width:min(520px,92vw);max-width:calc(100vw - 16px)}
  .boot-brand{width:calc(100vw - 24px);padding:22px 12px}
  .boot-screen .boot-emblem{width:84px;height:84px}
  .boot-screen .boot-emblem img{width:56px;height:56px}
  .boot-eyebrow{gap:8px;width:100%;justify-content:center;white-space:nowrap}
  .boot-eyebrow i{width:min(31px,8vw)}
  .boot-screen .boot-brand>strong{font-size:clamp(20px,6.7vw,27px);letter-spacing:clamp(.4px,.3vw,1.2px)}
  .boot-screen .boot-brand>p{font-size:clamp(5.5px,1.8vw,7px);letter-spacing:clamp(1.3px,.6vw,2.3px);white-space:nowrap}
  .boot-screen .boot-brand>small{margin-top:23px;white-space:nowrap}
  .boot-world{max-width:100%;font-size:clamp(5px,1.55vw,6px);letter-spacing:clamp(.7px,.32vw,1.25px);white-space:nowrap}
}
@media(max-width:350px){
  .boot-brand{width:calc(100vw - 16px);padding-inline:8px}
  .boot-eyebrow{font-size:6px;letter-spacing:1.45px}
  .boot-screen .boot-brand>strong{font-size:20px}
  .boot-screen .boot-progress{width:calc(100vw - 64px)}
}
@media(max-height:520px) and (orientation:landscape){
  .boot-screen{padding-block:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-bottom))}
  .boot-brand{padding-block:9px}
  .boot-screen .boot-emblem{width:62px;height:62px}
  .boot-screen .boot-emblem img{width:42px;height:42px}
  .boot-eyebrow{margin-top:5px}
  .boot-screen .boot-brand>strong{margin-top:4px;font-size:22px}
  .boot-screen .boot-brand>p{margin-top:3px}
  .boot-screen .boot-brand>small{margin-top:10px}
  .boot-screen .boot-progress{margin-top:7px}
  .boot-world{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
  .boot-screen .boot-emblem::before,.boot-screen .boot-emblem img,.boot-atmosphere i{animation:none}
  .boot-screen .boot-progress i{animation-duration:2.8s}
}