* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  color: #2b2118;
  background:
    radial-gradient(
      circle at 15% 8%,
      rgba(255, 248, 170, 0.95) 0,
      rgba(255, 248, 170, 0.55) 12%,
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 10%,
      rgba(255, 232, 110, 0.9) 0,
      rgba(255, 232, 110, 0.4) 14%,
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 78%,
      rgba(255, 244, 180, 0.7) 0,
      rgba(255, 244, 180, 0.18) 18%,
      transparent 36%
    ),
    linear-gradient(
      to bottom,
      #fffce8 0%,
      #fff4ab 24%,
      #f2de8f 55%,
      #e8d39c 100%
    );
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.38) 0 1.2px,
      transparent 2.4px
    ),
    radial-gradient(
      circle at 28% 72%,
      rgba(255, 255, 255, 0.22) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 76% 26%,
      rgba(255, 255, 255, 0.28) 0 1.2px,
      transparent 2.4px
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(255, 255, 255, 0.18) 0 1px,
      transparent 2px
    );
  background-size:
    120px 120px,
    170px 170px,
    145px 145px,
    210px 210px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  background:
    radial-gradient(
      circle at 88% 12%,
      #fff8cf 0 22px,
      #ffe97b 23px 42px,
      #f3cf45 43px 52px,
      transparent 53px
    ),
    conic-gradient(
      from 0deg at 88% 12%,
      transparent 0 8deg,
      rgba(255, 255, 255, 0.55) 8deg 10deg,
      transparent 10deg 50deg,
      rgba(255, 255, 255, 0.55) 50deg 52deg,
      transparent 52deg 92deg,
      rgba(255, 255, 255, 0.55) 92deg 94deg,
      transparent 94deg 134deg,
      rgba(255, 255, 255, 0.55) 134deg 136deg,
      transparent 136deg 176deg,
      rgba(255, 255, 255, 0.55) 176deg 178deg,
      transparent 178deg 218deg,
      rgba(255, 255, 255, 0.55) 218deg 220deg,
      transparent 220deg 260deg,
      rgba(255, 255, 255, 0.55) 260deg 262deg,
      transparent 262deg 302deg,
      rgba(255, 255, 255, 0.55) 302deg 304deg,
      transparent 304deg 360deg
    ),
    radial-gradient(
      circle at 10% 90%,
      #fff8cf 0 18px,
      #ffe97b 19px 36px,
      #f3cf45 37px 45px,
      transparent 46px
    ),
    conic-gradient(
      from 0deg at 10% 90%,
      transparent 0 8deg,
      rgba(255, 255, 255, 0.48) 8deg 10deg,
      transparent 10deg 50deg,
      rgba(255, 255, 255, 0.48) 50deg 52deg,
      transparent 52deg 92deg,
      rgba(255, 255, 255, 0.48) 92deg 94deg,
      transparent 94deg 134deg,
      rgba(255, 255, 255, 0.48) 134deg 136deg,
      transparent 136deg 176deg,
      rgba(255, 255, 255, 0.48) 176deg 178deg,
      transparent 178deg 218deg,
      rgba(255, 255, 255, 0.48) 218deg 220deg,
      transparent 220deg 260deg,
      rgba(255, 255, 255, 0.48) 260deg 262deg,
      transparent 262deg 302deg,
      rgba(255, 255, 255, 0.48) 302deg 304deg,
      transparent 304deg 360deg
    );
  filter: none;
}

.scene-panel,
.card,
.topbar {
  background: rgba(255, 250, 240, 0.9);
}

.game-shell::before,
.game-shell::after {
  content: "";
  position: fixed;
  width: 180px;
  height: 180px;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  opacity: 0.2;
  background:
    radial-gradient(
      circle,
      rgba(255, 248, 210, 0.95) 0 26%,
      rgba(255, 232, 120, 0.95) 27% 58%,
      rgba(255, 214, 70, 0.95) 59% 70%,
      transparent 71%
    ),
    conic-gradient(
      from 0deg,
      transparent 0 8deg,
      rgba(255, 255, 255, 0.55) 8deg 10deg,
      transparent 10deg 50deg,
      rgba(255, 255, 255, 0.55) 50deg 52deg,
      transparent 52deg 92deg,
      rgba(255, 255, 255, 0.55) 92deg 94deg,
      transparent 94deg 134deg,
      rgba(255, 255, 255, 0.55) 134deg 136deg,
      transparent 136deg 176deg,
      rgba(255, 255, 255, 0.55) 176deg 178deg,
      transparent 178deg 218deg,
      rgba(255, 255, 255, 0.55) 218deg 220deg,
      transparent 220deg 260deg,
      rgba(255, 255, 255, 0.55) 260deg 262deg,
      transparent 262deg 302deg,
      rgba(255, 255, 255, 0.55) 302deg 304deg,
      transparent 304deg 360deg
    );
  filter: blur(0.3px);
}

