/* ============================================================
   Greedy Cat — Game Stylesheet
   Mobile-first, viewport-scaled. Base: 375px viewport = 1rem = 100px.
   The app fills the viewport width up to --app-max-width; beyond that
   cap, the rem unit and the container both freeze so the layout keeps
   its mobile portrait proportions on large screens.
   ============================================================ */

:root {
  --app-max-width: 980px;
  /* Where the top of the bg_popup image sits, measured from the top of #app.
     Tune this to slide the red podium up/down behind the wheel area. */
  --bg-popup-top: 3.6rem;

  /* ---------------- Bet-pack object ----------------
     The .bet-pack element is a single, self-contained object (currency
     tabs + wager amount presets) pinned to the bottom of the wheel.
     Tune these four vars to move / resize the whole pack without
     touching markup or any other rules.
     - width  : how wide the pack is
     - scale  : uniform zoom multiplier (1 = default size)
     - offset-y / offset-x : nudge the whole pack relative to its
       bottom-anchor inside the wheel (positive y = down, positive x = right)
  */
  --bet-pack-width: 2.95rem;
  --bet-pack-scale: 1;
  --bet-pack-offset-y: 1.0rem;
  --bet-pack-offset-x: 0rem;

  /* Vertical position of the progress/treasure-box overlay HUD,
     measured from the top of #app. The HUD sits on its own z-layer
     above the wheel and bet-pack — change this to slide it up/down
     without affecting any other element. */
  --progress-top: 0.55rem;
}

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: min(calc(100vw / 3.75), calc(var(--app-max-width) / 3.75));
  font-family: Tahoma, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  background: #21bfff;
  color: #000;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

#app {
  width: 100%;
  max-width: var(--app-max-width);
  min-height: 100vh;
  position: relative;
  /* Layered backgrounds, painted bottom -> top:
     1. bg_main.jpg (blue tiled, repeats vertically) — bottom
     2. bg_popup.png (red podium, full width, positioned around wheel area) — above bg_main
     Both sit behind all child content automatically. */
  background-image:    url('../assets/images/bg_popup.png'), url('../assets/images/bg_main.jpg');
  background-repeat:   no-repeat,                            repeat-y;
  background-position: center var(--bg-popup-top),           center top;
  background-size:     100% auto,                            100% auto;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button {
  border: none;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar { display: none; }

.hidden { display: none !important; }

/* --- Header --- */
.header {
  position: relative;
  padding: 0.05rem 0.1rem;
  z-index: 10;
}

.header-balance {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  font-size: 0.14rem;
  color: #fff;
  font-weight: bold;
  margin-bottom: 0.04rem;
}

.header-wallet {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
}

.coin-icon {
  width: 0.2rem;
  height: 0.2rem;
}

.header-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.1rem;
  color: #fff;
}

.round-label { color: #ff2e2e; font-weight: bold; }
.timer-label { color: #fff; }

.header-actions {
  position: absolute;
  top: 0.05rem;
  right: 0.1rem;
  display: flex;
  gap: 0.06rem;
}

.btn-icon {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  color: #fff;
  font-size: 0.14rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Distinct visual when audio is off so the toggle state is obvious */
.btn-icon.muted {
  background: rgba(255,107,107,0.55);
  opacity: 0.85;
}

/* --- Wheel Area --- */
.game-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 0.05rem;
}

/* .wheel-container is an isolated stacking context for the wheel scene.
   Layers, back to front: .bg-popup (z 1) -> .wood-floor (z 2) -> #wheel-stage canvas (z 3).
   `isolation: isolate` keeps the z-indexes from leaking into the rest of the
   page (progress bar, wager buttons etc.). */
.wheel-container {
  position: relative;
  isolation: isolate;
  width: 3.75rem;
  height: 3.75rem;
}

/* Wooden plank sits above #app's background, just below the wheel disc.
   Width is ~80% of the wheel-container so it stretches almost full-width. */
.wheel-container .wood-floor {
  position: absolute;
  left: 50%;
  bottom: -1.29rem;
  transform: translateX(-50%);
  width: 3.30rem;     /* 80% of the 3.75rem wheel-container */
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 0.04rem 0.06rem rgba(0,0,0,0.35));
}

/* Phaser wheel canvas — top layer, transparent around the disc so the
   plank and podium show through. Layout lives in DEFAULT_CFG in js/wheel.js. */
#wheel-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
}
#wheel-stage canvas {
  display: block;
  cursor: pointer;
}

