/* =========================================================================
   Count War — DOM UI styles
   Designed at 1280x800, fluid down to 390x844 portrait.
   ========================================================================= */

/* fonts ------------------------------------------------------------------ */
@font-face {
  font-family: 'Titan One';
  src: url('../assets/fonts/titan-one.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/baloo2-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/baloo2-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/baloo2-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

/* page ------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d2740;
}
body {
  font-family: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { position: fixed; inset: 0; overflow: hidden; }
#game-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* root ------------------------------------------------------------------- */
#ui-root.cw-ui {
  --navy: #274156;
  --navy-deep: #1a3042;
  --navy-ink: #123047;
  --navy-line: #203a55;
  --blue: #3b8ed8;
  --blue-hi: #5aa6ee;
  --blue-deep: #2a6fb5;
  --gold: #fac902;
  --gold-soft: #ffcf3e;
  --gold-deep: #e8950e;
  --orange: #ffa227;
  --red: #d4442f;
  --red-deep: #b3301d;
  --green: #34c13b;
  --white: #fff;
  --font-display: 'Titan One', 'Baloo 2', sans-serif;
  --font-ui: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
  --card-w: clamp(104px, 11.7vw, 150px);
  --side-w: clamp(96px, 11.3vw, 145px);

  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 800;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
:where(#ui-root.cw-ui button) {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
:where(#ui-root.cw-ui svg) { display: block; overflow: visible; }
#ui-root.cw-ui .is-hidden { display: none !important; }

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

/* layers ----------------------------------------------------------------- */
.ui-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s linear;
  pointer-events: none;
}
.ui-layer.is-visible {
  opacity: 1;
  visibility: visible;
}
.ui-loading { z-index: 120; }
.ui-menu { z-index: 60; }
.ui-hud { z-index: 40; }
.ui-event { z-index: 48; }
.ui-victory { z-index: 72; }
.ui-keep { z-index: 76; }
.ui-pause { z-index: 82; }
.ui-fakead { z-index: 94; }

/* shared ----------------------------------------------------------------- */
.ic-coin { width: 1em; height: 1em; flex: none; }
.icon-mouse { width: 1em; height: auto; }
.icon-video { width: 1em; height: auto; }
.icon-arrow { width: 62%; height: 62%; }

.coin-pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  height: clamp(34px, 4.8vh, 48px);
  padding: 0 clamp(10px, 1vw, 14px) 0 clamp(14px, 1.5vw, 22px);
  border-radius: 999px;
  background: var(--navy);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 3px 10px rgba(8, 28, 44, .18);
  font-size: clamp(19px, 2.3vw, 29px);
  letter-spacing: .01em;
}
.coin-pill .ic-coin { width: 1.18em; height: 1.18em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .18)); }

