:root {
  --sg-red: #d71920;
  --sg-red-dark: #aa1016;
  --sg-red-light: #ff4047;
  --white: #ffffff;
  --off-white: #fff8f8;
  --ink: #271416;
  --muted: #75575b;
  --shadow: rgba(93, 7, 12, 0.18);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #111;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button {
  font: inherit;
}

#gameShell {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

#gameArena {
  position: relative;

  width: min(100vw, 540px);
  height: 100dvh;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(255,255,255,1) 0%,
      rgba(255,249,249,1) 48%,
      rgba(255,235,236,1) 100%
    );

  isolation: isolate;
}

#backgroundDecor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sunburst {
  position: absolute;

  width: 110vw;
  max-width: 720px;
  aspect-ratio: 1;

  top: 17%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  opacity: 0.11;

  background:
    repeating-conic-gradient(
      from -8deg,
      var(--sg-red) 0deg 10deg,
      transparent 10deg 22deg
    );
}

.bg-number {
  position: absolute;

  top: 17%;
  left: 50%;

  transform: translateX(-50%);

  font-size: clamp(150px, 49vw, 260px);
  line-height: 0.8;

  font-weight: 1000;

  color: rgba(215, 25, 32, 0.045);

  letter-spacing: -0.08em;
}

.skyline {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 18%;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;

  opacity: 0.055;

  padding: 0 8%;
}

.skyline span {
  display: block;

  flex: 1;

  max-width: 45px;

  background: var(--sg-red);

  border-radius: 6px 6px 0 0;
}

.skyline span:nth-child(1) { height: 28%; }
.skyline span:nth-child(2) { height: 58%; }
.skyline span:nth-child(3) { height: 42%; }
.skyline span:nth-child(4) { height: 76%; }
.skyline span:nth-child(5) { height: 54%; }
.skyline span:nth-child(6) { height: 83%; }
.skyline span:nth-child(7) { height: 45%; }
.skyline span:nth-child(8) { height: 64%; }

#hud {
  position: absolute;

  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;

  height: 68px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 7px 12px;

  background: rgba(255,255,255,0.91);

  border: 2px solid rgba(215,25,32,0.16);
  border-radius: 18px;

  box-shadow: 0 8px 30px rgba(110,0,7,0.10);

  backdrop-filter: blur(7px);

  z-index: 30;
}

.hudBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hudRight {
  text-align: right;
}

.hudLabel {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

#scoreDisplay,
#targetDisplay {
  color: var(--sg-red);
  font-size: 25px;
  font-weight: 1000;
  line-height: 1;
}

#titleBadge {
  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--ink);
}

#titleBadge strong {
  display: block;
  color: var(--sg-red);

  font-size: 17px;
  line-height: 1;
}

#titleBadge small {
  display: block;

  margin-top: 2px;

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.06em;

  white-space: nowrap;
}

.badgeFlag {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  color: white;
  background: var(--sg-red);

  border-radius: 50%;

  font-size: 11px;
  font-weight: 1000;
}

#fallingLayer,
#feedbackLayer {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

#fallingLayer {
  z-index: 10;
}

#feedbackLayer {
  z-index: 25;
}

.fallingItem {
  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;

  transform: translate3d(0, 0, 0);

  will-change: transform;

  pointer-events: none;
}

.fallingItem img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  user-select: none;
  pointer-events: none;

  filter:
    drop-shadow(0 5px 3px rgba(0,0,0,0.09))
    drop-shadow(0 2px 1px rgba(0,0,0,0.07));
}


#catcher {
  position: absolute;

  left: 50%;
  bottom: max(2px, env(safe-area-inset-bottom));

  width: clamp(125px, 35vw, 175px);
  aspect-ratio: 2 / 3;

  transform: translateX(-50%);

  z-index: 20;

  touch-action: none;

  will-change: left;
}

#catcherImage {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
  user-select: none;

  filter:
    drop-shadow(0 7px 5px rgba(70,0,0,0.16));
}

/*
  Invisible collision zone covering Singa's basket.

  singa.png is 1024 x 1536 and the basket occupies
  the upper part of the illustration.

  We deliberately do NOT use Singa's entire body
  as the catcher.
*/
#basketHitbox {
  position: absolute;

  left: 10%;
  top: 5%;

  width: 80%;
  height: 22%;

  pointer-events: none;
}