/* (lights now render inside the Phaser scene between disc and cat —
   tune via lampSize / lampYOffset in DEFAULT_CFG of js/wheel.js) */

/* --- Progress Section ---
   Hidden for now. To bring it back: remove `display: none` and it'll
   reappear as an absolute overlay HUD (controlled by --progress-top). */
.progress-section {
  display: none;
  position: absolute;
  top: var(--progress-top);
  left: 0;
  right: 0;
  padding: 0 0.15rem;
  z-index: 50;
  pointer-events: none; /* boxes are decorative; don't block taps below */
}

.progress-track {
  height: 0.08rem;
  background: #870816;
  border-radius: 0.04rem;
  overflow: hidden;
  margin-bottom: 0.02rem;
}

.progress-fill {
  height: 100%;
  background: #f8ffc1;
  border-radius: 0 0.03rem 0.03rem 0;
  width: 0%;
  transition: width 0.5s ease;
}

.box-list {
  display: flex;
  justify-content: space-between;
  padding: 0 0.05rem;
}

.box-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.01rem;
}

.box-item img {
  width: 0.45rem;
  height: 0.45rem;
  object-fit: contain;
}

.box-item span {
  font-size: 0.06rem;
  color: #fff;
}

/* --- History Strip --- */
.history-section {
  padding: 0 0.15rem;
  margin: 1.2rem 0 0.06rem;
}

.history-label {
  font-size: 0.08rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.03rem;
}

.history-strip {
  display: flex;
  gap: 0.06rem;
  overflow-x: auto;
  padding: 0.02rem 0;
}

