/* Panzerfront – Oberfläche */
:root { --bg:#0d100b; --panel:#1a1f16; --panel2:#232a1d; --line:#3a4530; --txt:#d7dccb; --dim:#8f9883; --acc:#e0b030; --ok:#3ee03e; --bad:#ff4a4a; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--txt); font-family: "Segoe UI", system-ui, sans-serif; overflow:hidden; user-select:none; }
button { font: inherit; cursor:pointer; }
input, select { font: inherit; background:#0f130c; color:var(--txt); border:1px solid var(--line); border-radius:4px; padding:7px 9px; }
.hidden { display:none !important; }
.screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:auto; background:transparent; z-index:2; }
.card { background:rgba(22,27,18,0.94); border:1px solid var(--line); border-radius:8px; padding:22px 26px; width:min(760px, 94vw); box-shadow:0 10px 40px rgba(0,0,0,.6); }
h1.logo { font-family: Impact, "Arial Black", sans-serif; letter-spacing:4px; font-size:54px; margin:0; color:var(--acc);
  text-shadow: 0 3px 0 #6b4d00, 0 6px 20px rgba(224,176,48,.35); text-align:center; }
.sub { text-align:center; color:var(--dim); margin:4px 0 18px; letter-spacing:2px; text-transform:uppercase; font-size:12px; }
h2 { margin:0 0 12px; font-size:18px; letter-spacing:1px; text-transform:uppercase; color:var(--acc); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.col2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:700px){ .col2{ grid-template-columns:1fr; } }
.btn { background:linear-gradient(#3d4a2c,#2a3320); color:var(--txt); border:1px solid #56663f; border-radius:5px; padding:9px 14px; font-weight:600; letter-spacing:.5px; }
.btn:hover { background:linear-gradient(#4b5a36,#34402a); }
.btn.big { width:100%; padding:13px; font-size:16px; margin-top:8px; }
.btn.acc { background:linear-gradient(#c8961e,#8f6a12); border-color:#e0b030; color:#1a1305; }
.btn.acc:hover { background:linear-gradient(#dcaa2c,#a37a18); }
.btn.small { padding:5px 9px; font-size:13px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.panel { background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:14px; }
.muted { color:var(--dim); font-size:13px; }
.err { color:var(--bad); font-size:13px; min-height:18px; margin-top:6px; }
.list { max-height:230px; overflow:auto; }
.gitem { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line); }
.gitem:hover { background:#2b3424; }
.code { font-family:monospace; font-size:22px; letter-spacing:4px; color:var(--acc); background:#0f130c; padding:4px 12px; border-radius:4px; border:1px dashed var(--line); }
table.t { width:100%; border-collapse:collapse; font-size:14px; }
table.t th { text-align:left; color:var(--dim); font-weight:600; border-bottom:1px solid var(--line); padding:6px; }
table.t td { padding:6px; border-bottom:1px solid #2a3322; }
.win { color:var(--ok); } .loss { color:var(--bad); } .left { color:var(--dim); }
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px; vertical-align:-1px; border:1px solid rgba(0,0,0,.5); }
.slot { display:grid; grid-template-columns: 26px 1fr 110px 110px 34px; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); }
.tabs { display:flex; gap:6px; margin-bottom:12px; } .tabs .btn.on { border-color:var(--acc); color:var(--acc); }
.chatlog { height:120px; overflow:auto; font-size:13px; background:#0f130c; border:1px solid var(--line); border-radius:4px; padding:6px 8px; margin-bottom:6px; }
.chatlog .sys { color:var(--dim); font-style:italic; }
a { color:var(--acc); }

/* ---------- Spiel ---------- */
#game { position:absolute; inset:0; display:flex; background:#000; }
#viewwrap { position:relative; flex:1; overflow:hidden; }
#view { width:100%; height:100%; display:block; }
#sidebar { width:236px; background:linear-gradient(#262d1f,#161a12); border-left:2px solid #4a5638; display:flex; flex-direction:column; padding:8px; gap:6px; }
#credits { font-family: "Consolas", monospace; font-size:22px; color:var(--acc); text-align:center; background:#0b0e09; border:1px solid var(--line); border-radius:4px; padding:4px; text-shadow:0 0 8px rgba(224,176,48,.4); }
#power { position:relative; height:16px; background:#0b0e09; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
#power-fill { position:absolute; left:0; top:0; bottom:0; width:0; transition: width .3s; }
#power-txt { position:absolute; inset:0; font-size:11px; text-align:center; line-height:15px; color:#fff; text-shadow:0 0 3px #000; }
#minimap { width:220px; height:220px; background:#000; border:1px solid var(--line); border-radius:3px; image-rendering:pixelated; cursor:crosshair; }
#sidetools { display:flex; gap:6px; }
#sidetools .btn { flex:1; padding:5px; font-size:13px; }
#sidetools .btn.on { border-color:var(--acc); color:var(--acc); }
#sidebar-items { flex:1; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:5px; align-content:start; }
#sidebar-items .col { display:flex; flex-direction:column; gap:5px; }
.item { position:relative; padding:0; border:1px solid #4a5638; background:#111; border-radius:3px; width:100%; height:72px; overflow:hidden; color:#fff; }
.item canvas { display:block; width:100%; height:56px; }
.item .lbl { font-size:10.5px; line-height:15px; height:16px; background:#0b0e09; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 3px; }
.item .cost { position:absolute; top:2px; right:3px; font-size:10px; color:var(--acc); text-shadow:0 0 3px #000, 0 0 2px #000; }
.item .prog { position:absolute; left:0; right:0; top:0; height:56px; pointer-events:none; }
.item .badge { position:absolute; top:2px; left:4px; font-weight:800; font-size:14px; color:#fff; text-shadow:0 0 3px #000; }
.item .state { position:absolute; left:0; right:0; top:20px; text-align:center; font-weight:800; font-size:13px; letter-spacing:1px; color:#7dff7d; text-shadow:0 0 4px #000, 0 0 2px #000; pointer-events:none; }
.item.ready .state { animation: blink .8s infinite; }
.item.locked { filter: grayscale(1) brightness(.45); }
.item.busy { filter: brightness(.6); }
.item:hover { border-color:var(--acc); }
@keyframes blink { 50% { opacity:.3; } }
#topbar { position:absolute; top:6px; left:8px; display:flex; gap:8px; align-items:center; z-index:5; }
#clock { font-family:monospace; font-size:15px; background:rgba(0,0,0,.55); padding:3px 8px; border-radius:4px; }
#topbar .btn { padding:4px 10px; font-size:13px; background:rgba(30,36,24,.85); }
#toasts { position:absolute; top:8px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; z-index:6; }
.toast { background:rgba(0,0,0,.72); border:1px solid #3a4530; color:#d7f0c0; padding:5px 14px; border-radius:4px; font-size:14px; letter-spacing:.5px; transition: opacity .6s; }
.toast.warn { color:#ffd0a0; border-color:#7a3a20; }
.toast.fade { opacity:0; }
#selinfo { position:absolute; left:8px; bottom:8px; background:rgba(14,17,11,.88); border:1px solid #4a5638; border-radius:5px; padding:8px 10px; max-width:430px; font-size:13px; z-index:5; }
#selinfo .nm { font-weight:700; color:var(--acc); } #selinfo .enemy { color:var(--bad); font-weight:400; }
#selinfo .hp { color:var(--dim); }
#selinfo .btns { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
#selinfo button { background:#2e3824; color:var(--txt); border:1px solid #56663f; border-radius:3px; padding:3px 8px; font-size:12px; }
#selinfo button:hover { border-color:var(--acc); }
#selinfo .hint { width:100%; color:var(--dim); font-size:11px; }
#chatbox { position:absolute; left:8px; bottom:90px; width:380px; pointer-events:none; z-index:5; font-size:13px; }
#chatbox .m { background:rgba(0,0,0,.55); padding:2px 7px; border-radius:3px; margin-top:2px; width:fit-content; max-width:100%; transition:opacity 1s; }
/* (alte feste Position des Chat-Felds entfernt) */
.overlay { position:absolute; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:20; }
#over-title { font-family:Impact, sans-serif; font-size:60px; text-align:center; letter-spacing:6px; margin:0; }
#paused { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:Impact,sans-serif; font-size:48px; letter-spacing:6px; color:var(--acc); background:rgba(0,0,0,.35); z-index:8; pointer-events:none; }
kbd { background:#0f130c; border:1px solid var(--line); border-bottom-width:2px; border-radius:3px; padding:0 5px; font-family:monospace; font-size:12px; }
.help td { padding:3px 8px; font-size:14px; } .help td:first-child { white-space:nowrap; text-align:right; }
#waiting { position:absolute; top:44px; left:50%; transform:translateX(-50%); background:rgba(80,20,10,.8); padding:4px 12px; border-radius:4px; z-index:6; font-size:13px; }

#selinfo .hl { border-color:var(--acc); color:var(--acc); font-weight:700; }
#selinfo .bar { position:relative; width:100%; height:16px; background:#0b0e09; border:1px solid #4a5638; border-radius:3px; overflow:hidden; }
#selinfo .bar.small { width:110px; display:inline-block; vertical-align:middle; }
#selinfo .bar > div { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(#e0b030,#9a7414); }
#selinfo .bar > span { position:relative; font-size:11px; padding-left:6px; line-height:15px; color:#fff; text-shadow:0 0 2px #000; }
#selinfo .research { width:100%; margin-top:6px; border-top:1px solid #3a4530; padding-top:5px; display:flex; flex-direction:column; gap:4px; }
#selinfo .rrow { display:grid; grid-template-columns:110px 80px 1fr; align-items:center; gap:6px; }
#selinfo .rrow .hint { grid-column:1 / -1; margin-top:-3px; }
#selinfo .pips i { display:inline-block; width:11px; height:8px; margin-right:3px; background:#2a3322; border:1px solid #56663f; border-radius:2px; }
#selinfo .pips i.on { background:var(--acc); border-color:#ffd25a; }
#selinfo .pips i.off { opacity:.3; }
#selinfo button:disabled { opacity:.4; cursor:not-allowed; }
#selinfo { max-width:470px; }

/* Bauleiste: Reiter */
#sidebar-tabs { display:grid; grid-template-columns:repeat(4, 1fr); gap:3px; }
#sidebar-tabs .tab { position:relative; background:linear-gradient(#2a3220,#1a1f15); border:1px solid #3e4a30; border-radius:3px; color:#b9c2aa; padding:3px 0 4px; font-size:9.5px; line-height:11px; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:1px; }
#sidebar-tabs .tab b { font-size:14px; line-height:16px; font-weight:400; filter:grayscale(.3); }
#sidebar-tabs .tab:hover { border-color:#8a7a3a; color:#fff; }
#sidebar-tabs .tab.on { background:linear-gradient(#4a5832,#2c3620); border-color:var(--acc); color:var(--acc); box-shadow:inset 0 0 6px rgba(224,176,48,.25); }
#sidebar-tabs .tab.dis { opacity:.45; }
#sidebar-tabs .tab i { position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--acc); transition:width .3s; }
#sidebar-tabs .tab.ready { animation: tabblink .8s infinite; }
@keyframes tabblink { 50% { border-color:#7dff7d; color:#7dff7d; } }
#sidebar-items { display:block !important; padding-right:2px; }
#sidebar-items .pane { display:grid; grid-template-columns:1fr 1fr; gap:5px; align-content:start; }
#sidebar-items .pane.hidden { display:none; }

/* Scrollbars im Spielstil */
#sidebar-items, .list, #ranks-body, .chatlog, #selinfo { scrollbar-width:thin; scrollbar-color:#6b5a26 transparent; }
#sidebar-items::-webkit-scrollbar, .list::-webkit-scrollbar, #ranks-body::-webkit-scrollbar, .chatlog::-webkit-scrollbar { width:6px; }
#sidebar-items::-webkit-scrollbar-track, .list::-webkit-scrollbar-track, #ranks-body::-webkit-scrollbar-track, .chatlog::-webkit-scrollbar-track { background:transparent; }
#sidebar-items::-webkit-scrollbar-thumb, .list::-webkit-scrollbar-thumb, #ranks-body::-webkit-scrollbar-thumb, .chatlog::-webkit-scrollbar-thumb { background:linear-gradient(#8a7430,#5a4a1c); border-radius:3px; }
#sidebar-items::-webkit-scrollbar-thumb:hover { background:linear-gradient(#c49a2c,#7a6220); }
#sidebar-items::-webkit-scrollbar-button { display:none; height:0; }

/* Chat im Spiel */
#gchat { position:absolute; left:8px; top:40px; width:360px; z-index:7; }
#gchat-toggle { padding:4px 10px; font-size:13px; background:rgba(30,36,24,.88); }
#gchat-unread { display:inline-block; min-width:16px; padding:0 4px; border-radius:8px; background:var(--bad); color:#fff; font-size:11px; line-height:16px; text-align:center; }
#gchat-unread:empty { display:none; }
#gchat-panel { margin-top:4px; background:rgba(12,15,10,.92); border:1px solid #4a5638; border-radius:5px; padding:6px; box-shadow:0 6px 20px rgba(0,0,0,.5); }
#gchat-log { height:170px; overflow-y:auto; font-size:13px; margin-bottom:5px; scrollbar-width:thin; scrollbar-color:#6b5a26 transparent; }
#gchat-log .ln, #chatbox .m, .chatlog .ln { padding:1px 0; word-wrap:break-word; }
#gchat-log .t, .chatlog .t { color:#6f7866; font-size:11px; margin-right:4px; }
.tm { display:inline-block; font-size:10px; padding:0 4px; border-radius:3px; background:#2a4a6a; color:#bfe0ff; margin-right:4px; }
#gchat select, #gchat input { padding:4px 6px; font-size:13px; }
#chatbox { margin-top:4px; pointer-events:none; }
#chatbox .m { background:rgba(0,0,0,.6); padding:2px 7px; border-radius:3px; margin-top:2px; width:fit-content; max-width:100%; transition:opacity 1s; font-size:13px; }
#gchat-panel:not(.hidden) ~ #chatbox { display:none; }

/* Animierter Hintergrund im Menü */
#bgview { position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0; filter:saturate(.95) brightness(.95); }
#bgshade { position:fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse at 50% 45%, rgba(13,16,11,.05) 0%, rgba(13,16,11,.35) 60%, rgba(13,16,11,.8) 100%); }
body.ingame #bgview, body.ingame #bgshade { display:none; }
.card { backdrop-filter: blur(4px); background:rgba(18,22,15,.82) !important; }
#game { z-index:3; }

#swbar { position:absolute; top:6px; right:8px; display:flex; flex-direction:column; gap:3px; align-items:flex-end; z-index:6; pointer-events:none; }
#swbar .sw { background:rgba(0,0,0,.7); border:1px solid; border-left-width:4px; padding:2px 8px; border-radius:3px; font-size:12px; font-family:monospace; }
#swbar .sw.ready { color:#ff7060; animation: blink .8s infinite; }

/* Wiederholung & Zuschauer */
#replaybar, #spectag { display:none; }
#game.replay #replaybar { display:flex; position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:8; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center;
  background:rgba(12,15,10,.92); border:1px solid #4a5638; border-radius:6px; padding:6px 10px; max-width:760px; }
#replaybar .btn.on { border-color:var(--acc); color:var(--acc); }
#rp-prog { width:200px; height:8px; background:#0b0e09; border:1px solid #3a4530; border-radius:4px; overflow:hidden; }
#rp-fill { height:100%; width:0; background:linear-gradient(90deg,#8a7430,#e0b030); }
#rp-stats { width:100%; text-align:center; font-size:12px; }
#game.spectate #sidebar-tabs, #game.spectate #sidebar-items, #game.spectate #sidetools { display:none !important; }
#game.spectate:not(.replay) #spectag { display:block; position:absolute; left:50%; top:44px; transform:translateX(-50%); background:rgba(0,0,0,.6); padding:3px 12px; border-radius:4px; letter-spacing:2px; color:#bfe0ff; z-index:6; }

/* Missionen */
#objectives { position:absolute; left:8px; top:42px; width:340px; z-index:6; background:rgba(12,15,10,.88); border:1px solid #4a5638; border-left:3px solid var(--acc); border-radius:4px; padding:8px 10px; font-size:13px; }
#objectives .ot { color:var(--acc); font-weight:700; letter-spacing:.5px; margin-bottom:4px; text-transform:uppercase; font-size:12px; }
#objectives .og { padding:2px 0; color:#d7dccb; } #objectives .og.done { color:#7dff7d; opacity:.75; } #objectives .og.cur { color:#fff; font-weight:600; } #objectives .og.bonus { color:#b5a875; font-style:italic; }
#objectives .otimer { margin-top:6px; font-family:monospace; font-size:16px; color:#ffd23a; }
#objectives .ostat { margin-top:4px; color:#bfe0ff; }
#obj-hint { display:none; } #obj-hint.flash { display:block; animation: hintfade 4s forwards; margin-top:6px; color:#fff; background:rgba(224,176,48,.15); padding:4px 6px; border-radius:3px; }
@keyframes hintfade { 0% { background:rgba(224,176,48,.5); } 100% { background:rgba(224,176,48,.08); } }
.item.pulse { animation: itempulse 1s infinite; border-color:#ffd23a !important; }
@keyframes itempulse { 50% { box-shadow:0 0 0 3px rgba(255,210,58,.6); } }
.mcard { display:flex; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:5px; margin-bottom:6px; background:var(--panel2); cursor:pointer; }
.mcard:hover { border-color:#8a7a3a; } .mcard.on { border-color:var(--acc); box-shadow:inset 0 0 8px rgba(224,176,48,.2); }
.mcard.locked { opacity:.45; cursor:not-allowed; }
.mcard .mi { width:34px; height:34px; border-radius:50%; background:#0f130c; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:16px; }
.mcard .mt { font-weight:700; } .mcard .ms { font-size:12px; color:var(--dim); }

#swbar .sw.mode { font-size:13px; border-left-width:4px; }
.slot { grid-template-columns: 26px 1fr 100px 100px 100px 34px !important; }
.achv { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.achv .a { border:1px solid var(--line); border-radius:5px; padding:8px; background:var(--panel2); opacity:.45; }
.achv .a.on { opacity:1; border-color:#8a7430; box-shadow: inset 0 0 8px rgba(224,176,48,.15); }
.achv .a b { display:block; color:var(--acc); }

/* Karten-Editor */
#editor { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #0d0f0b; }
#editor.hidden { display: none; }
#ed-top, #ed-tools, #ed-bottom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
#ed-bottom { border-top: 1px solid var(--line); border-bottom: 0; font-size: 12px; }
#ed-tools .tool i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(255,255,255,.25); }
#ed-tools .on { border-color: var(--acc); color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
#ed-view { flex: 1; width: 100%; min-height: 0; cursor: crosshair; touch-action: none; display: block; }
#ed-msg.ok { color: #8fe08f; } #ed-msg.err { color: #ff8080; }
#ed-msg { font-weight: 600; }
/* Touch */
#view { touch-action: none; }
#touchbar { display: none; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); gap: 6px; z-index: 6; }
#touchbar .btn { min-width: 46px; height: 42px; font-size: 17px; padding: 0 10px; background: rgba(20,24,16,.85); }
#touchbar .btn.on { border-color: var(--acc); color: var(--acc); }
@media (pointer: coarse) { #touchbar { display: flex; } #selinfo { bottom: 62px !important; } }
@media (max-width: 820px) { #sidebar { width: 190px; } #minimap { width: 170px !important; height: 170px !important; } }
@media (max-height: 560px) { #minimap { width: 140px !important; height: 140px !important; align-self: center; } #credits { font-size: 18px; } }

/* Statistik auf der Startseite */
#menu .card { width: min(900px, 96vw); }
.stats { margin-top: 18px; background: linear-gradient(160deg, rgba(42,50,32,.95), rgba(24,29,19,.95)); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { background: transparent; color: var(--dim); border: 0; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.seg button.on { background: var(--acc); color: #1b1606; font-weight: 700; }
#stats-body { margin-top: 12px; animation: stIn .35s ease; }
@keyframes stIn { from { opacity: 0; transform: translateY(6px); } }
#stats h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dim); margin: 0 0 10px; font-weight: 600; }
.live { font-size: 13px; color: var(--dim); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.live b { color: var(--txt); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #3ee03e; box-shadow: 0 0 0 0 rgba(62,224,62,.7); animation: pulse 1.6s infinite; display: inline-block; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(62,224,62,0); } 100% { box-shadow: 0 0 0 0 rgba(62,224,62,0); } }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.kpis.k3 { grid-template-columns: repeat(3, 1fr); margin: 0; }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; padding: 12px 12px 10px; background: linear-gradient(145deg, rgba(224,176,48,.10), rgba(0,0,0,.15)); }
.kpi::after { content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(224,176,48,.18), transparent 70%); }
.kpi.red { background: linear-gradient(145deg, rgba(255,90,60,.13), rgba(0,0,0,.15)); } .kpi.red::after { background: radial-gradient(circle, rgba(255,90,60,.22), transparent 70%); }
.kpi.blue { background: linear-gradient(145deg, rgba(74,163,255,.13), rgba(0,0,0,.15)); } .kpi.blue::after { background: radial-gradient(circle, rgba(74,163,255,.22), transparent 70%); }
.kpi.gold { background: linear-gradient(145deg, rgba(255,210,60,.18), rgba(0,0,0,.15)); }
.kpi .ki { font-size: 18px; opacity: .9; }
.kpi .kv { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: .5px; margin-top: 2px; text-shadow: 0 2px 10px rgba(0,0,0,.5); white-space: nowrap; }
.kpi .kl { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 700px) { .sgrid { grid-template-columns: 1fr; } }
.sbox { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: rgba(0,0,0,.18); }
.sbox.wide { grid-column: 1 / -1; }
.sbox.center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sgrid .sbox.center + .sbox.wide { grid-column: auto; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar .bf { width: 100%; height: var(--h); border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #f0c040, #8a6a14); box-shadow: 0 0 10px rgba(224,176,48,.25); transform-origin: bottom; animation: grow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 35ms); }
.bar.today .bf { background: linear-gradient(180deg, #7dff7d, #2e8a2e); box-shadow: 0 0 12px rgba(62,224,62,.35); }
@keyframes grow { from { transform: scaleY(0); } }
.bar .bv { font-size: 10px; color: var(--txt); margin-bottom: 2px; min-height: 12px; }
.bar .bl { font-size: 10px; color: var(--dim); margin-top: 4px; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.pd { flex: 1; max-width: 120px; text-align: center; }
.pd .pm { font-size: 24px; } .pd .pn { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd .pr { font-size: 12px; color: var(--acc); font-weight: 700; }
.pd .pb { margin-top: 4px; border-radius: 5px 5px 0 0; font-weight: 800; font-size: 20px; color: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.pd.p1 .pb { height: 70px; background: linear-gradient(180deg, #ffd84a, #b8861a); }
.pd.p2 .pb { height: 50px; background: linear-gradient(180deg, #e2e6ea, #8d969e); }
.pd.p3 .pb { height: 36px; background: linear-gradient(180deg, #e0a06a, #8a5a2c); }
.duel .dn { display: flex; justify-content: space-between; font-size: 13px; margin: 4px 0; }
.dbar { display: flex; height: 22px; border-radius: 11px; overflow: hidden; font-size: 12px; font-weight: 700; }
.dbar .da { background: linear-gradient(90deg, #2c64c8, #4aa3ff); display: flex; align-items: center; padding-left: 10px; color: #fff; transition: width .8s; }
.dbar .db { flex: 1; background: linear-gradient(90deg, #ff6a4a, #b8301a); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; color: #fff; }
.donut-wrap { display: flex; gap: 14px; align-items: center; }
.donut { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.donut > div, .ring > div { width: 70%; height: 70%; border-radius: 50%; background: #1d2318; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.donut span, .ring span { font-size: 10px; color: var(--dim); font-weight: 400; text-transform: uppercase; letter-spacing: .6px; }
.legend div { font-size: 12px; margin: 3px 0; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .legend b { color: var(--txt); margin-left: 4px; }
.ring { width: 118px; height: 118px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); box-shadow: 0 0 18px rgba(0,0,0,.4); }
.ring b { font-size: 24px; color: #fff; }
.rec { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: 13px; }
.rec:last-child { border-bottom: 0; } .rec span { color: var(--dim); } .rec b { color: var(--txt); text-align: right; }
.spark { width: 100%; height: 80px; display: block; }
.rt { float: right; color: var(--acc); font-size: 16px; letter-spacing: 0; }
.form { display: flex; gap: 3px; margin-top: 8px; }
.form i { width: 18px; height: 18px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #111; }
.form i.w { background: #3ee03e; } .form i.l { background: #ff5a4a; }
.me-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.me-head .mn { font-size: 20px; font-weight: 800; color: #fff; }
.streak { color: #ff9a3a; font-weight: 700; }
.hint { border: 1px dashed var(--line); border-radius: 8px; padding: 12px; font-size: 13px; color: var(--dim); background: rgba(0,0,0,.15); }
.kpis.k3 .kv { font-size: 19px; } .kpis.k3 .kpi { padding: 10px 9px 8px; } .kpis.k3 .kl { font-size: 10px; letter-spacing: .4px; }
.screen { align-items: flex-start; padding: 16px 0; box-sizing: border-box; } .screen > .card { margin: auto; }

/* neue Chat-Nachrichten blenden sich kurz ein */
#chatbox .m { background: linear-gradient(90deg, rgba(14,18,10,.92), rgba(14,18,10,.75)); border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--acc); border-radius: 5px; padding: 5px 10px; margin-top: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.45); animation: chatIn .28s cubic-bezier(.2,.9,.3,1.2); font-size: 13px; }
#chatbox .m.sys { border-left-color: var(--dim); color: var(--dim); }
#chatbox .m .t { color: var(--dim); font-size: 11px; margin-right: 6px; }
@keyframes chatIn { from { opacity: 0; transform: translateX(-18px); } }
#gchat #chatbox { position: static; width: 360px; bottom: auto; }

/* Assistent für das Übungsgefecht */
.wz { width: min(720px, 94vw); max-height: 92vh; overflow: auto; animation: wzIn .25s ease; }
@keyframes wzIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.wz-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wz-dots { display: flex; gap: 6px; flex: 1; }
.wz-dots i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); cursor: pointer; transition: background .2s; }
.wz-dots i.done { background: rgba(224,176,48,.55); } .wz-dots i.on { background: var(--acc); box-shadow: 0 0 8px rgba(224,176,48,.6); }
.wz-step { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--acc); }
.wz h2 { margin: 2px 0 2px; font-size: 24px; color: #fff; }
#wz-sub { margin-bottom: 14px; }
.wz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.wz-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 14px 0; }
.wz-opt { text-align: left; background: linear-gradient(160deg, rgba(40,48,30,.9), rgba(22,27,18,.9)); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; color: var(--txt); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 3px; transition: transform .12s, border-color .12s, box-shadow .12s; }
.wz-opt:hover { transform: translateY(-2px); border-color: #6a7a50; }
.wz-opt.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), 0 6px 18px rgba(224,176,48,.18); background: linear-gradient(160deg, rgba(70,62,24,.9), rgba(28,30,16,.9)); }
.wz-opt .ic { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.wz-opt b { font-size: 15px; color: #fff; } .wz-opt small { color: var(--dim); font-size: 12px; line-height: 1.35; }
.wz-pills .wz-opt { width: 64px; height: 64px; align-items: center; justify-content: center; text-align: center; padding: 0; }
.wz-pills .wz-opt b { font-size: 24px; }
.wz-foot { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
#wz-go { width: auto; padding: 10px 26px; margin: 0; }
.wz-sum .row2 { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px dashed rgba(255,255,255,.08); cursor: pointer; border-radius: 5px; }
.wz-sum .row2:hover { background: rgba(255,255,255,.04); }
.wz-sum .row2 span { color: var(--dim); flex: 1; } .wz-sum .row2 b { color: #fff; } .wz-sum .row2 em { font-style: normal; font-size: 11px; color: var(--acc); opacity: 0; }
.wz-sum .row2:hover em { opacity: 1; }
#wizard { z-index: 40; }
#power.fuel #power-txt { color: #ffb040; }

/* Bauplan */
.tech { width: min(1180px, 96vw); max-height: 92vh; overflow: auto; }
#tech { z-index: 45; }
.tt-cols { display: flex; gap: 6px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.tt-col { display: flex; flex-direction: column; gap: 6px; min-width: 132px; }
.tt-h { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--acc); text-align: center; }
.tt-arrow { align-self: center; color: var(--dim); font-size: 18px; padding-top: 18px; }
.tt { border: 1px solid var(--line); border-radius: 7px; padding: 6px; background: rgba(0,0,0,.22); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; }
.tt canvas { display: block; } .tt b { font-size: 12px; color: #fff; } .tt small { color: var(--acc); font-size: 11px; }
.tt.small { min-width: 96px; max-width: 120px; }
.tt.have { border-color: #3a8a3a; box-shadow: inset 0 0 10px rgba(62,224,62,.18); }
.tt.can { border-color: #8a7430; } .tt.lock { opacity: .55; }
.tn { font-size: 10px; color: #9fd0ff; }
.tc { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 3px; }
.tc span { font-size: 10px; padding: 1px 5px; border-radius: 8px; background: rgba(255,255,255,.08); color: var(--txt); }
.tc span.ok { background: rgba(62,224,62,.12); color: #8fe08f; }
.tt-sec { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }
.tt-row { display: flex; gap: 6px; align-items: stretch; margin-bottom: 6px; flex-wrap: wrap; }
.tt-prod { width: 120px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: #fff; font-size: 13px; }
.tt-prod span { color: var(--dim); }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid; vertical-align: -1px; }
.lg.have { border-color: #3a8a3a; background: rgba(62,224,62,.3); } .lg.can { border-color: #8a7430; } .lg.lock { border-color: var(--line); opacity: .6; }

/* ---------- Startseite (neu) ---------- */
#menu { padding: 28px 16px; box-sizing: border-box; }
.home { width: min(1080px, 100%); margin: auto; display: flex; flex-direction: column; gap: 18px; animation: homeIn .6s ease-out both; }
@keyframes homeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 4px 0 2px; }
.hero .emblem { width: 104px; height: 104px; flex: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(224,176,48,.25)); animation: emb 6s ease-in-out infinite; }
@keyframes emb { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
.hero h1.logo { font-size: clamp(42px, 7vw, 78px); line-height: .95; letter-spacing: 6px; text-align: left;
  background: linear-gradient(180deg, #ffe7a0 0%, #e0b030 45%, #9c6c10 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2a1d04) drop-shadow(0 8px 20px rgba(0,0,0,.8)); }
.hero .sub { text-align: left; margin: 8px 0 10px; color: #cfd6bd; text-shadow: 0 1px 4px #000; font-size: 13px; letter-spacing: 3px; }
.feats { display: flex; flex-wrap: wrap; gap: 6px; }
.feats span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(12,16,9,.72); border: 1px solid rgba(224,176,48,.28); color: #e7e2c4; backdrop-filter: blur(4px); }

.home-grid { display: grid; grid-template-columns: 330px 1fr; gap: 18px; align-items: stretch; }
.cmdr, .play, .home .stats { background: linear-gradient(180deg, rgba(26,32,20,.9), rgba(14,18,11,.9)); border: 1px solid rgba(224,176,48,.18); border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(6px); }
.cmdr { padding: 18px; display: flex; flex-direction: column; }
.cmdr-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cmdr .rank { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #1a1305;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #c8961e 60%, #7a5a0e); box-shadow: 0 0 0 3px #2a3320, 0 0 0 4px #e0b03066, 0 4px 12px rgba(0,0,0,.6); }
.kick { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--acc); font-weight: 700; }
.cmdr-t { font-size: 18px; font-weight: 700; }
.lbl { display: block; font-size: 12px; color: var(--dim); margin-bottom: 5px; letter-spacing: .5px; }
input.bigin { width: 100%; box-sizing: border-box; font-size: 18px; padding: 11px 13px; border-radius: 7px; border: 1px solid #56663f; background: rgba(8,11,6,.85); transition: border-color .2s, box-shadow .2s; }
input.bigin:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(224,176,48,.18); }
.acct-more { margin-top: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; background: rgba(0,0,0,.2); }
.acct-more summary { cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.acct-more summary::-webkit-details-marker { display: none; }
.acct-more[open] summary { color: var(--acc); }
.quick { margin-top: auto; padding-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.qb { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--txt); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.qb b { font-size: 16px; width: 22px; text-align: center; }
.qb:hover { border-color: var(--acc); background: rgba(224,176,48,.08); transform: translateY(-1px); }
.qb.acc { border-color: var(--acc); color: var(--acc); }

.play { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tile { position: relative; display: block; width: 100%; padding: 0; border: 1px solid #4b5a36; border-radius: 10px; overflow: hidden; cursor: pointer; text-align: left; color: var(--txt); font: inherit;
  background: #10140c; box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: transform .18s, border-color .18s, box-shadow .18s; }
.tile .art { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .5s; }
.tile .tt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; box-sizing: border-box; padding: 12px 14px;
  background: linear-gradient(90deg, rgba(8,10,6,.92) 0%, rgba(8,10,6,.6) 55%, rgba(8,10,6,.1) 100%); }
.tile .tk { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--acc); font-weight: 700; }
.tile .tn { font-size: 18px; font-weight: 800; letter-spacing: .3px; margin: 2px 0; text-shadow: 0 2px 6px #000; }
.tile .td { font-size: 12px; color: #c2c9b2; max-width: 92%; text-shadow: 0 1px 3px #000; }
.tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--acc); box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(224,176,48,.4), 0 0 24px rgba(224,176,48,.15); }
.tile:hover:not(:disabled) .art { transform: scale(1.05); }
.tile:active:not(:disabled) { transform: translateY(0); }
.tile:disabled { cursor: not-allowed; filter: grayscale(.7) brightness(.7); }
.tile.main { height: 170px; border-color: #8a7430; }
.tile.main .tn { font-size: 28px; color: #ffe7a0; }
.tile.main .td { font-size: 13px; max-width: 60%; }
.tile.main .go { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #1a1305;
  background: linear-gradient(#f0c040, #b0820f); box-shadow: 0 0 0 4px rgba(224,176,48,.25), 0 6px 16px rgba(0,0,0,.6); animation: pulseGo 2.2s ease-in-out infinite; }
.tile.main:disabled .go { animation: none; }
@keyframes pulseGo { 50% { box-shadow: 0 0 0 10px rgba(224,176,48,0), 0 6px 16px rgba(0,0,0,.6); } }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tiles .tile { height: 150px; }
#online-note:empty { display: none; }
#online-note { margin-top: -4px; }
.home .stats { padding: 14px 16px; }
.home .foot { text-align: center; font-size: 11px; opacity: .7; text-shadow: 0 1px 3px #000; }

@media (max-width: 860px) {
  .home-grid { grid-template-columns: 1fr; }
  .play { order: -1; }
  .tiles { grid-template-columns: 1fr; }
  .tiles .tile { height: 104px; }
  .tile.main { height: 150px; }
  .tile.main .tn { font-size: 22px; }
  .tile.main .td { max-width: 72%; }
  .hero { gap: 14px; }
  .hero .emblem { width: 68px; height: 68px; }
  .hero .sub { letter-spacing: 1.5px; font-size: 11px; }
  .quick { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .home, .hero .emblem, .tile.main .go { animation: none; } }
.tile .tt { text-align: left; align-items: flex-start; }
.tile .tn { color: #f2efdc; }
.tile .tt { background: linear-gradient(90deg, rgba(8,10,6,.88) 0%, rgba(8,10,6,.45) 45%, rgba(8,10,6,0) 85%); }
.tile .art { filter: saturate(1.15) brightness(1.15); }
@media (max-width: 860px) {
  #menu { padding: 16px 12px; }
  .hero { flex-direction: column; text-align: center; gap: 6px; }
  .hero > div { min-width: 0; width: 100%; }
  .hero h1.logo { text-align: center; font-size: clamp(34px, 11vw, 60px); letter-spacing: 3px; }
  .hero .sub { text-align: center; }
  .feats { justify-content: center; }
  .home-grid { min-width: 0; }
  .play .tile.main .go { width: 44px; height: 44px; right: 12px; font-size: 18px; }
}
/* Overlays dürfen höher als der Bildschirm sein: dann scrollen statt oben abschneiden */
.overlay { overflow-y: auto; align-items: flex-start; padding: 18px 10px; box-sizing: border-box; overscroll-behavior: contain; }
.overlay > * { margin: auto; }
#help-close { position: sticky; top: 0; z-index: 2; }
.hero h1.logo { overflow-wrap: anywhere; }
/* Radar: kurzes rotes Aufleuchten bei einem neuen Angriff */
#minimap.alert { animation: radarAlert 0.9s ease-out 2; }
@keyframes radarAlert { 0% { box-shadow: 0 0 0 0 rgba(255,50,40,.9), inset 0 0 0 2px rgba(255,60,50,.9); } 100% { box-shadow: 0 0 0 10px rgba(255,50,40,0), inset 0 0 0 2px rgba(255,60,50,0); } }

/* ---------- Spiel-Chat (neu) ---------- */
#gchat { width: 340px; }
#gchat-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: linear-gradient(180deg, rgba(36,44,28,.92), rgba(20,25,15,.92)); border: 1px solid rgba(224,176,48,.35); box-shadow: 0 4px 14px rgba(0,0,0,.45); backdrop-filter: blur(4px); }
#gchat-toggle:hover { border-color: var(--acc); }
#gchat-toggle kbd { opacity: .7; }
#gchat-unread { animation: unreadPop .4s ease-out; }
@keyframes unreadPop { from { transform: scale(1.6); } }
#gchat-panel { margin-top: 6px; padding: 0; overflow: hidden; border-radius: 10px; border: 1px solid rgba(224,176,48,.28);
  background: linear-gradient(180deg, rgba(20,26,15,.94), rgba(10,13,8,.94)); box-shadow: 0 14px 38px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px); animation: gcIn .18s ease-out; }
@keyframes gcIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
#gchat-panel.team { border-color: rgba(110,220,120,.4); }
.gc-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px; background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.06); }
.gc-title { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--acc); display: flex; align-items: center; gap: 7px; margin-right: auto; }
.gc-led { width: 7px; height: 7px; border-radius: 50%; background: #5fdc6a; box-shadow: 0 0 8px #5fdc6a; animation: led 2.4s ease-in-out infinite; }
@keyframes led { 50% { opacity: .35; } }
.gc-ch { display: flex; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 2px; }
.gc-ch button { border: 0; background: none; color: var(--dim); font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.gc-ch button.on { background: linear-gradient(#e8bb3c, #b08414); color: #1a1305; }
#gchat-panel.team .gc-ch button.on { background: linear-gradient(#7fe28a, #3f9a4a); color: #07170a; }
.gc-x { border: 0; background: none; color: var(--dim); font-size: 14px; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.gc-x:hover { background: rgba(255,255,255,.08); color: var(--txt); }
#gchat-log { height: auto; min-height: 44px; max-height: 190px; margin: 0; padding: 6px 4px 6px 8px; font-size: 13px; overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
#gchat-log .ln { padding: 3px 6px; border-radius: 5px; line-height: 1.35; animation: chatIn .25s ease-out; }
#gchat-log .ln:hover { background: rgba(255,255,255,.04); }
#gchat-log .ln.sys { color: var(--dim); font-style: italic; font-size: 12px; }
#gchat-log .ln .tm { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 0 5px; margin-right: 5px; border-radius: 3px; background: rgba(95,220,106,.18); color: #8ff09a; vertical-align: 1px; }
#gchat-log .ln .t { color: #6f7866; font-size: 10px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.gc-in { display: flex; gap: 6px; padding: 8px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.2); }
#gchat .gc-in input { flex: 1; min-width: 0; padding: 7px 11px; font-size: 13px; border-radius: 999px; border: 1px solid #4b5a36; background: rgba(5,7,4,.85); transition: border-color .15s, box-shadow .15s; }
#gchat .gc-in input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(224,176,48,.15); }
#gchat-panel.team .gc-in input:focus { border-color: #6fd67a; box-shadow: 0 0 0 3px rgba(110,220,120,.15); }
#gchat-send { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-size: 14px; color: #1a1305; background: linear-gradient(#f0c040, #b0820f); box-shadow: 0 3px 10px rgba(0,0,0,.4); transition: transform .12s; }
#gchat-send:hover { transform: scale(1.08); }
#gchat-panel.team #gchat-send { background: linear-gradient(#7fe28a, #3f9a4a); color: #07170a; }
.gc-hint { padding: 0 10px 7px; font-size: 10px; color: #6f7866; }
.gc-hint kbd { font-size: 9px; padding: 0 4px; }
@media (max-width: 600px) { #gchat { width: min(340px, calc(100vw - 16px)); } }

/* ---------- Scroll-Zonen an den Kartenrändern ---------- */
.edgez { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .18s; }
.edgez[data-e="t"], .edgez[data-e="b"] { left: 0; right: 0; height: 18px; }
.edgez[data-e="l"], .edgez[data-e="r"] { top: 0; bottom: 0; width: 18px; }
.edgez[data-e="t"] { top: 0; background: linear-gradient(to bottom, rgba(224,176,48,.55), rgba(224,176,48,0)); border-top: 2px solid rgba(255,214,110,.9); }
.edgez[data-e="b"] { bottom: 0; background: linear-gradient(to top, rgba(224,176,48,.55), rgba(224,176,48,0)); border-bottom: 2px solid rgba(255,214,110,.9); }
.edgez[data-e="l"] { left: 0; background: linear-gradient(to right, rgba(224,176,48,.55), rgba(224,176,48,0)); border-left: 2px solid rgba(255,214,110,.9); }
.edgez[data-e="r"] { right: 0; background: linear-gradient(to left, rgba(224,176,48,.55), rgba(224,176,48,0)); border-right: 2px solid rgba(255,214,110,.9); }
/* Pfeile in der Mitte des Randes, die in Scrollrichtung laufen */
.edgez::after { content: ''; position: absolute; width: 14px; height: 14px; border: solid #ffe08a; border-width: 0 3px 3px 0; filter: drop-shadow(0 0 4px rgba(0,0,0,.8)); }
.edgez[data-e="t"]::after { left: 50%; top: 4px; margin-left: -7px; transform: rotate(-135deg); animation: edgeT .8s ease-in-out infinite; }
.edgez[data-e="b"]::after { left: 50%; bottom: 4px; margin-left: -7px; transform: rotate(45deg); animation: edgeB .8s ease-in-out infinite; }
.edgez[data-e="l"]::after { top: 50%; left: 4px; margin-top: -7px; transform: rotate(135deg); animation: edgeL .8s ease-in-out infinite; }
.edgez[data-e="r"]::after { top: 50%; right: 4px; margin-top: -7px; transform: rotate(-45deg); animation: edgeR .8s ease-in-out infinite; }
@keyframes edgeT { 50% { top: 1px; } } @keyframes edgeB { 50% { bottom: 1px; } } @keyframes edgeL { 50% { left: 1px; } } @keyframes edgeR { 50% { right: 1px; } }
.edgez.on { opacity: 1; }
/* Ende der Karte erreicht: rot, Pfeil steht */
.edgez.end { filter: hue-rotate(-40deg) saturate(1.6); opacity: .75; }
.edgez.end::after { animation: none; opacity: .35; }
/* Ruhezustand: hauchdünne Linie, damit man die Zonen findet (nur mit Maus) */
@media (hover: hover) and (pointer: fine) {
  #game:not(.spectate) .edgez:not(.on) { opacity: 1; background: none; border-width: 0; }
  #game .edgez:not(.on)::after { display: none; }
  #game .edgez[data-e="t"]:not(.on) { box-shadow: inset 0 1px 0 rgba(224,176,48,.22); }
  #game .edgez[data-e="b"]:not(.on) { box-shadow: inset 0 -1px 0 rgba(224,176,48,.22); }
  #game .edgez[data-e="l"]:not(.on) { box-shadow: inset 1px 0 0 rgba(224,176,48,.22); }
  #game .edgez[data-e="r"]:not(.on) { box-shadow: inset -1px 0 0 rgba(224,176,48,.22); }
}

/* ---------- Rundenmodus ---------- */
#turnbar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(26,32,20,.94), rgba(12,15,9,.94)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 24px rgba(0,0,0,.55); font-size: 14px; font-weight: 600; white-space: nowrap; }
#turnbar .tb-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 0 10px currentColor; }
#turnbar #tb-time { font-variant-numeric: tabular-nums; font-size: 16px; min-width: 42px; text-align: right; color: #cfd6bd; }
#turnbar.mine { border-color: rgba(224,176,48,.7); box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 18px rgba(224,176,48,.25); }
#turnbar.mine #tb-time { color: #ffe08a; }
#turnbar.warn { animation: tbWarn .8s ease-in-out infinite; border-color: #ff5a4a; }
#turnbar.warn #tb-time { color: #ff7a6a; }
@keyframes tbWarn { 50% { box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 22px rgba(255,80,60,.55); } }
#turnbar #tb-end { border-radius: 999px; padding: 4px 10px; }
#game.replay #tb-end, #game.spectate #tb-end { display: none; }
#turncover { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #1d2516 0%, #0a0d07 70%); animation: tcIn .3s ease-out; }
@keyframes tcIn { from { opacity: 0; } }
#turncover .tc-card { text-align: center; padding: 34px 40px; max-width: 520px; border-radius: 16px; border: 1px solid rgba(224,176,48,.3);
  background: linear-gradient(180deg, rgba(30,37,24,.95), rgba(14,18,11,.95)); box-shadow: 0 24px 70px rgba(0,0,0,.7); }
.tc-k { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--acc); font-weight: 800; }
.tc-flag { width: 64px; height: 64px; margin: 18px auto 10px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(0,0,0,.4), 0 0 0 7px rgba(255,255,255,.15), 0 0 40px currentColor; animation: emb 3s ease-in-out infinite; }
.tc-n { font-size: clamp(30px, 6vw, 48px); font-weight: 900; letter-spacing: 1px; text-shadow: 0 3px 12px rgba(0,0,0,.8); }
.tc-d { margin: 10px 0 22px; color: #cfd6bd; line-height: 1.5; }
.tc-hint { margin-top: 14px; font-size: 12px; color: #7d8772; }
.wz-names { display: flex; flex-direction: column; gap: 10px; }
.wz-nm { display: grid; grid-template-columns: 14px 80px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.wz-nm .dot { width: 14px; height: 14px; border-radius: 50%; }
.wz-nm input { font-size: 16px; padding: 8px 10px; min-width: 0; }
@media (max-width: 560px) { .wz-nm { grid-template-columns: 14px 1fr; } .wz-nm input, .wz-nm select { grid-column: 1 / -1; } }
#turncover { position: fixed; z-index: 200; }           /* verdeckt auch Bauleiste und Geld */
#game.turns #toasts { top: 54px; }                     /* Meldungen unter die Rundenleiste */

/* ---------- Funkzentrale (Lageberichte) ---------- */
#gchat-log .ln.bot, #chatbox .m.bot { border-left: 3px solid #8ad0ff; background: rgba(138,208,255,.07); }
#gchat-log .ln.bot.out, #chatbox .m.bot.out { border-left-color: #ff5a4a; background: rgba(255,90,74,.1); }
.botn { color: #8ad0ff; margin-right: 4px; }
#chatbox .m.bot { padding: 4px 9px; border-radius: 6px; backdrop-filter: blur(3px); }
/* Einzelspiel: Funk ohne Eingabe, nur Meldungen */
#gchat.local .gc-in, #gchat.local .gc-ch, #gchat.local .gc-hint { display: none; }
#gchat.local #gchat-log { max-height: 230px; }
/* Du bist raus */
#outbanner { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 9; text-align: center; padding: 14px 22px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(40,16,14,.94), rgba(18,8,7,.94)); border: 1px solid rgba(255,90,74,.5); box-shadow: 0 14px 40px rgba(0,0,0,.6); animation: gcIn .25s ease-out; }
#outbanner .ob-k { font-size: 22px; font-weight: 900; color: #ff8a7a; letter-spacing: .5px; }
#outbanner .ob-t { margin-top: 4px; color: #e6d6d2; font-size: 14px; }
#outbanner { top: 30%; }