.hotkey {
  position: absolute;
  z-index: 4;
  top: -10px;
  left: -10px;
  display: grid;
  place-items: center;
  min-width: 1.9em;
  padding: .12em .34em .18em;
  border: 3px solid #fff;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.15vw, 16px);
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 3px 0 rgba(12, 32, 50, .22);
}
.hotkey-blue { background: #3f5cdb; }
.hotkey-red { background: #a02a1c; }
.hotkey-orange { background: #c97a15; }
.hotkey-purple { background: #8a2be2; }
.hotkey-gold { background: #eaa42c; }

.space-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .06em .5em .12em;
  border-radius: .34em;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .02em;
  box-shadow: 0 2px 0 rgba(17, 45, 70, .16);
}
.space-pill.gold { color: #ffa800; }

.big-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .16em;
  min-width: clamp(230px, 28vw, 360px);
  min-height: clamp(64px, 11.7vh, 100px);
  padding: .28em 1.1em .5em;
  border: clamp(3px, .32vw, 4px) solid #fff;
  border-radius: clamp(12px, 1.2vw, 17px);
  background: linear-gradient(180deg, #4b9ae2 0%, var(--blue) 46%, #317fc8 100%);
  box-shadow: 0 7px 0 #2b6ea8, 0 12px 20px rgba(10, 34, 56, .26);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 2.8vw, 34px);
  color: #fff;
  text-shadow: 0 2px 0 rgba(24, 77, 124, .55);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.big-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 #2b6ea8, 0 6px 12px rgba(10, 34, 56, .22); }
.big-btn.secondary {
  background: linear-gradient(180deg, #3d5d77 0%, var(--navy) 55%, #1e3548 100%);
  box-shadow: 0 7px 0 #14283a, 0 12px 20px rgba(10, 34, 56, .26);
  text-shadow: 0 2px 0 rgba(10, 26, 40, .5);
}
.big-btn.secondary:active { box-shadow: 0 3px 0 #14283a, 0 6px 12px rgba(10, 34, 56, .22); }
.btn-label { display: block; line-height: 1.02; letter-spacing: .02em; }
.btn-keys {
  display: inline-flex;
  align-items: center;
  gap: .38em;
  font-family: var(--font-display);
  font-size: .58em;
  color: #fff;
}
.btn-keys .space-pill { font-size: .86em; }
.btn-keys .icon-mouse { height: 1.5em; width: auto; }
.continue-btn { width: clamp(236px, 28vw, 360px); }

.icon-btn {
  display: grid;
  place-items: center;
  width: clamp(44px, 4.7vw, 60px);
  height: clamp(44px, 4.7vw, 60px);
  border: clamp(3px, .28vw, 4px) solid #fff;
  border-radius: 30%;
  background: linear-gradient(180deg, #4a7ba2, #2f5573);
  box-shadow: 0 4px 0 rgba(13, 39, 58, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .12s ease, filter .12s ease;
}
.icon-btn:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); }
.icon-btn:active { transform: translateY(2px) scale(.97); }
.icon-btn svg { width: 58%; height: 58%; }
.icon-btn .icon-sound-off { display: none; }
.icon-btn.is-muted .icon-sound-on { display: none; }
.icon-btn.is-muted .icon-sound-off { display: block; }
.icon-btn.is-muted { background: linear-gradient(180deg, #5c7488, #3a5062); }

:focus-visible {
  outline: 4px solid #ffd943 !important;
  outline-offset: 3px;
}

/* =========================================================================
   LOADING
   ========================================================================= */
.ui-loading.is-visible {
  pointer-events: auto;
  background: radial-gradient(120% 100% at 50% 0%, #173c5c 0%, #0d2740 55%, #081b2c 100%);
}
.loading-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 20px);
}
.loading-logo {
  display: flex;
  align-items: baseline;
  gap: .14em;
  font-family: var(--font-display);
  font-size: clamp(44px, 6.6vw, 86px);
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 5px 0 #153a58, 0 9px 22px rgba(0, 0, 0, .35);
}
.logo-war { color: var(--gold); }
.loading-tag {
  color: #8fc0e8;
  font-size: clamp(11px, 1.1vw, 15px);
  letter-spacing: .34em;
  opacity: .85;
}
.loading-track {
  width: clamp(230px, 30vw, 380px);
  height: clamp(14px, 1.7vw, 20px);
  margin-top: clamp(14px, 2.4vh, 24px);
  border-radius: 999px;
  background: rgba(4, 18, 30, .55);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .1);
  overflow: hidden;
}
.loading-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe066, var(--gold) 60%, #f0a800);
  box-shadow: 0 0 12px rgba(255, 200, 60, .55);
  transition: width .25s ease;
}
.loading-value {
  display: flex;
  gap: 1.1em;
  margin-top: .4em;
  color: #cfe6f8;
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: .16em;
}

/* =========================================================================
   MENU
   ========================================================================= */
.ui-menu.is-visible { pointer-events: auto; }
.ui-menu .sound-btn { position: absolute; top: clamp(18px, 5.2vh, 44px); left: clamp(16px, 2.6vw, 34px); }

.level-panel {
  position: absolute;
  top: clamp(18px, 5.4vh, 46px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, .5vh, 6px);
  width: clamp(248px, 23.2vw, 297px);
  padding: clamp(10px, 1.6vh, 15px) clamp(12px, 1.2vw, 18px) clamp(5px, .8vh, 8px);
  border-radius: clamp(16px, 1.7vw, 23px);
  background: linear-gradient(180deg, #2d4a62 0%, var(--navy) 46%, #22394c 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 4px 0 rgba(10, 30, 46, .35), 0 10px 22px rgba(8, 28, 44, .22);
}
.pips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 clamp(2px, .3vw, 5px);
}
.pip {
  position: relative;
  width: clamp(15px, 1.55vw, 20px);
  height: clamp(26px, 4.6vh, 36px);
  border-radius: 999px;
  background: #4f7b9f;
  box-shadow: inset 0 3px 0 rgba(9, 31, 46, .22), inset 0 -2px 0 rgba(255, 255, 255, .08);
  transition: background .25s ease, transform .25s ease;
}
.pip.is-filled {
  background: linear-gradient(180deg, #ffe04a, var(--gold) 60%, #f0b800);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 6px rgba(255, 200, 40, .28);
}
.pip.has-marker { background: #4f7b9f; }
.pip-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(34px, 3.6vw, 48px);
  height: clamp(34px, 3.6vw, 48px);
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: drop-shadow(0 2px 2px rgba(8, 24, 38, .3));
}
.pip-marker svg { width: 100%; height: 100%; }
.pip.has-marker .pip-marker { animation: marker-pop .45s cubic-bezier(.2, 1.5, .5, 1) backwards; }
.pip:nth-child(5) .pip-marker { animation-delay: .05s; }
.pip:nth-child(10) .pip-marker { animation-delay: .1s; }
.level-caption {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 26px);
  letter-spacing: .035em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(8, 26, 40, .4);
  margin-top: clamp(1px, .3vh, 3px);
}

.menu-coins {
  position: absolute;
  top: clamp(21px, 5.7vh, 49px);
  right: clamp(16px, 2.2vw, 28px);
}

/* idle mine bubble fallback */
.idle-coin-bubble {
  position: absolute;
  left: 57.5%;
  top: 28.5%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: .18em;
  padding: clamp(7px, 1.1vh, 12px) clamp(11px, 1.3vw, 18px) clamp(8px, 1.2vh, 13px);
  border-radius: 999px;
  background: #fff;
  color: #f08a00;
  font-size: clamp(17px, 2vw, 27px);
  letter-spacing: .01em;
  box-shadow: 0 4px 0 rgba(12, 34, 52, .18), 0 8px 18px rgba(12, 34, 52, .18);
  animation: bubble-bob 2.2s ease-in-out infinite;
  z-index: 2;
}
.idle-coin-bubble::after {
  content: '';
  position: absolute;
  left: 42%;
  top: 100%;
  margin-top: -4px;
  border: 11px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
.idle-coin-bubble .ic-coin { width: 1.1em; height: 1.1em; }

.menu-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(32px, 9.1vh, 74px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2vh, 22px);
}
.press-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, .6vw, 9px);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 26px);
  letter-spacing: .03em;
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.press-prompt .space-pill { font-size: 1em; padding: .04em .46em .1em; border-radius: 9px; }
.press-prompt .mouse-wrap { display: inline-flex; align-items: center; }
.press-prompt .icon-mouse { height: clamp(26px, 3.1vw, 39px); color: #26405a; }
.prompt-or { margin: 0 .1em; }
.prompt-touch { display: none; }

.upgrade-row { display: flex; align-items: flex-end; gap: clamp(10px, 1.6vw, 22px); }
.upgrade-card {
  --card-bg: #d4defa;
  --card-lip: #adc0ef;
  --card-art: #112a80;
  --card-title: #091f5f;
  position: relative;
  width: var(--card-w);
  aspect-ratio: 150 / 182;
  padding: clamp(3px, .3vw, 5px);
  border: clamp(3px, .32vw, 4px) solid #fff;
  border-radius: clamp(11px, 1.1vw, 15px);
  background: var(--card-bg);
  box-shadow: 0 7px 0 var(--card-lip), 0 13px 20px rgba(14, 40, 58, .22);
  transition: transform .14s cubic-bezier(.2, 1.4, .4, 1), box-shadow .14s ease, filter .14s ease;
  pointer-events: auto;
}
.upgrade-card.kind-dmg { --card-bg: #f1c8c0; --card-lip: #dda79c; --card-art: #881b12; --card-title: #7e1a11; }
.upgrade-card.kind-coin { --card-bg: #feedc4; --card-lip: #ecd28e; --card-art: #956315; --card-title: #8a5a12; }
.upgrade-card:hover { transform: translateY(-6px) rotate(-1deg) scale(1.035); }
.upgrade-card:active { transform: translateY(2px) scale(.985); box-shadow: 0 3px 0 var(--card-lip), 0 6px 10px rgba(14, 40, 58, .22); }
.upgrade-card.is-poor { filter: saturate(.82) brightness(.97); }
.upgrade-card.is-poor .cost-num { color: #ffd7d2; }
.upgrade-card.is-maxed { filter: saturate(.9); }

.card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(6px, .75vw, 10px) clamp(6px, .75vw, 10px) clamp(4px, .5vw, 7px);
  border-bottom: clamp(4px, .4vw, 5px) solid var(--card-art);
  border-radius: clamp(8px, .8vw, 11px);
  background: var(--card-bg);
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .15em;
  padding: 0 clamp(1px, .3vw, 4px);
  color: var(--card-title);
  white-space: nowrap;
}
.card-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.38vw, 18px);
  letter-spacing: .015em;
}
.card-lv { font-family: var(--font-display); font-size: clamp(11px, 1.15vw, 15px); opacity: .95; }
.card-art {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  margin: clamp(4px, .5vw, 6px) 0 clamp(3px, .35vw, 4px);
  border-radius: clamp(6px, .65vw, 9px);
  background: var(--card-art);
  overflow: hidden;
}
.card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), transparent 46%);
  pointer-events: none;
}
.card-art .art { width: 92%; height: 92%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .18)); }
.card-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2em;
  padding: .05em 0 .02em;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 25px);
  text-shadow: 0 2px 0 rgba(10, 30, 50, .22);
}
.card-cost .ic-coin { width: 1.02em; height: 1.02em; }

/* hand tutorial pointer */
.menu-hand {
  position: absolute;
  left: calc(50% - clamp(130px, 18vw, 235px));
  bottom: clamp(0px, .5vh, 8px);
  width: clamp(96px, 11.5vw, 152px);
  z-index: 6;
  transform-origin: 50% 90%;
  animation: hand-bob 1.7s ease-in-out infinite;
  filter: drop-shadow(0 6px 6px rgba(10, 30, 46, .25));
  pointer-events: none;
}
.menu-hand svg { width: 100%; height: auto; }