.game-shell::before {
  top: 18px;
  right: 22px;
}

.game-shell::after {
  bottom: 18px;
  left: 18px;
  width: 150px;
  height: 150px;
  opacity: 0.14;
}

.game-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.topbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: rgba(255, 249, 239, 0.88);
  border: 2px solid #d8c39c;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(111, 69, 35, 0.08);
}

.scene-panel,
.card {
  background: rgba(255, 252, 240, 0.96);
}

h1 {
  margin: 0 0 6px;
  font-size: 2rem;
  line-height: 1.02;
  letter-spacing: 0.02em;
}

.subtitle {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.35;
  color: #5f4a38;
}

#goalSummary {
  font-size: 1rem;
  line-height: 1.4;
  color: #6a4a2a;
  margin-top: 8px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  .stats {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
}

.stat-box {
  background: linear-gradient(to bottom, #fffdf8, #fff4dd);
  border: 2px solid #d8c39c;
  border-radius: 16px;
  padding: 12px 16px;
  min-width: 120px;
  box-shadow: 0 4px 10px rgba(111, 69, 35, 0.05);
}

.stat-box span {
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}

.stat-box strong {
  font-size: 1.8rem;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.scene-panel,
.card {
  background: rgba(255, 252, 240, 0.96);
  border: 2px solid #d8c39c;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(111, 69, 35, 0.08);
}

.kitchen {
  position: relative;
  height: 320px;
  background: linear-gradient(to bottom, #f9edd8 0 50%, #d7b185 50% 100%);
  overflow: hidden;
}

.wall-decor {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: 72px;
  border: 5px solid #b68147;
  border-radius: 16px;
  background: linear-gradient(to bottom, #fff6c9, #f8e6a1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.95rem;
  text-align: center;
  padding: 6px 10px;
  box-shadow: 0 6px 14px rgba(111, 69, 35, 0.12);
}

.passer-lane {
  position: absolute;
  left: 0;
  top: 118px;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.passer {
  position: absolute;
  top: 10px;
  width: 60px;
  height: 110px;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
}

.passer-lane::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 18px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.05) 12%,
    rgba(0, 0, 0, 0.05) 88%,
    rgba(0, 0, 0, 0)
  );
  filter: blur(4px);
}

.passer .head {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 auto 4px;

  background: radial-gradient(
    circle at 35% 30%,
    #c58a61 0%,
    #a56d46 55%,
    #6a432b 100%
  );

  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    0 2px 3px rgba(0, 0, 0, 0.15);
}

.passer .body {
  width: 44px;
  height: 60px;
  margin: 0 auto;
  border-radius: 14px;

  background: linear-gradient(to bottom, #7fa6d6, #5a7fa8 60%, #3f5f82);

  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -6px 10px rgba(0, 0, 0, 0.25),
    0 4px 6px rgba(0, 0, 0, 0.15);
}

.passer.double-take {
  transform: rotate(-10deg) scale(1.08);
}

.passer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 30px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  filter: blur(2px);
}
.passer.sheriff {
  cursor: pointer;
}

.passer.sheriff:active {
  transform: scale(0.96);
}

.passer.sheriff .head {
  position: relative;
}

.passer.sheriff .body {
  position: relative;
  background: linear-gradient(to bottom, #9d84ea 0%, #6e4fc4 58%, #4b3396 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.22),
    inset 0 -8px 12px rgba(0, 0, 0, 0.26),
    0 4px 8px rgba(0, 0, 0, 0.18);
}

/* Bigger sheriff badge */
.passer.sheriff .body::after {
  content: "★";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  line-height: 1;
  color: #ffd54a;
  text-shadow:
    0 0 4px rgba(255, 215, 0, 0.45),
    0 1px 1px rgba(80, 50, 0, 0.35);
}

/* More pronounced hat brim */
.passer.sheriff .head::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 9px;
  background: linear-gradient(to bottom, #7b4d2d, #5c341d);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* More pronounced hat crown */
.passer.sheriff .head::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 16px;
  background: linear-gradient(to bottom, #7b4d2d, #5c341d);
  border-radius: 45% 45% 22% 22%;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18);
}

.floating-points {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffd54a;
  text-shadow:
    0 1px 0 rgba(90, 50, 0, 0.55),
    0 0 8px rgba(255, 215, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  animation: floatPoints 0.9s ease-out forwards;
}

@keyframes floatPoints {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.75);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -34px) scale(1.08);
  }
}

.sheriff-tap-target {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 180px;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  pointer-events: auto;
  appearance: none;
}

.sheriff-tap-target:focus {
  outline: none;
}

.table-wrap {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.cake-case {
  position: absolute;
  left: 50%;
  bottom: 98px;
  width: 120px;
  height: 80px;
  border-radius: 50% / 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.25s ease;
  transform: translateX(-50%);
  z-index: 2;
}

.cake-case::before {
  content: "";
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
}

.cake {
  width: 140px;
  height: 90px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-4px);
}
.cake.level-0 {
  background-image: url("assets/cake-0.png");
  transform: translateY(-6px) scale(1);
}

.cake.level-1 {
  background-image: url("assets/cake-1.png");
  transform: translateY(-6px) scale(1.05);
}
.cake.level-2 {
  background-image: url("assets/cake-2.png");
  transform: translateY(-6px) scale(1.1);
}

.cake.level-3 {
  background-image: url("assets/cake-3.png");
  transform: translateY(-6px) scale(1.15);
}

/* case levels */
.cake-case.level-0 {
  background: transparent;
  box-shadow: none;
}

.cake-case.level-1 {
  width: 130px;
  height: 80px;
  background: radial-gradient(
    ellipse at center,
    #f3eee5 0%,
    #e3d7c6 55%,
    #d0bfa8 100%
  );
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.08),
    0 6px 10px rgba(0, 0, 0, 0.12);
  transform: translateX(-50%);
}

