:root{ --gold:#d9b451; --panel:rgba(14,17,22,.78); }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:#0b0e13; color:#e9e4d6;
  font-family:"Segoe UI",Roboto,system-ui,sans-serif; -webkit-user-select:none; user-select:none; }
#c{ display:block; width:100vw; height:100vh; }
#topbar{ position:fixed; top:0; left:0; right:0; padding:10px 14px; display:flex; gap:10px;
  align-items:center; flex-wrap:wrap; background:linear-gradient(180deg,rgba(8,10,14,.85),rgba(8,10,14,0));
  font-size:14px; z-index:20; pointer-events:none; }
#topbar .stat{ display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:8px;
  background:rgba(10,13,18,.55); border:1px solid rgba(255,255,255,.07); }
#topbar .stat .ic{ opacity:.85; font-size:13px; }
#topbar .stat b{ color:var(--gold); }
#topbar .stat.dim{ opacity:.6; font-size:12px; }
#topbar .stat.gold b{ color:#ffd76a; }
#topbar .spacer{ flex:1; }
.hpbar{ display:inline-block; width:70px; height:8px; border-radius:5px; overflow:hidden;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15); margin-left:2px; }
.hpbar > i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#e04a3a,#f0a53a,#5fd06a);
  background-size:210px 100%; transition:width .25s ease; }

#phase-badge{ position:fixed; top:52px; left:50%; transform:translateX(-50%); z-index:20;
  display:flex; align-items:baseline; gap:8px; padding:5px 16px; border-radius:20px;
  background:rgba(10,13,18,.6); border:1px solid rgba(217,180,81,.35); pointer-events:none;
  font-size:14px; letter-spacing:.5px; text-transform:uppercase; opacity:0; transition:opacity .25s; }
#phase-badge.show{ opacity:1; }
#phase-badge #pb-phase{ color:var(--gold); font-weight:700; }
#phase-badge #pb-time{ color:#fff; font-weight:600; }

#buffs{ position:fixed; top:52px; left:14px; z-index:20; display:flex; flex-direction:column;
  gap:5px; pointer-events:none; }
