:root {
  --hv-ink: #24142d;
  --hv-paper: #fffaf2;
  --hv-pink: #ff5ca8;
  --hv-red: #e93852;
  --hv-cyan: #49dff5;
  --hv-yellow: #ffd963;
  --hv-purple: #7254e8;
  --hv-green: #8bec65;
  --hv-line: rgba(36,20,45,.14);
}

* { box-sizing: border-box; }

body.hamster-flight-page {
  margin: 0;
  color: var(--hv-ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,217,99,.36), transparent 28%),
    radial-gradient(circle at 90% 16%, rgba(73,223,245,.28), transparent 30%),
    linear-gradient(180deg, #fff8f3, #f7f0ff 62%, #eafcff);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.hv-header,
.hv-main,
.hv-footer {
  width: min(1120px, calc(100% - 24px));
  margin-inline: auto;
}

.hv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.hv-brand,
.hv-nav a {
  color: var(--hv-ink);
  text-decoration: none;
  font-weight: 1000;
}

.hv-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--hv-ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--hv-ink);
}

.hv-brand b { color: #59b900; }
.hv-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-nav a { padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.72); }

.hv-hero {
  position: relative;
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: 18px;
  padding: clamp(20px, 4vw, 44px);
  overflow: hidden;
  border: 2px solid var(--hv-ink);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.82) 0 4%, transparent 5%),
    radial-gradient(circle at 66% 30%, rgba(255,255,255,.55) 0 6%, transparent 7%),
    linear-gradient(140deg, #ffcdea 0%, #bdeeff 52%, #b8f2dd 100%);
  box-shadow: 8px 8px 0 var(--hv-ink);
}

.hv-kicker {
  margin: 0 0 8px;
  color: #b91f68;
  font-size: .76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.hv-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: .9;
}

.hv-hero h1 span { color: #d91f65; }
.hv-hero p { max-width: 53ch; font-weight: 720; line-height: 1.5; }
.hv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.hv-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border: 2px solid var(--hv-ink);
  border-radius: 16px;
  background: var(--hv-yellow);
  color: var(--hv-ink);
  box-shadow: 3px 3px 0 var(--hv-ink);
  font: inherit;
  font-weight: 1000;
  text-decoration: none;
  cursor: pointer;
}

.hv-button.secondary { background: #fff; }
.hv-button.pink { background: var(--hv-pink); color: #fff; }
.hv-button.dark { background: var(--hv-ink); color: #fff; box-shadow: none; }
.hv-button.is-disabled { opacity: .56; cursor: not-allowed; }
.hv-button:focus-visible { outline: 4px solid var(--hv-cyan); outline-offset: 3px; }

.hv-hero-art { position: relative; min-height: 260px; }
.hv-hero-art::before,
.hv-hero-art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  filter: blur(2px);
}
.hv-hero-art::before { width: 210px; height: 72px; right: 4%; bottom: 12%; }
.hv-hero-art::after { width: 140px; height: 48px; left: 2%; top: 12%; }

.hv-hero-art img {
  position: absolute;
  z-index: 2;
  right: 1%;
  top: 1%;
  width: min(100%, 510px);
  height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(64,35,83,.28));
  animation: hv-float 2.6s ease-in-out infinite;
}

@keyframes hv-float { 50% { transform: translateY(-12px) rotate(-2deg); } }

.hv-game-shell {
  margin-top: 24px;
  padding: clamp(10px, 2vw, 18px);
  border: 2px solid var(--hv-ink);
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  box-shadow: 8px 8px 0 var(--hv-ink);
}

.hv-game-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px;
}
.hv-game-head h2 { margin: 0; font-size: clamp(1.45rem, 4vw, 2.5rem); }
.hv-game-head p { margin: 4px 0 0; color: rgba(36,20,45,.7); font-weight: 740; }

.hv-hud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.hv-stat {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--hv-line);
  border-radius: 14px;
  background: linear-gradient(180deg,#fff,#fff6fb);
  text-align: center;
}
.hv-stat span { display: block; color: rgba(36,20,45,.62); font-size: .66rem; font-weight: 1000; text-transform: uppercase; }
.hv-stat strong { display: block; margin-top: 2px; font-size: 1.15rem; white-space: nowrap; }

.hv-pressure { grid-column: span 2; text-align: left; }
.hv-meter { height: 8px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(36,20,45,.1); }
.hv-meter i { display: block; width: var(--value,100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--hv-cyan),var(--hv-purple),var(--hv-pink)); transition: width 100ms linear; }

.hv-route-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 16px;
  margin: 10px 0;
  padding: 9px 12px;
  border: 1px solid rgba(36,20,45,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
}
.hv-route-progress span { display:block; color:rgba(36,20,45,.58); font-size:.62rem; font-weight:1000; text-transform:uppercase; }
.hv-route-progress strong { display:block; margin-top:2px; }
.hv-route-progress > div:nth-child(2) { text-align:right; }
.hv-route-meter { grid-column:1 / -1; height:7px; overflow:hidden; border-radius:999px; background:rgba(36,20,45,.1); }
.hv-route-meter i { display:block; width:var(--value,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--hv-cyan),var(--hv-purple),var(--hv-pink)); transition:width 100ms linear; }