.cake-case.level-2 {
  width: 130px;
  height: 85px;
  background: radial-gradient(
    ellipse at 50% 35%,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0.08) 70%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 3px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  box-shadow:
    inset 0 -10px 20px rgba(0, 0, 0, 0.12),
    0 10px 18px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}

.cake-case.level-3 {
  width: 140px;
  height: 90px;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.1) 70%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 4px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  box-shadow:
    inset 0 -12px 24px rgba(0, 0, 0, 0.14),
    0 12px 22px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
}

.cake-case.level-2::after,
.cake-case.level-3::after {
  content: "";
  position: absolute;

  top: 12px;
  left: 20px;

  width: 40px;
  height: 18px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);

  filter: blur(1px);
}

.cake-case.level-3::before {
  content: "✦";
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.cake-case.shine {
  animation: shine 0.4s ease;
}

@keyframes shine {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

.upgrade-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  padding: 16px;
}

.card h2 {
  margin-top: 0;
  font-size: 1.9rem;
}

.upgrade-group {
  margin-bottom: 22px;
}

.upgrade-group h3 {
  font-size: 1.25rem;
  margin: 0 0 10px;
}

.upgrade-btn {
  display: inline-block;
  width: 100%;
  margin-bottom: 8px;
  padding: 14px 12px;
  font-size: 1.02rem;
  font-weight: 700;
  border: 2px solid #c6ab72;
  border-radius: 14px;
  background: linear-gradient(to bottom, #fffdf8, #f9edd6);
  color: #2b2118;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.upgrade-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(111, 69, 35, 0.12);
  background: linear-gradient(to bottom, #fffefb, #f6e7c3);
}

.upgrade-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.upgrade-btn.completed {
  background: linear-gradient(to bottom, #fff9d6, #ffe88a);
  border-color: #e3c24d;
  color: #6a4a00;
  text-decoration: line-through;
  position: relative;
  opacity: 0.85;
  animation: pop 0.25s ease;
}

@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* subtle shine */
.upgrade-btn.completed::before {
  content: "✔";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  color: #b88c00;
}

/* sparkle vibe */
.upgrade-btn.completed::after {
  content: "✦";
  position: absolute;
  left: 10px;
  top: 6px;
  font-size: 0.7rem;
  color: #f5d94c;
}

#buildSummary,
#chanceSummary {
  font-size: 1.15rem;
  line-height: 1.4;
}

.table-wrap::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.14);
  filter: blur(4px);
}

.table {
  position: relative;
  width: 320px;
  height: 220px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* LEVELS using your PNGs */
.table.level-0 {
  background-image: url("assets/table-0.png");
}

.table.level-1 {
  background-image: url("assets/table-1.png");
}

.table.level-2 {
  background-image: url("assets/table-2.png");
}

.table.level-3 {
  background-image: url("assets/table-3.png");
}

@media (max-width: 899px) {
  .game-shell {
    padding: 12px;
  }

  .kitchen {
    height: 290px;
  }

  .wall-decor {
    width: 140px;
    height: 58px;
    font-size: 0.85rem;
    top: 14px;
  }

  .passer-lane {
    top: 108px;
    height: 112px;
  }
  .table-wrap {
    bottom: 24px;
  }

  .table {
    width: 165px;
    height: 116px;
  }

  .cake-case {
    left: 50%;
    bottom: 70px;
    width: 96px;
    height: 30px;
    transform: translateX(-54%);
  }

  .cake-case.level-1 {
    width: 108px;
    height: 36px;
    transform: translateX(-54%);
  }

  .cake-case.level-2 {
    width: 118px;
    height: 40px;
    transform: translateX(-54%);
  }

  .cake-case.level-3 {
    width: 126px;
    height: 44px;
    transform: translateX(-54%);
  }

  .cake {
    width: 86px;
    height: 58px;
    transform: translateY(-2px);
  }

  .cake.level-0 {
    transform: translateY(-1px) scale(0.9);
  }

  .cake.level-1 {
    transform: translateY(-1px) scale(0.96);
  }

  .cake.level-2 {
    transform: translateY(-1px) scale(1);
  }

  .cake.level-3 {
    transform: translateY(-1px) scale(1.04);
  }

  .scene-status {
    font-size: 0.8rem;
    padding: 7px 9px;
  }
}

/* wider layout */
@media (min-width: 900px) {
  .topbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .layout {
    grid-template-columns: 2fr 1fr;
  }

  .kitchen {
    height: 430px;
  }
  .table {
    width: 300px;
    height: 185px;
    transform: translateY(0px);
  }

  .cake-case {
    left: calc(50% - 14px);
    bottom: 108px;
    transform: translate(-56%, 10px);
  }
  .cake-case.level-0::before {
    display: none;
  }
  .cake-case.level-1 {
    width: 190px;
    height: 56px;
    border-radius: 50% / 60%;
  }
  .cake-case.level-2 {
    width: 205px;
    height: 60px;
    border-radius: 50% / 60%;
  }
  .cake-case.level-3 {
    width: 220px;
    height: 64px;
    border-radius: 50% / 60%;
  }

  .passer-lane {
    top: 150px;
    height: 130px;
  }

  .passer {
    width: 72px;
    height: 128px;
    top: 4px;
  }

  .passer .head {
    width: 38px;
    height: 38px;
  }

  .passer .body {
    width: 50px;
    height: 70px;
  }

  .cake {
    width: 200px;
    height: 130px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-6px);
  }
  .cake.level-0 {
    transform: translateY(-2px) scale(0.9);
  }

  .cake.level-1 {
    transform: translateY(-2px) scale(1.08);
  }

  .cake.level-2 {
    transform: translateY(-2px) scale(1.08);
  }

  .cake.level-3 {
    transform: translateY(-2px) scale(1.08);
  }
}

.main-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.build-card {
  padding: 18px 20px;
}

.build-card h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.build-card p {
  margin: 0 0 12px;
}

.scene-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  padding: 8px 10px;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #6a4a2a;
  background: rgba(255, 249, 239, 0.78);
  border: 1px solid rgba(198, 171, 114, 0.45);
  border-radius: 12px;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    align-items: start;
  }
}

