:root{
  --bg-1: #0f1720;
  --bg-2: #0b0f14;
  --accent-start: #ff8a66;
  --accent-end: #ff5a3a;
  --muted: #94a3b8;

  /* responsive sizes using clamp(min, preferred, max) so elements adapt smoothly */
  --dot-size: clamp(40px, 8.4vw, 64px);
  --plane-size: clamp(36px, 9.0vw, 140px);
  --proj-size: clamp(12px, 2.4vw, 28px);
  --explosion-size: clamp(96px, 18vw, 220px);
}

*{box-sizing:border-box}
html,body{height:100%; overflow:hidden;}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,90,60,0.06), transparent 8%),
              radial-gradient(1000px 500px at 90% 90%, rgba(100,120,255,0.03), transparent 6%),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* Landing overlay styles */
#landing{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  z-index:999;
  background: linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.28));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events:auto;
}
/* while landing overlay is active we blur the game in the background */
body.landing-active .stage{
  filter: blur(18px) saturate(0.86) brightness(0.88);
  transform-origin: center;
  transition: filter 300ms ease, transform 300ms ease;
  /* optionally slightly scale down to emphasize the overlay */
  transform: scale(0.992);
  /* avoid accidental interaction with the game while overlay is visible */
  pointer-events: none;
  user-select: none;
}
#landing .landing-inner{
  width:100%;
  max-width:520px;
  margin-top:6vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  padding:18px;
  box-sizing:border-box;
  text-align:center;
  pointer-events:auto;
}
.landing-photo{
  width: min(520px, 92vw);
  height: auto;
  border-radius:10px;
  box-shadow: 0 20px 54px rgba(0,0,0,0.52), inset 0 -6px 18px rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.03);
  display:block;
  will-change:transform, opacity;
  object-fit: cover;
}
/* Landing button */
.landing-button{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  border:0;
  background: linear-gradient(180deg,#ffd9c4,#ff8a66);
  color:#2b0b00;
  font-weight:700;
  padding:14px 28px;
  border-radius:999px;
  font-size:18px;
  box-shadow: 0 12px 30px rgba(255,110,70,0.12), inset 0 2px 0 rgba(255,255,255,0.2);
  cursor:pointer;
  transform: translateY(0);
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease, opacity 160ms ease;
  min-width: 160px;
  z-index:1000;
}
.landing-button:active{ transform: translateY(3px) scale(0.996); box-shadow: 0 6px 12px rgba(0,0,0,0.35); }

/* When landing is dismissed, hide it visually */
#landing.hidden{
  opacity:0;
  pointer-events:none;
  transform: translateY(-6px);
  transition: opacity 280ms ease, transform 280ms ease;
}

/* reuse existing stage layout for the game */
.stage{
  width:100%;
  max-width:920px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  height:100vh; /* ensure fits one screen */
  padding-left:24px;
  padding-right:24px;
}

/* target container replacing the heading (map of Russia) */
#target{
  margin:0;
  /* responsive footprint: fill available width but cap on large screens */
  width: min(1100px, 98vw);
  max-width:98vw;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  pointer-events:none; /* projectiles interact visually but not by pointer */
  /* allow visual overflow so explosions and projectiles are not clipped by the image container */
  overflow: visible;
  z-index: 100;
  /* ensure the container can shrink on very short viewports without overflowing */
  max-height: min(75vh, 900px);
  box-sizing: border-box;
}
#target img{
  width:100%;
  height:auto;
  /* allow the map to scale nicely across phones/tablets/desktops */
  max-height: clamp(220px, 60vh, 1100px);
  object-fit:contain;
  display:block;
  /* keep a soft drop shadow but avoid hard edge artifacts by using a subtle inner mask */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.55));
  /* apply a subtle inward mask to gently fade image edges and hide seam/traces */
  -webkit-mask-image: radial-gradient(closest-side, black 94%, rgba(0,0,0,0.0) 100%);
  mask-image: radial-gradient(closest-side, black 94%, rgba(0,0,0,0.0) 100%);
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  user-select: none;
  pointer-events:none;
}