.hv-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  overflow: hidden;
  border: 2px solid var(--hv-ink);
  border-radius: 20px;
  background: #aee8ff;
  touch-action: none;
}

.hv-stage canvas { display: block; width: 100%; height: 100%; }

.hv-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(31,17,42,.35);
  backdrop-filter: blur(6px);
}
.hv-overlay.is-visible { display: grid; }

.hv-panel {
  width: min(500px, 94%);
  max-height: 92%;
  overflow: auto;
  padding: 18px;
  border: 2px solid var(--hv-ink);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 6px 6px 0 var(--hv-ink);
  text-align: center;
}
.hv-panel h3 { margin: 0; font-size: clamp(1.65rem,5vw,2.5rem); line-height: 1; }
.hv-panel p { color: rgba(36,20,45,.72); font-weight: 720; line-height: 1.4; }
.hv-panel img { width: min(100%, 320px); height: 140px; object-fit: cover; object-position: center 56%; filter: drop-shadow(0 14px 14px rgba(36,20,45,.18)); }
.hv-panel-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 12px 0; }
.hv-panel-stats div { padding: 9px 6px; border-radius: 12px; background: #f7edff; }
.hv-panel-stats span,.hv-panel-stats strong { display:block; }
.hv-panel-stats span { font-size:.65rem; text-transform:uppercase; font-weight:900; color:rgba(36,20,45,.58); }
.hv-start-routes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:10px 0; }
.hv-start-routes button { min-width:0; min-height:38px; padding:5px 4px; border:2px solid transparent; border-radius:10px; background:#f5effa; color:var(--hv-ink); font:inherit; font-size:.68rem; font-weight:1000; cursor:pointer; }
.hv-start-routes button.is-active { border-color:var(--hv-ink); background:var(--hv-cyan); }
.hv-start-routes button.is-selected { box-shadow:inset 0 0 0 2px rgba(255,255,255,.8); }
.hv-start-routes button:focus-visible { outline:3px solid var(--hv-pink); outline-offset:2px; }

.hv-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 4;
  max-width: calc(100% - 24px);
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(36,20,45,.9);
  color: #fff;
  font-weight: 1000;
  text-align: center;
  transform: translate(-50%,-160%);
  transition: transform 180ms ease;
}
.hv-toast.is-visible { transform: translate(-50%,0); }

