/* ============================================================
   六个小游戏的内联样式（已作用域化到各自容器）
   ============================================================ */

/* ---------- heart-catch ---------- */
#gv-heart-catch #board{
  position:relative; width:100%; aspect-ratio:4/5; max-height:58vh;
  border-radius:22px; overflow:hidden;
  background:radial-gradient(circle at 50% 0%, rgba(var(--c1-rgb),.14), var(--ph-bg) 70%);
  border:1px solid var(--line);
  cursor:crosshair; touch-action:none;
  box-shadow:inset 0 0 80px rgba(0,0,0,.35);
}
#gv-heart-catch .basket{
  position:absolute; bottom:14px; width:74px; height:16px;
  transform:translateX(-50%);
  border-radius:99px;
  background:linear-gradient(90deg, rgba(var(--c2-rgb),.2), rgba(var(--c2-rgb),.85), rgba(var(--c2-rgb),.2));
  box-shadow:0 0 22px rgba(var(--c2-rgb),.55);
}
#gv-heart-catch .basket::after{
  content:""; position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50% 50% 0 0;
  border:1px solid var(--line-a2); border-bottom:none;
  opacity:.5;
}
#gv-heart-catch .fall{
  position:absolute; font-size:1.5rem; transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 10px rgba(var(--c1-rgb),.85));
  will-change:transform;
}
#gv-heart-catch .fall.bomb{ filter:drop-shadow(0 0 10px rgba(var(--c2-rgb),.9)); }
#gv-heart-catch .pop{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:.85rem;
  color:var(--c2-lt); pointer-events:none; white-space:nowrap;
  animation:popUp .8s ease-out forwards;
}
@keyframes popUp{ to{ opacity:0; transform:translate(-50%,-160%); } }
#gv-heart-catch .overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:var(--panel-bg); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:center; padding:26px; z-index:5;
}
#gv-heart-catch .overlay.hide{ display:none; }
#gv-heart-catch .overlay h2{
  font-family:var(--serif); font-size:1.6rem;
  color:var(--c2-lt); letter-spacing:.06em;
}
#gv-heart-catch .overlay p{ font-size:.86rem; color:var(--muted); line-height:1.9; letter-spacing:.05em; }
#gv-heart-catch .lv{
  font-family:var(--serif); font-style:italic;
  font-size:.78rem; letter-spacing:.24em; color:var(--c2);
}

/* ---------- memory ---------- */
#gv-memory .board{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.8vw,14px); margin-top:8px;
}
#gv-memory .tile{
  position:relative; aspect-ratio:1; border-radius:16px; cursor:pointer;
  perspective:900px; -webkit-tap-highlight-color:transparent;
}
#gv-memory .tile .inner{
  position:absolute; inset:0; border-radius:16px;
  transition:transform .62s cubic-bezier(.19,1,.22,1);
  transform-style:preserve-3d;
}
#gv-memory .tile.flip .inner, #gv-memory .tile.matched .inner{ transform:rotateY(180deg); }
#gv-memory .face{
  position:absolute; inset:0; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
#gv-memory .face.front{
  background:linear-gradient(150deg, rgba(var(--c2-rgb),.14), var(--surf));
  border:1px solid var(--line-a);
}
#gv-memory .face.front::after{ content:"❦"; font-size:1.1rem; color:var(--line-a2); }
#gv-memory .face.back{
  transform:rotateY(180deg);
  background:linear-gradient(150deg, rgba(var(--c1-rgb),.20), var(--surf-2));
  border:1px solid var(--line-a);
  font-size:clamp(1.4rem,5vw,1.9rem);
  color:var(--text);
}
#gv-memory .tile.matched .face.back{
  background:linear-gradient(150deg, rgba(var(--c2-rgb),.26), var(--surf-2));
  border-color:var(--line-a2);
  box-shadow:0 0 26px rgba(var(--c2-rgb),.35);
}
#gv-memory .tile.matched{ cursor:default; }
#gv-memory .tile:not(.matched):active{ transform:scale(.96); }

#gv-memory .win-panel{ margin-top:24px; text-align:center; animation:riseIn .8s var(--ease) both; }
#gv-memory .win-panel .wp-rank{
  font-family:var(--serif); font-style:italic;
  color:var(--c2-lt); font-size:1.1rem; letter-spacing:.06em; line-height:1.7;
}