/* subtitle / muted spacing for balance (kept invisible visually) */
.stage::after{
  content: "";
  display:block;
  height:2px;
  width:48px;
  margin-top:6px;
  border-radius:4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  opacity:0.9;
}

/* fixed bottom-centered control so it never scrolls away */
.buttons{
  position: fixed;
  left: 50%;
  /* nudged slightly higher for easier reach and to avoid overlap with plane visuals */
  bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  padding:6px;
  z-index:420;
  pointer-events:auto; /* allow interacting even when other layers animate */
}

/* refined circular buttons with subtle borders and glass effect */
.dot{
  width:var(--dot-size);
  height:var(--dot-size);
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
  box-shadow: 0 6px 20px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, backdrop-filter .18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position:relative;
  overflow:hidden;
}

/* tiny visual differences for the three buttons */
.dot.single{
  margin: 0 auto;
  /* keep subtle warm tint so it still reads as a single prominent control */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)), rgba(255,90,60,0.12);
}
/* removed multi-button-specific styling; enhance fire-button appearance when used solo */
.dot.fire-button {
  background: radial-gradient(circle at 40% 30%, #fff6e8 0%, #ffbfa0 10%, #ff6b4a 40%, #d93e2a 100%);
  border: 2px solid rgba(255,160,120,0.14);
  box-shadow: 0 10px 36px rgba(255,90,60,0.14), inset 0 8px 16px rgba(255,160,120,0.06);
  transform: translateY(-2px) scale(1.06);
  position:relative;
  overflow:visible;
  transition: transform 140ms cubic-bezier(.2,.9,.2,1), box-shadow 140ms ease, filter 140ms ease;
  width: calc(var(--dot-size) * 1.06);
  height: calc(var(--dot-size) * 1.06);
}
.dot.fire-button:active, .dot.fire-button:focus{
  transform: translateY(0) scale(1.0);
}

/* Fire button styling (middle button) */
.dot.fire-button{
  background: radial-gradient(circle at 40% 30%, #ffb3a0 0%, #ff6b4a 40%, #d93e2a 100%);
  border: 2px solid rgba(255,160,120,0.12);
  box-shadow: 0 8px 30px rgba(255,90,60,0.12), inset 0 6px 12px rgba(255,160,120,0.06);
  transform: translateY(-2px) scale(1.02);
  position:relative;
  overflow:visible;
}

/* central red dome (visual button) inside the circular control */
.dot.fire-button .fire-icon{
  display:block;
  width:54%;
  height:54%;
  margin:auto;
  margin-top:6%;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff6e8 0%, #ffbfa0 12%, #ff6b4a 45%, #d93e2a 100%);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.18), 0 8px 18px rgba(255,90,60,0.18);
  transition: transform 120ms cubic-bezier(.2,.9,.2,1), box-shadow 120ms ease, filter 120ms ease;
  pointer-events:none;
  transform-origin:center;
}

/* glowing halo when idle/hover to suggest armed state */
.dot.fire-button::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148%;
  height: 148%;
  transform: translate(-50%,-50%) scale(0.9);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 45%, rgba(255,150,110,0.22), rgba(255,90,60,0.06) 40%, transparent 60%);
  pointer-events:none;
  opacity: 0.9;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: -1;
}

/* press effect: depressed dome and stronger inner glow */
.dot.fire-button:active,
.dot.fire-button:focus{
  transform: translateY(0) scale(0.995);
}
.dot.fire-button:active .fire-icon{
  transform: scale(0.92) translateY(2px);
  box-shadow: inset 0 -4px 10px rgba(0,0,0,0.22), 0 6px 12px rgba(255,60,40,0.18);
  filter: brightness(1.04) saturate(1.06);
}

/* pulse on click to simulate ignition flash */
.dot.fire-button:active::before{
  transform: translate(-50%,-50%) scale(1.05);
  opacity: 1;
  transition: transform 140ms cubic-bezier(.2,.9,.2,1), opacity 140ms ease;
}

