/* ============ Sky Tower game ============ */
.tower-game { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow-x: clip; }

/* ── Stage (camera viewport) ── */
.twr-stage {
  position: relative; margin: 12px 14px 0; border-radius: var(--r);
  border: 1px solid var(--line); overflow: hidden;
  height: clamp(360px, 56vh, 540px);
  background: linear-gradient(180deg, #0a1230 0%, #12203f 45%, #1a2c4d 100%);
}
.twr-stage.shake { animation: twr-shake .46s ease; }
@keyframes twr-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 4px); } 40% { transform: translate(7px, -3px); }
  60% { transform: translate(-5px, -3px); } 80% { transform: translate(5px, 3px); }
}
.twr-stage.lost { animation: twr-redflash .5s ease; }
@keyframes twr-redflash { 0%, 100% { box-shadow: none; } 30% { box-shadow: inset 0 0 90px rgba(246,70,93,.5); } }
.twr-stage.jackpot { animation: twr-goldflash 1.4s ease; }
@keyframes twr-goldflash { 0%, 100% { box-shadow: none; } 25% { box-shadow: inset 0 0 110px rgba(240,185,11,.55); } }

/* ── Parallax sky ── */
.twr-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.twr-sky::before {  /* starfield */
  content: ''; position: absolute; inset: -10%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 32% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 64% 24%, rgba(200,230,255,.85), transparent),
    radial-gradient(1px 1px at 88% 40%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 22% 46%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,.5), transparent);
  animation: twr-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes twr-twinkle { 0% { opacity: .55; } 100% { opacity: 1; } }