.feedback {
  position: absolute;

  transform: translate(-50%, -50%);

  font-size: clamp(27px, 8vw, 42px);
  font-weight: 1000;

  white-space: nowrap;

  animation: feedbackPop 650ms ease-out forwards;
}

.feedback.good {
  color: #159447;
}

.feedback.bad {
  color: var(--sg-red);
}

.feedback.bonus {
  color: var(--sg-red);
  font-size: clamp(35px, 10vw, 50px);
}

@keyframes feedbackPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.55);
  }

  25% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1.2);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -125%) scale(0.92);
  }
}

#flagFlash {
  position: absolute;
  inset: 0;

  z-index: 24;

  opacity: 0;
  pointer-events: none;

  background: rgba(215,25,32,0.10);
}

#flagFlash.flash {
  animation: flagScreenFlash 420ms ease-out;
}

@keyframes flagScreenFlash {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.confettiPiece {
  position: absolute;

  width: 9px;
  height: 15px;

  border-radius: 2px;

  pointer-events: none;

  z-index: 50;

  animation: confettiFly var(--duration) cubic-bezier(.12,.62,.31,1) forwards;
}

@keyframes confettiFly {
  0% {
    opacity: 1;

    transform:
      translate3d(0,0,0)
      rotate(0deg);
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--dx),
        var(--dy),
        0
      )
      rotate(var(--spin));
  }
}

.screen {
  position: absolute;
  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  padding:
    max(24px, env(safe-area-inset-top))
    20px
    max(24px, env(safe-area-inset-bottom));

  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.94),
      rgba(255,238,239,0.96)
    );

  backdrop-filter: blur(4px);

  z-index: 100;
}

.screen.active {
  display: flex;
}

.card {
  width: min(100%, 390px);

  text-align: center;

  padding: 24px 22px 26px;

  border-radius: 30px;

  background: white;

  border: 2px solid rgba(215,25,32,0.12);

  box-shadow:
    0 18px 60px rgba(94,0,8,0.17);
}



.miniFlag {
  display: inline-block;

  padding: 5px 12px;

  color: white;
  background: var(--sg-red);

  border-radius: 999px;

  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.16em;
}

.card h1 {
  margin: 9px 0 0;

  color: var(--sg-red);

  font-size: clamp(54px, 16vw, 82px);
  line-height: 0.88;

  font-weight: 1000;

  letter-spacing: -0.065em;
}

.card h2 {
  margin: 6px 0 15px;

  color: var(--ink);

  font-size: clamp(20px, 6vw, 30px);

  font-weight: 1000;
}

.intro {
  margin: 0 0 17px;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.45;

  font-weight: 650;
}

.rules {
  display: grid;
  gap: 7px;

  margin: 0 auto 14px;

  text-align: left;
}

.rules > div {
  display: flex;
  align-items: center;

  min-height: 42px;

  padding: 6px 10px;

  background: var(--off-white);

  border-radius: 12px;

  color: var(--ink);

  font-size: 13px;
  font-weight: 760;
}

.ruleScore {
  display: inline-grid;
  place-items: center;

  min-width: 47px;

  height: 29px;

  margin-right: 9px;

  color: white;

  border-radius: 9px;

  font-size: 14px;
  font-weight: 1000;
}

.ruleScore.good {
  background: #159447;
}

.ruleScore.bonus {
  background: var(--sg-red);
}

.ruleScore.bad {
  background: var(--sg-red);
}

.warning {
  margin: 12px 0 18px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.primaryButton {
  width: 100%;

  min-height: 58px;

  border: 0;
  border-radius: 18px;

  color: white;

  background:
    linear-gradient(
      180deg,
      var(--sg-red-light),
      var(--sg-red)
    );

  box-shadow:
    0 8px 0 var(--sg-red-dark),
    0 15px 24px rgba(150,0,10,0.17);

  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0.04em;

  cursor: pointer;

  touch-action: manipulation;
}

.primaryButton:active {
  transform: translateY(5px);

  box-shadow:
    0 3px 0 var(--sg-red-dark),
    0 8px 18px rgba(150,0,10,0.17);
}

#finalScoreBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  margin: 19px 0;

  padding: 12px;

  border-radius: 16px;

  background: var(--off-white);
}