/* realistic tactile button look + animated press state */
.dot.fire-button.realistic {
  width: calc(var(--dot-size) * 1.02);
  height: calc(var(--dot-size) * 1.02);
  background: linear-gradient(180deg, #fff7ee 0%, #ffdfcf 6%, #ff9a78 50%, #c33b28 100%);
  border: 0;
  box-shadow:
    0 18px 30px rgba(0,0,0,0.45),
    inset 0 6px 14px rgba(255,255,255,0.12),
    inset 0 -12px 32px rgba(0,0,0,0.18);
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6%;
  user-select:none;
}

/* outer rim to emphasize mechanical bezel */
.dot.fire-button.realistic::after{
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(255,255,255,0.02));
  pointer-events:none;
  z-index: 0;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* pressed state (programmatic via class) */
.dot.fire-button.realistic.pressed {
  transform: translateY(6px) scale(0.985);
  box-shadow:
    0 8px 14px rgba(0,0,0,0.42),
    inset 0 4px 10px rgba(0,0,0,0.22);
}
.dot.fire-button.realistic.pressed .fire-icon {
  transform: scale(0.86) translateY(4px);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.26), 0 4px 8px rgba(0,0,0,0.16);
  filter: brightness(0.98) saturate(0.98);
}

/* micro-recoil animation to run once on click so it feels snappy */
.dot.fire-button.realistic .fire-icon {
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease, filter 160ms ease;
  z-index: 2;
  position: relative;
}
.dot.fire-button.realistic.fire-tap {
  animation: fire-recoil 260ms cubic-bezier(.22,.9,.2,1);
}
@keyframes fire-recoil {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(4px) scale(.96); }
  100% { transform: translateY(0) scale(1); }
}

/* ensure size scaling on small screens keeps the dome proportional */
@media (max-width:420px){
  .dot.fire-button .fire-icon{
    width:60%;
    height:60%;
  }
  .landing-photo{ width:90vw; height:auto; border-radius:6px; }
  .landing-button{ font-size:18px; padding:14px 22px; min-width: 140px; }
}
/* removed other dot nth-child(3) rules since only the central fire button remains */

.dot:hover{ transform: translateY(-4px) scale(1.03); box-shadow: 0 14px 30px rgba(2,6,23,0.6); cursor:pointer; }
.dot:active{ transform: translateY(-1px) scale(.99); box-shadow: 0 6px 14px rgba(2,6,23,0.5); }

@media (max-width:420px){
  /* extra compact tuning for very small phones — make button noticeably larger for better tapability and visibility */
  :root{
    /* bumped min/max so the fire button is significantly larger on phones */
    --dot-size: clamp(56px, 14vw, 76px);
    /* increased plane size on phones (bigger for better visibility) */
    --plane-size: clamp(72px, 20vw, 160px);
  }
  .stage{padding:14px}
  /* ensure any large heading (if added) remains readable */
  h1#prenom{font-size:clamp(24px, 12vw, 48px)}
}

/* moderate screens (tablet) adjustments */
@media (min-width:421px) and (max-width:900px){
  :root{
    --dot-size: clamp(44px, 7.6vw, 60px);
    --plane-size: clamp(44px, 8.8vw, 96px);
  }
  .stage{padding:20px}
}

/* Plane styling */

/* hide edge traces on various in-scene images (plane, projectiles, landing photo) by applying a soft mask
   this gently fades hard seams without changing the visible content much.
   Note: #target img (map images) are intentionally excluded so the maps render edge-to-edge
   and do not clip or mask explosions/projectiles that appear over them. */
.landing-photo,
#plane img,
.projectile img {
  -webkit-mask-image: radial-gradient(closest-side, black 94%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(closest-side, black 94%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-mode: alpha;
  /* ensure any background halos are not exacerbated by blend modes */
  background-color: transparent;
}

/* Maps: remove soft mask, drop-shadow and borders so map images show without edge borders,
   and so explosions/projectiles placed over the map are not visually limited by the image mask. */
#target img {
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  /* remove the map-specific drop shadow / border so the image appears edge-to-edge */
  filter: none;
  box-shadow: none;
  border: none;
  background-color: transparent;
}

#plane{
  position:fixed;
  left:0;
  top:0;
  width:var(--plane-size);
  height:var(--plane-size);
  transform: translate(50px, 50px);
  z-index:120;
  pointer-events:auto;
  will-change:transform, opacity;
  /* faster transform smoothing + GPU-friendly translate3d hint for smoother movement */
  transition: transform 220ms cubic-bezier(.22,.9,.3,1), opacity 180ms;
  opacity:1;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  /* ensure rotation pivot is the plane center */
  transform-origin: center center;
}
#plane img{ display:block; width:100%; height:100%; object-fit:contain; transition: transform 220ms ease-out; transform-origin: center center; }