.history-item {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.history-item img {
  width: 0.24rem;
  height: 0.24rem;
}

.history-item.new-result {
  /* Plays once per new win (added by JS only when entering RESULT with a
     fresh entry). Duration is ~2s so the celebration is visible but
     finite — animation runs to completion then stops on its own. */
  animation: popin 2s ease forwards;
  box-shadow: 0 0 0.06rem #f8f412;
}

@keyframes popin {
  0%   { transform: scale(0.5); opacity: 0; }
  10%  { transform: scale(1.2); opacity: 1; }
  20%  { transform: scale(1); }
  35%  { transform: scale(1.18); }
  50%  { transform: scale(1); }
  65%  { transform: scale(1.12); }
  80%  { transform: scale(1); }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Bet-pack (currency tabs + wager amount presets) ---
   One self-contained object pinned to the bottom of .wheel-container.
   Position/size via --bet-pack-* vars on :root. Internal layout is
   fixed; outside controls just shift or scale the whole pack. */
.bet-pack {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--bet-pack-width);
  /* Anchored bottom-center; --bet-pack-offset-* nudges the whole pack. */
  transform:
    translate(calc(-50% + var(--bet-pack-offset-x)), var(--bet-pack-offset-y))
    scale(var(--bet-pack-scale));
  transform-origin: center bottom;
  z-index: 4; /* above wheel canvas (z 3) and wood-floor (z 2) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.currency-tabs {
  display: flex;
  justify-content: center;
  gap: 0.04rem;
  padding: 0 0.05rem;
  margin-bottom: -0.02rem; /* tabs sit slightly under the preset row */
  z-index: 1;
}

.currency-tab {
  width: 0.36rem;
  height: 0.28rem;
  background: rgba(0,0,0,0.35);
  border-radius: 0.08rem 0.08rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: background 0.15s, opacity 0.15s, transform 0.15s;
}

.currency-tab img {
  width: 0.2rem;
  height: 0.2rem;
  object-fit: contain;
  pointer-events: none;
}

.currency-tab.active {
  background: #ffe991;
  opacity: 1;
  transform: translateY(-0.01rem);
  box-shadow: 0 -0.02rem 0.04rem rgba(0,0,0,0.15);
}

.currency-tab.locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.wager-presets {
  display: flex;
  justify-content: space-between;
  gap: 0.05rem;
  background: rgba(0,0,0,0.15);
  border-radius: 0.1rem;
  padding: 0.04rem;
}

.wager-btn {
  flex: 1;
  height: 0.40rem;
  background: #ffe991;
  border-radius: 0.07rem;
  font-size: 0.085rem;
  font-weight: bold;
  color: #000;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.015rem;
  padding: 0.015rem;
}

.wager-icon {
  width: 0.18rem;
  height: 0.18rem;
  object-fit: contain;
}

.wager-amt {
  line-height: 1;
}

.wager-btn:active {
  background: #ffd700;
}

.wager-btn.active {
  background: #ff9900;
  color: #fff;
  box-shadow: 0 0 0.06rem rgba(255,153,0,0.5);
}

/* --- Overlays --- */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* --- Result Card --- */
.result-card {
  background: #35c7ff;
  border-radius: 0.15rem;
  padding: 0.25rem 0.3rem;
  text-align: center;
  width: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  animation: slideup 0.3s ease;
}

@keyframes slideup {
  from { transform: translateY(0.3rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.result-item-icon {
  width: 0.6rem;
  height: 0.6rem;
}

.result-outcome {
  font-size: 0.16rem;
  font-weight: bold;
}

.result-outcome.win { color: #ffe991; }
.result-outcome.lose { color: #ff6b6b; }

.result-amount {
  font-size: 0.12rem;
  color: #fff;
}

.result-balance {
  font-size: 0.11rem;
  color: rgba(255,255,255,0.8);
}

.confirm-btn {
  background: #95e2ff;
  color: #007baa;
  font-size: 0.12rem;
  font-weight: bold;
  padding: 0.08rem 0.5rem;
  border-radius: 0.14rem;
}

/* --- Leaderboard Card --- */
.leaderboard-card {
  background: #35c7ff;
  border-radius: 0.15rem;
  padding: 0.15rem;
  width: 3rem;
  max-height: 4rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideup 0.3s ease;
}

.lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.1rem;
}

.lb-title {
  font-size: 0.16rem;
  font-weight: bold;
  color: #000;
}

.close-btn {
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 0.14rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-top-two {
  display: flex;
  justify-content: center;
  gap: 0.15rem;
  margin-bottom: 0.1rem;
}

.lb-king {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.03rem;
}

.lb-king-avatar {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #95e2ff;
}

.lb-king-name {
  font-size: 0.1rem;
  color: #fff;
  max-width: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-king-points {
  font-size: 0.09rem;
  color: #ffe991;
  background: rgba(0,0,0,0.2);
  padding: 0.02rem 0.08rem;
  border-radius: 0.1rem;
}

.lb-list {
  overflow-y: auto;
  max-height: 2rem;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  background: #2fbef4;
  border-radius: 0.1rem;
  padding: 0.06rem 0.1rem;
  margin-bottom: 0.04rem;
  color: #fff;
  font-size: 0.1rem;
}

.lb-row-rank {
  width: 0.15rem;
  font-weight: bold;
}

.lb-row-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-row-points {
  color: #ffe991;
  font-weight: bold;
}

/* --- Rules Card --- */
.rules-card {
  background: #35c7ff;
  border-radius: 0.15rem;
  padding: 0.15rem;
  width: 3rem;
  max-height: 5rem;
  display: flex;
  flex-direction: column;
  animation: slideup 0.3s ease;
}

.rules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.1rem;
}

.rules-title {
  font-size: 0.16rem;
  font-weight: bold;
  color: #000;
}

.rules-content {
  overflow-y: auto;
  font-size: 0.1rem;
  color: #fff;
  max-height: 4rem;
}

.rules-content h3 {
  margin: 0.1rem 0 0.04rem;
  color: #ffe991;
  font-size: 0.12rem;
}

.rules-content p {
  line-height: 1.5;
  margin-bottom: 0.04rem;
}

.rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.09rem;
  margin: 0.04rem 0;
}

.rules-table th,
.rules-table td {
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.04rem 0.08rem;
  text-align: center;
}

.rules-table th {
  background: rgba(0,0,0,0.2);
  color: #ffe991;
}

/* --- Result drawer (bottom slide-up shown during RESULT state) --- */
.result-drawer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 110%);
  width: 100%;
  max-width: var(--app-max-width);
  background: linear-gradient(180deg, #35c7ff 0%, #21bfff 100%);
  border-radius: 0.2rem 0.2rem 0 0;
  padding: 0.15rem 0.2rem 0.2rem;
  box-shadow: 0 -0.04rem 0.2rem rgba(0,0,0,0.3);
  z-index: 150;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.result-drawer.open {
  transform: translate(-50%, 0);
}

.result-drawer-inner {
  display: flex;
  align-items: center;
  gap: 0.12rem;
}

.result-drawer-icon {
  width: 0.5rem;
  height: 0.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.result-drawer-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}

.result-drawer-outcome {
  font-size: 0.16rem;
  font-weight: bold;
}

.result-drawer-outcome.win  { color: #ffe991; }
.result-drawer-outcome.lose { color: #ff6b6b; }

.result-drawer-amount {
  font-size: 0.13rem;
  color: #fff;
  font-weight: bold;
}

.result-drawer-balance {
  font-size: 0.1rem;
  color: rgba(255,255,255,0.85);
  text-align: right;
  flex-shrink: 0;
}

/* --- Session wins badge (inline with each wallet) --- */
.session-won {
  font-size: 0.09rem;
  font-weight: bold;
  color: #ffe991;
  background: rgba(255, 184, 0, 0.18);
  border: 1px solid rgba(255, 233, 145, 0.5);
  padding: 0 0.05rem;
  border-radius: 0.06rem;
  margin-left: 0.04rem;
  line-height: 1.3;
  white-space: nowrap;
}
.session-won.hidden { display: none; }

/* --- Win celebration popup (centered, auto-dismisses) --- */
.win-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.win-popup.show {
  opacity: 1;
  visibility: visible;
}

.win-popup-card {
  position: relative;
  background: linear-gradient(180deg, #ffd24d 0%, #ff8a00 100%);
  border: 2px solid #ffe991;
  border-radius: 0.2rem;
  padding: 0.7rem 0.32rem 0.22rem;   /* extra top padding to make room for the cat */
  box-shadow:
    0 0 0 4px rgba(255, 233, 145, 0.25),
    0 0.1rem 0.3rem rgba(0, 0, 0, 0.45);
  text-align: center;
  transform: scale(0.4);
  transition: transform 0.35s cubic-bezier(0.18, 1.4, 0.45, 1);
  /* Re-enable clicks inside the card (the .win-popup backdrop sets
     pointer-events: none so it never blocks the game underneath). */
  pointer-events: auto;
}

.win-popup-close {
  position: absolute;
  top: 0.06rem;
  right: 0.06rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  border: 2px solid #ffe991;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.2rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
}
.win-popup-close:hover { background: rgba(0, 0, 0, 0.55); }
.win-popup-close:active { transform: scale(0.92); }

.win-popup-cat {
  position: absolute;
  left: 50%;
  top: 0;
  /* Display at the image's natural pixel size (no width/height forced). */
  width: auto;
  height: auto;
  transform: translate(-50%, -55%);
  pointer-events: none;
  filter: drop-shadow(0 0.04rem 0.08rem rgba(0, 0, 0, 0.45));
}
.win-popup.show .win-popup-cat {
  animation: cat-bounce 0.9s ease-in-out 0.35s infinite;
}

@keyframes cat-bounce {
  0%, 100% { transform: translate(-50%, -55%) rotate(-3deg); }
  50%      { transform: translate(-50%, -62%) rotate(3deg);  }
}
.win-popup.show .win-popup-card {
  transform: scale(1);
  animation: winpulse 0.6s ease-out 0.35s 1;
}

@keyframes winpulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.win-popup-title {
  font-size: 0.22rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.02rem;
  text-shadow: 0 2px 0 #c84e00, 0 0 0.1rem rgba(255, 255, 200, 0.7);
  margin-bottom: 0.08rem;
}

.win-popup-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  font-size: 0.3rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 #c84e00;
}

.win-popup-icon {
  width: 0.36rem;
  height: 0.36rem;
}

.win-popup-sub {
  margin-top: 0.08rem;
  font-size: 0.1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
}

/* Toast notification */
.toast {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 0.08rem 0.2rem;
  border-radius: 0.2rem;
  font-size: 0.12rem;
  z-index: 200;
  animation: toastin 0.3s ease, toastout 0.3s ease 1.7s forwards;
}

@keyframes toastin {
  from { opacity: 0; transform: translateX(-50%) translateY(-0.2rem); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastout {
  from { opacity: 1; }
  to { opacity: 0; }
}