#finalScoreBox span {
  color: var(--muted);

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

#finalScoreBox strong {
  color: var(--sg-red);

  font-size: 34px;
  font-weight: 1000;
}

#endMessage {
  color: var(--muted);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.endCard h1 {
  font-size: clamp(36px, 11vw, 60px);

  line-height: 0.98;

  letter-spacing: -0.04em;
}

.screenShake {
  animation: shake 280ms linear;
}

@keyframes shake {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6px,2px); }
  40%  { transform: translate(6px,-2px); }
  60%  { transform: translate(-5px,1px); }
  80%  { transform: translate(4px,-1px); }
  100% { transform: translate(0,0); }
}

@media (min-width: 541px) {
  #gameArena {
    box-shadow:
      0 0 70px rgba(0,0,0,0.5);
  }
}

@media (max-height: 680px) {
  #catcher {
    width: clamp(105px, 30vw, 140px);
  }

  .card {
    transform: scale(0.91);
  }
}


/* =================================================
   SG61 FALLING ITEM SIZE NORMALIZATION
   ================================================= */

/*
 * Every falling object uses the same 82x82 gameplay box.
 */
.fallingItem {
  width: 82px;
  height: 82px;
}

/*
 * Base artwork behavior.
 *
 * Individual PNG files contain different amounts of
 * transparent padding, so we compensate visually below.
 */
.fallingItem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
}

/*
 * Visual normalization only.
 * Collision boxes remain exactly the same size.
 */

.asset-merlion {
  transform: scale(1.10);
}

.asset-mbs {
  transform: scale(1.00);
}

.asset-mrt {
  transform: scale(0.96);
}

.asset-tuktuk {
  transform: scale(1.00);
}

.asset-eiffel {
  transform: scale(1.12);
}

.asset-opera {
  transform: scale(1.17);
}

/*
 * Singapore flag uses the same overall footprint.
 */
.flagItem {
  width: 82px !important;
  height: 82px !important;
}


.loadingStatus {
  margin-top: 14px;

  min-height: 18px;

  color: var(--muted);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.03em;
}

.primaryButton:disabled {
  cursor: default;

  opacity: 0.62;

  transform: none;

  box-shadow:
    0 5px 0 var(--sg-red-dark),
    0 10px 18px rgba(150,0,10,0.12);
}

.primaryButton:disabled:active {
  transform: none;

  box-shadow:
    0 5px 0 var(--sg-red-dark),
    0 10px 18px rgba(150,0,10,0.12);
}


/* =================================================
   LANDING PAGE CATCH GUIDE
   ================================================= */

.catchGuide {
  display: grid;
  gap: 10px;

  margin: 0 auto 14px;
}

.guideSection {
  padding: 10px;

  border-radius: 16px;

  text-align: left;
}

.guideGood {
  background: rgba(21, 148, 71, 0.08);
  border: 1px solid rgba(21, 148, 71, 0.18);
}

.guideBad {
  background: rgba(215, 25, 32, 0.07);
  border: 1px solid rgba(215, 25, 32, 0.18);
}

.guideBonus {
  background: rgba(215, 25, 32, 0.05);
  border: 1px solid rgba(215, 25, 32, 0.14);
}

.guideHeader {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 8px;
}

.guideHeader strong {
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.07em;
}

.guideGood .guideHeader strong {
  color: #159447;
}

.guideBad .guideHeader strong {
  color: var(--sg-red);
}

.guideBonus .guideHeader strong {
  color: var(--sg-red);
}

.guideScore {
  display: inline-grid;
  place-items: center;

  min-width: 43px;
  height: 27px;

  padding: 0 8px;

  border-radius: 8px;

  color: white;

  font-size: 13px;
  font-weight: 1000;
}

.guideGood .guideScore {
  background: #159447;
}

.guideBad .guideScore {
  background: var(--sg-red);
}

.guideBonus .guideScore {
  background: var(--sg-red);
}

.guideIcons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.guideIcon {
  height: 70px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 11px;

  background: rgba(255,255,255,0.82);
}

.guideIcon img {
  width: 62px;
  height: 62px;

  object-fit: contain;
}

