:root{
  --grass1:#0b6e3b; --grass2:#04401f; --gold:#ffd34d; --accent:#21d07a;
  --wrong:#ff5a5a; --ink:#0d1b12; --card:rgba(255,255,255,.96);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,"PingFang SC","Helvetica Neue",sans-serif;
  color:#fff; overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%,#1ba85a 0%,var(--grass1) 35%,var(--grass2) 100%);
  background-attachment:fixed;
}
/* 球场纹理 */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.10;
  background:repeating-linear-gradient(0deg,#fff 0 2px,transparent 2px 64px);}
#app{position:relative;max-width:480px;margin:0 auto;height:100%;height:100dvh;overflow:hidden}

.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  padding:26px 22px;overflow-y:auto;animation:fade .35s ease;}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

h1{font-size:34px;letter-spacing:1px;margin-top:6px;text-shadow:0 3px 0 rgba(0,0,0,.25)}
h2{font-size:24px;margin:8px 0}
.sub{opacity:.85;font-size:15px;margin:6px 0 18px;text-align:center}
.legal{margin-top:auto;font-size:11px;opacity:.55;text-align:center;padding-top:18px}

.ball{font-size:74px;margin-top:24px;animation:bounce 1.6s infinite ease-in-out;filter:drop-shadow(0 10px 8px rgba(0,0,0,.3))}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(8deg)}}

.btn{border:0;border-radius:30px;padding:15px 30px;font-size:17px;font-weight:700;
  margin:9px 0;cursor:pointer;width:100%;max-width:320px;transition:transform .12s}