/* side cards ------------------------------------------------------------- */
.side-card {
  position: absolute;
  top: 60.5%;
  width: var(--side-w);
  transform: translateY(-50%) rotate(-1.2deg);
  padding: clamp(4px, .4vw, 6px);
  border: clamp(3px, .32vw, 4px) solid #fff;
  border-radius: clamp(12px, 1.2vw, 16px);
  background: #b565e8;
  height: clamp(176px, 26.5vh, 212px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 7px 0 rgba(40, 18, 66, .24), 0 13px 22px rgba(14, 40, 58, .22);
  pointer-events: auto;
  transition: transform .16s cubic-bezier(.2, 1.4, .4, 1), filter .16s ease;
}
.side-card:hover { transform: translateY(-52%) rotate(0deg) scale(1.04); filter: brightness(1.05); }
.side-card:active { transform: translateY(-49%) scale(.98); }
.skin-card { left: clamp(14px, 2.4vw, 34px); }
.event-card { right: clamp(14px, 2.4vw, 34px); transform: translateY(-50%) rotate(1.4deg); background: #2e1933; }
.event-card:hover { transform: translateY(-52%) rotate(0deg) scale(1.04); }

.skin-card .skin-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 21px);
  color: #5b1a80;
  text-align: center;
  padding: .18em 0 .22em;
  letter-spacing: .03em;
}
.skin-art {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: clamp(7px, .7vw, 10px);
  background: #43115e;
  overflow: hidden;
  padding: 3%;
}
.skin-art .art { width: 100%; height: 100%; }
.skin-video {
  display: grid;
  place-items: center;
  width: clamp(30px, 3vw, 40px);
  margin: clamp(5px, .8vh, 8px) auto clamp(3px, .4vh, 5px);
}
.skin-video svg { width: 100%; height: auto; }
.skin-card::after {
  content: '';
  position: absolute;
  left: clamp(6px, .6vw, 9px);
  right: clamp(6px, .6vw, 9px);
  bottom: clamp(5px, .6vw, 8px);
  height: clamp(7px, .8vw, 10px);
  border-radius: 4px;
  background: rgba(60, 12, 92, .55);
}