.bonusFlagPreview {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 11px;

  background: rgba(255,255,255,0.82);

  color: var(--ink);

  font-size: 13px;
  font-weight: 850;
}

.bonusFlagEmoji {
  font-size: 38px;
}


/* =================================================
   SINGAPORE FLAG BONUS
   Movement belongs to .fallingItem.
   Animation belongs only to the child .flagEmoji.
   ================================================= */

.flagItem {
  display: grid;
  place-items: center;

  overflow: visible;

  width: 82px !important;
  height: 82px !important;
}

.flagEmoji {
  display: block;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;

  font-size: 58px;
  line-height: 1;

  transform-origin: center;

  filter:
    drop-shadow(0 6px 4px rgba(100,0,0,0.16));

  animation:
    flagEmojiPulse 0.65s ease-in-out infinite alternate;
}

@keyframes flagEmojiPulse {
  from {
    transform:
      scale(0.94)
      rotate(-3deg);
  }

  to {
    transform:
      scale(1.07)
      rotate(3deg);
  }
}


/* =================================================
   COMPACT MOBILE LANDING PAGE
   ================================================= */

#startScreen {
  padding:
    max(10px, env(safe-area-inset-top))
    12px
    max(10px, env(safe-area-inset-bottom));
}

#startScreen .card {
  width: min(100%, 390px);

  max-height:
    calc(
      100dvh
      - max(20px, env(safe-area-inset-top))
      - max(20px, env(safe-area-inset-bottom))
    );

  overflow: hidden;

  padding: 16px 15px 17px;

  border-radius: 24px;
}

#startScreen .miniFlag {
  padding: 4px 10px;

  font-size: 9px;
}

#startScreen .card h1 {
  margin-top: 6px;

  font-size: clamp(45px, 13vw, 64px);

  line-height: 0.84;
}

#startScreen .card h2 {
  margin: 4px 0 8px;

  font-size: clamp(18px, 5.3vw, 25px);
}

#startScreen .intro {
  margin-bottom: 10px;

  font-size: 12px;
  line-height: 1.3;
}

#startScreen .catchGuide {
  gap: 6px;

  margin-bottom: 7px;
}

#startScreen .guideSection {
  padding: 6px 8px;

  border-radius: 12px;
}

#startScreen .guideHeader {
  gap: 6px;

  margin-bottom: 4px;
}

#startScreen .guideHeader strong {
  font-size: 10px;
}

#startScreen .guideScore {
  min-width: 38px;
  height: 22px;

  padding: 0 6px;

  border-radius: 6px;

  font-size: 11px;
}

#startScreen .guideIcons {
  gap: 5px;
}

#startScreen .guideIcon {
  height: 50px;

  border-radius: 8px;
}

#startScreen .guideIcon img {
  width: 46px;
  height: 46px;

  object-fit: contain;
}

#startScreen .bonusFlagPreview {
  min-height: 43px;

  gap: 8px;

  border-radius: 8px;

  font-size: 11px;
}

#startScreen .bonusFlagEmoji {
  font-size: 29px;
}

#startScreen .warning {
  margin: 6px 0 9px;

  font-size: 10.5px;
  line-height: 1.3;
}

#startScreen .primaryButton {
  min-height: 48px;

  border-radius: 14px;

  font-size: 16px;
}

#startScreen .loadingStatus {
  margin-top: 8px;

  min-height: 13px;

  font-size: 9.5px;
}

/*
 * Extra compression for short mobile screens.
 */
@media (max-height: 720px) {

  #startScreen .card {
    padding:
      11px
      13px
      12px;
  }

  #startScreen .card h1 {
    font-size: 42px;
  }

  #startScreen .card h2 {
    margin-bottom: 5px;

    font-size: 18px;
  }

  #startScreen .intro {
    margin-bottom: 6px;

    font-size: 10.5px;
  }

  #startScreen .catchGuide {
    gap: 4px;

    margin-bottom: 4px;
  }

  #startScreen .guideSection {
    padding: 4px 7px;
  }

  #startScreen .guideHeader {
    margin-bottom: 2px;
  }

  #startScreen .guideIcon {
    height: 40px;
  }

  #startScreen .guideIcon img {
    width: 37px;
    height: 37px;
  }

  #startScreen .bonusFlagPreview {
    min-height: 34px;
  }

  #startScreen .bonusFlagEmoji {
    font-size: 24px;
  }

  #startScreen .warning {
    margin: 4px 0 6px;

    font-size: 9.5px;
  }

  #startScreen .primaryButton {
    min-height: 43px;

    font-size: 14px;
  }

  #startScreen .loadingStatus {
    margin-top: 5px;
  }
}