/* ---------- quiz ---------- */
#gv-quiz .qwrap{ padding:clamp(24px,4vw,40px); }
#gv-quiz .qmeta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--serif); font-style:italic;
  font-size:.76rem; letter-spacing:.22em; color:var(--c2); margin-bottom:22px;
}
#gv-quiz .qtext{
  font-size:clamp(1.05rem,2.8vw,1.3rem); line-height:1.85; letter-spacing:.04em;
  color:var(--text); margin-bottom:26px; min-height:3.4em;
}
#gv-quiz .opts{ display:flex; flex-direction:column; gap:10px; }
#gv-quiz .opt{
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-radius:16px; cursor:pointer;
  background:var(--surf); border:1px solid var(--line);
  transition:.42s var(--ease); font-size:.94rem; letter-spacing:.03em;
  color:var(--text);
}
#gv-quiz .opt .mark{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--line-a2); display:flex; align-items:center;
  justify-content:center; font-size:.66rem; color:var(--c2);
  font-family:var(--serif); transition:.35s;
}
#gv-quiz .opt:hover{ background:var(--surf-2); border-color:var(--line-a2); transform:translateX(3px); }
#gv-quiz .opt.right{
  background:rgba(var(--c2-rgb),.16); border-color:var(--line-a2);
  color:var(--text); box-shadow:0 0 26px -8px rgba(var(--c2-rgb),.7);
}
#gv-quiz .opt.right .mark{ background:var(--c2-lt); color:var(--btn-ink); border-color:transparent; }
#gv-quiz .opt.wrong{
  background:rgba(var(--c1-rgb),.16); border-color:var(--line-a);
  color:var(--muted);
}
#gv-quiz .opt:disabled{ cursor:default; transform:none; }

#gv-quiz .feedback{
  margin-top:22px; font-size:.88rem; line-height:1.9; letter-spacing:.04em;
  color:var(--c2-lt); min-height:1.9em;
}
#gv-quiz .progress-dots{ display:flex; gap:6px; justify-content:center; margin-top:26px; }
#gv-quiz .progress-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--track);
  transition:.4s;
}
#gv-quiz .progress-dots i.on{ background:var(--c2); box-shadow:0 0 10px rgba(var(--c2-rgb),.9); }
#gv-quiz .progress-dots i.miss{ background:var(--c1); }

#gv-quiz .final{ text-align:center; padding:clamp(28px,5vw,50px) 10px; }
#gv-quiz .final .score{
  font-family:var(--serif); font-size:clamp(3rem,12vw,4.6rem);
  line-height:1; letter-spacing:.02em;
  background:var(--title-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
#gv-quiz .final .of{ font-family:var(--serif); font-style:italic; color:var(--muted); font-size:.9rem; letter-spacing:.2em; }
#gv-quiz .final .rank{ margin-top:22px; font-size:1.02rem; line-height:2; color:var(--c2-lt); letter-spacing:.04em; }

/* ---------- wheel ---------- */
#gv-wheel .wheel-wrap{
  position:relative; width:min(340px,82vw); aspect-ratio:1;
  margin:6px auto 0;
}
#gv-wheel .pointer{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:0; height:0; z-index:4;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:16px solid var(--c2-lt);
  filter:drop-shadow(0 0 10px rgba(var(--c2-rgb),.9));
}
#gv-wheel #wheel{
  width:100%; height:100%; display:block;
  border-radius:50%;
  transition:transform 5.6s cubic-bezier(.15,.9,.12,1);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
#gv-wheel .hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:19%; aspect-ratio:1; border-radius:50%; z-index:3;
  background:var(--btn-grad);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; color:var(--btn-ink);
  box-shadow:0 0 30px var(--btn-glow), inset 0 1px 2px rgba(255,255,255,.55);
}
#gv-wheel .result-box{
  margin-top:30px; text-align:center;
  min-height:96px;
}
#gv-wheel .result-box .r-lab{
  font-family:var(--serif); font-style:italic;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--c2); opacity:.8;
}
#gv-wheel .result-box .r-val{
  margin-top:12px; font-size:clamp(1.2rem,4.4vw,1.6rem);
  color:var(--text); letter-spacing:.05em; line-height:1.6;
  animation:riseIn .6s var(--ease) both;
}
#gv-wheel .result-box .r-sub{
  margin-top:10px; font-size:.82rem; color:var(--muted); letter-spacing:.06em;
}
#gv-wheel .btn-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* ---------- love-letter ---------- */
#gv-love-letter .env-stage{
  position:relative; width:min(420px,92%); aspect-ratio:1.55;
  margin:0 auto; cursor:pointer; perspective:1200px;
}
#gv-love-letter .envelope{
  position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(160deg, var(--card-2), var(--ph-bg));
  border:1px solid var(--line-a);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55), inset 0 0 40px rgba(var(--c2-rgb),.06);
  transition:1.05s var(--ease);
  overflow:hidden;
}
#gv-love-letter .envelope::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 49.6%, var(--line-a) 50%, transparent 50.4%),
    linear-gradient(-135deg, transparent 49.6%, var(--line-a) 50%, transparent 50.4%);
}
#gv-love-letter .flap{
  position:absolute; top:0; left:0; right:0; height:56%;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(180deg, var(--card-1), var(--card-2));
  border-bottom:1px solid var(--line-a);
  transform-origin:top center;
  transition:1.05s var(--ease);
  z-index:3;
}
#gv-love-letter .seal{
  position:absolute; top:46%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; z-index:4;
  background:radial-gradient(circle at 36% 30%, var(--c1), var(--c1-deep) 62%, var(--c2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.2rem; color:#fff8fb;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.28);
  transition:.7s var(--ease);
  letter-spacing:.02em;
}
#gv-love-letter .seal::after{
  content:""; position:absolute; inset:5px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.35);
}
#gv-love-letter .env-stage.opened .flap{ transform:rotateX(-178deg); }
#gv-love-letter .env-stage.opened .seal{ transform:translate(-50%,-50%) scale(.4) rotate(40deg); opacity:0; }
#gv-love-letter .env-stage.opened .envelope{ box-shadow:0 60px 120px -40px rgba(var(--c2-rgb),.28); }