/* subtle idle tremble applied when plane is moving very slowly */
#plane.idle-tremble img{
  animation: plane-tremble 900ms ease-in-out infinite;
}

/* small tilt when grabbing for feedback */
#plane.grabbing img{
  transform: scale(0.98) rotate(-6deg);
}

#plane:hover{ cursor:grab; opacity:0.95; }
#plane:active{ cursor:grabbing; opacity:0.9; }

/* keyframes for idle micro-movement to simulate engine vibration */
@keyframes plane-tremble {
  0% { transform: translateY(0px) rotate(-1.2deg) scale(1); }
  25% { transform: translateY(-1.6px) rotate(0.6deg) scale(1.002); }
  50% { transform: translateY(0px) rotate(1.2deg) scale(1); }
  75% { transform: translateY(1.2px) rotate(0.2deg) scale(0.998); }
  100% { transform: translateY(0px) rotate(-1.2deg) scale(1); }
}

/* projectile and explosion */
/* projectile uses the uploaded missile image */
.projectile{
  position:fixed;
  width: calc(var(--proj-size) * 2.2); /* a little larger for visibility */
  height: calc(var(--proj-size) * 2.2);
  z-index:200;
  pointer-events:none;
  transform: translate(-50%,-50%) scale(1);
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
  transition: transform 120ms linear;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* ensure the projectile image fits cleanly and can have a little rotation if desired */
.projectile[style]{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
/* ensure projectile inner image fills the wrapper and is always visible */
.projectile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
}

/* smoke trail particles */
.smoke{
  position:fixed;
  width:12px;
  height:12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(200,200,200,0.7) 30%, rgba(140,140,140,0.45) 60%, rgba(40,40,40,0.08) 100%);
  opacity:0.6;
  z-index:195;
  pointer-events:none;
  filter: blur(6px);
  transform-origin: center;
  animation: smoke-rise 1000ms linear forwards;
  will-change: transform, opacity;
}

/* smoke animation: drift upward, grow and fade out */
@keyframes smoke-rise {
  0% {
    transform: translate(-50%,-50%) translateY(0) scale(0.9);
    opacity:0.6;
    filter: blur(4px);
  }
  40% {
    opacity:0.5;
    filter: blur(6px);
  }
  100% {
    transform: translate(-50%,-50%) translateY(-36px) scale(1.6);
    opacity:0;
    filter: blur(10px);
  }
}

/* explosion visuals */
.explosion{
  position:fixed;
  width:var(--explosion-size);
  height:var(--explosion-size);
  margin-left: calc(var(--explosion-size) * -0.5);
  margin-top: calc(var(--explosion-size) * -0.5);
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,250,210,0.95) 0%, rgba(255,160,90,0.9) 25%, rgba(220,60,20,0.85) 55%, rgba(0,0,0,0) 70%);
  filter: blur(2px);
  opacity:0;
  z-index:210;
  pointer-events:none;
  transform: scale(0.2);
  transition: transform 420ms ease-out, opacity 420ms ease-out, filter 420ms ease-out;
  mix-blend-mode: screen;
}

/* small shake for target when hit */
@keyframes hit-shake {
  0% { transform: translateY(0); }
  20% { transform: translateY(-6px); }
  40% { transform: translateY(3px); }
  60% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Damage visuals for the target container (3 stages + destroyed) */
#target.damage-stage-3 {
  /* minor darkening but keep colors vivid — warm tint for visible damage */
  filter: saturate(1.08) brightness(0.96) contrast(1.02) drop-shadow(0 10px 26px rgba(0,0,0,0.55));
  opacity: 0.99;
}

