:root {
  --bg: #0b1020; --panel: rgba(14, 20, 38, .86); --glass: rgba(10, 16, 32, .5); --line: rgba(255,255,255,.12);
  --txt: #f2f5ff; --dim: rgba(242,245,255,.6); --pri: #ff6a3d; --pri2: #ff3d6e; --acc: #3db8ff; --gold: #ffd24a;
  --sa-t: env(safe-area-inset-top); --sa-b: env(safe-area-inset-bottom); --sa-l: env(safe-area-inset-left); --sa-r: env(safe-area-inset-right);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--txt); font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
canvas#app { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- 触控摇杆 ---------- */
#touch { position: fixed; inset: 0; z-index: 1; }
#joyBase { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(rgba(255,255,255,.04), rgba(255,255,255,.14)); border: 2px solid rgba(255,255,255,.3); z-index: 2; pointer-events: none; display: none; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 2px 10px rgba(0,0,0,.4); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; }
.hud-top { position: absolute; top: calc(var(--sa-t) + 10px); left: calc(var(--sa-l) + 10px); right: calc(var(--sa-r) + 10px); display: flex; gap: 8px; align-items: flex-start; }
.hud-score, .hud-mid { padding: 6px 12px 8px; min-width: 84px; }
.hud-mid { flex: 0 1 150px; }
.lbl { font-size: 11px; color: var(--dim); letter-spacing: .5px; }
.num { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.num .dim { opacity: .22; }
.bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); margin-top: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--acc), #7df0ff); border-radius: 2px; transition: width .2s linear; }
.bar i.warn { background: linear-gradient(90deg, #ff3d3d, #ff9a3d); }
.hud-tools { margin-left: auto; display: flex; gap: 8px; }
.ibtn { pointer-events: auto; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 18px; display: grid; place-items: center; padding: 0; }
.ibtn:active { transform: scale(.92); }
.ibtn.off { opacity: .4; }

.combo { position: absolute; top: calc(var(--sa-t) + 80px); left: calc(var(--sa-l) + 12px); padding: 4px 12px; border-radius: 20px; background: linear-gradient(90deg, rgba(255,106,61,.9), rgba(255,61,110,.9)); font-size: 14px; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.combo.on { opacity: 1; transform: none; }
.combo b { font-size: 18px; }
.combo em { font-style: normal; font-weight: 800; color: var(--gold); margin-left: 2px; }
.combo.bump { animation: bump .25s ease-out; }
@keyframes bump { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }

.toast { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 20px; background: rgba(0,0,0,.6); font-size: 15px; opacity: 0; transition: opacity .2s; }
.toast.on { opacity: 1; }
.hint { position: absolute; left: 50%; bottom: calc(var(--sa-b) + 18px); transform: translateX(-50%); font-size: 12px; color: var(--dim); background: rgba(0,0,0,.35); padding: 6px 12px; border-radius: 16px; white-space: nowrap; opacity: 0; }
.hint.fade { animation: hint 4.5s ease forwards; }
@keyframes hint { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

#btnFire { pointer-events: auto; position: absolute; right: calc(var(--sa-r) + 22px); bottom: calc(var(--sa-b) + 30px); width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: radial-gradient(circle at 35% 30%, #ff8a5c, #e5372f 70%); box-shadow: 0 6px 20px rgba(229,55,47,.45), inset 0 -4px 10px rgba(0,0,0,.25); padding: 0; }
#btnFire .ic { font-size: 34px; line-height: 1; }
#btnFire .badge { position: absolute; top: -4px; right: -4px; min-width: 26px; height: 26px; border-radius: 13px; background: #fff; color: #e5372f; font-weight: 800; font-size: 15px; display: grid; place-items: center; padding: 0 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
#btnFire.on { transform: scale(.92); }
#btnFire.empty { filter: grayscale(1); opacity: .45; }

/* ---------- 飘字 / 闪屏 ---------- */
#floaters { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.fl { position: absolute; font-weight: 900; font-size: 22px; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.4); transform: translate(-50%,-50%); opacity: 0; white-space: nowrap; }
.fl.big { font-size: 30px; }
.fl.go { animation: rise .8s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes rise { 0% { opacity: 1; transform: translate(-50%,-50%) scale(1.5); } 20% { transform: translate(-50%,-70%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-170%) scale(.95); } }
#flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: rgba(255,0,0,.35); opacity: 0; transition: opacity .3s; }
#flash.on { opacity: 1; transition: none; }
#flash.white { background: rgba(255,255,240,.85); }

/* ---------- 通用屏 ---------- */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, rgba(11,16,32,0) 0%, rgba(11,16,32,.35) 30%, rgba(11,16,32,.85) 60%); }
.screen.center { justify-content: center; align-items: center; background: rgba(8,12,24,.6); padding: 16px; }
.sheet { max-height: calc(100% - 96px - var(--sa-b)); overflow-y: auto; padding: calc(var(--sa-t) + 12px) calc(var(--sa-r) + 16px) 8px calc(var(--sa-l) + 16px); -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, var(--acc), #7d5cff); box-shadow: 0 6px 18px rgba(61,184,255,.35); }
.brand h1 { margin: 0; font-size: 24px; letter-spacing: 1px; }
.ver { font-size: 11px; color: var(--dim); margin-top: 2px; }
section { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px; margin-bottom: 10px; }
h2 { margin: 0 0 8px; font-size: 13px; color: var(--dim); font-weight: 600; letter-spacing: 1px; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode { text-align: left; background: rgba(255,255,255,.05); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i n" "d d" "b b"; column-gap: 8px; row-gap: 2px; align-items: center; }
.mode .mi { grid-area: i; font-size: 20px; }
.mode .mn { grid-area: n; font-weight: 700; font-size: 15px; }
.mode .md { grid-area: d; font-size: 11px; color: var(--dim); line-height: 1.35; min-height: 30px; }
.mode .mb { grid-area: b; font-size: 11px; color: var(--gold); opacity: .85; }
.mode.sel { border-color: var(--acc); background: linear-gradient(135deg, rgba(61,184,255,.22), rgba(125,92,255,.15)); box-shadow: 0 0 0 3px rgba(61,184,255,.15); }
.mode.hot.sel { border-color: var(--pri); background: linear-gradient(135deg, rgba(255,106,61,.25), rgba(255,61,110,.18)); box-shadow: 0 0 0 3px rgba(255,106,61,.15); }

.tabs { display: flex; gap: 4px; background: rgba(255,255,255,.06); padding: 3px; border-radius: 11px; margin-bottom: 10px; }
.tabs button { flex: 1; background: none; border: 0; padding: 7px 0; border-radius: 8px; font-size: 14px; color: var(--dim); }
.tabs button.on { background: rgba(255,255,255,.14); color: var(--txt); font-weight: 600; }
.row { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.rl { flex: 0 0 34px; font-size: 13px; color: var(--dim); padding-top: 7px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.seg button { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; font-size: 13px; }
.seg button .oi { margin-right: 4px; opacity: .8; }
.seg button.sel { background: var(--acc); border-color: var(--acc); color: #04121f; font-weight: 600; }
.swatches { gap: 8px; }
.seg button.sw { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; width: 58px; background: none; border-color: transparent; }
.sw i { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.sw span { font-size: 11px; color: var(--dim); white-space: nowrap; }
.seg button.sw.sel { background: rgba(61,184,255,.15); border-color: var(--acc); color: inherit; }
.seg button.sw.sel i { border-color: #fff; }
.seg button.sw.sel span { color: var(--txt); }
.note { font-size: 11px; color: var(--dim); margin: 4px 0 0 44px; }

.rules { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; margin-bottom: 10px; }
.rules summary { font-size: 13px; color: var(--dim); list-style: none; }
.rules summary::after { content: ' ▾'; }
.rules[open] summary::after { content: ' ▴'; }
.rules ul { margin: 8px 0 2px; padding-left: 18px; font-size: 13px; line-height: 1.65; }
.rules .keys { color: var(--dim); font-size: 12px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 2px; vertical-align: middle; }
.dot.red { background: #d9302a; } .dot.gray { background: #7a8088; } .dot.blue { background: #3f8cf0; }

.actions { display: flex; gap: 10px; padding: 10px calc(var(--sa-r) + 16px) calc(var(--sa-b) + 14px) calc(var(--sa-l) + 16px); }
.actions.inline { padding: 0; margin-top: 16px; }
.btn { flex: 1; height: 54px; border-radius: 16px; border: 0; font-size: 18px; font-weight: 800; letter-spacing: 1px; }
.btn:active { transform: scale(.97); }
.btn.pri { background: linear-gradient(135deg, var(--pri), var(--pri2)); box-shadow: 0 8px 22px rgba(255,61,110,.35); }
.btn.sec { background: rgba(255,255,255,.1); border: 1px solid var(--line); font-weight: 700; }
.btn small { display: block; font-size: 11px; font-weight: 500; opacity: .75; letter-spacing: 0; }

/* ---------- 结算 ---------- */
.card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 22px 18px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.res-mode { font-size: 12px; color: var(--dim); }
.res-title { font-size: 20px; font-weight: 800; margin-top: 4px; }
.res-title.gold { color: var(--gold); text-shadow: 0 0 18px rgba(255,210,74,.5); }
.res-main { font-size: 56px; font-weight: 900; line-height: 1.1; margin: 6px 0 2px; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, #9fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res-sub { font-size: 13px; color: var(--dim); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.stats div { background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 4px; }
.stats b { display: block; font-size: 20px; }
.stats span { font-size: 11px; color: var(--dim); }

/* ---------- 横屏 / 桌面：首页做成左侧面板，右边露出场景 ---------- */
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
  .screen:not(.center) { justify-content: flex-start; width: 430px; background: linear-gradient(90deg, rgba(11,16,32,.92) 70%, rgba(11,16,32,0)); }
  .sheet { max-height: none; flex: 1; }
  .hud-mid { flex-basis: 180px; }
}
@media (max-width: 360px) {
  .num { font-size: 20px; }
  .ibtn { width: 38px; height: 38px; }
  .mode .md { font-size: 10px; }
}