/* =================================================
   LANDING PAGE REFINEMENT V2
   Rare bonus = green
   Better use of vertical space
   Larger guide icons
   ================================================= */

/* Rare bonus now follows the correct-catch green scheme */
.guideBonus {
  background: rgba(21, 148, 71, 0.08);
  border: 1px solid rgba(21, 148, 71, 0.18);
}

.guideBonus .guideHeader strong {
  color: #159447;
}

.guideBonus .guideScore {
  background: #159447;
}

/*
 * Let the landing card use more of the available
 * portrait screen instead of being overly compact.
 */
#startScreen {
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom));
}

#startScreen .card {
  width: min(100%, 410px);

  max-height: none;

  min-height:
    calc(
      100dvh
      - max(24px, env(safe-area-inset-top))
      - max(24px, env(safe-area-inset-bottom))
    );

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;

  padding: 18px 16px 18px;

  border-radius: 26px;
}

#startScreen .miniFlag {
  padding: 5px 12px;

  font-size: 10px;
}

#startScreen .card h1 {
  margin-top: 7px;

  font-size: clamp(50px, 14vw, 70px);
}

#startScreen .card h2 {
  margin: 5px 0 10px;

  font-size: clamp(20px, 5.8vw, 27px);
}

#startScreen .intro {
  margin-bottom: 12px;

  font-size: 12.5px;
  line-height: 1.35;
}

#startScreen .catchGuide {
  gap: 8px;

  margin-bottom: 9px;
}

#startScreen .guideSection {
  padding: 8px 9px;

  border-radius: 14px;
}

#startScreen .guideHeader {
  gap: 7px;

  margin-bottom: 6px;
}

#startScreen .guideHeader strong {
  font-size: 11px;
}

#startScreen .guideScore {
  min-width: 42px;
  height: 25px;

  font-size: 12px;
}

#startScreen .guideIcons {
  gap: 7px;
}

#startScreen .guideIcon {
  height: 66px;

  border-radius: 10px;
}

#startScreen .guideIcon img {
  width: 60px;
  height: 60px;

  object-fit: contain;
}

#startScreen .bonusFlagPreview {
  min-height: 54px;

  gap: 10px;

  border-radius: 10px;

  font-size: 12px;
}

#startScreen .bonusFlagEmoji {
  font-size: 36px;
}

#startScreen .warning {
  margin: 8px 0 10px;

  font-size: 10.5px;
  line-height: 1.35;
}

#startScreen .primaryButton {
  min-height: 51px;

  font-size: 16px;
}

#startScreen .loadingStatus {
  margin-top: 7px;

  font-size: 9.5px;
}

/*
 * Moderately short screens:
 * still keep icons larger than before,
 * but reduce spacing first.
 */
@media (max-height: 760px) {

  #startScreen .card {
    min-height:
      calc(
        100dvh
        - max(18px, env(safe-area-inset-top))
        - max(18px, env(safe-area-inset-bottom))
      );

    padding: 12px 14px;
  }

  #startScreen .card h1 {
    font-size: 46px;
  }

  #startScreen .card h2 {
    margin: 4px 0 6px;

    font-size: 19px;
  }

  #startScreen .intro {
    margin-bottom: 7px;

    font-size: 10.5px;
  }

  #startScreen .catchGuide {
    gap: 5px;

    margin-bottom: 5px;
  }

  #startScreen .guideSection {
    padding: 5px 7px;
  }

  #startScreen .guideHeader {
    margin-bottom: 3px;
  }

  #startScreen .guideIcon {
    height: 54px;
  }

  #startScreen .guideIcon img {
    width: 50px;
    height: 50px;
  }

  #startScreen .bonusFlagPreview {
    min-height: 44px;
  }

  #startScreen .bonusFlagEmoji {
    font-size: 30px;
  }

  #startScreen .warning {
    margin: 4px 0 6px;

    font-size: 9.5px;
  }

  #startScreen .primaryButton {
    min-height: 44px;

    font-size: 14px;
  }

  #startScreen .loadingStatus {
    margin-top: 4px;
  }
}

