/* ============================================================
   小游戏页通用主题层
   依赖 assets/main.css 的 CSS 变量（同源主题）
   ============================================================ */


/* ---------- 背景 ---------- */
#gameHost .bg-layer{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  transition:background .9s var(--ease);
  background:
    radial-gradient(1200px 760px at 12% -12%, var(--glow-1), transparent 62%),
    radial-gradient(1000px 820px at 92% 4%, var(--glow-2), transparent 64%),
    radial-gradient(1100px 900px at 48% 112%, var(--glow-3), transparent 62%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
}
#gameHost .bg-grain{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:var(--grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}
#gameHost .bg-vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  transition:background .9s var(--ease);
  background:radial-gradient(circle at 50% 45%, transparent 42%, var(--vig) 100%);
}
#gameHost .bg-stars{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5; }

/* ---------- 顶部返回栏 ---------- */
#gameHost .topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px clamp(16px,4vw,30px);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  background:linear-gradient(180deg, var(--nav-bg), var(--nav-bg2));
  border-bottom:1px solid var(--line);
}
#gameHost .topbar a.back{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--c2-lt); text-decoration:none;
  padding:9px 18px; border-radius:999px;
  border:1px solid var(--line-a);
  background:var(--surf);
  transition:.4s var(--ease);
  font-family:var(--serif); font-style:italic; font-size:.86rem;
  letter-spacing:.06em;
}
#gameHost .topbar a.back:hover{ background:var(--surf-2); border-color:var(--line-a2); transform:translateX(-3px); }
#gameHost .topbar .tb-title{
  font-family:var(--serif);
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

/* ---------- 舞台 ---------- */
#gameHost .stage{ max-width:880px; margin:0 auto; padding:52px clamp(16px,4vw,30px) 90px; }

#gameHost .eyebrow{
  font-family:var(--serif); font-style:italic;
  font-size:.76rem; letter-spacing:.44em; text-transform:uppercase;
  color:var(--c2); text-align:center; opacity:.92;
  transition:color .6s;
}
#gameHost h1.title{
  font-size:clamp(2rem,6vw,3.1rem);
  font-weight:700; letter-spacing:.02em; text-align:center;
  margin:14px 0 10px; line-height:1.3;
  background:var(--title-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:var(--h1-shadow);
}
#gameHost .rule{
  width:64px; height:1px; margin:20px auto 0;
  background:linear-gradient(90deg,transparent,var(--c2),transparent);
}
#gameHost .sub{
  text-align:center; color:var(--muted); font-size:.92rem;
  line-height:2; max-width:520px; margin:20px auto 0; letter-spacing:.03em;
}

/* ---------- 卡片 ---------- */
#gameHost .card{
  position:relative; margin-top:34px; padding:clamp(22px,4vw,30px);
  border-radius:24px;
  background:linear-gradient(160deg, var(--card-1), var(--card-2));
  border:1px solid var(--card-bd);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  overflow:hidden;
  transition:background .7s var(--ease), border-color .7s var(--ease);
}
#gameHost .card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(130deg, var(--sheen-1), transparent 32%, transparent 68%, var(--sheen-2));
  opacity:.5;
}
#gameHost .card > *{ position:relative; z-index:1; }

/* ---------- 按钮 ---------- */
#gameHost .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 34px; border:none; border-radius:999px;
  font-family:var(--zh); font-size:.92rem; font-weight:700; letter-spacing:.1em;
  cursor:pointer; transition:.45s var(--ease); position:relative;
  text-decoration:none;
}
#gameHost .btn-primary{
  color:var(--btn-ink);
  background:var(--btn-grad);
  box-shadow:0 18px 40px -18px var(--btn-glow), inset 0 1px 0 rgba(255,255,255,.55);
}
#gameHost .btn-primary:hover{ transform:translateY(-3px) scale(1.015); box-shadow:0 26px 55px -18px var(--btn-glow); }
#gameHost .btn-ghost{
  color:var(--text); background:var(--surf);
  box-shadow:inset 0 0 0 1px var(--line-a);
  backdrop-filter:blur(12px);
}
#gameHost .btn-ghost:hover{ background:var(--surf-2); box-shadow:inset 0 0 0 1px var(--line-a2); transform:translateY(-3px); }
#gameHost .btn:active{ transform:scale(.97); }

