:root {
  --bg: #f4efe6; --panel: #fffaf1; --panel2: #efe7d8; --text: #3b3020; --sub: #8a7c62;
  --border: #d8ccb4; --accent: #8a6d2f; --accent2: #b08d3f;
  --gold: #c9a227; --hpbar: #4caf50; --manabar: #42a5f5;
  --dmg-phys: #ffb74d; --dmg-light: #ffe082; --dmg-dark: #b39ddb; --dmg-true: #ef5350; --heal: #81c784;
  --c1: #9e9e9e; --c2: #66bb6a; --c3: #42a5f5; --c4: #ab47bc; --c5: #ffa726;
}
:root[data-theme="dark"] {
  --bg: #14120d; --panel: #1e1a13; --panel2: #292217; --text: #e8ddc4; --sub: #a4936f;
  --border: #4a3f2b; --accent: #d4af5a; --accent2: #b08d3f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; min-height: 100vh; }
button { font-family: inherit; cursor: pointer; }

.header-bar { padding: 10px 16px 6px; border-bottom: 1px solid var(--border); background: var(--panel); }
.utility-bar { display: flex; gap: 8px; margin-bottom: 6px; }
.utility-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 13px; text-decoration: none; }
.utility-btn:hover { border-color: var(--accent); }
.page-title { font-size: 22px; color: var(--accent); }
.page-sub { font-size: 13px; color: var(--sub); margin-top: 2px; }

