:root { color-scheme: only light; font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #081b39; touch-action: none; }
button { font: inherit; }
#game-shell { position: fixed; inset: 0; overflow: hidden; background: #eef4f1; user-select: none; -webkit-user-select: none; }
#game { display: block; width: 100%; height: 100%; touch-action: none; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: grid; }
.help-button {
  display:none;position:absolute;z-index:25;
  right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  color:#fff;font:900 25px Arial,sans-serif;
  border:2px solid rgba(255,255,255,.9);outline:1px solid rgba(255,52,192,.7);
  background:linear-gradient(180deg,rgba(27,203,255,.96),rgba(7,92,203,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.65),0 0 10px #00cfff,0 5px 15px rgba(0,20,70,.4);
}
.help-button.visible { display:block; }
.help-button:active { transform:scale(.94); }
.tutorial-theme {
  z-index:80;place-items:center;padding:18px;
  background:radial-gradient(circle at 18% 16%,rgba(255,36,184,.2),transparent 36%),radial-gradient(circle at 84% 82%,rgba(0,207,255,.22),transparent 40%),rgba(2,7,28,.8);
  backdrop-filter:blur(13px) saturate(1.35);
}
.tutorial-card {
  position:relative;width:min(90vw,410px);min-height:500px;padding:25px 22px 20px;
  display:grid;grid-template-rows:auto 1fr auto auto;text-align:center;color:#fff;
  border-radius:32px;background:linear-gradient(145deg,rgba(20,25,65,.78),rgba(7,13,42,.68));
  border:2px solid rgba(154,242,255,.78);outline:1px solid rgba(255,54,193,.62);
  box-shadow:inset 0 1px rgba(255,255,255,.45),0 0 22px rgba(0,215,255,.4),0 0 42px rgba(255,35,185,.22),0 24px 70px rgba(0,0,20,.68);
  overflow:hidden;
}
.tutorial-card::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.16),transparent 25% 72%,rgba(0,217,255,.1)); }
.tutorial-card > * { position:relative;z-index:1; }
.tutorial-kicker { margin:0;color:#8df6ff;font:800 14px Arial,sans-serif;letter-spacing:.18em;text-shadow:0 0 9px #00dfff; }
.tutorial-close { position:absolute;z-index:3;right:12px;top:10px;width:38px;height:38px;border:0;background:transparent;color:#baf8ff;font:32px/1 Arial;cursor:pointer; }
.tutorial-pages { display:grid;place-items:center; }
.tutorial-page { display:none;animation:tutorialIn .25s ease-out; }
.tutorial-page.active { display:grid;justify-items:center; }
.tutorial-icon {
  display:grid;place-items:center;width:150px;height:150px;margin:24px 0 18px;border-radius:50%;
  color:#fff;font:900 48px Arial,sans-serif;letter-spacing:-.05em;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.32),transparent 25%),linear-gradient(145deg,#17d8ff,#086ed8 58%,#4322a7);
  border:2px solid rgba(198,250,255,.86);box-shadow:inset 0 -13px 20px rgba(0,15,90,.3),0 0 20px rgba(0,218,255,.7),0 0 38px rgba(255,36,185,.25);
}
.tutorial-grow { color:#fff08b;background:linear-gradient(145deg,#ff69db,#e818a3 58%,#7c168f);font-size:39px; }
.tutorial-battle { font-size:34px;background:linear-gradient(145deg,#25d8ff,#087bdf 48%,#ec269f); }
.tutorial-page h2 { margin:0;color:transparent;font-size:48px;line-height:1;background:linear-gradient(#fff,#ff72d8 48%,#ef199f);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 7px rgba(255,42,183,.85)); }
.tutorial-page p { margin:15px 0 5px;font:900 17px Arial,sans-serif;letter-spacing:.08em;color:#fff; }
.tutorial-page small { font:800 12px Arial,sans-serif;letter-spacing:.1em;color:#aeefff; }
.tutorial-dots { display:flex;justify-content:center;gap:8px;margin:12px 0; }
.tutorial-dots i { width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.3);transition:.2s; }
.tutorial-dots i.active { width:25px;background:#ff42bd;box-shadow:0 0 8px #ff37bb; }
.tutorial-actions { display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center; }
.tutorial-actions .game-button { width:100%;height:58px;filter:none; }
.tutorial-actions .game-button::before { inset:2px;border-radius:999px;border:2px solid rgba(255,255,255,.84);outline:0;transform:none;background:linear-gradient(180deg,#ff69dc,#f21aa9 55%,#b8087b);box-shadow:inset 0 1px rgba(255,255,255,.68),0 0 11px #ff39bd; }
.tutorial-actions .game-button span { font-size:23px; }
.tutorial-skip { height:46px;padding:0 12px;border:0;background:transparent;color:#aeefff;font:800 12px Arial,sans-serif;letter-spacing:.1em;cursor:pointer; }
@keyframes tutorialIn { from { opacity:0;transform:translateX(15px) scale(.98); } to { opacity:1;transform:none; } }
@media (min-aspect-ratio:1/1) and (max-height:600px) {
  .tutorial-card { width:min(84vw,650px);min-height:0;height:min(88vh,330px);padding:17px 22px;grid-template-columns:.9fr 1.1fr;grid-template-rows:auto 1fr auto; }
  .tutorial-kicker { grid-column:1;grid-row:1; }
  .tutorial-pages { grid-column:1;grid-row:2 / 4; }
  .tutorial-icon { width:105px;height:105px;margin:8px 0 10px;font-size:34px; }
  .tutorial-grow { font-size:28px; }.tutorial-battle { font-size:24px; }
  .tutorial-page h2 { font-size:34px; }.tutorial-page p { margin:7px 0 3px;font-size:13px; }.tutorial-page small { font-size:9px; }
  .tutorial-dots { grid-column:2;grid-row:1;margin:0; }
  .tutorial-actions { grid-column:2;grid-row:2 / 4;align-self:center; }
}
#menu { place-items: center; overflow: hidden; background: #087bd4; }
#menu::before { content: ""; position: absolute; inset: -24px; background: url("assets/numbers-arena-key-art.png") center / cover no-repeat; filter: blur(18px) brightness(.72); transform: scale(1.08); }
.key-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.key-art-desktop { display: none; }
.menu-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,32,89,.05), transparent 45%, rgba(0,20,55,.86)); }
.brand { position: absolute; top: max(4vh, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) rotate(-2deg); text-align: center; color: white; line-height: .78; letter-spacing: -.04em; filter: drop-shadow(0 7px 0 #06358c) drop-shadow(0 12px 8px rgba(0,0,0,.4)); white-space: nowrap; }
.brand span { display: block; font-size: clamp(30px, 8vw, 70px); -webkit-text-stroke: 2px #06358c; }
.brand strong { display: block; font-size: clamp(46px, 13vw, 110px); color: #ffd230; -webkit-text-stroke: 3px #a34500; }
.menu-actions { position: absolute; bottom: max(4vh, env(safe-area-inset-bottom)); width: min(88vw, 460px); display: grid; justify-items: center; gap: 14px; }
.menu-actions p { margin: 0; color: white; font: 700 clamp(11px, 3vw, 15px) Arial, sans-serif; letter-spacing: .12em; text-shadow: 0 2px 3px #001b45; }
.best-label { padding: 7px 18px; border-radius: 18px; color: #dff4ff; background: rgba(0,27,68,.68); border: 2px solid rgba(255,255,255,.35); font: 800 14px Arial, sans-serif; letter-spacing: .08em; }
.best-label b { color: #ffe65a; margin-left: 6px; }
.meta-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.meta-chip { padding: 7px 14px; border-radius: 18px; color: #dff4ff; background: rgba(0,27,68,.68); border: 2px solid rgba(255,255,255,.35); font: 800 13px Arial, sans-serif; letter-spacing: .06em; }
.meta-chip b { color: #ffe65a; margin-left: 5px; }
.meta-chip.coin-chip {
  color: #5a3200;
  background: linear-gradient(#ffe27a, #f0b020);
  border-color: #fff3b0;
  outline: 2px solid #b87400;
}
.meta-chip.coin-chip b { color: #5a3200; }
.menu-progress {
  display: flex;align-items: center;justify-content: center;gap: 9px;
  padding: 8px 16px;border-radius: 999px;
  color: #eaf9ff;background: rgba(3,28,67,.72);
  border: 2px solid rgba(255,255,255,.48);
  box-shadow: 0 5px 12px rgba(0,18,53,.3);
  font: 800 14px Arial,sans-serif;letter-spacing: .04em;
}
.menu-progress span { color: #9eeeff; }
.menu-progress b { color: #ffe250; }
.menu-progress i { width: 1px;height: 17px;background: rgba(255,255,255,.38); }
.menu-progress em { color: white;font-style: normal; }
.wallet-badge {
  position: absolute;
  z-index: 30;
  left: max(12px, env(safe-area-inset-left));
  top: max(12px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 118px;
  padding: 8px 14px 8px 10px;
  border: 3px solid #fff6c8;
  border-radius: 999px;
  cursor: pointer;
  color: #5a3200;
  background: linear-gradient(#ffe27a 0 45%, #f0b020 46% 100%);
  outline: 3px solid #a65d00;
  box-shadow: inset 0 -5px rgba(0,0,0,.16), 0 6px 14px rgba(0,0,0,.28);
}
.wallet-badge:active { transform: translateY(2px); }
.wallet-coin {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: url("assets/coin-gold.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(88,45,0,.45));
}
.wallet-text { display: grid; line-height: 1; text-align: left; }
.wallet-text small { font: 800 10px Arial, sans-serif; letter-spacing: .08em; opacity: .85; }
.wallet-badge .wallet-text small { display: none; }
.wallet-badge { min-width: 0; padding-right: 12px; }
.wallet-text b { font: 900 20px Arial, sans-serif; }
.result-reward-box {
  width: 100%;
  margin: 14px 0 4px;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 236, 140, .22), rgba(255, 196, 40, .12));
  border: 3px solid rgba(255, 230, 120, .75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  color: inherit;
  cursor: pointer;
  font: inherit;
  animation: rewardReady 1.1s ease-in-out infinite alternate;
}
.result-reward-box:active { transform: scale(.97); }
.result-reward-box.claimed { animation: none; opacity: .72; cursor: default; }
.result-reward-box[hidden] { display: none !important; }
.reward-coin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.reward-earn {
  font: 900 26px Arial, sans-serif;
  color: #ffe65a;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(90, 40, 0, .35);
}
.reward-total {
  margin-top: 8px;
  font: 800 13px Arial, sans-serif;
  letter-spacing: .08em;
  color: #e7f6ff;
}
.flying-coin {
  position: fixed;
  z-index: 1000;
  width: 34px;
  height: 34px;
  pointer-events: none;
  background: url("assets/coin-gold.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(70,35,0,.45));
  animation: coinFly var(--duration) cubic-bezier(.22,.75,.25,1) var(--delay) both;
}
.wallet-badge.coin-arrive { animation: walletPop .3s ease-out; }
@keyframes rewardReady { from { box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 0 0 rgba(255,220,70,0); } to { box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 0 18px rgba(255,220,70,.65); } }
@keyframes coinFly {
  0% { transform: translate(0,0) rotate(0) scale(.75); opacity: 0; }
  12% { opacity: 1; transform: translate(0,-12px) rotate(45deg) scale(1.08); }
  52% { transform: translate(var(--mx),var(--my)) rotate(240deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx),var(--dy)) rotate(540deg) scale(.35); opacity: .2; }
}
@keyframes walletPop { 50% { transform: scale(1.13); filter: brightness(1.25); } }
.result-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.result-card.is-win {
  background: linear-gradient(165deg, #1bb0ef 0%, #0a6cc4 55%, #0750a0 100%);
}
.result-card.is-lose {
  background: linear-gradient(165deg, #3a8ec8 0%, #1a4f8f 100%);
}
.result-card.is-win h1 {
  animation: win-pop .45s ease-out;
}
@keyframes win-pop {
  from { transform: scale(.86); opacity: .4; }
  to { transform: scale(1); opacity: 1; }
}
.shop-card { width: min(92vw, 460px); max-height: min(92vh, 720px); overflow: auto; }
.shop-coins {
  margin: 10px auto 6px;
  width: fit-content;
  padding: 10px 18px;
  border-radius: 999px;
  font: 800 18px Arial, sans-serif;
  letter-spacing: .06em;
  color: #5a3200;
  background: linear-gradient(#ffe27a, #f0b020);
  border: 3px solid #fff6c8;
  outline: 2px solid #a65d00;
}
.shop-coins b { color: #5a3200; margin-left: 6px; }
.shop-start { margin: 0 0 12px !important; color: #cceeff !important; }
.shop-start b { color: #ffe65a; }
.shop-list { display: grid; gap: 8px; margin: 0 0 14px; }
.shop-item {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  padding: 12px 14px; border-radius: 16px; text-align: left;
  background: rgba(0, 28, 72, .45); border: 2px solid rgba(255,255,255,.35);
}
.shop-item-title { font: 800 18px Arial, sans-serif; color: #fff; }
.shop-item-desc { font: 700 12px Arial, sans-serif; color: #cceeff; letter-spacing: .04em; }
.shop-buy {
  border: 0; border-radius: 14px; min-width: 88px; height: 42px; padding: 0 12px;
  font: 800 14px Arial, sans-serif; color: #063a14; cursor: pointer;
  background: linear-gradient(#8ef24a, #2ec338); box-shadow: inset 0 -4px rgba(0,0,0,.18);
}
.shop-buy:disabled { opacity: .45; cursor: default; filter: grayscale(.35); }
.shop-buy:not(:disabled):active { transform: translateY(2px); }
.game-button { position: relative; width: min(78vw, 380px); height: 76px; border: 0; padding: 0; color: white; cursor: pointer; background: transparent; filter: drop-shadow(0 8px 5px rgba(0,0,0,.3)); }
.game-button::before { content: ""; position: absolute; inset: 0; border-radius: 22px 22px 28px 28px; border: 5px solid rgba(255,255,255,.85); box-shadow: inset 0 -10px 0 rgba(0,0,0,.18), inset 0 8px 0 rgba(255,255,255,.3); transform: perspective(240px) rotateX(-4deg); }
.game-button.primary::before { background: linear-gradient(#6eea35 0 42%, #21b62c 43% 100%); outline: 4px solid #08712c; }
.game-button.secondary::before { background: linear-gradient(#43bdeb 0 42%, #0877c7 43% 100%); outline: 4px solid #064e92; }
.game-button span { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; font-size: 35px; letter-spacing: .04em; -webkit-text-stroke: 1.5px rgba(0,50,80,.75); text-shadow: 0 4px 0 rgba(0,0,0,.22); }
.game-button:active { transform: translateY(5px); filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.result { place-items: center; background: rgba(0,24,68,.72); backdrop-filter: blur(5px); padding: 20px; }
.result-card {
  width: min(88vw, 400px);
  padding: 28px 22px 22px;
  border-radius: 34px;
  text-align: center;
  color: white;
  background: linear-gradient(160deg,#159fdf,#0755ad);
  border: 5px solid white;
  outline: 7px solid #063a87;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.16), 0 18px 50px rgba(0,0,0,.4);
}
.result-card p { margin: 0 0 6px; font: 800 14px Arial, sans-serif; letter-spacing: .14em; color: #cceeff; }
.result-card h1 { margin: 0; font-size: clamp(40px, 11vw, 64px); color: #ffe344; -webkit-text-stroke: 2px #a44800; text-shadow: 0 5px 0 rgba(0,0,0,.2); line-height: .95; }
#result-score { margin: 18px 0 4px; font-size: clamp(42px, 12vw, 66px); letter-spacing: -.02em; }
#result-best { opacity: .9; }
.result-card .game-button { width: 100%; margin-top: 0; height: 64px; }
.result-card .game-button span { font-size: 30px; }
.result-card.compact h1 { margin-bottom: 22px; }
.result-card.compact .result-actions { margin-top: 8px; }
.icon-button { display: none; position: absolute; right: max(13px, env(safe-area-inset-right)); top: max(13px, env(safe-area-inset-top)); width: 52px; height: 52px; border: 4px solid white; border-radius: 50%; background: linear-gradient(#53c6f0,#0872c4); outline: 3px solid #074c8d; box-shadow: inset 0 -6px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.25); }
.icon-button span::before,.icon-button span::after { content:""; position:absolute; top:12px; width:8px; height:22px; border-radius:3px; background:white; box-shadow:0 2px #07508e; }
.icon-button span::before { left:13px; }.icon-button span::after { right:13px; }
.icon-button.visible { display: block; }
@media (min-aspect-ratio: 1/1) {
  #game-shell { left: 50%; width: min(100vw, 900px); transform: translateX(-50%); box-shadow: 0 0 80px #000; }
  #menu::before { background-image: url("assets/numbers-arena-key-art-desktop.png"); filter: blur(14px) brightness(.7); }
  .key-art-mobile { display: none; }
  .key-art-desktop { display: block; object-fit: cover; }
  .brand span { font-size: 48px; }.brand strong { font-size: 76px; }
  .menu-actions { width: 360px; }.game-button { height: 65px; }
}

/* Phones in landscape have plenty of width but very little height. */
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .result { padding: 10px; }
  .result-card {
    width: min(92vw, 720px);
    max-height: calc(100vh - 20px);
    min-height: min(72vh, 250px);
    padding: 18px 22px;
    border-width: 4px;
    outline-width: 5px;
    border-radius: 28px;
    display: grid;
    grid-template-columns: 1.2fr .9fr;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 24px;
    row-gap: 4px;
    align-items: center;
    text-align: center;
  }
  #result-kicker { grid-column: 1; grid-row: 1; }
  #result-title { grid-column: 1; grid-row: 2; }
  #result-score { grid-column: 1; grid-row: 3; }
  #result-best { grid-column: 1; grid-row: 4; }
  #result-reward { grid-column: 1; grid-row: 5; align-self: start; margin-top: 6px; }
  .result-actions {
    grid-column: 2;
    grid-row: 2 / 6;
    align-content: center;
    margin-top: 0;
  }
  .result-card p { margin: 0; font-size: 12px; }
  .result-card h1 { margin: 0; font-size: clamp(34px, 9vh, 52px); line-height: .95; }
  #result-score { margin: 0; font-size: clamp(32px, 8vh, 48px); line-height: 1; }
  .result-card .game-button { width: 100%; height: 54px; margin: 0; }
  .result-card .game-button span { font-size: 22px; }
  .reward-earn { font-size: 22px; }
  .shop-card {
    width: min(94vw, 780px);
    max-height: calc(100vh - 16px);
    display: block;
    text-align: center;
  }
  .shop-list { grid-template-columns: 1fr 1fr; }

  .result-card.compact {
    grid-template-rows: auto 1fr auto;
  }
  .result-card.compact > p { grid-column: 1; grid-row: 1; }
  .result-card.compact > h1 { grid-column: 1; grid-row: 2; margin: 0; }
  .result-card.compact .result-actions { grid-column: 2; grid-row: 1 / 4; }
}

/* Shop and pause use the same glass/neon visual family as win and lose. */
.result.shop-theme,
.result.pause-theme {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,36,184,.18), transparent 36%),
    radial-gradient(circle at 84% 82%, rgba(0,207,255,.2), transparent 40%),
    rgba(2,7,28,.72);
  backdrop-filter: blur(12px) saturate(1.35);
}
.result-card.neon-panel {
  position: relative;
  overflow: hidden;
  color: #f7fbff;
  background: linear-gradient(145deg,rgba(20,25,65,.75),rgba(7,13,42,.62));
  border: 2px solid rgba(154,242,255,.74);
  outline: 1px solid rgba(255,54,193,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 0 20px rgba(0,215,255,.38),0 0 42px rgba(255,35,185,.18),0 24px 70px rgba(0,0,20,.65);
  backdrop-filter: blur(24px) saturate(1.4);
}
.result-card.neon-panel::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.17),transparent 24% 72%,rgba(0,217,255,.1)),repeating-linear-gradient(180deg,transparent 0 5px,rgba(130,228,255,.022) 6px);
}
.result-card.neon-panel > * { position:relative; z-index:1; }
.result-card.neon-panel h1 {
  color:transparent;
  background:linear-gradient(180deg,#fff 0 14%,#ff78dc 40%,#ff2cad 75%,#ad0a7a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:1px #ffe5fa;
  filter:drop-shadow(0 0 7px rgba(255,42,183,.9));
  text-shadow:none;
}
.result-card.neon-panel .game-button { filter:none; }
.result-card.neon-panel .game-button::before {
  inset:2px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.84);
  outline:0;
  transform:none;
}
.result-card.neon-panel .game-button.primary::before {
  background:linear-gradient(180deg,#ff69dc,#f21aa9 55%,#b8087b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68),inset 0 -7px 12px rgba(87,0,54,.28),0 0 10px #ff39bd,0 0 22px rgba(255,38,184,.68);
}
.result-card.neon-panel .game-button.secondary::before {
  background:linear-gradient(180deg,#22c9ff,#087de6 55%,#073c9a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -7px 12px rgba(0,22,81,.35),0 0 10px #00cfff,0 0 22px rgba(0,135,255,.62);
}
.result-card.neon-panel .game-button span { letter-spacing:.08em; text-shadow:0 0 8px rgba(255,255,255,.7),0 3px 0 rgba(20,0,50,.38); }
.shop-card > p:first-child { display:none; }
.shop-card h1 { font-size:clamp(38px,10vw,56px); }
.shop-card .shop-coins {
  border:1px solid rgba(255,230,101,.9);
  outline:0;
  color:#ffe866;
  background:rgba(255,190,24,.12);
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 0 14px rgba(255,204,43,.34);
}
.shop-card .shop-coins b { color:#fff3a1; }
.shop-card .shop-item { background:rgba(0,113,181,.18); border:1px solid rgba(117,230,255,.48); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.shop-card .shop-buy {
  color:#fff;
  background:linear-gradient(180deg,#ff67d8,#e9149f 58%,#9f0871);
  box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 10px rgba(255,39,180,.5);
}
.result-card.shop-card {
  overflow-x:hidden;
  overflow-y:auto;
  touch-action:pan-y;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(66,220,255,.75) transparent;
  padding-bottom:max(22px,env(safe-area-inset-bottom));
}
.result-card.shop-card::-webkit-scrollbar { width:5px; }
.result-card.shop-card::-webkit-scrollbar-track { background:transparent; }
.result-card.shop-card::-webkit-scrollbar-thumb { background:rgba(66,220,255,.7); border-radius:999px; }
.shop-card button { position:relative; z-index:2; touch-action:manipulation; }
.pause-card { width:min(88vw,400px); }
.pause-card > p { display:none; }
.pause-card h1 { margin-bottom:22px; }

@media (min-aspect-ratio:1/1) and (max-height:600px) {
  .shop-card {
    width:min(94vw,780px);
    min-height:0;
    max-height:calc(100vh - 18px);
    padding:12px 16px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto 1fr auto;
    gap:5px 14px;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .shop-card h1 { grid-column:1; grid-row:1 / 3; align-self:center; font-size:clamp(34px,12vh,52px); }
  .shop-card .shop-coins { grid-column:2; grid-row:1; margin:0; padding:6px 14px; font-size:15px; }
  .shop-card .shop-start { grid-column:2; grid-row:2; margin:0 !important; font-size:11px; }
  .shop-card .shop-list { grid-column:1 / 3; grid-row:3; grid-template-columns:repeat(3,1fr); gap:6px; margin:0; }
  .shop-card .shop-item { grid-template-columns:1fr auto; padding:7px 8px; border-radius:12px; gap:2px 5px; }
  .shop-card .shop-item-title { font-size:14px; }
  .shop-card .shop-item-desc { font-size:9px; }
  .shop-card .shop-buy { min-width:58px; height:32px; padding:0 8px; font-size:11px; }
  .shop-card #shop-close-btn { grid-column:1 / 3; grid-row:4; justify-self:center; width:min(52vw,300px); height:42px; }
  .shop-card #shop-close-btn span { font-size:18px; }
  .pause-card {
    width:min(84vw,620px);
    min-height:0;
    padding:18px 22px;
    grid-template-columns:.82fr 1.18fr;
    grid-template-rows:1fr;
  }
  .pause-card > h1 { grid-column:1; grid-row:1; margin:0; font-size:clamp(36px,12vh,54px); }
  .pause-card .result-actions { grid-column:2; grid-row:1; gap:9px; }
  .pause-card .game-button { height:52px; }
}

/* Home primary action uses the same neon pill language as win/lose. */
#play-btn {
  width: min(78vw, 390px);
  height: 68px;
  filter: none;
  animation: playNeonPulse 1.35s ease-in-out infinite alternate;
}
#play-btn::before {
  inset: 2px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.9);
  outline: 0;
  transform: none;
  background: linear-gradient(180deg,#ff72de 0%,#f21aaa 54%,#ad0878 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -8px 13px rgba(75,0,53,.3),
    0 0 10px rgba(255,48,188,.95),
    0 0 25px rgba(255,35,181,.62);
}
#play-btn span {
  font-size: 32px;
  letter-spacing: .1em;
  -webkit-text-stroke: 1px rgba(50,0,57,.72);
  text-shadow: 0 0 8px rgba(255,255,255,.76),0 3px 0 rgba(39,0,54,.42);
}
#play-btn:active { animation: none; transform: translateY(3px) scale(.985); }
@keyframes playNeonPulse {
  from { transform: scale(1); }
  to { transform: scale(1.018); }
}
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  #play-btn { height: 58px; width: min(60vw, 390px); }
  #play-btn span { font-size: 28px; }
}

/* Win-only theme: glassmorphism with neon cyberpunk lighting. */
.result.win-theme {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,32,183,.2), transparent 34%),
    radial-gradient(circle at 82% 80%, rgba(0,211,255,.22), transparent 38%),
    rgba(2,7,28,.7);
  backdrop-filter: blur(12px) saturate(1.35);
}
.result-card.is-win {
  position: relative;
  overflow: hidden;
  color: #f7fbff;
  background: linear-gradient(145deg, rgba(17,28,68,.68), rgba(8,13,42,.52));
  border: 2px solid rgba(159,244,255,.72);
  outline: 1px solid rgba(255,45,192,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(255,43,190,.24),
    0 0 20px rgba(0,218,255,.42),
    0 0 44px rgba(255,31,184,.2),
    0 24px 70px rgba(0,0,20,.65);
  backdrop-filter: blur(24px) saturate(1.45);
}
.result-card.is-win::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.2), transparent 23% 72%, rgba(0,221,255,.12)),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(130,228,255,.025) 6px);
}
.result-card.is-win > * { position: relative; z-index: 1; }
.result-card.is-win #result-kicker { color: #83f6ff; text-shadow: 0 0 9px rgba(0,225,255,.85); }
.result-card.is-win #result-kicker,
.result-card.is-win #result-best,
.result-card.is-win .reward-total { display: none; }
.result-card.is-win #result-title {
  color: transparent;
  background: linear-gradient(180deg,#fff 0 15%,#ff7cdd 40%,#ff2fac 76%,#b70d82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px #ffe7fa;
  filter: drop-shadow(0 0 7px rgba(255,42,180,.9));
  text-shadow: none;
}
.result-card.is-win #result-score { color: #fff; text-shadow: 0 0 7px #00d9ff, 0 0 18px rgba(0,217,255,.75); }
.result-card.is-win #result-best { color: #b9f8ff; }
.result-card.is-win .result-reward-box {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg,rgba(255,255,255,.13),rgba(0,213,255,.08));
  border: 1px solid rgba(158,244,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(0,211,255,.18);
}
.result-card.is-win .result-actions { display: grid; gap: 12px; width: 100%; }
.result-card.is-win .game-button { width: 100%; height: 66px; filter: none; }
.result-card.is-win .game-button::before {
  inset: 2px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.82);
  outline: 0;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -7px 12px rgba(0,0,0,.2);
}
.result-card.is-win .game-button.primary::before {
  background: linear-gradient(180deg,#ff69dc,#f21aa9 55%,#b8087b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), inset 0 -7px 12px rgba(87,0,54,.28),0 0 10px #ff39bd,0 0 24px rgba(255,38,184,.72);
}
.result-card.is-win .game-button.secondary::before {
  background: linear-gradient(180deg,#22c9ff,#087de6 55%,#073c9a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -7px 12px rgba(0,22,81,.35),0 0 10px #00cfff,0 0 24px rgba(0,135,255,.65);
}
.result-card.is-win .game-button span {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing: .08em;
  -webkit-text-stroke: 1px rgba(23,0,45,.7);
  text-shadow: 0 0 8px rgba(255,255,255,.7),0 3px 0 rgba(20,0,50,.38);
}
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .result-card.is-win .game-button { height: 54px; }
  .result-card.is-win .result-actions { gap: 9px; }
}

/* Lose screen shares the same glass structure with a danger-colored neon accent. */
.result.lose-theme {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,38,116,.2), transparent 35%),
    radial-gradient(circle at 84% 82%, rgba(28,111,255,.2), transparent 40%),
    rgba(3,7,26,.72);
  backdrop-filter: blur(12px) saturate(1.25);
}
.result-card.is-lose {
  position: relative;
  overflow: hidden;
  color: #f7fbff;
  background: linear-gradient(145deg,rgba(36,19,58,.7),rgba(8,14,42,.56));
  border: 2px solid rgba(255,125,190,.76);
  outline: 1px solid rgba(70,196,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 0 22px rgba(255,32,130,.38),0 0 45px rgba(0,158,255,.16),0 24px 70px rgba(0,0,20,.66);
  backdrop-filter: blur(24px) saturate(1.4);
}
.result-card.is-lose::before {
  content: "";position: absolute;inset: 0;pointer-events: none;
  background: linear-gradient(118deg,rgba(255,255,255,.17),transparent 24% 72%,rgba(255,42,151,.1)),repeating-linear-gradient(180deg,transparent 0 5px,rgba(255,120,205,.022) 6px);
}
.result-card.is-lose > * { position: relative; z-index: 1; }
.result-card.is-lose #result-kicker,
.result-card.is-lose #result-best { display: none; }
.result-card.is-lose #result-title {
  color: transparent;
  background: linear-gradient(180deg,#fff 0 12%,#ff8bba 38%,#ff286f 72%,#aa1249 100%);
  -webkit-background-clip: text;background-clip: text;
  -webkit-text-stroke: 1px #ffe3f0;
  filter: drop-shadow(0 0 8px rgba(255,34,119,.88));text-shadow: none;
}
.result-card.is-lose #result-score { color: #fff;text-shadow: 0 0 7px #38cfff,0 0 18px rgba(0,190,255,.68); }
.result-card.is-lose .result-actions { display: grid;gap: 12px;width: 100%; }
.result-card.is-lose .game-button { width: 100%;height: 66px;filter: none; }
.result-card.is-lose .game-button::before {
  inset: 2px;border-radius: 999px;border: 2px solid rgba(255,255,255,.82);outline: 0;transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6),inset 0 -7px 12px rgba(0,0,0,.22);
}
.result-card.is-lose .game-button.primary::before {
  background: linear-gradient(180deg,#ff678f,#f21d67 55%,#a90c48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68),inset 0 -7px 12px rgba(85,0,35,.3),0 0 10px #ff3278,0 0 24px rgba(255,36,117,.68);
}
.result-card.is-lose .game-button.secondary::before {
  background: linear-gradient(180deg,#27cbff,#087ce4 55%,#073b98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62),inset 0 -7px 12px rgba(0,22,81,.35),0 0 10px #00cfff,0 0 24px rgba(0,135,255,.62);
}
.result-card.is-lose .game-button span {
  letter-spacing: .08em;-webkit-text-stroke: 1px rgba(23,0,45,.7);
  text-shadow: 0 0 8px rgba(255,255,255,.7),0 3px 0 rgba(20,0,50,.38);
}
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .result-card.is-lose .game-button { height: 54px; }
  .result-card.is-lose .result-actions { gap: 9px; }
}

/* Compact win/lose composition for short landscape screens. */
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .result-card.is-win,
  .result-card.is-lose {
    width: min(84vw, 620px);
    min-height: 0;
    max-height: calc(100vh - 30px);
    padding: 20px 22px;
    grid-template-columns: .82fr 1.18fr;
    grid-template-rows: auto auto auto;
    column-gap: 28px;
    row-gap: 7px;
    align-items: center;
  }
  .result-card.is-win #result-title,
  .result-card.is-lose #result-title {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    font-size: clamp(34px, 10vh, 48px);
  }
  .result-card.is-win #result-score,
  .result-card.is-lose #result-score {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    font-size: clamp(34px, 10vh, 48px);
  }
  .result-card.is-win #result-reward {
    grid-column: 1;
    grid-row: 3;
    margin: 2px 0 0;
    padding: 7px 10px;
  }
  .result-card.is-win .result-actions {
    grid-column: 2;
    grid-row: 1 / 4;
  }
  .result-card.is-lose .result-actions {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .result-card.is-win .game-button,
  .result-card.is-lose .game-button {
    height: 56px;
  }
}