/* 对局界面（game.js / render.js） */
.gm { display: flex; flex-direction: column; background: #0b1514; overflow: hidden; }
.gm-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 50% 45%, #173a35, #0b1514 70%); }
.gm > * { position: relative; }
.gm-top { flex: none; display: flex; align-items: center; gap: 6px; padding: calc(var(--content-top) + 4px) 8px 4px; background: linear-gradient(rgba(4,10,10,.92), rgba(4,10,10,.6)); border-bottom: 1px solid rgba(232,194,106,.25); z-index: 2; }
.gm-ibtn { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--ink); background: linear-gradient(#2c4a47, #142625); color: var(--paper); font-size: 16px; }
.gm-round { flex: 1; min-width: 0; line-height: 1.1; }
.gm-round b { font-family: var(--kai); font-size: 20px; color: #ffe8b0; text-shadow: 0 2px 0 var(--ink); }
.gm-round small { display: block; font-size: 10px; color: var(--paper2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-phase { flex: none; font-size: 12px; font-weight: 900; color: #9ff0c8; }
.gm-timer { flex: none; min-width: 38px; height: 34px; border-radius: 10px; background: rgba(0,0,0,.55); border: 2px solid var(--gold2); color: #ffe39a; font-size: 18px; font-family: var(--kai);
  display: flex; align-items: center; justify-content: center; }
.gm-timer:empty { visibility: hidden; }
.gm-timer.urgent { color: #fff; background: var(--red); border-color: #ffb0a0; animation: pulse .5s infinite alternate; }
.gm-fight { padding: 6px 12px; font-size: 14px; }
.gm-async { display: flex; flex-direction: column; font-size: 11px; font-weight: 900; line-height: 1.3; }
@keyframes pulse { to { transform: scale(1.08); } }
.pulse { animation: pulse .6s infinite alternate; }
/* 玩家条 */
.gm-players { flex: none; display: flex; gap: 4px; padding: 4px 6px; overflow-x: auto; background: rgba(0,0,0,.25); z-index: 2; }
.gm-players::-webkit-scrollbar { display: none; }
.gm-pl { position: relative; flex: 1; min-width: 46px; max-width: 70px; height: 50px; padding: 0; border-radius: 10px; border: 2px solid rgba(232,194,106,.3); background: rgba(0,0,0,.4); overflow: visible; }
.gm-pl img { position: absolute; left: 50%; top: 1px; transform: translateX(-50%); width: 36px; height: 36px; }
.gm-pl-hp { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #4fdc8a var(--p), rgba(255,255,255,.12) var(--p)); }
.gm-pl b { position: absolute; right: 2px; top: 0; font-size: 11px; color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.gm-pl.me { border-color: #9ff0c8; box-shadow: 0 0 8px rgba(63,191,148,.6); }
.gm-pl.mate { border-color: #5aa8e6; }
.gm-pl.out { filter: grayscale(1) brightness(.5); }
.gm-pl s { position: absolute; left: 1px; top: 0; text-decoration: none; font-size: 10px; }
.gm-pl .tm { position: absolute; left: 2px; bottom: 10px; width: 8px; height: 8px; border-radius: 50%; } .tm.t0 { background: #ff6a5a; } .tm.t1 { background: #5aa8e6; } .tm.t2 { background: #ffd24a; }
.gm-emote-bubble { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-size: 26px; z-index: 5; animation: emote 2.6s forwards; pointer-events: none; }
@keyframes emote { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0 } 15% { transform: translate(-50%, 0) scale(1.2); opacity: 1 } 80% { opacity: 1 } 100% { transform: translate(-50%, -20px); opacity: 0 } }
.gm-async-opp { flex: 1; text-align: center; font-size: 12px; color: var(--paper2); padding: 4px; }
/* 战场 */
.gm-arena { flex: 1; min-height: 0; position: relative; }
.gm-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.gm-traits { position: absolute; left: 4px; top: 4px; display: flex; flex-direction: column; gap: 3px; max-height: 48%; overflow-y: auto; z-index: 2; pointer-events: auto; }
.gm-traits::-webkit-scrollbar { display: none; }
.gm-trait { display: flex; align-items: center; gap: 3px; padding: 2px 6px 2px 3px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.15); background: rgba(0,0,0,.6); color: #aaa; font-size: 11px; text-align: left; min-width: 76px; }
.gm-trait i { font-style: normal; font-size: 13px; width: 18px; text-align: center; filter: grayscale(1); }
.gm-trait b { font-size: 12px; min-width: 12px; }
.gm-trait span { flex: 1; white-space: nowrap; }
.gm-trait small { font-size: 9px; opacity: .6; }
.gm-trait.on { color: #fff; border-color: var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, #000), rgba(0,0,0,.65)); }
.gm-trait.on i { filter: none; }
.gm-trait.t2 { box-shadow: 0 0 6px var(--c); } .gm-trait.t3 { box-shadow: 0 0 10px var(--c); border-width: 2px; }
.gm-banner { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; text-align: center; animation: popIn .2s; }
.gm-res { font-family: var(--kai); font-size: 40px; font-weight: 900; letter-spacing: 6px; text-shadow: 0 3px 0 var(--ink), 0 0 20px rgba(0,0,0,.8); white-space: nowrap; }
.gm-res.win { color: #ffe39a; } .gm-res.lose { color: #ff8a7a; }
.gm-res small { display: block; font-family: system-ui; font-size: 13px; letter-spacing: 0; color: #fff; }
.gm-flash { background: rgba(4,10,10,.8); border: 1.5px solid var(--gold2); border-radius: 14px; padding: 8px 18px; }
.gm-flash b { display: block; font-size: 16px; color: #ffe8b0; white-space: nowrap; } .gm-flash small { font-size: 12px; color: #ffb0a0; }
.gm-bossrank { background: rgba(4,10,10,.9); border: 2px solid var(--gold2); border-radius: 14px; padding: 10px 14px; min-width: 220px; }
.gm-bossrank > b { display: block; font-family: var(--kai); font-size: 18px; color: #ffe39a; margin-bottom: 6px; }
.gm-bossrank > div { display: flex; gap: 8px; font-size: 12px; padding: 2px 0; } .gm-bossrank > div.me { color: #9ff0c8; font-weight: 900; }
.gm-bossrank span { width: 16px; } .gm-bossrank em { flex: 1; font-style: normal; text-align: left; } .gm-bossrank small { display: block; margin-top: 6px; font-size: 11px; color: #ffe39a; }
.gm-cbar { position: absolute; right: 6px; top: 6px; display: flex; gap: 6px; z-index: 3; }
.gm-cb { border: 1.5px solid var(--gold2); background: rgba(0,0,0,.65); color: #ffe39a; font-weight: 900; font-size: 12px; border-radius: 10px; padding: 5px 10px; }
.gm-cb.on { background: var(--gold2); color: #3b1f06; }
.gm-pend { position: absolute; right: 6px; bottom: 40%; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
/* 选秀 */
.gm-carousel { position: absolute; left: 4px; right: 4px; top: 4px; z-index: 3; background: rgba(4,10,10,.9); border: 2px solid var(--gold2); border-radius: 14px; padding: 6px; }
.gm-car-t { text-align: center; font-size: 12px; font-weight: 900; color: #ffe39a; margin-bottom: 4px; }
.gm-car-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 4px; }
.gm-car { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3px 1px; border-radius: 10px; border: 2px solid var(--cc); background: rgba(0,0,0,.4); color: var(--paper); }
.gm-car img { width: 40px; height: 40px; } .gm-car b { font-size: 11px; } .gm-car span { font-size: 9px; color: var(--paper2); white-space: nowrap; }
.gm-car.mine { box-shadow: 0 0 0 2px #9ff0c8, 0 0 12px rgba(63,191,148,.7); }
.gm-car.taken { opacity: .55; } .gm-car em { position: absolute; top: 2px; left: 2px; right: 2px; font-style: normal; font-size: 9px; background: rgba(0,0,0,.7); border-radius: 6px; }
/* 人口 / 金币 / 装备 */
.gm-info { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.gm-lv { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.gm-lv b { font-size: 14px; color: #ffe8b0; flex: none; }
.gm-lv small { font-size: 10px; color: var(--paper2); white-space: nowrap; }
.gm-xp { position: relative; flex: 1; height: 12px; border-radius: 7px; background: rgba(0,0,0,.6); border: 1.5px solid var(--ink); overflow: hidden; max-width: 110px; }
.gm-xp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #5ab0ff, #3f8fd8); }
.gm-xp span { position: absolute; inset: 0; font-size: 9px; font-weight: 900; line-height: 10px; text-align: center; text-shadow: 0 1px 0 #000; }
.gm-gold { flex: none; display: flex; align-items: center; gap: 6px; }
.gm-gold b { font-size: 16px; color: #ffe39a; } .gm-gold small { font-size: 10px; color: var(--paper2); }
.gm-streak { font-size: 11px; font-weight: 900; } .gm-streak.w { color: #ffb347; } .gm-streak.l { color: #8fd0ff; }
.gm-send { font-size: 10px; color: #8fc8ff; font-weight: 800; }
.gm-items { flex: none; display: flex; gap: 4px; padding: 2px 8px 4px; overflow-x: auto; min-height: 36px; align-items: center; }
.gm-items::-webkit-scrollbar { display: none; }
.gm-item { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 2px solid #9fd8c8; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; font-size: 18px; touch-action: none; cursor: grab; }
.gm-item.full { border-color: #ffd24a; box-shadow: 0 0 6px rgba(255,210,74,.5); }
.gm-float { position: fixed; z-index: 200; pointer-events: none; width: 40px; height: 40px; font-size: 22px; }
.gm-items-empty { font-size: 10px; color: var(--paper2); opacity: .7; }
/* 商店 */
.gm-shop { flex: none; position: relative; display: flex; gap: 5px; align-items: stretch; padding: 5px 6px calc(var(--safe-bottom) + 6px); background: linear-gradient(#173230, #0b1817); border-top: 2px solid var(--gold2); }
.gm-shop-side { display: flex; flex-direction: column; gap: 5px; flex: none; width: 52px; }
.gm-sbtn { flex: 1; border-radius: 10px; border: 2px solid var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; }
.gm-sbtn b { font-size: 13px; } .gm-sbtn small { font-size: 10px; color: #ffe39a; }
.gm-sbtn.xp { background: linear-gradient(#5ab0ff, #24539a); } .gm-sbtn.roll { background: linear-gradient(#7fe0b0, #1f7a5c); }
.gm-sbtn:disabled { filter: grayscale(.8) brightness(.7); }
.gm-cards { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.gm-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2px 1px 3px; border-radius: 10px; border: 2px solid var(--cc); color: #fff; min-width: 0;
  background: linear-gradient(color-mix(in srgb, var(--cc) 35%, #0b1817), #0b1817 80%); box-shadow: inset 0 0 8px color-mix(in srgb, var(--cc) 30%, transparent); }
.gm-card img { width: 100%; max-width: 50px; aspect-ratio: 1; }
.gm-card b { font-size: 11px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.gm-card em { position: absolute; right: 2px; bottom: 16px; font-style: normal; font-size: 11px; font-weight: 900; color: #ffe39a; text-shadow: 0 1px 0 #000; }
.gm-card-t { position: absolute; left: 2px; top: 2px; display: flex; flex-direction: column; gap: 1px; }
.gm-card-t span { font-size: 10px; line-height: 1; background: rgba(0,0,0,.55); border-radius: 4px; padding: 1px; border-left: 2px solid var(--c); }
.gm-card.own { box-shadow: 0 0 0 1px #9ff0c8, inset 0 0 8px color-mix(in srgb, var(--cc) 30%, transparent); }
.gm-card.up { animation: pulse .6s infinite alternate; box-shadow: 0 0 10px #ffd24a; }
.gm-card-up { position: absolute; right: 2px; top: 2px; font-style: normal; font-size: 10px; font-weight: 900; color: #ffd24a; }
.gm-card.empty { border: 2px dashed rgba(255,255,255,.12); background: rgba(0,0,0,.25); }
.gm-lock { position: absolute; right: 6px; top: -14px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--gold2); background: #0b1817; font-size: 12px; padding: 0; }
.gm-lock.on { background: var(--gold2); }
.gm-sellzone { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: #fff; background: rgba(200,52,43,.55); border: 2px dashed #ffb0a0; border-radius: 10px; z-index: 5; pointer-events: none; }
.gm-shop.selling .gm-sellzone { display: flex; }
.gm-shop.selling.over .gm-sellzone { background: rgba(200,52,43,.85); }
/* 棋子详情 */
.gm-tip { position: absolute; left: 6px; right: 6px; bottom: calc(var(--safe-bottom) + 118px); z-index: 6; background: rgba(12,26,25,.97); border: 2px solid var(--gold2); border-radius: 14px; padding: 8px 10px; box-shadow: 0 0 0 2px var(--ink), 0 -6px 18px rgba(0,0,0,.5); animation: popIn .15s; max-height: 55%; overflow-y: auto; }
.gm-tip-hd { display: flex; gap: 8px; align-items: flex-start; }
.gm-tip-hd img { width: 58px; height: 58px; border-radius: 10px; border: 2px solid var(--cc); background: rgba(0,0,0,.35); flex: none; }
.gm-tip-hd > div { flex: 1; min-width: 0; }
.gm-tip-hd b { font-size: 16px; color: #ffe8b0; } .gm-tip-hd b small { font-size: 11px; color: var(--paper2); margin-left: 6px; font-weight: 400; }
.gm-stars { color: #ffd24a; font-size: 12px; }
.gm-cost { font-style: normal; font-size: 12px; font-weight: 900; color: var(--cc); }
.gm-tip-x { border: 0; background: none; color: var(--paper2); font-size: 16px; padding: 0 2px; }
.gm-tchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.gm-tchips span { font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); cursor: pointer; }
.gm-tchips.big span { font-size: 13px; padding: 5px 12px; }
.gm-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; margin: 6px 0; color: var(--paper); }
.gm-skill { font-size: 12px; line-height: 1.5; background: rgba(0,0,0,.3); border-radius: 8px; padding: 5px 8px; }
.gm-skill b { color: #ffe39a; margin-right: 6px; } .gm-skill small { display: block; color: var(--paper2); font-size: 10px; }
.gm-tip-items > div { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-top: 4px; }
.gm-tip-items i { font-style: normal; font-size: 16px; } .gm-tip-items b { color: #ffd24a; flex: none; } .gm-tip-items small { color: var(--paper2); }
.gm-tip-act { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.gm-tip-act:empty { display: none; }
/* 弹窗 */
.gm-modal .modal-body { font-size: 13px; }
.gm-hint { font-size: 12px; color: var(--paper2); line-height: 1.6; margin: 4px 0; }
.gm-sec { font-weight: 900; color: #ffe39a; margin: 10px 0 5px; font-size: 13px; }
.gm-tier { font-size: 12px; line-height: 1.5; padding: 3px 6px; border-radius: 6px; opacity: .6; }
.gm-tier b { margin-right: 6px; } .gm-tier.ok { opacity: .85; } .gm-tier.on { opacity: 1; background: rgba(63,191,148,.2); color: #9ff0c8; }
.gm-tunits { display: flex; flex-wrap: wrap; gap: 5px; }
.gm-tunits > div { display: flex; flex-direction: column; align-items: center; width: 54px; padding: 3px 0; border-radius: 8px; border: 1.5px solid var(--cc); background: rgba(0,0,0,.3); }
.gm-tunits img { width: 36px; height: 36px; } .gm-tunits span { font-size: 10px; } .gm-tunits small { font-size: 9px; color: var(--paper2); }
.gm-item-txt { font-size: 14px; color: #ffe39a; }
.gm-combos > div { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.gm-combos span { width: 30px; } .gm-combos b { flex: none; } .gm-combos small { color: var(--paper2); font-size: 10px; }
.gm-runes { display: flex; flex-direction: column; gap: 8px; }
.gm-rune-c { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 8px; text-align: left; padding: 10px; border-radius: 14px; border: 2px solid var(--gold2); color: var(--paper);
  background: linear-gradient(100deg, rgba(232,194,106,.25), rgba(12,26,25,.9)); animation: cardIn .3s backwards; }
.gm-rune-c:nth-child(2) { animation-delay: .06s; } .gm-rune-c:nth-child(3) { animation-delay: .12s; }
@keyframes cardIn { from { transform: translateX(40px); opacity: 0 } }
.gm-rune-c i { grid-row: span 3; font-style: normal; font-size: 34px; display: flex; align-items: center; justify-content: center; }
.gm-rune-c b { font-family: var(--kai); font-size: 18px; color: #ffe8b0; } .gm-rune-c small { font-size: 10px; color: #9ff0c8; } .gm-rune-c span { font-size: 12px; color: var(--paper2); line-height: 1.4; }
.gm-rune-c.k-combat { border-color: #ff8a7a; } .gm-rune-c.k-econ { border-color: #ffd24a; } .gm-rune-c.k-trait { border-color: #b46cdc; } .gm-rune-c.k-item { border-color: #5aa8e6; } .gm-rune-c.k-gamble { border-color: #3fbf94; }
.gm-steal-u { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gm-steal-u button { display: flex; flex-direction: column; align-items: center; padding: 5px; border-radius: 10px; border: 2px solid var(--cc); background: rgba(0,0,0,.35); color: var(--paper); }
.gm-steal-u img { width: 44px; height: 44px; } .gm-steal-u b { font-size: 12px; } .gm-steal-u small { font-size: 10px; color: #ffd24a; }
.gm-picks { display: flex; flex-direction: column; gap: 6px; }
.gm-picks button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 2px solid #ffd24a; background: rgba(0,0,0,.35); color: var(--paper); text-align: left; }
.gm-picks i { font-style: normal; font-size: 26px; } .gm-picks b { color: #ffd24a; flex: none; } .gm-picks small { font-size: 11px; color: var(--paper2); }
.gm-menu { display: flex; flex-direction: column; gap: 10px; }
.gm-emote-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm-emote-list button { font-size: 32px; padding: 8px; border-radius: 12px; border: 1.5px solid rgba(232,194,106,.3); background: rgba(0,0,0,.3); }
.gm-scout-hd { display: flex; justify-content: space-between; font-weight: 900; margin-bottom: 6px; }
.gm-over { text-align: center; }
.gm-over-place { font-family: var(--kai); font-size: 42px; font-weight: 900; color: #ffe8b0; letter-spacing: 4px; text-shadow: 0 3px 0 var(--ink), 0 0 20px rgba(232,194,106,.5); }
.gm-over-place.p1 { color: #ffd24a; } .gm-over-place.p2, .gm-over-place.p3 { color: #d8e4ea; }
.gm-over-sub { font-size: 13px; color: var(--paper2); margin: 4px 0; } .gm-over-sub.red { color: #ff8a7a; }
.gm-over-rank { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 10px 0; font-weight: 900; }
.gm-over-rank b { font-size: 26px; } .gm-over-rank b.up { color: #6fe08a; } .gm-over-rank b.down { color: #ff8a7a; } .gm-over-rank small { font-size: 11px; color: var(--paper2); }

/* 一键上阵 / 阵容预设 / 局后翻倍 */
.gm-quick { display: flex; gap: 4px; flex: none; }
.gm-qbtn { border: 1.5px solid var(--gold2); background: rgba(0,0,0,.45); color: #ffe39a; font-size: 11px; font-weight: 800; border-radius: 9px; padding: 4px 7px; white-space: nowrap; }
.gm-qbtn:active { transform: scale(.95); }
.gm-presets { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.gm-preset { padding: 8px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1.5px solid rgba(232,194,106,.3); }
.gm-preset-hd { display: flex; justify-content: space-between; align-items: baseline; } .gm-preset-hd b { color: #ffe8b0; } .gm-preset-hd small { color: var(--paper2); font-size: 11px; }
.gm-preset-u { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0; } .gm-preset-u img { width: 30px; height: 30px; border-radius: 6px; background: rgba(0,0,0,.35); } .gm-preset-u img.miss { filter: grayscale(1) brightness(.5); }
.gm-preset-act { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.gm-double-box { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.gm-double { font-size: 15px; } .gm-double-t { font-size: 11px; color: var(--paper2); }

.gm-tut { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); width: 86%; z-index: 3; pointer-events: none; padding: 8px 12px; border-radius: 12px;
  background: rgba(40,20,10,.9); border: 2px solid #ffb347; color: #ffe8b0; font-size: 13px; font-weight: 800; line-height: 1.5; text-align: center; box-shadow: 0 0 16px rgba(255,180,70,.4); animation: popIn .25s; }