.icy-game {
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: #fff;
  background: #0c0a18;
  color-scheme: dark;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.icy-game, .icy-game * { box-sizing: border-box; }
.icy-game button, .icy-game a { -webkit-tap-highlight-color: transparent; }
.icy-game button { font: inherit; }
.icy-game button:focus-visible, .icy-game a:focus-visible { outline: 4px solid #7ee845; outline-offset: 4px; }

.icy-game .tower-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 30%, #36325b 0 4%, transparent 35%),
    repeating-linear-gradient(0deg, #121025 0 34px, #0a0917 35px 39px);
}

.icy-game canvas { width: 100%; height: 100%; display: block; touch-action: none; }

.icy-game .icy-hud {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.icy-game .icy-brand {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #fff;
  direction: ltr;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-shadow: 0 3px 0 #0a0918, 0 5px 12px #000;
  pointer-events: auto;
}
.icy-game .icy-brand b { font: 950 25px/1 Arial, sans-serif; letter-spacing: -3px; }
.icy-game .icy-brand span { color: #77e424; font: 900 8px/1 Arial, sans-serif; letter-spacing: 2px; }

.icy-game .tower-gauge {
  position: absolute;
  top: max(19px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  width: 72px;
  display: grid;
  justify-items: center;
  filter: drop-shadow(0 5px 2px #05061199) drop-shadow(0 10px 18px #0009);
}

.icy-game .clock-face {
  position: relative;
  width: 66px;
  height: 66px;
  z-index: 2;
  border: 7px solid #f4b900;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#25233d 0 2deg, transparent 2deg 30deg),
    radial-gradient(circle, #fffdf1 0 55%, #bdc0ce 57% 64%, #fff 66%);
  box-shadow: inset 0 0 0 3px #6f3d08, 0 0 0 3px #12101e;
}
.icy-game .clock-face::before {
  content: "";
  position: absolute;
  width: 19px;
  height: 8px;
  left: 16px;
  top: -17px;
  border: 3px solid #171423;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f4b900;
}
.icy-game .clock-face i, .icy-game .clock-face span {
  position: absolute;
  left: 27px;
  bottom: 27px;
  width: 5px;
  height: 23px;
  border-radius: 5px;
  background: #e72d26;
  box-shadow: 0 0 0 2px #53151a;
  transform-origin: 50% 100%;
}
.icy-game .clock-face i { transform: rotate(11deg); }
.icy-game .clock-face span { height: 16px; transform: rotate(142deg); }
.icy-game .clock-face::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  left: 25px;
  top: 25px;
  border-radius: 50%;
  background: #592125;
}

.icy-game .thermometer {
  position: relative;
  width: 38px;
  height: 142px;
  margin-top: -2px;
  padding: 7px;
  overflow: hidden;
  border: 6px solid #f4b900;
  border-radius: 17px 17px 12px 12px;
  background: #080812;
  box-shadow: inset 0 0 0 3px #713e0a, 0 0 0 3px #12101e;
}
.icy-game .thermometer i {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  height: 13%;
  min-height: 12px;
  border-radius: 7px;
  background: linear-gradient(90deg, #ff891c, #ff241b 45%, #ff756e 75%, #bd0d14);
  box-shadow: 0 0 10px #ff2b20aa;
  transition: height .12s linear;
}
.icy-game .tower-gauge strong {
  min-width: 96px;
  margin-top: -4px;
  color: #fff;
  text-align: center;
  font: 950 30px/1 "Arial Black", Impact, sans-serif;
  letter-spacing: -2px;
  -webkit-text-stroke: 2px #161325;
  text-shadow: 0 4px 0 #494567, 0 7px 0 #11101d;
  transform: rotate(-3deg);
}
.icy-game .tower-gauge strong small { display: block; font-size: 12px; letter-spacing: 0; }

.icy-game .icy-meters {
  position: absolute;
  top: max(17px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  gap: 7px;
  direction: rtl;
  translate: -50% 0;
}
.icy-game .icy-meters span {
  min-width: 80px;
  padding: 7px 11px 8px;
  border: 3px solid #11101d;
  border-radius: 8px;
  background: linear-gradient(#f7f1db, #d7d0ba);
  box-shadow: inset 0 0 0 2px #fff9, 0 5px 0 #37334b, 0 8px 15px #0008;
  color: #4c4560;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
}
.icy-game .icy-meters b { display: block; margin-top: 2px; color: #171421; font: 950 18px/1 "Arial Black", Arial, sans-serif; }

.icy-game .icy-hud-actions {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  top: max(57px, calc(env(safe-area-inset-top) + 57px));
  display: flex;
  gap: 7px;
  pointer-events: auto;
}
.icy-game .icy-hud-actions button {
  width: 38px;
  height: 38px;
  border: 3px solid #11101d;
  border-radius: 50%;
  background: linear-gradient(#8b78cc, #55417f);
  box-shadow: inset 0 0 0 2px #b7a8ed, 0 4px 0 #29213e;
  color: white;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}
.icy-game .icy-hud-actions button.off { filter: grayscale(1) brightness(.7); }

.icy-game .icy-panel { display: none; position: absolute; z-index: 10; }
.icy-game .icy-panel.show { display: block; }
.icy-game .icy-dialog-layer {
  inset: 0;
  padding: max(17px, env(safe-area-inset-top)) max(17px, env(safe-area-inset-right)) max(17px, env(safe-area-inset-bottom)) max(17px, env(safe-area-inset-left));
  place-items: center;
  overflow: auto;
  background: #080611d9;
  backdrop-filter: blur(5px);
}
.icy-game .icy-dialog-layer.show { display: grid; }

.icy-game .intro-panel {
  inset: 0;
  overflow: hidden;
  background: #17152d url('/assets/icy-tower/icy-title-backdrop-v2.webp') center/cover no-repeat;
}
.icy-game .intro-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, transparent 10%, #0e0a1a55 70%, #080611c7),
    linear-gradient(90deg, #1e0e20aa 0 25%, transparent 52%, #100b1a77);
}
.icy-game .intro-wash {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(circle, #05d7d7 0 3px, transparent 4px);
  background-size: 89px 83px;
  mix-blend-mode: screen;
  animation: icy-shimmer 7s ease-in-out infinite alternate;
}

.icy-game .title-lockup {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 5.5%;
  width: min(47vw, 560px);
  direction: rtl;
  transform: rotate(-3deg);
  text-align: center;
  filter: drop-shadow(0 13px 0 #121021) drop-shadow(0 25px 22px #0009);
}
.icy-game .title-lockup small {
  color: #9eff59;
  font-size: clamp(8px, .85vw, 13px);
  font-weight: 950;
  letter-spacing: 4px;
  text-shadow: 0 2px #111;
}
.icy-game .title-lockup h1 { margin: 6px 0 0; line-height: .72; }
.icy-game .title-lockup h1 span, .icy-game .title-lockup h1 em {
  display: block;
  font-family: "Arial Black", Impact, sans-serif;
  font-style: normal;
  font-size: clamp(64px, 9vw, 142px);
  letter-spacing: -8px;
  color: #ffc52e;
  background: linear-gradient(#ffe04e 8%, #ff8a1f 58%, #a72e78 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(2px, .45vw, 7px) #111321;
  paint-order: stroke fill;
}
.icy-game .title-lockup h1 em { color: #ff961e; transform: translateX(10%) skew(-7deg); }
.icy-game .title-lockup p {
  display: inline-block;
  margin: 20px 0 0;
  padding: 7px 14px;
  border: 3px solid #151323;
  border-radius: 18px;
  background: #5f238ccc;
  color: #fff3d4;
  font-weight: 900;
  font-size: clamp(11px, 1.2vw, 17px);
}

.icy-game .intro-hero {
  position: absolute;
  z-index: 2;
  right: 11%;
  top: 3%;
  width: min(35vw, 535px);
  height: auto;
  filter: drop-shadow(0 22px 0 #10111f88) drop-shadow(0 38px 28px #0009);
  animation: icy-hero-float 3.2s ease-in-out infinite;
}

.icy-game .paper-menu, .icy-game .paper-dialog {
  color: #201c2c;
  background:
    linear-gradient(100deg, transparent 48%, #b8aa8355 49% 51%, transparent 52%),
    radial-gradient(circle at 18% 20%, #fffef3 0 1px, transparent 2px),
    #eee6cc;
  box-shadow: 0 0 0 5px #161321, 0 15px 0 #393049, 0 28px 60px #000a;
}

.icy-game .paper-menu {
  position: absolute;
  z-index: 4;
  right: 5.5%;
  bottom: 7%;
  width: min(33vw, 440px);
  min-width: 330px;
  padding: 28px 34px 25px;
  transform: rotate(1.1deg);
  clip-path: polygon(0 3%, 7% 0, 97% 2%, 100% 12%, 98% 96%, 89% 100%, 4% 97%);
}
.icy-game .paper-menu::before, .icy-game .paper-menu::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 18px;
  background: #76d9dcaa;
  box-shadow: 0 2px 4px #0004;
}
.icy-game .paper-menu::before { top: -6px; left: 22px; transform: rotate(-5deg); }
.icy-game .paper-menu::after { right: 28px; bottom: -6px; transform: rotate(4deg); }
.icy-game .paper-menu > small { color: #766b78; font-weight: 900; letter-spacing: 2px; }
.icy-game .paper-fold {
  position: absolute;
  right: 0;
  top: 0;
  width: 58px;
  height: 58px;
  background: linear-gradient(225deg, #988f76 0 48%, #fff7da 50%);
  filter: drop-shadow(-4px 5px 2px #0003);
}
.icy-game .menu-primary {
  width: 100%;
  margin: 10px 0 16px;
  min-height: 58px;
  padding: 11px 18px;
  border: 4px solid #171321;
  border-bottom-width: 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, #c8f678 0%, #82d839 58%, #5cab28 100%);
  box-shadow: inset 0 0 0 3px #f4ffd099, 0 7px 0 #39224d, 0 13px 24px #0006;
  color: #171321;
  text-align: center;
  font: 950 clamp(23px, 2.4vw, 36px)/1.15 "Arial Black", Arial, sans-serif;
  cursor: pointer;
  transform: rotate(-1deg);
  touch-action: manipulation;
}
.icy-game .menu-primary span { color: #64238b; margin-left: 8px; -webkit-text-stroke: 1px #111; }
.icy-game .menu-primary:hover { color: #3e1558; translate: 0 -2px; filter: brightness(1.08); }
.icy-game .menu-primary:active { translate: 0 5px; box-shadow: inset 0 0 0 3px #f4ffd099, 0 2px 0 #39224d, 0 6px 14px #0007; }
.icy-game .how { display: grid; gap: 7px; margin: 7px 0 13px; }
.icy-game .how span { display: flex; align-items: center; gap: 5px; color: #4e4556; }
.icy-game .how b { margin-right: 7px; font-size: 12px; }
.icy-game kbd {
  display: inline-grid;
  place-items: center;
  min-width: 29px;
  height: 26px;
  border: 2px solid #1b1823;
  border-bottom-width: 4px;
  border-radius: 5px;
  background: #fffcf0;
  color: #1b1823;
  font: 950 12px Arial, sans-serif;
}
.icy-game .paper-menu p { margin: 9px 0 8px; color: #786e78; font-size: 10px; font-weight: 700; }
.icy-game .icy-text-link { border: 0; padding: 0; background: transparent; color: #5a247e; font-size: 12px; font-weight: 900; text-decoration: underline; cursor: pointer; }
.icy-game .icy-legal {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  width: 100%;
  color: #ddd4d0;
  text-align: center;
  font-size: 9px;
  text-shadow: 0 2px #000;
}

.icy-game .paper-dialog {
  width: min(470px, calc(100% - 34px));
  height: max-content;
  max-height: calc(100dvh - 34px);
  padding: 36px 38px;
  overflow: auto;
  text-align: center;
  transform: rotate(-.8deg);
  clip-path: polygon(2% 0, 96% 2%, 100% 9%, 98% 96%, 91% 100%, 3% 97%, 0 9%);
  filter: drop-shadow(0 18px 20px #0009);
}
.icy-game .paper-dialog > small { color: #6b2a8c; font: 950 12px Arial, sans-serif; letter-spacing: 4px; }
.icy-game .paper-dialog h2 { margin: 6px 0 8px; font: 950 31px/1.2 "Arial Black", Arial, sans-serif; }
.icy-game .paper-dialog p { margin: 0 0 15px; color: #716677; font-size: 13px; }
.icy-game .paper-dialog .menu-primary { text-align: center; font-size: 23px; }
.icy-game .icy-result { display: flex; justify-content: center; gap: 31px; margin: 22px 0; }
.icy-game .icy-result span { color: #766d78; font-size: 10px; font-weight: 900; }
.icy-game .icy-result b { display: block; margin-top: 4px; color: #211c2b; font: 950 29px/1 "Arial Black", Arial, sans-serif; }

.icy-game .icy-toast {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 17%;
  max-width: 80%;
  color: #ffdf38;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 30px;
  scale: .45;
  rotate: -5deg;
  pointer-events: none;
  font: 950 clamp(27px, 6vw, 72px)/.8 "Arial Black", Impact, sans-serif;
  letter-spacing: -4px;
  -webkit-text-stroke: clamp(3px, .55vw, 8px) #11121d;
  paint-order: stroke fill;
  text-shadow: 0 8px 0 #5d237f, 0 17px 22px #000b;
  transition: opacity .12s, translate .28s cubic-bezier(.2, 1.5, .4, 1), scale .28s cubic-bezier(.2, 1.5, .4, 1);
}
.icy-game .icy-toast.show { opacity: 1; translate: -50% 0; scale: 1; }

.icy-game .icy-touch {
  display: none;
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  justify-content: space-between;
  padding: 0 max(28px, env(safe-area-inset-left));
  direction: ltr;
  pointer-events: none;
}
.icy-game .icy-touch button {
  width: 84px;
  height: 70px;
  border: 4px solid #13111f;
  border-radius: 19px;
  background: linear-gradient(#f4eacd, #c9bea5);
  box-shadow: inset 0 0 0 3px #fff9, 0 7px 0 #4e465d, 0 12px 24px #0008;
  color: #2c2740;
  font-size: 28px;
  font-weight: 950;
  pointer-events: auto;
  touch-action: none;
}
.icy-game .icy-touch button:active { translate: 0 5px; box-shadow: inset 0 0 0 3px #fff9, 0 2px 0 #4e465d; }
.icy-game .icy-touch .icy-jump { width: 96px; border-radius: 50% 50% 20px 20px; background: linear-gradient(#c6f075, #6fbd30); }
.icy-game .icy-touch .icy-jump small { display: block; font-size: 9px; line-height: 1; }
.icy-game.icy-challenge .icy-brand { display: none; }
.network-mount > .icy-game { position: absolute; }

@keyframes icy-hero-float { 0%,100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -12px; rotate: 1deg; } }
@keyframes icy-shimmer { from { opacity: .08; translate: 0 0; } to { opacity: .26; translate: 22px -10px; } }

@media (pointer: coarse), (max-width: 760px) {
  .icy-game .icy-touch { display: flex; }
  .icy-game[data-state="intro"] .icy-touch,
  .icy-game[data-state="paused"] .icy-touch,
  .icy-game[data-state="over"] .icy-touch { display: none; }
  .icy-game .icy-brand { top: 9px; right: 10px; }
  .icy-game .icy-brand span { display: none; }
  .icy-game .tower-gauge { top: 11px; left: 11px; scale: .7; transform-origin: top left; }
  .icy-game .icy-meters { top: 10px; gap: 3px; }
  .icy-game .icy-meters span { min-width: 55px; padding: 6px 5px; font-size: 7px; }
  .icy-game .icy-meters span:nth-child(3), .icy-game .icy-meters span:nth-child(4) { display: none; }
  .icy-game .icy-meters b { font-size: 14px; }
  .icy-game .icy-hud-actions { right: 9px; top: 47px; gap: 4px; }
  .icy-game .icy-hud-actions button { width: 33px; height: 33px; font-size: 15px; }

  .icy-game .title-lockup { top: 5%; left: 50%; width: 92vw; translate: -50% 0; }
  .icy-game .title-lockup h1 span, .icy-game .title-lockup h1 em { font-size: clamp(60px, 18vw, 104px); }
  .icy-game .title-lockup p { margin-top: 13px; }
  .icy-game .intro-hero { right: -3%; top: 26%; width: min(63vw, 390px); }
  .icy-game .paper-menu { right: 50%; bottom: 7%; width: min(88vw, 440px); min-width: 0; padding: 22px 27px 21px; translate: 50% 0; }
  .icy-game .menu-primary { font-size: 25px; }
  .icy-game .paper-dialog { width: min(440px, calc(100% - 18px)); padding: 31px 24px 28px; }
  .icy-game .how span:nth-child(2) { display: flex; }
  .icy-game .icy-legal { display: none; }
}

@media (max-height: 610px) and (orientation: landscape) {
  .icy-game .title-lockup { top: 5%; left: 4%; width: 42vw; }
  .icy-game .title-lockup h1 span, .icy-game .title-lockup h1 em { font-size: clamp(48px, 8vw, 88px); }
  .icy-game .title-lockup p { display: none; }
  .icy-game .intro-hero { top: -3%; right: 28%; width: min(31vw, 310px); }
  .icy-game .paper-menu { right: 3.5%; bottom: 5%; width: 35vw; min-width: 295px; padding: 19px 28px 17px; }
  .icy-game .paper-menu p { display: none; }
  .icy-game .menu-primary { margin: 5px 0 9px; font-size: 22px; }
  .icy-game .how { gap: 3px; }
  .icy-game .how span { font-size: 10px; }
  .icy-game .how b { font-size: 10px; }
  .icy-game .icy-legal { display: none; }
  .icy-game .icy-touch { padding: 0 22px; bottom: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .icy-game *, .icy-game *::before, .icy-game *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .icy-game .icy-toast { transition-duration: .001ms; }
}