/*
 * Very short screens:
 * preserve full visibility rather than allowing
 * the landing page to overflow.
 */
@media (max-height: 650px) {

  #startScreen .card {
    padding: 8px 12px;
  }

  #startScreen .miniFlag {
    padding: 3px 9px;
    font-size: 8px;
  }

  #startScreen .card h1 {
    margin-top: 4px;
    font-size: 39px;
  }

  #startScreen .card h2 {
    margin-bottom: 4px;
    font-size: 17px;
  }

  #startScreen .intro {
    margin-bottom: 4px;
    font-size: 9.5px;
  }

  #startScreen .catchGuide {
    gap: 3px;
  }

  #startScreen .guideSection {
    padding: 4px 6px;
  }

  #startScreen .guideHeader {
    margin-bottom: 2px;
  }

  #startScreen .guideIcon {
    height: 43px;
  }

  #startScreen .guideIcon img {
    width: 40px;
    height: 40px;
  }

  #startScreen .bonusFlagPreview {
    min-height: 34px;
  }

  #startScreen .bonusFlagEmoji {
    font-size: 24px;
  }

  #startScreen .warning {
    margin: 3px 0 5px;
    font-size: 8.5px;
  }

  #startScreen .primaryButton {
    min-height: 39px;
    font-size: 13px;
  }

  #startScreen .loadingStatus {
    min-height: 10px;
    margin-top: 3px;
    font-size: 8px;
  }
}

/* ==========================================================
   SG61 LANDING PAGE V3
   Full mobile layout cleanup
   ========================================================== */

#startScreen {
  padding:
    max(14px, env(safe-area-inset-top))
    14px
    max(14px, env(safe-area-inset-bottom));

  align-items: stretch;
  justify-content: stretch;
}

#startScreen .card {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;

  margin: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

  padding:
    clamp(20px, 4.5vh, 34px)
    18px
    18px;

  overflow: hidden;

  border-radius: 28px;
}

/* Small Singapore label, not a giant horizontal bar */
#startScreen .miniFlag {
  align-self: center;

  width: auto;

  padding: 5px 18px;

  font-size: 9px;
  line-height: 1.2;

  letter-spacing: 0.22em;
}

/* Main title */
#startScreen .card h1 {
  margin: 7px 0 0;

  font-size: clamp(52px, 14vw, 70px);
  line-height: 0.88;
}

#startScreen .card h2 {
  margin: 7px 0 5px;

  font-size: clamp(21px, 5.7vw, 27px);
  line-height: 1;
}

/* Intro copy */
#startScreen .intro {
  margin: 5px 0 13px;

  font-size: 12px;
  line-height: 1.3;
}

/* The rules should consume most of the useful space */
#startScreen .catchGuide {
  width: 100%;

  display: grid;
  gap: 9px;

  margin: 0;
}

/* ------------------------------------------
   Guide cards
   ------------------------------------------ */

#startScreen .guideSection {
  padding: 8px 10px;

  border-radius: 16px;
}

#startScreen .guideHeader {
  margin-bottom: 6px;

  gap: 9px;
}

#startScreen .guideHeader strong {
  font-size: 12px;
  letter-spacing: 0.08em;
}

#startScreen .guideScore {
  min-width: 48px;
  height: 28px;

  font-size: 13px;

  border-radius: 8px;
}

/* ------------------------------------------
   MUCH LARGER game icons
   ------------------------------------------ */

#startScreen .guideIcons {
  grid-template-columns: repeat(3, 1fr);

  gap: 8px;
}

#startScreen .guideIcon {
  height: clamp(72px, 10.5vh, 90px);

  border-radius: 12px;
}

#startScreen .guideIcon img {
  width: 88%;
  height: 88%;

  max-width: 78px;
  max-height: 78px;

  object-fit: contain;
}

/* ------------------------------------------
   Bonus
   ------------------------------------------ */

#startScreen .bonusFlagPreview {
  min-height: clamp(57px, 7.5vh, 68px);

  gap: 12px;

  border-radius: 12px;

  font-size: 13px;
}