.twr-moon {
  position: absolute; top: 8%; right: 12%; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff 0%, #f4ecd0 45%, #d9cfa6 100%);
  box-shadow: 0 0 40px rgba(255,247,214,.5), 0 0 90px rgba(255,247,214,.25);
}
.twr-moon::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 64% 30%, rgba(180,170,140,.35) 0 8%, transparent 9%),
              radial-gradient(circle at 40% 62%, rgba(180,170,140,.3) 0 6%, transparent 7%),
              radial-gradient(circle at 70% 66%, rgba(180,170,140,.25) 0 5%, transparent 6%);
}
.twr-cloud {
  position: absolute; height: 26px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(150,180,225,.18), rgba(120,150,200,.06));
  filter: blur(2px);
}
.twr-cloud.c1 { width: 130px; top: 26%; left: -40%; animation: twr-drift 38s linear infinite; }
.twr-cloud.c2 { width: 90px;  top: 46%; left: -30%; animation: twr-drift 52s linear infinite 6s; opacity: .7; }
.twr-cloud.c3 { width: 160px; top: 64%; left: -50%; animation: twr-drift 64s linear infinite 12s; opacity: .5; }
@keyframes twr-drift { from { transform: translateX(0); } to { transform: translateX(260%); } }
.twr-city {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background:
    linear-gradient(180deg, transparent, rgba(6,12,28,.85) 70%),
    repeating-linear-gradient(90deg, #0a142e 0 18px, #0c1838 18px 22px, #0a142e 22px 46px, #0e1c40 46px 52px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
          mask-image: linear-gradient(180deg, transparent, #000 60%);
  opacity: .8;
}

/* ── World (the moving tower) ── */
.twr-world { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; will-change: transform; }

/* ── The Eiffel-style iron tower ── */
.twr-eiffel { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.twr-lattice { position: absolute; inset: 0; z-index: 1; filter: drop-shadow(0 0 7px rgba(210,160,90,.28)); }
.twr-lattice svg { width: 100%; height: 100%; display: block; }

/* cleared-floors glow rising up the tower centreline (the climbed path) */
.twr-progress {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 5px; height: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(120,255,205,.95), rgba(20,210,140,.5));
  box-shadow: 0 0 16px rgba(20,210,140,.7);
  z-index: 2; pointer-events: none;
}

/* tower base / ground plaza */
.twr-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 3;
  background: linear-gradient(180deg, rgba(40,52,80,.55), rgba(14,22,38,.88));
  border-top: 1px solid rgba(140,180,235,.3);
  display: flex; align-items: center; justify-content: center;
}
.twr-ground-lbl { font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }

/* ── Floors (iron girder platforms across the tower) ── */
.twr-ledge { position: absolute; height: 14px; z-index: 3; }
.twr-deck {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border-radius: 2px;
  background: linear-gradient(180deg, #d8b074, #936b38);
  border: 1px solid #e3bd83; border-top-color: #ffe2ab;
  box-shadow: 0 3px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition: background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.twr-deck::before {  /* railing */
  content: ''; position: absolute; left: 4px; right: 4px; top: -4px; height: 4px;
  background-image: repeating-linear-gradient(90deg, rgba(227,189,131,.7) 0 1.4px, transparent 1.4px 7px);
}
.twr-badge {
  position: absolute; top: -17px; font-size: 10px; font-weight: 800; color: #e9cfa0;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85); transition: color .2s ease;
}
.twr-ledge.left  .twr-badge { left: 2px; }
.twr-ledge.right .twr-badge { right: 2px; }

/* conquered floor */
.twr-ledge.done .twr-deck {
  background: linear-gradient(180deg, #16d98e, #07b977);
  border-color: rgba(120,255,205,.7);
  box-shadow: inset 0 0 10px rgba(255,255,255,.35), 0 0 16px rgba(14,203,129,.45);
}
.twr-ledge.done .twr-badge { color: #57f0bb; }
.twr-ledge.pop .twr-deck { animation: twr-deckpop .34s ease; transform-origin: bottom; }
@keyframes twr-deckpop { 0% { transform: scaleY(.7); } 55% { transform: scaleY(1.6); filter: brightness(1.35); } 100% { transform: scaleY(1); } }

/* the next target floor pulses */
.twr-ledge.next .twr-deck {
  background: linear-gradient(180deg, #3d5f9e, #27406e);
  border-color: rgba(120,200,255,.85);
  animation: twr-pulse 1.1s ease-in-out infinite;
}
.twr-ledge.next .twr-badge { color: #cfe6ff; }
@keyframes twr-pulse {
  0%, 100% { box-shadow: inset 0 0 6px rgba(120,200,255,.3), 0 0 6px rgba(80,170,255,.3); }
  50% { box-shadow: inset 0 0 12px rgba(120,200,255,.7), 0 0 20px rgba(80,170,255,.65); }
}
.twr-ledge.arming .twr-deck { animation: twr-arm .65s ease-in-out infinite; }
@keyframes twr-arm {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,200,80,.45); border-color: rgba(255,200,80,.6); }
  50% { box-shadow: inset 0 0 12px rgba(255,200,80,.7); }
}

/* the first floors are the safer DIGITDIFF rungs — a soft teal tint hints at the better odds */
.twr-ledge.safe:not(.done):not(.next):not(.crumble) .twr-deck { border-color: rgba(120,230,200,.4); }
.twr-ledge.safe:not(.done):not(.next) .twr-badge { color: #8fe0c4; }

/* top floor crown */
.twr-ledge.top .twr-deck { background: linear-gradient(180deg, #ffd75a, #f0b90b); border-color: #ffe89a; }
.twr-ledge.top .twr-badge { color: #ffd75a; }

/* a missed floor crumbles away */
.twr-ledge.crumble .twr-deck {
  background: linear-gradient(180deg, #b3402f, #5a1208);
  border-color: #d6604a;
  animation: twr-crumble .5s ease forwards;
}
@keyframes twr-crumble {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(26px) rotate(8deg); opacity: 0; }
}

/* ── Climber ── */
.twr-climber {
  position: absolute; left: 50%; width: 52px; height: 60px;
  transform: translateX(-50%); transform-origin: 50% 60%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(60,180,255,.45));
  z-index: 5;
}
.twr-climber svg { width: 100%; height: 100%; display: block; animation: twr-bob 2.2s ease-in-out infinite; }
@keyframes twr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.twr-climber .twr-jet { transform-origin: 50% 0%; animation: twr-flame .22s ease-in-out infinite alternate; }
@keyframes twr-flame { 0% { transform: scaleY(.7) scaleX(.9); opacity: .75; } 100% { transform: scaleY(1.15) scaleX(1.05); opacity: 1; } }
.twr-climber.hop { animation: twr-hop .5s cubic-bezier(.3,1.2,.5,1); }
@keyframes twr-hop { 0% { transform: translateX(-50%) translateY(0) scale(1); } 35% { transform: translateX(-50%) translateY(-14px) scale(1.06,.96); } 100% { transform: translateX(-50%) translateY(0) scale(1); } }
.twr-climber.falling {
  transition: bottom .9s cubic-bezier(.5,0,.9,.5) !important;
  bottom: -70px !important;
  animation: twr-tumble .9s ease-in forwards;
}
@keyframes twr-tumble { 0% { transform: translateX(-50%) rotate(0); } 100% { transform: translateX(-50%) rotate(420deg); opacity: .2; } }

/* ── Overlay readout ── */
.twr-readout {
  position: absolute; top: 10px; left: 0; right: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.twr-mult {
  font-size: clamp(30px, 8vw, 44px); font-weight: 900; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1;
  text-shadow: 0 3px 14px rgba(0,0,0,.6); transition: color .15s ease;
}
.twr-mult.win { color: var(--win); }
.twr-mult.lose { color: var(--lose); }
.twr-subline { font-size: 11px; color: #c3d2ea; letter-spacing: .3px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.twr-subline b { color: var(--win); font-variant-numeric: tabular-nums; }

/* history pills */
.twr-stage .history-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  border-top: none; padding: 8px 10px; justify-content: center;
  background: linear-gradient(0deg, rgba(8,14,30,.7), transparent);
}
.twr-pill.win  { border-color: rgba(14,203,129,.45); color: var(--win); }
.twr-pill.lose { border-color: rgba(246,70,93,.42); color: var(--lose); }

/* ── Controls ── */
.twr-controls {
  margin: 12px 14px calc(14px + env(safe-area-inset-bottom)); padding: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 12px;
}
.twr-actions { display: flex; gap: 10px; }
.twr-actions .launch-btn { flex: 1; }

.tower-game .launch-btn {
  background: linear-gradient(180deg, #3aa0ff, #1466e0); color: #fff; font-weight: 800;
  box-shadow: 0 6px 18px rgba(20,102,224,.34);
  transition: transform .07s ease, filter .15s ease, box-shadow .25s ease;
}
.tower-game .launch-btn:not(:disabled) { animation: twr-glow 2.4s ease-in-out infinite; }
.tower-game .launch-btn.cashout { background: linear-gradient(180deg, #16d98e, #07b977); color: #04130d; box-shadow: 0 6px 18px rgba(14,203,129,.34); animation: none; }
.tower-game .launch-btn.waiting { background: var(--panel-2); color: var(--muted); box-shadow: none; animation: none; }
.tower-game .launch-btn:disabled { background: var(--panel-2); color: var(--muted); box-shadow: none; animation: none; }
.tower-game .launch-btn:active:not(:disabled) { transform: scale(.985); }
@keyframes twr-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(20,102,224,.3); } 50% { box-shadow: 0 8px 28px rgba(58,160,255,.55); } }

@media (prefers-reduced-motion: reduce) {
  .twr-sky::before, .twr-cloud, .twr-climber svg, .twr-climber .twr-jet, .twr-ledge.next .twr-deck { animation: none; }
}

/* ── Mobile bottom nav ── */
@media (max-width: 879px) {
  .tower-game { padding-bottom: 74px; }
  .tower-game .mybets { display: none; }
  .tower-game.view-plays .mybets { display: block; min-height: 60vh; }
  .tower-game.view-plays .twr-stage,
  .tower-game.view-plays .twr-controls { display: none; }
}