*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#070b14;color:#e2e8f0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
#竞技场根{position:relative;width:100%;height:100%;touch-action:manipulation}
#擂台画布{position:absolute;inset:0;width:100%;height:100%;display:block}
#顶栏HUD{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:linear-gradient(180deg,rgba(7,11,20,.85),transparent);pointer-events:none}
#顶栏HUD a,#顶栏HUD .出战{pointer-events:auto}
.返回{color:#99f6e4;text-decoration:none;font-weight:600;min-height:40px;display:inline-flex;align-items:center}
.对阵名{font-weight:700;letter-spacing:.04em}
.出战{font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(20,184,166,.18);border:1px solid rgba(45,212,191,.35);color:#99f6e4}
#血条区{position:absolute;top:56px;left:12px;right:12px;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.血条卡{background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.25);border-radius:12px;padding:8px 10px;backdrop-filter:blur(8px)}
.血条卡.对方{text-align:right}
.血条卡 .名{font-size:13px;font-weight:700;margin-bottom:4px}
.血条卡 .条{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.血条卡 .条 i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#34d399,#14b8a6);border-radius:inherit;transition:width .35s ease}
.血条卡.对方 .条 i{background:linear-gradient(90deg,#f43f5e,#fb7185);margin-left:auto}
.血条卡 .数{font-size:11px;opacity:.8;margin-top:4px}
.VS{font-weight:900;color:#fbbf24;text-shadow:0 0 12px rgba(251,191,36,.45)}
#特效字{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:6;font-size:clamp(28px,6vw,48px);font-weight:900;pointer-events:none;opacity:0;text-shadow:0 0 24px currentColor;transition:opacity .15s}
#特效字.显{opacity:1;animation:弹入 .55s ease}
@keyframes 弹入{0%{transform:translate(-50%,-50%) scale(.6)}60%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}
#答题面板{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:7;width:min(720px,calc(100% - 16px));background:rgba(15,23,42,.88);border:1px solid rgba(148,163,184,.28);border-radius:16px;padding:14px 16px 16px;backdrop-filter:blur(10px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.题进度{font-size:12px;color:#94a3b8;margin-bottom:6px}
.题干{margin:0 0 12px;font-size:clamp(15px,2.6vw,18px);line-height:1.55}
.选项列{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.选项列 button{text-align:left;padding:12px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:rgba(30,41,59,.85);color:#e2e8f0;font-size:14px;line-height:1.4;cursor:pointer;min-height:48px}
.选项列 button:hover:not(:disabled){border-color:#2dd4bf;background:rgba(15,118,110,.35)}
.选项列 button:disabled{opacity:.65;cursor:default}
.选项列 button.对{border-color:#34d399;background:rgba(16,185,129,.25)}
.选项列 button.错{border-color:#fb7185;background:rgba(244,63,94,.2)}
.提示行{margin:10px 0 0;font-size:12px;color:#94a3b8}
[hidden]{display:none !important}
.遮罩{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.72);backdrop-filter:blur(4px)}
.卡{background:#0f172a;border:1px solid rgba(148,163,184,.25);border-radius:18px;padding:28px 24px;width:min(420px,calc(100% - 32px));text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.卡 h1{margin:8px 0 10px;font-size:28px}
.卡 p{margin:0 0 8px;color:#94a3b8}
.次链{color:#5eead4;display:inline-block;margin-top:14px}
.结算卡 .眉{color:#fbbf24;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.按钮行{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.主按钮,.次按钮{min-height:44px;padding:0 18px;border-radius:10px;font-weight:700;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.主按钮{background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff}
.次按钮{background:rgba(148,163,184,.15);color:#e2e8f0;border:1px solid rgba(148,163,184,.3)}
@media(max-width:640px){.选项列{grid-template-columns:1fr}#血条区{top:52px}}
@media(prefers-reduced-motion:reduce){#特效字.显{animation:none}}

#全屏闪{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;background:#fff;mix-blend-mode:screen;transition:opacity .12s ease}
#全屏闪.显{opacity:.55}
@media(prefers-reduced-motion:reduce){#全屏闪.显{opacity:.25}}