.hv-flight-hint {
  position:absolute;
  right:12px;
  bottom:62px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:min(220px,62%);
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:14px;
  background:rgba(36,20,45,.76);
  color:#fff;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity 180ms ease,transform 180ms ease;
}
.hv-flight-hint strong { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:linear-gradient(135deg,var(--hv-pink),#ff9a4a); font-size:.75rem; }
.hv-flight-hint span { font-size:.7rem; font-weight:900; line-height:1.15; }
.hv-game-shell.is-running .hv-flight-hint { opacity:1; transform:none; }
.hv-game-shell.is-boosting .hv-flight-hint { background:rgba(55,27,73,.9); box-shadow:0 0 0 3px rgba(73,223,245,.35); }

.hv-controls { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; margin-top: 10px; }
.hv-boost {
  min-height: 64px;
  border: 2px solid var(--hv-ink);
  border-radius: 18px;
  background: linear-gradient(135deg,#ff447d,#ff9a4a);
  color: #fff;
  box-shadow: 4px 4px 0 var(--hv-ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 1000;
  cursor: pointer;
  touch-action: none;
}
.hv-boost.is-active { transform: translateY(3px); box-shadow: 1px 1px 0 var(--hv-ink); }

.hv-zone-track { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; }
.hv-zone-track button { min-width:0; padding:9px 7px; border:2px solid transparent; border-radius:12px; background:#f5effa; color:rgba(36,20,45,.7); font:inherit; text-align:center; cursor:pointer; }
.hv-zone-track strong,.hv-zone-track small { display:block; }
.hv-zone-track strong { font-size:.72rem; font-weight:1000; }
.hv-zone-track small { margin-top:3px; font-size:.58rem; font-weight:800; opacity:.72; }
.hv-zone-track button.is-active { border-color:var(--hv-ink); background:var(--hv-cyan); color:var(--hv-ink); }
.hv-zone-track button.is-selected { box-shadow:inset 0 0 0 2px rgba(255,255,255,.75); }
.hv-zone-track button:focus-visible { outline:3px solid var(--hv-pink); outline-offset:2px; }
.hv-zone-help { margin:7px 4px 0; color:rgba(36,20,45,.62); font-size:.74rem; font-weight:750; text-align:center; }

.hv-info-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin: 28px 0;
}
.hv-info-grid article { padding: 18px; border: 1px solid var(--hv-line); border-radius: 18px; background: rgba(255,255,255,.76); box-shadow: 0 14px 34px rgba(64,35,83,.09); }
.hv-info-grid h2,.hv-info-grid h3 { margin: 0 0 8px; }
.hv-info-grid p { margin: 0; color: rgba(36,20,45,.7); line-height: 1.55; }

.hv-reward-card { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 18px; padding: 20px; border: 2px solid var(--hv-ink); border-radius: 22px; background: linear-gradient(135deg,#fff3bd,#ffd4ec 54%,#ccefff); box-shadow: 6px 6px 0 var(--hv-ink); }
.hv-reward-card img { width: 170px; height: 170px; object-fit: cover; object-position: center 56%; }
.hv-reward-card h2 { margin: 0; }
.hv-reward-card p { line-height: 1.5; }

.hv-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:32px 0 92px; color:rgba(36,20,45,.68); font-weight:700; }
.hv-footer a { color:var(--hv-ink); font-weight:900; }

body.hv-embed { background:#fff; }
.hv-embed .hv-header,
.hv-embed .hv-hero,
.hv-embed .hv-info-grid,
.hv-embed .hv-reward-card,
.hv-embed .hv-footer { display:none; }
.hv-embed .hv-main { width:100%; }
.hv-embed .hv-game-shell { margin:0; border:0; border-radius:0; box-shadow:none; }

@media (max-width: 720px) {
  .hv-nav { display: none; }
  .hv-hero { grid-template-columns: 1fr; padding: 18px; }
  .hv-hero-art { min-height: 210px; order: -1; }
  .hv-hero-art img { height: 220px; }
  .hv-hero h1 { font-size: clamp(2.35rem,13vw,3.5rem); }
  .hv-hud { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hv-pressure { grid-column: 1 / -1; order: -1; }
  .hv-stage { min-height: 300px; aspect-ratio: 9 / 12; }
  .hv-controls { grid-template-columns: 1fr auto; }
  .hv-controls .hv-boost { grid-column: 1 / -1; }
  .hv-info-grid { grid-template-columns: 1fr; }
  .hv-reward-card { grid-template-columns: 1fr; padding: 14px; text-align:center; }
  .hv-reward-card img { width:min(100%,280px);height:150px;justify-self:center; }
  .hv-reward-card .hv-actions { justify-content:center; }
  .hv-zone-track { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 420px) {
  .hv-main,.hv-header,.hv-footer { width:min(100% - 14px,1120px); }
  .hv-hero { border-radius:20px; box-shadow:4px 4px 0 var(--hv-ink); }
  .hv-game-shell { padding:7px; border-radius:20px; box-shadow:4px 4px 0 var(--hv-ink); }
  .hv-stat { padding:7px 4px; }
  .hv-stat strong { font-size:.98rem; }
  .hv-game-head { display:block; }
  .hv-game-head .hv-button { margin-top:8px; }
  .hv-panel { padding:14px; }
  .hv-panel img { width:min(100%,260px);height:116px; }
  .hv-panel-stats { grid-template-columns:1fr; }

  .hv-overlay[data-hv-overlay="start"] { padding:8px; }
  .hv-overlay[data-hv-overlay="start"] .hv-panel { max-height:96%; padding:10px; overflow:hidden; }
  .hv-overlay[data-hv-overlay="start"] .hv-panel img { height:72px; }
  .hv-overlay[data-hv-overlay="start"] .hv-panel h3 { font-size:1.4rem; }
  .hv-overlay[data-hv-overlay="start"] .hv-panel p { margin:6px 0; font-size:.74rem; line-height:1.28; }
  .hv-overlay[data-hv-overlay="start"] .hv-start-routes { grid-template-columns:repeat(2,1fr); margin:7px 0; }
  .hv-overlay[data-hv-overlay="start"] .hv-start-routes button { min-height:32px; }
  .hv-overlay[data-hv-overlay="start"] .hv-button { min-height:40px; padding:7px 12px; }

  .hv-overlay[data-hv-overlay="end"] .hv-panel { padding:10px; overflow:hidden; }
  .hv-overlay[data-hv-overlay="end"] .hv-panel img { height:68px; }
  .hv-overlay[data-hv-overlay="end"] .hv-panel h3 { font-size:1.35rem; }
  .hv-overlay[data-hv-overlay="end"] .hv-panel p { margin:6px 0; font-size:.76rem; line-height:1.25; }
  .hv-overlay[data-hv-overlay="end"] .hv-panel-stats { grid-template-columns:repeat(3,1fr); margin:6px 0; }
  .hv-overlay[data-hv-overlay="end"] .hv-panel-stats div { padding:6px 3px; }
  .hv-overlay[data-hv-overlay="end"] .hv-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
  .hv-overlay[data-hv-overlay="end"] .hv-button { min-height:38px; padding:5px 7px; font-size:.74rem; }
  .hv-overlay[data-hv-overlay="end"] [data-hv-reward-download] { grid-column:1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-hero-art img { animation:none; }
}