:root{
    --bg:#FFF3DF; --panel:#FFFFFF; --ink:#2F2930; --muted:#948A92;
    --coral:#FF5964; --teal:#12B5A5; --sunny:#FFC914; --orange:#FF8E3C; --purple:#9B5DE5;
    --green:#3EBB63; --red:#EF2D3C; --gold:#F5A623;
    --line:#EADFC6; --hairline:rgba(47,41,48,.10);
    --nav-h:52px;
    --play-w:min(2200px,94vw);   /* 比赛页统一宽度：导航/排行榜/HUD/舞台左右对齐，两侧各留 3vw */
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth}
  body{
    font-family:"Yuanti SC","YouYuan","幼圆","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    background-color:var(--bg);
    background-image:radial-gradient(rgba(47,41,48,.06) 1.5px, transparent 1.8px);
    background-size:22px 22px;
    color:var(--ink); min-height:100vh;
    display:flex; flex-direction:column; align-items:center;
    padding-top:var(--nav-h);
    font-synthesis:none; -webkit-font-smoothing:antialiased;
  }
  /* 比赛视图：HUD+舞台作为整体，在导航栏下的剩余空间内垂直居中。
     挂 #stage.show（而非 body.playing）：元素 .show 永不移除，弹窗虚化背景里的
     比赛画面才能获得与真实游戏中完全一致的布局（居中 / 舞台宽度收缩 / 隐藏 footer）。
     宽度公式中的 160px 是为导航(52)+HUD(≈84)预留的垂直空间，保证任意矮屏不超高 */
  body:has(#stage.show){
    justify-content:center;
    overflow:hidden;
  }
  body:has(#stage.show) #stage{width:min(var(--play-w),calc((100vh - 160px) * 3))}
  ::selection{background:rgba(255,89,100,.25)}

  /* ---------- 顶部导航 ---------- */
  #topbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:40;
    background:rgba(255,243,223,.92);
    -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
    border-bottom:3px solid var(--ink)}
  .nav-inner{max-width:var(--play-w);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
  .logo{font-size:18px;font-weight:700;letter-spacing:.02em}
  .logo .dot{color:var(--coral)}

  /* ---------- HUD ---------- */
  #hud{
    display:none; width:var(--play-w); margin:0 auto 18px;
    position:relative; z-index:30;
    background:#fff;
    border:3px solid var(--ink); border-radius:20px;
    box-shadow:0 5px 0 var(--ink);
    padding:17px 22px; align-items:center; gap:22px; flex-wrap:wrap;
  }
  #hud.show{display:flex}
  .hud-item{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700}
  .hud-item small{font-weight:400;color:var(--muted);font-size:14px}
  #timer{font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;min-width:70px;color:var(--orange)}
  #timer.low{color:var(--red);animation:pulse 1s infinite}
  @keyframes pulse{50%{opacity:.4}}
  #roundName{font-size:17px;font-weight:700}
  #score{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--coral)}
  .progress{flex:1;min-width:140px;height:12px;background:#FFF0CE;border:2px solid var(--ink);border-radius:99px;overflow:hidden}
  .progress>i{display:block;height:100%;width:0;
    background:repeating-linear-gradient(45deg,var(--green) 0 10px,#79dd90 10px 20px);
    transition:width .35s cubic-bezier(.32,.72,0,1)}
  #foundText{font-size:16px;font-weight:700;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums}

  /* ---------- 舞台 ---------- */
  #stage{display:none;width:var(--play-w);margin:0 auto;gap:14px}
  #stage.show{display:flex}
  .img-wrap{flex:1;position:relative;background:#fff;border:3px solid var(--ink);border-radius:20px;overflow:hidden;
    box-shadow:0 6px 0 var(--ink)}
  .img-wrap img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;cursor:crosshair}
  .tag{position:absolute;top:12px;left:12px;background:var(--sunny);
    color:var(--ink);font-size:13px;font-weight:700;padding:4px 14px;border-radius:99px;pointer-events:none;border:2px solid var(--ink)}
  .marker{position:absolute;border:4px solid var(--green);border-radius:50%;pointer-events:none;background:rgba(62,187,99,.12);
    transform:translate(-50%,-50%) scale(0);animation:pop .45s cubic-bezier(.34,1.56,.64,1) forwards;box-shadow:0 0 0 4px rgba(62,187,99,.25)}
  @keyframes pop{to{transform:translate(-50%,-50%) scale(1)}}
  .marker.missed{border-color:var(--gold);background:rgba(245,166,35,.12);box-shadow:0 0 0 4px rgba(245,166,35,.25)}
  .wrong{position:absolute;width:36px;height:36px;pointer-events:none;transform:translate(-50%,-50%);
    color:var(--red);font-size:30px;font-weight:900;line-height:36px;text-align:center;
    text-shadow:0 2px 0 #fff;animation:wrongfade .8s forwards}
  @keyframes wrongfade{0%{transform:translate(-50%,-50%) scale(.4) rotate(-12deg);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.3) rotate(8deg);opacity:0}}
  .shake{animation:shake .35s}
  @keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

  /* ---------- 浮层与卡片 ---------- */
  .overlay{position:fixed;inset:0;background:rgba(47,41,48,.45);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;z-index:50;padding:24px;animation:fadeIn .25s ease;
    overflow-y:auto}   /* 内容超高时可滚动（排行榜在 hero 下方） */
  .overlay.show{display:flex}
  @keyframes fadeIn{from{opacity:0}}
  .card{background:var(--panel);border:3px solid var(--ink);border-radius:26px;max-width:560px;width:100%;padding:44px 40px;margin:auto;
    box-shadow:8px 8px 0 rgba(47,41,48,.16);text-align:center;max-height:92vh;overflow:auto;
    animation:cardIn .38s cubic-bezier(.34,1.56,.64,1);
    scrollbar-width:thin;scrollbar-color:rgba(47,41,48,.35) transparent}
  .card::-webkit-scrollbar{width:8px}
  .card::-webkit-scrollbar-track{background:transparent}
  .card::-webkit-scrollbar-thumb{background:rgba(47,41,48,.3);border-radius:8px}
  .card::-webkit-scrollbar-thumb:hover{background:rgba(47,41,48,.5)}
  @keyframes cardIn{from{opacity:0;transform:scale(1.06) translateY(14px)}}
  .card h2{font-size:28px;font-weight:700;letter-spacing:.01em;margin-bottom:16px}
  .card .sub2{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px}

  /* ---------- 结算数据 ---------- */
  #ovEnd .card{padding:52px 48px}   /* 结算弹窗整体放大一档 */
  #ovEnd .card h2{font-size:32px}
  .stat-row{display:flex;justify-content:center;gap:12px;margin:22px 0 4px;flex-wrap:wrap}
  .stat-row div{flex:1;min-width:110px;padding:14px 10px;border-radius:14px;background:#FFF9EA;border:2px solid var(--ink);font-size:13px;color:var(--muted)}
  .stat-row b{display:block;font-size:28px;font-weight:700;color:var(--coral);font-variant-numeric:tabular-nums;margin-bottom:2px}

  /* ---------- 按钮（贴纸 3D） ---------- */
  .btn{display:inline-block;margin-top:18px;padding:13px 34px;border:3px solid var(--ink);border-radius:999px;cursor:pointer;
    font-size:17px;font-weight:700;font-family:inherit;letter-spacing:.02em;color:#fff;background:var(--coral);
    box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
  .btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
  .btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
  .btn.ghost{background:#fff;color:var(--ink)}
  .btn.ghost:hover{background:#FFF9EA}

  /* ---------- 首页 Hero ---------- */
  #ovStart{background-color:var(--bg);
    background-image:radial-gradient(rgba(47,41,48,.06) 1.5px, transparent 1.8px);
    background-size:22px 22px;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:0;
    align-items:center}   /* 左右布局后整块变矮，改为垂直居中；超高时仍可滚动 */
  /* ---------- 首页 Hero：左右分栏（图在右、文字在左） ----------
     横向铺满整屏；因为不再纵向堆叠，整块高度大降，fitHero() 基本不再触发缩放，
     字体得以按设计值完整呈现（此前被 zoom≈0.81 缩小，是"字体显小"的真正原因）。
     所有尺寸走 vw 驱动 + 高上限，保证 16:9 大屏（1920/2560…）也能铺满。 */
  #ovStart .card.hero{background:transparent;border:none;box-shadow:none;
    border-radius:0;animation:none;margin:auto;max-height:none;overflow:visible;position:relative;
    --hero-max:min(2400px,92vw);          /* 横向占屏约 92%，大屏不被小上限卡死 */
    --hero-cols:minmax(0,1fr) minmax(0,1fr);
    --hero-title:clamp(54px,6.1vw,126px);
    --hero-sub:clamp(19px,1.8vw,31px);
    --hero-gap:clamp(36px,3.4vw,74px);
    --hero-mascot:clamp(88px,8vw,154px);
    --hero-btn:clamp(18px,1.45vw,26px);
    max-width:var(--hero-max);
    display:grid;grid-template-columns:var(--hero-cols);
    align-items:center;justify-items:center;
    column-gap:var(--hero-gap);
    padding:60px 48px}
  .mascot{width:150px;height:auto;border-radius:26px;border:3px solid var(--ink);
    box-shadow:0 6px 0 var(--ink);margin-bottom:14px;
    animation:bob 3s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(-10px) rotate(-2deg)}}
  .title{font-size:clamp(38px,6.2vw,66px);font-weight:700;line-height:1.15;margin-bottom:16px;letter-spacing:.02em}
  .title span{display:inline-block;animation:wiggle 2.4s ease-in-out infinite;text-shadow:2.5px 2.5px 0 rgba(47,41,48,.10)}
  .title span:nth-child(1){color:var(--coral)}
  .title span:nth-child(2){color:var(--orange);animation-delay:.15s}
  .title span:nth-child(3){color:var(--teal);animation-delay:.3s}
  .title span:nth-child(4){color:var(--purple);animation-delay:.45s}
  .title span:nth-child(5){color:var(--coral);animation-delay:.6s}
  .title span:nth-child(6){color:var(--orange);animation-delay:.75s}
  .title span:nth-child(7){color:var(--teal);animation-delay:.9s}
  @keyframes wiggle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(2deg)}}
  .hero .sub{font-size:clamp(16px,2.1vw,20px);color:var(--ink);opacity:.75;line-height:1.7;margin-bottom:30px;font-weight:600}
  .cta{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
  .cta .btn{margin-top:0}
  .hero-img{display:block;width:min(760px,100%);margin:0 auto;border-radius:24px;border:3px solid var(--ink);
    box-shadow:8px 8px 0 rgba(47,41,48,.16);opacity:0;transition:opacity .8s ease}
  .hero-img.ready{opacity:1}
  .hero-cap{text-align:center;color:var(--muted);font-size:13px;font-weight:600;margin-top:14px}

  /* 左右分栏元素归位（纯 CSS，HTML 结构无需改动）：
     左列自上而下 = 吉祥物 / 标题 / 两段副标题 / 按钮；右列 = 大图（跨 1–5 行）+ 图注
     （.doodles 的定位见下方 emoji 规则） */
  .hero .mascot{grid-column:1;grid-row:1;width:var(--hero-mascot);margin-bottom:7px}
  .hero .title{grid-column:1;grid-row:2;font-size:var(--hero-title);margin-bottom:10px}
  .hero .sub:nth-of-type(1){grid-column:1;grid-row:3;font-size:var(--hero-sub);margin-bottom:6px}
  .hero .sub:nth-of-type(2){grid-column:1;grid-row:4;font-size:var(--hero-sub);margin-bottom:24px}
  .hero .cta{grid-column:1;grid-row:5;margin-bottom:0}
  .hero .cta .btn{font-size:var(--hero-btn);padding:18px 34px}
  .hero .hero-img{grid-column:2;grid-row:1 / 6;width:100%;align-self:center;margin:0}
  .hero .hero-cap{grid-column:2;grid-row:6;margin-top:12px}

  /* 中等屏（760–1100px）：仍保持左右分栏，但收字号 + 让文字列占更多，
     否则 7 字标题在窄列里会折行 */
  @media (min-width:760px) and (max-width:1100px){
    #ovStart .card.hero{--hero-cols:minmax(0,1fr) minmax(0,.85fr);
      --hero-title:clamp(40px,5.4vw,64px);--hero-sub:clamp(17px,1.9vw,21px);
      --hero-mascot:clamp(76px,7vw,104px);--hero-gap:clamp(28px,3vw,40px);
      --hero-btn:18px;padding:32px 30px}
    /* 中等屏左列较窄，按钮内边距收窄，避免三个按钮挤成 3 行 */
    .hero .cta .btn{padding:15px 24px}
  }

  /* 窄屏回落：改回单列（图在文字下方），并限制卡片宽度、收紧字号 */
  @media (max-width:760px){
    #ovStart .card.hero{grid-template-columns:1fr;row-gap:12px;padding:28px 20px 36px;
      --hero-max:min(640px,92vw);
      --hero-title:clamp(38px,7vw,60px);--hero-sub:clamp(16px,2.4vw,20px);
      --hero-mascot:110px;--hero-btn:18px}
    .hero .mascot{grid-column:1;grid-row:1}
    .hero .title{grid-column:1;grid-row:2}
    .hero .sub:nth-of-type(1){grid-column:1;grid-row:3}
    .hero .sub:nth-of-type(2){grid-column:1;grid-row:4}
    .hero .cta{grid-column:1;grid-row:5}
    .hero .hero-img{grid-column:1;grid-row:6}
    .hero .hero-cap{grid-column:1;grid-row:7}
  }

  /* 矮屏（≤700px 高）：收字号并让文字列更宽，避免标题折行或依赖 fitHero 缩放 */
  @media (min-width: 760px) and (max-height: 700px){
    #ovStart .card.hero{--hero-cols:minmax(0,1fr) minmax(0,.85fr);
      --hero-title:clamp(44px,5.2vw,66px);--hero-sub:clamp(17px,1.9vw,22px);
      --hero-mascot:clamp(72px,6.6vw,96px);--hero-gap:clamp(26px,2.8vw,36px);
      --hero-btn:18px;padding:18px 34px}
  }
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:820px;margin:48px auto 0;text-align:center}
  .features div{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:18px 14px;box-shadow:0 5px 0 var(--ink);
    transition:transform .15s ease, box-shadow .15s ease}
  .features div:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
  .features b{display:block;font-size:16px;font-weight:700;margin-bottom:6px}
  .features span{font-size:13px;color:var(--muted);line-height:1.6}
  .fineprint{text-align:center;color:var(--muted);font-size:12px;font-weight:600;margin-top:34px}
  /* 装饰 emoji：锚定视口四角/边缘，绝不压到卡片内容。
     内缩量随屏宽自适应（clamp + vw），大屏更往内聚、小屏自动收窄——
     卡片背景透明、内容距屏幕边至少约 100px，故 emoji 落在此区间不会遮挡文字/图片。
     顶部两个下移到 60px 以上，避开 52px 的固定导航栏。 */
  .hero .doodles{position:fixed;inset:0;pointer-events:none;z-index:0}
  .doodles span{position:absolute;font-size:30px;animation:bob 3.4s ease-in-out infinite;pointer-events:none;user-select:none}
  .doodles span:nth-child(1){top:clamp(60px,3.8vw,88px);left:clamp(32px,3vw,78px)}
  .doodles span:nth-child(2){top:clamp(64px,4vw,92px);right:clamp(32px,3vw,78px);animation-delay:.5s}
  .doodles span:nth-child(3){top:auto;bottom:clamp(30px,2.8vw,62px);left:clamp(32px,3vw,78px);animation-delay:1s}
  .doodles span:nth-child(4){top:auto;bottom:clamp(34px,3vw,66px);right:clamp(32px,3vw,78px);animation-delay:1.4s}
  .doodles span:nth-child(5){top:52%;left:clamp(30px,2.8vw,74px);animation-delay:1.8s}
  .doodles span:nth-child(6){top:46%;right:clamp(30px,2.8vw,74px);animation-delay:2.2s}
  @media (max-width:1100px){.features{grid-template-columns:1fr;gap:16px}.doodles{display:none}}

  /* ---------- Toast ---------- */
  #toast{position:fixed;top:calc(var(--nav-h) + 16px);left:50%;transform:translateX(-50%) translateY(-16px);z-index:60;
    background:var(--ink);color:#fff;border:3px solid var(--ink);
    padding:10px 26px;border-radius:999px;font-size:15px;font-weight:700;
    box-shadow:0 4px 0 rgba(0,0,0,.25);
    opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  #toast.good{background:var(--green);border-color:#1e7a3e}
  #toast.bad{background:var(--red);border-color:#a31621}

  footer{color:var(--muted);font-size:12px;font-weight:600;padding:8px 0 28px;text-align:center}
  body:has(#stage.show) footer{display:none}
  #confetti{position:fixed;inset:0;pointer-events:none;z-index:70}
  @media (max-width:860px){#stage.show{flex-direction:column}}

  /* ---- 选关网格（测试入口） ---- */
  .level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;
    max-height:52vh;overflow-y:auto;margin:18px 0 22px;padding:4px}
  .lv-btn{background:#EAF9F3;border:3px solid var(--ink);border-radius:16px;padding:12px 14px;cursor:pointer;
    font-family:inherit;text-align:left;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s;
    display:flex;flex-direction:column;gap:4px}
  .lv-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);background:#FFF3C4}
  .lv-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
  .lv-btn b{font-size:14px;font-weight:800;color:var(--ink)}
  .lv-btn span{font-size:12px;font-weight:600;color:var(--muted)}

  /* ---- 人次管理窗（隐藏入口唤出，风格与整体贴纸漫画风一致） ---- */
  .admin-card{max-width:420px;text-align:center}
  .admin-tip{color:var(--muted);font-size:14px;margin-bottom:14px}
  #adminToken{width:220px;padding:12px 18px;font-size:17px;font-family:inherit;text-align:center;
    border:3px solid var(--ink);border-radius:999px;outline:none;background:#FFF9EA;color:var(--ink);
    box-shadow:0 4px 0 var(--ink)}
  #adminToken:focus{background:#fff;border-color:var(--coral)}
  .admin-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
  .admin-row .btn{margin-top:0;padding:11px 26px;font-size:15px}
  .admin-err{min-height:20px;margin-top:12px;font-size:13px;font-weight:700;color:var(--coral)}
  .admin-count{margin:4px 0 20px}
  .admin-count b{display:block;font-size:56px;font-weight:900;color:var(--coral);
    font-variant-numeric:tabular-nums;line-height:1.1}
  .admin-count span{font-size:13px;color:var(--muted);font-weight:700}
  .btn.danger{background:#fff;color:var(--coral);border-color:var(--coral);box-shadow:0 5px 0 var(--coral)}
  .btn.danger:hover{background:#FFE9EA}
  .btn.danger:active{box-shadow:0 2px 0 var(--coral)}