/* ====================================================================
   Dungeon24 — Dungeon Match · Micro-Duell
   Dark-Fantasy: Gold, Stein, Glut, Blut + Fraktionsfarben.
   ==================================================================== */
:root {
  --stone-0:#0b0907; --stone-1:#15110e; --stone-2:#211a15; --stone-3:#2f2519;
  --gold:#e3b24a; --gold-2:#ffd877; --gold-deep:#8a6a23;
  --ember:#ff7a1e; --blood:#7c1810; --bone:#ddcaa2;
  --accent:#7cae3a; --accent-dark:#3f5e1c;   /* Spieler-Fraktion (Grünlinge) */
  --foe:#4fb3a6;   --foe-dark:#1f4d49;        /* Gegner-Fraktion (Untote) */
  --card-ratio:.5696;
  /* Höhe der aktiven Kampfkarten: groß auf großen Screens, aber durch
     Viewport-Höhe UND -Breite begrenzt, damit es auf jeder Auflösung
     erkennbar und spielbar bleibt. */
  --unit-h:clamp(145px, min(32.5vh, 30vw), 375px);
  --ui:'Cinzel', Georgia, serif;
  --body:'EB Garamond', Georgia, serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--body); color:var(--bone); background:var(--stone-0);
  overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Gesamtes UI dezent vergrößert — niedrig genug, dass Inhalt inkl. Zoom
     auf gängigen Auflösungen vollständig in den Viewport passt. */
  zoom:1.06;
}

/* ---------- Bühne ---------- */
#stage { position:fixed; inset:0; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,140,40,.14), transparent 55%),
    radial-gradient(90% 60% at 8% 22%, rgba(255,110,30,.08), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.78), transparent 58%),
    linear-gradient(180deg, rgba(7,5,4,.58), rgba(7,5,4,.74) 52%, rgba(7,5,4,.66)),
    url("uploads/K1024_Dungeon24_Wallpaper_Desktop4k.JPG") center top / cover no-repeat,
    #0b0907; }
#stage::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; }
.vignette { position:absolute; inset:0; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.8); }
#embers { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.ember { position:absolute; bottom:-10px; border-radius:50%;
  background:radial-gradient(circle, #ffd27a, #ff6a12 60%, transparent 70%);
  filter:blur(.3px); opacity:0; animation:rise linear infinite; }
@keyframes rise { 0%{transform:translateY(0) translateX(0) scale(1);opacity:0;}
  10%{opacity:.9;} 90%{opacity:.6;}
  100%{transform:translateY(-104vh) translateX(var(--drift)) scale(.4);opacity:0;} }

/* ---------- Kopfzeile ---------- */
header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:10px 24px; z-index:5; border-bottom:1px solid rgba(227,178,74,.14);
  background:linear-gradient(180deg, rgba(0,0,0,.45), transparent); }
.brand { display:flex; align-items:center; gap:.5ch; user-select:none; }
.brand-logo { height:52px; width:auto; object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(180,120,30,.3));
  image-rendering:auto; }
.brand small { font-family:var(--body); font-style:italic; color:#8a7c5e; font-size:13px;
  margin-left:10px; letter-spacing:.02em; }
.turnwrap { display:flex; justify-content:center; }
.turn-badge { font-family:var(--ui); font-weight:700; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-2); padding:6px 18px; border-radius:20px;
  border:1px solid rgba(227,178,74,.3); background:rgba(10,8,6,.6); white-space:nowrap;
  box-shadow:0 0 18px rgba(255,150,40,.12); transition:.2s; }