.event-card .event-head {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.55vw, 20px);
  letter-spacing: .03em;
  color: #fff;
  text-align: center;
  padding: .26em 0 .1em;
}
.event-card .event-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.08vw, 14px);
  letter-spacing: .03em;
  color: #ef4df0;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  padding: .1em 0 .35em;
  white-space: nowrap;
}
.event-art {
  display: block;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: clamp(6px, .6vw, 8px);
  background: radial-gradient(120% 90% at 50% 20%, #7b2ea8 0%, #4d1468 58%, #2a0b3b 100%);
  overflow: hidden;
  padding: 2% 1% 0;
}
.event-art .art { width: 100%; height: 100%; }
.event-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  padding: .28em .1em .16em;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .015em;
  white-space: nowrap;
}
.event-foot .icon-lock { width: 1.5em; height: auto; }
.event-foot .event-level b { color: #ff3b30; font-weight: 400; font-size: 1.18em; }
.event-card.is-unlocked { background: #1d4160; }
.event-card.is-unlocked .event-head { color: var(--gold-soft); }
.event-card.is-unlocked .event-name { color: #7fe1ff; }
.event-card.is-unlocked .event-foot .icon-lock { display: none; }
.event-card.is-unlocked .event-foot .event-level { color: var(--gold-soft); }
.event-card.is-unlocked { animation: event-glow 2.4s ease-in-out infinite; }

/* =========================================================================
   HUD
   ========================================================================= */
.hud-level {
  position: absolute;
  top: clamp(26px, 8vh, 64px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(210px, 26vw, 330px);
  height: clamp(36px, 6.5vh, 52px);
  border-radius: 999px;
  background: linear-gradient(180deg, #2d4a62, var(--navy) 55%, #223a4e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 4px 12px rgba(8, 26, 42, .28);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hud-level-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, #f45b45 0%, var(--red) 55%, #c33322 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22);
  transition: width .38s cubic-bezier(.25, .8, .35, 1);
}
.hud-level.is-boss .hud-level-fill {
  background: linear-gradient(180deg, #ff5b45 0%, #e0301f 55%, #b51f14 100%);
  animation: boss-pulse 1.4s ease-in-out infinite;
}
.hud-level-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.35vw, 30px);
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(10, 28, 44, .45);
}
.hud-coins { position: absolute; top: clamp(14px, 4.4vh, 36px); right: clamp(14px, 2vw, 26px); }
.enemy-pill {
  position: absolute;
  top: clamp(70px, 11.5vh, 100px);
  right: clamp(14px, 2vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: .32em;
  height: clamp(32px, 4.4vh, 44px);
  padding: 0 clamp(12px, 1.2vw, 17px);
  border-radius: 999px;
  background: linear-gradient(180deg, #e04a35, #b52d1c);
  box-shadow: 0 3px 0 rgba(88, 20, 10, .3);
  font-size: clamp(17px, 2vw, 25px);
}
.enemy-pill .icon-skull { width: 1.35em; height: 1.35em; }
.units-pill {
  position: absolute;
  left: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 3.4vh, 30px);
  display: inline-flex;
  align-items: center;
  gap: .35em;
  height: clamp(32px, 4.4vh, 44px);
  padding: 0 clamp(12px, 1.2vw, 17px) 0 clamp(7px, .8vw, 11px);
  border-radius: 999px;
  background: linear-gradient(180deg, #3f9be8, #2a6fb5);
  box-shadow: 0 3px 0 rgba(16, 62, 108, .35);
  font-size: clamp(17px, 2vw, 25px);
}
.units-pill .icon-person { width: 1.3em; height: 1.3em; }

.start-prompt {
  position: absolute;
  left: 50%;
  top: 55.5%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: .035em;
  color: var(--navy);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .55), 0 0 18px rgba(255, 255, 255, .35);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.start-prompt.is-in { animation: start-pulse 1.5s ease-in-out infinite; }
.start-prompt .start-tap { display: none; }

.move-hint {
  position: absolute;
  right: clamp(10px, 1.5vw, 22px);
  bottom: clamp(84px, 17.5vh, 140px);
  width: clamp(118px, 13.6vw, 175px);
  padding: clamp(9px, 1.3vw, 15px) clamp(8px, 1vw, 12px) clamp(7px, .9vw, 10px);
  border-radius: clamp(13px, 1.4vw, 19px);
  background: linear-gradient(180deg, #2f4d66, var(--navy) 58%, #21394c);
  box-shadow: 0 6px 0 rgba(12, 32, 48, .28), 0 12px 26px rgba(8, 26, 42, .24);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.move-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.9vw, 38px);
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(8, 26, 40, .45);
  margin-bottom: clamp(6px, 1.2vh, 11px);
}
.move-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(5px, .65vw, 9px);
  width: 100%;
}
.move-key {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: clamp(7px, .75vw, 11px);
  box-shadow: 0 4px 0 rgba(9, 24, 38, .32);
  transition: transform .1s ease, filter .1s ease;
}
.move-key.yellow { background: linear-gradient(180deg, #ffe04a, var(--gold) 65%, #f2b800); }
.move-key.white { background: linear-gradient(180deg, #fff, #e9eef4 70%, #dbe3eb); }
.move-key.letter {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 30px);
  color: #1d3b52;
}
.move-key.is-down { transform: translateY(3px) scale(.94); filter: brightness(.92); }
.move-hand { width: clamp(26px, 3.1vw, 40px); margin-top: clamp(6px, 1vh, 10px); }
.move-hand svg { width: 100%; height: auto; }
.hud-coins.is-hidden, .enemy-pill.is-hidden, .units-pill.is-hidden { display: none !important; }

/* in-game rewarded ad card */
.ad-card {
  position: absolute;
  left: clamp(10px, 2.2vw, 28px);
  bottom: clamp(96px, 18vh, 156px);
  width: clamp(138px, 14.7vw, 188px);
  height: clamp(196px, 31.5vh, 252px);
  display: flex;
  flex-direction: column;
  padding: clamp(4px, .4vw, 6px);
  border: clamp(3px, .32vw, 4px) solid #fff;
  border-radius: clamp(11px, 1.1vw, 15px);
  background: linear-gradient(180deg, #b9c6f4 0%, #8faaf2 48%, #7d9aee 100%);
  box-shadow: 0 7px 0 rgba(21, 44, 110, .3), 0 12px 24px rgba(8, 26, 42, .26);
  text-align: center;
  transition: transform .15s cubic-bezier(.2, 1.4, .4, 1), filter .15s ease;
}
.ad-card:hover { transform: translateY(-4px) rotate(-1deg); filter: brightness(1.05); }
.ad-card:active { transform: translateY(2px) scale(.985); }
.ad-card.is-in { animation: ad-card-in .5s cubic-bezier(.2, 1.5, .45, 1) backwards; }
.ad-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.5vw, 20px);
  letter-spacing: .015em;
  color: #112a80;
  padding: .18em 0 .25em;
  white-space: nowrap;
}
.ad-art {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: clamp(6px, .65vw, 9px);
  background: #112a80;
  padding: 2%;
  overflow: hidden;
}
.ad-art .art { width: 100%; height: 100%; }
.ad-video { display: grid; place-items: center; width: clamp(28px, 2.9vw, 38px); margin: clamp(5px, .8vh, 8px) auto clamp(3px, .4vh, 5px); }
.ad-video svg { width: 100%; height: auto; }
.ad-strip {
  display: block;
  position: relative;
  height: clamp(11px, 1.4vw, 15px);
  margin-top: clamp(4px, .6vh, 7px);
  border-radius: 3px;
  background: #112a80;
  overflow: hidden;
}
.ad-strip-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 32%;
  background: linear-gradient(180deg, #ffd943, #ffb800);
  animation: ad-timer 9s linear infinite;
}
.tutorial-tip {
  position: absolute;
  left: 50%;
  bottom: clamp(170px, 25vh, 230px);
  transform: translateX(-50%);
  padding: .5em 1.1em .6em;
  border-radius: 14px;
  background: rgba(19, 44, 65, .94);
  border: 3px solid rgba(255, 255, 255, .92);
  font-size: clamp(15px, 1.7vw, 21px);
  color: #fff;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 5px 0 rgba(8, 24, 38, .3), 0 10px 22px rgba(8, 24, 38, .3);
  pointer-events: none;
}
.tutorial-tip.is-in { animation: tip-in .35s cubic-bezier(.2, 1.4, .45, 1) backwards; }

/* =========================================================================
   VICTORY
   ========================================================================= */
.ui-victory.is-visible { pointer-events: auto; }
.victory-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.victory-ribbon {
  position: relative;
  margin-top: clamp(28px, 6.5vh, 58px);
  width: clamp(400px, 37.5vw, 490px);
  height: clamp(150px, 26vh, 210px);
  animation: ribbon-drop .6s cubic-bezier(.2, 1.25, .4, 1) backwards;
}
.ribbon-tail {
  position: absolute;
  top: clamp(26px, 4.4vh, 40px);
  width: clamp(58px, 9.5vw, 126px);
  height: clamp(96px, 20vh, 176px);
  z-index: 1;
  filter: drop-shadow(0 8px 12px rgba(8, 28, 46, .22));
}
.ribbon-tail svg { width: 100%; height: 100%; }
.ribbon-tail-left {
  right: calc(100% - clamp(20px, 2.4vw, 32px));
  top: clamp(22px, 3.6vh, 34px);
  transform: rotate(.8deg);
}
.ribbon-tail-right {
  left: calc(100% - clamp(20px, 2.4vw, 32px));
  top: clamp(22px, 3.6vh, 34px);
  transform: rotate(-.8deg);
}
.ribbon-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .4vh, 5px);
  border: clamp(3px, .34vw, 4.5px) solid var(--navy-line);
  border-radius: clamp(5px, .55vw, 8px);
  background: linear-gradient(180deg, #4a9ae4 0%, var(--blue) 46%, #357fc9 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .18), 0 9px 0 rgba(25, 77, 124, .38), 0 16px 30px rgba(8, 28, 46, .28);
}
.ribbon-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 6.4vw, 84px);
  letter-spacing: .025em;
  line-height: .96;
  color: #fff;
  text-shadow: 0 4px 0 #1e5fae, 0 7px 0 rgba(20, 61, 104, .45), 0 0 2px #fff;
  transform: translateY(-2%);
}
.ribbon-reward {
  display: flex;
  align-items: center;
  gap: .08em;
  font-family: var(--font-display);
  font-size: clamp(27px, 3.2vw, 43px);
  color: #fff;
  text-shadow: 0 3px 0 #1e5fae, 0 5px 0 rgba(21, 62, 104, .35);
}
.ribbon-reward .ic-coin { width: 1.12em; height: 1.12em; }
.reward-plus { margin-right: .02em; }

.victory-stats {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(10px, 1.8vh, 16px);
  padding: .42em 1.1em .5em;
  border-radius: 999px;
  background: rgba(19, 44, 65, .9);
  border: 3px solid rgba(255, 255, 255, .9);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.35vw, 18px);
  letter-spacing: .03em;
  animation: pop-in .45s .35s cubic-bezier(.2, 1.5, .45, 1) backwards;
}
.vdot { width: 5px; height: 5px; border-radius: 50%; background: #7fb5e2; }

.reel {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(3px, .38vw, 6px);
  margin-top: clamp(48px, 11.5vh, 96px);
  padding: clamp(5px, .6vw, 8px);
  border: clamp(3px, .34vw, 4.5px) solid #14212e;
  border-radius: clamp(12px, 1.25vw, 17px);
  background: #ff7a1a;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .2), 0 8px 0 rgba(122, 53, 8, .35), 0 14px 26px rgba(8, 28, 46, .25);
  animation: pop-in .45s .18s cubic-bezier(.2, 1.5, .45, 1) backwards;
}
.reel-cell {
  display: grid;
  place-items: center;
  min-width: clamp(50px, 5.1vw, 65px);
  height: clamp(44px, 7.1vh, 58px);
  padding: 0 .2em;
  border-radius: clamp(10px, 1vw, 14px);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 30px);
  letter-spacing: .02em;
  transition: transform .16s cubic-bezier(.2, 1.5, .45, 1), background .16s ease, color .16s ease;
}
.reel-cell:nth-child(1), .reel-cell:nth-child(5) { background: #ff6100; color: #bc1c14; }
.reel-cell:nth-child(2), .reel-cell:nth-child(4) { background: #fff500; color: #8a7300; }
.reel-cell:nth-child(3) { background: #fff500; color: #8a7300; }
.reel-cell.is-active {
  background: linear-gradient(180deg, #4ad450, var(--green) 62%, #279e2e);
  color: #0d5a16;
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 3px 0 rgba(12, 74, 18, .35), 0 0 0 3px rgba(255, 255, 255, .28);
}
.reel-cell.is-hot { filter: brightness(1.16); }
.reel.is-spinning .reel-cell { animation: reel-jitter .1s linear infinite alternate; }
.reel-pointer {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: clamp(9px, 1.1vw, 14px) solid transparent;
  border-top: 0;
  border-bottom-color: #fff;
  filter: drop-shadow(0 -2px 0 rgba(20, 40, 60, .12));
  z-index: 3;
  animation: pointer-bob 1.1s ease-in-out infinite;
}

.reward-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.5vw, 20px);
  width: clamp(260px, 28vw, 360px);
  min-height: clamp(62px, 9.6vh, 88px);
  margin-top: clamp(10px, 1.8vh, 16px);
  padding: .18em clamp(14px, 1.7vw, 22px) .24em clamp(16px, 1.8vw, 24px);
  border: clamp(3px, .32vw, 4px) solid #fff;
  border-radius: clamp(11px, 1.1vw, 15px);
  background: linear-gradient(180deg, #ffd75c 0%, #fbc848 50%, #f4b52d 100%);
  box-shadow: 0 6px 0 #dd9a2c, 0 12px 22px rgba(8, 28, 46, .26);
  color: #fff;
  animation: pop-in .45s .32s cubic-bezier(.2, 1.5, .45, 1) backwards;
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
  pointer-events: auto;
}
.reward-card:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.04); }
.reward-card:active { transform: translateY(2px) scale(.99); }
.reward-card .hotkey { top: -12px; left: -10px; }
.reward-card .reward-video { display: grid; place-items: center; width: clamp(38px, 4.4vw, 56px); flex: none; }
.reward-card .reward-video svg { width: 100%; height: auto; filter: drop-shadow(0 2px 0 rgba(150, 95, 10, .3)); }
.reward-amount {
  display: flex;
  align-items: center;
  gap: .04em;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.9vw, 38px);
  color: #fff;
  text-shadow: 0 3px 0 rgba(196, 122, 8, .55);
}
.reward-amount .ic-coin {
  width: 1.35em;
  height: 1.35em;
  margin-left: .18em;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 2px 0 rgba(150, 95, 10, .3));
}
.reward-card.is-claimed { opacity: .55; filter: grayscale(.35); pointer-events: none; }
.reward-card.is-claimed::after {
  content: 'AD USED ✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(58, 38, 6, .55);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.7vw, 22px);
  letter-spacing: .04em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.continue-btn {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4.5vh, 38px);
  transform: translateX(-50%);
  pointer-events: auto;
  animation: pop-in-center .45s .45s cubic-bezier(.2, 1.5, .45, 1) backwards;
}
.continue-btn:hover { transform: translateX(-50%) translateY(-2px); }
.continue-btn:active { transform: translateX(-50%) translateY(4px); }

/* =========================================================================
   KEEP PUSHING (defeat / revive)
   ========================================================================= */
.ui-keep.is-visible { pointer-events: auto; }
.keep-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(44px, 8.2vh, 70px);
  height: clamp(86px, 18.5vh, 152px);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #d9533c 0%, #d4442f 52%, #c73a26 100%);
  border-top: clamp(4px, .5vh, 6px) solid #1c1c1c;
  border-bottom: clamp(4px, .5vh, 6px) solid #1c1c1c;
  box-shadow: 0 10px 26px rgba(20, 24, 28, .3);
  animation: banner-drop .48s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.keep-pattern {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 4px, transparent 4px 22px),
    radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, .08), transparent 60%);
  pointer-events: none;
}
.keep-title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(34px, 7.2vh, 70px);
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 3px 0 rgba(120, 30, 18, .4), 0 6px 14px rgba(90, 22, 12, .25);
}
.keep-continue {
  bottom: clamp(24px, 4.6vh, 38px);
  animation-delay: .25s;
}