.btn:active{transform:scale(.95)}
.btn.primary{background:linear-gradient(135deg,#ffd34d,#ff9f1c);color:#5a3b00;
  box-shadow:0 8px 0 #c97f12,0 12px 18px rgba(0,0,0,.3)}
.btn.primary:active{box-shadow:0 3px 0 #c97f12;transform:translateY(4px) scale(.99)}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.4)}

.nick-input{border:0;border-radius:24px;padding:13px 20px;font-size:16px;text-align:center;
  width:100%;max-width:320px;margin:4px 0 6px;background:rgba(255,255,255,.95);color:var(--ink)}

/* 关卡地图 */
.level-map{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0 22px}
.lv-chip{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);
  border-radius:14px;padding:9px 13px;font-size:13px;font-weight:700;display:flex;
  align-items:center;gap:5px}
.lv-chip.locked{opacity:.5}
.lv-chip .em{font-size:17px}

/* 答题 */
.quiz-top{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:12px;font-weight:700}
.lv-badge{background:var(--gold);color:#5a3b00;padding:5px 12px;border-radius:20px;font-size:14px}
.progress{font-size:16px;opacity:.9}
.score-now{font-size:16px;color:var(--gold)}
.timer-bar{width:100%;height:7px;border-radius:6px;background:rgba(0,0,0,.25);overflow:hidden;margin-bottom:18px}
.timer-fill{height:100%;width:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .25s linear}
.timer-fill.low{background:linear-gradient(90deg,#ff9f1c,var(--wrong))}
.cat-tag{align-self:flex-start;background:rgba(255,255,255,.18);padding:3px 11px;border-radius:12px;font-size:12px;margin-bottom:10px}
.question{font-size:21px;line-height:1.45;width:100%;margin-bottom:22px;min-height:60px}
.options{width:100%;display:flex;flex-direction:column;gap:12px}
.opt{background:var(--card);color:var(--ink);border-radius:16px;padding:16px 18px;
  font-size:16px;font-weight:600;display:flex;gap:12px;align-items:center;cursor:pointer;
  border:3px solid transparent;transition:transform .1s,border-color .15s;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.opt:active{transform:scale(.98)}
.opt .key{width:28px;height:28px;border-radius:50%;background:#e8eef0;display:flex;
  align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
.opt.correct{border-color:var(--accent);background:#e7fff1}
.opt.correct .key{background:var(--accent);color:#fff}
.opt.wrong{border-color:var(--wrong);background:#ffecec;animation:shake .4s}
.opt.wrong .key{background:var(--wrong);color:#fff}
.opt.disabled{pointer-events:none;opacity:.92}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* 结算 */
.result-emoji{font-size:78px;margin-top:20px;animation:pop .5s}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.result-score{font-size:18px;margin-top:6px}
.result-score b{font-size:40px;color:var(--gold);display:block}
.result-sub{opacity:.85;margin:6px 0 14px}
.detail{width:100%;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.drow{background:rgba(255,255,255,.1);border-radius:12px;padding:10px 13px;font-size:13px;line-height:1.4}
.drow .mark{font-weight:800;margin-right:6px}
.drow.ok .mark{color:var(--accent)} .drow.no .mark{color:var(--wrong)}
#r-actions{width:100%;display:flex;flex-direction:column;align-items:center}

/* 关注门槛 */
.lock{font-size:64px;margin-top:24px;animation:pop .5s}
.qr-wrap{margin:14px 0}
.qr-wrap img{width:190px;height:190px;border-radius:16px;background:#fff;padding:8px}
.gate-steps{font-size:14px;opacity:.9;text-align:center;line-height:1.7;margin-bottom:14px}
.code-row{display:flex;gap:8px;width:100%;max-width:320px}
.code-row input{flex:1;border:0;border-radius:24px;padding:13px 18px;font-size:16px;text-align:center;letter-spacing:2px;text-transform:uppercase}
.code-row .btn{width:auto;margin:0;padding:13px 22px;white-space:nowrap}
.gate-msg{min-height:20px;font-size:14px;margin:10px 0;color:var(--gold)}

/* 排行榜 */
.lb-count{font-size:14px;color:var(--gold);font-weight:700;margin:2px 0 10px}
.lb-list{width:100%;list-style:none;margin:10px 0}
.lb-list li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.1);
  border-radius:14px;padding:12px 16px;margin-bottom:8px;font-weight:600}
.lb-list li .rk{font-size:18px;width:30px;text-align:center;font-weight:800}
.lb-list li:nth-child(1) .rk{color:#ffd34d} .lb-list li:nth-child(2) .rk{color:#d8d8d8}
.lb-list li:nth-child(3) .rk{color:#e0a06a}
.lb-list li .nm{flex:1} .lb-list li .sc{color:var(--gold);font-weight:800}

/* 游戏大厅 */
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:360px;margin:8px 0 6px}
.game-tile{position:relative;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.28);border-radius:18px;
  padding:16px 12px;text-align:center;cursor:pointer;transition:transform .12s,background .2s}
.game-tile.hot{grid-column:1/-1;background:linear-gradient(135deg,rgba(255,211,77,.3),rgba(255,159,28,.16));
  border-color:var(--gold);box-shadow:0 6px 18px rgba(255,159,28,.25);animation:hotpulse 2s infinite}
.game-tile.hot .gt-emoji{font-size:46px}
.game-tile.hot .gt-title{font-size:18px;color:var(--gold)}
@keyframes hotpulse{0%,100%{box-shadow:0 6px 18px rgba(255,159,28,.22)}50%{box-shadow:0 6px 26px rgba(255,159,28,.5)}}
.game-tile.feature{grid-column:1/-1;background:linear-gradient(135deg,rgba(61,220,132,.26),rgba(33,150,243,.16));
  border-color:#3ddc84}
.game-tile.feature .gt-emoji{font-size:42px}
.game-tile.feature .gt-title{font-size:18px;color:#7fffc4}
.gt-badge{position:absolute;top:8px;right:10px;background:#ff3b3b;color:#fff;font-size:11px;font-weight:800;padding:2px 9px;border-radius:11px}
.gt-badge.bl{background:#21b86a}
.game-tile:active{transform:scale(.95)} .game-tile:hover{background:rgba(255,255,255,.2)}
.gt-emoji{font-size:38px;line-height:1.1} .gt-title{font-weight:800;margin:6px 0 3px;font-size:16px}
.gt-desc{font-size:11px;opacity:.75;line-height:1.3}
.hub-actions{display:flex;gap:10px;width:100%;max-width:360px;margin-top:4px}
.hub-actions .btn{margin:6px 0}

/* 测试结果 */
.tr-desc{font-size:15px;line-height:1.75;white-space:pre-line;text-align:left;background:rgba(255,255,255,.1);border-radius:14px;padding:16px 18px;margin:10px 0 16px;max-width:360px}
#tr-actions,#r-actions,#pk-actions,#ti-actions{width:100%;display:flex;flex-direction:column;align-items:center}

/* 点球大战 */
#pk-canvas{border-radius:14px;margin:10px 0;max-width:100%;box-shadow:0 6px 16px rgba(0,0,0,.3)}
#px-canvas{border-radius:10px;margin:8px 0;max-width:100%;width:330px;image-rendering:pixelated;
  touch-action:none;box-shadow:0 6px 16px rgba(0,0,0,.35);background:#0a6e37}
.pk-tip{font-size:15px;min-height:24px;margin:6px 0;text-align:center;font-weight:600}
.pk-dirs{display:flex;gap:10px;width:100%;max-width:340px}
.pk-dirs button{flex:1;border:0;border-radius:14px;padding:14px 0;font-size:16px;font-weight:700;background:rgba(255,255,255,.92);color:#0d1b12}
.pk-dirs button:active{transform:scale(.95)}
.power-bar{width:100%;max-width:340px;height:22px;border-radius:12px;background:rgba(0,0,0,.3);overflow:hidden;margin:10px 0}
.power-fill{height:100%;width:0;background:linear-gradient(90deg,#ff5a5a,#ffd34d)}
.power-fill.green{background:linear-gradient(90deg,#21d07a,#1ba85a)}

/* 球队猫图鉴 */
.cat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;max-width:380px;overflow-y:auto}
.cat-card{background:rgba(255,255,255,.95);border-radius:14px;padding:6px;text-align:center;color:#0d1b12;font-size:12px;font-weight:700}
.cat-card img{width:100%;border-radius:10px;display:block;aspect-ratio:1/1;object-fit:cover}
.cat-card.locked{background:rgba(255,255,255,.12);color:#cdd8d0}
.cat-card .cat-lock,.cat-card .cat-draw{font-size:34px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.cat-need{font-size:10px;opacity:.7;font-weight:600}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}