:root{
--bg:#0b1a2a; --panel:#0f2a44; --text:#ffffff; --muted:#b7c7dd;
--card:#f6efe4; --row:#d8cbb5; --accent:#ff3b3b; --ok:#1e8e3e;
--line:rgba(255,255,255,0.16);
}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#091a2a;color:var(--text);text-align:center}
.wrap{max-width:980px;margin:0 auto;padding:18px}
h1{margin:8px 0 6px;font-size:20px}
.sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.panel{padding:14px}
input{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.08);color:var(--text);outline:none}
button{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.10);color:var(--text);cursor:pointer;font-weight:700}
button:hover{background:rgba(255,255,255,0.14)}
.primary{background:rgba(255,59,59,0.22);border-color:rgba(255,59,59,0.50)}
.primary:hover{background:rgba(255,59,59,0.30)}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hidden{display:none}
.hud{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.pill{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:999px;padding:8px 10px;font-size:14px;font-weight:600;color:var(--muted)}
.pill strong{color:var(--text)}
.cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.card{width:320px;background:var(--card);color:#111;border-radius:18px;padding:14px;border:10px solid #e9e2d6;box-shadow:0 12px 30px rgba(0,0,0,0.25)}
.hero{height:150px;border-radius:14px;background:linear-gradient(135deg,#6e8fa3,#2c3e50);position:relative;display:flex;align-items:center;justify-content:center}
.hero .title{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);color:#fff;padding:8px 10px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;text-align:left;font-weight:800}
.emoji{font-size:72px;filter:drop-shadow(0 8px 12px rgba(0,0,0,0.25))}
.stat{display:flex;justify-content:space-between;align-items:center;background:var(--row);border-radius:10px;padding:10px 12px;margin-top:10px;font-weight:700}
.stat small{font-weight:900;letter-spacing:0.4px}
.stat.clickable{outline:2px solid rgba(255,59,59,0.0);cursor:pointer}
.stat.clickable:hover{outline:2px solid rgba(59, 255, 95, 0.55);cursor:pointer}
.hint{margin-top:25px;color:var(--muted);font-size:13px}
.msg{margin-top:10px;font-size:13px}
.msg.ok{color:#baf3d0}
.msg.err{color:#ffb3b3}
.btnbar{margin-top:12px}
code{background:rgba(0,0,0,0.16);padding:2px 6px;border-radius:8px}
.hud-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.card {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  color: white;
  border: 4px solid #ffcc00;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
  font-family: Arial, Helvetica, sans-serif;
}

.hero {
  height: 180px;
  background: linear-gradient(135deg,#1e1e1e,#333);
  position: relative;
}

.hero .title {
  background:#f1c40f;
  padding:12px 16px;
  width:100%;
  box-sizing:border-box;   /* 🔥 vigtig */
  border-radius:0 0 16px 16px;
  font-size:clamp(14px, 4vw, 18px);  /* 🔥 responsiv tekst */
  text-align:center;
  word-wrap:break-word;
  color: #000;
}

.stat {
  display: flex;
  justify-content: space-between;
  background: #222;
  margin: 6px;
  padding: 10px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  border-left: 6px solid #ffcc00;
  transition: 0.2s;
}

.stat:hover {
  background: #333;
  transform: scale(1.03);
}
/* Når en kategori er valgt på kortet */
.card.has-selected .stat {
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none; /* så man ikke kan vælge en ny */
}

.card.has-selected .stat.selected {
  filter: none;
  opacity: 1;
  pointer-events: none;
  transform: scale(1.03);
  background: #ffcc00;
  color: #111;
  border-left-color: #ffcc00;
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.35), 0 10px 30px rgba(255, 204, 0, 0.25);
}

/* Ekstra lille label */
.stat.selected::after {
  content: "VALGT";
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  color: #111;
}

.dot{
  display:inline-block;
  width:20px;
  height:20px;
  border-radius:50%;
  margin-right:0;         /* nu bruger vi gap i pill */
  background:#888;
  vertical-align:middle;
  outline:2px solid rgba(255,255,255,0.35);
}

.dot.green{ background:#2ecc71; box-shadow:0 0 8px rgba(46,204,113,.7);margin-bottom:3px; }
.dot.red{ background:#e74c3c; box-shadow:0 0 8px rgba(231,76,60,.7);margin-bottom:3px; }
.dot.orange{ background:#f39c12; box-shadow:0 0 8px rgba(243,156,18,.7);margin-bottom:3px; }

.card.turn-green{
  outline:3px solid #2ecc71;
  outline-offset:2px;
  box-shadow:0 0 18px rgba(46,204,113,0.6);
}

.card.turn-red{
  outline:3px solid #2ecc71;
  outline-offset:2px;
  box-shadow:0 0 18px rgba(231,76,60,0.6);
}

.card-desc{
  margin-top:12px;
  padding:10px;
  font-size:16px;
  line-height:1.4;
  color:#ddd;
  background:rgba(255,255,255,0.05);
  border-radius:10px;
}
.card.win{
  outline:3px solid #2ecc71;
  outline-offset:2px;
  box-shadow:0 0 20px rgba(46,204,113,0.7);
}

.card.lose{
  outline:3px solid #e74c3c;
  outline-offset:2px;
  box-shadow:0 0 15px rgba(231,76,60,0.55);
  opacity:0.95;
  color: #fff;
}

.card.draw{
  outline:3px solid #3498db;
  outline-offset:2px;
  box-shadow:0 0 15px rgba(52,152,219,0.65);
}
/* VINDERENS valgte stat-række */
.card.win .stat.selected{
  background:#2ecc71 !important;
  color:#111 !important;
  outline:3px solid rgba(46,204,113,0.6);
  box-shadow:0 0 0 3px rgba(46,204,113,0.25), 0 12px 30px rgba(0,0,0,0.25);
}

.card.win .stat.selected::after{
  content:"VINDER";
  margin-left:10px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.15);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

/* Vinderens valgte stat */
.card.win .stat.selected{
  background:#2ecc71 !important;
  color:#111;
  box-shadow:0 0 0 3px rgba(46,204,113,.3),
             0 8px 25px rgba(46,204,113,.4);
}

.card.win .stat.selected::after{
  content:"VINDER";
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.15);
  font-size:11px;
  font-weight:900;
}

/* Taberens valgte stat */
.card.lose .stat.selected{
  background:#e74c3c !important;
  color:#fff;
  box-shadow:0 0 0 3px rgba(231,76,60,.3),
             0 8px 25px rgba(231,76,60,.4);
}

.card.lose .stat.selected::after{
  content:"TABER";
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.2);
  font-size:11px;
  font-weight:900;
}
button#nextBtn {
    margin-bottom: 10px;
    background-color: #30cc70;
    color: #000;
}

.round-summary {
  margin: 16px auto;
  padding: 14px 18px;
  max-width: 700px;
  border-radius: 12px;
  font-weight: 600;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
}

.round-summary.win {
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.6);
  font-size: 12px;
}

.round-summary.lose {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.6);
  font-size: 12px;
}
.intro-inline{
  margin:20px 0px;
}
/* ===== PlayingCards-ish lobby intro (safe, no JS break) ===== */

#lobby.panel{ padding: 0; overflow: hidden; border-radius: 18px; }

.pc-topbar{
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.pc-topbar-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.pc-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.pc-label{ opacity: .85; font-weight: 800; }

.pc-input{
  width: 160px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  color: var(--text);
}

.pc-btn{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .12s ease, background .12s ease;
}
.pc-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.14); }

.pc-create{ background: rgba(255,59,59,0.20); border-color: rgba(255,59,59,0.50); }
.pc-rules{ background: rgba(255,204,0,0.16); border-color: rgba(255,204,0,0.45); }

.pc-hero{
  position: relative;
  padding: 56px 16px 34px;
  min-height: 320px;
  margin: 20px 0px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pc-hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 28%, rgba(160,225,255,0.95) 0%, rgba(120,205,245,0.95) 45%, rgba(40,120,170,0.05) 85%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.16) 0 8deg, rgba(255,255,255,0) 8deg 16deg);
  opacity: 0.95;
}
.pc-hero-content{
  position: relative;
  max-width: 860px;
  text-align: center;
  color: #0b1b2a;
  padding: 0 10px;
}
.pc-hero-title{
  margin: 0;
  font-size: 44px;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(255,255,255,0.25);
}
.pc-hero-sub{
  margin: 10px auto 18px;
  max-width: 720px;
  line-height: 1.5;
  opacity: .92;
  font-weight: 800;
}
.pc-hero-hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .75;
  font-weight: 900;
}

