/* ELearning-inspired presentation shared by the two standalone frontends. */
:root { --navy:#112c43; --teal:#087e83; --muted:#627489; color-scheme:light; }
body { font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:14px; line-height:1.55; padding-left:236px; }
button,input,select,textarea { font:inherit; }
button,a,input,select { outline-offset:4px; }
:focus-visible { outline:3px solid #49a9ad; }
[hidden] { display:none !important; }
a { color:var(--teal); }
button,.button-link { display:inline-block; background:var(--teal); color:white; cursor:pointer; text-decoration:none; line-height:1.2; border-radius:7px; min-height:42px; font-weight:600; padding:10px 16px; border:1px solid transparent; transition:background .15s,border-color .15s; }
button:hover,.button-link:hover { background:#08676b; }
button.secondary,.button-link.secondary { background:white; color:var(--teal); border-color:#bdccd8; }
button.secondary:hover,.button-link.secondary:hover { background:#edf5f7; border-color:#9eb7c5; }
button:disabled { background:#e9eef3; color:#627489; cursor:not-allowed; }
input[type="text"],input[type="number"],input[type="search"],select,.admin-input,#game-select,#new-game-bar select { background:#fff; color:#1d2c3c; border:1px solid #bdccd8; border-radius:6px; padding:10px 12px; min-height:42px; font-size:14px; max-width:100%; }
h1 { color:var(--navy); font-size:30px; line-height:1.2; font-weight:700; letter-spacing:-.7px; margin:0 0 8px; }
h2 { color:var(--navy); }
p { color:var(--muted); }
.muted { color:var(--muted); font-size:13px; font-weight:400; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-sidebar { width:236px; position:fixed; inset:0 auto 0 0; z-index:5; background:var(--navy); color:#c3d4e1; padding:30px 20px; display:flex; flex-direction:column; }
.brand { color:white; display:flex; align-items:center; gap:9px; font-size:21px; font-weight:700; text-decoration:none; white-space:nowrap; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; letter-spacing:-6px; padding-right:6px; color:#65d5d7; }
.navlabel { color:#95adbf; font-size:11px; letter-spacing:1.5px; margin:40px 12px 13px; }
.app-sidebar nav { display:grid; gap:5px; }
.nav-item,.admin-tab-btn { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; color:#c3d4e1; padding:12px 13px; border:0; border-radius:7px; font-size:14px; font-weight:400; text-decoration:none; }
.nav-item svg,.admin-tab-btn svg,.sidebar-bottom svg { width:20px; height:20px; flex-shrink:0; }
.nav-item:hover,.admin-tab-btn:hover { background:#1b3c54; color:white; }
.nav-item.active,.admin-tab-btn.active { background:#24475e; color:white; box-shadow:none; }
.sidebar-bottom { margin-top:auto; padding:24px 10px 0; font-size:13px; color:#a8bfce; }
/* In der Debug-/Admin-Sidebar (kein .sidebar-user vorhanden) bleibt der obige
   margin-top:auto der einzige Weg, den Schriftzug nach unten zu schieben.
   Existiert .sidebar-user (Spieler-Frontend), soll NUR dort geschoben werden -
   .sidebar-bottom ruckt direkt darunter, ohne zusaetzliche Luecke. */
.sidebar-user + .sidebar-bottom { margin-top:0; padding-top:10px; }
.sidebar-bottom a { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
#current-username { font-weight:600; color:var(--navy); }
#discord-avatar { width:37px; height:37px; border-radius:50%; }
.view,main#admin,main#board { width:100%; max-width:1580px; margin:0 auto; padding:32px 38px 50px; gap:22px; }

/* margin-top:auto am Nutzerbereich haelt Nutzerzeile und Schriftzug als
   gemeinsamen Block unten, ohne eine Luecke dazwischen. */
.sidebar-user { margin-top:auto; padding:14px 4px 0; display:flex; align-items:center; gap:8px; min-width:0; }
.sidebar-user #discord-avatar { width:30px; height:30px; flex-shrink:0; }
.sidebar-user #current-username { flex:1; min-width:0; color:#e7f0f5; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-icon-btn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; min-height:0; padding:0; background:transparent; color:#95adbf; border:0; border-radius:7px; }
.sidebar-icon-btn svg { width:17px; height:17px; }
.sidebar-icon-btn:hover { background:#1b3c54; color:white; }
.pagehead { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; margin-bottom:4px; }
.pagehead p { margin:5px 0 0; font-size:15px; }
.page-actions { display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; }
.overview-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.overview-stat { display:flex; align-items:center; gap:18px; padding:24px; background:white; border:1px solid #dce4eb; border-radius:12px; }
.overview-stat>svg { width:48px; height:48px; color:var(--navy); background:#eef5f7; border-radius:50%; padding:11px; flex-shrink:0; }
.overview-stat span { display:block; color:var(--muted); font-size:14px; }
.overview-stat strong { display:block; font-size:32px; line-height:1.2; margin-top:5px; font-weight:650; color:var(--navy); }
.panel,.player-panel,.admin-section { background:white; border:1px solid #dce4eb; border-radius:12px; padding:24px; box-shadow:0 2px 4px #112c4303; }
.panel h2,.player-panel h2,.admin-section h2 { font-size:20px; text-transform:none; letter-spacing:-.3px; color:var(--navy); }
.panel-toolbar { margin-bottom:20px; }
#my-games-list,#lobby-list { overflow-x:auto; }
#lobby-list table,#my-games-list table,table.admin-table { font-size:14px; }
#lobby-list th,#my-games-list th,table.admin-table th { background:#f8fafc; text-transform:none; letter-spacing:0; font-size:12px; padding:13px 12px; }
#lobby-list td,#my-games-list td,table.admin-table td { padding:16px 12px; }
table.admin-table td.wrap { min-width:190px; }
.row-actions button { min-height:36px; padding:7px 14px; }
.status-your-turn,.status-won { color:#17694f; }
.lobby-empty { background:#f8fafc; border-radius:8px; padding:36px 16px; font-style:normal; }
.admin-tabs { display:grid; gap:5px; margin:0; padding:0; border:0; }
main#admin>.pagehead { margin-bottom:28px; }
#card-metrics .overview-stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:28px; }
#card-metrics .overview-stat { padding:22px 18px; gap:12px; }
.admin-role,.round-badge { background:#e1f0ef; color:#087177; border-radius:6px; padding:7px 13px; font-weight:600; white-space:nowrap; }
.admin-filter-btn,.help-deck-filter-btn { border-radius:7px; padding:8px 14px; }
.type-pill { border-radius:5px; padding:4px 9px; font-size:12px; }
.admin-stat-row { gap:18px; }
.admin-stat-row .stat-chip { padding:14px 18px; border:1px solid #dce4eb; border-radius:8px; min-width:120px; }
.admin-stat-row .stat-chip span { font-size:12px; text-transform:none; margin-top:5px; }
.admin-input { min-width:180px; }
.admin-toolbar input { flex:1; max-width:360px; }
.admin-section { margin-bottom:22px; overflow-x:auto; }
.admin-placeholder { padding:44px 20px; }
/* Split login, matching the approved navy / light composition. */
body[data-view="username"] { padding-left:0; }
body[data-view="username"]>.app-sidebar,body[data-view="username"]>header { display:none; }
#view-username { max-width:none; min-height:100vh; padding:0; display:grid; grid-template-columns:40% 60%; gap:0; }
.login-aside { background:radial-gradient(ellipse at 25% 65%,#1a425c 0,transparent 65%),var(--navy); color:white; padding:38px 48px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.login-aside .brand { font-size:27px; }
.login-story { padding:50px 0; }
.login-story h1 { color:white; font-size:clamp(40px,4.6vw,74px); line-height:1.08; letter-spacing:-2px; }
.login-story h1 em { color:#5cdae0; font-style:normal; }
.login-story p { color:#afc6d7; font-size:21px; line-height:1.55; margin:24px 0; }
.login-aside small { color:#8bb4c6; font-size:10px; letter-spacing:2.5px; }
.login-cards { display:flex; align-items:center; justify-content:center; height:260px; margin:45px -20px 0; }
.hero-card { width:145px; height:215px; border:1px solid #4ea8bb; border-radius:14px; background:linear-gradient(140deg,#123449,#0d2235); color:#67cbd5; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 10px 35px #06172780,inset 0 0 0 6px #112c43; }
.hero-card svg { width:75px; height:75px; stroke-width:.8; }
.hero-card span { font-size:9px; letter-spacing:2px; margin-top:30px; }
.hero-card:first-child { transform:translate(28px,20px) rotate(-17deg); }
.hero-card:nth-child(2) { z-index:1; transform:translateY(-10px) rotate(5deg); }
.hero-card:last-child { transform:translate(-28px,24px) rotate(20deg); }
.login-main { display:grid; place-items:center; padding:50px; }
.center-card { width:100%; max-width:540px; margin:0; padding:48px; background:white; border:1px solid #dce4eb; border-radius:14px; text-align:center; }
.center-card h1 { font-size:32px; }
.login-subtitle { font-size:19px; margin:12px 0 22px; }
.center-card .hint { font-size:13px; line-height:1.65; }
.discord-login-btn { background:var(--teal); border-radius:7px; padding:15px; font-size:16px; margin-top:24px; }
.discord-login-btn:hover { background:#08676b; }
.divider { margin:28px 0 22px; font-size:13px; text-transform:none; letter-spacing:0; }
#username-form { gap:10px; }
#username-form label { text-align:left; font-weight:600; }
#username-form input { min-height:50px; }
#username-form button { margin-top:10px; min-height:50px; }
.text-button { color:var(--teal); background:transparent; border:0; margin:26px auto 0; font-size:14px; }
.text-button:hover { background:#edf5f7; }
/* Actual cards keep all costs, abilities and targeting states. */
.stats { display:flex; flex-wrap:wrap; gap:10px; }
.game-stat { display:flex; flex-direction:column; min-width:90px; padding:9px 14px; border:1px solid #dce4eb; border-radius:7px; background:#fff; }
.game-stat>span { font-size:11px; color:var(--muted); }
.game-stat>b { font-size:20px; color:var(--navy); }
.board-row,.hand-row,.slot-row { background:transparent; border:0; padding:12px 0 0; gap:14px; margin:0; }
.board-row,.slot-row { min-height:95px; }
.panel.is-active,.player-panel.is-active { border-color:#79b6b9; box-shadow:inset 3px 0 #087e83; }
.tcg-card { width:164px; flex-shrink:0; border:1px solid #b6c9d5; border-left-width:3px; border-radius:9px; background:white; box-shadow:0 3px 8px #112c4312; transition:transform .15s,box-shadow .15s; }
.tcg-card:hover { transform:translateY(-3px); box-shadow:0 6px 14px #112c4325; }
.tcg-card.exhausted { opacity:.62; filter:saturate(.5); }
.tcg-card.selectable-target { border-color:var(--teal); box-shadow:0 0 0 3px #087e83; }
.tcg-card-art { height:78px; }
.tcg-card.type-unit .tcg-card-art { --art-a:#dcecf1; --art-b:#bfdce4; }
.tcg-card.type-unitUpgrade .tcg-card-art { --art-a:#f8eedb; --art-b:#ead8b2; }
.tcg-card.type-event .tcg-card-art { --art-a:#eee9f6; --art-b:#d8cce9; }
.tcg-card.type-zone .tcg-card-art { --art-a:#dbf3ef; --art-b:#b9e4dc; }
.tcg-card.type-baseUpgrade .tcg-card-art { --art-a:#f6e2ef; --art-b:#e6c1dc; }
.tcg-card.type-base .tcg-card-art { --art-a:#e0f1ee; --art-b:#bcded9; }
.tcg-card-art-icon { font-size:30px; }
.tcg-card-badge { color:white; background:#087e83; }
.tcg-card-body { padding:12px; gap:7px; font-size:12px; }
.tcg-card-name { color:var(--navy); font-size:14px; }
.tcg-card-stats { font-size:15px; font-weight:700; color:var(--navy); }
.tcg-card-flavor { font-size:10px; line-height:1.5; }
.middle-bar { padding:5px 0; gap:10px; }
#pending-action-hint { text-align:left; background:#e1f0ef; border-radius:7px; padding:12px 16px; min-width:180px; }
#modal-box { width:min(440px,100%); padding:28px; box-shadow:0 20px 70px #112c4333; }
#modal-box h2 { font-size:22px; }
#modal-backdrop { padding:20px; background:#112c4370; }
#help-backdrop { background:#112c4370; }
#help-header { background:white; }
#help-body { padding:24px; }
#new-game-bar { background:#f8fafc; padding:18px 38px; }
#game-controls { flex-wrap:wrap; }
#log-panel { margin:0 38px 40px; padding:24px; background:white; border:1px solid #dce4eb; border-radius:12px; max-width:none; }
#log-panel h2 { font-size:20px; }
#log-list { color:var(--muted); overflow-wrap:anywhere; max-height:300px; overflow-y:auto; font-size:12px; }
@media(min-width:1500px) { .pagehead { align-items:center; } }
@media(max-width:1250px) { .pagehead { flex-direction:column; } #card-metrics .overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .overview-stat { padding:20px 16px; gap:12px; } .overview-stat>svg { width:40px; height:40px; padding:9px; } .login-aside { padding:34px; } .center-card { padding:34px; } .login-main { padding:35px; } body>header { flex-wrap:wrap; } }
@media(max-width:900px) { body { padding-left:200px; } .app-sidebar { width:200px; padding:25px 14px; } .brand { font-size:18px; } .view,main#admin,main#board { padding:26px 24px 40px; } body>header { padding:15px 24px; } .overview-stats { gap:10px; } .overview-stat { display:block; padding:15px; } .overview-stat>svg { display:none; } .overview-stat span { font-size:12px; } .overview-stat strong { font-size:28px; } h1 { font-size:27px; } .login-cards { transform:scale(.8); } }
@media(max-width:700px) { body { padding-left:0; } .app-sidebar { position:static; width:auto; padding:15px 18px; } .app-sidebar .brand { margin-bottom:12px; } .app-sidebar nav,.admin-tabs { display:flex; gap:5px; flex-wrap:wrap; } .nav-item,.admin-tab-btn { width:auto; min-height:38px; padding:8px 10px; font-size:13px; gap:7px; } .nav-item svg,.admin-tab-btn svg { width:17px; height:17px; } .navlabel,.sidebar-bottom { display:none; } body>header { min-height:60px; padding:12px 18px; } #header-user { gap:7px; justify-content:flex-start; } #header-user button { padding:7px 10px; min-height:36px; font-size:12px; } .view,main#admin,main#board { padding:23px 16px 36px; gap:18px; } h1 { font-size:25px; } .pagehead { gap:16px; } .pagehead p { font-size:14px; } .page-actions { flex-shrink:1; } .page-actions button { font-size:13px; padding:9px 12px; } .panel,.player-panel,.admin-section { padding:18px; } .panel h2,.player-panel h2 { font-size:18px; } .panel-toolbar input { width:100%; } #view-username { grid-template-columns:1fr; } .login-aside { padding:24px; } .login-story { padding:25px 0 0; } .login-story h1 { font-size:38px; letter-spacing:-1px; } .login-story h1 br { display:none; } .login-story p { margin:12px 0 0; font-size:16px; } .login-story p br { display:none; } .login-aside small,.login-cards { display:none; } .login-main { padding:25px 18px 40px; } .center-card { padding:28px 22px; } .center-card h1 { font-size:27px; } .login-subtitle { font-size:17px; } .tcg-card { width:145px; } .board-row,.hand-row { gap:10px; } .game-stat { flex:1; min-width:100px; } #help-backdrop { padding:12px; } #help-header { flex-wrap:wrap; gap:8px; padding:12px; } #help-body { padding:16px; } .help-tab-btn { font-size:12px; padding:8px 10px; } #new-game-bar { padding:16px; } #log-panel { margin:0 16px 30px; } .admin-toolbar input { max-width:none; width:100%; } }
.card-detail-button { padding:0; min-height:32px; text-align:left; background:transparent; color:var(--navy); border:0; font-size:14px; }
.card-detail-button:hover { background:transparent; color:var(--teal); text-decoration:underline; }
.selected-card-row { background:#eef8f7; }
.cell-preview { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-width:260px; font-size:12px; }
.table-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; color:var(--muted); font-size:13px; }
.table-pagination>div { display:flex; gap:8px; }
.table-pagination button { min-height:34px; padding:6px 12px; font-size:12px; }
.selected-card-detail { display:flex; justify-content:space-between; gap:24px; }
.selected-card-detail h2 { margin:9px 0; font-size:23px; }
.selected-card-detail p { margin:8px 0; }
.card-detail-flavor { font-style:italic; font-size:12px; }
.detail-values { display:flex; gap:18px; flex-shrink:0; }
.detail-values span { color:var(--muted); font-size:12px; }
.detail-values b { display:block; color:var(--navy); margin-top:8px; }
#view-game { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:start; }
.match-timeline { grid-column:2; grid-row:1 / -1; min-height:440px; position:sticky; top:22px; }
#view-game>#opponent-panel,#view-game>.middle-bar,#view-game>#own-panel,#view-game>.hand-panel { grid-column:1; }
#opponent-panel,#own-panel { display:grid; grid-template-columns:minmax(120px,1fr) auto; gap:10px; align-items:center; }
#opponent-panel>h2,#own-panel>h2 { margin:0; }
#opponent-panel>.stats,#own-panel>.stats { margin:0; gap:6px; }
.game-stat { min-width:60px; padding:6px 9px; }
.game-stat>b { font-size:17px; }
#opponent-panel>.panel-body,#own-panel>.panel-body { grid-column:1 / -1; }
#view-game .slot-row,#view-game .board-row { min-height:55px; justify-content:center; }
#view-game .tcg-card-flavor { display:none; }
#view-game .tcg-card-art { height:58px; }
#view-game .tcg-card { width:148px; }
#view-game .tcg-card-body { padding:9px; font-size:11px; }
#view-game .hand-row { flex-wrap:nowrap; overflow-x:auto; padding:8px 3px 14px; scroll-snap-type:x proximity; }
#view-game .hand-row .tcg-card { scroll-snap-align:start; }
#view-game .silo { width:110px; }
#view-game .silo-scale { height:190px; }
.middle-bar { flex-wrap:wrap; }
.tcg-card-art-icon svg { width:42px; height:42px; display:block; color:#28536a; }
.timeline-entry { position:relative; border-left:1px solid #dce4eb; padding:0 0 22px 18px; margin-left:5px; }
.timeline-entry:before { content:''; position:absolute; left:-4px; top:7px; width:7px; height:7px; border-radius:50%; background:#93a9ba; }
.timeline-entry:first-child:before { background:var(--teal); }
.timeline-entry strong { display:block; color:var(--navy); font-size:13px; font-weight:600; }
.timeline-entry span { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.timeline-entry.divider { border-left-color:transparent; padding-left:0; margin-left:0; text-align:center; }
.timeline-entry.divider:before { display:none; }
.timeline-entry.divider strong { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
@media(max-width:1250px) { #view-game { grid-template-columns:minmax(0,1fr); } .match-timeline { grid-column:1; grid-row:auto; order:6; position:static; min-height:0; } #match-log { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { #opponent-panel,#own-panel { grid-template-columns:minmax(0,1fr); } #opponent-panel>.stats,#own-panel>.stats { grid-column:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .selected-card-detail { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }

/* Original GC logo: preserve the supplied portrait proportions. */
.brand-logo { display:block; flex-shrink:0; width:39px; height:64px; color:#fff; }
.brand-logo g { fill:currentColor; }
.login-aside .brand-logo { width:52px; height:85px; }
@media(max-width:700px) { .brand-logo { width:30px; height:49px; } .login-aside .brand-logo { width:39px; height:64px; } }

/* =========================================================================
   LANProtocol-Ergaenzungen: Tableau (Base-Upgrades/Base/Zone/Einheitenarena),
   Silo (RAM-/Ressourcen-Pegel), Ecken-Layout und Schadens-Badge auf Karten,
   Animationen. Siehe SPIELREGELN.md/KARTEN_ERSTELLEN.md fuer die Regeln
   dahinter. In der navy/teal-Optik des Redesigns gehalten statt dem
   urspruenglichen dunklen Theme dieser Komponenten.
   ========================================================================= */

.stats .passed-tag { color:#b8790f; font-weight:700; }

.panel-body { display:flex; gap:18px; align-items:flex-start; }
.panel-tableau { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
.tableau-row { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.tableau-col { min-width:0; max-width:100%; display:flex; flex-direction:column; gap:6px; }
.tableau-col-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }

.slot-empty { color:var(--muted); font-style:italic; font-size:12.5px; }

.base-card { width:172px; min-height:150px; border-radius:10px; background:linear-gradient(135deg,#e0f1ee,#f8fafc); border:1px solid #b6c9d5; border-left:3px solid var(--teal); box-shadow:0 3px 8px #112c4312; padding:12px 14px; display:flex; flex-direction:column; gap:6px; position:relative; color:var(--navy); }
.base-card .base-name { font-weight:700; font-size:14px; color:var(--navy); }
.base-card .base-stats { display:flex; gap:12px; font-size:12.5px; color:var(--muted); }
.base-card .base-stats b { color:var(--navy); }
.base-card .base-production { font-size:11px; color:var(--teal); }
.base-card.protected::after { content:'🛡 Tank-Schutz aktiv'; font-size:10px; color:var(--teal); margin-top:auto; }
.base-card.selectable-target { border-color:var(--teal); box-shadow:0 0 0 3px #087e83; cursor:pointer; }
.base-card.blocked-target { opacity:.5; cursor:not-allowed; }

.mini-stat-chip { background:#f8fafc; border:1px solid #dce4eb; border-radius:8px; padding:7px 12px; font-size:11.5px; color:var(--muted); text-align:center; min-width:64px; }
.mini-stat-chip b { display:block; font-size:16px; color:var(--navy); }

.zone-slot { width:128px; min-height:56px; border-radius:10px; background:#f8fafc; border:1px solid #dce4eb; padding:9px 11px; font-size:11.5px; color:var(--muted); }
.zone-slot .zone-name { font-weight:700; color:var(--teal); }
.zone-slot.zone-empty { color:var(--muted); font-style:italic; display:flex; align-items:center; justify-content:center; }

/* Kartenwerte: Kosten oben links, Ressourcenproduktion oben rechts, HP unten
   links, Firewall unten rechts (nur Einheiten/Base), Kartentyp unten Mitte,
   roter Schadens-Kreis oben mittig (siehe renderCardTemplate() in app.js). */
.tcg-corner { position:static; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; z-index:2; white-space:nowrap; }
.tcg-corner-cost { background:var(--navy); color:#fff; }
.tcg-corner-production { margin-left:auto; background:#ffd98a; color:#5a3d05; }
.tcg-corner-hp { background:#fdeceb; color:#a52d3b; border:1px solid #f3c6c6; }
.tcg-corner-firewall { background:#e7f0ff; color:#335a99; border:1px solid #c7d9f5; }
.tcg-card-type-label { overflow-wrap:anywhere; text-align:center; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:5px 0 7px; border-top:1px dashed #dce4eb; }
.tcg-attack-line { color:var(--navy); font-weight:700; font-size:12px; }
.tcg-buff-line { color:#98671e; font-size:11px; }

.tcg-damage-badge { position:absolute; top:-9px; left:50%; transform:translateX(-50%); min-width:22px; height:22px; padding:0 5px; border-radius:999px; background:linear-gradient(160deg,#ff7a7a,#c62638); color:#fff; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 2px 6px #112c4340; z-index:6; }

/* Silo: RAM-/Ressourcen-Pegelanzeige, siehe renderSilo() in app.js. */
.silo { width:122px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 8px 10px; background:#f8fafc; border:1px solid #dce4eb; border-radius:10px; }
.silo-title { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.silo-scale { display:flex; align-items:stretch; height:220px; }
.silo-numbers { display:flex; flex-direction:column; justify-content:space-between; width:17px; font-size:9px; line-height:1; color:var(--muted); text-align:right; padding-right:3px; }
.silo-gauge { position:relative; width:28px; margin:0 5px; background:#fff; border:1px solid #dce4eb; border-radius:6px; }
.silo-gauge-fill { position:absolute; left:0; right:0; bottom:0; border-radius:0 0 5px 5px; }
.silo-gauge.resource .silo-gauge-fill { background:rgba(51,90,153,.35); }
.silo-gauge.ram .silo-gauge-fill { background:rgba(152,103,30,.35); }
.silo-ram-bonus-band { position:absolute; left:-1px; right:-1px; top:-1px; background:rgba(118,88,165,.16); border-bottom:1px dashed rgba(118,88,165,.6); border-radius:6px 6px 0 0; }
.silo-marker { position:absolute; left:50%; width:15px; height:15px; border-radius:50%; transform:translate(-50%,50%); border:2px solid #f8fafc; z-index:3; }
.silo-marker.resource { background:var(--accent-blue,#335a99); }
.silo-marker.ram-limit { background:#c62638; }
.silo-marker.ram-used { background:#98671e; }
.silo-column-caption { display:flex; width:100%; font-size:10px; color:var(--muted); }
.silo-column-caption span { flex:1; text-align:center; }
.silo-legend { display:flex; flex-direction:column; gap:3px; font-size:9.5px; color:var(--muted); align-self:flex-start; }
.silo-legend span { display:flex; align-items:center; gap:5px; }
.silo-legend .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

@keyframes gc-card-enter { from { opacity:0; transform:scale(.55) translateY(14px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes gc-card-destroy { from { opacity:1; transform:scale(1) rotate(0deg); } to { opacity:0; transform:scale(.7) rotate(-6deg) translateY(8px); } }
@keyframes gc-damage-shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-5px); } 40% { transform:translateX(5px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } }
@keyframes gc-float-up { from { opacity:1; transform:translate(-50%,0); } to { opacity:0; transform:translate(-50%,-30px); } }
.anim-enter { animation:gc-card-enter .35s ease-out; }
.anim-destroy { animation:gc-card-destroy .6s ease-in forwards; pointer-events:none; }
.anim-damage { animation:gc-damage-shake .4s ease-in-out; box-shadow:0 0 0 3px #c6263866; }
.floating-damage { position:absolute; top:4px; left:50%; color:#c62638; font-weight:800; font-size:15px; text-shadow:0 1px 2px #fff; animation:gc-float-up .9s ease-out forwards; pointer-events:none; z-index:7; }
@media(prefers-reduced-motion:reduce) { .anim-enter,.anim-destroy,.anim-damage,.floating-damage { animation:none!important; box-shadow:none!important; } }

/* The current card types retain the reference design and their full game values. */
.tcg-card { position:relative; overflow:visible; }
.tcg-card-art { flex-shrink:0; }
.tcg-card-resources { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px; padding:7px; background:#f8fafc; border-radius:8px 8px 0 0; min-height:32px; }
.tcg-card-resources .tcg-corner { white-space:normal; overflow-wrap:anywhere; }
.tcg-card-values { display:flex; justify-content:space-between; gap:8px; padding:4px 9px 9px; }
.tcg-card-body { flex:1; min-width:0; }
.tcg-card-name,.tcg-card-extra,.tcg-attack-line { overflow-wrap:anywhere; }
.zone-slot:has(.tcg-card) { width:auto; padding:0; border:0; background:transparent; }
.slot-row:has(.slot-empty) { min-height:36px; }
.panel-body,.hand-panel,.match-timeline { min-width:0; }
#match-log { max-height:calc(100vh - 145px); overflow-y:auto; overflow-wrap:anywhere; }
#view-game .hand-row { padding-top:14px; }
.admin-filter-btn { background:#f8fafc; color:var(--muted); border-color:#bdccd8; }
.admin-filter-btn.active { background:var(--teal); color:white; border-color:var(--teal); }
.detail-values { flex-wrap:wrap; }
@media(max-width:1250px) { #match-log { max-height:360px; gap:0 20px; } }
@media(max-width:700px) {
  .panel-body { flex-direction:column; }
  .silo,#view-game .silo { width:100%; display:grid; grid-template-columns:1fr auto 1fr; gap:8px 16px; padding:12px; }
  .silo-title { grid-column:1; }
  .silo-scale,#view-game .silo-scale { grid-column:2; grid-row:1 / 4; height:150px; }
  .silo-column-caption { grid-column:2; grid-row:4; }
  .silo-legend { grid-column:3; grid-row:1 / 4; align-self:center; }
  .panel-tableau { width:100%; }
  .tableau-row { gap:12px; }
  .base-card { width:148px; }
  #match-log { display:block; }
  #opponent-panel>h2,#own-panel>h2,.player-panel h2 { flex-wrap:wrap; }
  #header-stats { flex-wrap:wrap; }
  #game-select { min-width:0; }
  .table-pagination { flex-wrap:wrap; }
}

/* Fehler-Hinweis: kurzer roter Flash statt eines lautlos ersetzten Texts
   (siehe flashHint() in app.js) - fuer abgelehnte Aktionen wie Ressourcen-/
   RAM-Mangel, die sonst leicht uebersehen werden. */
@keyframes gc-hint-flash { 0%,18%,82%,100% { background:#fdeceb; color:#a52d3b; } 50% { background:#f8d3d1; } }
#pending-action-hint.flash-error { animation:gc-hint-flash 2.4s ease-in-out; font-weight:700; }

/* Kartenvorschau beim Hoveren eines Log-Eintrags (siehe refreshMatchLog()/
   refreshLog() in app.js) - macht auch ein laengst abgeschlossenes gegnerisches
   Event im Nachhinein nachschlagbar. */
.has-card-preview { cursor:help; text-decoration:underline dotted; text-underline-offset:3px; }
#log-card-preview { position:fixed; z-index:50; pointer-events:none; filter:drop-shadow(0 8px 20px #112c4340); }
#log-card-preview .tcg-card { width:180px; cursor:default; }

/* Ablage-Ansicht: Klick auf den "Ablage"-Stat oeffnet alle bisher abgelegten
   Karten dieser Seite (siehe openDiscardViewer() in app.js). */
.game-stat[data-stat="Ablage"] { cursor:pointer; }
.game-stat[data-stat="Ablage"]:hover { border-color:var(--teal); }
#discard-backdrop { position:fixed; inset:0; background:#112c4370; display:flex; align-items:center; justify-content:center; z-index:30; padding:24px; }
#discard-box { background:white; border:1px solid #dce4eb; border-radius:14px; width:100%; max-width:820px; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; }
#discard-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid #dce4eb; }
#discard-header h2 { margin:0; font-size:16px; }
#discard-cards { padding:18px; overflow-x:auto; display:flex; gap:10px; }
#discard-cards .tcg-card { flex-shrink:0; cursor:default; }