/* ── Spiel: 3D-Ansicht mit HUD-Overlays ─────────────────────────────────── */
:root { --res-gold: #f0cf86; --res-iron: #9fb8d8; --res-wood: #7fbf7a; --side-w: clamp(240px, 21vw, 300px); }
.screen-game { background: #06050b; cursor: default; }
.gl-wrap { position: absolute; inset: 0; }
.game-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.6) 100%); }

/* Kopfleiste */
.hud-top { position: absolute; z-index: 6; top: 10px; left: 12px; right: 12px; height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.turnstrip { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.tchip { --pc: #fff; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--pc); background: rgba(10,8,18,.82); color: var(--pc); font: 700 15px var(--font-display); display: grid; place-items: center; padding: 0; transition: transform .2s var(--ease), box-shadow .2s; }
.tchip:hover { transform: scale(1.08); }
.tchip.active { background: var(--pc); color: #0a0812; transform: scale(1.16); box-shadow: 0 0 0 3px rgba(240,207,134,.7), 0 0 16px var(--pc); }
.tchip.me:not(.active) { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.tchip.gone { opacity: .35; }
.phase { display: flex; align-items: center; gap: 12px; padding: 8px 18px; border-radius: 14px; background: rgba(14,11,22,.88); border: 1px solid var(--line-2); backdrop-filter: blur(6px); white-space: nowrap; }
.phase.mine { border-color: var(--gold); box-shadow: var(--glow-gold); }
.phase .round { font: 700 12px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.phase .ptext { font: 700 17px var(--font-ui); }
.timer { font: 900 17px var(--font-display); min-width: 46px; text-align: right; color: var(--text-2); }
.timer.low { color: var(--bad); animation: pulse 1s infinite; }
.tools { justify-self: end; display: flex; gap: 6px; align-items: center; }
.hud-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(14,11,22,.82); color: var(--text-2); transition: background .15s, color .15s, border-color .15s; }
.hud-btn:hover { background: rgba(60,48,90,.9); color: var(--text); border-color: var(--gold); }
.hud-net { height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 11px; border: 1px solid var(--line); background: rgba(14,11,22,.7); font: 700 13px var(--font-ui); color: var(--text-3); white-space: nowrap; }
.ping-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); }

/* Seitenpanels */
.hud-side { position: absolute; z-index: 4; top: 74px; bottom: 12px; width: var(--side-w); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 2px 2px; pointer-events: none; }
.hud-side > * { pointer-events: auto; }
.hud-left { left: 12px; bottom: 254px; }
.hud-right { right: 12px; }
.card { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(30,26,46,.9), rgba(14,11,22,.92)); border: 1px solid var(--line-2); box-shadow: 0 10px 28px -14px #000; backdrop-filter: blur(5px); }
.card-h { display: flex; align-items: center; gap: 8px; font: 700 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.card-h .icon { width: 16px; height: 16px; color: var(--gold); }
.tiny { font: 500 13px/1.3 var(--font-ui); color: var(--text-3); }
.card p { margin: 0; }
.res-card { padding: 8px; }
.res-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.res { --rc: var(--gold); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 11px; background: rgba(8,6,14,.7); border: 1px solid var(--line); }
.res .icon { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--rc); }
.res b { font: 900 22px/1 var(--font-display); color: #fff; }
.res small { font: 700 10px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.res.bump b { animation: bumpNum .5s var(--ease); }
@keyframes bumpNum { 0% { transform: scale(1.5); color: var(--rc); } 100% { transform: none; } }

.inv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.slot { position: relative; height: 56px; display: grid; place-items: center; border-radius: 11px; border: 1px dashed var(--line-2); background: rgba(8,6,14,.6); color: var(--text-3); }
.slot .icon { width: 28px; height: 28px; }
.slot.item { border-style: solid; border-color: var(--gold-3); background: rgba(217,178,90,.08); color: var(--gold-2); }
.slot.item small { position: absolute; top: 3px; right: 6px; font: 800 12px var(--font-ui); color: #fff; }
.slot .dur { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.slot .dur u { display: block; height: 100%; background: linear-gradient(90deg, #e0576a, #f0cf86, #6fd39a); }
.slot.locked { opacity: .35; }

.hand { display: flex; flex-wrap: wrap; gap: 7px; }
.hcard { position: relative; width: calc(50% - 4px); min-height: 62px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 7px 9px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(8,6,14,.7); color: var(--text-2); text-align: left; transition: transform .15s var(--ease), border-color .15s, box-shadow .15s; }
.hcard .icon { width: 20px; height: 20px; }
.hcard .hn { font: 700 14px var(--font-ui); color: var(--text); line-height: 1.1; }
.hcard .hc { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--font-ui); color: var(--text-3); } .hcard .hc .icon { width: 12px; height: 12px; }
.hcard.event { border-color: rgba(143,120,232,.55); } .hcard.event .icon { color: var(--violet-2); }
.hcard.reaction { border-color: rgba(87,196,229,.5); } .hcard.reaction .icon { color: var(--cyan); }
.hcard.rache { border-color: rgba(224,90,110,.7); background: rgba(80,16,30,.35); } .hcard.rache .icon { color: var(--bad); }
.hcard.playable { box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(217,178,90,.35); background: rgba(217,178,90,.1); cursor: pointer; }
.hcard.playable:hover { transform: translateY(-2px); }
.hcard:not(.playable):not(.empty) { opacity: .62; }
.hcard.empty { min-height: 62px; border-style: dashed; background: transparent; opacity: .35; }
.hand-info { min-height: 34px; }
.q-text { font: 600 15px/1.3 var(--font-ui); color: var(--text); }
.q-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.reward { display: flex; align-items: center; gap: 5px; color: var(--gold-2); } .reward .icon { width: 14px; height: 14px; }
.goals { display: flex; flex-direction: column; gap: 6px; }
.goal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 9px; background: rgba(8,6,14,.6); border: 1px solid var(--line); }
.goal .gk .icon { width: 16px; height: 16px; color: var(--text-3); }
.goal.done { border-color: rgba(111,211,154,.5); } .goal.done .gk .icon { color: var(--good); }
.goal .gn { font: 700 14px var(--font-ui); }
.goal .gp { display: flex; align-items: center; gap: 6px; } .goal .gp i { display: block; width: 58px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; } .goal .gp u { display: block; height: 100%; }
.goal .gp em { font: 700 12px var(--font-ui); color: var(--text-3); font-style: normal; } .goal .gp .sec { color: var(--gold-2); font-size: 14px; }

/* Spieler & Ruf */
.prow { --pc: #888; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 11px; background: rgba(8,6,14,.62); border: 1px solid var(--line); border-left: 4px solid var(--pc); }
.prow.me { background: color-mix(in srgb, var(--pc) 9%, rgba(8,6,14,.7)); }
.prow.active { box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(217,178,90,.25); }
.prow.gone { opacity: .45; }
.pname { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 0; color: var(--text); font: 700 16px var(--font-ui); text-align: left; }
.pname .icon { width: 15px; height: 15px; color: var(--gold); } .pname em { font-size: 12px; color: var(--bad); }
.pball { width: 14px; height: 14px; border-radius: 50%; background: var(--pc); box-shadow: inset -3px -3px 0 rgba(0,0,0,.25); flex: none; display: inline-block; }
.pmeta { display: flex; flex-wrap: wrap; gap: 5px; }
.pmeta .pill { height: 22px; padding: 0 8px; font-size: 11px; }
.pbar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.09); overflow: hidden; } .pbar u { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); }
.prep { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.prep .pl { font: 700 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; height: 22px; padding: 0 9px; border-radius: 99px; font: 700 12px var(--font-ui); border: 1px solid; }
.chip i { font-style: normal; opacity: .75; }
.chip.good { color: #b9f2d1; border-color: rgba(111,211,154,.6); background: rgba(111,211,154,.12); }
.chip.mute { color: var(--text-2); border-color: var(--line-2); background: rgba(255,255,255,.04); }
.chip.warn { color: #ffe0a3; border-color: rgba(240,182,77,.6); background: rgba(240,182,77,.12); }
.chip.bad { color: #ffc2ca; border-color: rgba(224,90,110,.7); background: rgba(224,90,110,.14); }
.chip.nem { color: #fff; border-color: #e0576a; background: rgba(160,30,55,.55); }
.trade-btn { align-self: flex-start; }
.mq { color: var(--gold-2); }
.legend .lv { display: flex; flex-direction: column; gap: 2px; padding: 3px 0; }
.legend small { color: var(--text-3); font-size: 12px; }

/* Minimap */
.minimap-wrap { position: absolute; z-index: 4; left: 12px; bottom: 12px; width: 232px; height: 232px; border-radius: 16px; border: 1px solid var(--line-3); background: radial-gradient(circle at 50% 50%, rgba(30,24,44,.9), rgba(8,6,14,.9)); box-shadow: 0 10px 30px -10px #000, inset 0 0 30px rgba(0,0,0,.6); overflow: hidden; }
.minimap-wrap canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }

/* Aktionsleiste */
.hud-bottom { position: absolute; z-index: 5; bottom: 14px; left: calc(var(--side-w) + 30px); right: calc(var(--side-w) + 30px); display: flex; justify-content: center; pointer-events: none; }
.hud-bottom > * { pointer-events: auto; }
.ab { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
.ab-info { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding: 8px 16px; border-radius: 14px; background: rgba(14,11,22,.9); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }
.ab-info .steps { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px; border-radius: 99px; background: rgba(111,211,154,.14); border: 1px solid rgba(111,211,154,.6); color: #c9f5dc; }
.ab-info .steps.none { background: rgba(255,255,255,.05); border-color: var(--line-2); color: var(--text-3); }
.ab-info .steps b { font: 900 20px var(--font-display); } .ab-info .steps small { font: 700 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.ab-info .here { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-ui); color: var(--gold-2); } .ab-info .here .icon { width: 16px; height: 16px; }
.ab-main { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 10px 14px; border-radius: 16px; background: rgba(14,11,22,.9); border: 1px solid var(--line-2); backdrop-filter: blur(6px); box-shadow: 0 14px 34px -14px #000; }
.ab-main.wait { padding: 12px 22px; }
.ab-text { font: 600 16px var(--font-ui); color: var(--text-2); }
.ab-key { color: var(--text-3); }
.ab .btn kbd { margin-left: 6px; }
.btn-sm .icon { width: 16px; height: 16px; }

/* Kampf */
.combat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 14px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(50,16,26,.94), rgba(16,10,20,.95)); border: 1px solid var(--bad); box-shadow: 0 0 30px rgba(224,90,110,.28), 0 14px 34px -14px #000; max-width: 100%; }
.cm { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.cm-name { display: flex; align-items: center; gap: 8px; font: 700 16px var(--font-ui); } .cm-name .icon { width: 18px; height: 18px; color: var(--bad); }
.hpbar { position: relative; height: 20px; border-radius: 10px; background: rgba(255,255,255,.1); overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
.hpbar u { display: block; height: 100%; background: linear-gradient(90deg, #a83248, #e0576a); transition: width .5s var(--ease); }
.hpbar.dur u { background: linear-gradient(90deg, #6a8aa8, #b8c8dc); }
.hpbar span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px var(--font-ui); text-shadow: 0 1px 2px #000; }
.cdie { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cnum { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(circle at 35% 30%, #f7edd0, #d3c5a0); color: #5a1420; font: 900 40px var(--font-display); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.5); }
.cnum.pop { animation: numPop .5s var(--ease); } .cnum.crit { background: radial-gradient(circle at 35% 30%, #fff6b8, #f0b64d); color: #7a1c10; box-shadow: 0 0 22px rgba(255,220,120,.8); }
@keyframes numPop { 0% { transform: scale(1.5) rotate(-8deg); } 100% { transform: none; } }
.cdie small { font: 600 11px var(--font-ui); color: var(--text-3); }
.cbtn { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 12px; }

/* Hinweis, Tooltip */
.mode-hint { position: absolute; z-index: 6; top: 74px; left: 50%; transform: translateX(-50%); padding: 9px 20px; border-radius: 99px; background: rgba(20,32,26,.94); border: 1px solid var(--good); color: #d8fff0; font: 700 16px var(--font-ui); letter-spacing: .02em; max-width: min(90vw, 760px); text-align: center; pointer-events: none; }
.node-tip { position: fixed; z-index: 30; min-width: 150px; max-width: 260px; padding: 8px 12px; border-radius: 10px; background: rgba(12,9,20,.95); border: 1px solid var(--line-3); pointer-events: none; box-shadow: 0 10px 26px rgba(0,0,0,.6); font: 600 14px var(--font-ui); }
.node-tip b { display: block; color: var(--gold-2); font: 700 14px var(--font-display); letter-spacing: .05em; } .tip-l { color: var(--text-2); }

/* Würfel-Ablage */
.dice-tray { position: absolute; z-index: 8; left: 50%; top: 34%; transform: translate(-50%, -50%); width: min(560px, 82vw); height: min(330px, 40vh); pointer-events: none; animation: trayIn .3s var(--ease); }
.dice-tray canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.dice-result { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; align-items: center; justify-content: center; gap: 14px; font: 700 17px var(--font-ui); text-shadow: 0 2px 8px #000; }
.dr-name { color: var(--text-2); } .dr-num { font: 900 42px/1 var(--font-display); color: var(--gold-2); text-shadow: 0 0 18px rgba(217,178,90,.6); }
.dr-ev { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: rgba(60,44,100,.85); border: 1px solid var(--violet); }
@keyframes trayIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }

/* Feed, Banner, Blitz */
.feed { position: absolute; left: calc(var(--side-w) + 30px); bottom: 178px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; z-index: 6; max-width: 46vw; }
.feed-item { --pc: #fff; padding: 6px 12px; border-radius: 10px; background: rgba(10,8,18,.86); border-left: 3px solid var(--pc); font: 600 15px var(--font-ui); color: var(--text); backdrop-filter: blur(4px); animation: feedIn .3s var(--ease); }
.feed-item.old { opacity: 0; transition: opacity .7s; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-14px); } }
.banner { position: absolute; inset: 0; z-index: 9; pointer-events: none; display: grid; place-items: center; }
.banner-inner { --bc: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: bannerPop .5s var(--ease) both; }
.banner-inner.out { animation: bannerOut .38s ease-in forwards; }
.banner .mid { font: 900 clamp(34px, 8vh, 78px)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 26px color-mix(in srgb, var(--bc) 60%, transparent); }
.banner .sub { font: 600 clamp(16px, 2.8vh, 28px) var(--font-ui); letter-spacing: .1em; color: var(--bc); text-shadow: 0 2px 12px #000; max-width: 80vw; }
@keyframes bannerPop { from { opacity: 0; transform: scale(1.5); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bannerOut { to { opacity: 0; transform: scale(.92) translateY(-14px); } }
.flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: rgba(210,225,255,.85); }
.flash.hit { animation: flashHit .55s ease-out; }
@keyframes flashHit { 0% { opacity: .75; } 100% { opacity: 0; } }

/* Kettenreaktion */
.stack-overlay { position: absolute; z-index: 7; top: 82px; left: 50%; transform: translateX(-50%); width: min(94vw, 900px); pointer-events: none; }
.stack-overlay > * { pointer-events: auto; }
.so-card { padding: 14px 18px 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(34,26,54,.96), rgba(14,10,24,.97)); border: 1px solid var(--violet); box-shadow: var(--glow-violet), 0 24px 60px -20px #000; }
.so-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.so-head h3 { font: 700 15px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--violet-2); } .so-timer { font: 900 18px var(--font-display); }
.so-stack { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.so-arrow { display: grid; place-items: center; color: var(--text-3); }
.so-entry { --pc: #999; position: relative; min-width: 138px; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 12px; background: rgba(8,6,14,.85); border: 1px solid var(--line-2); border-top: 4px solid var(--pc); }
.so-entry.event { border-color: rgba(143,120,232,.6); border-top-color: var(--pc); } .so-entry.reaction { border-color: rgba(87,196,229,.55); border-top-color: var(--pc); }
.so-entry .se-top { display: flex; align-items: center; gap: 7px; } .so-entry .se-top .icon { width: 18px; height: 18px; color: var(--gold-2); }
.so-entry .se-owner { display: flex; align-items: center; gap: 6px; font: 600 13px var(--font-ui); color: var(--text-2); }
.so-entry small { color: var(--text-3); font-size: 12px; }
.so-entry.neg { opacity: .5; text-decoration: line-through; }
.so-entry .se-res { position: absolute; top: -10px; right: -6px; padding: 1px 9px; border-radius: 99px; font: 800 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; background: var(--good); color: #062014; }
.so-entry.negates .se-res, .so-entry.negated .se-res { background: var(--cyan); color: #06202a; } .so-entry.fizzled .se-res { background: var(--text-3); color: #10101a; }
.so-entry.applied, .so-entry.negates { box-shadow: 0 0 16px rgba(240,207,134,.45); }
.so-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.so-hint { text-align: center; font-size: 14px; margin-top: 2px; }

/* Handelsangebote */
.trade-incoming { position: absolute; z-index: 7; top: 76px; right: calc(var(--side-w) + 26px); display: flex; flex-direction: column; gap: 8px; width: min(360px, 90vw); }
.trade-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(20,16,32,.95); border: 1px solid var(--gold); box-shadow: var(--glow-gold); animation: toastIn .3s var(--ease); }
.tc-h { display: flex; align-items: center; gap: 8px; } .tc-h .icon { color: var(--gold); }
.tc-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-side { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .tc-side small { flex-basis: 100%; color: var(--text-3); }
.tc-btn { display: flex; gap: 8px; }
.cost, .costs { display: inline-flex; align-items: center; gap: 4px; }
.cost { padding: 2px 8px; border-radius: 99px; background: rgba(217,178,90,.12); border: 1px solid var(--line-2); font: 700 13px var(--font-ui); } .cost .icon { width: 13px; height: 13px; }
.cost.lack { border-color: var(--bad); color: #ffc2ca; background: rgba(224,90,110,.14); }
.costs { gap: 5px; flex-wrap: wrap; }

/* Dialoge im Spiel */
.shop-row, .offer { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(8,6,14,.6); border: 1px solid var(--line); }
.offer { grid-template-columns: auto 1fr auto; }
.shop-row.dim { opacity: .7; } .offer.done { opacity: .55; }
.si { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(217,178,90,.1); color: var(--gold-2); } .si .icon { width: 24px; height: 24px; }
.st { display: flex; flex-direction: column; min-width: 0; } .st b { font: 700 16px var(--font-ui); } .st small { color: var(--text-3); font-size: 13px; line-height: 1.25; }
.q-active { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gold); background: rgba(217,178,90,.08); } .q-active b { color: var(--gold-2); }
.trade-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.tcol { display: flex; flex-direction: column; gap: 8px; } .tcol h5 { margin: 0; font: 700 13px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.tarrow { align-self: center; color: var(--text-3); }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(8,6,14,.6); border: 1px solid var(--line); }
.stepper .sv { display: inline-flex; align-items: center; gap: 8px; } .stepper .sv b { font: 900 20px var(--font-display); min-width: 26px; text-align: center; }
.tcards { display: flex; flex-wrap: wrap; gap: 6px; } .tcards .hcard { width: auto; min-height: 44px; }
.prow.pick { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; text-align: left; color: var(--text); cursor: pointer; }
.prow.pick:hover:not(:disabled) { border-color: var(--gold); background: rgba(217,178,90,.1); }
.prow.pick.dim { opacity: .5; cursor: not-allowed; }

/* Ende */
.end-overlay { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: var(--pad); background: radial-gradient(ellipse at 50% 40%, rgba(50,36,90,.5), rgba(4,3,10,.93) 75%); backdrop-filter: blur(4px); animation: endIn .6s var(--ease); }
@keyframes endIn { from { opacity: 0; } }
.end-card { --wc: #fff; width: min(94vw, 660px); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 22px; background: linear-gradient(180deg, rgba(36,28,58,.96), rgba(12,9,20,.97)); border: 1px solid var(--wc); box-shadow: 0 0 44px color-mix(in srgb, var(--wc) 28%, transparent), 0 30px 80px rgba(0,0,0,.8); }
.end-title { text-align: center; font: 900 clamp(28px, 5.5vh, 50px)/1.05 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 26px color-mix(in srgb, var(--wc) 55%, transparent); }
.end-sub { text-align: center; color: var(--text-2); font: 600 16px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; margin-top: -8px; }
.rank { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.rank-row { --pc: #888; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(8,6,14,.66); border: 1px solid var(--line); border-left: 4px solid var(--pc); animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 300ms); }
.rank-row.first { background: color-mix(in srgb, var(--pc) 14%, rgba(8,6,14,.7)); border-color: var(--pc); }
.rank-row .pl { font: 900 20px var(--font-display); color: var(--pc); text-align: center; } .rank-row .nm { font: 700 18px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .st { font: 600 14px var(--font-ui); color: var(--text-2); white-space: nowrap; } .rank-row .st b { color: var(--text); font-size: 17px; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-16px); } }
.end-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.end-note { text-align: center; color: var(--text-3); font: 600 15px var(--font-ui); }

/* Schmale Bildschirme */
@media (max-width: 1100px) {
  :root { --side-w: 236px; }
  .phase .ptext { font-size: 15px; } .turnstrip .tchip { width: 30px; height: 30px; font-size: 13px; }
  .minimap-wrap { width: 180px; height: 180px; } .hud-left { bottom: 202px; }
}
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .hud-top { grid-template-columns: 1fr auto; } .turnstrip { display: none; }
  .hud-left { display: none; } .hud-left.open { display: flex; z-index: 8; background: rgba(8,6,14,.9); }
  .hud-right { width: min(46vw, 250px); top: 70px; bottom: 96px; }
  .hud-bottom { left: 8px; right: 8px; bottom: 8px; }
  .minimap-wrap { width: 132px; height: 132px; bottom: 96px; } .feed { display: none; }
  .trade-incoming { right: 8px; top: 70px; } .hud-net { display: none; }
  .combat { grid-template-columns: 1fr; gap: 10px; }
}

/* Chat (Spiel-Panel und Lobby) */
.chat { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.chat-log { max-height: 150px; min-height: 54px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 10px; background: rgba(8,6,14,.6); border: 1px solid var(--line); font: 500 14px/1.3 var(--font-ui); -webkit-user-select: text; user-select: text; }
.chat-line { --pc: #ccc; overflow-wrap: anywhere; } .chat-line b { color: var(--pc); margin-right: 6px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-btn { height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(217,178,90,.08); color: var(--text-2); font: 700 12px var(--font-ui); }
.chip-btn:hover { border-color: var(--gold); color: var(--text); }
.chat-row { display: flex; gap: 6px; }
.chat-input { height: 36px !important; font-size: 15px; }
.chat-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }