/* Live card frames based on draft/Template-Einheit.png and the landscape base.
   Artwork, numbers and rules remain data-driven; the reference text is not used. */
.tcg-card {
  --frame-cyan:#65edf1; --frame-dark:#061821;
  position:relative; padding:9px; gap:0; border:2px solid #173e48;
  border-left-width:2px; border-radius:13px; overflow:visible;
  background:repeating-linear-gradient(120deg,#b3e5e908 0 1px,transparent 1px 13px),linear-gradient(140deg,#16343d,#030d13 40%,#102b35 75%,#030b11);
  box-shadow:0 4px 12px #071a3d55,inset 0 0 0 2px #030c13,inset 0 0 0 3px #487681;
}
.tcg-card::before { content:""; position:absolute; inset:5px; border:1px solid #5ee4eaa6; border-radius:8px; pointer-events:none; box-shadow:inset 0 0 9px #38d5dc33,0 0 6px #38d5dc25; }
.tcg-card .tcg-card-heading { display:flex; align-items:stretch; gap:4px; position:relative; z-index:1; min-height:53px; }
.tcg-card-costs { flex:0 0 auto; display:flex; flex-direction:column; gap:3px; max-width:40%; }
.tcg-card-title-group { flex:1; min-width:0; align-self:center; }
/* Produktion bei Einheiten (z.B. Stromtechniker): sitzt rechts oben in der
   Kopfzeile statt unten in .tcg-card-values, wo sie bei Einheiten (Speicher +
   Firewall bereits vorhanden) als drittes Element zu eng wird/umbricht - siehe
   renderCardTemplate(). Bei Base/Base-Upgrade bleibt Produktion unten, dafuer
   ist .tcg-card-values dort bereits zugeschnitten (siehe .base-card unten). */
.tcg-card-heading-production { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; max-width:40%; }
.tcg-card-heading-production .tcg-corner-production { margin-left:0; }
.tcg-card .tcg-card-type-label { border:0; margin:0 0 2px; padding:2px 5px; text-align:right; color:#c0f2f5; font:600 8px/1.3 "Bahnschrift","Arial Narrow",sans-serif; text-transform:uppercase; letter-spacing:1.4px; overflow-wrap:anywhere; }
.tcg-card .tcg-card-name { padding:6px 6px 5px; color:#03141e; background:linear-gradient(125deg,#eefcfaed,#a6dbe2 60%,#d5faff); border:1px solid #a5f9fb; box-shadow:inset 0 0 0 2px #28586430; font:700 12px/1.12 "Bahnschrift","Arial Narrow","Segoe UI",sans-serif; text-transform:uppercase; overflow-wrap:anywhere; letter-spacing:.25px; }
.tcg-card-status { padding:2px 5px; font-size:9px; color:#a3eeeb; }
.tcg-card-status.ability-badge-btn { cursor:pointer; text-decoration:underline dotted; }
.tcg-card-status.ability-badge-btn:hover { color:#fff2a8; }
.tcg-card .tcg-art-frame { border:1px solid #4de5ed; position:relative; margin-top:4px; box-shadow:0 0 8px #37d6dd30; }
.tcg-card .tcg-card-art,#view-game .tcg-card .tcg-card-art { height:112px; background:radial-gradient(ellipse at 50% 45%,#245d70,transparent 65%),repeating-linear-gradient(0deg,#6dd9e810 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,#6dd9e810 0 1px,transparent 1px 14px),linear-gradient(140deg,#092532,#04101b); }
.tcg-card .tcg-card-art.has-image { background-size:cover; background-position:center; }
.tcg-card .tcg-card-art-icon { opacity:.9; color:#8ee8ed; filter:drop-shadow(0 0 10px #36ccdc80); }
.tcg-card .tcg-card-art-icon svg { width:52px; height:52px; color:inherit; }
.tcg-card .tcg-card-values { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:5px; margin-top:-25px; padding:0 2px; position:relative; z-index:1; min-height:48px; }
.tcg-card .tcg-card-values:empty { min-height:0; height:0; margin:0; }
.tcg-card .tcg-corner { position:static; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; min-width:44px; max-width:100%; min-height:48px; border:1px solid #a2f7ff; border-radius:0; padding:5px 7px; color:#e5ffff; background:linear-gradient(140deg,#174658,#062431); box-shadow:inset 0 0 0 2px #07303e,inset 0 0 12px #20e7ee70; clip-path:polygon(13% 0,85% 0,100% 15%,100% 84%,86% 100%,14% 100%,0 85%,0 15%); white-space:normal; }
.tcg-metric-label { font:700 8px/1.2 "Bahnschrift","Arial Narrow",sans-serif; text-transform:uppercase; letter-spacing:.4px; overflow-wrap:anywhere; }
.tcg-corner b { font:800 27px/1 "Bahnschrift","Arial Narrow",sans-serif; text-shadow:0 0 10px #9ae9f766; }
.tcg-corner small { font-size:7px; line-height:1.2; margin-top:2px; }
.tcg-card .tcg-corner-hp { background:linear-gradient(135deg,#842c3b,#370e1b); color:#fff0ed; border-color:#ffb4a7; box-shadow:inset 0 0 0 2px #66202b,inset 0 0 14px #ff5f6670; }
.tcg-card .tcg-corner-hp b { text-shadow:0 0 9px #ff6161; }
.tcg-card .tcg-corner-firewall { margin-left:auto; background:linear-gradient(135deg,#175786,#062440); color:#edfbff; border-color:#a3e8ff; box-shadow:inset 0 0 0 2px #0b4064,inset 0 0 14px #31b7ff70; }
.tcg-card .tcg-corner-production { margin-left:auto; background:linear-gradient(135deg,#25654d,#06362d); color:#e6fff0; border-color:#b5f8d3; box-shadow:inset 0 0 0 2px #1b5743,inset 0 0 12px #40ea9370; }
.tcg-card .tcg-card-body,#view-game .tcg-card .tcg-card-body { flex:1; margin-top:6px; padding:9px; gap:7px; background:repeating-linear-gradient(0deg,#f1ffff24 0 1px,transparent 1px 5px),linear-gradient(130deg,#d9f1f2,#a7cbd0); border:1px solid #91e8eb; box-shadow:inset 0 0 0 2px #f4ffff40; color:#102c36; font-size:11px; }
.tcg-card .tcg-card-body:empty { display:none; }
.tcg-card .tcg-card-text,.tcg-card .tcg-card-extra { color:#173641; line-height:1.4; font-size:11px; }
.tcg-card .tcg-attack-line { padding:4px 0 6px; border-bottom:1px solid #497c8966; color:#052c3b; font-size:12px; line-height:1.4; }
.tcg-card .tcg-buff-line { color:#24514e; font-weight:600; font-size:11px; }
.tcg-card .tcg-card-flavor { border-color:#6c929b80; color:#3e606b; font-size:10px; line-height:1.4; }
.tcg-frame-footer { display:flex; align-items:center; justify-content:space-between; gap:7px; height:12px; padding:5px 5px 0; }
.tcg-frame-footer span { height:2px; width:32%; background:repeating-linear-gradient(90deg,#78e9ef 0 7px,transparent 7px 11px); }
.tcg-frame-footer i { width:7px; height:5px; border:1px solid #8cf7f2; transform:skew(-25deg); }
.tcg-card.selectable-target { border-color:#cafffa; box-shadow:0 0 0 3px #13c9c0,0 0 24px #45ecea88; }
.tcg-card.hand-playable { border-color:#4fc5cb; }
.tcg-card.hand-unplayable { filter:saturate(.25); opacity:.67; }
.tcg-card .hand-unavailable-label { margin:5px -4px -3px; border:1px solid #63808b; border-radius:3px; background:#253843; color:#d9e9f0; font-size:10px; }
.tcg-card .tcg-damage-badge { top:-9px; z-index:4; }
.hand-row .tcg-card,#view-game .hand-row .tcg-card { width:200px; flex-basis:200px; }
.battle-mat { grid-template-columns:100px minmax(720px,1fr) 172px 132px; min-width:1210px; }
.battle-mat .tcg-card,#view-game .battle-mat .tcg-card { width:164px; padding:7px; }
.battle-mat .tcg-card .tcg-card-heading { min-height:48px; }
.battle-mat .tcg-card .tcg-card-name { font-size:11px; padding:5px 4px; }
.battle-mat .tcg-card .tcg-card-type-label { font-size:7px; letter-spacing:.6px; }
.battle-mat .tcg-card .tcg-card-art,#view-game .battle-mat .tcg-card .tcg-card-art { height:83px; }
.battle-mat .tcg-card .tcg-card-values { gap:3px; padding:0; }
.battle-mat .tcg-card .tcg-corner { min-width:39px; padding:5px; }
.battle-mat .tcg-card .tcg-metric-label { font-size:7px; }
.battle-mat .tcg-card .tcg-corner b { font-size:23px; }
.battle-mat .tcg-card .tcg-card-body,#view-game .battle-mat .tcg-card .tcg-card-body { padding:7px; }
.battle-mat .tcg-card .tcg-card-text,.battle-mat .tcg-card .tcg-card-extra,.battle-mat .tcg-card .tcg-attack-line { font-size:10px; }
.empty-upgrade-slot { flex-basis:164px; }
/* Landscape base: same visual language, using its real HP, firewall and output. */
.mat-base { width:390px; max-width:100%; }
.tcg-card.base-card,.battle-mat .tcg-card.base-card,#view-game .battle-mat .tcg-card.base-card {
  display:grid; grid-template-columns:1fr; width:100%; min-height:0; padding:8px; gap:0;
  border:2px solid #3db6c2; background:repeating-linear-gradient(120deg,#b3e5e908 0 1px,transparent 1px 13px),linear-gradient(140deg,#16343d,#030d13 40%,#102b35 75%,#030b11);
}
.tcg-card.base-card .tcg-card-heading { min-height:44px; }
.tcg-card.base-card .tcg-card-name,.battle-mat .tcg-card.base-card .tcg-card-name { font-size:17px; text-align:center; }
.tcg-base-insignia { color:#e2fffe; border:1px solid #a4f8fb; background:linear-gradient(135deg,#206375,#062b3c); padding:4px 9px; display:flex; flex-direction:column; align-items:center; font:700 9px/1.2 "Bahnschrift",sans-serif; letter-spacing:1px; }
.tcg-base-insignia svg { width:24px; height:24px; margin-top:3px; }
.tcg-card.base-card .tcg-card-art,.battle-mat .tcg-card.base-card .tcg-card-art,#view-game .battle-mat .tcg-card.base-card .tcg-card-art { height:84px; }
.tcg-card.base-card .tcg-card-values { margin-top:-18px; gap:8px; }
.tcg-card.base-card .tcg-card-values .tcg-corner { min-width:66px; }
.tcg-card.base-card .tcg-corner-production { margin-left:0; }
.tcg-card.base-card .tcg-card-body { flex:initial; }
.tcg-card.base-card .tcg-card-flavor { display:none; }
.tcg-card.base-card .base-protection { font-size:11px; font-weight:700; color:#154b47; }
.tcg-card.base-card.protected::after { display:none; }
.tcg-card.base-card .tcg-card-body:not(:has(.tcg-card-text,.base-protection)) { display:none; }
@media(max-width:700px) { .hand-row .tcg-card,#view-game .hand-row .tcg-card { width:184px; flex-basis:184px; } }

#help-cards-grid { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; }
#help-cards-grid .tcg-card { width:200px; flex:0 0 200px; }
#help-cards-grid .tcg-card.base-card { width:390px; flex-basis:390px; max-width:100%; }
.battle-mat .zone-slot:has(.tcg-card) { background:transparent; border:0; padding:0; width:100%; }
.battle-mat .zone-slot .tcg-card,#view-game .battle-mat .zone-slot .tcg-card { width:100%; }
.battle-mat .zone-slot .tcg-card .tcg-card-heading { flex-direction:column; }
.battle-mat .zone-slot .tcg-card .tcg-card-costs { align-self:flex-start; max-width:100%; }
.battle-mat .zone-slot .tcg-card .tcg-card-title-group { align-self:stretch; }
.tcg-card .tcg-card-body { clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px)); }

/* Card type palettes; HP, firewall and production retain their semantic colors. */
.tcg-card.type-unit { --type-accent:#64d8f3; --type-dark:#143e54; --type-paper:#c3e8f4; }
.tcg-card.type-unitUpgrade { --type-accent:#c19bff; --type-dark:#392652; --type-paper:#e3d3f5; }
.tcg-card.type-baseUpgrade { --type-accent:#f2c463; --type-dark:#4c391a; --type-paper:#f1e2b8; }
.tcg-card.type-zone { --type-accent:#76dfa4; --type-dark:#194534; --type-paper:#c7ead3; }
.tcg-card.type-event { --type-accent:#f68fab; --type-dark:#512839; --type-paper:#f3d1dd; }
.tcg-card.type-base { --type-accent:#c5d6ec; --type-dark:#303d56; --type-paper:#dce5f2; }
.tcg-card[class*="type-"], #view-game .tcg-card[class*="type-"] {
  background:linear-gradient(140deg,var(--type-dark),#060e17 45%,var(--type-dark));
}
.tcg-card[class*="type-"]:not(.selectable-target):not(.blocked-target) { border-color:var(--type-accent); }
.tcg-card[class*="type-"]::before { border-color:var(--type-accent); box-shadow:inset 0 0 9px color-mix(in srgb,var(--type-accent) 20%,transparent); }
.tcg-card .tcg-card-name { background:linear-gradient(125deg,#f5f8fc,var(--type-paper)); border-color:var(--type-accent); }
.tcg-card .tcg-card-type-label { color:var(--type-accent); }
.tcg-card .tcg-art-frame { border-color:var(--type-accent); }
.tcg-card .tcg-card-art:not(.has-image), #view-game .tcg-card .tcg-card-art:not(.has-image) {
  background:radial-gradient(ellipse at 50% 45%,var(--type-dark),transparent 70%),repeating-linear-gradient(0deg,#ffffff0c 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,#ffffff0c 0 1px,transparent 1px 14px),#08121d;
}
.tcg-card .tcg-card-art-icon { color:var(--type-accent); filter:drop-shadow(0 0 8px var(--type-dark)); }
.tcg-card .tcg-card-body, #view-game .tcg-card .tcg-card-body { background:linear-gradient(130deg,#eef3f8,var(--type-paper)); border-color:var(--type-accent); }
.tcg-card .tcg-frame-footer span { background:repeating-linear-gradient(90deg,var(--type-accent) 0 7px,transparent 7px 11px); }
.tcg-card .tcg-frame-footer i { border-color:var(--type-accent); }

.tcg-card .tcg-card-values:not(:has(.tcg-corner)) { display:none; }