:root{
  --loading-aqua:#7ff9ee;
  --loading-blue:#28bad1;
  --loading-gold:#f5d783;
  --loading-deep:#00101d;
}

html.atlantis-loading .loadingScreen[hidden]{display:grid!important}
html.atlantis-loading .game{visibility:hidden}

.loadingScreen{
  position:fixed;z-index:10000;inset:0;display:grid;place-items:center;overflow:hidden;
  grid-template-columns:minmax(0,1fr);
  min-width:280px;min-height:100vh;min-height:100dvh;padding:clamp(24px,6vw,72px);
  color:#f3fffd;text-align:center;
  background:
    linear-gradient(180deg,rgba(0,13,26,.3),rgba(0,10,20,.82)),
    radial-gradient(circle at 50% 31%,rgba(36,210,218,.18),transparent 34%),
    url('../../public/assets/backgrounds/atlantis ocean.png') center / cover no-repeat,
    var(--loading-deep);
  isolation:isolate;transition:opacity .48s ease,visibility .48s ease;
}
.loadingScreen[hidden]{display:none!important}
.loadingScreen::before{
  content:"";position:absolute;z-index:-1;inset:-20%;pointer-events:none;
  background:linear-gradient(105deg,transparent 27%,rgba(99,255,235,.08) 42%,transparent 57%);
  mix-blend-mode:screen;transform-origin:50% 0;animation:loadingCaustics 8s ease-in-out infinite alternate;
}
.loadingScreen::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,6,16,.05),transparent 38%,rgba(0,6,15,.58)),radial-gradient(ellipse at center,transparent 28%,rgba(0,7,17,.62) 100%);
}
.loadingScreen.isLeaving{opacity:0;visibility:hidden}