#gv-love-letter .hint{
  text-align:center; margin-top:22px;
  font-family:var(--serif); font-style:italic;
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--c2); opacity:.75;
  animation:pulseSoft 2.6s ease-in-out infinite;
}
@keyframes pulseSoft{ 0%,100%{ opacity:.4 } 50%{ opacity:.95 } }

/* 信纸 */
#gv-love-letter .paper{
  display:none; margin-top:34px;
  padding:clamp(30px,5vw,52px) clamp(22px,4.5vw,44px);
  border-radius:20px;
  background:linear-gradient(180deg, var(--card-1), var(--card-2));
  border:1px solid var(--line-a);
  box-shadow:0 50px 90px -46px rgba(0,0,0,.55);
  animation:paperIn 1s var(--ease) both;
}
#gv-love-letter .paper.show{ display:block; }
@keyframes paperIn{
#gv-love-letter from{ opacity:0; transform:translateY(-26px) scale(.985); }
#gv-love-letter to{ opacity:1; transform:none; }
}
#gv-love-letter .paper p{
  font-size:clamp(.98rem,2.4vw,1.1rem); line-height:2.5;
  letter-spacing:.055em; color:var(--text);
  opacity:0; transform:translateY(10px);
  transition:.85s var(--ease);
}
#gv-love-letter .paper p.in{ opacity:1; transform:none; }
#gv-love-letter .paper p.blank{ height:.6em; line-height:1; }
#gv-love-letter .paper .ps{
  margin-top:30px; padding-top:22px;
  border-top:1px solid var(--line-a);
  font-family:var(--serif); font-style:italic;
  font-size:.92rem; letter-spacing:.14em; color:var(--c2);
  text-align:right;
  opacity:0; transform:translateY(10px); transition:.85s var(--ease);
}
#gv-love-letter .paper .ps.in{ opacity:1; transform:none; }

/* ---------- reaction ---------- */
#gv-reaction #pad{
  position:relative; width:100%; aspect-ratio:1/1; max-height:56vh;
  border-radius:22px; overflow:hidden; cursor:pointer;
  background:radial-gradient(circle at 50% 45%, rgba(var(--c1-rgb),.10), var(--ph-bg) 72%);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:background .5s;
  user-select:none; touch-action:manipulation;
}
#gv-reaction #pad.armed{
  background:radial-gradient(circle at 50% 45%, rgba(var(--c1-rgb),.30), var(--ph-bg) 74%);
  border-color:var(--line-a2);
  box-shadow:inset 0 0 90px rgba(var(--c1-rgb),.35);
}
#gv-reaction #pad.toosoon{
  background:radial-gradient(circle at 50% 45%, rgba(var(--c1-deep-rgb,120,60,90),.30), var(--ph-bg) 72%);
}
#gv-reaction #pad .msg{
  text-align:center; padding:24px; pointer-events:none;
}
#gv-reaction #pad .msg .big{
  font-size:clamp(2rem,9vw,3.4rem); line-height:1.1;
  font-family:var(--serif); font-weight:600;
  background:var(--title-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
#gv-reaction #pad .msg .small{
  margin-top:14px; font-size:.86rem; letter-spacing:.1em;
  color:var(--muted); line-height:1.9;
}
#gv-reaction .hud-mini{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:20px;
}
#gv-reaction .hud-mini .m{
  padding:9px 18px; border-radius:999px;
  background:var(--surf); border:1px solid var(--line-a);
  font-family:var(--serif); font-size:.78rem;
  letter-spacing:.1em; color:var(--muted);
}
#gv-reaction .hud-mini .m b{ color:var(--c2-lt); margin-left:6px; }