:root {
  --blue: #46c8ff;
  --blue-bright: #b9f3ff;
  --gold: #f8bb3c;
  --orange: #ff7a20;
  --purple: #aa59ff;
  --ink: #050912;
  --panel: rgba(8, 16, 29, .78);
  --line: rgba(121, 204, 255, .24);
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: #03060c;
  color: #fff;
  font-family: Inter, sans-serif;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(5, 2, 1, .12), rgba(5, 2, 1, .48)),
    url("NC-BG-İSTEK-2.png") center / cover no-repeat;
  filter: saturate(1.05);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 42%, transparent 0 26%, rgba(8, 2, 0, .12) 58%, rgba(3, 1, 0, .66) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 20% 80%, rgba(0, 0, 0, .2));
}

.ambient {
  position: fixed;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient::before,
.ambient::after {
  position: absolute;
  top: -25%;
  width: 2px;
  height: 130%;
  content: "";
  background: linear-gradient(transparent, rgba(72, 198, 255, .8), transparent);
  box-shadow: 0 0 25px 7px rgba(45, 175, 255, .25);
  opacity: .25;
  transform: rotate(31deg);
}
.ambient::before { left: 12%; }
.ambient::after { right: 12%; transform: rotate(-31deg); }

.game-shell {
  position: relative;
  z-index: 3;
  width: min(1380px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 20px 34px 38px;
}

.topbar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 70px;
}

.brand {
  display: flex;
  grid-column: 2;
  gap: 10px;
  align-items: center;
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(0 2px 15px rgba(42, 191, 255, .4));
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 47px;
  place-items: center;
  transform: skew(-5deg);
  border: 1px solid rgba(126, 221, 255, .5);
  background: linear-gradient(145deg, rgba(54, 188, 255, .22), rgba(5, 23, 40, .8));
  clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
}
.brand-mark svg { width: 23px; fill: var(--blue); filter: drop-shadow(0 0 7px var(--blue)); }
.brand b {
  display: block;
  font: 900 23px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 2.8px;
}
.brand small {
  color: #75b8d6;
  font: 700 8px/1 Inter, sans-serif;
  letter-spacing: 4px;
}

.power-pill {
  display: flex;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  min-width: 146px;
  padding: 7px 12px 7px 7px;
  border: 1px solid rgba(104, 199, 246, .3);
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(10, 30, 50, .82), rgba(4, 12, 24, .82));
  box-shadow: inset 0 0 20px rgba(49, 159, 232, .08), 0 10px 30px rgba(0, 0, 0, .24);
}
.power-icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  place-items: center;
  border: 1px solid rgba(81, 211, 255, .38);
  border-radius: 4px;
  background: rgba(47, 174, 241, .12);
}
.power-icon svg { width: 18px; fill: var(--blue); filter: drop-shadow(0 0 8px var(--blue)); }
.power-pill small {
  display: block;
  color: #7797a9;
  font: 700 8px/1 Inter, sans-serif;
  letter-spacing: 1.3px;
}
#userLabel { max-width: 135px; overflow: hidden; letter-spacing: .35px; text-overflow: ellipsis; white-space: nowrap; }
.power-pill b {
  display: block;
  margin-top: 3px;
  font: 800 20px/1 "Barlow Condensed", sans-serif;
}
.power-pill.empty { border-color: rgba(255, 94, 94, .32); }
.power-pill.empty .power-icon svg { fill: #71808c; filter: none; }

.back-button {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  width: 48px;
  height: 48px;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(130, 210, 252, .3);
  border-radius: 50%;
  background: rgba(5, 16, 29, .72);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  transition: .25s ease;
}
.back-button svg {
  width: 25px;
  fill: none;
  stroke: #d9f7ff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.back-button:hover { border-color: var(--blue); transform: translateX(-3px); box-shadow: 0 0 20px rgba(58, 193, 255, .25); }
.hidden { visibility: hidden; pointer-events: none; opacity: 0; }

.screen { display: none; }
.screen.active { display: block; animation: screenIn .55s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } }

.selection-heading,
.opening-heading {
  position: relative;
  z-index: 5;
  text-align: center;
}

.selection-heading { margin: 26px auto 16px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #82cce9;
  font: 700 10px/1 Inter, sans-serif;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.eyebrow i { width: 35px; height: 1px; background: linear-gradient(90deg, transparent, #50c8f7); }
.eyebrow i:last-child { background: linear-gradient(90deg, #50c8f7, transparent); }
.selection-heading h1,
.opening-heading h2 {
  margin: 9px 0 5px;
  font: italic 900 clamp(38px, 4.4vw, 67px)/.93 "Barlow Condensed", sans-serif;
  letter-spacing: -1px;
  text-shadow: 0 6px 26px rgba(0, 0, 0, .8);
}
.selection-heading h1 em,
.opening-heading h2 em,
.limit-modal h2 em { color: var(--blue); font-style: normal; text-shadow: 0 0 26px rgba(52, 192, 255, .4); }
.selection-heading p,
.opening-heading p { margin: 12px 0 0; color: #9eafbd; font-size: 12px; letter-spacing: .35px; }

.chest-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 70px minmax(260px, 1fr);
  width: min(1000px, 100%);
  margin: 10px auto 0;
}

.choice-card {
  position: relative;
  display: flex;
  overflow: hidden;
  height: min(56vh, 480px);
  min-height: 390px;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(119, 200, 242, .17);
  border-radius: 8px 0 0 8px;
  outline: none;
  background:
    linear-gradient(180deg, rgba(12, 25, 39, .6), rgba(4, 9, 17, .92)),
    radial-gradient(circle at 50% 55%, rgba(255, 120, 31, .18), transparent 50%);
  box-shadow: inset 0 0 45px rgba(32, 142, 214, .04), 0 18px 55px rgba(0, 0, 0, .25);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.choice-card.casino {
  border-radius: 0 8px 8px 0;
  background:
    linear-gradient(180deg, rgba(12, 25, 39, .6), rgba(4, 9, 17, .92)),
    radial-gradient(circle at 50% 55%, rgba(148, 52, 255, .21), transparent 50%);
}
.choice-card::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .3;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(transparent, #000, transparent);
}
.choice-card:hover {
  z-index: 2;
  border-color: rgba(255, 142, 46, .62);
  transform: translateY(-7px) scale(1.015);
  box-shadow: inset 0 0 70px rgba(255, 112, 29, .08), 0 22px 70px rgba(0, 0, 0, .5), 0 0 28px rgba(255, 110, 23, .13);
}
.choice-card.casino:hover {
  border-color: rgba(175, 83, 255, .7);
  box-shadow: inset 0 0 70px rgba(145, 56, 255, .1), 0 22px 70px rgba(0, 0, 0, .5), 0 0 28px rgba(153, 63, 255, .15);
}

.card-glow {
  position: absolute;
  right: 15%;
  bottom: 4%;
  left: 15%;
  height: 26%;
  border-radius: 50%;
  background: #ff771d;
  filter: blur(60px);
  opacity: .13;
  transition: .35s;
}
.casino .card-glow { background: #a93fff; }
.choice-card:hover .card-glow { opacity: .3; transform: scale(1.2); }

.category-label {
  position: relative;
  z-index: 2;
  margin-top: 23px;
  text-align: center;
}
.category-label small { display: block; color: #7c98a7; font-size: 8px; font-weight: 700; letter-spacing: 3.5px; }
.category-label b {
  display: block;
  margin-top: 3px;
  font: italic 900 clamp(28px, 3vw, 43px)/1 "Barlow Condensed", sans-serif;
  letter-spacing: 1px;
}
.sport .category-label b { color: #ff9b47; text-shadow: 0 0 22px rgba(255, 105, 21, .38); }
.casino .category-label b { color: #d394ff; text-shadow: 0 0 22px rgba(163, 60, 255, .45); }

.choice-chest {
  position: relative;
  z-index: 2;
  display: block;
  width: min(82%, 340px);
  margin: -3px auto auto;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.choice-chest img {
  display: block;
  width: 100%;
  border-radius: 20%;
  filter: contrast(1.06) saturate(1.12);
}
.choice-card:hover .choice-chest { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 0 16px rgba(255, 121, 34, .35)); }
.choice-card.casino:hover .choice-chest { filter: drop-shadow(0 0 16px rgba(163, 66, 255, .42)); }

.choose-cta {
  position: relative;
  z-index: 3;
  display: flex;
  width: calc(100% - 48px);
  height: 46px;
  margin: -26px 24px 24px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid rgba(255, 143, 65, .3);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(89, 34, 12, .45), rgba(177, 66, 16, .62), rgba(89, 34, 12, .45));
  color: #ffc38d;
  font: 800 10px/1 Inter, sans-serif;
  letter-spacing: 2px;
  transition: .3s;
}
.casino .choose-cta { border-color: rgba(182, 95, 255, .32); background: linear-gradient(90deg, rgba(50, 18, 76, .4), rgba(100, 34, 150, .6), rgba(50, 18, 76, .4)); color: #e2baff; }
.choice-card:hover .choose-cta { border-color: currentColor; filter: brightness(1.25); }
.choose-cta b { font-size: 20px; }

.or-divider { position: relative; z-index: 4; display: grid; place-items: center; }
.or-divider::before { position: absolute; width: 1px; height: 100%; content: ""; background: linear-gradient(transparent, rgba(89, 197, 249, .22), transparent); }
.or-divider span {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(83, 195, 248, .28);
  border-radius: 50%;
  background: #07111e;
  color: #6facc8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 0 0 8px rgba(4, 10, 19, .72), 0 0 30px rgba(65, 188, 249, .12);
}

.selection-note {
  display: flex;
  margin: 14px auto 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #647b89;
  font-size: 9px;
  letter-spacing: .7px;
}
.selection-note svg { width: 15px; fill: none; stroke: #5da9ca; stroke-width: 1.4; }

/* Opening stage */
.opening-heading { margin-top: 8px; }
.opening-heading h2 { font-size: clamp(38px, 4vw, 58px); }
.opening-heading p { animation: hintPulse 1.7s ease-in-out infinite; }
@keyframes hintPulse { 50% { color: #e8fbff; text-shadow: 0 0 15px var(--blue); } }

.arena {
  position: relative;
  width: min(820px, 100%);
  height: min(50vh, 445px);
  min-height: 365px;
  margin: -8px auto 0;
}
.arena::after {
  position: absolute;
  z-index: -1;
  right: 17%;
  bottom: 3%;
  left: 17%;
  height: 30%;
  content: "";
  border-radius: 50%;
  background: rgba(42, 169, 236, .22);
  filter: blur(55px);
}

.main-chest {
  position: absolute;
  z-index: 7;
  bottom: -16px;
  left: 50%;
  width: min(420px, 67vw);
  aspect-ratio: 1;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: 0;
  background: transparent;
  transform: translateX(-50%);
}
.chest-piece { position: absolute; inset: 0; display: block; transition: transform .7s cubic-bezier(.2,.9,.2,1), opacity .45s; }
.chest-piece img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18%;
  filter: contrast(1.08) saturate(1.1);
}
.chest-bottom { clip-path: polygon(0 49%, 100% 49%, 100% 100%, 0 100%); }
.chest-lid { clip-path: polygon(0 0, 100% 0, 100% 56%, 0 56%); transform-origin: 50% 52%; }
.chest-shadow {
  position: absolute;
  right: 12%;
  bottom: 6%;
  left: 12%;
  height: 10%;
  border-radius: 50%;
  background: #000;
  filter: blur(11px);
  opacity: .95;
}

.chest-nameplate {
  position: absolute;
  z-index: 4;
  bottom: 15%;
  left: 50%;
  min-width: 118px;
  padding: 8px 14px;
  border: 1px solid #d9982c;
  border-radius: 3px;
  background: linear-gradient(#38250f, #1a120b);
  box-shadow: inset 0 0 10px rgba(255, 176, 49, .18), 0 4px 14px #000;
  color: #ffc94f;
  font: 900 15px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 2px #000;
  transform: translateX(-50%);
  transition: .4s;
}
.charge-indicator {
  position: absolute;
  z-index: 5;
  bottom: 2.5%;
  left: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(95, 211, 255, .35);
  border-radius: 50%;
  background: #071423;
  box-shadow: 0 0 20px rgba(59, 195, 255, .15);
  transform: translateX(-50%);
}
.charge-indicator svg { width: 17px; fill: none; stroke: #55cfff; stroke-width: 1.4; filter: drop-shadow(0 0 5px #3ec6ff); }
.main-chest:hover .charge-indicator { background: rgba(31, 133, 185, .35); }

.lightning {
  position: absolute;
  z-index: 10;
  top: -150px;
  width: 220px;
  height: 390px;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}
.lightning-left { left: 50%; transform: translateX(-50%); }
.lightning-right { display: none; }
.lightning path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 720; stroke-dashoffset: 720; }
.bolt-body,
.bolt-body-glow {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: top center;
}
.bolt-body { fill: url("#zeusBolt"); filter: url("#zeusGlow"); }
.bolt-body-glow { fill: #008cff; filter: blur(18px); }
.bolt-warp { transform-box: fill-box; transform-origin: top center; }
.bolt-halo { stroke: #168cff; stroke-width: 18; filter: blur(10px); }
.bolt-core { stroke: #d9f8ff; stroke-width: 4.2; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #31baff); }
.bolt-hot { stroke: #fff; stroke-width: 1.25; filter: drop-shadow(0 0 2px #fff); }
.bolt-branch {
  stroke: #dffbff;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px #24b8ff) drop-shadow(0 0 10px #158eff);
}
.bolt-tendril {
  stroke: #8cddff;
  stroke-width: 1;
  filter: drop-shadow(0 0 4px #1ba9ff);
}
.storm-origin {
  position: absolute;
  z-index: 9;
  top: -126px;
  left: 50%;
  width: 320px;
  height: 130px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(255,255,255,.95) 0 3%, rgba(98,215,255,.62) 10%, rgba(23,112,196,.25) 34%, transparent 70%);
  filter: blur(5px);
  transform: translateX(-50%) scale(.5);
}

.impact-ring {
  position: absolute;
  z-index: 9;
  top: 44%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 4px solid #bff6ff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.flash { position: fixed; z-index: 100; inset: 0; pointer-events: none; background: #d7f8ff; opacity: 0; }
.screen-crack {
  position: fixed;
  z-index: 110;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.screen-crack svg { width: 100%; height: 100%; overflow: visible; }
.crack-lines path {
  fill: none;
  stroke: #fff4cd;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #ff781a);
}
.crack-lines path:nth-child(even) { stroke-width: 1.3; }
.crack-shards path {
  fill: rgba(255, 202, 128, .09);
  stroke: rgba(255, 238, 195, .55);
  stroke-width: 1;
  opacity: 0;
}
.crack-center {
  fill: rgba(255, 246, 211, .16);
  stroke: #fff6d8;
  stroke-width: 3;
  opacity: 0;
  filter: drop-shadow(0 0 8px #ff7217);
}

body.striking .lightning { opacity: 1; }
body.striking .lightning .bolt-body,
body.striking .lightning .bolt-body-glow { animation: zeusBody 1.18s ease-out both; }
body.striking .lightning .bolt-halo,
body.striking .lightning .bolt-core,
body.striking .lightning .bolt-hot { animation: boltDraw .24s ease-out forwards, zeusFlicker .075s .24s 9 alternate; }
body.striking .lightning .bolt-branch,
body.striking .lightning .bolt-tendril { animation: boltDraw .2s .1s ease-out forwards, zeusFlicker .065s .3s 7 alternate; }
body.striking .lightning .bolt-warp { animation: electricJitter .62s .18s steps(2, jump-none) both; }
body.striking .lightning .branch-b,
body.striking .lightning .branch-d { animation-delay: .14s, .26s; }
body.striking .lightning .branch-c,
body.striking .lightning .branch-f { animation-delay: .18s, .3s; }
body.striking .storm-origin { animation: stormBirth .58s ease-out both; }
body.striking .impact-ring { animation: impact .72s .22s ease-out both; }
body.striking .flash { animation: flash .62s .16s ease-out both; }
body.striking .screen-crack { animation: crackLayer 1.18s .2s ease-out both; }
body.striking .crack-lines path { animation: crackDraw .27s .22s cubic-bezier(.1,.7,.2,1) forwards; }
body.striking .crack-lines path:nth-child(2n) { animation-delay: .27s; }
body.striking .crack-lines path:nth-child(3n) { animation-delay: .31s; }
body.striking .crack-shards path { animation: shardFlash .78s .35s ease-out both; }
body.striking .crack-center { animation: crackCenter .72s .2s ease-out both; }
body.striking .main-chest { animation: chestHit .72s .2s ease both; }
body.striking .arena { animation: zeusShake .5s .2s ease-out both; }
body.striking .chest-piece img { filter: contrast(1.12) saturate(1.2) drop-shadow(0 0 16px #5bd8ff) drop-shadow(0 0 34px rgba(30,149,255,.8)); }
@keyframes boltDraw { to { stroke-dashoffset: 0; } }
@keyframes crackDraw { to { stroke-dashoffset: 0; } }
@keyframes crackLayer {
  0% { opacity: 0; }
  10%, 72% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes shardFlash {
  0% { opacity: 0; transform: scale(.75); transform-origin: center; }
  28% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.08); transform-origin: center; }
}
@keyframes crackCenter {
  0% { opacity: 1; r: 3px; }
  40% { opacity: 1; r: 27px; }
  100% { opacity: 0; r: 38px; }
}
@keyframes zeusFlicker { from { opacity: .22; } to { opacity: 1; } }
@keyframes electricJitter {
  0%, 100% { transform: translate(0) scaleX(1); }
  14% { transform: translate(-2px, 1px) scaleX(.98); }
  29% { transform: translate(3px, -1px) scaleX(1.03); }
  43% { transform: translate(-1px, 0) scaleX(.96); }
  57% { transform: translate(2px, 1px) scaleX(1.02); }
  72% { transform: translate(-3px, -1px) scaleX(.99); }
  86% { transform: translate(1px, 0) scaleX(1.01); }
}
@keyframes zeusBody {
  0% { opacity: 0; transform: scaleY(.05) scaleX(.5); }
  12% { opacity: 1; transform: scaleY(1) scaleX(1.18); }
  24% { opacity: .5; transform: scaleY(1) scaleX(.82); }
  34% { opacity: 1; transform: scaleY(1) scaleX(1.06); }
  48% { opacity: .6; }
  58% { opacity: 1; transform: scaleY(1) scaleX(.94); }
  72% { opacity: .72; }
  82% { opacity: .9; }
  100% { opacity: 0; transform: scaleY(1) scaleX(.72); }
}
@keyframes stormBirth {
  0% { opacity: 0; transform: translateX(-50%) scale(.3); }
  18% { opacity: 1; transform: translateX(-50%) scale(1.35); }
  55% { opacity: .75; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.7); }
}
@keyframes impact { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(9); } }
@keyframes flash { 0%,100% { opacity: 0; } 15% { opacity: .95; } 32% { opacity: .08; } 45% { opacity: .72; } 62% { opacity: .05; } 72% { opacity: .3; } }
@keyframes zeusShake {
  0%, 100% { transform: translate(0); }
  18% { transform: translate(-7px, 4px); }
  32% { transform: translate(8px, -4px); }
  46% { transform: translate(-5px, 2px); }
  62% { transform: translate(4px, -2px); }
  78% { transform: translate(-2px, 1px); }
}
@keyframes chestHit {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(calc(-50% - 11px)) rotate(-2deg) scale(1.02); }
  48% { transform: translateX(calc(-50% + 10px)) rotate(2deg); }
  70% { transform: translateX(calc(-50% - 4px)) rotate(-.5deg); }
}

body.opened .chest-lid { transform: translateY(-25%) rotateX(35deg) scale(1.03); opacity: .92; }
body.opened .chest-nameplate,
body.opened .charge-indicator { opacity: 0; transform: translateX(-50%) translateY(10px); }
body.opened .opening-heading { opacity: .35; transition: .5s; }
body.opened .arena::after { background: rgba(88, 209, 255, .48); }

.reward-modal-backdrop {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  visibility: hidden;
  background: rgba(1, 5, 12, 0);
  backdrop-filter: blur(0);
  opacity: 0;
  pointer-events: none;
  transition: visibility .45s, opacity .45s, background .45s, backdrop-filter .45s;
}
body.opened .reward-modal-backdrop {
  visibility: visible;
  background: rgba(1, 5, 12, .76);
  backdrop-filter: blur(7px);
  opacity: 1;
  pointer-events: auto;
}
.reward-modal-card {
  position: relative;
  display: flex;
  overflow: hidden;
  width: min(420px, 100%);
  min-height: 430px;
  padding: 45px 38px 34px;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(91, 213, 255, .55);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 26%, rgba(35, 169, 226, .2), transparent 36%),
    linear-gradient(155deg, #0c2031 0%, #07121f 48%, #030914 100%);
  box-shadow: 0 35px 110px #000, inset 0 0 55px rgba(63, 194, 255, .08), 0 0 45px rgba(40, 184, 255, .18);
  opacity: 0;
  transform: translateY(25px) scale(.82);
}
body.opened .reward-modal-card { animation: rewardModalIn .62s .12s cubic-bezier(.17,.89,.32,1.2) forwards; }
@keyframes rewardModalIn { to { opacity: 1; transform: translateY(0) scale(1); } }

.reward-rays {
  position: absolute;
  top: -150px;
  left: 50%;
  width: 520px;
  height: 520px;
  background: repeating-conic-gradient(from 0deg, rgba(93, 218, 255, .16) 0 5deg, transparent 5deg 16deg);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: raySpin 12s linear infinite;
  pointer-events: none;
}
@keyframes raySpin { to { transform: translateX(-50%) rotate(360deg); } }
.reward-badge {
  position: relative;
  padding: 5px 12px;
  border: 1px solid rgba(104, 224, 255, .55);
  border-radius: 20px;
  background: rgba(16, 89, 125, .45);
  color: #c9f7ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2.3px;
}
.reward-icon {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  margin: 18px 0 10px;
  place-items: center;
  border: 2px solid #8ee9ff;
  border-radius: 50%;
  background: radial-gradient(circle, #2ea8d7, #07243a);
  box-shadow: 0 0 12px #b9f5ff, 0 0 45px #20baff;
  font: 900 39px/1 "Barlow Condensed", sans-serif;
}
.reward-modal-card strong {
  position: relative;
  font: italic 900 57px/.9 "Barlow Condensed", sans-serif;
  text-shadow: 0 0 25px #2bbdff, 0 4px 8px #000;
}
.reward-label { position: relative; margin-top: 9px; color: #8fdcf8; font: 800 11px/1 Inter, sans-serif; letter-spacing: 4px; }
.reward-divider { width: 100%; height: 1px; margin: 25px 0 18px; background: linear-gradient(90deg, transparent, rgba(95, 207, 255, .35), transparent); }
.reward-modal-card p { position: relative; margin: 0 0 17px; color: #8da9b7; font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.casino-mode .reward-icon {
  border-color: #daa7ff;
  background: radial-gradient(circle, #9146c5, #251036);
  box-shadow: 0 0 12px #e2b9ff, 0 0 45px #9b43ea;
}
.casino-mode .reward-modal-card strong { text-shadow: 0 0 25px #a34dea, 0 4px 8px #000; }
.casino-mode .reward-rays { background: repeating-conic-gradient(from 0deg, rgba(183, 100, 255, .25) 0 5deg, transparent 5deg 15deg); }

.tap-zone,
.continue-button {
  position: relative;
  z-index: 15;
  display: flex;
  width: min(360px, 92%);
  min-height: 56px;
  margin: -2px auto 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(75, 199, 255, .5);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(9, 48, 74, .8), rgba(20, 111, 154, .92), rgba(9, 48, 74, .8));
  box-shadow: inset 0 0 18px rgba(72, 211, 255, .12), 0 0 25px rgba(38, 172, 236, .14);
}
.tap-lightning { display: grid; width: 38px; height: 38px; margin-right: 14px; place-items: center; border-right: 1px solid rgba(128, 219, 255, .25); }
.tap-lightning svg { width: 17px; fill: #7cddff; filter: drop-shadow(0 0 7px #42c8ff); }
.tap-zone b, .tap-zone small { display: block; text-align: left; }
.tap-zone b { font: 800 13px/1.2 Inter, sans-serif; letter-spacing: 2.2px; }
.tap-zone small { margin-top: 4px; color: #75a9c1; font-size: 7px; font-weight: 700; letter-spacing: 1.4px; }
.tap-zone:hover { border-color: #b8efff; filter: brightness(1.2); }
body.striking .tap-zone { pointer-events: none; opacity: .4; }
body.opened .tap-zone { display: none; }

.continue-button {
  display: none;
  flex-direction: column;
  border-color: rgba(87, 222, 255, .62);
  background: linear-gradient(100deg, #0a5372, #148fb8, #0a5372);
}
.reward-modal-card .continue-button { width: 100%; margin: 0; }
.continue-button span { color: #b8edfb; font-size: 7px; font-weight: 700; letter-spacing: 1.6px; }
.continue-button b { margin-top: 3px; font: 900 16px/1 "Barlow Condensed", sans-serif; letter-spacing: 1.5px; }
.continue-button i { margin-left: 12px; font-style: normal; }
.continue-button:hover { filter: brightness(1.18); box-shadow: 0 0 35px rgba(46, 198, 255, .3); }
body.opened .continue-button { display: flex; animation: continueIn .45s .55s both; }
@keyframes continueIn { from { opacity: 0; transform: translateY(12px); } }

.access-modal-backdrop {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  visibility: hidden;
  background: rgba(3, 1, 0, .92);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: .35s;
}
body.username-required .access-modal-backdrop { visibility: visible; opacity: 1; pointer-events: auto; }
.access-modal {
  width: min(450px, 100%);
  padding: 34px;
  border: 1px solid rgba(255, 151, 48, .5);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 15%, rgba(255, 92, 14, .18), transparent 34%), linear-gradient(155deg, #301409, #120806 60%, #070403);
  box-shadow: 0 35px 100px #000, inset 0 0 45px rgba(255, 102, 21, .07);
  text-align: center;
}
.access-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  place-items: center;
  border: 1px solid #ff9a39;
  border-radius: 50%;
  background: rgba(255, 92, 12, .13);
  box-shadow: 0 0 25px rgba(255, 84, 8, .22);
  color: #ffc16d;
  font: 900 30px/1 "Barlow Condensed", sans-serif;
}
.access-modal h2 { margin: 10px 0; font: italic 900 38px/.92 "Barlow Condensed", sans-serif; }
.access-modal h2 em { color: #ff8b2b; font-style: normal; }
.access-modal p { margin: 14px auto; color: #a99183; font-size: 11px; line-height: 1.6; }
.access-modal code { display: block; margin-bottom: 22px; color: #ffd39a; font: 700 13px/1.4 monospace; }
.access-modal button {
  width: min(285px, 100%);
  height: 52px;
  cursor: pointer;
  border: 1px solid #ff9f3d;
  border-radius: 4px;
  background: linear-gradient(90deg, #6b260b, #bd4d13, #6b260b);
  color: #fff;
  font: 800 12px/1 Inter, sans-serif;
  letter-spacing: 2px;
}
.access-modal button span { margin-left: 24px; font-size: 18px; }

.particle-layer {
  position: fixed;
  z-index: 150;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.particle-layer i {
  position: absolute;
  top: 51%;
  left: 50%;
  width: 5px;
  height: 13px;
  border-radius: 2px;
  background: var(--color);
  box-shadow: 0 0 8px var(--color);
  opacity: 0;
  animation: particleBurst 1.35s var(--delay) cubic-bezier(.1,.7,.2,1) forwards;
}
@keyframes particleBurst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(.8); }
}

/* Limit modal */
.modal-backdrop {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  visibility: hidden;
  background: rgba(1, 5, 12, .35);
  backdrop-filter: blur(0);
  opacity: 0;
  transition: .45s;
}
.modal-backdrop.visible { visibility: visible; background: rgba(1, 5, 12, .82); backdrop-filter: blur(9px); opacity: 1; }
.limit-modal {
  position: relative;
  width: min(470px, 100%);
  padding: 76px 36px 37px;
  overflow: hidden;
  border: 1px solid rgba(86, 211, 255, .35);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(13, 35, 54, .98), rgba(3, 10, 20, .98)),
    #07101d;
  box-shadow: 0 30px 100px #000, inset 0 0 55px rgba(43, 172, 235, .08), 0 0 45px rgba(54, 184, 255, .12);
  text-align: center;
  transform: scale(.84) translateY(15px);
  transition: .45s cubic-bezier(.2,.8,.2,1);
}
.modal-backdrop.visible .limit-modal { transform: scale(1) translateY(0); }
.limit-modal::before, .limit-modal::after {
  position: absolute;
  top: 0;
  width: 120px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--blue));
}
.limit-modal::before { left: 0; }
.limit-modal::after { right: 0; transform: scaleX(-1); }
.modal-energy {
  position: absolute;
  top: 21px;
  left: 50%;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(78, 204, 255, .4);
  border-radius: 50%;
  background: rgba(28, 124, 172, .16);
  box-shadow: 0 0 0 8px rgba(41, 169, 227, .05), 0 0 30px rgba(48, 189, 255, .24);
  transform: translateX(-50%);
}
.modal-energy svg { width: 22px; fill: #6bdbff; filter: drop-shadow(0 0 8px #3ac5ff); }
.modal-kicker { color: #7298aa; font-size: 8px; font-weight: 800; letter-spacing: 3px; }
.limit-modal h2 { margin: 11px 0; font: italic 900 35px/.95 "Barlow Condensed", sans-serif; }
.limit-modal p { color: #869dac; font-size: 11px; }
.limit-modal button {
  width: min(285px, 100%);
  height: 53px;
  margin-top: 15px;
  cursor: pointer;
  border: 1px solid #4ec9fb;
  border-radius: 4px;
  background: linear-gradient(90deg, #0a506f, #148bb4, #0a506f);
  box-shadow: inset 0 0 16px rgba(133, 233, 255, .13), 0 0 25px rgba(35, 182, 239, .12);
  font: 800 12px/1 Inter, sans-serif;
  letter-spacing: 2px;
}
.limit-modal button span { margin-left: 25px; font-size: 19px; }
.limit-modal button:hover { filter: brightness(1.2); }

@media (max-width: 720px) {
  body::before { background-position: center top; }
  .game-shell { min-height: 100dvh; padding: 10px 10px calc(18px + env(safe-area-inset-bottom)); overflow: hidden; }
  .topbar { min-height: 56px; }
  .brand-mark { width: 30px; height: 38px; }
  .brand { gap: 7px; }
  .brand b { font-size: 17px; letter-spacing: 1.7px; }
  .brand small { font-size: 6px; letter-spacing: 2.7px; }
  .power-pill { min-width: 68px; padding: 4px 6px 4px 4px; }
  .power-icon { width: 33px; height: 33px; margin: 0; }
  .power-pill > span:last-child { display: block; margin-left: 7px; }
  .power-pill > span:last-child small { display: none; }
  .power-pill > span:last-child b { margin: 0; font-size: 18px; }
  .back-button { width: 40px; height: 40px; }
  .selection-heading { margin-top: 20px; }
  .selection-heading h1 { font-size: 39px; }
  .selection-heading p { padding: 0 20px; line-height: 1.5; }
  .chest-grid { grid-template-columns: 1fr 36px 1fr; margin-top: 20px; }
  .choice-card { height: min(43dvh, 390px); min-height: 340px; border-radius: 6px 0 0 6px; }
  .choice-card.casino { border-radius: 0 6px 6px 0; }
  .category-label { margin-top: 20px; }
  .category-label small { font-size: 6px; letter-spacing: 1.6px; }
  .category-label b { font-size: 28px; }
  .choice-chest { width: 135%; margin-left: -17%; margin-top: 17px; }
  .choose-cta { width: calc(100% - 14px); margin: -3px 7px 12px; padding: 0 5px; font-size: 7px; letter-spacing: .7px; gap: 4px; }
  .or-divider span { width: 36px; height: 36px; font-size: 6px; box-shadow: 0 0 0 5px rgba(4,10,19,.8); }
  .selection-note { padding: 0 25px; text-align: center; line-height: 1.4; }
  .opening-heading { margin-top: 12px; }
  .opening-heading h2 { font-size: clamp(36px, 11vw, 46px); }
  .opening-heading p { margin-top: 8px; }
  .arena { height: min(47dvh, 415px); min-height: 360px; margin-top: -12px; }
  .main-chest { bottom: 7px; width: min(410px, 98vw); }
  .lightning { top: -135px; width: 190px; height: 370px; }
  .lightning-left { left: 50%; }
  .reward-modal-card { min-height: 400px; padding: 36px 26px 27px; }
  .reward-modal-card strong { font-size: 49px; }
  .tap-zone { width: min(360px, 90%); min-height: 54px; margin-top: -7px; }
  .continue-button { min-height: 52px; }
  .access-modal { padding: 28px 22px; }
}

@media (max-width: 400px) {
  .brand-mark { width: 27px; height: 35px; }
  .brand b { font-size: 15px; letter-spacing: 1.3px; }
  .brand small { letter-spacing: 2px; }
  .selection-heading { margin-top: 13px; }
  .selection-heading h1 { font-size: 34px; }
  .selection-heading p { font-size: 10px; }
  .chest-grid { grid-template-columns: 1fr 30px 1fr; margin-top: 13px; }
  .choice-card { min-height: 325px; }
  .choice-chest { width: 142%; margin-left: -21%; }
  .or-divider span { width: 31px; height: 31px; }
  .opening-heading h2 { font-size: 37px; }
  .arena { height: min(46dvh, 390px); min-height: 345px; }
  .main-chest { bottom: 10px; width: min(385px, 100vw); }
  .tap-zone { width: 94%; }
  .reward-modal-backdrop { padding: 13px; }
  .reward-modal-card { min-height: 385px; padding: 31px 22px 24px; }
  .reward-icon { width: 68px; height: 68px; }
}

@media (max-height: 710px) and (min-width: 721px) {
  .game-shell { padding-top: 10px; }
  .topbar { min-height: 55px; }
  .selection-heading { margin-top: 8px; }
  .selection-heading h1 { font-size: 45px; }
  .choice-card { height: 430px; min-height: 0; }
  .opening-heading h2 { font-size: 42px; }
  .arena { height: 385px; min-height: 0; }
  .main-chest { width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Lava cave theme */
:root {
  --blue: #ff8a22;
  --blue-bright: #ffe0a3;
  --line: rgba(255, 142, 42, .28);
}

.ambient::before,
.ambient::after {
  background: linear-gradient(transparent, rgba(255, 103, 18, .85), transparent);
  box-shadow: 0 0 28px 8px rgba(255, 78, 8, .2);
}

.brand { filter: drop-shadow(0 2px 15px rgba(255, 111, 20, .42)); }
.brand-mark {
  border-color: rgba(255, 177, 74, .55);
  background: linear-gradient(145deg, rgba(255, 112, 25, .25), rgba(43, 15, 4, .88));
}
.brand-mark svg { fill: #ff9a32; filter: drop-shadow(0 0 7px #ff5a0b); }
.brand small,
.eyebrow { color: #ffc078; }
.eyebrow i { background: linear-gradient(90deg, transparent, #ff8427); }
.eyebrow i:last-child { background: linear-gradient(90deg, #ff8427, transparent); }

.power-pill,
.back-button {
  border-color: rgba(255, 157, 57, .38);
  background: linear-gradient(100deg, rgba(51, 21, 8, .88), rgba(20, 9, 5, .88));
}
.power-icon {
  border-color: rgba(255, 162, 67, .5);
  background: rgba(255, 105, 20, .14);
}
.power-icon svg { fill: #ff9a30; filter: drop-shadow(0 0 8px #ff5c0b); }
.back-button:hover { border-color: #ff9a32; box-shadow: 0 0 20px rgba(255, 105, 20, .28); }

.selection-heading h1 em,
.opening-heading h2 em,
.limit-modal h2 em {
  color: #ff912f;
  text-shadow: 0 0 26px rgba(255, 83, 8, .5);
}

.arena::after {
  right: 22%;
  bottom: 0;
  left: 22%;
  height: 20%;
  background: rgba(255, 70, 8, .28);
  filter: blur(38px);
}

.charge-indicator {
  border-color: rgba(255, 169, 69, .52);
  background: #2a1007;
  box-shadow: 0 0 20px rgba(255, 84, 10, .22);
}
.charge-indicator svg { stroke: #ffb145; filter: drop-shadow(0 0 5px #ff640e); }
.main-chest:hover .charge-indicator { background: rgba(150, 55, 13, .5); }

.bolt-body-glow { fill: #168cff; }
.bolt-halo { stroke: #168cff; }
.bolt-core {
  stroke: #d9f8ff;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #31baff);
}
.bolt-hot { stroke: #fff; }
.bolt-branch {
  stroke: #dffbff;
  filter: drop-shadow(0 0 5px #24b8ff) drop-shadow(0 0 10px #158eff);
}
.bolt-tendril { stroke: #8cddff; filter: drop-shadow(0 0 4px #1ba9ff); }
.storm-origin {
  background: radial-gradient(ellipse, rgba(255,255,255,.98) 0 3%, rgba(112,218,255,.7) 10%, rgba(35,117,210,.3) 34%, transparent 70%);
}

.tap-zone,
.continue-button {
  border-color: rgba(255, 166, 65, .62);
  background: linear-gradient(90deg, rgba(87, 28, 8, .9), rgba(193, 72, 16, .95), rgba(87, 28, 8, .9));
  box-shadow: inset 0 0 18px rgba(255, 191, 92, .14), 0 0 28px rgba(255, 73, 8, .18);
}
.tap-lightning { border-right-color: rgba(255, 191, 105, .3); }
.tap-lightning svg { fill: #ffc15f; filter: drop-shadow(0 0 7px #ff6a0a); }
.tap-zone small { color: #d39b70; }
.tap-zone:hover { border-color: #ffe0a3; }

.reward-modal-card,
.limit-modal {
  border-color: rgba(255, 151, 48, .48);
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 103, 20, .2), transparent 37%),
    linear-gradient(155deg, #32160a 0%, #180b07 50%, #090504 100%);
  box-shadow: 0 35px 110px #000, inset 0 0 55px rgba(255, 107, 30, .08), 0 0 45px rgba(255, 77, 10, .16);
}
.reward-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 158, 54, .16) 0 5deg, transparent 5deg 16deg); }
.reward-badge {
  border-color: rgba(255, 189, 102, .58);
  background: rgba(122, 48, 14, .48);
  color: #ffe0ad;
}
.reward-icon {
  border-color: #ffc268;
  background: radial-gradient(circle, #d86b20, #381306);
  box-shadow: 0 0 12px #ffd39a, 0 0 45px #ff6816;
}
.reward-modal-card strong { text-shadow: 0 0 25px #ff6b17, 0 4px 8px #000; }
.reward-label { color: #ffc078; }
.reward-divider { background: linear-gradient(90deg, transparent, rgba(255, 155, 55, .38), transparent); }

@media (max-width: 720px) {
  .main-chest { bottom: 7px; }
}
@media (max-width: 400px) {
  .main-chest { bottom: 10px; }
}