.loadingContent{width:100%;max-width:520px;min-width:0;display:grid;justify-items:center;position:relative}
.loadingEmblem{
  position:relative;display:grid;place-items:center;width:clamp(132px,24vw,188px);aspect-ratio:1;
  margin-bottom:clamp(18px,4vh,34px);filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
.loadingEmblem::before,.loadingEmblem::after,.loadingEmblemRing{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.loadingEmblem::before{
  inset:3%;border:1px solid rgba(126,250,236,.7);
  box-shadow:0 0 24px rgba(64,237,225,.34),inset 0 0 24px rgba(64,237,225,.2);
  animation:loadingRingPulse 2.4s ease-in-out infinite;
}
.loadingEmblem::after{
  inset:16%;background:radial-gradient(circle,rgba(35,188,202,.25),rgba(1,26,44,.82) 66%,rgba(0,7,15,.92));
  border:1px solid rgba(245,215,131,.72);box-shadow:inset 0 0 28px rgba(32,198,205,.22),0 0 16px rgba(245,215,131,.16);
}
.loadingEmblemRing{
  inset:-3%;border:2px solid transparent;border-top-color:var(--loading-gold);border-bottom-color:rgba(127,249,238,.78);
  box-shadow:inset 0 0 0 1px rgba(127,249,238,.14);animation:loadingRingSpin 7s linear infinite;
}
.loadingEmblem img{
  position:relative;z-index:2;width:74%;height:74%;object-fit:contain;
  filter:drop-shadow(0 0 13px rgba(127,249,238,.48)) brightness(1.08);user-select:none;
  animation:loadingTreasureFloat 3s ease-in-out infinite;
}
.loadingKicker{
  margin:0 0 10px;color:var(--loading-aqua);font-size:clamp(9px,1.6vw,12px);font-weight:800;
  letter-spacing:.38em;text-indent:.38em;text-shadow:0 0 12px rgba(70,235,223,.65);
}
.loadingTitle{
  max-width:100%;margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,7vw,56px);font-weight:700;line-height:1.08;
  letter-spacing:.06em;text-indent:.06em;color:#fff9df;
  overflow-wrap:anywhere;
  text-shadow:0 2px 0 #85662f,0 0 17px rgba(245,215,131,.38),0 8px 22px rgba(0,0,0,.7);
}
.loadingSubtitle{
  margin:9px 0 clamp(26px,5vh,42px);color:rgba(226,250,248,.76);font-size:clamp(10px,2vw,14px);font-weight:700;
  letter-spacing:.34em;text-indent:.34em;
}
.loadingProgress{
  position:relative;width:100%;max-width:390px;height:7px;padding:1px;overflow:visible;border:1px solid rgba(129,240,232,.38);border-radius:999px;
  background:rgba(0,11,22,.72);box-shadow:inset 0 1px 4px rgba(0,0,0,.9),0 0 18px rgba(40,186,209,.12);
}
.loadingProgressFill{
  display:block;width:0;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#087c9c,var(--loading-aqua) 68%,#fff4b4);
  box-shadow:0 0 10px rgba(127,249,238,.68);transition:width .16s ease-out;
}
.loadingProgressGlow{
  position:absolute;left:0;top:50%;width:38%;height:22px;opacity:.55;transform:translate(-45%,-50%);
  background:radial-gradient(ellipse,rgba(127,249,238,.3),transparent 68%);animation:loadingBarGlow 2.2s ease-in-out infinite;
}
.loadingMeta{
  width:100%;max-width:390px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:11px;
  color:rgba(221,244,243,.72);font-size:11px;font-weight:650;letter-spacing:.08em;
}
.loadingMeta strong{min-width:3.2em;color:var(--loading-gold);font-variant-numeric:tabular-nums;text-align:right}

.loadingCurrent{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loadingBubble{
  position:absolute;bottom:-70px;width:18px;height:18px;border:1px solid rgba(191,255,249,.7);border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 27%,rgba(255,255,255,.9) 0 7%,rgba(127,249,238,.12) 28%,transparent 68%);
  box-shadow:inset -2px -2px 5px rgba(15,124,153,.3),0 0 9px rgba(127,249,238,.2);animation:loadingBubbleRise 6.8s linear infinite;
}
.loadingBubbleOne{left:16%;width:13px;height:13px;animation-delay:-1.8s}
.loadingBubbleTwo{left:76%;width:23px;height:23px;animation-delay:-4.7s;animation-duration:8.4s}
.loadingBubbleThree{left:87%;width:9px;height:9px;animation-delay:-.6s;animation-duration:5.7s}

@keyframes loadingCaustics{from{transform:translate3d(-2%,0,0) rotate(-1deg) scale(1)}to{transform:translate3d(2%,2%,0) rotate(1deg) scale(1.04)}}
@keyframes loadingRingSpin{to{transform:rotate(360deg)}}
@keyframes loadingRingPulse{50%{opacity:.5;transform:scale(.96)}}
@keyframes loadingTreasureFloat{50%{transform:translateY(-5px) scale(1.025)}}
@keyframes loadingBarGlow{50%{left:100%}}
@keyframes loadingBubbleRise{0%{opacity:0;transform:translate3d(0,0,0) scale(.55)}12%,72%{opacity:.72}100%{opacity:0;transform:translate3d(24px,-115vh,0) scale(1.18)}}

@media (max-width:480px){
  .loadingScreen{padding:22px 18px}
  .loadingKicker{letter-spacing:.24em;text-indent:.24em}
  .loadingTitle{letter-spacing:.02em;text-indent:.02em}
  .loadingSubtitle{letter-spacing:.25em;text-indent:.25em}
}

@media (max-height:540px) and (orientation:landscape){
  .loadingScreen{padding:12px 24px}
  .loadingEmblem{width:106px;margin-bottom:10px}
  .loadingKicker{margin-bottom:5px}
  .loadingTitle{font-size:31px}
  .loadingSubtitle{margin:4px 0 15px}
}

@media (prefers-reduced-motion:reduce){
  .loadingScreen,.loadingProgressFill{transition-duration:.01ms}
  .loadingScreen::before,.loadingEmblem::before,.loadingEmblemRing,.loadingEmblem img,.loadingProgressGlow,.loadingBubble{animation:none}
  .loadingBubble{display:none}
}