.buff{ font-size:11px; padding:3px 8px; border-radius:12px; background:rgba(60,50,20,.75);
  border:1px solid rgba(217,180,81,.4); color:#f0e6cf; }

#cam-controls{ position:fixed; right:14px; bottom:14px; z-index:22; display:flex; gap:6px; }
button.ui.cam{ width:38px; height:38px; padding:0; font-size:17px; border-radius:9px; }
button.ui.cam.on{ background:#4a3d1c; border-color:var(--gold); color:#ffe; }
button.ui{ pointer-events:auto; cursor:pointer; border:1px solid #6b5a2a; background:#241f14;
  color:#f0e6cf; padding:7px 12px; border-radius:6px; font-size:13px; }
button.ui:hover{ background:#332c1b; }
#hint{ position:fixed; left:14px; bottom:8px; font-size:11px; opacity:.6; z-index:20; pointer-events:none; }
#toast{ position:fixed; left:50%; top:58%; transform:translateX(-50%); background:rgba(120,30,25,.92);
  border:1px solid #d06a5a; color:#ffe; padding:8px 14px; border-radius:6px; font-size:14px;
  opacity:0; transition:opacity .2s; pointer-events:none; z-index:30; }
#toast.show{ opacity:1; }
#hand{ position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px; justify-content:center;
  padding:14px; z-index:20; pointer-events:none; flex-wrap:wrap; }
.card{ pointer-events:auto; cursor:pointer; width:140px; height:96px; border-radius:9px; padding:8px 9px;
  border:2px solid rgba(0,0,0,.5); box-shadow:0 6px 14px rgba(0,0,0,.45); display:flex; flex-direction:column;
  justify-content:space-between; transition:transform .1s, box-shadow .1s; background:#1b1f27; }
.card:hover{ transform:translateY(-8px); box-shadow:0 10px 20px rgba(0,0,0,.5); }
.card.sel{ outline:3px solid var(--gold); transform:translateY(-10px); }
.card.disabled{ opacity:.45; cursor:not-allowed; }
.card .row1{ display:flex; justify-content:space-between; align-items:baseline; }
.card .nm{ font-weight:700; font-size:13px; }
.card .sym{ font-size:16px; }
.card .st{ font-size:10.5px; opacity:.82; line-height:1.25; }
.card .cost{ font-size:12px; color:var(--gold); font-weight:700; }
.card.up{ background:linear-gradient(180deg,#1b1f27 45%,#3a2f16); border-color:var(--gold); }
.card.up .sym{ color:var(--gold); }
#draft,#lobby,#endscreen,#meta{ position:fixed; inset:0; z-index:40; display:none; align-items:center;
  justify-content:center; flex-direction:column; gap:18px; background:rgba(6,8,12,.9);
  backdrop-filter:blur(3px); pointer-events:auto; padding:24px; overflow:auto; }
#draft.show,#lobby.show,#endscreen.show,#meta.show{ display:flex; }
#meta{ z-index:50; }
#draft .row,#lobby .row,#meta .row,#endscreen .row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.meta-title{ font-size:13px; letter-spacing:2px; text-transform:uppercase; color:#b9a25a; opacity:.9; }
.mtile{ pointer-events:auto; cursor:pointer; width:130px; min-height:104px; border-radius:10px; padding:8px 9px;
  border:2px solid rgba(255,255,255,.14); background:#171b22; color:#e9e4d6; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
  font-size:12px; transition:transform .1s, box-shadow .1s, border-color .1s; }
.mtile:hover{ transform:translateY(-4px); }
.mtile.owned{ border-color:#4fd06a; background:linear-gradient(180deg,#17211a,#123018); cursor:default; }
.mtile.afford{ border-color:var(--gold); box-shadow:0 0 14px rgba(217,180,81,.35); }
.mtile.locked{ opacity:.5; cursor:not-allowed; }
.mtile .big{ font-size:26px; font-weight:800; }
.mtile .mt-name{ font-weight:700; }
.mtile .mt-lvl{ letter-spacing:1px; color:var(--gold); font-size:11px; }
.mtile small{ opacity:.85; font-size:10.5px; line-height:1.3; }
h1{ margin:0; font-size:26px; letter-spacing:1px; color:var(--gold); }
.sub{ opacity:.85; font-size:14px; max-width:680px; text-align:center; line-height:1.5; }
.suitBtn{ width:140px; height:118px; border-radius:12px; border:2px solid rgba(255,255,255,.28);
  cursor:pointer; color:#fff; font-size:16px; font-weight:700; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; }
.suitBtn:hover{ border-color:#fff; transform:translateY(-3px); }
.suitBtn small{ font-weight:400; opacity:.9; font-size:10.5px; text-align:center; padding:0 6px; }
.big{ font-size:30px; }

/* ---- Animationen ---------------------------------------------------------- */
@keyframes cardIn{ from{ opacity:0; transform:translateY(26px) scale(.9); } to{ opacity:1; transform:none; } }
@keyframes popIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }
#draft .card,#lobby .suitBtn{ animation:cardIn .32s cubic-bezier(.2,.9,.3,1.2) both; }
#draft .card:nth-child(1){ animation-delay:.02s; }
#draft .card:nth-child(2){ animation-delay:.10s; }
#draft .card:nth-child(3){ animation-delay:.18s; }
#lobby .suitBtn:nth-child(1){ animation-delay:.02s; }
#lobby .suitBtn:nth-child(2){ animation-delay:.08s; }
#lobby .suitBtn:nth-child(3){ animation-delay:.14s; }
#lobby .suitBtn:nth-child(4){ animation-delay:.20s; }
#lobby h1,#draft h1,#endscreen h1{ animation:popIn .35s ease-out both; }
.card.up{ box-shadow:0 0 0 1px rgba(217,180,81,.4), 0 6px 18px rgba(0,0,0,.5); }
.card.up:hover{ transform:translateY(-10px) scale(1.04); box-shadow:0 0 22px rgba(217,180,81,.55); }
#phase-badge.final #pb-phase{ color:#ff8f6a; }

/* ---- Turm-Panel (Rang-Up / Fusion) ---- */
.tp-panel{
  position:fixed; right:14px; bottom:86px; z-index:60;
  min-width:210px; padding:10px 12px;
  background:rgba(15,17,22,.92); border:1px solid #3a4050; border-radius:12px;
  color:#e8e2d4; box-shadow:0 8px 24px rgba(0,0,0,.5);
  transform:translateY(8px); opacity:0; pointer-events:none; transition:.15s;
}
.tp-panel.show{ transform:none; opacity:1; pointer-events:auto; }
.tp-title{ font-weight:700; color:#f4d67a; margin-bottom:4px; font-size:14px; }
.tp-syn{ font-size:11px; margin-left:6px; }
.tp-row{ font-size:12px; opacity:.9; margin-bottom:8px; }
.tp-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.tp-actions button{
  cursor:pointer; border:1px solid #4a5162; background:#232838; color:#e8e2d4;
  border-radius:8px; padding:6px 9px; font-size:12px;
}
.tp-actions button:disabled{ opacity:.45; cursor:default; }
.tp-actions button:not(:disabled):hover{ background:#2e3550; }

/* ---- Lobby: Start-Blätter ---- */
#lobby-decks{ margin-top:10px; }
.deck-hint{ font-size:12px; opacity:.8; width:100%; text-align:left; margin-bottom:4px; }
.deckBtn{
  min-width:150px; max-width:210px; padding:8px 10px; border-radius:10px;
  border:1px solid #3a4050; background:#1b1f27; color:#d8d2c4; cursor:pointer;
  text-align:left; font-size:12px; line-height:1.35;
}
.deckBtn small{ display:block; opacity:.75; }
.deckBtn.active{ border-color:#f4d67a; box-shadow:0 0 8px rgba(244,214,122,.25); }
.deckBtn.locked{ opacity:.6; }
.deckBtn:hover{ background:#232838; }

#net-box{ position:fixed; top:52px; right:14px; z-index:60; max-width:430px;
  padding:7px 11px; border-radius:9px; background:rgba(18,22,30,.88);
  border:1px solid #3a4050; color:#d8d2c4; font-size:12px; }
#lan-row input.ui{ padding:6px 9px; font-size:12px; border-radius:8px;
  background:#1b1f27; border:1px solid #3a4050; color:#e8e2d4; }


.suitBtn.taken{ opacity:.45; filter:grayscale(.7); cursor:not-allowed; }
.suitBtn.taken:hover{ background:inherit; }