/* Moonlit sea, using only composited transforms and opacity. */
.atmosphere {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  opacity:0;
  transition:opacity 1.2s ease;
}
html[data-atmosphere-active=true] .atmosphere {opacity:1}
.atmosphere span,.sea-particles i {position:absolute;display:block;pointer-events:none}
.sea-mist {
  width:120%;
  left:-10%;
  height:38%;
  border-radius:50%;
  background:radial-gradient(ellipse,#82cbd020 0%,#8ac6ca0a 38%,transparent 70%);
  animation:sea-mist-drift 30s ease-in-out infinite alternate;
}
.sea-mist-far {top:26%;transform:translateX(-3%) rotate(-5deg)}
.sea-mist-near {
  top:48%;
  height:32%;
  background:radial-gradient(ellipse,#eec78013,transparent 65%);
  animation-duration:38s;
  animation-delay:-17s;
  animation-direction:alternate-reverse;
}
.sea-reflections {
  left:20%;
  right:-8%;
  top:52%;
  height:32%;
  background:repeating-linear-gradient(176deg,transparent 0 14px,#99d5d908 15px 16px,transparent 17px 30px);
  mask-image:radial-gradient(ellipse,#0009,transparent 68%);
  animation:sea-reflections 18s ease-in-out infinite alternate;
}
.sea-particles {inset:0}
.sea-particles i {
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  color:#eec780;
  background:currentColor;
  box-shadow:0 0 7px 2px #eec78030;
  opacity:0;
  animation:sea-firefly var(--duration) var(--delay) ease-in-out infinite;
}
.sea-particles i:nth-child(3n) {color:#a8ded7;box-shadow:0 0 7px 2px #a8ded730}
.atmosphere * {animation-play-state:paused}
html[data-atmosphere-active=true] .atmosphere * {animation-play-state:running}

/* Invite the next available opening with a slow glint, using the actual buttons. */
html[data-atmosphere-active=true] #homeView .compact-opening-card:has(>.primary-action:not(:disabled)) {position:relative;isolation:isolate}
html[data-atmosphere-active=true] #homeView .compact-opening-card:has(>.primary-action:not(:disabled)):after {
  content:'';
  display:block;
  position:absolute;
  inset:0;
  border:1px solid #eec78080;
  border-radius:inherit;
  box-shadow:inset 0 0 28px #eec7800c,0 0 22px #eec78014;
  pointer-events:none;
  animation:sea-ready-glow 8s ease-in-out infinite;
}
html[data-atmosphere-active=true] #homeView .display-board:has(#mainClaimBtn:not(:disabled)) #emptyDisplay>img.display-visual {
  animation:sea-display-float 9s ease-in-out infinite;
}
html[data-atmosphere-active=true] #homeView .booster-gift:has(#openGiftBtn:not(:disabled)) .gift-art>img {
  animation:sea-booster-float 8s -2s ease-in-out infinite;
}
html[data-atmosphere-active=true] #homeView .compact-opening-card>.primary-action:not(:disabled):before {
  animation:sea-action-glint 12s 3s ease-in-out infinite;
}
.atmosphere-status {margin:-4px 0 14px;line-height:1.6}
@keyframes sea-mist-drift {to{transform:translateX(5%) translateY(-5%) rotate(3deg);opacity:.5}}
@keyframes sea-reflections {from{transform:translateX(-2%) translateY(0);opacity:.35}to{transform:translateX(3%) translateY(8px);opacity:.85}}
@keyframes sea-firefly {
  0%,100%{opacity:0;transform:translate3d(0,12px,0)}
  30%{opacity:.55}
  65%{opacity:.3}
  90%{opacity:0;transform:translate3d(var(--drift),-30px,0)}
}
@keyframes sea-ready-glow {0%,100%{opacity:.2}50%{opacity:.75}}
@keyframes sea-display-float {0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1deg)}}
@keyframes sea-booster-float {0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes sea-action-glint {0%,75%{transform:translateX(-120%) skewX(-20deg)}90%,100%{transform:translateX(120%) skewX(-20deg)}}
@media(max-width:700px) {
  .sea-particles i:nth-child(n+9) {display:none}
  .sea-mist-near {display:none}
  .sea-mist-far {animation-duration:40s}
  .sea-reflections {opacity:.4}
}
@media(prefers-reduced-motion:reduce) {
  .atmosphere {display:none}
  .atmosphere * {animation:none!important}
}