:root {
  --ink: #15222d;
  --ice: #dff8ff;
  --ice-blue: #69d6f2;
  --deep-blue: #247da5;
  --sun: #ffd334;
  --orange: #ff7a2f;
  --red: #ef3e4a;
  --paper: #f7fdff;
}

* { box-sizing: border-box; }

html,
body {
  min-width: 300px;
  margin: 0;
  background: transparent;
}

button { font: inherit; -webkit-tap-highlight-color: transparent; }

.game {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 620px);
  min-height: 500px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  border: 2px solid #c9e5ed;
  border-radius: 16px;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 23%, rgba(255,255,255,.9) 0 7%, transparent 20%),
    linear-gradient(145deg, #effcff 0%, #d9f4fb 50%, #bfe7f1 100%);
  box-shadow: inset 0 0 44px rgba(45, 126, 158, .12);
  font-family: "Trebuchet MS", "Avenir Next", sans-serif;
  user-select: none;
}

.game::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  background-image:
    linear-gradient(30deg, transparent 48%, rgba(255,255,255,.75) 49% 51%, transparent 52%),
    linear-gradient(150deg, transparent 48%, rgba(255,255,255,.65) 49% 51%, transparent 52%);
  background-size: 86px 86px;
  content: "";
}

.hud {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 82px 1fr 108px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  border-bottom: 2px solid rgba(21,34,45,.16);
  background: rgba(250,254,255,.84);
  box-shadow: 0 5px 0 rgba(43,115,143,.08);
  backdrop-filter: blur(5px);
}

.hud-block { display: flex; flex-direction: column; line-height: 1; }
.hud-block span { font-size: .58rem; font-weight: 900; letter-spacing: .13em; color: var(--deep-blue); }
.hud-block strong { margin-top: 3px; font-size: 1.35rem; }

.progress-wrap {
  display: grid;
  grid-template-columns: 1fr 38px;
  align-items: center;
  gap: 8px;
}

.progress-track {
  position: relative;
  overflow: hidden;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #d7e5e9;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.12);
}

.progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-right: 2px solid var(--ink);
  background: linear-gradient(90deg, var(--orange), var(--sun));
  transition: width .28s cubic-bezier(.2,.8,.2,1);
}

.progress-track > b {
  position: absolute;
  z-index: 2;
  top: -5px;
  width: 3px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--ink);
  box-shadow: 0 0 0 2px rgba(255,255,255,.82);
}

.progress-wrap b { font-size: .78rem; font-weight: 1000; text-align: right; }

.hud-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.swipe-stock {
  display: flex;
  min-width: 40px;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.swipe-stock span {
  color: var(--deep-blue);
  font-size: .5rem;
  font-weight: 1000;
  letter-spacing: .08em;
}

.swipe-stock strong { margin-top: 2px; font-size: 1.2rem; }

.reset-button {
  width: 36px;
  min-height: 34px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 2px 3px 0 var(--ink);
  font-size: 1.05rem;
  font-weight: 1000;
  letter-spacing: .08em;
  cursor: pointer;
}

.reset-button:active { transform: translate(2px, 2px); box-shadow: none; }

.stage { position: absolute; inset: 64px 0 0; overflow: hidden; }

.cold-glow {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(255,255,255,.15), 0 0 0 27px rgba(60,169,205,.08);
}

.cold-glow-left { top: 12%; left: -24%; }
.cold-glow-right { right: -21%; bottom: 7%; }

.phone-shell {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 61%;
  height: 78%;
  transform: translateX(-50%) rotate(-1.2deg);
  border: clamp(7px, 1.7vw, 11px) solid var(--ink);
  border-radius: 11% / 7%;
  background: #17222b;
  box-shadow: 9px 12px 0 rgba(19,68,89,.2), 0 20px 35px rgba(29,101,130,.2);
  transition: transform .35s ease;
}

.phone-shell.is-warm { transform: translateX(-50%) rotate(0) scale(1.025); }

.phone-shell.is-stroke-locked #frost-canvas { cursor: not-allowed; }

.phone-shell.is-stroke-locked::after {
  position: absolute;
  z-index: 18;
  right: 7%;
  bottom: 5%;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  box-shadow: 2px 3px 0 var(--ink);
  content: attr(data-lock-label);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .08em;
  pointer-events: none;
  animation: lift-pop .25s ease both;
}

.phone-screen {
  position: absolute;
  inset: 2.4%;
  overflow: hidden;
  border-radius: 8% / 5%;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,246,160,.9), transparent 31%),
    linear-gradient(160deg, #fff4b8, #ffc75a 52%, #ff8b4a);
}