.scene-status {
  transition: opacity 0.2s ease;
}

.scene-status.fade {
  opacity: 0;
}
.hidden {
  display: none !important;
}

.start-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.start-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 33, 24, 0.45);
  backdrop-filter: blur(3px);
}

.start-modal-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 480px);
  background: rgba(255, 249, 239, 0.98);
  border: 2px solid #d8c39c;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(43, 33, 24, 0.25);
  text-align: center;
}

.start-lead {
  margin: 8px 0 16px;
  color: #5f4a38;
}

.start-instructions {
  text-align: left;
  margin: 0 0 20px;
  padding-left: 18px;
  line-height: 1.5;
  color: #5a3c22;
}

.start-btn {
  width: 100%;
  font-size: 1.1rem;
  padding: 14px;
}

.win-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.win-modal-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  margin: 16px auto;
  background: rgba(255, 249, 239, 0.98);
  border: 2px solid #d8c39c;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(43, 33, 24, 0.22);
  padding: 24px;
  max-height: none;
}

.win-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 33, 24, 0.45);
  backdrop-filter: blur(3px);
}

.win-modal-card h2 {
  margin: 0 0 10px;
  font-size: 2rem;
}

.win-lead {
  margin: 0 0 18px;
  font-size: 1.05rem;
  color: #5f4a38;
}