#startScreen .bonusFlagEmoji {
  font-size: clamp(38px, 10vw, 48px);
}

/* ------------------------------------------
   Bottom instructions and button
   ------------------------------------------ */

#startScreen .warning {
  margin: auto 0 10px;

  padding-top: 11px;

  font-size: 11px;
  line-height: 1.3;
}

#startScreen .primaryButton {
  flex: 0 0 auto;

  min-height: 55px;

  border-radius: 17px;

  font-size: 18px;
}

/*
 * Loading status exists while loading.
 * Once ready, JS will hide it completely.
 */
#startScreen .loadingStatus {
  margin-top: 8px;

  min-height: 12px;

  font-size: 9px;
}

/* ==========================================================
   NORMAL IPHONE-SIZED SHORTER VIEWPORTS
   ========================================================== */

@media (max-height: 750px) {

  #startScreen .card {
    padding:
      14px
      15px
      13px;
  }

  #startScreen .card h1 {
    margin-top: 5px;

    font-size: 46px;
  }

  #startScreen .card h2 {
    margin: 5px 0 3px;

    font-size: 19px;
  }

  #startScreen .intro {
    margin: 3px 0 7px;

    font-size: 10px;
  }

  #startScreen .catchGuide {
    gap: 5px;
  }

  #startScreen .guideSection {
    padding: 5px 7px;
  }

  #startScreen .guideHeader {
    margin-bottom: 3px;
  }

  #startScreen .guideHeader strong {
    font-size: 10px;
  }

  #startScreen .guideScore {
    min-width: 40px;
    height: 23px;

    font-size: 11px;
  }

  #startScreen .guideIcon {
    height: 55px;
  }

  #startScreen .guideIcon img {
    width: 51px;
    height: 51px;
  }

  #startScreen .bonusFlagPreview {
    min-height: 43px;

    font-size: 11px;
  }

  #startScreen .bonusFlagEmoji {
    font-size: 30px;
  }

  #startScreen .warning {
    margin-bottom: 6px;

    padding-top: 5px;

    font-size: 9px;
  }

  #startScreen .primaryButton {
    min-height: 45px;

    font-size: 15px;
  }
}


/* ==========================================================
   SG61 LANDING V4
   Remove artificial empty space + larger hero
   ========================================================== */

/*
 * Keep the full-screen card, but treat its contents as
 * one cohesive composition rather than stretching the
 * button to the bottom.
 */
#startScreen .card {
  justify-content: center;

  padding:
    22px
    18px
    24px;
}

/* Larger Singapore label */
#startScreen .miniFlag {
  padding: 7px 24px;

  font-size: 11px;
  letter-spacing: 0.25em;

  border-radius: 999px;
}

/* MUCH larger SG61 */
#startScreen .card h1 {
  margin: 8px 0 0;

  font-size: clamp(72px, 20vw, 96px);
  line-height: 0.84;

  letter-spacing: -0.055em;
}

/* Larger game title */
#startScreen .card h2 {
  margin: 12px 0 6px;

  font-size: clamp(27px, 7vw, 35px);
  line-height: 1;

  letter-spacing: -0.025em;
}

/* Slightly larger intro */
#startScreen .intro {
  margin: 5px 0 17px;

  font-size: 13px;
  line-height: 1.3;
}

/* Game guide */
#startScreen .catchGuide {
  gap: 10px;

  margin: 0;
}

#startScreen .guideSection {
  padding: 9px 11px;

  border-radius: 17px;
}

#startScreen .guideHeader {
  margin-bottom: 7px;
}

#startScreen .guideHeader strong {
  font-size: 13px;
}

#startScreen .guideScore {
  min-width: 50px;
  height: 30px;

  font-size: 14px;
}

/* Bigger icon panels */
#startScreen .guideIcon {
  height: 88px;

  border-radius: 14px;
}

#startScreen .guideIcon img {
  width: 78px;
  height: 78px;

  max-width: 90%;
  max-height: 90%;

  object-fit: contain;
}

/* Larger bonus row */
#startScreen .bonusFlagPreview {
  min-height: 69px;

  font-size: 14px;

  border-radius: 14px;
}

#startScreen .bonusFlagEmoji {
  font-size: 46px;
}

/*
 * IMPORTANT:
 * Remove the auto margin that caused the huge blank space.
 */