#target.damage-stage-2 {
  /* medium damage: slightly reduced brightness but richer saturation */
  filter: saturate(1.04) brightness(0.96) contrast(1.01) drop-shadow(0 8px 22px rgba(0,0,0,0.5));
}

#target.damage-stage-1 {
  /* light damage: subtle warmth and preserved color */
  filter: saturate(1.00) brightness(0.95) contrast(1.00) drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}

/* destroyed state: keep the map colored but add a warm scorched tint and subtle vignette */
#target.destroyed {
  filter: saturate(0.98) contrast(0.92) brightness(0.78) drop-shadow(0 6px 18px rgba(0,0,0,0.6));
  opacity: 0.96;
  position: relative;
  /* gentle warm overlay to indicate damage without desaturating */
  box-shadow: inset 0 0 0 9999px rgba(120,40,20,0.06);
}

/* subtle "crack" overlay using pseudo-element on the container */
#target.destroyed::after{
  content: "";
  position: absolute;
  left: 6%;
  top: 12%;
  width: 88%;
  height: 76%;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.06) 100%),
    radial-gradient(40% 60% at 30% 30%, rgba(255,255,255,0.02), rgba(0,0,0,0) 30%);
  mix-blend-mode: multiply;
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  opacity: 0.9;
}

/* respawned "more beautiful" state: bloom, pop and shifting glow on the container */
#target.respawned {
  animation: respawn-pop 780ms cubic-bezier(.2,.9,.2,1), respawn-glow 2200ms ease-in-out;
  filter: drop-shadow(0 18px 40px rgba(255,140,70,0.12)) saturate(1.06) brightness(1.03);
  transform-origin: center;
}

/* tiny spark / particle used during respawn (unchanged) */
.mini-spark{
  position:fixed;
  width:8px;
  height:8px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff7d6, #ffb47a 45%, #ff8550 100%);
  pointer-events:none;
  z-index:220;
  opacity:1;
  transform: translate(-50%,-50%) scale(0.8);
  transition: transform 700ms cubic-bezier(.15,.9,.25,1), opacity 600ms ease-out;
  will-change: transform, opacity;
}

/* respawn keyframes */
@keyframes respawn-pop {
  0% { transform: scale(0.6) translateY(6px); opacity: 0; filter: blur(4px); }
  55% { transform: scale(1.08) translateY(-6px); opacity: 1; filter: blur(0px); }
  100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0px); }
}

@keyframes respawn-glow {
  0% { text-shadow: 0 6px 18px rgba(255,160,100,0.06); }
  50% { text-shadow: 0 20px 48px rgba(255,140,70,0.28); }
  100% { text-shadow: 0 12px 28px rgba(255,120,60,0.12); }
}

/* small broken fragments that appear in destroyed state */
h1#prenom.destroyed .fragment {
  display: none;
}

/* accessibility: make sure damaged states remain readable on small screens */
@media (max-width:420px){
  h1#prenom.damage-stage-1,
  h1#prenom.damage-stage-2,
  h1#prenom.damage-stage-3,
  h1#prenom.destroyed {
    filter: none;
    opacity: 0.98;
  }
}

/* Congratulation overlay shown after finishing all maps */
.congrats-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.72));
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}
.congrats-overlay[aria-hidden="false"]{
  pointer-events: auto;
  opacity: 1;
}
.congrats-inner{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  padding: 22px;
  border-radius: 12px;
  min-width: 260px;
  max-width: 92vw;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(1.04);
}
.congrats-inner h2{
  margin: 0 0 14px 0;
  font-size: clamp(18px, 5.6vw, 28px);
  color: #ffece0;
  text-shadow: 0 6px 18px rgba(200,60,40,0.12);
  font-weight: 800;
}
/* small flag emoji next to the congrats heading */
.flag-emoji{
  display:inline-block;
  margin-left:8px;
  vertical-align:middle;
  font-size:1.05em;
  line-height:1;
}
.congrats-inner .landing-button{
  min-width: 180px;
  padding: 12px 18px;
  font-weight: 800;
  background: linear-gradient(180deg,#fff0e6,#ff9072);
  color:#2b0b00;
  box-shadow: 0 12px 30px rgba(255,110,70,0.12);
  border-radius: 10px;
}