/* =========================================================================
   PAUSE
   ========================================================================= */
.ui-pause.is-visible {
  pointer-events: auto;
  background: radial-gradient(120% 100% at 50% 40%, rgba(9, 26, 42, .42), rgba(6, 18, 30, .66));
  backdrop-filter: blur(2px);
}
.pause-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 18px);
  width: clamp(300px, 32vw, 400px);
  padding: clamp(20px, 3vh, 30px) clamp(20px, 2.4vw, 32px) clamp(24px, 3.4vh, 34px);
  border: clamp(3px, .34vw, 4.5px) solid #fff;
  border-radius: clamp(18px, 1.8vw, 24px);
  background: linear-gradient(180deg, #31526c 0%, var(--navy) 40%, #1d3446 100%);
  box-shadow: 0 10px 0 rgba(9, 24, 38, .4), 0 24px 50px rgba(4, 14, 24, .5);
  animation: pause-in .36s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.pause-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 56px);
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 3px 0 rgba(8, 26, 40, .45);
}
.pause-buttons { display: flex; flex-direction: column; width: 100%; gap: clamp(9px, 1.3vh, 13px); }
.pause-buttons .big-btn { width: 100%; min-height: clamp(56px, 7.4vh, 78px); font-size: clamp(20px, 2.2vw, 27px); }
.pause-sound { position: absolute; top: clamp(12px, 1.6vw, 18px); right: clamp(12px, 1.6vw, 18px); width: clamp(38px, 3.6vw, 46px); height: clamp(38px, 3.6vw, 46px); }

/* =========================================================================
   EVENT MODAL
   ========================================================================= */
.ui-event.is-visible {
  pointer-events: auto;
  background: radial-gradient(120% 100% at 50% 40%, rgba(10, 28, 44, .35), rgba(6, 18, 30, .6));
}
.event-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(300px, 33vw, 430px);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: event-pop .42s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.event-modal.is-in { animation: event-pop .42s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.event-close {
  position: absolute;
  z-index: 8;
  top: clamp(-16px, -2vh, -10px);
  right: clamp(-12px, -1vw, -6px);
  display: grid;
  place-items: center;
  width: clamp(38px, 3.7vw, 48px);
  height: clamp(38px, 3.7vw, 48px);
  border: clamp(3px, .3vw, 4px) solid #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, #3d5d77, #1e3548);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 21px);
  box-shadow: 0 4px 0 rgba(9, 24, 38, .4);
}
.event-close:hover { filter: brightness(1.15); transform: scale(1.04); }
.event-banner {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: .1em .7em .2em;
  margin-bottom: clamp(-18px, -2.4vh, -12px);
}
.event-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.7vw, 48px);
  letter-spacing: .03em;
  color: #ffb400;
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 4px 0 #d98a00, 0 9px 16px rgba(60, 36, 0, .35);
  transform: rotate(-2deg);
  animation: event-title-pop .6s .1s cubic-bezier(.2, 1.6, .4, 1) backwards;
  white-space: nowrap;
}
.event-sparks { position: absolute; inset: 0; pointer-events: none; }
.event-sparks span {
  position: absolute;
  color: #fff;
  font-size: clamp(12px, 1.3vw, 18px);
  text-shadow: 0 0 8px rgba(255, 240, 180, .9);
  animation: sparkle 1.8s ease-in-out infinite;
}
.event-sparks span:nth-child(1) { left: 4%; top: 18%; animation-delay: 0s; }
.event-sparks span:nth-child(2) { right: 3%; top: 8%; animation-delay: .4s; }
.event-sparks span:nth-child(3) { right: 14%; bottom: 4%; animation-delay: .8s; }
.event-sparks span:nth-child(4) { left: 15%; bottom: 0; animation-delay: .2s; }