/* 大厅 */
#lobby { max-width: 720px; margin: 40px auto; padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
#lobby h2 { color: var(--accent); margin-bottom: 12px; }
#lobby p { font-size: 14px; line-height: 1.7; color: var(--sub); margin-bottom: 10px; }
.lobby-btns { display: flex; gap: 12px; margin-top: 18px; }
.big-btn { flex: 1; padding: 14px; font-size: 17px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: #fff8e8; }
.big-btn:hover { filter: brightness(1.1); }
.big-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* 游戏布局 */
#game { display: none; padding: 8px 10px; max-width: 1500px; margin: 0 auto; }
#topbar { display: flex; align-items: center; gap: 14px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; flex-wrap: wrap; font-size: 14px; }
#topbar .stat b { color: var(--accent); font-size: 16px; }
#roundLabel { font-size: 17px; font-weight: bold; color: var(--accent); }
#phaseInfo { color: var(--sub); }
#timer { font-weight: bold; min-width: 40px; }
#startBtn { padding: 6px 20px; background: var(--accent); color: #fff8e8; border: none; border-radius: 8px; font-size: 15px; }
#speedBtn, #skipBtn { padding: 5px 10px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; display: none; }

#layout { display: flex; gap: 8px; }
#leftPanel { width: 195px; flex-shrink: 0; }
#rightPanel { width: 210px; flex-shrink: 0; }
#centerPanel { flex: 1; min-width: 640px; }
.panel-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.panel-box h4 { font-size: 13px; color: var(--sub); margin-bottom: 6px; }

/* 玩家列表（两行：名字+段位+连胜 / 血条） */
.pl-row { display: block; padding: 4px 4px 5px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.pl-row.me { background: var(--panel2); }
.pl-row.dead { opacity: .4; text-decoration: line-through; }
.pl-top { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pl-name { font-weight: 600; }
.pl-bot { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pl-hp { flex: 1; height: 9px; border-radius: 5px; background: #0003; overflow: hidden; }
.pl-hp > div { height: 100%; background: var(--hpbar); }
.pl-hpnum { width: 28px; text-align: right; font-weight: bold; font-size: 12px; }
.pl-rank { font-size: 10.5px; color: var(--accent2); white-space: nowrap; }

/* 棋盘 */
#boardWrap { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; overflow: hidden; }
#board { position: relative; margin: 0 auto; }
/* 2.5D 视角：棋盘平面后倾，棋子反向立正；--zoom 由滚轮控制 */
#board { transform: scale(var(--zoom, 1)); transform-origin: 50% 30%; }
#board.tilt { transform: perspective(1100px) rotateX(38deg) scale(var(--zoom, 1)); transform-origin: 50% 22%; transform-style: preserve-3d; margin-bottom: -70px; margin-top: -4px; }
#zoomHint { position: absolute; right: 10px; bottom: 6px; font-size: 11px; color: var(--sub); opacity: .7; pointer-events: none; }
/* 伤害统计侧边面板 */
#dmgToggle { position: absolute; left: 8px; top: 8px; z-index: 46; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); font-size: 16px; }
#dmgToggle:hover { border-color: var(--accent); }
#dmgPanel { display: none; position: absolute; left: 8px; top: 48px; z-index: 46; width: 200px; max-height: 78%; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent2); border-radius: 10px; padding: 8px; box-shadow: 0 4px 14px #0006; }
#dmgPanel.open { display: block; }
#dmgPanel h4 { font-size: 13px; color: var(--accent); margin-bottom: 4px; }
.dmg-sec-h { font-size: 12.5px; font-weight: bold; padding: 4px 5px; border-radius: 5px; background: var(--panel2); cursor: pointer; margin-top: 5px; display: flex; justify-content: space-between; }
.dmg-row { position: relative; font-size: 11.5px; padding: 2px 5px; margin-top: 2px; border-radius: 4px; overflow: hidden; display: flex; justify-content: space-between; }
.dmg-row .barfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; opacity: .3; }
.dmg-row span { position: relative; }
/* 段位 */
.pl-rank { font-size: 10px; color: var(--accent2); margin-left: 3px; white-space: nowrap; }
/* 排行榜（局外） */
.lad-row { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 8px; border-radius: 6px; }
.lad-row.me { background: var(--panel2); font-weight: bold; }
.lad-no { width: 24px; color: var(--sub); }
.lad-name { flex: 1; }
.lad-rank { color: var(--accent); }
.lad-score { width: 72px; text-align: right; }
/* 晋升动画 */
#promoFx { display: none; position: fixed; inset: 0; z-index: 600; background: radial-gradient(circle, #ffd70033, #000c); align-items: center; justify-content: center; }
#promoFx.show { display: flex; }
#promoInner { text-align: center; animation: promoPop 2.6s ease-out forwards; }
.promo-title { font-size: 30px; color: #ffd700; text-shadow: 0 0 20px #ffd700; }
.promo-rank { font-size: 52px; font-weight: bold; color: #fff8e8; text-shadow: 0 0 30px #ffd700, 0 4px 10px #000; margin-top: 10px; }
@keyframes promoPop { 0% { transform: scale(.3); opacity: 0; } 18% { transform: scale(1.15); opacity: 1; } 28% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
/* 六维 */
.aff-row { margin: 3px 0; font-size: 12px; }
.aff-row .aff { padding: 0 3px; border-radius: 3px; cursor: default; }
.aff-row .aff:hover { background: var(--panel2); }
.aff-row .aff.main { font-weight: bold; color: var(--accent); text-shadow: 0 0 6px #ffd70088; }
#board.tilt .cell { box-shadow: 0 3px 0 #00000022; }
#board.tilt .unit { transform: translateZ(14px) rotateX(-38deg); transform-origin: 50% 88%; }
#board.tilt .unit .portrait { box-shadow: 0 10px 10px -6px #00000066; }
#board.tilt .float-txt { animation-name: floatUpTilt; }
@keyframes floatUpTilt { 0% { transform: translateZ(20px) rotateX(-38deg) translateY(0); opacity: 1; } 100% { transform: translateZ(20px) rotateX(-38deg) translateY(-36px); opacity: 0; } }
/* 战斗入场 */
#boardWrap.fly-in { animation: flyIn 1.6s ease-out; }
@keyframes flyIn { 0% { transform: translateY(130px) scale(1.22); opacity: .35; } 55% { transform: translateY(-14px) scale(.99); opacity: 1; } 100% { transform: none; } }
.unit.spawn-pop { animation: spawnPop .45s ease-out; }
#board.tilt .unit.spawn-pop { animation: spawnPopTilt .45s ease-out; }
@keyframes spawnPop { 0% { opacity: 0; transform: scale(.2) translateY(-26px); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes spawnPopTilt { 0% { opacity: 0; transform: translateZ(14px) rotateX(-38deg) scale(.2) translateY(-26px); } 70% { transform: translateZ(14px) rotateX(-38deg) scale(1.12); } 100% { opacity: 1; transform: translateZ(14px) rotateX(-38deg); } }
/* 倒计时大数字 & 入场横幅 */
#countNum { position: absolute; left: 50%; top: 36%; transform: translateX(-50%); z-index: 300; font-size: 84px; font-weight: bold; color: var(--accent); text-shadow: 0 3px 14px #000a; pointer-events: none; display: none; }
#countNum.tick { display: block; animation: countFade .9s ease-out forwards; }
@keyframes countFade { 0% { opacity: 1; transform: translateX(-50%) scale(1.5); } 30% { transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(.9); } }
#introBanner { position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: #00000042; border-radius: 10px; pointer-events: none; }
#introBanner.show { display: flex; animation: introFade 1.8s forwards; }
#introBanner .it-main { font-size: 34px; font-weight: bold; color: #fff8e8; text-shadow: 0 2px 10px #000; }
#introBanner .it-sub { font-size: 16px; color: #ffd54f; text-shadow: 0 1px 6px #000; }
@keyframes introFade { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.cell { position: absolute; clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%); background: var(--panel2); opacity: .55; transition: background .15s; }
.cell.mine { opacity: .9; background-color: var(--panel2); background-image: linear-gradient(#b08d3f24, #b08d3f24); }
.cell.foe { opacity: .55; background-color: var(--panel2); background-image: linear-gradient(#a5453018, #a5453018); }
.cell.can-place { background: #8a6d2f55; opacity: 1; }
.cell.drop-ok { background: var(--accent2); opacity: 1; }
.cell.star-flash { background: #7b1fa2; opacity: 1; }

/* 单位 */
.unit { position: absolute; display: flex; flex-direction: column; align-items: center; transition: left .25s linear, top .25s linear; z-index: 5; pointer-events: auto; }
/* 跨浏览器拖拽：禁止文字选中与原生图片拖拽，指针手势不被滚动/缩放抢走（Firefox/Safari 必需） */
.unit, .bench-slot, .shop-card, .item-chip, #board, #benchRow, #itemRow, #shopBar { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; touch-action: none; }
.unit img, .shop-card img, .dex-card img, #dragGhost img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.unit.dashing { transition: left .12s ease, top .12s ease; }
.unit .portrait { width: 52px; height: 52px; clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%); display: flex; align-items: center; justify-content: center; font-size: 24px; border: none; position: relative; }
.unit .portrait .pt-img { width: 46px; height: 46px; pointer-events: none; }
.unit .portrait .pt-img.photo { width: 52px; height: 52px; object-fit: cover; }
.shop-card .sc-art { position: absolute; right: 2px; bottom: 16px; width: 62px; height: 62px; opacity: .92; pointer-events: none; }
.shop-card .sc-art.photo { border-radius: 8px; object-fit: cover; }
.dex-img.photo { border-radius: 8px; object-fit: cover; }
.unit .ring { position: absolute; inset: 0; clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%); }
.unit .stars { font-size: 9px; color: var(--gold); line-height: 1; height: 10px; letter-spacing: -1px; }
.unit .uname { font-size: 10px; line-height: 1.1; max-width: 64px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit .bars { width: 50px; height: 5px; background: #0006; border-radius: 3px 3px 0 0; overflow: hidden; margin-top: 1px; display: flex; }
.unit .bars .hpfill { height: 100%; background: var(--hpbar); transition: width .15s; }
.unit .bars.enemy .hpfill { background: #ef5350; }
.unit .bars .shfill { height: 100%; background: #ffffff; transition: width .15s; }
.unit .mbar { width: 50px; height: 4px; background: #0006; border-radius: 0 0 3px 3px; overflow: hidden; }
.unit .mbar .mfill { height: 100%; background: var(--manabar); transition: width .15s; }
.unit .mbar.broken .mfill { background: #ffffff; }
.tt-bar .shseg { background: #ffffffcc; }
.tt-bar.mp.broken > div { background: #ffffff; }
.unit .items-dots { display: flex; gap: 1px; height: 6px; margin-top: 1px; }
.unit .items-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); border: 1px solid #0005; }
.unit.dead { opacity: 0; transition: opacity .5s; }
.unit.lunge .portrait { animation: lunge .18s; }
@keyframes lunge { 50% { transform: scale(1.15); } }
.unit.casting .portrait { box-shadow: 0 0 14px 4px var(--accent2); }
.unit.untargetable { opacity: .35; }
.unit.dragging { opacity: .5; }

/* 飘字 */
.float-txt { position: absolute; z-index: 20; font-weight: bold; font-size: 14px; pointer-events: none; animation: floatUp 1s forwards; text-shadow: 0 1px 2px #000a; }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-36px); opacity: 0; } }
.proj { position: absolute; z-index: 15; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; }

/* M4：状态头顶标记 / 施法爆发环 / 震屏 */
.st-marks { position: absolute; top: -15px; left: -10px; right: -10px; display: flex; justify-content: center; gap: 1px; font-size: 11px; line-height: 1; z-index: 6; pointer-events: none; }
.st-mark { animation: markPop .25s ease; filter: drop-shadow(0 1px 2px #0009); }
@keyframes markPop { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cast-burst { position: absolute; z-index: 14; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid; border-radius: 50%; pointer-events: none; animation: burstOut .6s ease-out forwards; }
@keyframes burstOut { 0% { transform: scale(.35); opacity: .95; } 100% { transform: scale(calc(3.4 * var(--fxs, 1))); opacity: 0; } }
.fx-beam { position: absolute; z-index: 13; height: 8px; margin-top: -4px; border-radius: 4px; transform-origin: 0 50%; pointer-events: none; animation: beamFade .5s ease-out forwards; }
@keyframes beamFade { 0% { opacity: 1; } 100% { opacity: 0; } }
.unit.fx-shield .portrait { box-shadow: 0 0 0 3px #eceff1cc, 0 0 18px 6px #b0bec588; transition: box-shadow .2s; }
.unit.fx-heal .portrait { box-shadow: 0 0 0 3px #81c784cc, 0 0 18px 6px #66bb6a88; transition: box-shadow .2s; }
#boardWrap.shake { animation: shakeK .25s; }
@keyframes shakeK { 0%, 100% { translate: 0 0; } 25% { translate: 3px -2px; } 50% { translate: -3px 2px; } 75% { translate: 2px 1px; } }

/* 备战席 & 物品 */
#benchRow { display: flex; gap: 6px; margin-top: 8px; }
.bench-slot { width: 62px; height: 76px; background: var(--panel2); border: 1px dashed var(--border); border-radius: 8px; position: relative; }
.bench-slot.drop-ok { border-color: var(--accent); background: var(--accent2); }
.bench-slot .unit { position: static; }
#itemRow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; min-height: 34px; }
.item-chip { padding: 4px 8px; background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; cursor: pointer; user-select: none; }
.item-chip.combined { border-color: var(--gold); color: var(--accent); }
.item-chip.selected { outline: 2px solid var(--accent); }
.item-chip.light { border: 2px solid var(--gold); background: linear-gradient(160deg, #ffd70022, transparent), var(--panel2); box-shadow: 0 0 6px #ffd70055; color: var(--accent); }
.item-chip.consumable { border-style: dashed; border-color: var(--accent2); }
.eq-slot.gold { border: 2px solid var(--gold); box-shadow: 0 0 6px #ffd70066; }
/* 共享选秀 */
#carModal { display: none; position: fixed; inset: 0; z-index: 250; background: #000a; align-items: center; justify-content: center; }
#carBox { background: var(--panel); border: 2px solid var(--accent); border-radius: 14px; padding: 16px 20px; max-width: 730px; }
#carBox h3 { color: var(--accent); margin-bottom: 6px; }
#carSeats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.car-seat { font-size: 11.5px; padding: 2px 7px; border-radius: 10px; background: var(--panel2); color: var(--sub); border: 1px solid var(--border); }
.car-seat.now { background: var(--accent2); color: #fff8e8; border-color: var(--accent); font-weight: bold; }
.car-seat.done { opacity: .55; }
.car-seat.mine { outline: 2px solid var(--accent); }
/* 环形选秀现场 */
#carArena { position: relative; margin: 6px auto 0; background: radial-gradient(circle at 50% 46%, var(--panel2), transparent 72%); border-radius: 14px; overflow: hidden; user-select: none; }
#carFence { position: absolute; transform: translate(-50%, -50%); border: 2px dashed var(--border); border-radius: 50%; pointer-events: none; }
#carArena.my-turn #carFence { border-color: var(--accent); box-shadow: 0 0 18px #ffd70044 inset; }
#carCenter { position: absolute; transform: translate(-50%, -50%); text-align: center; font-size: 20px; color: var(--sub); pointer-events: none; }
#carCenter div { font-size: 34px; font-weight: bold; color: var(--accent); }
.car-offer { position: absolute; transform: translate(-50%, -50%); width: 128px; border: 2px solid var(--c1); border-radius: 8px; background: var(--panel); padding: 6px 7px; font-size: 12.5px; z-index: 3; }
.car-offer.pickable { cursor: pointer; }
.car-offer.pickable:hover { filter: brightness(1.12); outline: 2px solid var(--accent); }
.car-offer.taken { opacity: .4; }
.car-taker { font-size: 11px; color: var(--accent); font-weight: bold; min-height: 0; }
.car-pen { position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 54px; height: 54px; border: 2px dashed var(--border); border-radius: 50%; background: var(--panel2); opacity: .8; pointer-events: none; }
.car-pen.now { border-color: var(--accent); box-shadow: 0 0 12px #ffd70055; opacity: 1; }
.car-sprite { position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; text-align: center; transition: left .07s linear, top .07s linear; }
.car-sprite i { display: block; width: 22px; height: 22px; margin: 0 auto; border-radius: 50% 50% 50% 8px; background: var(--pc, var(--accent)); border: 2px solid #fff8; box-shadow: 0 2px 6px #0007; }
.car-sprite span { display: block; font-size: 10px; color: var(--text); text-shadow: 0 1px 2px var(--panel); white-space: nowrap; margin-top: 1px; }
.car-sprite.mine i { outline: 2px solid var(--accent); animation: spriteBob 1.2s ease-in-out infinite; }
@keyframes spriteBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* 新手指引 */
#tutModal { display: none; position: fixed; inset: 0; z-index: 400; background: #000a; align-items: center; justify-content: center; }
#tutBox { background: var(--panel); border: 2px solid var(--accent); border-radius: 14px; padding: 24px; max-width: 460px; }
#tutBox h3 { color: var(--accent); margin-bottom: 10px; }
#tutBox div { font-size: 14px; line-height: 1.8; }

/* 商店 */
#shopBar { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
#shopBtns { display: flex; flex-direction: column; gap: 6px; }
#shopBtns button { padding: 6px 10px; font-size: 13px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
#shopBtns button:hover { border-color: var(--accent); }
.shop-card { flex: 1; max-width: 150px; border-radius: 8px; border: 2px solid var(--c1); background: var(--panel2); padding: 6px; cursor: pointer; font-size: 12px; position: relative; min-height: 84px; }
.shop-card:hover { filter: brightness(1.1); }
.shop-card.empty { opacity: .25; cursor: default; }
/* 差一张升星：白色边框向外扩散特效 */
.shop-card.upgrade { overflow: visible; }
.shop-card.upgrade::after { content: ''; position: absolute; inset: -3px; border: 2px solid #ffffff; border-radius: 10px; pointer-events: none; animation: upgradeRipple 1.3s ease-out infinite; }
.shop-card.upgrade::before { content: ''; position: absolute; inset: -1px; border: 1.5px solid #ffffffcc; border-radius: 9px; pointer-events: none; }
@keyframes upgradeRipple { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
/* 升级特效 */
#xpBtn.level-flash { animation: levelFlash 1s ease-out; }
@keyframes levelFlash { 0% { box-shadow: 0 0 0 0 #ffd700cc; background: var(--gold); } 100% { box-shadow: 0 0 22px 14px #ffd70000; } }
#boardWrap.level-glow { animation: levelGlow 1.1s ease-out; }
@keyframes levelGlow { 0% { box-shadow: inset 0 0 60px 10px #ffd70066; } 100% { box-shadow: inset 0 0 0 0 #ffd70000; } }
.shop-card .sc-name { font-weight: bold; font-size: 13px; }
.shop-card .sc-traits { color: var(--sub); margin-top: 2px; line-height: 1.4; }
.shop-card .sc-cost { position: absolute; right: 6px; bottom: 4px; color: var(--gold); font-weight: bold; }
/* 出售覆盖层：拖起棋子时覆盖商店卡区 */
#sellOverlay { display: none; position: absolute; inset: 0; left: 118px; z-index: 30; align-items: center; justify-content: center; border: 2px dashed #ef5350; border-radius: 8px; color: #ef5350; font-size: 17px; font-weight: bold; background: var(--panel); }
#sellOverlay.active { display: flex; }
#sellOverlay.drop-ok { background: #ef535033; }
#oddsBar { font-size: 12.5px; padding: 2px 4px 8px; color: var(--sub); }
#goldBig { text-align: center; font-size: 16px; padding: 4px; background: var(--panel2); border: 1px solid var(--gold); border-radius: 6px; cursor: help; }
#goldBig b { color: var(--gold); font-size: 18px; }

/* 羁绊面板 */
.trait-row { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px; border-radius: 5px; opacity: .65; }
.trait-row .tbadge { width: 20px; height: 20px; border-radius: 4px; background: #0004; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.trait-row.active { background: var(--panel2); font-weight: bold; opacity: 1; }
.trait-row .tcount { margin-left: auto; color: var(--sub); font-size: 11px; }
.trait-row.tier-bronze .tbadge { background: linear-gradient(160deg, #cd7f32, #8a5a20); }
.trait-row.tier-silver .tbadge { background: linear-gradient(160deg, #d8d8d8, #8a8a8a); color: #333; }
.trait-row.tier-gold .tbadge { background: linear-gradient(160deg, #ffd700, #b8860b); color: #4a3000; }
.trait-row.tier-prisma .tbadge { background: linear-gradient(135deg, #ff5f6d, #ffc371, #47e891, #4facfe, #b06ab3); color: #fff; }
.trait-row.tier-bronze { box-shadow: inset 2px 0 0 #cd7f32; }
.trait-row.tier-silver { box-shadow: inset 2px 0 0 #c0c0c0; }
.trait-row.tier-gold { box-shadow: inset 2px 0 0 #ffd700; }
.trait-row.tier-prisma { box-shadow: inset 2px 0 0 #b06ab3; }
.trait-row { display: block; }
.trait-head { display: flex; align-items: center; gap: 6px; }
.trait-head .tcount { margin-left: auto; }
.trait-desc { font-size: 11px; color: var(--sub); font-weight: normal; line-height: 1.5; margin-top: 2px; padding-left: 26px; }
.trait-desc b { color: var(--accent); }
.tt-hl { color: var(--accent); font-size: 1.1em; text-shadow: 0 0 6px #ffd70066; }
.trait-row.trait-sub { margin-left: 14px; font-size: 12px; }
.trait-row.trait-sub .tbadge { width: 17px; height: 17px; font-size: 11px; }
/* 5费专属：边缘流光 */
.trait-row.trait-unique { position: relative; border: 1px solid transparent; background: linear-gradient(var(--panel2), var(--panel2)) padding-box, linear-gradient(110deg, #ffd700, #ff8a65, #b06ab3, #4facfe, #ffd700) border-box; background-size: 100% 100%, 300% 100%; animation: uniqueFlow 3s linear infinite; }
@keyframes uniqueFlow { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }
.trait-row.trait-unique .tbadge { background: linear-gradient(135deg, #ffd700, #b06ab3); color: #fff; }
/* 面板装备槽 */
.eq-row { display: flex; gap: 5px; margin-top: 5px; }
.eq-slot { width: 30px; height: 30px; border: 1px solid var(--gold); border-radius: 6px; background: var(--panel2); display: flex; align-items: center; justify-content: center; font-size: 13px; gap: 1px; cursor: default; }

/* game-icons.net 图标：mask 上色，跟随文字颜色/主题（mask-image 按 key 在下方定义，相对本 css 文件解析） */
/* 用 mask 长写属性（不用 mask 简写）：Firefox/Safari 对简写的重置行为不一致 */
.gi { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.16em; background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.eq-slot .gi { width: 14px; height: 14px; }
.item-chip.light .gi, .eq-slot.gold .gi { background: var(--gold); }
.gi.coin { background: var(--gold); }
.utility-btn .gi, #startBtn .gi, #speedBtn .gi, #skipBtn .gi, .big-btn .gi { vertical-align: -0.14em; }
.gi-ad1 { -webkit-mask-image: url(../assets/icons/ad1.svg); mask-image: url(../assets/icons/ad1.svg); }
.gi-ad2 { -webkit-mask-image: url(../assets/icons/ad2.svg); mask-image: url(../assets/icons/ad2.svg); }
.gi-as1 { -webkit-mask-image: url(../assets/icons/as1.svg); mask-image: url(../assets/icons/as1.svg); }
.gi-as2 { -webkit-mask-image: url(../assets/icons/as2.svg); mask-image: url(../assets/icons/as2.svg); }
.gi-ap1 { -webkit-mask-image: url(../assets/icons/ap1.svg); mask-image: url(../assets/icons/ap1.svg); }
.gi-ap2 { -webkit-mask-image: url(../assets/icons/ap2.svg); mask-image: url(../assets/icons/ap2.svg); }
.gi-m1 { -webkit-mask-image: url(../assets/icons/m1.svg); mask-image: url(../assets/icons/m1.svg); }
.gi-m2 { -webkit-mask-image: url(../assets/icons/m2.svg); mask-image: url(../assets/icons/m2.svg); }
.gi-a1 { -webkit-mask-image: url(../assets/icons/a1.svg); mask-image: url(../assets/icons/a1.svg); }
.gi-a2 { -webkit-mask-image: url(../assets/icons/a2.svg); mask-image: url(../assets/icons/a2.svg); }
.gi-mr1 { -webkit-mask-image: url(../assets/icons/mr1.svg); mask-image: url(../assets/icons/mr1.svg); }
.gi-mr2 { -webkit-mask-image: url(../assets/icons/mr2.svg); mask-image: url(../assets/icons/mr2.svg); }
.gi-hp1 { -webkit-mask-image: url(../assets/icons/hp1.svg); mask-image: url(../assets/icons/hp1.svg); }
.gi-hp2 { -webkit-mask-image: url(../assets/icons/hp2.svg); mask-image: url(../assets/icons/hp2.svg); }
.gi-hs1 { -webkit-mask-image: url(../assets/icons/hs1.svg); mask-image: url(../assets/icons/hs1.svg); }
.gi-hs2 { -webkit-mask-image: url(../assets/icons/hs2.svg); mask-image: url(../assets/icons/hs2.svg); }
.gi-csc1 { -webkit-mask-image: url(../assets/icons/csc1.svg); mask-image: url(../assets/icons/csc1.svg); }
.gi-csc2 { -webkit-mask-image: url(../assets/icons/csc2.svg); mask-image: url(../assets/icons/csc2.svg); }
.gi-al { -webkit-mask-image: url(../assets/icons/al.svg); mask-image: url(../assets/icons/al.svg); }
.gi-smallDup { -webkit-mask-image: url(../assets/icons/smallDup.svg); mask-image: url(../assets/icons/smallDup.svg); }
.gi-bigDup { -webkit-mask-image: url(../assets/icons/bigDup.svg); mask-image: url(../assets/icons/bigDup.svg); }
.gi-jobBook { -webkit-mask-image: url(../assets/icons/jobBook.svg); mask-image: url(../assets/icons/jobBook.svg); }
.gi-dice { -webkit-mask-image: url(../assets/icons/dice.svg); mask-image: url(../assets/icons/dice.svg); }
.gi-silmaril { -webkit-mask-image: url(../assets/icons/silmaril.svg); mask-image: url(../assets/icons/silmaril.svg); }
.gi-remover { -webkit-mask-image: url(../assets/icons/remover.svg); mask-image: url(../assets/icons/remover.svg); }
.gi-reforger { -webkit-mask-image: url(../assets/icons/reforger.svg); mask-image: url(../assets/icons/reforger.svg); }
.gi-upgrader { -webkit-mask-image: url(../assets/icons/upgrader.svg); mask-image: url(../assets/icons/upgrader.svg); }
.gi-light { -webkit-mask-image: url(../assets/icons/light.svg); mask-image: url(../assets/icons/light.svg); }
.eq-slot.empty { border-color: var(--border); opacity: .45; }
.eq-slot:hover:not(.empty) { border-width: 2px; }
/* 连胜火焰 */
.fire { color: #ff7043; font-size: 11px; margin-left: 3px; }
/* 观战弹窗 */
#scoutModal { display: none; position: fixed; inset: 0; z-index: 200; background: #0008; align-items: center; justify-content: center; }
#scoutBox { background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 18px; max-width: 90vw; }
#scoutBox h3 { color: var(--accent); margin-bottom: 6px; }
.scout-stats { font-size: 13px; color: var(--sub); margin-bottom: 10px; }
.scout-stats b { color: var(--text); }
.scout-board { position: relative; margin: 0 auto; }
.scout-cell { position: absolute; width: 42px; height: 40px; clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%); background: var(--panel2); opacity: .5; }
.scout-cell.mine { opacity: .9; }
.scout-unit { position: absolute; width: 42px; height: 40px; clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9px; color: #fff; text-shadow: 0 1px 2px #000; z-index: 2; }
.scout-unit span { font-size: 7px; color: var(--gold); }
.scout-bench { font-size: 12px; color: var(--sub); margin-top: 8px; max-width: 360px; }

/* 日志 */
#logBox { max-height: 200px; overflow-y: auto; font-size: 12px; color: var(--sub); line-height: 1.6; }

/* 提示框 */
#tooltip { position: fixed; z-index: 500; max-width: 300px; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; padding: 10px; font-size: 12.5px; line-height: 1.6; display: none; pointer-events: none; box-shadow: 0 4px 16px #0007; }
#tooltip h5 { font-size: 14px; color: var(--accent); }
#tooltip .tt-sub { color: var(--sub); }
#tooltip.pinned { pointer-events: auto; border-width: 2px; }
#tooltip2 { position: fixed; z-index: 510; max-width: 280px; background: var(--panel); border: 1px solid var(--accent2); border-radius: 8px; padding: 9px; font-size: 12.5px; line-height: 1.6; display: none; pointer-events: none; box-shadow: 0 4px 16px #0007; }
#tooltip2 h5 { font-size: 13px; color: var(--accent); }
#tooltip2 .tt-sub { color: var(--sub); }
.recipe-line { padding: 1px 3px; border-radius: 4px; cursor: default; }
.recipe-line:hover { background: var(--panel2); }
/* 面板内血/蓝条 */
.tt-bar { position: relative; height: 14px; background: #0005; border-radius: 4px; overflow: hidden; margin: 3px 0; display: flex; }
.tt-bar > div { height: 100%; flex-shrink: 0; }
.tt-bar.hp > div { background: var(--hpbar); }
.tt-bar.mp > div { background: var(--manabar); }
.tt-bar span { position: absolute; inset: 0; text-align: center; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; line-height: 14px; }
/* 实时属性网格 */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; margin: 4px 0; }
.stat-row { display: flex; justify-content: space-between; padding: 0 3px; border-radius: 3px; cursor: default; }
.stat-row:hover { background: var(--panel2); }
.stat-row .up { color: #4caf50; font-weight: bold; }
.stat-row .down { color: #ef5350; font-weight: bold; }
/* Shift 详情模式：公式灰斜注 */
.fx { color: var(--sub); font-style: italic; font-size: 11px; font-weight: normal; }
.tt-shift { margin-top: 5px; font-size: 10.5px; color: var(--sub); opacity: .75; border-top: 1px dashed var(--border); padding-top: 3px; }
/* 升星特效 */
.star-fx { position: absolute; left: 50%; top: 45%; width: 20px; height: 20px; margin: -10px; border: 3px solid var(--gold); border-radius: 50%; pointer-events: none; z-index: 40; animation: starRing .8s ease-out forwards; }
@keyframes starRing { 0% { transform: scale(.4); opacity: 1; box-shadow: 0 0 20px 6px #ffd700aa; } 100% { transform: scale(3.4); opacity: 0; box-shadow: 0 0 4px 1px #ffd70000; } }
.star-up .portrait { animation: starFlash .8s ease-out; }
@keyframes starFlash { 0% { filter: brightness(3) saturate(.2); } 100% { filter: none; } }
.star-txt { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); color: var(--gold); font-weight: bold; font-size: 15px; text-shadow: 0 1px 4px #000; pointer-events: none; z-index: 41; animation: floatUp 1.1s forwards; }

/* 战斗横幅 */
#banner { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); z-index: 50; font-size: 30px; font-weight: bold; color: var(--accent); text-shadow: 0 2px 8px #000a; display: none; pointer-events: none; }

/* 结束 */
#overScreen { display: none; max-width: 560px; margin: 60px auto; text-align: center; padding: 40px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
#overScreen h2 { font-size: 30px; color: var(--accent); margin-bottom: 14px; }
#dragGhost { position: fixed; z-index: 999; pointer-events: none; opacity: .85; display: none; }

/* 图鉴 */
#dexModal { display: none; position: fixed; inset: 0; z-index: 550; background: #000a; align-items: center; justify-content: center; }
#dexModal.show { display: flex; }
#dexBox { width: min(880px, 94vw); max-height: 88vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent2); border-radius: 12px; padding: 16px; box-shadow: 0 8px 30px #000a; }
#dexBox select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel2); color: var(--text); font-size: 13px; }
#dexGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dex-card { border: 2px solid var(--c1); border-radius: 10px; background: var(--panel2); padding: 8px; text-align: center; }
.dex-card.locked { opacity: .55; }
.dex-q { font-size: 40px; color: var(--sub); padding: 14px 0; }
.dex-img { width: 64px; height: 64px; }
.dex-name { font-weight: bold; font-size: 13.5px; margin-top: 2px; }
.dex-stars { margin: 3px 0; user-select: none; }
.dex-star { font-size: 16px; color: var(--border); cursor: pointer; padding: 0 2px; }
.dex-star.on { color: var(--gold); }
.dex-stats { font-size: 11px; color: var(--sub); line-height: 1.6; }

/* 术语表 */
#glossModal { display: none; position: fixed; inset: 0; z-index: 550; background: #000a; align-items: center; justify-content: center; }
#glossModal.show { display: flex; }
#glossBox { width: min(620px, 92vw); max-height: 84vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent2); border-radius: 12px; padding: 16px; box-shadow: 0 8px 30px #000a; }
.gloss-tabs { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.gloss-tab { padding: 5px 12px; font-size: 13px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel2); color: var(--text); }
.gloss-tab.active { background: var(--accent); color: #fff8e8; border-color: var(--accent); }
.gl-row { display: flex; gap: 8px; align-items: baseline; padding: 7px 4px; border-bottom: 1px dashed var(--border); font-size: 13.5px; line-height: 1.6; }
.gl-row:last-child { border-bottom: none; }
.gl-row .gl-ic { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.gl-row b { flex-shrink: 0; min-width: 58px; color: var(--accent); }
.gl-row span:last-child { color: var(--text); }

/* 成装组合图标（按散件类别对） */
.gi-cb-a-a { -webkit-mask-image: url(../assets/icons/cb-a-a.svg); mask-image: url(../assets/icons/cb-a-a.svg); }
.gi-cb-a-csc { -webkit-mask-image: url(../assets/icons/cb-a-csc.svg); mask-image: url(../assets/icons/cb-a-csc.svg); }
.gi-cb-a-hp { -webkit-mask-image: url(../assets/icons/cb-a-hp.svg); mask-image: url(../assets/icons/cb-a-hp.svg); }
.gi-cb-a-hs { -webkit-mask-image: url(../assets/icons/cb-a-hs.svg); mask-image: url(../assets/icons/cb-a-hs.svg); }
.gi-cb-a-mr { -webkit-mask-image: url(../assets/icons/cb-a-mr.svg); mask-image: url(../assets/icons/cb-a-mr.svg); }
.gi-cb-ad-a { -webkit-mask-image: url(../assets/icons/cb-ad-a.svg); mask-image: url(../assets/icons/cb-ad-a.svg); }
.gi-cb-ad-ad { -webkit-mask-image: url(../assets/icons/cb-ad-ad.svg); mask-image: url(../assets/icons/cb-ad-ad.svg); }
.gi-cb-ad-ap { -webkit-mask-image: url(../assets/icons/cb-ad-ap.svg); mask-image: url(../assets/icons/cb-ad-ap.svg); }
.gi-cb-ad-as { -webkit-mask-image: url(../assets/icons/cb-ad-as.svg); mask-image: url(../assets/icons/cb-ad-as.svg); }
.gi-cb-ad-csc { -webkit-mask-image: url(../assets/icons/cb-ad-csc.svg); mask-image: url(../assets/icons/cb-ad-csc.svg); }
.gi-cb-ad-hp { -webkit-mask-image: url(../assets/icons/cb-ad-hp.svg); mask-image: url(../assets/icons/cb-ad-hp.svg); }
.gi-cb-ad-hs { -webkit-mask-image: url(../assets/icons/cb-ad-hs.svg); mask-image: url(../assets/icons/cb-ad-hs.svg); }
.gi-cb-ad-m { -webkit-mask-image: url(../assets/icons/cb-ad-m.svg); mask-image: url(../assets/icons/cb-ad-m.svg); }
.gi-cb-ad-mr { -webkit-mask-image: url(../assets/icons/cb-ad-mr.svg); mask-image: url(../assets/icons/cb-ad-mr.svg); }
.gi-cb-ap-a { -webkit-mask-image: url(../assets/icons/cb-ap-a.svg); mask-image: url(../assets/icons/cb-ap-a.svg); }
.gi-cb-ap-ap { -webkit-mask-image: url(../assets/icons/cb-ap-ap.svg); mask-image: url(../assets/icons/cb-ap-ap.svg); }
.gi-cb-ap-csc { -webkit-mask-image: url(../assets/icons/cb-ap-csc.svg); mask-image: url(../assets/icons/cb-ap-csc.svg); }
.gi-cb-ap-hp { -webkit-mask-image: url(../assets/icons/cb-ap-hp.svg); mask-image: url(../assets/icons/cb-ap-hp.svg); }
.gi-cb-ap-hs { -webkit-mask-image: url(../assets/icons/cb-ap-hs.svg); mask-image: url(../assets/icons/cb-ap-hs.svg); }
.gi-cb-ap-m { -webkit-mask-image: url(../assets/icons/cb-ap-m.svg); mask-image: url(../assets/icons/cb-ap-m.svg); }
.gi-cb-ap-mr { -webkit-mask-image: url(../assets/icons/cb-ap-mr.svg); mask-image: url(../assets/icons/cb-ap-mr.svg); }
.gi-cb-as-a { -webkit-mask-image: url(../assets/icons/cb-as-a.svg); mask-image: url(../assets/icons/cb-as-a.svg); }
.gi-cb-as-ap { -webkit-mask-image: url(../assets/icons/cb-as-ap.svg); mask-image: url(../assets/icons/cb-as-ap.svg); }
.gi-cb-as-as { -webkit-mask-image: url(../assets/icons/cb-as-as.svg); mask-image: url(../assets/icons/cb-as-as.svg); }
.gi-cb-as-csc { -webkit-mask-image: url(../assets/icons/cb-as-csc.svg); mask-image: url(../assets/icons/cb-as-csc.svg); }
.gi-cb-as-hp { -webkit-mask-image: url(../assets/icons/cb-as-hp.svg); mask-image: url(../assets/icons/cb-as-hp.svg); }
.gi-cb-as-hs { -webkit-mask-image: url(../assets/icons/cb-as-hs.svg); mask-image: url(../assets/icons/cb-as-hs.svg); }
.gi-cb-as-m { -webkit-mask-image: url(../assets/icons/cb-as-m.svg); mask-image: url(../assets/icons/cb-as-m.svg); }
.gi-cb-as-mr { -webkit-mask-image: url(../assets/icons/cb-as-mr.svg); mask-image: url(../assets/icons/cb-as-mr.svg); }
.gi-cb-csc-csc-4 { -webkit-mask-image: url(../assets/icons/cb-csc-csc-4.svg); mask-image: url(../assets/icons/cb-csc-csc-4.svg); }
.gi-cb-csc-csc { -webkit-mask-image: url(../assets/icons/cb-csc-csc.svg); mask-image: url(../assets/icons/cb-csc-csc.svg); }
.gi-cb-hp-csc { -webkit-mask-image: url(../assets/icons/cb-hp-csc.svg); mask-image: url(../assets/icons/cb-hp-csc.svg); }
.gi-cb-hp-hp { -webkit-mask-image: url(../assets/icons/cb-hp-hp.svg); mask-image: url(../assets/icons/cb-hp-hp.svg); }
.gi-cb-hp-hs { -webkit-mask-image: url(../assets/icons/cb-hp-hs.svg); mask-image: url(../assets/icons/cb-hp-hs.svg); }
.gi-cb-hs-csc { -webkit-mask-image: url(../assets/icons/cb-hs-csc.svg); mask-image: url(../assets/icons/cb-hs-csc.svg); }
.gi-cb-hs-hs { -webkit-mask-image: url(../assets/icons/cb-hs-hs.svg); mask-image: url(../assets/icons/cb-hs-hs.svg); }
.gi-cb-m-a { -webkit-mask-image: url(../assets/icons/cb-m-a.svg); mask-image: url(../assets/icons/cb-m-a.svg); }
.gi-cb-m-csc { -webkit-mask-image: url(../assets/icons/cb-m-csc.svg); mask-image: url(../assets/icons/cb-m-csc.svg); }
.gi-cb-m-hp { -webkit-mask-image: url(../assets/icons/cb-m-hp.svg); mask-image: url(../assets/icons/cb-m-hp.svg); }
.gi-cb-m-hs { -webkit-mask-image: url(../assets/icons/cb-m-hs.svg); mask-image: url(../assets/icons/cb-m-hs.svg); }
.gi-cb-m-m { -webkit-mask-image: url(../assets/icons/cb-m-m.svg); mask-image: url(../assets/icons/cb-m-m.svg); }
.gi-cb-m-mr { -webkit-mask-image: url(../assets/icons/cb-m-mr.svg); mask-image: url(../assets/icons/cb-m-mr.svg); }
.gi-cb-mr-csc { -webkit-mask-image: url(../assets/icons/cb-mr-csc.svg); mask-image: url(../assets/icons/cb-mr-csc.svg); }
.gi-cb-mr-hp { -webkit-mask-image: url(../assets/icons/cb-mr-hp.svg); mask-image: url(../assets/icons/cb-mr-hp.svg); }
.gi-cb-mr-hs { -webkit-mask-image: url(../assets/icons/cb-mr-hs.svg); mask-image: url(../assets/icons/cb-mr-hs.svg); }
.gi-cb-mr-mr { -webkit-mask-image: url(../assets/icons/cb-mr-mr.svg); mask-image: url(../assets/icons/cb-mr-mr.svg); }

/* UI 图标（替代 emoji，保证跨浏览器一致） */
.gi-ui-carousel { -webkit-mask-image: url(../assets/icons/ui-carousel.svg); mask-image: url(../assets/icons/ui-carousel.svg); }
.gi-ui-chart { -webkit-mask-image: url(../assets/icons/ui-chart.svg); mask-image: url(../assets/icons/ui-chart.svg); }
.gi-ui-coin { -webkit-mask-image: url(../assets/icons/ui-coin.svg); mask-image: url(../assets/icons/ui-coin.svg); }
.gi-ui-dex { -webkit-mask-image: url(../assets/icons/ui-dex.svg); mask-image: url(../assets/icons/ui-dex.svg); }
.gi-ui-dice { -webkit-mask-image: url(../assets/icons/ui-dice.svg); mask-image: url(../assets/icons/ui-dice.svg); }
.gi-ui-gloss { -webkit-mask-image: url(../assets/icons/ui-gloss.svg); mask-image: url(../assets/icons/ui-gloss.svg); }
.gi-ui-lock { -webkit-mask-image: url(../assets/icons/ui-lock.svg); mask-image: url(../assets/icons/ui-lock.svg); }
.gi-ui-pause { -webkit-mask-image: url(../assets/icons/ui-pause.svg); mask-image: url(../assets/icons/ui-pause.svg); }
.gi-ui-play { -webkit-mask-image: url(../assets/icons/ui-play.svg); mask-image: url(../assets/icons/ui-play.svg); }
.gi-ui-skip { -webkit-mask-image: url(../assets/icons/ui-skip.svg); mask-image: url(../assets/icons/ui-skip.svg); }
.gi-ui-swords { -webkit-mask-image: url(../assets/icons/ui-swords.svg); mask-image: url(../assets/icons/ui-swords.svg); }
.gi-ui-time { -webkit-mask-image: url(../assets/icons/ui-time.svg); mask-image: url(../assets/icons/ui-time.svg); }
.gi-ui-trophy { -webkit-mask-image: url(../assets/icons/ui-trophy.svg); mask-image: url(../assets/icons/ui-trophy.svg); }
.gi-ui-unlock { -webkit-mask-image: url(../assets/icons/ui-unlock.svg); mask-image: url(../assets/icons/ui-unlock.svg); }
.gi-ui-view { -webkit-mask-image: url(../assets/icons/ui-view.svg); mask-image: url(../assets/icons/ui-view.svg); }
.gi-ui-xp { -webkit-mask-image: url(../assets/icons/ui-xp.svg); mask-image: url(../assets/icons/ui-xp.svg); }