.pc-art{ position:absolute; inset:0; pointer-events:none; }
.pc-card{
  position:absolute;
  width: 120px; height: 160px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size: 46px;
}
.pc-card-a{ left: 10%; top: 60%; transform: rotate(-10deg); }
.pc-card-b{ right: 12%; top: 52%; transform: rotate(12deg); font-size: 40px; width: 96px; height: 130px; }

.pc-chip{
  position:absolute;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  font-weight: 900;
  color: #0b1b2a;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.pc-chip-a{ left: 18%; top: 18%; }
.pc-chip-b{ right: 18%; top: 24%; }

.lobby-msg{
  max-width: 980px;
  margin: 14px auto 18px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Mobile */
@media (max-width: 900px){
  .pc-hero-title{ font-size: 34px; }
  .pc-art{ display:none; }
  .pc-topbar-inner{ flex-direction: column; align-items: stretch; }
  .pc-right{ justify-content: center; }
  .pc-input{ width: 100%; max-width: 240px; }
}

/* MODAL */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.modal-content {
  background: #1e2a38;
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  padding: 28px;
  color: white;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: popIn 0.2s ease;
}

.modal h2 {
  margin-top: 0;
}

.modal ul {
  padding-left: 18px;
  opacity: 0.9;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

@keyframes popIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.rules-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}
.rules-card{
  width: min(560px, 100%);
  background: #1e2a38;
  color: #fff;
  border-radius: 16px;
  padding: 22px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.rules-close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.rules-ok{
  margin-top: 14px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  background: rgba(255,204,0,.20);
  color: #fff;
  border: 1px solid rgba(255,204,0,.45);
}
.hidden{ display:none; }