/* Compact RPG chrome: loaded after the legacy HUD so old runtime bindings stay intact. */
:root { --tg-ink:#07141c; --tg-panel:rgba(8,22,30,.94); --tg-brass:#c7a665; --tg-cyan:#74d6d0; --tg-line:rgba(199,166,101,.52); }
#hud { top:12px; left:12px; width:270px; min-height:92px; padding:6px; gap:7px; background:linear-gradient(115deg,rgba(5,17,25,.96),rgba(10,31,39,.9)); border:1px solid var(--tg-line); border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.4); }
#hud .hero-crest { width:64px; height:80px; flex:0 0 64px; }
#hero-portrait { position:relative; inset:auto; width:64px; height:80px; border:1px solid var(--tg-brass); border-radius:5px; background-size:cover; background-position:center top; box-shadow:none; }
#hud .hero-crest::before,#hud .hero-crest::after { display:none; }
#hud .hero-level { right:-3px; bottom:-4px; padding:2px 4px; font-size:9px; }
#hud .hero-readout { width:auto; min-width:0; flex:1; margin:0; }
#hud .brand { display:none; }
#hud .vitals { width:auto; gap:0; padding-top:0; }
#hud .barlabel,#hud .stamina-label,#hud .xp-label { margin:0; font-size:12px; line-height:11px; text-shadow:0 1px 1px #000; }
#hud .bar,#hud .bar.energy,#hud .bar.xp { height:6px; margin:0; border-radius:2px; border-width:1px; border-color:rgba(206,177,113,.42); transform:none; clip-path:none; }
#hud #match-timer-box { display:block; width:43px; min-width:43px; margin:0; padding:4px 2px; border:1px solid rgba(199,166,101,.48); clip-path:none; background:rgba(4,15,20,.72); box-shadow:none; }
#hud #match-timer-box::after,#hud #match-timer-box .hud-crystal { display:none; }
#hud #match-timer-box .eyebrow { display:block; font-size:7px; line-height:1; letter-spacing:.05em; }
#hud #match-timer { font-size:14px; line-height:1.15; }

#skillbar { left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:5px; padding:4px; min-height:0; background:rgba(5,16,22,.9); border:1px solid var(--tg-line); border-radius:7px; clip-path:none; }
#skillbar .belt-crystal, #skillbar .utility-slot { display:none; }
#skillbar .skill-slot { width:52px; height:48px; min-width:52px; padding:4px; border-radius:4px; }
#skillbar .skill-slot .hud-icon { width:20px; height:20px; }
#skillbar .skill-slot .skill-name { max-width:48px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#skillbar .skill-key { top:2px; left:3px; font-size:9px; }
.skill-change { align-self:stretch; padding:0 8px; border:1px solid rgba(116,214,208,.5); border-radius:4px; background:#102a31; color:#d4e8e4; font:600 11px/1.1 Georgia,serif; text-transform:uppercase; cursor:pointer; }

#inventory-stack { left:12px; bottom:78px; display:flex; width:auto; flex-direction:column; gap:6px; }
#inventory-stack .icon-window-toggle { position:relative; width:44px; height:44px; min-height:44px; padding:4px; display:grid; place-items:center; border:1px solid var(--tg-line); border-radius:7px; background:var(--tg-panel); color:var(--tg-brass); cursor:pointer; clip-path:none; }
.icon-window-toggle .hud-icon { width:24px; height:24px; }
.icon-window-toggle kbd { position:absolute; right:3px; bottom:2px; border:0; padding:0; background:transparent; color:#d4e8e4; font-size:9px; }
.icon-window-toggle .talent-badge { position:absolute; top:-5px; right:-5px; min-width:15px; padding:1px 3px; border-radius:9px; background:#b54a3f; color:#fff; font-size:9px; }
#bag-panel, #build-panel, #rpg-buttons { display:none!important; }

#scoreboard { display:block!important; top:12px; right:12px; width:180px; padding:0; border-radius:6px; overflow:hidden; background:rgba(5,16,22,.88); border:1px solid var(--tg-line); }
#scoreboard .board-header { display:flex; width:100%; justify-content:space-between; align-items:center; margin:0; padding:7px 8px; border:0; border-bottom:1px solid rgba(199,166,101,.35); background:rgba(18,47,54,.84); color:#e5cf98; cursor:pointer; font:700 11px Georgia,serif; letter-spacing:.08em; }
#scoreboard .board-header:after { content:'TAB'; color:var(--tg-cyan); font:700 9px/1 ui-monospace,monospace; }
#scoreboard-rows > * { min-height:24px; font-size:12px; }
#scoreboard-rows > :nth-child(n+4) { display:none; }

#window-backdrop { position:fixed; inset:0; z-index:49; background:rgba(1,8,12,.72); backdrop-filter:blur(2px); }
#window-backdrop[hidden] { display:none; }
.rpg-panel,#sheet-panel,#talent-panel,#score-panel { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:50; width:min(880px,calc(100vw - 32px)); max-height:calc(100vh - 42px); overflow:auto; padding:24px; border:1px solid var(--tg-line); border-radius:9px; background:linear-gradient(135deg,#0c2029,#08151d 72%); box-shadow:0 24px 80px rgba(0,0,0,.58); color:#e6ebe6; }
#sheet-panel { width:min(820px,calc(100vw - 32px)); } #talent-panel { width:min(880px,calc(100vw - 32px)); } #score-panel { width:min(620px,calc(100vw - 32px)); }
.rpg-panel.open,#sheet-panel.open,#talent-panel.open,#score-panel.open { display:block; }
.rpg-panel .rpg-close { position:absolute; right:12px; top:11px; width:30px; height:30px; border:1px solid rgba(199,166,101,.5); border-radius:4px; background:#10262d; color:#e6d3a4; cursor:pointer; }
.sheet-header,.talent-header { display:flex; align-items:start; justify-content:space-between; gap:14px; margin:0 36px 16px 0; padding:0 0 12px; border-bottom:1px solid rgba(199,166,101,.35); }
.window-kicker { color:var(--tg-cyan); font-size:10px; font-weight:700; letter-spacing:.13em; }
.sheet-header h2,.talent-header h2 { margin:3px 0 0; color:#f0dcaa; font:600 25px/1 Georgia,serif; }
.talent-reset { padding:7px 9px; border:1px solid rgba(199,166,101,.5); border-radius:4px; background:#1d3638; color:#e6d3a4; font-size:11px; cursor:pointer; }
.match-warning { margin:0 0 14px; color:#a9c7c4; font-size:12px; }

/* Runtime renders this as .character-layout > .paperdoll + .character-stats. */
.character-layout { display:grid; grid-template-columns:380px minmax(0,1fr); gap:22px; align-items:start; }
.paperdoll { position:relative; min-height:470px; background:url('hud-art/body.png'), radial-gradient(ellipse at center,rgba(70,150,150,.24),transparent 65%); background-position:center bottom; background-repeat:no-repeat; background-size:contain; border:1px solid rgba(199,166,101,.25); }
.gear-slot { position:absolute; width:110px; min-height:52px; display:grid; grid-template-columns:21px 1fr; column-gap:5px; align-items:center; padding:5px; border:1px solid rgba(199,166,101,.42); border-radius:4px; background:rgba(5,17,24,.88); color:#e6ebe6; text-align:left; cursor:pointer; }
.gear-slot .hud-icon { grid-row:span 2; width:19px; height:19px; }.gear-slot strong { font-size:12px; color:#e8d09a; }.gear-slot small { font-size:11px; color:#a8c9c4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gear-slot[data-gear-slot=head],.gear-slot[data-gear-slot=torso],.gear-slot[data-gear-slot=pants] { left:5px; }.gear-slot[data-gear-slot=boots],.gear-slot[data-gear-slot=weapon],.gear-slot[data-gear-slot=offhand] { right:5px; }
.gear-slot[data-gear-slot=head],.gear-slot[data-gear-slot=boots] { top:38px; }.gear-slot[data-gear-slot=torso],.gear-slot[data-gear-slot=weapon] { top:171px; }.gear-slot[data-gear-slot=pants],.gear-slot[data-gear-slot=offhand] { top:302px; }
.character-stats { min-width:0; }.sheet-grid { display:grid; grid-template-columns:1fr; gap:7px; }.sheet-grid > * { display:flex; justify-content:space-between; gap:8px; padding:8px; border-bottom:1px solid rgba(199,166,101,.22); font-size:12px; }.sheet-grid small { display:block; max-width:280px; margin-top:3px; color:#a8c9c4; font-size:12px; line-height:1.25; }.sheet-grid strong { color:#e9d398; }.gear-detail { margin-top:14px; padding:10px; border:1px solid rgba(199,166,101,.3); background:rgba(5,17,24,.68); font-size:12px; }.gear-detail #item-tooltip { position:static; z-index:auto; }
.sheet-inventory { margin-top:20px; padding-top:15px; border-top:1px solid rgba(199,166,101,.35); }.sheet-inventory h3 { margin:0 0 10px; color:#e9d398; font:600 17px Georgia,serif; }.sheet-inventory .panel-body { display:block!important; }

/* Runtime talent markup: tree tabs, visible branch tiers, then learned skill cards. */
.tree-tabs { display:flex; gap:6px; margin-bottom:14px; }.tree-tabs button { padding:7px 10px; border:1px solid rgba(199,166,101,.38); border-radius:4px; background:#0c1e26; color:#b9d4d0; font-size:11px; cursor:pointer; }.tree-tabs button[aria-selected=true],.tree-tabs button.active { background:#1e4c50; color:#f0dcaa; }
.talent-tree { position:relative; display:block; padding:4px 0; }.talent-tree[hidden] { display:none; }.talent-tier { position:relative; margin:13px 0; }.talent-tier + .talent-tier:before { content:""; position:absolute; top:-9px; left:16%; right:16%; border-top:1px solid rgba(116,214,208,.45); }.talent-tier-note { margin:0 0 6px; color:#a8c9c4; font-size:11px; }.talent-nodes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.talent-btn { min-height:83px; display:grid; grid-template-columns:25px 1fr; grid-template-rows:auto 1fr auto; column-gap:6px; padding:7px; border:1px solid rgba(199,166,101,.4); border-radius:4px; background:#10242c; color:#e8eee9; text-align:left; cursor:pointer; }.talent-btn .hud-icon { grid-row:span 2; width:23px; height:23px; }.talent-btn b { font-size:11px; color:#ecd69e; }.talent-btn .talent-desc { font-size:9px; line-height:1.25; color:#b4ceca; }.talent-btn i { grid-column:2; font-style:normal; color:var(--tg-cyan); font-size:9px; }
#skill-library { display:block; margin-top:18px; padding-top:15px; border-top:1px solid rgba(199,166,101,.35); }.loadout-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:9px 0; }.skill-library-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.learned-skill { display:grid; grid-template-columns:25px 1fr; gap:7px; padding:10px; border:1px solid rgba(199,166,101,.32); border-radius:4px; background:#0a1a22; }.learned-skill > button { grid-column:1 / -1; }.learned-skill h4 { margin:0 0 4px; font-size:12px; color:#ebd69d; }.learned-skill p { margin:0 0 5px; font-size:11px; color:#b4ceca; }.loadout-slot,.learned-skill [data-assign-slot] { padding:6px 7px; border:1px solid rgba(116,214,208,.5); border-radius:3px; background:#14343b; color:#d7ece8; font-size:10px; cursor:pointer; }
.score-panel { width:min(620px,calc(100vw - 32px)); }.score-panel #full-scoreboard > * { min-height:38px; }

@media (max-width:640px) { #hud { top:8px; left:8px; width:270px; } #scoreboard { top:108px; right:8px; width:132px; } #scoreboard-rows > * { font-size:11px; } #minimap-frame,#controls { display:none; } #inventory-stack { left:8px; bottom:70px; } #skillbar { bottom:8px; } .rpg-panel,#sheet-panel,#talent-panel,#score-panel { top:8px; left:8px; transform:none; width:calc(100vw - 16px); max-width:none; max-height:calc(100vh - 16px); padding:16px; border-radius:7px; } .character-layout { grid-template-columns:1fr; }.paperdoll { min-height:380px; }.sheet-grid,.skill-library-list { grid-template-columns:1fr; }.talent-nodes { gap:4px; }.talent-btn { min-height:92px; padding:5px; grid-template-columns:20px 1fr; }.talent-btn .talent-desc { font-size:8px; } }
@media (pointer:coarse) { #scoreboard { display:block!important; } }
@media (prefers-reduced-motion:reduce) { * { transition-duration:.01ms!important; animation-duration:.01ms!important; } }
/* Readable controls inside windows, independent of the deliberately small field HUD. */
.gear-copy { display:block; min-width:0; }
.gear-copy strong,.gear-copy small { display:block; white-space:normal; line-height:1.25; overflow-wrap:anywhere; }
.gear-slot { min-height:76px; }
.gear-detail .item-tooltip { position:static; max-width:none; box-shadow:none; border:0; padding:0 0 12px; }
#item-tooltip,.item-tooltip { z-index:60; }
#item-tooltip { width:min(330px,calc(100vw - 16px)); max-height:calc(100vh - 16px); overflow:auto; }
#item-tooltip .item-tooltip { box-sizing:border-box; width:100%; max-width:none; border-color:rgba(199,166,101,.7); background:linear-gradient(155deg,rgba(12,31,39,.98),rgba(5,16,23,.98)); box-shadow:0 14px 38px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04); font-size:12px; line-height:1.4; }
#item-tooltip .tooltip-meta { font-size:12px; }
.tooltip-weapon { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.tooltip-weapon span { display:grid; gap:1px; padding:5px 6px; border:1px solid rgba(116,214,208,.2); background:rgba(9,34,42,.72); color:#a8c9c4; font-size:12px; }
.tooltip-weapon b { color:#f0dcaa; font-size:12px; }
.tooltip-compare-label { color:#8fb8b4; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.tooltip-equipped { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:2px 0 4px; }
.tooltip-equipped small { color:#8fb8b4; font-size:12px; text-transform:uppercase; }
.item-tooltip .delta-row { display:flex; justify-content:space-between; gap:12px; font-variant-numeric:tabular-nums; }
.item-tooltip .delta-row b { flex:none; font-size:12px; }
.delta-flat { color:#a8c9c4; }
.tooltip-warning { margin-top:7px; padding:6px 7px; border-left:2px solid #ffb85c; background:rgba(146,76,25,.18); color:#f1c991; font-size:12px; line-height:1.35; }
.parchment .tooltip-weapon span { background:rgba(80,56,29,.07); border-color:rgba(90,70,40,.22); color:#705d44; }
.parchment .tooltip-weapon b { color:#3e3326; }
.parchment .tooltip-compare-label,.parchment .tooltip-equipped small { color:#705d44; }
.parchment .tooltip-warning { color:#70420e; background:rgba(174,104,28,.1); }
#loot-prompt .loot-label[role=button] { pointer-events:auto!important; cursor:help; touch-action:manipulation; }
@media (pointer:coarse) { #loot-prompt-label[role=button]::after { content:' · Tap to compare'; color:#8fd8d2; font-size:12px; white-space:nowrap; } }
.rpg-panel .rpg-close { width:44px; height:44px; }
.rpg-panel button { font-family:inherit; }
.window-note { font-size:12px; color:#a8c9c4; line-height:1.5; }
.character-identity { display:flex; align-items:baseline; gap:14px; margin:0 0 12px; }
.character-identity h2 { margin:0; font:600 24px Georgia,serif; color:#f0dcaa; }
.character-identity > span { font-size:12px; color:#a8c9c4; }
.character-stats h3,#skill-library h3 { margin:0 0 8px; font:600 19px Georgia,serif; color:#f0dcaa; }
.sheet-row > span { flex:1; min-width:0; }
.sheet-row > b { text-align:right; flex:0 0 86px; color:#f0dcaa; }
.tree-tabs button { display:flex; align-items:center; gap:7px; min-height:44px; font-size:13px; }
.tree-tabs .hud-icon { width:24px; height:24px; }
.tree-tabs small { font-size:11px; }
#talent-body .talent-header { align-items:center; margin-right:0; }
#talent-body .talent-header h3 { margin:0; font-size:16px; }
#reset-talents,.gear-detail button { min-height:44px; border:1px solid var(--tg-line); border-radius:4px; background:#17343b; color:#e8d7ad; padding:8px 12px; cursor:pointer; }
#reset-talents:disabled,.gear-detail button:disabled { opacity:.5; cursor:default; }
.talent-btn { grid-template-rows:auto 1fr auto; gap:6px; min-height:116px; }
.talent-btn b { font-size:13px; }
.talent-btn .talent-desc { grid-column:1 / -1; font-size:12px; line-height:1.4; }
.talent-btn i { grid-column:1 / -1; font-size:11px; }
.talent-btn.locked { opacity:.7; }
.talent-tree .tree-title { margin:0; font-size:18px; }
.loadout-slot { display:flex; align-items:center; gap:9px; min-height:60px; font-size:13px; text-align:left; }
.loadout-slot.selected { border-color:var(--tg-cyan); background:#20515a; }
.loadout-slot .hud-icon { width:32px; height:32px; }
.loadout-slot small { display:block; font-size:11px; margin-top:3px; color:#aecac7; }
.learned-skill .hud-icon { width:26px; height:26px; }
.learned-skill p { font-size:12px; line-height:1.4; }
.learned-skill h4 small,.learned-skill small { font-size:11px; }
.learned-skill button { min-height:44px; font-size:12px; }
.learned-skill.locked { opacity:.65; }
.learned-skill button:disabled { opacity:.65; cursor:default; }
.full-board-head,.full-board-row { display:grid; grid-template-columns:minmax(0,1fr) 64px 64px 64px; align-items:center; gap:10px; padding:12px 8px; border-bottom:1px solid var(--tg-line); font-size:14px; }
.full-board-head { color:#d2b67c; font-size:12px; }
.full-board-row.me { background:#18353e; color:#f0dcaa; }
.full-board-row span:first-child { overflow:hidden; text-overflow:ellipsis; }
.full-board-row span:not(:first-child),.full-board-head span:not(:first-child) { text-align:center; }
#scoreboard .board-portrait { width:18px; height:21px; margin-right:5px; }
#scoreboard .board-row { padding:3px 6px; min-height:27px; }
#scoreboard .board-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bag-badge[hidden] { display:none!important; }
.icon-window-toggle.attention { border-color:#efd189!important; box-shadow:0 0 15px #d6a84866; }
@media(max-width:640px) {
 .talent-nodes { grid-template-columns:1fr; }
 .talent-btn { min-height:90px; }
 .talent-btn .talent-desc { font-size:12px; }
 .tree-tabs { gap:4px; }
 .tree-tabs button { flex:1; padding:5px; font-size:12px; flex-wrap:wrap; justify-content:center; }
 .tree-tabs small { display:none; }
 .talent-header { gap:8px; flex-wrap:wrap; }
 .gear-slot { width:104px; }
 .sheet-header { flex-direction:column; gap:6px; }
 .full-board-head,.full-board-row { grid-template-columns:minmax(0,1fr) 38px 38px 38px; gap:4px; font-size:12px; }
}
@media (hover:none) and (pointer:coarse) {
 #skillbar { display:none; }
 #inventory-stack { bottom:174px; flex-direction:row; }
}
#hud .hero-readout { align-self:center; }
#hud .barlabel { line-height:14px; }
#playername-display { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:66px; }
#hptext,#stamina-text,#xp-text { white-space:nowrap; }
.sheet-grid { gap:2px; }
.sheet-row { padding:7px 0; }
.sheet-grid small { font-size:11px; }
#sheet-panel { width:min(850px,calc(100vw - 32px)); }
.sheet-header { justify-content:flex-start; align-items:baseline; gap:20px; }
.gear-detail { margin-top:8px; }
@media(max-width:640px) { #sheet-panel { width:calc(100vw - 16px); } }

/* Keep the close control reachable while browsing a long character or talent window. */
.rpg-panel .rpg-close { position:sticky; top:0; right:auto; float:right; margin-left:8px; z-index:2; }

#scoreboard .board-name { flex:1; padding-left:0; margin-right:5px; }
#scoreboard .board-portrait { flex-shrink:0; }
#scoreboard .board-score { flex-shrink:0; }
.gear-slot[data-gear-slot=offhand] { top:38px; }
.gear-slot[data-gear-slot=boots] { top:302px; }

@media(max-width:640px) {
 #prototype-notice { top:auto; bottom:8px; left:92px; right:auto; width:auto; max-width:105px; transform:none; padding:3px 5px; font-size:0; clip-path:none; border-radius:4px; }
 #net-badge { font-size:9px; }
 #inventory-stack { top:126px; bottom:auto; }
 .paperdoll { min-height:398px; }
}

/* ---- Simplified HUD (hero sheet, equip toast) ---- */
.hero-identity { display:flex; align-items:baseline; gap:12px; margin:0 0 10px; }
.hero-identity strong { font:600 20px/1 Georgia,serif; color:#f0dcaa; }
.hero-identity span { font-size:12px; color:#a8c9c4; }

.gear-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0 0 10px; }
.gear-tile { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-height:64px; padding:7px; border:1px solid var(--tg-line); border-radius:5px; background:rgba(5,17,24,.88); color:#e6ebe6; text-align:left; cursor:pointer; }
.gear-tile .hud-icon { width:28px; height:28px; }
.gear-tile small { font-size:10px; color:#a8c9c4; text-transform:uppercase; letter-spacing:.04em; }
.gear-tile strong { font-size:12px; color:#e8d09a; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.gear-tile.empty strong { color:#88a29e; }
.gear-tile.selected { border-color:var(--tg-cyan); box-shadow:0 0 0 1px var(--tg-cyan) inset; }
.gear-tile.blocked { opacity:.55; }
.gear-tile strong.blocked { color:#88a29e; font-style:italic; }

.stat-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0 0 6px; }
.stat-tile { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:1px solid rgba(199,166,101,.28); border-radius:5px; background:rgba(5,17,24,.68); }
.stat-tile small { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#a8c9c4; }
.stat-tile b { font:600 18px/1 Georgia,serif; color:#f0dcaa; }
.stat-details-toggle { display:block; margin:0 0 8px; padding:0; border:0; background:transparent; color:var(--tg-cyan); font-size:11px; cursor:pointer; min-height:28px; }
.stat-details { display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; margin:0 0 10px; padding:8px; border:1px solid rgba(199,166,101,.22); border-radius:5px; background:rgba(5,17,24,.5); font-size:12px; }
.stat-details dt { color:#a8c9c4; }
.stat-details dd { margin:0; text-align:right; color:#e8eee9; }

.bag-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.bag-tile { display:flex; flex-direction:column; gap:3px; padding:7px; border:1px solid var(--tg-line); border-radius:5px; background:rgba(5,17,24,.88); color:#e6ebe6; }
.bag-tile.empty { align-items:center; justify-content:center; color:#88a29e; min-height:64px; }
.bag-tile strong { font-size:12px; color:#e8d09a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bag-tile small { font-size:10px; color:#a8c9c4; }
.bag-tile .delta { font-size:11px; font-weight:700; }
.bag-tile .bag-tile-actions,.bag-tile button { display:flex; }
.bag-tile > button { min-height:32px; margin-top:2px; border:1px solid var(--tg-line); border-radius:4px; background:#17343b; color:#e8d7ad; font-size:11px; cursor:pointer; }
.bag-tile > button:disabled { opacity:.5; cursor:default; }
.bag-tile .discard { min-height:32px; min-width:32px; flex:0 0 32px; margin-left:4px; border:1px solid #9a5d59; border-radius:4px; background:rgba(166,52,54,.25); color:#ffb9b6; font-size:12px; cursor:pointer; }
.bag-tile > button[data-equip] { flex:1; }
@media(max-width:480px) { .bag-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.delta-up { color:#7ef29a; }
.delta-down { color:#ff7b7b; }
.delta-flat { color:#9fb8b5; }

.skill-row { display:flex; flex-direction:column; gap:7px; margin:0 0 10px; }
.skill-row .skill-tile { display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 9px; border:1px solid var(--tg-line); border-radius:5px; background:rgba(5,17,24,.88); color:#e6ebe6; text-align:left; cursor:pointer; }
.skill-row .skill-tile.selected { border-color:var(--tg-cyan); background:#123e46; }
.skill-row .skill-tile kbd { padding:1px 5px; border:1px solid rgba(185,146,85,.6); border-radius:2px; background:rgba(2,13,21,.6); color:var(--tg-cyan); font:700 10px Manrope,sans-serif; }
.skill-row .skill-tile .hud-icon { width:22px; height:22px; }
.skill-row .skill-tile strong { font-size:12px; color:#e8d09a; }
.skill-choices { display:flex; flex-wrap:wrap; gap:6px; }
.skill-choices button { min-height:36px; padding:5px 10px; border:1px solid rgba(116,214,208,.5); border-radius:14px; background:#14343b; color:#d7ece8; font-size:11px; cursor:pointer; }
.skill-choices button:disabled { opacity:.55; cursor:default; }

#equip-toast { position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:55; display:flex; flex-direction:column; gap:6px; width:min(320px,calc(100vw - 24px)); padding:10px 12px; border:1px solid var(--tg-brass); border-radius:7px; background:linear-gradient(135deg,#0c2029,#08151d 72%); box-shadow:0 14px 34px rgba(0,0,0,.5); color:#e6ebe6; animation:equip-toast-in .18s ease-out; }
#equip-toast[hidden] { display:none; }
#equip-toast strong { font-size:13px; color:#f0dcaa; }
#equip-toast small { font-size:11px; color:#a8c9c4; }
.equip-toast-actions { display:flex; gap:8px; margin-top:2px; }
.equip-toast-actions button { flex:1; min-height:44px; border:1px solid var(--tg-line); border-radius:4px; background:#17343b; color:#e8d7ad; font-size:12px; cursor:pointer; }
.equip-toast-actions button:disabled { opacity:.5; cursor:default; }
.equip-toast-actions button[data-toast-keep] { background:transparent; }
@keyframes equip-toast-in { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }
@media(max-width:640px) { #equip-toast { bottom:150px; } }

.offer-card.perk { border-color:rgba(116,214,208,.65); box-shadow:0 0 0 1px rgba(116,214,208,.3) inset; }
.offer-card.perk .offer-card-badge,.offer-card.perk .offer-card-title:before { color:var(--tg-cyan); }
.offer-card-badge.perk-badge { display:inline-block; padding:1px 6px; border:1px solid rgba(116,214,208,.6); border-radius:9px; background:rgba(116,214,208,.12); color:var(--tg-cyan); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }

@media(max-width:720px) {
 #sheet-panel { top:auto; bottom:0; left:0; right:0; transform:none; width:100vw; max-height:82vh; border-radius:12px 12px 0 0; }
}