.win-score-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  margin-bottom: 16px;
  background: linear-gradient(to bottom, #fffdf8, #fff4dd);
  border: 2px solid #d8c39c;
  border-radius: 18px;
}

.win-score-box span {
  font-size: 0.95rem;
  color: #6a4a2a;
}

.win-score-box strong {
  font-size: 2.2rem;
}

.win-share-preview {
  margin: 0 0 18px;
  padding: 14px;
  background: #fff7e8;
  border: 1px solid #d8c39c;
  border-radius: 14px;
  line-height: 1.45;
  color: #5a3c22;
}

.win-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .win-modal-card {
    width: 100%;
    margin: 8px auto 24px;
    padding: 18px;
  }

  .win-modal {
    padding: 12px;
  }

  .win-actions {
    grid-template-columns: 1fr;
  }
}
.win-ad {
  margin: 16px 0;
}
.ad-container {
  margin: 20px 0 24px;
  padding: 12px;
  background: #f5e6c8;
  border-radius: 12px;
  border: 1px solid #d6b98c;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  text-align: center;
}
.ad-container .adsbygoogle {
  width: 100%;
  min-width: 250px;
  max-width: 728px;
}
.upgrade-card-shell {
  padding: 16px;
}

.upgrade-header-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.upgrade-header-row h2 {
  margin: 0;
  font-size: 1.9rem;
}

.upgrade-mini-help {
  margin: 0;
  font-size: 0.92rem;
  color: #6a4a2a;
}

.upgrade-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.compact-group {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(198, 171, 114, 0.45);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.7);
}

.upgrade-group-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.upgrade-group-top h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.upgrade-bonus-line {
  font-size: 0.82rem;
  color: #7b624c;
  white-space: nowrap;
}

.upgrade-btn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.compact-btn {
  margin: 0;
  padding: 10px 8px;
  min-height: 44px;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 12px;
}

.upgrade-btn.completed {
  text-decoration: none;
}

.upgrade-btn.completed::after {
  content: "";
}

.upgrade-btn.completed::before {
  content: "✔";
  right: 10px;
}

/* Make the build card a little tighter */
.build-card {
  padding: 16px 18px;
}

.build-card h2 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

#buildSummary,
#chanceSummary,
#goalSummary {
  font-size: 1rem;
  line-height: 1.35;
}

/* Mobile-first improvements */
@media (max-width: 899px) {
  .layout {
    display: flex;
    flex-direction: column;
  }

  .upgrade-panel {
    order: -1;
  }

  .upgrade-card-shell {
    padding: 14px;
  }

  .upgrade-header-row h2 {
    font-size: 1.5rem;
  }

  .upgrade-grid {
    gap: 10px;
  }

  .compact-group {
    padding: 10px;
    border-radius: 14px;
  }

  .upgrade-group-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 8px;
  }

  .upgrade-group-top h3 {
    font-size: 0.98rem;
  }

  .upgrade-bonus-line {
    font-size: 0.78rem;
  }

  .upgrade-btn-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .compact-btn {
    padding: 9px 6px;
    min-height: 40px;
    font-size: 0.82rem;
    border-radius: 10px;
  }

  .build-card {
    padding: 14px 16px;
  }

  .build-card h2 {
    font-size: 1.35rem;
  }
}

/* Extra-tight phones */
@media (max-width: 640px) {
  .game-shell {
    padding: 10px;
  }

  .topbar {
    padding: 14px 16px;
  }

  h1 {
    font-size: 2rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .stat-box {
    min-width: 0;
    padding: 10px 10px;
  }

  .stat-box span {
    font-size: 0.82rem;
  }

  .stat-box strong {
    font-size: 1.45rem;
  }

  .upgrade-mini-help {
    display: none;
  }

  .upgrade-group-top h3 {
    font-size: 0.92rem;
  }

  .upgrade-bonus-line {
    font-size: 0.74rem;
  }

  .compact-btn {
    font-size: 0.78rem;
    padding: 8px 4px;
  }
}