:root{ --bg:#f7fafc; --ink:#0f172a; --accent:#ef4444; --muted:#475569; --card:#ffffff; --shadow:0 10px 30px rgba(15,23,42,.16); }
  *{box-sizing:border-box}
  html,body{height:100%}

  /* ===== Long-press & scroll control ===== */
  html, body { overscroll-behavior: none; } /* prevent elastic bounce & pull-to-refresh */
  body.hfs-no-callout, body.hfs-no-callout *:not([data-allow-select]){
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.hfs-scroll-locked{
    overflow:hidden;
    position:fixed;   /* iOS-friendly page freeze */
    inset:0;
    width:100%;
  }
  .playfield.hfs-playing{ touch-action: none; } /* stop pan/zoom in the game area while playing */

  html, body { touch-action: manipulation; }
  .playfield, .hand-target, .gift { touch-action: manipulation; }

  body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background: radial-gradient(1200px 800px at 70% -10%, #fff 0%, var(--bg) 60%); color:var(--ink)}
  .container{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:3px}
  .game-card{width:min(980px,96vw);background:var(--card);border-radius:28px;box-shadow:var(--shadow);padding:clamp(16px,3vw,28px)}
  .header{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
  .title{font-size:clamp(20px,2.4vw,28px);font-weight:800}
  .subtitle{color:#64748b;font-size:clamp(13px,1.6vw,15px)}
  .hud{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 18px}
  .chip{background:#f1f5f9;color:#0f172a;border-radius:999px;padding:8px 14px;font-weight:700;font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:6px;}
  .chip.glow{box-shadow:0 0 0 0 rgba(16,185,129,.0); transition: box-shadow .15s ease}
  .chip.glow.active{box-shadow:0 0 0 6px rgba(16,185,129,.15)}
  .chip.clicky{cursor:pointer; user-select:none; outline:0}
  .chip.clicky:focus{box-shadow:0 0 0 3px rgba(59,130,246,.5)}
  .btn{border:0;background:var(--accent);color:#fff;font-weight:800;padding:10px 16px;border-radius:14px;cursor:pointer;box-shadow:0 6px 14px rgba(239,68,68,.35);transition:transform .04s ease}
  .btn:active{transform:translateY(1px)}
  .btn.secondary{background:#0ea5e9;box-shadow:0 6px 14px rgba(14,165,233,.3)}
  .btn[disabled]{opacity:.6;cursor:not-allowed}
  .btn.icon{width:36px;height:36px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
  .sel{appearance:none;border:1px solid #e2e8f0;border-radius:12px;padding:8px 12px;font-weight:700;background:#fff}
  .playfield{position:relative;height:min(60vh,560px);min-height:380px;width:100%;max-width:500px;margin:0 auto;border-radius:24px;overflow:hidden;border:1px solid #e2e8f0;background:#dfefff}
  #skyImg{position:absolute;z-index:0;pointer-events:none;user-select:none;-webkit-user-drag:none}
  #groundImg{position:absolute;z-index:1;pointer-events:none;user-select:none;-webkit-user-drag:none}
  #snow{position:absolute;inset:0;z-index:2;pointer-events:none}
  .stage{position:absolute;inset:0;z-index:3}
  .gift-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; }
  .gift{ position:absolute; pointer-events:auto; cursor:pointer; user-select:none; -webkit-user-drag:none;
         width:64px; height:64px; will-change: transform, opacity; }
  .gift.pop{ transform:scale(1.18) rotate(12deg) !important; opacity:0 !important; transition: transform .14s ease-out, opacity .14s ease-out; }
  .bubble{position:absolute;top:10%;left:8%;background:#fff;border:2px solid #e2e8f0;border-radius:16px;padding:8px 12px;font-weight:800;transform:scale(0);transform-origin:left top;transition:transform .18s ease}
  .bubble.show{transform:scale(1)}
  #santaImg{position:absolute; left:8%; bottom:3%; width:350px; height:auto; user-select:none; -webkit-user-drag:none}
  #armLayer{position:absolute;inset:0;pointer-events:none}
  #armPath{stroke:#e6251c;stroke-width:45;stroke-linecap:round;fill:none}
  .hand-target{position:absolute;width:140px;height:140px;cursor:pointer;touch-action:manipulation}
  .hand-target img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
  .hand-target:active{filter:brightness(.95)}
  .hand-target.cue-active{ filter: drop-shadow(0 0 10px var(--cue-color, rgba(239,68,68,.9))); }
  .hand-target.cue-active::after{
    content:""; position:absolute; pointer-events:none; border-radius:999px; opacity:.9;
    inset: calc(-1 * var(--cue-ring, 12px)); border: 3px solid var(--cue-color, rgba(239,68,68,.9));
    animation: cuePulse var(--cue-dur, .45s) ease-out 1;
  }
  @keyframes cuePulse{ 0%{ transform: scale(.88); opacity: 0; } 40%{ opacity:.95 } 100%{ transform: scale(1.2); opacity:0 } }
  .overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);color:#fff;backdrop-filter:saturate(1.2) blur(3px)}
  .overlay.hidden{display:none}
  .panel{background:#0b1220;padding:24px;border-radius:20px;box-shadow:var(--shadow);max-width:min(560px,92%);text-align:center}
  .panel h2{margin:0 0 8px}
  .panel p{margin:0 0 16px;color:#cbd5e1}
/* Game Over overlay - scroll whole modal when tall, keep top visible */
#overlayGameOver{
  align-items:flex-start;  /* pin panel to top of overlay instead of dead-center */
  overflow-y:auto;         /* allow the whole overlay area to scroll */
}

#overlayGameOver .panel{
  margin-top:20px;         /* breathing room from top of playfield */
  margin-bottom:20px;      /* breathing room at bottom when scrolling */
}
  .footer{margin-top:12px;color:#64748b;font-size:12px}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  #shoulderDot,#handAnchorDot{display:none}
  #errpill{position:fixed;left:8px;bottom:8px;background:#dc2626;color:#fff;border-radius:999px;font:600 12px/1 ui-sans-serif,system-ui; padding:6px 10px; box-shadow:0 6px 18px rgba(220,38,38,.35); z-index:9999; display:none}
  #errpill.show{display:inline-block}

  /* ====== MODALS ====== */
/* Global scores modal tweaks */
#globalScoresModal .modal-card{
  width:min(325px, 92vw);     /* narrower than the default 720px */
  margin:24px auto 0;         /* center horizontally, a bit closer to top */
}

/* Center list items inside the Global Scores modal */
#globalScoresModal #globalScoresContent{
  text-align: center;
}

#globalScoresModal #globalScoresContent ol{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

#globalScoresModal #globalScoresContent li{
  display: block;
  margin: 2px 0;
  text-align: center;
  justify-content: center; /* override scoreboard flex spacing */
  gap: 0;
}

/* Center the global scores list */
#globalScoresModal #globalScoresContent,
#globalScoresModal #globalScoresContent ol,
#globalScoresModal #globalScoresContent li{
  text-align: center;
  margin-left: 0;
}


  .modal{position:fixed;inset:0;z-index:70;display:none;align-items:flex-start;justify-content:center;background:rgba(15,23,42,.6);backdrop-filter:blur(3px);overflow:auto;overscroll-behavior:contain}
  .modal.show{display:flex}
  .modal-card{background:#0b1220;color:#fff;width:min(720px,94vw);margin:40px 12px;border-radius:20px;box-shadow:var(--shadow);padding:18px;border:1px solid #1f2937}
  .modal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .modal-head h3{margin:0;font-size:18px}
/* Hide the top close button just for the Help modal */
   #helpModal #btnCloseHelp {display: none !important;}
/* Temporarily hide the "Copy image + link" button in the Share modal */
   #btnCopyImage {display: none !important;}
/* Make 1-Click share occupy the first row by itself */
   #shareModal #btnShareSystem {flex-basis: 0 0 100%;}
/* Second row: two buttons, each half width 
   #shareModal #btnSaveImage,#shareModal #btnCopyLink {flex: 1 1 calc(50% - 5px);}*/
  .modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
  .modal-card p{color:#cbd5e1}
  .modal-card .list{background:#0f172a;border:1px solid #1f2937;border-radius:14px;padding:12px}
  .stickers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
  /* Center the single Victory sticker */
  .stickers-grid.victory {
  grid-template-columns: 1fr;
  justify-items: center;  /* centers the card horizontally */
  }
/* Only the GLOBAL scoreboard on the Game Over overlay scrolls */
#overlayGameOver #hfsGlobalMount.hfs-global-mount {
  max-height: min(175px, 45vh);  /* tweak this to taste */
  overflow-y: auto;
  margin-top: 12px;               /* matches local spacing */
}

  .sticker-section{margin:8px 0 14px}
  .sticker-head{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px}
  .sticker-head h5{margin:0;font-size:13px;color:#cbd5e1;font-weight:800;letter-spacing:.02em}
  .sticker-card{background:#0f172a;border:1px solid #1f2937;border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;position:relative}
  .sticker-card img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
  .sticker-name{font-weight:800;font-size:12px}
  .unlock-at{font-size:11px;color:#cbd5e1}
  .sticker-locked img{filter:grayscale(100%) brightness(.75) contrast(.9)}
  .sticker-locked::after{content:"🔒";position:absolute;right:6px;top:6px;font-size:16px;opacity:.9}

  #toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(120%);background:#0b1220;color:#fff;border:1px solid #1f2937;border-radius:14px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:60;opacity:0;transition:transform .24s ease, opacity .24s ease;font-weight:800}
  #toast.show{transform:translateX(-50%) translateY(0);opacity:1}
  #confetti{ position:fixed; inset:0; z-index:59; pointer-events:none; }

  /* Super Prize overlay */
  #superPrize{ position:fixed; inset:0; z-index:75; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.65); }
  #superPrize.show{ display:flex; }
  #superPrizeInner{ background:#0b1220; border:1px solid #1f2937; border-radius:18px; padding:10px; box-shadow:0 12px 36px rgba(0,0,0,.45); }
  #superPrizeInner img{ display:block; max-width:min(520px,90vw); height:auto; border-radius:12px; }

  #audioPrompt{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:none}
  #comboPop{ position:fixed; z-index:61; pointer-events:none; font: 900 18px/1.1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:#0b1220; background:#ffffff; border:2px solid #1f2937; border-radius:999px; padding:6px 10px; transform:translate(-50%,-50%) scale(.85); opacity:0; box-shadow:0 8px 22px rgba(0,0,0,.22); transition: transform .18s ease, opacity .18s ease; }
  #comboPop.show{ opacity:1; transform:translate(-50%,-80%) scale(1); }
	
  .legal-footer{
  text-align: center;
  color: #94a3b8;      /* soft gray */
  font-size: 12px;     /* small */
  font-weight: 600;    /* a touch of bold for readability */
  margin: -15px 0 14px;  /* slight spacing below the game card */
  }



  /* ---------- Mobile polish ---------- */
  @media (max-width: 560px){
    .game-card{ border-radius:24px; padding:3px 8px; }
    .header{ align-items:flex-start; gap:10px; }
    .title{ font-size:20px; }
    .subtitle{ font-size:13px; color:#64748b; }
    #controls{ margin-left:0 !important; width:100%; display:flex; gap:8px; flex-wrap:nowrap; }
    #controls .sel{ flex:0 0 auto; width:auto; white-space:nowrap; min-width:0; border-radius:999px; padding:10px 14px; font-weight:800; border:1px solid #e2e8f0; box-shadow:0 6px 18px rgba(2,6,23,.06); background:#fff; }
    #btnStickers{ border-radius:999px; padding:10px 14px; box-shadow:0 8px 20px rgba(14,165,233,.28); white-space:nowrap; }
    .hud{ gap:0px; margin:4px 0 0px; font-size:14px; }
    .chip{ padding:6px 7px; font-size:14px; }
    .chip .label{ display:none; }
    #timeChip .unit{ display:none; }
    .playfield{ margin-top:6px; border-radius:20px; height:min(60vh,460px);min-height:380px;max-height:460px;max-width:360px;margin:0 auto; }
    .chip[data-tip]{ position:relative; }
    .chip.show-tip::after{ content: attr(data-tip); position:absolute; bottom: calc(100% + 8px); left:50%; transform: translateX(-50%); background:#0b1220; color:#fff; border:1px solid #1f2937; border-radius:10px; padding:6px 8px; font-weight:800; font-size:12px; white-space:nowrap; box-shadow:0 10px 20px rgba(0,0,0,.25); z-index:15; }
    .chip.show-tip::before{ content:""; position:absolute; bottom:100%; left:50%; transform: translateX(-50%); border-width:6px 6px 0 6px; border-style: solid; border-color:#0b1220 transparent transparent transparent; z-index:15; }
  }

  
  /* Points pop animation */
  .points-pop{ position:absolute; right:8px; top:-6px; font-weight:800; font-size:12px; opacity:0; transform:translateY(0); transition:transform .6s ease, opacity .6s ease; pointer-events:none; }
  .points-pop.show{ opacity:1; transform:translateY(-14px); }

  
  /* Scoreboard NEW badge */
.new-tag{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;              /* from the later override */
  border-radius:9999px;
  font-size:10.5px;             /* from the later override */
  font-weight:800;
  background:#16a34a;
  color:#fff;
  box-shadow:0 6px 14px rgba(22,163,74,.35);
  flex:0 0 auto;                /* from the later override */
}

.highlight-new{
  animation:hfs-pop-glow 1200ms ease;
}

@keyframes hfs-pop-glow{
  0%{
    transform:scale(0.85);
    filter:drop-shadow(0 0 0 rgba(34,197,94,0));
  }
  35%{
    transform:scale(1.04);
    filter:drop-shadow(0 0 14px rgba(34,197,94,.5));
  }
  100%{
    transform:scale(1.0);
    filter:drop-shadow(0 0 0 rgba(34,197,94,0));
  }
}
  
  /* Scoreboard layout + initials + NEW badge */
  .scoreboard ol{ list-style:decimal; }
  .scoreboard li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .sb-right{ min-width:54px; text-align:right; font-weight:800; letter-spacing:.12em; opacity:.9; }
  .sb-right.placeholder{ opacity:.4; }
  .sb-initials{ display:flex; gap:6px; align-items:center; justify-content:center; margin:8px 0; }
  .sb-initials input{ width:72px; text-transform:uppercase; text-align:center; letter-spacing:.18em; font-weight:800; padding:6px 8px; border-radius:10px; background:#0b1220; color:#e2e8f0; border:1px solid rgba(148,163,184,.35); }
  .new-tag{ display:inline-block; margin-left:6px; padding:2px 6px; border-radius:9999px; font-size:11px; font-weight:800; background:#16a34a; color:#fff; box-shadow:0 6px 14px rgba(22,163,74,.35); }
  .highlight-new{ animation: hfs-pop-glow 1200ms ease; }
  @keyframes hfs-pop-glow{
    0%{ transform:scale(0.85); filter:drop-shadow(0 0 0 rgba(34,197,94,0)); }
    35%{ transform:scale(1.04); filter:drop-shadow(0 0 14px rgba(34,197,94,.5)); }
    100%{ transform:scale(1.0); filter:drop-shadow(0 0 0 rgba(34,197,94,0)); }
  }

  
  /* Disabled control look */
  .btn.disabled{ opacity:.5; cursor:not-allowed; }
  #difficulty[disabled]{ opacity:.6; cursor:not-allowed; }

  
  /* Scoreboard width + spacing + nowrap to avoid line wraps on 4-digit scores */
  .scoreboard{ width: min(100%, 560px); margin: 12px auto; }
  .scoreboard li{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .scoreboard li > span:first-child{ display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap; flex:1 1 auto; min-width:0; }
  .sb-right{ flex:0 0 auto; min-width:84px; text-align:right; white-space:nowrap; letter-spacing:.12em; font-weight:800; }
  .new-tag{ margin-left:6px; padding:1px 6px; font-size:10.5px; flex:0 0 auto; }

/* Intro overlay (scoreboardStart) � bring hits + initials closer */
#scoreboardStart{
  width: min(100%, 200px);   /* tweak 240�280px to taste */
  margin: 12px auto 0;
}

#scoreboardStart li{
  justify-content:space-between;  /* use the normal spacing */
}

#scoreboardStart .sb-right{
  min-width:64px;                 /* smaller initials column */
  margin:0;
}

  /* FX canvas (hit flashes + hand trail) */
  #fxCanvas{
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 60;           /* above stage visuals, below confetti (61+) and HUD (70+) */
    pointer-events: none;  /* never block input */
  }

  /* Combo Meter styles */
  .combo-meter{ position:relative;width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;margin:6px 0 2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);}
  .combo-meter-bar{ width:0%;height:100%;background:linear-gradient(90deg,#ef4444,#ef4444);transition:width 120ms linear, background 160ms linear, transform 220ms ease;will-change:width,background,transform;}
  @keyframes comboBustPulse{0%{transform:scaleX(1);box-shadow:0 0 0 rgba(239,68,68,0)}30%{transform:scaleX(1.02);box-shadow:0 0 16px rgba(239,68,68,0.65)}60%{transform:scaleX(0.98);box-shadow:0 0 10px rgba(239,68,68,0.45)}100%{transform:scaleX(1);box-shadow:0 0 0 rgba(239,68,68,0)}}
  .combo-meter-bar.pulse{ animation: comboBustPulse 520ms ease-out 1; }

  [id*="sound" i],
  [class*="sound" i],
  button[aria-label*="sound" i],
  button[title*="sound" i]{
    display: none !important;
  }

/* Make the card a column so the footer can sit at the bottom inside it */
.game-card{
  position: relative;              /* keep for other positioned children */
  display: flex;
  flex-direction: column;
}

/* Counter as an in-flow footer that always scrolls with the card */
.page-counter-footer{
  margin-top: auto;                /* pushes footer to the bottom inside card */
  display: flex;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  padding-bottom: 3px;            /* desktop baseline */
}

.page-counter-text{
  font: 700 11px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:#E8E8E8;
  opacity:.95;
}

/* Phones: add safe-area cushion and a hair more size */
@media (max-width:560px){
  .page-counter-footer{
    padding-bottom: calc(2px + env(safe-area-inset-bottom));
  }
  .page-counter-text{
    font-weight:800;
    font-size:12px;
  }
}

/* Big screens: a tad more breathing room if needed */
@media (min-width:561px){
  .page-counter-footer{ padding-bottom: 12px; }
}

/* ===== VISUAL HELP MODAL ===== */
.help-modal-card{
  max-width:540px;
  margin:32px auto;
  padding:18px 16px 14px;
  text-align:left;
}

.help-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.help-title-wrap h3{
  margin:0;
  font-size:18px;
  letter-spacing:.02em;
}

.help-pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  background:#0f172a;
  color:#e5e7eb;
  margin-bottom:4px;
}

/* Step dots */
.help-steps-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:4px 0 10px;
}

.help-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:0;
  background:#ffffff;
  opacity:.4;
  cursor:pointer;
  padding:0;
}

.help-dot.is-active{
  width:22px;
  opacity:1;
  background:#ef4444;
}

/* Slides layout */
.help-slides{
  position:relative;
  min-height:260px;
}

.help-slide{
  display:none;
  animation:helpSlideIn .26s ease-out;
}

.help-slide.is-active{
  display:block;
}

@keyframes helpSlideIn{
  0%{ opacity:0; transform:translateY(8px);}
  100%{ opacity:1; transform:translateY(0);}
}

.help-media{
  border-radius:16px;
  overflow:hidden;
  background:#020617;
  border:1px solid #1f2937;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  margin-bottom:10px;
}

.help-media img{
  display:block;
  width:100%;
  height:auto;
}

.help-text h4{
  margin:0 0 4px;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:6px;
}

.help-icon{
  font-size:16px;
}

.help-text p{
  margin:0 0 4px;
  font-size:16px;
  color:#cbd5e1;
}

.help-tip{
  font-size:12px;
  color:#93c5fd;
}

/* Footer actions */
.help-footer{
  display:flex;
  flex-direction:column;
  gap:6px;
  justify-content:flex-end;
  align-items:stretch;
  margin-top:10px;
}

.help-main-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:6px;
}

.help-footer .btn.help-nav,
.help-footer .btn.help-play{
  width:100%;
  font-size:13px;
}

.help-reset{
  font-size:12px;
  align-self:stretch;
  width:100%;
  padding-inline:8px;   /* tighter left/right padding */
  text-align:center;
  margin-top:8px;
}

/* Mobile tweaks */
@media (max-width:560px){
  .help-modal-card{
    width:100%;
    margin:18px 8px;
    padding:14px 12px 10px;
  }
  .help-title-wrap h3{
    font-size:19px;
  }
  .help-media{
    border-radius:14px;
    margin-bottom:8px;
  }
  .help-text h4{
    font-size:14px;
  }
  .help-text p{
    font-size:15px;
  }
}