/* 英雄联盟风格 UI：深色玻璃面板 + 金色描边 + 斜切角 + 蓝青高光。字体：宋体系标题（仿 Beaufort）+ 黑体正文。 */
:root { --gold: #c8aa6e; --gold2: #f0e6d2; --gold-d: #785a28; --cyan: #0ac8b9; --blue: #0397ab; --bg: rgba(1, 10, 19, 0.88); --bg2: rgba(9, 20, 40, 0.92); --red: #e84057; --tf: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; --bf: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #02050c; color: var(--gold2); font-family: var(--bf); font-size: 13px; user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#ui > * { pointer-events: auto; }
#ui #announce, #ui #killfeed, #ui #toast, #ui #tooltip { pointer-events: none; }
.hidden { display: none !important; }
body:not(.ingame) #topbar, body:not(.ingame) #teamframes, body:not(.ingame) #augslots, body:not(.ingame) #minimap, body:not(.ingame) #chat, body:not(.ingame) #hud { display: none; }
body.noui #ui { display: none; } body.noui #overlay { display: none; }
.dim { color: #8c9cad; } .hint { color: var(--cyan); margin-top: 4px; } .warn { color: #ff8a70; }
.gold-t { color: #ffd24a; } .gold-t::before { content: "●"; margin-right: 3px; font-size: 10px; color: #f0b429; }
.panel { background: linear-gradient(180deg, rgba(10, 22, 38, 0.96), rgba(2, 10, 20, 0.96)); border: 2px solid var(--gold-d); box-shadow: 0 0 0 1px #000, 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(0, 60, 90, 0.25); }
.panel::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(200, 170, 110, 0.25); pointer-events: none; }
button { font-family: var(--tf); font-size: 15px; letter-spacing: 2px; color: var(--gold2); background: linear-gradient(180deg, #1e2328, #0a1015); border: 2px solid var(--gold); padding: 8px 22px; cursor: pointer; box-shadow: inset 0 0 12px rgba(10, 200, 185, 0.12); }
button:hover { border-color: #f0e6d2; box-shadow: inset 0 0 18px rgba(10, 200, 185, 0.35), 0 0 12px rgba(200, 170, 110, 0.35); }
button:disabled { opacity: 0.4; cursor: default; }
select, input[type=range] { accent-color: var(--cyan); }
select { background: #0a1520; color: var(--gold2); border: 1px solid var(--gold-d); padding: 3px 6px; font-family: var(--bf); }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin-right: 8px; border: 1px solid var(--gold-d); background: #0a1420; color: #f0e6d2; font-family: var(--bf); font-size: 12px; text-align: center; border-radius: 2px; }

/* —— 开始菜单 —— */
#menu { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(4, 20, 40, 0.35), rgba(0, 0, 0, 0.8)); }
.menu-inner { text-align: center; padding: 40px 70px; background: linear-gradient(180deg, rgba(4, 16, 30, 0.82), rgba(2, 8, 16, 0.9)); border: 2px solid var(--gold-d); box-shadow: 0 0 60px rgba(40, 120, 255, 0.25), inset 0 0 60px rgba(120, 80, 255, 0.12); clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); }
.menu-sub { letter-spacing: 6px; color: var(--cyan); font-size: 12px; }
.menu-inner h1 { font-family: var(--tf); font-size: 62px; margin: 10px 0 0; letter-spacing: 12px; background: linear-gradient(180deg, #fff6d8, #c8aa6e 55%, #785a28); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(120, 140, 255, 0.5)); }
.menu-inner h2 { font-family: var(--tf); font-weight: normal; letter-spacing: 6px; color: #cfe0ff; margin: 6px 0 16px; }
.menu-desc { color: #a8b8c8; line-height: 1.9; }
.menu-opts { display: flex; gap: 24px; justify-content: center; margin: 18px 0; }
.menu-inner .start { font-size: 22px; padding: 12px 60px; margin-top: 6px; animation: glowp 2s infinite; }
@keyframes glowp { 50% { box-shadow: inset 0 0 22px rgba(10, 200, 185, 0.45), 0 0 26px rgba(160, 120, 255, 0.5); } }
.menu-foot { margin-top: 18px; color: #5a6a7a; font-size: 12px; }

/* —— 选人 —— */
#select { position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(8, 20, 45, 0.7), rgba(0, 0, 0, 0.92)); }
.sel-title { font-family: var(--tf); font-size: 34px; letter-spacing: 6px; color: var(--gold2); text-shadow: 0 0 20px rgba(120, 160, 255, 0.6); }
.sel-sub { color: var(--cyan); letter-spacing: 3px; margin: 6px 0 26px; }
.cards { display: flex; gap: 28px; }
.card { width: 250px; padding: 14px; text-align: center; background: linear-gradient(180deg, rgba(14, 28, 50, 0.95), rgba(4, 10, 20, 0.95)); border: 2px solid var(--gold-d); transition: transform 0.15s, box-shadow 0.15s; }
.card:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 0 30px rgba(200, 170, 110, 0.4), 0 0 60px rgba(90, 120, 255, 0.25); }
.card .art { height: 200px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, var(--c), #000 75%); border: 1px solid #000; }
.card .art img { width: 170px; height: 170px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 24px var(--c); }
.card .nm { font-family: var(--tf); font-size: 28px; margin-top: 10px; color: #fff4d8; }
.card .tt { color: var(--gold); letter-spacing: 2px; }
.card .role { color: #8cb; margin: 4px 0 8px; }
.card .abs { display: flex; gap: 5px; justify-content: center; margin-bottom: 12px; }
.card .ab { position: relative; } .card .ab img { width: 38px; height: 38px; border: 1px solid var(--gold-d); } .card .ab span { position: absolute; right: 1px; bottom: 0; font-size: 10px; background: #000a; padding: 0 2px; }
.sel-foot { margin-top: 26px; }

/* —— 顶部栏 —— */
#topbar { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; }
.top-center { display: flex; align-items: center; gap: 10px; padding: 4px 22px 6px; background: var(--bg); border: 1px solid var(--gold-d); border-top: none; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%); font-family: var(--tf); }
.top-center .k0 { color: #5ab8ff; font-size: 22px; font-weight: bold; } .top-center .k1 { color: #ff6a6a; font-size: 22px; font-weight: bold; }
.top-center .sword { color: var(--gold); } .top-center .time { font-family: var(--bf); color: #f0e6d2; margin-left: 10px; font-size: 15px; } .top-center .tw { color: #9aa; font-size: 12px; }
.top-team { display: flex; gap: 3px; padding: 4px; } .top-team.blue { flex-direction: row-reverse; }
.tp { position: relative; width: 34px; height: 34px; } .tp img { width: 100%; height: 100%; border: 1px solid #3a6ad8; } .top-team.red .tp img { border-color: #c03040; }
.tp b { position: absolute; right: 0; bottom: 0; font-size: 10px; background: #000c; padding: 0 2px; } .tp i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: bold; color: #fff; font-size: 14px; }
.tp.dead img { filter: grayscale(1) brightness(0.4); }

/* —— 左上队友框 —— */
#teamframes { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; gap: 5px; }
.tf { position: relative; display: flex; align-items: center; gap: 6px; width: 200px; padding: 3px; background: var(--bg); border: 1px solid #1e3a5a; }
.tf.me { border-color: var(--gold-d); }
.tf img { width: 38px; height: 38px; border: 1px solid var(--gold-d); } .tf .lv { position: absolute; left: 30px; top: 30px; font-size: 10px; background: #000; padding: 0 3px; border: 1px solid var(--gold-d); }
.tf .bars { flex: 1; display: flex; flex-direction: column; gap: 2px; } .tf .bars div { height: 6px; background: #111; } .tf .h i { display: block; height: 100%; background: linear-gradient(#5adc5a, #2a9a2a); } .tf.me .h i { background: linear-gradient(#6fe86f, #2aa02a); } .tf:not(.me) .h i { background: linear-gradient(#5ab8ff, #2a70c0); } .tf .m i { display: block; height: 100%; background: #3a70e0; }
.tf .nm { position: absolute; left: 50px; top: -2px; font-size: 10px; color: #9ab; display: none; }
.tf .ult { position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #333; } .tf .ult.ready { background: #ffd24a; box-shadow: 0 0 6px #ffd24a; }
.tf .dt { position: absolute; left: 3px; top: 3px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; }
.tf.dead img { filter: grayscale(1) brightness(0.35); }

/* —— 右侧符文槽 —— */
#augslots { position: absolute; right: 8px; top: 200px; display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 6px; background: var(--bg); border: 1px solid var(--gold-d); }
.aug-title { font-size: 10px; color: var(--gold); writing-mode: vertical-rl; letter-spacing: 2px; display: none; }
.augslot { width: 34px; height: 34px; border: 1px solid #2a3a4a; background: #07101a; transform: rotate(45deg) scale(0.8); display: flex; align-items: center; justify-content: center; }
.augslot span { transform: rotate(-45deg); color: #4a5a6a; font-size: 12px; } .augslot.special { border-color: #6a4a8a; }
.augslot.r-silver { border-color: #c0c8d0; background: linear-gradient(135deg, #3a4450, #1a2028); } .augslot.r-gold { border-color: #f0c040; background: linear-gradient(135deg, #5a4010, #201808); } .augslot.r-prismatic { border-color: #fff; background: linear-gradient(135deg, #ff6ad0, #6ad0ff, #d0ff6a); }

/* —— 击杀信息 / 播报 —— */
#killfeed { position: absolute; right: 60px; top: 60px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.kf { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--bg); border: 1px solid #1e3a5a; transition: opacity 1s; } .kf.bad { border-color: #6a2030; } .kf.good { border-color: #1a5a8a; } .kf.fade { opacity: 0; }
.kf img { width: 28px; height: 28px; border: 1px solid var(--gold-d); } .kf i { color: var(--gold); font-style: normal; } .kf .tw { color: #ccc; font-size: 11px; }
#announce { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); text-align: center; opacity: 0; }
#announce.show { animation: annc 1.9s ease-out forwards; }
@keyframes annc { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(0.96); } }
.ann span { display: block; font-family: var(--tf); font-size: 40px; font-weight: bold; letter-spacing: 8px; padding: 6px 60px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.75) 80%, transparent); }
.ann.big span { font-size: 56px; } .ann em { display: block; font-style: normal; color: #cbd; margin-top: 4px; font-size: 15px; }
.ann.ally span { color: #8fd0ff; text-shadow: 0 0 18px #2a8aff; } .ann.enemy span { color: #ff8a8a; text-shadow: 0 0 18px #ff2a2a; } .ann.neutral span { color: #f0e6d2; text-shadow: 0 0 18px #c8aa6e; }

/* —— 聊天 —— */
#chat { position: absolute; left: 8px; bottom: 280px; width: 360px; }
#chat .log { max-height: 150px; overflow: hidden; display: flex; flex-direction: column; }
#chat .ln { padding: 1px 6px; font-size: 12px; color: #d8d0b8; text-shadow: 0 1px 2px #000; opacity: 0.35; transition: opacity 0.6s; } #chat .ln.new, #chat:hover .ln { opacity: 1; }
#chat .ping { font-weight: 700; text-shadow: 0 0 6px rgba(0,0,0,0.9); } #chat .ln .t { color: #778; } #chat .sys { color: #f0d890; } #chat .ally { color: #7ac8ff; } #chat .enemy { color: #ff8a8a; } #chat .me { color: #9aff9a; }
#chat .in { width: 100%; margin-top: 3px; background: rgba(0, 0, 0, 0.55); border: 1px solid #334; color: #eee; padding: 3px 6px; font-family: var(--bf); opacity: 0.25; }
#chat .in:focus { opacity: 1; outline: 1px solid var(--gold-d); }

/* —— 小地图 —— */
#minimap { --mm: 1; position: absolute; right: 6px; bottom: 6px; width: calc(250px * var(--mm)); height: calc(250px * var(--mm)); padding: 8px; background: var(--bg); border: 2px solid var(--gold-d); box-shadow: 0 0 0 1px #000; }
#minimap canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
/* 窄屏（≤1400px 宽）：小地图基准尺寸 250 → 200，避免与底部装备栏重叠（设置里的缩放倍率照常生效） */
@media (max-width: 1400px) { #minimap { width: calc(200px * var(--mm)); height: calc(200px * var(--mm)); } }
#bigmap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px; } #bigmap canvas { width: 640px; height: 640px; display: block; }

/* —— 底部 HUD —— */
#hud { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 0; }
.hud-stats { width: 118px; padding: 5px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 6px; background: var(--bg); border: 1px solid var(--gold-d); border-right: none; margin-bottom: 0; height: 104px; }
.hud-stats .st { display: flex; align-items: center; gap: 3px; font-size: 11px; } .hud-stats i { color: var(--gold); font-style: normal; width: 12px; font-size: 11px; } .hud-stats b { font-weight: normal; color: #e8e0cc; }
.hud-portrait { position: relative; width: 104px; height: 118px; background: var(--bg); border: 2px solid var(--gold-d); border-bottom: none; display: flex; align-items: center; justify-content: center; }
.hud-portrait .pimg { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--gold); position: relative; z-index: 1; }
.hud-portrait .pxp { position: absolute; width: 96px; height: 96px; border-radius: 50%; top: 9px; left: 2px; -webkit-mask: radial-gradient(circle, transparent 44px, #000 45px); mask: radial-gradient(circle, transparent 44px, #000 45px); }
.hud-portrait .plvl { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 2; min-width: 26px; text-align: center; background: #0a0f14; border: 1px solid var(--gold); font-weight: bold; font-size: 13px; }
.hud-portrait .presp { position: absolute; z-index: 3; top: 26px; font-size: 34px; font-weight: bold; color: #fff; text-shadow: 0 0 8px #000; display: none; } .hud-portrait .presp.on { display: block; }
.hud-mid { padding: 6px 8px 5px; background: linear-gradient(180deg, rgba(8, 18, 32, 0.94), rgba(1, 8, 16, 0.96)); border: 2px solid var(--gold-d); border-bottom: none; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px); }
.abil-row { display: flex; gap: 5px; align-items: flex-end; }
.abil { position: relative; width: 52px; height: 52px; border: 2px solid #3a3a2a; background: #000; cursor: pointer; }
.abil img { width: 100%; height: 100%; display: block; }
.abil .cd { position: absolute; inset: 0; } .abil .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; color: #fff; text-shadow: 0 0 4px #000; }
.abil .k { position: absolute; left: 1px; bottom: 0; font-size: 10px; padding: 0 3px; background: #000c; color: #f0e6d2; }
.abil.passive { width: 38px; height: 38px; } .abil.passive .k { font-size: 9px; }
.abil .pips { position: absolute; left: 0; right: 0; bottom: -7px; display: flex; gap: 2px; justify-content: center; } .abil .pips i { width: 7px; height: 4px; background: #222; border: 1px solid #555; } .abil .pips i.on { background: #ffd24a; border-color: #ffd24a; box-shadow: 0 0 4px #ffd24a; }
.abil .up { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; line-height: 14px; text-align: center; background: #1a3a2a; color: #9fff9f; border: 1px solid #5fdf5f; font-weight: bold; display: none; animation: glowp 1.2s infinite; } .abil .up.on { display: block; }
.abil.locked img { filter: grayscale(1) brightness(0.35); } .abil.nomana img { filter: saturate(0.3) brightness(0.55) hue-rotate(200deg); } .abil.recast { border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.abil:hover { border-color: var(--gold); }
.abil-row .sep { width: 6px; }
.abil.summ { width: 40px; height: 40px; }
.hud-bars { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.bar { position: relative; height: 17px; background: #0a0a0a; border: 1px solid #222; overflow: hidden; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; }
.bar.hp .fill { background: linear-gradient(180deg, #7ae86a, #2e8a26 70%, #1e5a18); }
.bar.hp .shield { position: absolute; top: 0; bottom: 0; background: linear-gradient(#fff, #c8d0d8); }
.bar.hp .ticks { position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(0, 0, 0, 0.55) 0); background-size: 10% 100%; pointer-events: none; }
.bar.mp { height: 13px; } .bar.mp .fill { background: linear-gradient(180deg, #6aa8ff, #2a5ad0 70%, #1a3a90); } .bar.mp.flow .fill { background: linear-gradient(#fff, #aab); } .bar.mp.none .fill { background: #333; }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 17px; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; } .bar.mp span { line-height: 13px; font-size: 10px; }
.bar em { position: absolute; right: 4px; top: 0; font-style: normal; font-size: 10px; line-height: 17px; color: #cfe; } .bar.mp em { line-height: 13px; }
.hud-inv { position: relative; padding: 6px; background: var(--bg); border: 1px solid var(--gold-d); border-left: none; display: grid; grid-template-columns: auto auto; gap: 4px 6px; height: 104px; }
.inv-grid { display: grid; grid-template-columns: repeat(3, 40px); gap: 3px; }
.slot { position: relative; width: 40px; height: 40px; border: 1px solid #3a3a2a; background: #050a10; }
.slot img { width: 100%; height: 100%; display: block; } .slot.empty img { display: none; } .slot .cd { position: absolute; inset: 0; }
.slot .k { position: absolute; left: 1px; bottom: 0; font-size: 9px; color: #bbb; text-shadow: 0 0 2px #000; } .slot .n { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: bold; }
.slot.active { border-color: #7a6a3a; } .slot.trinket { border-radius: 50%; overflow: hidden; margin-top: 21px; } .slot.trinket img { border-radius: 50%; }
/* 金币放在饰品栏下方（同一列），不再单独占一行被屏幕底边裁掉 */
.inv-grid { grid-column: 1; grid-row: 1; } .hud-inv > .slot.trinket { grid-column: 2; grid-row: 1; align-self: start; justify-self: center; margin-top: 2px; }
.gold { grid-column: 2; grid-row: 1; align-self: end; display: flex; align-items: center; gap: 4px; justify-content: center; font-size: 14px; font-weight: bold; color: #ffd24a; min-width: 56px; } .gold i::before { content: "●"; color: #f0b429; font-style: normal; font-size: 12px; }
.shop-hint { position: absolute; right: 4px; top: -18px; font-size: 11px; color: var(--cyan); display: none; background: var(--bg); padding: 0 5px; border: 1px solid var(--blue); } .shop-hint.on { display: block; }

/* —— 提示 —— */
#toast { position: absolute; left: 50%; bottom: 200px; transform: translateX(-50%); padding: 5px 18px; font-size: 15px; opacity: 0; transition: opacity 0.2s; background: rgba(0, 0, 0, 0.65); border: 1px solid #6a2a2a; color: #ff9a8a; }
#toast.show { opacity: 1; } #toast.info { color: #9fe8ff; border-color: #2a5a6a; }
#tooltip { position: fixed; z-index: 50; max-width: 330px; padding: 8px 10px; background: rgba(1, 10, 19, 0.97); border: 1px solid var(--gold-d); box-shadow: 0 4px 18px #000; line-height: 1.55; font-size: 12px; color: #d8d0bc; }
#tooltip b { color: #f0e6d2; font-size: 13px; } #tooltip .it-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; } #tooltip .it-s { color: #a0e0a0; } #tooltip .pas { margin-top: 5px; color: #d8d0bc; } #tooltip .pas.act { color: #9fe8ff; } #tooltip .aramtag { color: var(--cyan); font-size: 11px; }

/* —— 阵亡面板 —— */
#deathpanel { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; padding: 14px 40px; background: linear-gradient(180deg, rgba(40, 6, 10, 0.85), rgba(10, 2, 4, 0.9)); border: 1px solid #6a2030; pointer-events: none; }
.dp-title { font-family: var(--tf); font-size: 26px; letter-spacing: 6px; color: #ff9a9a; } .dp-killer { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 8px 0; } .dp-killer img { width: 48px; height: 48px; border: 2px solid #c03040; }
.dp-killer b { display: block; font-size: 15px; } .dp-killer span { color: #caa; } .dp-by { color: #ddd; } .dp-count { font-size: 64px; font-weight: bold; color: #fff; text-shadow: 0 0 20px #f33; line-height: 1.1; } .dp-tip { color: #9ab; font-size: 12px; }

/* —— 商店 —— */
#shop { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 920px; height: 620px; display: flex; flex-direction: column; z-index: 5; }
.shop-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--gold-d); background: linear-gradient(90deg, rgba(30, 20, 50, 0.6), transparent); }
.shop-head .merchant { width: 58px; height: 58px; border: 2px solid var(--gold); border-radius: 50%; } .shop-head .title { font-family: var(--tf); font-size: 24px; letter-spacing: 4px; } .shop-head .sub { font-size: 11px; color: var(--cyan); letter-spacing: 2px; }
.shop-head .status { margin-left: auto; color: #9fe8b0; } .shop-head .status.bad { color: #ff8a7a; }
.shop-head .close { cursor: pointer; font-size: 20px; padding: 0 6px; color: var(--gold); }
.shop-body { flex: 1; display: flex; min-height: 0; }
.shop-body .tabs { width: 92px; border-right: 1px solid #1e2a3a; padding: 6px 0; }
.tab { padding: 9px 12px; cursor: pointer; color: #a8b0b8; border-left: 3px solid transparent; } .tab:hover { color: #fff; } .tab.on { color: var(--gold2); border-left-color: var(--gold); background: rgba(200, 170, 110, 0.08); }
.shop-body .grid { flex: 1; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, 62px); grid-auto-rows: 78px; gap: 8px; overflow-y: auto; align-content: start; }
.item { text-align: center; cursor: pointer; } .item img { width: 54px; height: 54px; border: 2px solid #3a3a2a; display: block; margin: 0 auto; } .item span { color: #ffd24a; font-size: 12px; }
.item:hover img { border-color: var(--gold); } .item.sel img { border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .item.poor img { filter: grayscale(0.85) brightness(0.55); } .item.poor span { color: #777; } .item.aram img { border-color: #2a8a80; }
.shop-body .detail { width: 290px; border-left: 1px solid #1e2a3a; padding: 12px; overflow-y: auto; }
.d-top { display: flex; gap: 10px; align-items: center; } .d-top img { width: 58px; height: 58px; border: 2px solid var(--gold); } .d-top b { display: block; font-size: 16px; } .d-top s { color: #777; margin-left: 6px; }
.tree { margin: 10px 0; text-align: center; } .tree-top img { width: 36px; border: 1px solid var(--gold); } .tree-row { display: flex; justify-content: center; gap: 8px; margin-top: 6px; border-top: 1px solid #3a3a2a; padding-top: 6px; }
.comp img { width: 32px; height: 32px; border: 1px solid #555; display: block; } .comp span { font-size: 10px; color: #ffd24a; }
.d-body { margin: 8px 0 12px; line-height: 1.6; font-size: 12px; } .d-body .it-h { display: none; } .d-body .it-s { color: #a0e0a0; } .d-body .pas { margin-top: 6px; }
.detail .buy { width: 100%; }
.shop-foot { display: flex; align-items: center; padding: 8px 14px; border-top: 1px solid var(--gold-d); gap: 12px; } .shop-foot .inv { display: flex; gap: 5px; }
.islot { width: 44px; height: 44px; border: 1px solid #3a3a2a; background: #050a10; cursor: pointer; } .islot img { width: 100%; height: 100%; } .islot.empty img { display: none; }
.goldbox { margin-left: auto; font-size: 18px; color: #ffd24a; font-weight: bold; }
#shop.locked .grid { opacity: 0.7; }

/* —— 记分板 / 设置 / 教程 / 结算 —— */
#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: 980px; padding: 12px; }
.sb-head { display: flex; justify-content: space-between; font-family: var(--tf); font-size: 20px; margin-bottom: 8px; } .sb-head .blue { color: #7ac8ff; } .sb-head .red { color: #ff8a8a; }
#scoreboard table, #result table { width: 100%; border-collapse: collapse; } #scoreboard th, #result th { font-weight: normal; color: var(--gold); font-size: 12px; text-align: left; padding: 4px; }
#scoreboard td, #result td { padding: 3px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
#scoreboard .ch { position: relative; width: 40px; } #scoreboard .ch img { width: 34px; height: 34px; border: 1px solid var(--gold-d); } #scoreboard .ch b { position: absolute; left: 24px; top: 24px; font-size: 10px; background: #000; padding: 0 2px; }
#scoreboard .nm span, #result td span { display: block; font-size: 11px; color: #8a9; }
#scoreboard .its img, #scoreboard .its i { width: 26px; height: 26px; display: inline-block; margin-right: 2px; border: 1px solid #333; vertical-align: middle; background: #050a10; }
#scoreboard .augs i { display: inline-block; width: 12px; height: 12px; margin-right: 3px; transform: rotate(45deg); border: 1px solid #333; background: #07101a; } #scoreboard .augs i.r-silver { background: #c0c8d0; } #scoreboard .augs i.r-gold { background: #f0c040; } #scoreboard .augs i.r-prismatic { background: linear-gradient(135deg, #ff6ad0, #6ad0ff); }
#scoreboard tbody.t0 td { background: rgba(30, 80, 160, 0.12); } #scoreboard tbody.t1 td { background: rgba(160, 30, 50, 0.12); } #scoreboard tr.me td { background: rgba(200, 170, 110, 0.2); } #scoreboard tr.dead { opacity: 0.55; } #scoreboard .sp td { height: 8px; border: none; background: none !important; }
#settings, #tutorial { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; padding: 16px 22px; z-index: 6; }
.p-title { font-family: var(--tf); font-size: 24px; letter-spacing: 4px; color: var(--gold2); border-bottom: 1px solid var(--gold-d); padding-bottom: 6px; margin-bottom: 12px; } .p-title span { font-size: 12px; color: var(--cyan); letter-spacing: 3px; }
.p-sub { color: var(--gold); margin: 14px 0 6px; } .p-foot { text-align: center; margin-top: 14px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; } .set-grid label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; font-size: 12px; color: #c8c0a8; }
.tut p { line-height: 1.8; color: #d8d0bc; } .tut .warn { color: #ffcf8a; }
#result { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1000px; padding: 18px; z-index: 8; }
.res-banner { text-align: center; font-family: var(--tf); font-size: 64px; letter-spacing: 16px; } .res-banner span { display: block; font-size: 14px; letter-spacing: 8px; } .res-banner.win { color: #9fd8ff; text-shadow: 0 0 30px #2a8aff; } .res-banner.lose { color: #ff9a9a; text-shadow: 0 0 30px #ff2a2a; }
.res-sub { text-align: center; color: #bbb; margin-bottom: 10px; } #result td img { width: 30px; height: 30px; border: 1px solid var(--gold-d); } #result tr.me td { background: rgba(200, 170, 110, 0.18); } #result tbody.t0 td:first-child { border-left: 3px solid #3a8ae8; } #result tbody.t1 td:first-child { border-left: 3px solid #e83a4a; }
#debug { position: absolute; left: 220px; top: 8px; margin: 0; padding: 6px 10px; background: rgba(0, 0, 0, 0.7); color: #9f9; font: 12px/1.45 Menlo, monospace; border: 1px solid #253; pointer-events: none; }
#glnotice { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); padding: 20px 40px; background: #200; border: 2px solid #a33; font-size: 18px; }

/* ———————— 强化符文：选择面板 ———————— */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
#augpick { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: auto; background: radial-gradient(ellipse at 50% 48%, rgba(20, 10, 40, 0.55), rgba(0, 0, 0, 0.78) 70%); padding-bottom: 60px; }
#augpick.hidden { display: none; }
.ap-head { margin-bottom: 14px; text-shadow: 0 2px 6px #000; }
.ap-title { font-family: var(--tf); font-size: 30px; letter-spacing: 8px; color: var(--gold2); text-shadow: 0 0 18px rgba(160, 120, 255, 0.7), 0 2px 4px #000; }
.ap-sub { color: #b8c4d0; font-size: 13px; margin-top: 4px; }
.ap-hide { margin-top: 10px; padding: 5px 18px; font-size: 13px; letter-spacing: 2px; color: #cfe0ee; background: rgba(10, 20, 34, 0.85); border: 1px solid var(--gold-d); cursor: pointer; }
.ap-hide:hover { color: var(--gold2); border-color: var(--gold2); }
.ap-cards { display: flex; gap: 22px; justify-content: center; }
.augcard { position: relative; width: 230px; min-height: 330px; padding: 16px 16px 58px; cursor: pointer; background: linear-gradient(180deg, rgba(14, 24, 40, 0.97), rgba(4, 10, 20, 0.97)); clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); transition: transform 0.15s, filter 0.15s; animation: acIn 0.35s ease-out both; }
.augcard:nth-child(2) { animation-delay: 0.07s; } .augcard:nth-child(3) { animation-delay: 0.14s; }
@keyframes acIn { from { transform: translateY(24px) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.augcard:hover { transform: translateY(-6px) scale(1.03); filter: brightness(1.15); }
.augcard .ac-frame { position: absolute; inset: 0; pointer-events: none; padding: 3px; clip-path: inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.augcard.r-silver .ac-frame { background: linear-gradient(160deg, #eef4fa, #7a8898 40%, #d8e2ec 60%, #6a7888); }
.augcard.r-gold .ac-frame { background: linear-gradient(160deg, #fff0b0, #b8862a 40%, #ffe08a 60%, #8a5a10); }
.augcard.r-prismatic .ac-frame { background: conic-gradient(from var(--ang), #ff6ad0, #ffb060, #f0ff70, #60ffb0, #60c0ff, #b070ff, #ff6ad0); animation: prism 2.4s linear infinite; padding: 4px; }
@keyframes prism { to { --ang: 360deg; } }
.augcard .ac-glow { position: absolute; inset: 0; pointer-events: none; }
.augcard.r-prismatic .ac-glow { background: radial-gradient(ellipse at 50% 20%, rgba(200, 140, 255, 0.28), transparent 60%), linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 45%, transparent 60%); background-size: 100% 100%, 300% 100%; animation: sheen 3s linear infinite; }
.augcard.r-gold .ac-glow { background: radial-gradient(ellipse at 50% 20%, rgba(255, 200, 80, 0.2), transparent 60%); }
.augcard.r-silver .ac-glow { background: radial-gradient(ellipse at 50% 20%, rgba(200, 220, 240, 0.12), transparent 60%); }
@keyframes sheen { from { background-position: 0 0, 150% 0; } to { background-position: 0 0, -150% 0; } }
.ac-rar { font-size: 12px; letter-spacing: 4px; margin-bottom: 8px; }
.r-silver .ac-rar, b.r-silver, .r-silver.apn-rar { color: #d8e2ec; } .r-gold .ac-rar, b.r-gold, .r-gold.apn-rar { color: #ffd060; } .r-prismatic .ac-rar, b.r-prismatic, .r-prismatic.apn-rar { background: linear-gradient(90deg, #ff8ad8, #ffd070, #80ffc0, #80c8ff, #c890ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.augcard img { width: 96px; height: 96px; display: block; margin: 0 auto 8px; filter: drop-shadow(0 0 10px rgba(160, 120, 255, 0.4)); }
.augcard.r-prismatic img { filter: drop-shadow(0 0 14px rgba(255, 160, 255, 0.8)); animation: float 2.6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.ac-name { font-family: var(--tf); font-size: 21px; color: #fff; letter-spacing: 2px; }
.ac-en { font-size: 11px; color: #7a8a9a; margin-bottom: 8px; }
.ac-desc { font-size: 13px; line-height: 1.55; color: #c8d0d8; text-align: left; }
.ac-roll { position: absolute; left: 16px; right: 16px; bottom: 12px; font-size: 13px; padding: 5px 8px; letter-spacing: 1px; }
.ac-roll.golden { border-color: #ffd060; color: #ffe8a0; background: linear-gradient(180deg, #5a4010, #201404); box-shadow: 0 0 14px rgba(255, 200, 80, 0.55); animation: goldpulse 1.2s ease-in-out infinite; }
@keyframes goldpulse { 50% { box-shadow: 0 0 22px rgba(255, 210, 100, 0.9); } }
.ac-roll:disabled { opacity: 0.4; cursor: default; }
#augswap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; padding: 16px 22px; z-index: 10; }
.sw-desc { margin: 8px 0; color: #c8d0d8; } .sw-new { display: flex; gap: 12px; align-items: center; margin: 10px 0; padding: 8px; border: 1px solid #6a4a8a; background: rgba(60, 30, 90, 0.3); } .sw-new img { width: 52px; height: 52px; }
.sw-opts { display: flex; gap: 12px; justify-content: center; margin-top: 12px; } .sw-opts button { display: flex; align-items: center; gap: 8px; font-size: 14px; } .sw-opts img { width: 34px; height: 34px; }
/* 符文面板（O） */
#augpanel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 720px; max-height: 76vh; padding: 16px 22px; z-index: 7; display: flex; flex-direction: column; }
#augpanel.hidden { display: none; }
.apn-sub { color: #9aa8b4; margin: 4px 0 10px; } .apn-list { overflow-y: auto; }
.apn-row { display: flex; gap: 12px; padding: 10px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.03); border-left: 3px solid #555; }
.apn-row.r-silver { border-left-color: #c8d4e0; } .apn-row.r-gold { border-left-color: #f0c860; } .apn-row.r-prismatic { border-image: linear-gradient(#ff6ad0, #60c0ff, #b070ff) 1; }
.apn-row img { width: 58px; height: 58px; flex: none; } .apn-name { font-family: var(--tf); font-size: 17px; color: #fff; } .apn-name .dim { font-family: var(--bf); font-size: 11px; }
.apn-desc { color: #c0c8d0; font-size: 12.5px; line-height: 1.5; margin: 3px 0; } .apn-log { color: #8ac8b0; font-size: 12px; } .apn-empty { padding: 30px; text-align: center; }
/* HUD 符文槽：图标 + 待选择提示 */
.augslot img { width: 46px; height: 46px; transform: rotate(-45deg); }
.augslot.r-prismatic { animation: slotPrism 3s linear infinite; } @keyframes slotPrism { 50% { box-shadow: 0 0 12px rgba(255, 150, 255, 0.8); } }
#augslots .aug-pend { display: none; font-size: 11px; color: #ffd060; writing-mode: vertical-rl; letter-spacing: 2px; animation: goldpulse 1.2s infinite; padding: 2px; } #augslots .aug-pend.on { display: block; } #augslots .aug-pend.reopen { cursor: pointer; color: #fff0a0; background: rgba(120, 80, 10, 0.5); border: 1px solid #ffd060; }
.abil.sealed img { filter: grayscale(1) brightness(0.35); } .abil.sealed::after { content: '封印'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ff8060; font-size: 13px; font-family: var(--tf); text-shadow: 0 0 4px #000; }
#chat b.r-prismatic { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f4a8ff; text-shadow: 0 0 6px rgba(200, 120, 255, 0.8); font-weight: bold; }
#chat b.r-gold { color: #ffd060; } #chat b.r-silver { color: #d8e2ec; }
/* 记分板 / 结算：强化符文小图标 */
td.augs { white-space: nowrap; } td.augs img.aug { width: 22px; height: 22px; margin-right: 2px; border: 1px solid #555; vertical-align: middle; }
td.augs img.aug.r-gold { border-color: #f0c860; } td.augs img.aug.r-silver { border-color: #c8d4e0; } td.augs img.aug.r-prismatic { border-color: #fff; box-shadow: 0 0 6px rgba(230, 150, 255, 0.9); }
td.augs i { display: inline-block; width: 22px; height: 22px; margin-right: 2px; border: 1px dashed #2a3a4a; vertical-align: middle; }

/* 记分板 / 结算 / 商店 / 强化符文面板打开时隐藏居中播报（避免大字压在面板上；播报音效与聊天记录照常） */
body:has(#scoreboard:not(.hidden)) #announce, body:has(#result:not(.hidden)) #announce, body:has(#augpick:not(.hidden)) #announce,
body:has(#augpanel:not(.hidden)) #announce, body:has(#shop:not(.hidden)) #announce { visibility: hidden; }
/* 2K 及以上（≥2200px 宽）：界面容器整体放大 1.33 倍（只缩放 DOM 界面，不缩放 3D/覆盖层画布），避免 HUD 在高分屏上过小 */
@media (min-width: 2200px) { #hud, #topbar, #teamframes, #augslots, #minimap, #chat, #killfeed, .panel, #augpick, #announce, #tutorial { zoom: 1.33; } }