.phone-screen::after {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
  content: "";
}

.speaker {
  position: absolute;
  z-index: 5;
  top: 1.5%;
  left: 50%;
  width: 25%;
  height: 2.2%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #05080b;
}

.sun-badge {
  position: absolute;
  top: 7%;
  right: 8%;
  color: #fff5a3;
  font-size: clamp(34px, 9vw, 58px);
  filter: drop-shadow(2px 3px 0 rgba(159,65,25,.25));
  animation: sun-spin 9s linear infinite;
}

.warm-card {
  position: absolute;
  z-index: 2;
  top: 28%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.mascot {
  position: relative;
  width: clamp(100px, 26vw, 156px);
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 46% 46% 42% 42%;
  background: var(--orange);
  box-shadow: inset 0 -12px 0 rgba(187,45,35,.18), 5px 6px 0 rgba(131,51,26,.2);
}

.mascot-ear {
  position: absolute;
  top: -12%;
  width: 32%;
  height: 38%;
  border: 4px solid var(--ink);
  background: var(--orange);
  transform: rotate(35deg);
}

.mascot-ear-left { left: 1%; border-radius: 80% 15% 45% 25%; }
.mascot-ear-right { right: 1%; border-radius: 15% 80% 25% 45%; transform: rotate(-35deg); }
.mascot-eye { position: absolute; z-index: 2; top: 43%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.mascot-eye-left { left: 27%; }
.mascot-eye-right { right: 27%; }
.mascot b { position: absolute; z-index: 2; top: 61%; left: 50%; width: 22%; height: 11%; transform: translateX(-50%); border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 999px 999px; }
.warm-card strong { margin-top: 12px; color: #8e251e; font-size: clamp(1rem, 4.5vw, 1.65rem); letter-spacing: .08em; text-shadow: 0 2px 0 rgba(255,255,255,.5); }

.heat-bars { position: absolute; bottom: 9%; left: 50%; display: flex; gap: 10px; transform: translateX(-50%); }
.heat-bars i { display: block; width: 7px; height: 29px; border-radius: 999px; background: rgba(151,43,30,.55); animation: heat-wave 1.25s ease-in-out infinite; }
.heat-bars i:nth-child(2) { animation-delay: -.4s; }
.heat-bars i:nth-child(3) { animation-delay: -.8s; }

#frost-canvas {
  position: absolute;
  z-index: 8;
  inset: 2.4%;
  width: 95.2%;
  height: 95.2%;
  border-radius: 8% / 5%;
  cursor: grab;
  touch-action: none;
}

#frost-canvas:active { cursor: grabbing; }

.obstacle-layer {
  position: absolute;
  z-index: 10;
  inset: 2.4%;
  overflow: hidden;
  border-radius: 8% / 5%;
  pointer-events: none;
}

.ice-obstacle {
  position: absolute;
  border: 1px solid rgba(45, 131, 166, .7);
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(151,224,242,.94) 42%, rgba(225,252,255,.98) 66%, rgba(74,171,205,.86));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.45),
    0 3px 6px rgba(25,105,139,.4),
    inset 0 2px 2px rgba(255,255,255,.9);
}

.ice-obstacle::before,
.ice-obstacle::after {
  position: absolute;
  background: rgba(255,255,255,.82);
  content: "";
}