.event-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.3vh, 12px);
  padding: clamp(28px, 4.2vh, 38px) clamp(16px, 2vw, 26px) clamp(16px, 2.3vh, 22px);
  border: clamp(3px, .34vw, 4.5px) solid #fff;
  border-radius: clamp(16px, 1.7vw, 22px);
  background: linear-gradient(180deg, #31526c 0%, var(--navy) 42%, #1d3446 100%);
  box-shadow: 0 10px 0 rgba(9, 24, 38, .4), 0 22px 44px rgba(4, 14, 24, .45);
}
.event-subtitle {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 24px);
  letter-spacing: .05em;
  color: #7fe1ff;
  text-shadow: 0 2px 0 rgba(8, 26, 40, .4);
}
.event-rows { width: 100%; display: flex; flex-direction: column; gap: clamp(5px, .8vh, 8px); }
.event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .38em .8em .44em;
  border-radius: 10px;
  background: rgba(9, 27, 41, .45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05);
}
.event-label {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: .08em;
  color: #9db8cc;
}
.event-value {
  display: inline-flex;
  align-items: center;
  gap: .22em;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 24px);
  color: #fff;
  text-shadow: 0 2px 0 rgba(8, 26, 40, .4);
}
.event-value .ic-coin { width: 1.1em; height: 1.1em; }
.event-value b { font-weight: 400; color: var(--gold-soft); }
.event-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.event-board.is-hidden { display: none !important; }
.event-player {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .24em .7em .3em;
  border-radius: 8px;
  background: rgba(9, 27, 41, .35);
  font-family: var(--font-display);
  font-size: clamp(10px, 1.1vw, 14px);
  color: #b9d3e6;
}
.event-player-rank { width: 1.2em; color: #8fb0c8; }
.event-player-name { flex: 1; letter-spacing: .04em; }
.event-player-score { color: #fff; }
.event-player.is-me {
  background: rgba(250, 201, 2, .16);
  box-shadow: inset 0 0 0 2px rgba(250, 201, 2, .45);
  color: #ffe066;
}
.event-player.is-me .event-player-name { color: #ffe066; }
.skin-card.is-unlocked .skin-title::after { content: ' ✓'; color: #ffe066; }
.event-progress {
  width: 100%;
  height: clamp(9px, 1.1vw, 13px);
  border-radius: 999px;
  background: rgba(6, 20, 32, .6);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.event-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd943, #ffa800);
  transition: width .5s cubic-bezier(.25, .8, .35, 1);
}
.event-timer-line {
  font-family: var(--font-display);
  font-size: clamp(10px, 1.08vw, 14px);
  letter-spacing: .1em;
  color: #9db8cc;
}
.event-timer-line span { color: #fff; }
.event-cta { width: 100%; min-height: clamp(54px, 7.2vh, 74px); font-size: clamp(19px, 2.1vw, 26px); }

/* =========================================================================
   FAKE AD
   ========================================================================= */
.ui-fakead.is-visible {
  pointer-events: auto;
  background: radial-gradient(120% 100% at 50% 40%, rgba(8, 22, 36, .55), rgba(4, 12, 20, .82));
}
.fake-ad {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(290px, 32vw, 400px);
  border: clamp(4px, .4vw, 6px) solid #fff;
  border-radius: clamp(14px, 1.4vw, 19px);
  background: #0e2a44;
  overflow: hidden;
  box-shadow: 0 12px 0 rgba(4, 14, 24, .4), 0 28px 60px rgba(0, 0, 0, .5);
  animation: ad-pop .35s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.fake-ad-tag {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  padding: .28em .72em .34em;
  border-bottom-right-radius: 12px;
  background: var(--gold-soft);
  color: #4a2c00;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.5vw, 19px);
  letter-spacing: .06em;
}
.fake-ad-scene { position: relative; aspect-ratio: 400 / 430; overflow: hidden; }
.fake-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #55c9f2 0%, #a8e9ff 55%, #dff7ff 100%); }
.fake-sun { position: absolute; left: 12%; top: 12%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #ffe066; box-shadow: 0 0 40px 12px rgba(255, 224, 102, .65); }
.fake-sea {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, #2fa7d8, #1379ad);
  overflow: hidden;
}
.fake-sea span { position: absolute; height: 10%; border-radius: 50%; background: rgba(255, 255, 255, .34); }
.fake-sea span:nth-child(1) { left: -8%; right: 40%; top: 22%; }
.fake-sea span:nth-child(2) { left: 52%; right: -6%; top: 40%; }
.fake-sea span:nth-child(3) { left: 8%; right: 24%; top: 66%; height: 7%; }
.fake-ship { position: absolute; left: 50%; bottom: 30%; width: 54%; transform: translateX(-50%); }
.fake-hull {
  height: clamp(36px, 4.4vw, 54px);
  background: linear-gradient(180deg, #a4552a, #6d3216);
  border-radius: 8% 8% 42% 42% / 10% 10% 80% 80%;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18);
}
.fake-sail {
  position: absolute;
  left: 30%;
  bottom: 96%;
  width: 44%;
  height: clamp(64px, 8vw, 104px);
  background: linear-gradient(160deg, #fff, #e7eef5);
  border-radius: 4px 26px 4px 4px;
  transform: skewX(-4deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.fake-sail.small {
  left: 4%;
  bottom: 92%;
  width: 26%;
  height: clamp(44px, 5.4vw, 70px);
  border-radius: 4px 18px 4px 4px;
}
.fake-flag {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2.6%;
  height: clamp(72px, 9vw, 116px);
  background: #5a3a1c;
}
.fake-flag::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 4px;
  width: 34px;
  height: 22px;
  background: #ff3b30;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.fake-brand {
  position: absolute;
  left: 50%;
  top: 8.5%;
  transform: translateX(-50%) rotate(-2deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 0 #123e66, 0 6px 14px rgba(8, 30, 50, .4);
}
.fake-brand-small { font-family: var(--font-display); font-size: clamp(15px, 1.7vw, 22px); letter-spacing: .28em; color: #ffe066; text-shadow: 0 2px 0 #896000; }
.fake-brand-big { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 45px); letter-spacing: .02em; line-height: 1; }
.fake-cta {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  padding: .42em 1.1em .5em;
  border: clamp(3px, .3vw, 4px) solid #fff;
  border-radius: 12px;
  background: linear-gradient(180deg, #74e86a, #34c13b 60%, #21982a);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 24px);
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 2px 0 #18721f;
  box-shadow: 0 5px 0 #18721f;
  animation: cta-pulse 1.2s ease-in-out infinite;
}
.fake-ad-foot {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.2vw, 14px);
  background: #0e2a44;
}
.fake-ad-progress {
  flex: 1;
  height: clamp(8px, 1vw, 12px);
  border-radius: 999px;
  background: rgba(4, 16, 28, .7);
  overflow: hidden;
}
.fake-ad-progress-fill { width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd943, #ffa800); }
.fake-ad-timer {
  display: grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: rgba(4, 16, 28, .7);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.3vw, 17px);
}
.fake-ad-close {
  display: grid;
  place-items: center;
  width: clamp(30px, 3vw, 38px);
  height: clamp(30px, 3vw, 38px);
  border: 3px solid #fff;
  border-radius: 50%;
  background: #3d5d77;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.3vw, 17px);
  transition: transform .12s ease, filter .12s ease;
}
.fake-ad-close:not(.is-disabled):hover { filter: brightness(1.15); transform: scale(1.05); }
.fake-ad-close.is-disabled { opacity: .38; cursor: default; }

/* =========================================================================
   TOAST
   ========================================================================= */
.ui-toast {
  position: absolute;
  z-index: 110;
  left: 50%;
  top: 24%;
  transform: translate(-50%, -10px) scale(.94);
  display: flex;
  align-items: center;
  gap: .38em;
  max-width: min(80vw, 520px);
  padding: .5em 1.15em .58em;
  border: 3px solid #fff;
  border-radius: 999px;
  background: rgba(19, 44, 65, .96);
  color: #fff;
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: .01em;
  box-shadow: 0 6px 0 rgba(8, 24, 38, .3), 0 14px 30px rgba(8, 24, 38, .35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  white-space: nowrap;
}
.ui-toast .ic-coin { width: 1.15em; height: 1.15em; }
.ui-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.ui-toast.is-in { animation: toast-in .28s cubic-bezier(.2, 1.5, .45, 1) backwards; }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
@keyframes marker-pop { 0% { transform: translate(-50%, -50%) scale(.4); } 70% { transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes bubble-bob { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-6px); } }
@keyframes hand-bob { 0%, 100% { transform: translate(0, 0) rotate(-7deg); } 50% { transform: translate(-7px, -10px) rotate(-11deg); } }
@keyframes card-rotate-in {
  0% { opacity: 0; transform: translateY(34px) perspective(700px) rotateY(-62deg) rotate(-4deg) scale(.86); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) perspective(700px) rotateY(0deg) rotate(0deg) scale(1); }
}
.ui-menu.is-visible .upgrade-card { animation: card-rotate-in .52s cubic-bezier(.2, 1.25, .4, 1) backwards; }
.ui-menu.is-visible .upgrade-card:nth-child(1) { animation-delay: .08s; }
.ui-menu.is-visible .upgrade-card:nth-child(2) { animation-delay: .16s; }
.ui-menu.is-visible .upgrade-card:nth-child(3) { animation-delay: .24s; }
@keyframes side-in-left { 0% { opacity: 0; transform: translate(-60px, -50%) rotate(-12deg) scale(.85); } 100% { opacity: 1; transform: translate(0, -50%) rotate(-1.2deg) scale(1); } }
@keyframes side-in-right { 0% { opacity: 0; transform: translate(60px, -50%) rotate(12deg) scale(.85); } 100% { opacity: 1; transform: translate(0, -50%) rotate(1.4deg) scale(1); } }
.ui-menu.is-visible .skin-card { animation: side-in-left .5s .34s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.ui-menu.is-visible .event-card { animation: side-in-right .5s .4s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.ui-menu.is-visible .level-panel { animation: center-pop-in .42s cubic-bezier(.2, 1.4, .45, 1) backwards; }
.ui-menu.is-visible .menu-coins, .ui-menu.is-visible .sound-btn, .ui-menu.is-visible .press-prompt { animation: pop-in .4s cubic-bezier(.2, 1.4, .45, 1) backwards; }
.ui-menu.is-visible .press-prompt { animation-delay: .12s; }
@keyframes pop-in { 0% { opacity: 0; transform: translateY(14px) scale(.88); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes center-pop-in { 0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.9); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes pop-in-center { 0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.88); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes pause-in { 0% { opacity: 0; transform: translate(-50%, -46%) scale(.9); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes banner-drop { 0% { transform: translateY(-120%); } 70% { transform: translateY(4%); } 100% { transform: translateY(0); } }
@keyframes ribbon-drop { 0% { opacity: 0; transform: translateY(-120%) rotate(-4deg); } 68% { opacity: 1; transform: translateY(6px) rotate(.6deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes start-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: .82; } }
@keyframes boss-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes ad-card-in { 0% { opacity: 0; transform: translateX(-70px) rotate(-10deg) scale(.85); } 100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); } }
@keyframes ad-timer { 0% { width: 4%; } 100% { width: 100%; } }
@keyframes tip-in { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.9); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes toast-in { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.9); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes event-pop { 0% { opacity: 0; transform: translate(-50%, -46%) scale(.86); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes event-title-pop { 0% { opacity: 0; transform: rotate(-2deg) scale(.5); } 70% { transform: rotate(-2deg) scale(1.08); } 100% { opacity: 1; transform: rotate(-2deg) scale(1); } }
@keyframes sparkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes event-glow { 0%, 100% { box-shadow: 0 7px 0 rgba(40, 18, 66, .24), 0 13px 22px rgba(14, 40, 58, .22), 0 0 0 0 rgba(255, 207, 62, 0); } 50% { box-shadow: 0 7px 0 rgba(40, 18, 66, .24), 0 13px 22px rgba(14, 40, 58, .22), 0 0 22px 4px rgba(255, 207, 62, .28); } }
@keyframes reel-jitter { 0% { transform: translateY(-1px); } 100% { transform: translateY(1px); } }
@keyframes pointer-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
@keyframes ad-pop { 0% { opacity: 0; transform: translate(-50%, -46%) scale(.9); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes cta-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
@keyframes shake { 0%, 100% { transform: translateY(-50%) rotate(1.4deg); } 20% { transform: translateY(-50%) rotate(-5deg); } 40% { transform: translateY(-50%) rotate(5deg); } 60% { transform: translateY(-50%) rotate(-3deg); } 80% { transform: translateY(-50%) rotate(3deg); } }
.side-card.shake { animation: shake .4s ease backwards; }

/* =========================================================================
   RESPONSIVE — portrait phones and short screens
   ========================================================================= */
@media (max-width: 760px) {
  #ui-root.cw-ui {
    --card-w: clamp(88px, 25.5vw, 112px);
    --side-w: clamp(76px, 21vw, 94px);
  }
  .level-panel {
    top: clamp(66px, 9vh, 88px);
    width: clamp(212px, 62vw, 250px);
    padding: 7px 10px 5px;
    border-radius: 15px;
  }
  .pip { width: clamp(11px, 3vw, 15px); height: clamp(18px, 3.2vh, 24px); }
  .pip-marker { width: clamp(28px, 7.6vw, 36px); height: clamp(28px, 7.6vw, 36px); }
  .level-caption { font-size: clamp(12px, 3.4vw, 16px); }
  .menu-coins { top: clamp(14px, 2.2vh, 20px); right: 12px; height: clamp(30px, 5vh, 38px); font-size: clamp(15px, 4.2vw, 19px); padding-left: 12px; }
  .sound-btn { top: clamp(12px, 2vh, 18px); left: 12px; width: 40px; height: 40px; }
  .level-panel { top: clamp(58px, 8.4vh, 74px); }
  .upgrade-row { gap: clamp(8px, 2.4vw, 12px); }
  .menu-bottom { bottom: clamp(16px, 3.2vh, 26px); gap: 10px; }
  .press-prompt { font-size: clamp(14px, 4.1vw, 18px); gap: 4px; }
  .press-prompt .space-pill { padding: .03em .4em .08em; }
  .press-prompt .icon-mouse { height: clamp(20px, 5.4vw, 25px); }
  .press-prompt .prompt-news, .press-prompt .prompt-or, .press-prompt .space-pill, .press-prompt .mouse-wrap { display: none; }
  .press-prompt .prompt-touch { display: inline; }
  .event-card .event-name { font-size: clamp(8px, 2.35vw, 10px); letter-spacing: 0; }
  .menu-hand { display: none; }
  .side-card { top: 46.5%; height: clamp(150px, 22vh, 180px); }
  .skin-art .art { max-height: 100%; }
  .skin-card { left: 8px; }
  .event-card { right: 8px; }
  .card-head { flex-direction: row; align-items: baseline; gap: 2px; }
  .card-title { font-size: clamp(11px, 3.1vw, 14px); }
  .card-lv { font-size: clamp(9px, 2.6vw, 12px); }
  .card-cost { font-size: clamp(13px, 3.8vw, 17px); }
  .card-inner { padding: 5px 5px 3px; }
  .idle-coin-bubble { left: 55%; top: 31%; font-size: clamp(13px, 3.8vw, 17px); padding: 6px 10px 7px; }

  /* HUD */
  .hud-level { top: 10px; width: clamp(190px, 60vw, 240px); height: clamp(30px, 4.8vh, 38px); }
  .hud-level-text { font-size: clamp(16px, 4.6vw, 21px); }
  .hud-coins { top: 10px; right: 10px; font-size: clamp(14px, 4.2vw, 18px); height: 30px; }
  .move-hint {
    right: 8px;
    bottom: 14px;
    width: clamp(96px, 27vw, 118px);
    padding: 7px 7px 5px;
    border-radius: 12px;
  }
  .move-title { font-size: clamp(16px, 5vw, 22px); margin-bottom: 5px; }
  .move-keys { gap: 4px; }
  .move-key { border-radius: 7px; }
  .move-key.letter { font-size: clamp(14px, 4.6vw, 19px); }
  .move-hand { width: clamp(20px, 5.6vw, 25px); margin-top: 4px; }
  .ad-card { left: 8px; bottom: clamp(78px, 14vh, 116px); width: clamp(112px, 32vw, 138px); height: clamp(168px, 26vh, 206px); }
  .ad-title { font-size: clamp(11px, 3.2vw, 14px); }
  .start-prompt { font-size: clamp(24px, 7.6vw, 34px); }
  .start-prompt .start-news { display: none; }
  .start-prompt .start-tap { display: inline; }
  .units-pill { left: 10px; bottom: 12px; font-size: clamp(13px, 4vw, 17px); height: 30px; }
  .enemy-pill { top: clamp(48px, 7vh, 62px); right: 10px; font-size: clamp(13px, 4vw, 17px); height: 30px; }

  /* victory */
  .victory-ribbon { width: clamp(270px, 82vw, 420px); height: clamp(92px, 15vh, 130px); margin-top: clamp(22px, 4vh, 36px); }
  .ribbon-title { font-size: clamp(36px, 11vw, 58px); }
  .ribbon-reward { font-size: clamp(20px, 6.2vw, 30px); }
  .ribbon-tail { width: clamp(36px, 11vw, 70px); height: clamp(66px, 12vh, 100px); top: clamp(18px, 3.2vh, 28px); }
  .reel { margin-top: clamp(26px, 6.2vh, 50px); }
  .reel-cell { min-width: clamp(40px, 12vw, 56px); height: clamp(32px, 4.6vh, 42px); font-size: clamp(16px, 4.8vw, 22px); }
  .reward-card { width: clamp(238px, 76vw, 310px); min-height: clamp(52px, 7.4vh, 66px); }
  .reward-amount { font-size: clamp(20px, 6.4vw, 28px); }
  .continue-btn { width: clamp(210px, 72vw, 280px); min-height: clamp(58px, 8vh, 72px); font-size: clamp(20px, 5.8vw, 27px); }
  .victory-stats { font-size: clamp(11px, 3.2vw, 14px); }

  /* keep pushing */
  .keep-banner { top: clamp(38px, 6.6vh, 56px); height: clamp(72px, 12.5vh, 100px); }
  .keep-title { font-size: clamp(26px, 8.4vw, 42px); }
  .keep-continue { bottom: clamp(18px, 3.4vh, 28px); }

  /* pause */
  .pause-panel { width: min(88vw, 360px); padding: 20px 18px 24px; }
  .pause-title { font-size: clamp(32px, 9vw, 44px); }
  .pause-buttons .big-btn { min-height: clamp(50px, 7vh, 62px); font-size: clamp(18px, 5vw, 23px); }

  /* event */
  .event-modal { width: min(88vw, 350px); }
  .event-title { font-size: clamp(30px, 9.4vw, 46px); }
  .event-panel { padding: 24px 14px 16px; }
  .event-value { font-size: clamp(15px, 4.4vw, 20px); }
  .event-label { font-size: clamp(10px, 2.9vw, 13px); }
  .event-cta { min-height: clamp(48px, 6.6vh, 60px); font-size: clamp(17px, 4.8vw, 21px); }

  /* fake ad */
  .fake-ad { width: min(86vw, 340px); }
  .fake-ad-scene { aspect-ratio: 400 / 420; }
  .fake-brand-big { font-size: clamp(24px, 7.4vw, 34px); }
  .fake-brand-small { font-size: clamp(12px, 3.6vw, 16px); }
  .fake-cta { font-size: clamp(14px, 4.2vw, 19px); }
  .ui-toast { top: 18%; font-size: clamp(12px, 3.6vw, 16px); padding: .45em .9em .5em; }
  .tutorial-tip, .ui-toast { white-space: normal; }
  .tutorial-tip { bottom: clamp(130px, 20vh, 180px); font-size: clamp(12px, 3.4vw, 15px); width: min(86vw, 320px); }
}

/* short landscape screens (phones on their side) */
@media (max-height: 520px) and (orientation: landscape) {
  .upgrade-row { gap: 8px; }
  .menu-bottom { bottom: 12px; gap: 7px; }
  .press-prompt { font-size: 15px; }
  .card-head { flex-direction: row; }
  .level-panel { top: 8px; padding: 5px 10px 4px; width: 240px; }
  .pip { height: 18px; width: 12px; }
  .pip-marker { width: 30px; height: 30px; }
  .level-caption { font-size: 12px; }
  .sound-btn { top: 8px; left: 10px; width: 38px; height: 38px; }
  .menu-coins { top: 8px; right: 10px; font-size: 16px; height: 30px; }
  .side-card { top: 48%; }
  .victory-ribbon { margin-top: 10px; height: 100px; width: 380px; }
  .ribbon-title { font-size: 44px; }
  .reel { margin-top: 18px; }
  .reel-cell { height: 34px; min-width: 46px; font-size: 18px; }
  .reward-card { min-height: 50px; width: 260px; margin-top: 6px; }
  .continue-btn { min-height: 54px; bottom: 10px; font-size: 22px; }
  .keep-banner { top: 30px; height: 70px; }
  .keep-title { font-size: 34px; }
  .keep-continue { bottom: 10px; }
  .move-hint { width: 104px; padding: 6px; bottom: 10px; }
  .move-title { font-size: 18px; margin-bottom: 4px; }
  .move-hand { display: none; }
  .ad-card { width: 116px; bottom: 12px; }
  .hud-level { top: 8px; }
}

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