/* ---------- 数值 ---------- */
#gameHost .num{ font-family:var(--serif); font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* ---------- 结果 ---------- */
#gameHost .result{
  margin-top:22px; min-height:52px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:1rem; line-height:1.8; color:var(--c2-lt);
  letter-spacing:.02em;
}

/* ---------- 进度条 ---------- */
#gameHost .bar-track{ height:6px; border-radius:99px; background:var(--track); overflow:hidden; margin-top:16px; }
#gameHost .bar-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--c1-deep),var(--c1),var(--c2-lt));
  transition:width .5s var(--ease);
  box-shadow:0 0 18px rgba(var(--c1-rgb),.6);
}

/* ---------- HUD ---------- */
#gameHost .hud{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
#gameHost .hud .chip{
  padding:10px 20px; border-radius:999px;
  background:var(--surf); border:1px solid var(--line-a);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-family:var(--serif);
}
#gameHost .hud .chip b{
  color:var(--c2-lt); font-size:1rem; letter-spacing:.02em;
  margin-left:7px; font-family:var(--serif);
}

/* ---------- 页脚 ---------- */
#gameHost .foot{ text-align:center; padding:48px 20px 10px; color:var(--muted-2); font-size:.74rem; letter-spacing:.2em; }

/* ---------- 入场动画 ---------- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }
#gameHost .rise{ animation:riseIn .95s var(--ease) both; }
#gameHost .d1{ animation-delay:.08s } .d2{ animation-delay:.16s } .d3{ animation-delay:.26s } .d4{ animation-delay:.36s }

/* ---------- 主题切换器（小页同款） ---------- */
#gameHost #themeSwitcher{ position:relative; flex:0 0 auto; }
#gameHost .ts-toggle{
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-a); background:var(--surf);
  display:flex; align-items:center; justify-content:center;
  transition:.4s var(--ease); padding:0;
}
#gameHost .ts-toggle:hover{ background:var(--surf-2); border-color:var(--line-a2); transform:rotate(20deg); }
.ts-toggle .ts-dot,
#gameHost .ts-opt .ts-dot{
  width:14px; height:14px; border-radius:50%; display:block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 10px rgba(var(--c2-rgb),.5);
}
#gameHost .ts-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:150;
  min-width:184px; padding:8px; border-radius:18px;
  background:var(--panel-bg);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid var(--line-a);
  box-shadow:0 28px 60px -24px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none;
  transition:.38s var(--ease); transform-origin:top right;
}
#gameHost #themeSwitcher.open .ts-panel{ opacity:1; transform:none; pointer-events:auto; }
#gameHost .ts-panel .ts-title{
  font-family:var(--serif); font-style:italic; font-size:.6rem;
  letter-spacing:.38em; text-transform:uppercase;
  color:var(--muted-2); padding:8px 10px 10px;
}
#gameHost .ts-opt{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  background:none; border:none; color:var(--text);
  font-family:var(--zh); font-size:.8rem; letter-spacing:.05em;
  transition:.3s var(--ease); text-align:left;
}
#gameHost .ts-opt:hover{ background:var(--surf-2); }
#gameHost .ts-opt.on{ background:rgba(var(--c2-rgb),.14); box-shadow:inset 0 0 0 1px var(--line-a2); }
#gameHost .ts-opt .ts-name{ flex:1; }
#gameHost .ts-opt .ts-en{
  font-family:var(--serif); font-style:italic; font-size:.64rem;
  letter-spacing:.16em; color:var(--muted-2);
}

@media(max-width:560px){
#gameHost .stage{ padding:38px 14px 70px; }
#gameHost .card{ padding:20px 14px; border-radius:20px; }
#gameHost .btn{ padding:14px 26px; font-size:.88rem; }
#gameHost .topbar .tb-title{ display:none; }
}