#startScreen .warning {
  margin: 16px 0 11px;

  padding: 0;

  font-size: 11.5px;
  line-height: 1.3;
}

/* Bigger CTA */
#startScreen .primaryButton {
  min-height: 62px;

  border-radius: 18px;

  font-size: 20px;
  letter-spacing: 0.08em;
}


/* ==========================================================
   FIT FOR SHORTER MOBILE VIEWPORTS
   ========================================================== */

@media (max-height: 760px) {

  #startScreen .card {
    justify-content: center;

    padding: 12px 15px 15px;
  }

  #startScreen .miniFlag {
    padding: 4px 17px;

    font-size: 8px;
  }

  #startScreen .card h1 {
    margin-top: 5px;

    font-size: 57px;
  }

  #startScreen .card h2 {
    margin: 7px 0 3px;

    font-size: 22px;
  }

  #startScreen .intro {
    margin: 3px 0 8px;

    font-size: 10px;
  }

  #startScreen .catchGuide {
    gap: 5px;
  }

  #startScreen .guideSection {
    padding: 5px 7px;
  }

  #startScreen .guideHeader {
    margin-bottom: 3px;
  }

  #startScreen .guideHeader strong {
    font-size: 10px;
  }

  #startScreen .guideScore {
    min-width: 41px;
    height: 23px;

    font-size: 11px;
  }

  #startScreen .guideIcon {
    height: 58px;
  }

  #startScreen .guideIcon img {
    width: 53px;
    height: 53px;
  }

  #startScreen .bonusFlagPreview {
    min-height: 45px;

    font-size: 11px;
  }

  #startScreen .bonusFlagEmoji {
    font-size: 31px;
  }

  #startScreen .warning {
    margin: 7px 0 6px;

    font-size: 9px;
  }

  #startScreen .primaryButton {
    min-height: 47px;

    font-size: 15px;
  }
}


/* =================================================
   BONUS CATCH FEEDBACK
   Singapore flag +10 uses positive green
   ================================================= */

.feedback.bonus {
  color: #159447 !important;
}


/* ==========================================================
   SG61 LANDING V5
   Larger hero treatment
   ========================================================== */

/*
 * Move the complete composition slightly upward.
 * The previous centered layout leaves too much unused
 * space above and below on tall iPhones.
 */
#startScreen .card {
  justify-content: flex-start;

  padding-top: clamp(70px, 10vh, 115px);
}

/* Singapore capsule */
#startScreen .miniFlag {
  padding: 7px 32px;

  font-size: 11px;
  letter-spacing: 0.28em;
}

/*
 * SG61 is the hero of the landing screen.
 * Make it substantially larger.
 */
#startScreen .card h1 {
  margin: 10px 0 0;

  font-size: clamp(94px, 25vw, 126px);
  line-height: 0.78;

  letter-spacing: -0.065em;
}

/* Larger secondary title */
#startScreen .card h2 {
  margin: 16px 0 8px;

  font-size: clamp(29px, 7.6vw, 38px);
  line-height: 0.95;

  letter-spacing: -0.035em;
}

/* Intro */
#startScreen .intro {
  margin: 5px 0 18px;

  font-size: 13.5px;
  line-height: 1.35;
}

/*
 * Keep the catch guide at its current successful size.
 */
#startScreen .catchGuide {
  flex: 0 0 auto;
}

/* Slightly more breathing room before final instructions */
#startScreen .warning {
  margin: 18px 0 12px;

  font-size: 12px;
}

/* Larger button to balance larger hero */
#startScreen .primaryButton {
  min-height: 66px;

  font-size: 21px;
}

/*
 * On shorter displays, scale back enough to keep
 * everything visible.
 */
@media (max-height: 760px) {

  #startScreen .card {
    padding-top: 22px;
  }

  #startScreen .card h1 {
    font-size: 70px;
  }

  #startScreen .card h2 {
    margin: 9px 0 4px;

    font-size: 24px;
  }

  #startScreen .intro {
    margin-bottom: 9px;

    font-size: 10.5px;
  }

  #startScreen .warning {
    margin: 8px 0 7px;

    font-size: 9.5px;
  }

  #startScreen .primaryButton {
    min-height: 49px;

    font-size: 16px;
  }
}