.turn-badge.me  { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent); }
.turn-badge.foe { color:var(--foe); border-color:color-mix(in srgb,var(--foe) 60%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--foe) 40%,transparent); }
.hbtns { display:flex; gap:10px; justify-content:flex-end; }
.btn { font-family:var(--ui); font-size:12.5px; font-weight:600; letter-spacing:.05em;
  color:var(--bone); background:linear-gradient(180deg,#2c241c,#1a1410);
  border:1px solid rgba(227,178,74,.28); border-radius:7px; padding:8px 15px; cursor:pointer;
  text-transform:uppercase; transition:.16s; white-space:nowrap; }
.btn:hover:not(:disabled) { color:var(--gold-2); border-color:var(--gold); transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,.5), 0 0 14px rgba(255,150,40,.15); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn:disabled { opacity:.34; cursor:default; }
.btn.primary { background:linear-gradient(180deg,#5a2410,#3a1408); border-color:var(--ember); color:var(--gold-2); }
.btn.danger { background:linear-gradient(180deg,#5a1410,#360a08); border-color:#b23; color:#ffd0c4; }
.btn.go { background:linear-gradient(180deg,#3a3414,#221d08); border-color:var(--gold); color:var(--gold-2); }
.btn.ability-btn { background:linear-gradient(180deg,#3a2a52,#221634); border-color:#9b7bd8; color:#e6d6ff; }
.btn.ability-btn:hover:not(:disabled){ border-color:#c4a8ff; color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.5), 0 0 16px rgba(155,123,216,.4); }
.btn.big { font-size:16px; padding:13px 40px; }

/* ---------- Brett ---------- */
#board { flex:1; display:grid; grid-template-columns:1fr 264px; min-height:0; z-index:2; }
.play { display:grid; grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) auto; min-height:0; min-width:0;
  padding:8px 18px 10px; gap:6px; }

/* Spielerreihe: Pyramide | Kampflinie | Status */
.prow { display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(10px,2vw,28px); min-height:0; }
.prow.foe { align-items:flex-end; }
.prow.me  { align-items:flex-start; }

/* ---------- Pyramide (verdeckte Reserven) ---------- */
.pyramid { display:flex; flex-direction:column; align-items:center; gap:4px; flex:none; }
.pyr-row { display:flex; gap:6px; }
.pcard { width:clamp(26px,3vw,38px); aspect-ratio:var(--card-ratio); border-radius:5px;
  position:relative; flex:none; }
.pcard img { width:100%; height:100%; object-fit:cover; border-radius:5px; display:block;
  border:1px solid rgba(0,0,0,.7); box-shadow:0 4px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(227,178,74,.12); }
.pcard.boss img { box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 0 0 1px var(--gold-deep), 0 0 12px rgba(227,178,74,.25); }
.pcard.empty { border:1px dashed rgba(227,178,74,.18); background:rgba(8,6,5,.4);
  display:flex; align-items:center; justify-content:center; }
.pcard.empty::after { content:''; width:8px; height:8px; border-radius:50%; background:rgba(227,178,74,.12); }
/* Eigene Reserven: offen + Aufdeck-Reihenfolge sichtbar */
.pyramid.own .pcard { width:clamp(32px,4.1vw,48px); }
.pcard.own img { border-color:rgba(227,178,74,.5);
  box-shadow:0 4px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(227,178,74,.38); }
.pcard.own.boss img { box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 0 0 1px var(--gold-deep), 0 0 12px rgba(227,178,74,.4); }
.pcard .pord { position:absolute; top:-5px; left:-5px; min-width:15px; height:15px; padding:0 2px;
  border-radius:50%; background:var(--gold-deep); color:#1a120a; font-family:var(--ui); font-weight:800;
  font-size:10px; line-height:15px; text-align:center; border:1px solid rgba(0,0,0,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.6); z-index:2; }
.pyr-tag { font-family:var(--ui); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:#6e6249; margin-top:2px; }

/* ---------- Kampflinie (aktive Kreaturen) ---------- */
.linewrap { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; min-height:0; }
.line-label { font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#8a7c5e; }
.battle-line { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  min-height:var(--unit-h); }
.empty-line { font-family:var(--ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#5d5340; border:1px dashed rgba(227,178,74,.16); border-radius:10px;
  padding:20px 26px; }
.unit { position:relative; height:var(--unit-h); aspect-ratio:var(--card-ratio);
  border-radius:9px; overflow:hidden; flex:none; background:#0b0907;
  border:1px solid rgba(0,0,0,.6); box-shadow:0 10px 24px rgba(0,0,0,.6);
  transition:transform .18s, box-shadow .18s, filter .18s; }
.unit img { width:100%; height:100%; object-fit:cover; display:block; }
.unit .badge { position:absolute; top:4px; left:4px; right:4px; display:flex; justify-content:space-between;
  font-family:var(--ui); font-weight:700; font-size:12px; pointer-events:none; }
.unit .badge span { background:rgba(8,6,5,.82); border:1px solid rgba(227,178,74,.4); border-radius:4px;
  padding:2px 5px; color:var(--gold-2); text-shadow:0 1px 2px #000; font-size:12px; }
.unit.pickable { cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.6), 0 0 0 2px var(--ring), 0 0 18px var(--ring); animation:pickPulse 1.3s ease-in-out infinite; }
.unit.pickable:hover { transform:translateY(-8px) scale(1.05); z-index:5; }
.foe .unit.pickable { --ring:color-mix(in srgb,var(--foe) 70%,transparent); }
.me  .unit.pickable { --ring:color-mix(in srgb,var(--accent) 70%,transparent); }
@keyframes pickPulse { 50% { box-shadow:0 10px 24px rgba(0,0,0,.6), 0 0 0 2px var(--ring), 0 0 28px var(--ring); } }
.unit.fighting { box-shadow:0 14px 34px rgba(0,0,0,.7), 0 0 0 2px var(--fight), 0 0 26px var(--fight); transform:translateY(-4px) scale(1.04); z-index:4; }
.foe .unit.fighting { --fight:#ff6a4a; } .me .unit.fighting { --fight:#ffd877; }
.unit.hit { animation:hitShake .42s ease; }
@keyframes hitShake { 0%,100%{transform:translate(0,0);} 20%{transform:translate(-6px,3px);}
  40%{transform:translate(6px,-2px);} 60%{transform:translate(-4px,2px);} 80%{transform:translate(3px,-1px);} }
.unit.falling { animation:fall .6s cubic-bezier(.4,.1,.7,.9) forwards; }
@keyframes fall { to { transform:translateY(40px) rotate(8deg) scale(.7); opacity:0; filter:grayscale(1) brightness(.4); } }
.unit.enter { animation:unitEnter .45s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes unitEnter { from { transform:translateY(-26px) scale(.8); opacity:0; } }

/* schwebende Schadenszahl */
.float { position:absolute; left:50%; top:30%; transform:translateX(-50%); font-family:var(--ui);
  font-weight:900; font-size:42px; pointer-events:none; text-shadow:0 3px 0 #000, 0 0 24px currentColor;
  animation:floatUp 1.2s ease-out forwards; z-index:8; }
.float.dmg { color:#ff5a47; } .float.block { color:#9fd0ff; font-size:26px; }
@keyframes floatUp { 0%{opacity:0;transform:translate(-50%,12px) scale(.6);}
  25%{opacity:1;transform:translate(-50%,-8px) scale(1.1);} 100%{opacity:0;transform:translate(-50%,-66px) scale(1);} }

/* ---------- Status-Tafel ---------- */
.status { display:flex; flex-direction:column; gap:7px; width:204px; flex:none; position:relative;
  background:rgba(10,8,6,.5); border:1px solid rgba(227,178,74,.14); border-radius:11px; padding:11px 13px; }
.status .who { display:flex; align-items:center; gap:9px; font-family:var(--ui); font-weight:700;
  letter-spacing:.04em; font-size:15px; }
.crest { width:24px; height:24px; border-radius:50%; flex:none; border:2px solid var(--c);
  box-shadow:0 0 12px var(--c), inset 0 0 8px rgba(0,0,0,.6);
  background:radial-gradient(circle at 50% 35%, var(--c), #0b0907 75%); }
.foe-status .crest { --c:var(--foe); } .me-status .crest { --c:var(--accent); }
.foe-status .who { color:var(--foe); } .me-status .who { color:var(--accent); }
.lp { position:relative; height:22px; border-radius:6px; overflow:hidden;
  background:linear-gradient(180deg,#0a0706,#140d09); border:1px solid rgba(227,178,74,.3);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7); }
.lp .fill { position:absolute; inset:0; transform-origin:left; transform:scaleX(1);
  transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.me-status .lp .fill  { background:linear-gradient(180deg,#9bd152,#4f7d1e); }
.foe-status .lp .fill { background:linear-gradient(180deg,#63cabd,#1f6e64); }
.lp .txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px;
  font-family:var(--ui); font-weight:700; font-size:12.5px; color:#fff; text-shadow:0 1px 3px #000; letter-spacing:.04em; }
.lp.low .fill { animation:lpPulse 1s ease-in-out infinite; }
@keyframes lpPulse { 50% { filter:brightness(1.45); } }

.wins { display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.wins .wl { font-family:var(--ui); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:#8a7c5e; margin-right:3px; }
/* Base pip — used by dice faces too (.die-face .pip overrides separately) */
.pip { width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.07);
  border:1px solid rgba(227,178,74,.25); position:relative; }
.pip.on { background:radial-gradient(circle at 40% 35%, var(--gold-2), var(--gold-deep)); border-color:var(--gold);
  box-shadow:0 0 7px rgba(255,180,60,.5); }
.pip.mark { border-color:var(--ember); }
.pip.mark::after { content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ember) 55%,transparent); }
.pip.on.mark { background:radial-gradient(circle at 40% 35%, #ffd0a0, var(--ember)); box-shadow:0 0 10px rgba(255,120,30,.7); }
.wins .wn { font-family:var(--ui); font-size:12px; color:var(--gold-2); margin-left:4px; }
/* Victory-point pips use bolt image */
.wins .pip { width:11px; height:18px; border-radius:0; background:none; border:none; padding:0;
  display:flex; align-items:center; justify-content:center; }
.wins .pip::after { display:none; }
.wpip-img { width:100%; height:100%; object-fit:contain;
  opacity:.18; filter:grayscale(1); transition:opacity .2s, filter .2s; }
.wins .pip.on .wpip-img { opacity:1; filter:none; }
.wins .pip.on.mark .wpip-img { filter:drop-shadow(0 0 4px rgba(255,130,30,.9)); }

.ability { font-family:var(--ui); font-size:11.5px; letter-spacing:.03em; padding:5px 9px; border-radius:6px;
  border:1px solid rgba(227,178,74,.2); background:rgba(8,6,5,.5); display:flex; align-items:center; gap:7px; }
.ability .dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--gold-2); box-shadow:0 0 8px var(--gold-2); }
.ability-img { height:22px; width:auto; object-fit:contain; vertical-align:middle; flex:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.9)); }
.ability.lost { color:#7a6a55; text-decoration:line-through; opacity:.7; }
.ability.lost .dot { background:#5a4d3a; box-shadow:none; }
.ability.armed { color:#ffd0a0; border-color:var(--ember); box-shadow:0 0 14px rgba(255,120,30,.25); }
.ability.armed .dot { background:var(--ember); box-shadow:0 0 10px var(--ember); animation:lpPulse .9s ease-in-out infinite; }
.ability.cursed { color:#d9b6ff; border-color:#9b7bd8; background:rgba(40,22,60,.55);
  box-shadow:0 0 14px rgba(155,123,216,.3); }
.ability.cursed .dot { background:#b98bff; box-shadow:0 0 10px #b98bff; animation:lpPulse .9s ease-in-out infinite; }
.curse-float { color:#c79bff !important; font-size:30px; top:18%; }

.grave { display:flex; align-items:center; gap:7px; font-family:var(--ui); font-size:12px; color:#8a7c5e; }
.grave .g-ic { font-size:15px; color:#9a8b6c; }
.grave .g-n { color:var(--bone); }

/* ---------- Kampfzone ---------- */
.clash { display:flex; justify-content:center; align-items:center;
  gap:clamp(16px,3vw,56px); padding:0 clamp(10px,4vw,60px); }
.die-col { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; flex:none; }
.reroll { font-size:11px; padding:5px 11px; visibility:hidden; }
.reroll.show { visibility:visible; }
.center { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  min-width:0; width:min(46vw,560px); }
.vs { font-family:var(--ui); font-weight:900; font-size:26px; color:var(--blood);
  letter-spacing:.08em; text-shadow:0 0 22px rgba(170,30,20,.55); }
.math { font-family:var(--ui); font-size:clamp(14px,1.5vw,18px); color:var(--gold-2); letter-spacing:.02em;
  text-wrap:balance; min-height:22px; }
.math .me-v  { color:var(--accent); } .math .foe-v { color:var(--foe); }
.math .res-hit { color:#ff6a4a; } .math .res-block { color:#9fd0ff; }
.banner { font-family:var(--body); font-style:italic; font-size:14px; color:#a99a7c; min-height:18px; text-wrap:balance; }

/* ---------- Aktionsleiste ---------- */
.actions { display:flex; flex-direction:column; align-items:center; gap:7px; padding-top:2px; }
.act-hint { font-family:var(--ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#9a8b6c; min-height:16px; text-align:center; }
.act-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.btn.act { font-size:14px; padding:11px 24px; }

/* ---------- Kampf-Log ---------- */
#log { border-left:1px solid rgba(227,178,74,.14); background:rgba(8,6,5,.55);
  display:flex; flex-direction:column; min-height:0; }
#log h4 { font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); padding:13px 16px 9px; border-bottom:1px solid rgba(227,178,74,.12); }
#logList { flex:1; overflow-y:auto; padding:10px 14px; display:flex; flex-direction:column; gap:7px;
  font-size:13px; line-height:1.4; }
#logList .lg { color:#b6a883; border-left:2px solid rgba(227,178,74,.18); padding-left:9px; }
#logList .lg.me  { border-color:color-mix(in srgb,var(--accent) 70%,transparent); }
#logList .lg.foe { border-color:color-mix(in srgb,var(--foe) 70%,transparent); }
#logList .lg.big { color:var(--gold-2); font-family:var(--ui); font-size:13px; }
#logList .lg b { color:var(--gold-2); }
#logList .lg .hit { color:#ff7a5c; } #logList .lg .blk { color:#9fd0ff; }
#logList::-webkit-scrollbar { width:8px; } #logList::-webkit-scrollbar-thumb { background:rgba(227,178,74,.2); border-radius:4px; }

/* ---------- Overlays ---------- */
.overlay { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(circle at 50% 40%, rgba(20,12,8,.74), rgba(5,4,3,.93)); backdrop-filter:blur(3px); }
.overlay.hide { display:none; }
.panel { width:min(760px,96vw); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg,#1c1611,#100c09); border:1px solid rgba(227,178,74,.3);
  border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.8), inset 0 0 60px rgba(0,0,0,.5); padding:32px 36px; }
.panel h2 { font-family:var(--ui); font-weight:900; color:var(--gold-2); font-size:30px; letter-spacing:.03em;
  text-align:center; text-shadow:0 2px 0 #000, 0 0 24px rgba(255,150,40,.3); }
.panel h2.setup-title { margin:-4px 0 2px; }
.panel h2.setup-title img { display:block; width:auto; height:clamp(72px,11vw,116px); margin:0 auto;
  object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(180,120,30,.25)); }
@media (max-height:680px){ .panel h2.setup-title img { height:clamp(58px,8vw,84px); } }
.panel .sub { text-align:center; color:#9a8b6c; font-style:italic; margin:6px 0 22px; font-size:16px; }
.panel h3 { font-family:var(--ui); color:var(--gold); font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  margin:18px 0 9px; border-bottom:1px solid rgba(227,178,74,.18); padding-bottom:5px; }
.panel p, .panel li { line-height:1.5; color:#c9bb9c; font-size:15px; }
.panel ol, .panel ul { padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.panel ol b, .panel ul b, .panel p b { color:var(--gold-2); }

.fac-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px; }
.fac { border:2px solid rgba(227,178,74,.2); border-radius:12px; padding:14px 12px; cursor:pointer; text-align:center;
  transition:.18s; background:rgba(10,8,6,.5); }
.fac:hover { transform:translateY(-3px); border-color:var(--fc); box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 20px var(--fc); }
.fac.sel { border-color:var(--fc); box-shadow:0 0 0 2px var(--fc), 0 0 24px var(--fc); }
.fac .fac-art { display:flex; justify-content:center; margin-bottom:12px; }
.fac .fac-art img { width:54px; aspect-ratio:var(--card-ratio); object-fit:cover; border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,.6); }
.fac .fac-art img:nth-child(2){ margin:0 -14px; transform:translateY(-8px) scale(1.08); z-index:2; }
.fac h4 { font-family:var(--ui); font-size:18px; color:var(--fc); letter-spacing:.03em; }
.fac p { font-size:12px; color:#9a8b6c; margin-top:5px; line-height:1.4; }
.seg { display:inline-flex; border:1px solid rgba(227,178,74,.28); border-radius:8px; overflow:hidden; }
.seg button { font-family:var(--ui); font-size:13px; letter-spacing:.04em; padding:9px 18px; background:transparent;
  color:#9a8b6c; border:none; cursor:pointer; transition:.15s; }
.seg button + button { border-left:1px solid rgba(227,178,74,.18); }
.seg button:hover { background:rgba(227,178,74,.10); color:var(--gold-2); }
.seg button.on { background:linear-gradient(180deg,#5a2410,#3a1408); color:var(--gold-2); }
.opt-row { display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0 8px; }
.opt-row .lab { font-family:var(--ui); font-size:13px; letter-spacing:.06em; color:#9a8b6c; }
.foe-fac-label { color:#8a7c5e; font-size:13px; margin:0 0 18px; }
.center { text-align:center; }

.end-card { text-align:center; }
.end-card .verdict { font-family:var(--ui); font-weight:900; font-size:46px; letter-spacing:.04em; margin-bottom:6px; }
.end-card .verdict.win  { color:var(--gold-2); text-shadow:0 0 30px rgba(255,180,60,.5); }
.end-card .verdict.lose { color:#b04038; text-shadow:0 0 30px rgba(170,40,30,.4); }
.end-stats { color:#9a8b6c; font-size:14px; margin-bottom:22px; }

/* Sieg/Niederlage-Emblem (zentral) */
.win-emblem { display:block; width:min(420px,72vw); max-width:72%; margin:-6px auto 6px; object-fit:contain;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.72));
  animation:emblemIn .7s cubic-bezier(.2,.9,.3,1.4) both; }
.lose-emblem { width:min(480px,78vw); max-width:78%; }
@keyframes emblemIn { from{ opacity:0; transform:translateY(16px) scale(.8); } to{ opacity:1; transform:none; } }

/* Angriff / Verteidigung Mode-Icons in der Clash-Zone */
.mode-badge {
  height: clamp(72px, 10vh, 120px);
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 8px rgba(255, 195, 60, 0.9))
    drop-shadow(0 0 22px rgba(255, 160, 20, 0.7))
    drop-shadow(0 6px 24px rgba(0,0,0,.95))
    brightness(1.15) sepia(0.25) saturate(1.4);
  animation: modeIn .4s cubic-bezier(.2,.9,.3,1.3) both, goldShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
  align-self: center;
}
.clash-badge-foe { margin-right: auto; }
.clash-badge-me  { margin-left:  auto; }
@keyframes modeIn {
  from { opacity:0; transform:scale(.45) rotate(-8deg); }
  to   { opacity:1; transform:scale(1)   rotate(0deg); }
}
@keyframes goldShimmer {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(255, 195, 60, 0.8))
      drop-shadow(0 0 18px rgba(255, 150, 10, 0.55))
      drop-shadow(0 6px 24px rgba(0,0,0,.95))
      brightness(1.1) sepia(0.2) saturate(1.3);
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(255, 220, 80, 1.0))
      drop-shadow(0 0 36px rgba(255, 180, 30, 0.85))
      drop-shadow(0 6px 28px rgba(0,0,0,.95))
      brightness(1.28) sepia(0.35) saturate(1.6);
  }
}
@media (max-width:700px) {
  .mode-badge { height: clamp(44px, 8vh, 72px); }
}

/* Feedback-Sektion */
.feedback { margin:18px auto 22px; max-width:440px; }
.fb-title { font-family:var(--ui); font-size:17px; letter-spacing:.03em; color:var(--gold-2); margin-bottom:13px; }
.fb-stars { display:flex; justify-content:center; gap:9px; }
.fb-star { font-size:31px; line-height:1; cursor:pointer; background:none; border:none; padding:2px 1px;
  color:#463f34; transition:transform .12s ease, color .12s ease, text-shadow .12s ease; }
.fb-star:hover { transform:scale(1.18) translateY(-1px); }
.fb-star.on { color:var(--gold-2); text-shadow:0 0 14px rgba(255,180,60,.55); }
.fb-thanks { min-height:18px; margin-top:11px; font-family:var(--ui); font-size:12px; letter-spacing:.05em; color:#9a8b6c; }
.fb-thanks a { color:var(--gold-2); text-decoration:underline; cursor:pointer; }
.fb-text {
  display:block; width:100%; margin:14px auto 0; box-sizing:border-box;
  background:rgba(12,9,6,.6); color:#e8dcc2;
  border:1px solid rgba(180,150,90,.35); border-radius:8px;
  padding:10px 12px; font-family:var(--ui); font-size:14px; line-height:1.5;
  resize:vertical; min-height:64px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.fb-text::placeholder { color:#7a6f59; }
.fb-text:focus { border-color:var(--gold-2); box-shadow:0 0 0 2px rgba(255,180,60,.18); }
.fb-send { margin-top:12px; font-size:13px; }

/* Gesperrte Fraktionen (noch nicht spielbar) */
.fac.locked { cursor:not-allowed; position:relative; overflow:hidden; filter:saturate(.55);
  border-color:rgba(227,178,74,.12); }
.fac.locked:hover { transform:none; border-color:rgba(227,178,74,.12); box-shadow:none; }
.fac.locked::after { content:''; position:absolute; inset:0; background:rgba(8,6,4,.34); pointer-events:none; }
.fac.locked h4 { color:#938b78; }
.fac.locked p { color:#6f6655; }
.fac-art.wide { display:block; margin:-14px -12px 12px; }
.fac-art.wide img { width:calc(100% + 24px); height:108px; object-fit:cover; object-position:center 30%;
  border-radius:0; box-shadow:none; aspect-ratio:auto; filter:grayscale(.8) brightness(.6); display:block; }
.fac-art.myst { display:flex; align-items:center; justify-content:center; margin:-14px -12px 12px; height:108px;
  background:radial-gradient(circle at 50% 38%, #241a12, #0c0907); }
.fac-art.myst::before { content:'?'; font-family:var(--ui); font-weight:900; font-size:48px;
  color:rgba(227,178,74,.34); text-shadow:0 0 26px rgba(227,178,74,.22); }
.fac-lock { position:absolute; top:9px; right:9px; z-index:3; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--ui); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2);
  background:rgba(8,6,4,.8); border:1px solid rgba(227,178,74,.3); border-radius:999px; padding:4px 9px 4px 7px; }
.fac-lock .lk { font-size:11px; }

/* ---------- Pyramide bauen (Setup) ---------- */
.place-panel { width:min(560px,96vw); }
.pyr-build { display:flex; flex-direction:column; align-items:center; gap:2px; margin:4px 0 12px; }
.pb-rowlabel { font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#8a7c5e; margin-top:6px; }
.pb-rowlabel.front { color:var(--gold); }
.pb-row { display:flex; gap:8px; justify-content:center; }
.pb-slot { width:clamp(52px,13vw,68px); aspect-ratio:var(--card-ratio); border-radius:7px;
  border:1.5px dashed rgba(227,178,74,.3); background:rgba(8,6,5,.45); cursor:pointer;
  display:flex; align-items:center; justify-content:center; position:relative; transition:.15s; flex:none; }
.pb-slot.target { border-color:var(--gold-2); box-shadow:0 0 0 2px rgba(255,216,119,.3), 0 0 14px rgba(255,180,60,.25); }
.pb-slot.filled { border-style:solid; border-color:rgba(0,0,0,.6); padding:0; cursor:pointer; }
.pb-slot.boss { cursor:default; border-color:var(--gold-deep); }
.pb-slot.boss.filled { box-shadow:0 0 0 1px var(--gold-deep), 0 0 14px rgba(227,178,74,.3); }
.pb-num { font-family:var(--ui); font-size:13px; color:#6e6249; font-weight:700; }
.pb-card { width:100%; height:100%; border-radius:6px; overflow:hidden; position:relative; }
.pb-slot .pb-card { border-radius:5px; }
.pb-card img { width:100%; height:100%; object-fit:cover; display:block; }
.pb-card .pv { position:absolute; left:2px; right:2px; top:2px; display:flex; justify-content:space-between; }
.pb-card .pv span { font-family:var(--ui); font-weight:700; font-size:9px; color:var(--gold-2);
  background:rgba(8,6,5,.85); border:1px solid rgba(227,178,74,.4); border-radius:3px; padding:0 3px;
  text-shadow:0 1px 1px #000; }
.pb-traywrap { margin-bottom:16px; }
.pb-traylabel { text-align:center; font-family:var(--ui); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#8a7c5e; margin-bottom:7px; }
.pb-tray { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; min-height:clamp(74px,18vw,96px); }
.pb-tray .pb-card { width:clamp(52px,13vw,68px); aspect-ratio:var(--card-ratio); cursor:pointer;
  border:1px solid rgba(0,0,0,.6); box-shadow:0 6px 16px rgba(0,0,0,.5); transition:.15s; }
.pb-tray .pb-card:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.6); }
.pb-tray .pb-card.sel { box-shadow:0 0 0 2px var(--gold-2), 0 0 18px rgba(255,180,60,.5); transform:translateY(-4px); }
.pb-trayempty { font-family:var(--ui); font-size:12px; letter-spacing:.06em; color:var(--accent);
  align-self:center; }
.pb-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- Würfel-3D ---------- */
/* Jeder Würfel trägt die Fraktionsfarbe seines Besitzers (--die-c) */
#foeDie { --die-c:var(--foe); }
#meDie  { --die-c:var(--accent); }
.die-owner { position:absolute; top:-15px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--ui); font-weight:700; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; line-height:1; pointer-events:none; }
.foe-owner { color:var(--foe); text-shadow:0 0 10px color-mix(in srgb,var(--foe) 45%,transparent); }
.me-owner  { color:var(--accent); text-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent); }
.die-stage { --size:54px; --half:27px; width:var(--size); height:var(--size); perspective:520px; flex:none;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--die-c, #ffaa3c) 50%, transparent)); }
.clash .die-stage { --size:clamp(44px,4.6vw,58px); --half:calc(var(--size)/2); }
.die-cube { position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.18,.7,.2,1.02); }
.die-face { position:absolute; width:var(--size); height:var(--size); display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:10%; gap:4%;
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--die-c, #efe6cf) 12%, #efe6cf),
    color-mix(in srgb, var(--die-c, #cdbf9d) 20%, #cdbf9d) 60%,
    color-mix(in srgb, var(--die-c, #a99767) 28%, #a99767));
  border-radius:13%; border:1.5px solid color-mix(in srgb, var(--die-c, #6e5d36) 65%, #4a3d22);
  box-shadow:inset 0 0 8px rgba(120,90,40,.5), inset 0 0 20px rgba(255,255,255,.3); }
.die-face span { display:block; }
.die-face .pip { align-self:center; justify-self:center; width:74%; height:74%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--die-c, #5a3d12) 80%, #fff),
    color-mix(in srgb, var(--die-c, #2a1c06) 78%, #000) 72%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5), 0 0 5px color-mix(in srgb, var(--die-c, transparent) 55%, transparent), 0 1px 0 rgba(255,255,255,.25); }
.die-stage.rolling { animation:dieShake .12s linear infinite; }
@keyframes dieShake { 50% { transform:translateY(-3px); } }
.die-col.glow .die-stage { filter:drop-shadow(0 0 16px color-mix(in srgb, var(--die-c, #ffaa3c) 85%, transparent)); }

/* ---------- Responsiv ---------- */
@media (max-width:1080px) {
  #board { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  #log { border-left:none; border-top:1px solid rgba(227,178,74,.14); max-height:120px; }
  #logList { flex-direction:column-reverse; }
}
@media (max-width:780px), (orientation:portrait) {
  /* Kopfzeile: zwei Reihen — Logo + Buttons oben, Zuganzeige zentriert darunter.
     Verhindert, dass „Regeln“ / „Neues Spiel“ rechts aus dem Bild laufen. */
  header { padding:8px 12px; column-gap:8px; row-gap:7px;
    grid-template-columns:auto 1fr;
    grid-template-areas:"brand btns" "turn turn"; align-items:center; }
  .brand { grid-area:brand; } .brand small { display:none; }
  .turnwrap { grid-area:turn; }
  .hbtns { grid-area:btns; flex-wrap:wrap; gap:7px; }
  .brand-logo { height:38px; }
  .turn-badge { font-size:11px; padding:5px 12px; }
  .btn { padding:8px 12px; font-size:11px; min-height:38px; }
  .play { padding:7px 9px; gap:6px; }
  /* Pyramide | Linie nebeneinander, Status als volle Zeile darunter */
  .prow { grid-template-columns:auto 1fr; grid-template-areas:"pyr line" "status status"; row-gap:5px;
    column-gap:10px; align-items:center !important; }
  .prow.foe { grid-template-areas:"pyr line" "status status"; }
  .pyramid { grid-area:pyr; } .linewrap { grid-area:line; } .status { grid-area:status; }
  /* Status als kompakte horizontale Leiste */
  .status { width:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px 12px;
    padding:6px 11px; }
  .status .who { font-size:13px; gap:7px; } .crest { width:18px; height:18px; }
  .status .lp { flex:1 1 110px; height:18px; order:3; }
  .wins { order:4; } .wins .wl { display:none; } .pip { width:11px; height:11px; } .wins .pip { width:9px; height:14px; }
  .ability { order:5; font-size:10.5px; padding:4px 8px; } .grave { order:6; font-size:11px; }
  .battle-line { min-height:clamp(100px,19vh,156px); gap:8px; } .unit { height:clamp(100px,19vh,156px); }
  .pcard { width:clamp(24px,5.5vw,32px); }
  .clash { gap:10px; padding:0 6px; }
  .clash .die-stage { --size:clamp(40px,11vw,52px); }
  .vs { font-size:22px; } .math { font-size:13px; } .banner { font-size:12px; }
  .reroll { font-size:11px; padding:8px 12px; min-height:36px; }
  .btn.act { font-size:14px; padding:13px 20px; min-height:48px; }
  .panel { padding:22px 18px; } .fac-grid { grid-template-columns:1fr; }
  .seg button { padding:8px 12px; font-size:12px; }
  #log { max-height:96px; } #log h4 { padding:8px 14px 6px; }
  .pb-slot, .pb-tray .pb-card { width:clamp(48px,15vw,64px); }
}
/* flache Viewports: alles kompakter, kein Überlapp */
@media (max-height:740px) {
  header { padding:7px 18px; } .brand-logo { height:32px; }
  .battle-line { min-height:clamp(86px,14vh,130px); } .unit { height:clamp(86px,14vh,130px); }
  .pyr-tag { display:none; }
  /* Pyramiden zusätzlich an der Höhe deckeln — 3 Kartenreihen + Status
     müssen in eine 1fr-Reihe passen, sonst Überlapp */
  .pcard { width:clamp(22px, min(3.4vw, 4.4vh), 38px); }
  .pyramid.own .pcard { width:clamp(25px, min(4.1vw, 5vh), 48px); }
  .status { padding:8px 11px; gap:5px; } .ability { font-size:11px; }
  .clash .die-stage { --size:clamp(40px,4vw,50px); }
  .vs { font-size:24px; } .math { font-size:14px; }
  .lp { height:18px; }
  .btn.act { padding:9px 18px; font-size:13px; }
  .actions { gap:5px; }
}
@media (max-height:600px) {
  .line-label { display:none; } .banner { display:none; }
  .battle-line { min-height:clamp(70px,12vh,104px); } .unit { height:clamp(70px,12vh,104px); }
}

/* ---------- Mittlere Breiten: Kopfzeile entlasten ----------
   Der Beta-Hinweis + 5 Buttons passen unter ~1260px nicht mehr in die
   3-Spalten-Kopfzeile: Hinweis ausblenden, Buttons schlanker + Umbruch. */
@media (max-width:1260px) {
  .brand small { display:none; }
  .hbtns { flex-wrap:wrap; row-gap:6px; }
  .btn { padding:7px 11px; font-size:11.5px; }
}

/* ---------- Flache Landscape-Fenster (halbes Laptop-Fenster, Handy quer) ----------
   Unter ~580px Höhe reichen die 1fr-Reihen nicht mehr für Pyramide +
   Status-Tafel: Inhalte liefen übereinander. Hier: Status als schmale
   Querleiste, kompakte Karten/Würfel, Reihen auto + scrollbar —
   Überlappung ist damit ausgeschlossen. */
@media (orientation:landscape) and (max-height:640px) {
  body { zoom:1; }
  header { padding:5px 12px; }
  .brand-logo { height:28px; }
  .turn-badge { font-size:11px; padding:4px 12px; }
  .btn { padding:6px 10px; font-size:11px; }
  .play { display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
    gap:4px; padding:6px 12px 8px; }
  .play > section { flex:0 0 auto; }
  .prow { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"pyr line" "status status";
    row-gap:4px; column-gap:10px; align-items:center !important; }
  .pyramid { grid-area:pyr; } .linewrap { grid-area:line; } .status { grid-area:status; }
  /* Pyramide quer: Boss | Mitte | Front nebeneinander statt übereinander */
  .pyramid { flex-direction:row; align-items:center; gap:7px; }
  .status { width:auto; flex-direction:row; align-items:center; flex-wrap:wrap;
    gap:5px 12px; padding:3px 10px; }
  .status .who { font-size:12px; gap:6px; } .crest { width:16px; height:16px; }
  .status .lp { flex:1 1 100px; height:16px; order:3; }
  .wins { order:4; } .wins .wl { display:none; }
  .pip { width:10px; height:10px; } .wins .pip { width:9px; height:13px; }
  .ability { order:5; font-size:10px; padding:3px 7px; } .ability-img { height:16px; }
  .grave { order:6; font-size:11px; }
  .battle-line { min-height:clamp(56px,13vh,88px); gap:7px; }
  .unit { height:clamp(56px,13vh,88px); }
  .unit .badge span { font-size:10px; padding:1px 4px; }
  .pcard { width:clamp(15px,3.6vh,22px); }
  .pyramid.own .pcard { width:clamp(17px,4.2vh,26px); }
  .pcard .pord { min-width:12px; height:12px; font-size:8px; line-height:12px; top:-4px; left:-4px; }
  .pyr-tag { display:none; }
  .clash { gap:12px; padding-top:12px; }
  .clash .die-stage { --size:clamp(30px,7vh,40px); }
  .vs { font-size:17px; } .math { font-size:12px; min-height:15px; }
  .reroll { font-size:10px; padding:3px 8px; min-height:0; }
  .btn.act { font-size:12px; padding:6px 14px; min-height:34px; }
  .act-hint { font-size:10px; min-height:12px; }
  .actions { gap:3px; padding-top:0; }
  #log { max-height:64px; } #log h4 { padding:4px 12px 3px; font-size:10px; }
  #logList { padding:5px 12px; font-size:11.5px; gap:4px; }
  .pick-tag { font-size:9px; padding:2px 7px; bottom:4px; }
}