.ice-obstacle.is-horizontal {
  border-radius: 48% 36% 55% 42% / 52% 62% 38% 48%;
}

.ice-obstacle.is-horizontal::before {
  inset: 25% 4%;
  clip-path: polygon(0 55%,9% 10%,18% 65%,29% 22%,41% 74%,52% 15%,64% 59%,76% 4%,87% 70%,100% 28%,100% 50%,87% 91%,76% 32%,64% 84%,52% 39%,41% 94%,29% 49%,18% 88%,9% 38%,0 79%);
}

.ice-obstacle.is-horizontal::after {
  top: 12%;
  right: 8%;
  width: 22%;
  height: 18%;
  border-radius: 999px;
}

.ice-obstacle.is-vertical {
  border-radius: 54% 38% 48% 58% / 44% 58% 36% 62%;
}

.ice-obstacle.is-vertical::before {
  inset: 4% 25%;
  clip-path: polygon(52% 0,10% 9%,66% 18%,23% 29%,75% 41%,15% 52%,60% 64%,5% 76%,72% 87%,30% 100%,52% 100%,91% 87%,34% 76%,85% 64%,40% 52%,94% 41%,49% 29%,88% 18%,38% 9%,78% 0);
}

.ice-obstacle.is-vertical::after {
  bottom: 8%;
  left: 12%;
  width: 18%;
  height: 22%;
  border-radius: 999px;
}

.ice-edge { position: absolute; z-index: 9; left: 5%; width: 90%; height: 5%; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(37,117,148,.28)); }
.ice-edge::before { position: absolute; inset: 0; background: #eaffff; clip-path: polygon(0 0,100% 0,95% 55%,88% 28%,81% 90%,74% 40%,65% 74%,58% 20%,49% 95%,41% 38%,33% 80%,25% 22%,16% 73%,8% 34%); content: ""; }
.ice-edge-top { top: 2.4%; }
.ice-edge-bottom { bottom: 2.4%; transform: rotate(180deg); }

.swipe-hint {
  position: absolute;
  z-index: 14;
  top: 49%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  box-shadow: 3px 4px 0 rgba(21,34,45,.8);
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .13em;
  pointer-events: none;
  animation: hint-glide 1.35s ease-in-out infinite;
  transition: opacity .2s ease;
}

.swipe-hint i { width: 27px; height: 4px; border-radius: 4px; background: var(--deep-blue); box-shadow: 0 -6px 0 -1px var(--ice-blue); }
.swipe-hint.is-hidden { opacity: 0; }

.feedback {
  position: absolute;
  z-index: 16;
  bottom: 3%;
  left: 50%;
  min-width: 155px;
  transform: translateX(-50%) translateY(12px) scale(.9);
  opacity: 0;
  padding: 9px 14px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  box-shadow: 3px 4px 0 var(--ink);
  font-size: .72rem;
  font-weight: 1000;
  text-align: center;
  letter-spacing: .05em;
  pointer-events: none;
}

.feedback.is-visible { animation: feedback-pop .72s ease both; }

.overlay {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  background: rgba(23,48,61,.38);
  backdrop-filter: blur(4px);
  transition: opacity .25s ease, visibility .25s ease;
}

.overlay.is-visible { visibility: visible; opacity: 1; }

.result-card {
  position: relative;
  width: min(72%, 330px);
  transform: translateY(18px) scale(.88) rotate(-1deg);
  padding: 26px 20px 20px;
  border: 3px solid var(--ink);
  border-radius: 20px 14px 22px 16px;
  background: #fffdf3;
  box-shadow: 8px 9px 0 var(--ink);
  text-align: center;
  transition: transform .38s cubic-bezier(.18,.9,.28,1.24);
}

.overlay.is-visible .result-card { transform: translateY(0) scale(1) rotate(-1deg); }
.result-icon { display: grid; width: 70px; aspect-ratio: 1; margin: -62px auto 9px; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--sun); box-shadow: 4px 5px 0 var(--ink); font-size: 2.1rem; }
.result-card h1 { margin: 7px 0 2px; font-size: clamp(1.7rem, 7vw, 2.65rem); line-height: .95; letter-spacing: -.04em; }
.result-card p { margin: 9px 0 16px; color: var(--deep-blue); font-size: .78rem; font-weight: 1000; letter-spacing: .11em; }

