/* Mahjong Leap — game-specific visuals over the shared shell.
   The whole scene is one SVG; UI (HUD, panels) reads the live --g-* theme. */

/* Drop stage padding so the path runs edge to edge and never scrolls. */
.mj-stage.hop-stage{ padding:0; overflow:hidden; }
.mj-stage.hop-stage > .hop-wrap{ margin:0; max-width:none; }

.hop-wrap{ position:relative; width:100%; height:100%; min-height:420px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:background .9s ease; }
/* Soft premium vignette behind the play field (theme-safe, very subtle). */
.hop-wrap::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 16%, rgba(255,255,255,.07), transparent 58%); }

/* ---------- starry night sky (behind the playfield) ---------- */
.hop-sky{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:linear-gradient(180deg,#0b1026,#05060f); }
.hop-sky .star{ position:absolute; border-radius:50%; background:#fff; opacity:.8;
  animation:hopTwinkle 3s ease-in-out infinite; }
@keyframes hopTwinkle{ 0%,100%{ opacity:.25 } 50%{ opacity:.95 } }
.hop-sky .shoot{ position:absolute; height:2px; width:90px; left:-120px; top:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff); border-radius:2px; opacity:0;
  transform:rotate(20deg); }
.hop-sky .shoot::after{ content:''; position:absolute; right:-3px; top:-1.5px; width:5px; height:5px;
  border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; }
.hop-sky .shoot.s1{ top:16%; animation:hopShoot 7s ease-in 1.5s infinite; }
.hop-sky .shoot.s2{ top:40%; animation:hopShoot 9s ease-in 4.5s infinite; }
.hop-sky .shoot.s3{ top:28%; animation:hopShoot 11s ease-in 7.5s infinite; }
@keyframes hopShoot{
  0%{ transform:translate(0,0) rotate(20deg); opacity:0; }
  6%{ opacity:1; } 18%{ opacity:1; }
  26%{ transform:translate(120vw,42vh) rotate(20deg); opacity:0; }
  100%{ transform:translate(120vw,42vh) rotate(20deg); opacity:0; } }
/* sky variants — the nebula tint shifts on every win so no two "rooms" read alike */
.hop-sky.v1{ background:radial-gradient(80% 60% at 72% 22%, rgba(80,120,210,.20), transparent 60%), linear-gradient(180deg,#0b1026,#05060f); }
.hop-sky.v2{ background:radial-gradient(80% 60% at 28% 20%, rgba(150,90,210,.20), transparent 60%), linear-gradient(180deg,#160b26,#0a0512); }
.hop-sky.v3{ background:radial-gradient(80% 60% at 60% 24%, rgba(60,170,150,.18), transparent 60%), linear-gradient(180deg,#07202a,#04121a); }
.hop-sky.v4{ background:radial-gradient(80% 60% at 40% 22%, rgba(210,80,110,.18), transparent 60%), linear-gradient(180deg,#260b16,#120508); }
.hop-sky.v5{ background:radial-gradient(80% 60% at 70% 20%, rgba(110,180,90,.16), transparent 60%), linear-gradient(180deg,#0c260c,#05120a); }
.hop-sky.v6{ background:radial-gradient(80% 60% at 30% 22%, rgba(120,130,200,.18), transparent 60%), linear-gradient(180deg,#0d1022,#060814); }

/* drifting nebulae — soft clouds that slowly wander so the sky is never still */
.hop-nebula{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(42px);
  opacity:.5; mix-blend-mode:screen; z-index:0; }
.hop-nebula.n1{ width:48%; height:48%; left:-8%; top:6%;
  background:radial-gradient(circle, rgba(90,130,220,.55), transparent 70%);
  animation:hopNeb 38s ease-in-out infinite; }
.hop-nebula.n2{ width:52%; height:52%; right:-12%; top:28%;
  background:radial-gradient(circle, rgba(180,90,210,.5), transparent 70%);
  animation:hopNeb 46s ease-in-out infinite reverse; }
.hop-nebula.n3{ width:42%; height:42%; left:28%; bottom:-12%;
  background:radial-gradient(circle, rgba(70,170,150,.45), transparent 70%);
  animation:hopNeb 54s ease-in-out infinite; }
@keyframes hopNeb{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(6%,-4%) scale(1.08); }
  66%{ transform:translate(-5%,5%) scale(.95); } }

/* constellations — a wind tile (or the sky itself) drifts one in, faint and
   large like something seen far off, then breathes in and out over ~3s */
.hop-constell{ position:absolute; z-index:1; opacity:0; transform:scale(.9);
  pointer-events:none; filter:blur(.6px); }
.hop-constell.in{ animation:hopConstell 3s ease-in-out forwards; }
@keyframes hopConstell{
  0%{ opacity:0; transform:scale(.9); }
  20%{ opacity:.5; transform:scale(1.05); }
  40%{ opacity:.28; transform:scale(1.0); }
  60%{ opacity:.52; transform:scale(1.06); }
  80%{ opacity:.26; transform:scale(1.0); }
  100%{ opacity:0; transform:scale(1.08); } }
.hop-constell-cap{ position:absolute; z-index:1; opacity:0;
  font:600 11px/1.2 var(--sans,system-ui,sans-serif); letter-spacing:.04em;
  white-space:nowrap; pointer-events:none; text-shadow:0 1px 4px rgba(0,0,0,.55);
  filter:blur(.6px); }
.hop-constell-cap.in{ animation:hopConstellCap 3s ease-in-out forwards; }
@keyframes hopConstellCap{
  0%{ opacity:0; } 25%{ opacity:.55; } 50%{ opacity:.3; }
  75%{ opacity:.55; } 100%{ opacity:0; } }

/* ---------- HUD ---------- */
.hop-hud{ position:absolute; top:14px; left:0; right:0; z-index:6;
  display:flex; justify-content:center; gap:10px; pointer-events:none; }
.hop-stat{ display:flex; align-items:baseline; gap:9px;
  background:var(--g-glass); border:1px solid var(--g-line); border-radius:999px;
  padding:7px 16px; box-shadow:var(--g-shadow-sm); backdrop-filter:blur(6px); }
.hop-stat .k{ font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--g-muted); }
.hop-stat .v{ font-size:20px; font-weight:800; line-height:1; color:var(--g-heading);
  font-variant-numeric:tabular-nums; }
.hop-stat-best .v{ color:var(--g-muted); }
.hop-stat-lives .v{ color:var(--g-accent); font-size:16px; letter-spacing:.14em; }
.hop-snd{ pointer-events:auto; align-self:center; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--g-line); background:var(--g-glass); color:var(--g-heading);
  font-size:16px; line-height:1; cursor:pointer; box-shadow:var(--g-shadow-sm);
  backdrop-filter:blur(6px); }
.hop-snd:hover{ border-color:var(--g-accent); color:var(--g-accent); }
.hop-snd-off{ color:var(--g-muted); opacity:.6; }

/* ---------- goal banner (current hand rule) ---------- */
.hop-goal{ position:absolute; top:58px; left:0; right:0; z-index:6; text-align:center;
  pointer-events:none; font-size:13.5px; color:var(--g-fg); letter-spacing:.01em; }
.hop-goal b{ color:var(--g-accent); font-weight:800; }
.hop-goal .hop-goal-bar{ display:block; width:min(220px,52%); height:4px; margin:6px auto 0;
  border-radius:999px; background:var(--g-line); overflow:hidden; }
.hop-goal .hop-goal-bar i{ display:block; height:100%; width:0; background:var(--g-accent);
  border-radius:999px; transition:width .25s ease; }

/* ---------- hand tray (collected tiles) ---------- */
.hop-tray{ position:absolute; left:14px; bottom:14px; z-index:6; display:flex; gap:6px;
  align-items:center; pointer-events:none; }
.hop-tray-title{ font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--g-muted); margin-right:2px; }
.hop-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px;
  padding:0 6px; border-radius:7px; font-size:13px; font-weight:800; line-height:1;
  background:var(--g-glass); border:1px solid var(--g-line); box-shadow:var(--g-shadow-sm);
  backdrop-filter:blur(4px); }
.hop-chip.k-dot{ color:#3B6FB5; }
.hop-chip.k-bam{ color:#2E7D3F; }
.hop-chip.k-crack{ color:#B23B2E; }
.hop-chip.k-wind{ color:#2E7D5B; font-family:Georgia,serif; }
.hop-chip.k-drag-R{ color:#B23B2E; }
.hop-chip.k-drag-G{ color:#2E7D5B; }
.hop-chip.k-drag-W{ color:#3B6FB5; }
.hop-chip.k-flower{ color:#9B59A6; }

/* ---------- recalculate button ---------- */
.hop-redo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:25;
  display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px;
  border:1px solid var(--g-accent); background:var(--g-panel); color:var(--g-accent);
  font:800 15px/1 var(--sans,'Inter',system-ui,sans-serif); cursor:pointer; box-shadow:var(--g-shadow-lg);
  animation:hopRedoPulse 1s ease-in-out infinite; }
.hop-redo[hidden]{ display:none; }
.hop-redo::before{ content:"\21BA"; font-size:18px; }
@keyframes hopRedoPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.06); } }

/* ---------- Hu stamp + petals ---------- */
.hop-fx{ position:absolute; inset:0; z-index:18; pointer-events:none; overflow:hidden; }
.hop-hu{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%) scale(.4);
  font-size:46px; font-weight:900; letter-spacing:.04em; color:var(--g-accent);
  text-shadow:0 4px 24px rgba(0,0,0,.25); white-space:nowrap;
  opacity:0; animation:hopHu 1.05s ease forwards; }
@keyframes hopHu{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-12deg); }
  22%{ opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(4deg); }
  40%{ transform:translate(-50%,-50%) scale(1) rotate(0); }
  100%{ opacity:0; transform:translate(-50%,-58%) scale(1.05); } }
.hop-petal{ position:absolute; top:38%; width:10px; height:10px; border-radius:60% 0 60% 0;
  background:var(--g-accent); opacity:.85; animation:hopPetal 1.4s ease-in forwards; }
@keyframes hopPetal{ 0%{ transform:translateY(0) rotate(0); opacity:.9; }
  100%{ transform:translateY(260px) rotate(220deg); opacity:0; } }

/* ---------- scene ---------- */
.hop-scene{ position:absolute; inset:0; z-index:2; touch-action:none;
  cursor:pointer; -webkit-user-select:none; user-select:none; }
#hopSvg{ display:block; width:100%; height:100%; }
#hopSvg text{ font-family:var(--sans,'Inter',system-ui,-apple-system,sans-serif); }

/* ---------- feed line ---------- */
.hop-feed{ position:absolute; left:0; right:0; bottom:12px; z-index:6; margin:0;
  text-align:center; font-size:13px; color:var(--g-muted); pointer-events:none; }

/* ---------- start overlay ---------- */
.hop-start{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  background:linear-gradient(180deg, var(--g-card), var(--g-bg)); }
.hop-start-title{ margin:0 0 10px; font-size:44px; font-weight:800; letter-spacing:-.01em;
  color:var(--g-heading); }
.hop-start-sub{ margin:0 0 6px; font-size:17px; color:var(--g-fg); }
.hop-start-line{ margin:0 0 26px; font-size:14px; color:var(--g-muted); max-width:420px; }
.hop-enter{ font-size:17px; padding:13px 34px; border-radius:999px; }

/* ---------- run-over card ---------- */
.hop-over{ position:absolute; inset:0; z-index:20; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.14); }
.hop-over[hidden]{ display:none; }
.hop-over-card{ background:var(--g-panel); border:1px solid var(--g-line); border-radius:20px;
  box-shadow:var(--g-shadow-lg); padding:26px 30px 22px; width:min(340px, calc(100% - 48px));
  text-align:center; }
.hop-over-card h2{ margin:0 0 8px; font-size:24px; color:var(--g-heading); }
.hop-over-score{ margin:0 0 2px; font-size:15px; color:var(--g-fg); }
.hop-over-score b{ font-size:26px; color:var(--g-heading); }
.hop-over-best{ margin:0 0 16px; font-size:13px; color:var(--g-muted); }
.hop-over-tip{ margin:14px 0 0; font-size:12.5px; color:var(--g-muted); }
.hop-pass-title{ margin:2px 0 4px; font-size:20px; font-weight:800; color:var(--g-accent); }
.hop-scores{ list-style:none; margin:6px 0 4px; padding:0; text-align:left; }
.hop-score-row{ display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; margin:6px 0; border-radius:12px;
  background:var(--g-chip); color:var(--g-fg); font-size:15px; }
.hop-score-row.is-win{ background:color-mix(in srgb, var(--g-accent) 18%, var(--g-panel));
  color:var(--g-heading); font-weight:800; }
.hop-score-val{ font-variant-numeric:tabular-nums; font-weight:800; }
.hop-score-winner{ margin:8px 0 14px; font-size:14px; color:var(--g-heading); font-weight:700; }

/* ---------- help ---------- */
.hop-help{ position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; }
.hop-help[hidden]{ display:none; }
.hop-help-scrim{ position:absolute; inset:0; background:rgba(10,20,15,.45); }
.hop-help-card{ position:relative; background:var(--g-panel); border:1px solid var(--g-line);
  border-radius:18px; box-shadow:var(--g-shadow-lg); width:min(560px, calc(100% - 40px));
  max-height:min(78vh, 640px); overflow:auto; padding:24px 26px 20px; }
.hop-help-card h2{ margin:0 0 10px; font-size:22px; color:var(--g-heading); }
.hop-help-card h3{ margin:16px 0 4px; font-size:14.5px; color:var(--g-strong); }
.hop-help-card p{ margin:4px 0; font-size:13.5px; line-height:1.6; color:var(--g-fg); }
.hop-help-lead{ font-size:14.5px !important; }
.hop-help-note{ margin-top:12px !important; font-size:12.5px !important; color:var(--g-muted); }
.hop-help-x{ position:absolute; top:10px; right:10px; width:34px; height:34px;
  border-radius:999px; border:1px solid var(--g-line); background:var(--g-card);
  color:var(--g-fg); font-size:18px; line-height:1; cursor:pointer; }
.hop-help-x:hover{ border-color:var(--g-accent); color:var(--g-accent); }

@media (max-width:560px){
  .hop-start-title{ font-size:34px; }
  .hop-stat{ padding:6px 13px; }
  .hop-stat .v{ font-size:17px; }
}