.play-again {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  background: var(--sun);
  box-shadow: 4px 5px 0 var(--ink);
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .08em;
  cursor: pointer;
}

.play-again b { font-size: 1.25rem; }
.play-again:active { transform: translate(3px, 3px); box-shadow: 1px 2px 0 var(--ink); }

.result-card.is-loss { width: min(64%, 285px); padding-top: 24px; }
.result-card.is-loss .result-icon { background: var(--ice-blue); }
.result-card.is-loss .play-again { background: var(--red); color: #fff; }

.snow-burst { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.snow-burst i { position: absolute; top: -8%; width: 10px; aspect-ratio: 1; border-radius: 2px; background: #fff; animation: snow-fall 1.4s ease-in forwards; }
.snow-burst i:nth-child(1) { left: 12%; animation-delay: .05s; }
.snow-burst i:nth-child(2) { left: 24%; animation-delay: .3s; background: var(--sun); }
.snow-burst i:nth-child(3) { left: 37%; animation-delay: .12s; }
.snow-burst i:nth-child(4) { left: 48%; animation-delay: .42s; background: var(--orange); }
.snow-burst i:nth-child(5) { left: 61%; animation-delay: .22s; }
.snow-burst i:nth-child(6) { left: 73%; animation-delay: .08s; background: var(--sun); }
.snow-burst i:nth-child(7) { left: 84%; animation-delay: .37s; }
.snow-burst i:nth-child(8) { left: 92%; animation-delay: .18s; background: var(--orange); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@keyframes hint-glide { 0%,100% { transform: translate(-62%,-50%) rotate(-8deg); } 50% { transform: translate(-38%,-50%) rotate(-8deg); } }
@keyframes feedback-pop { 0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.9); } 22%,72% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.96); } }
@keyframes sun-spin { to { transform: rotate(360deg); } }
@keyframes heat-wave { 0%,100% { transform: translateY(6px) scaleY(.7); opacity: .45; } 50% { transform: translateY(-5px) scaleY(1.15); opacity: .9; } }
@keyframes snow-fall { to { transform: translateY(820px) rotate(540deg); opacity: .2; } }
@keyframes lift-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 420px) {
  .game { min-height: 460px; border-radius: 10px; }
  .hud { grid-template-columns: 68px 1fr 94px; gap: 6px; padding-inline: 8px; }
  .hud-actions { gap: 4px; }
  .reset-button { width: 32px; }
  .phone-shell { top: 8%; width: 65%; height: 76%; }
  .result-card { width: 76%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Iframe sizing: preserve the game ratio while respecting short and narrow frames. */
html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  background: var(--ice);
}

.ambient-scene-copy {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 0 !important;
  margin: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: blur(12px) saturate(.88) brightness(.94);
  opacity: .38;
  pointer-events: none !important;
  transform-origin: center;
  user-select: none;
}

.ambient-scene-copy--left { left: 12% !important; transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); }
.ambient-scene-copy--right { left: 88% !important; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); }

.ambient-scene-copy *,
.ambient-scene-copy *::before,
.ambient-scene-copy *::after { animation-play-state: paused !important; }

@media (max-width: 700px) {
  .ambient-scene-copy--left { left: 50% !important; transform: translate(-50%, -50%) scale(1.9); }
  .ambient-scene-copy--right { display: none !important; }
}

.game {
  z-index: 1;
  width: min(100vw, 620px, 80vh);
  height: auto;
  min-height: 0;
  max-height: 100vh;
  margin: 0;
}

@supports (height: 100dvh) {
  .game {
    width: min(100vw, 620px, 80dvh);
    max-height: 100dvh;
  }
}