/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./styles/globals.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');


:root {
  --card-bg: rgba(20, 24, 38, 0.92); /* mörkare frostat */
  --border: #334155;
  --text-light: #fff;
  --text-dark: #111;
  --accent-green: #10b981;
  --accent-blue: #3b82f6;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* === BODY === */
body {
  font-family: 'Poppins', sans-serif;
  background: url("https://image.api.playstation.com/gs2-sec/appkgo/prod/CUSA00772_00/2/i_57a1bcf6ba5fd73516c8f738e7d043e668f33f57a1f3cb931d36d1630f8a00ca/i/pic0.png?w=1920")
              no-repeat center center fixed;
  background-size: cover;
  background-color: rgba(0,0,0,0.35);
  background-blend-mode: overlay;
  color: var(--text-light);
}

/* === HEADER === */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: linear-gradient(90deg, #0f172a, #1e293b);
  color: var(--text-light);
  border-bottom: 2px solid var(--border);
}
.header h1 {
  font-size: 1.4rem;
  font-weight: 800;
  background: linear-gradient(90deg, #38bdf8, #3b82f6); /* gradient text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === HEADER BUTTONS === */
.controls { display: flex; gap: 10px; }
.ctrlBtn {
  background: #f8fafc;
  color: var(--text-dark);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.ctrlBtn:hover { background: #e2e8f0; transform: scale(1.03); }

/* === LAYOUT === */
.container {
  display: flex;
  gap: 20px;
  padding: 20px;
  align-items: flex-start;
  height: calc(100% - 140px); /* minus header + footer */
}

/* === BOARD & QUESTION CARDS === */
.boardCard, .question {
  background: var(--card-bg);
  color: var(--text-light);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  padding: 20px;
}
.boardCard {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.question {
  flex: 1;
  min-width: 480px;
  max-width: 560px;
  min-height: 300px;
}

/* === QUESTION CONTENT === */
.qCat {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 5px solid currentColor;
}
.qText {
  margin-bottom: 14px;
  line-height: 1.5;
  color: #f8fafc;
}
.qOptions { display: grid; gap: 10px; }
.qBtn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: #f1f5f9;
  border: none;
  font-weight: 600;
  text-align: left;
  transition: background 0.2s, transform 0.1s;
}
.qBtn:hover { background: #e2e8f0; transform: scale(1.02); }
.qBtn.correct { background: var(--accent-green); color: var(--text-light); }
.qBtn.disabled { background: #cbd5e1; cursor: not-allowed; }

/* === FOOTER / SCOREBOARD === */
.footer {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 14px 24px;
  background: linear-gradient(90deg, #0f172a, #1e293b);
  color: var(--text-light);
  border-top: 2px solid var(--border);
  border-radius: 0 0 12px 12px; /* rundade hörn nere */
  box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
}
.playerCard {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: center;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.playerTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  margin-bottom: 8px;
}
.badge {
  background: var(--accent-green);
  color: var(--text-light);
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 6px;
}
.wedges {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wDot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #1e293b;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
/* --- CENTRERING --- */
.container {
  display: flex;
  justify-content: center;  /* centrera allt horisontellt */
  align-items: flex-start;
  gap: 40px;                /* lite mer luft mellan bräde & fråga */
  padding: 20px;
  height: calc(100% - 160px); /* reservera plats för header + footer */
}

/* Brädet får fast maxbredd */
.boardCard {
  flex: 0 0 520px;   /* fast bredd */
  height: auto;
}

/* Frågekortet */
.question {
  flex: 0 0 520px;   /* samma bredd som brädet */
  min-height: 360px; /* högre kort */
  display: flex;
  flex-direction: column;
  justify-content: center; /* innehåll centrerat vertikalt */
  align-items: center;
  text-align: center;
}




/* Spelarkorten i footern */
.playerCard {
  min-width: 180px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
/* === Setup-läge (när man skriver in spelarnamn) === */
.setup {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertikalt centrerad */
  align-items: center;      /* horisontellt centrerad */
  text-align: center;
  gap: 16px;

  background: transparent;
  color: #fff;
}

/* Kort runt setup */
.setup-card {
  background: rgba(20, 24, 38, 0.92); /* mörkt frostat glas */
  color: #fff;
  padding: 28px 32px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  min-width: 320px;
  max-width: 420px;
}

/* Titel */
.setup h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 12px;
}

/* Inputs */
.setup input[type="text"] {
  padding: 10px 14px;
  border: 1px solid #334155;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 8px;
  width: 240px;
  text-align: center;
  background: #f8fafc;
  color: #111;
}

/* Knappar */
.setup button {
  background: #10b981;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 6px;
}

.setup button:hover {
  background: #059669;
  transform: scale(1.03);
}

/* "Lägg till spelare"-knappen separat style */
.setup button:first-of-type {
  background: #3b82f6;
}
.setup button:first-of-type:hover {
  background: #2563eb;
}
.modalOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
}

.modal {
  background: #1e293b;
  color: white;
  padding: 24px;
  border-radius: 12px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.closeBtn {
  margin-top: 16px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
.closeBtn:hover {
  background: #dc2626;
}
.font-trivia {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: 6rem; /* gör den lite större */
  letter-spacing: 1px; /* lite luft */
}
/* ——— Header / Logo ——— */
.header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;background:linear-gradient(90deg,#0f172a,#1e293b);
  border-bottom:2px solid #334155;box-shadow:0 2px 10px rgba(0,0,0,.35)
}

.logo{
  display:flex;align-items:center;gap:10px
}
.logoIcon{ width:30px;height:30px;color:#60a5fa; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

.font-trivia{ font-family:'Great Vibes',cursive; font-size:2.75rem; font-weight:400;
  letter-spacing:1px; color:#38bdf8; line-height:1; display:flex; align-items:baseline; gap:8px }
.font-trivia .subtitle{ font-family:ui-sans-serif,system-ui,Segoe UI,Inter,Arial;
  font-size:1.15rem; font-weight:700; color:#e5e7eb; letter-spacing:.5px }

/* ——— Controls (button row) ——— */
.controls{ display:flex; gap:10px; align-items:center }

/* Base button */
.btn{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border:none; border-radius:12px; cursor:pointer;
  color:#fff; font-weight:700; letter-spacing:.2px;
  box-shadow:0 4px 12px rgba(0,0,0,.25); transition:transform .12s ease, box-shadow .2s ease, filter .12s ease
}
.btn:active{ transform:translateY(1px); filter:saturate(1.1) }

/* Variants */
.btn--green{ background:linear-gradient(135deg,#10b981,#059669) }
.btn--indigo{ background:linear-gradient(135deg,#6366f1,#4f46e5) }
.btn--violet{ background:linear-gradient(135deg,#a855f7,#7c3aed) }

/* Dice readout “chip” (not a button) */
.pill{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;background:#0b1324;border:1px solid #1f2a44;
  color:#e5e7eb; font-weight:700; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 2px 8px rgba(0,0,0,.35)
}
.pillIcon{ width:18px;height:18px;color:#93c5fd }
.dieValue{ color:#fde047; font-weight:800 } /* yellow value */

/* Make all header icons white by default (override per-variant if you want) */
.btn svg{ color:#fff }
.font-trivia {
  font-family: 'Great Vibes', cursive;
  font-size: 8.2rem;   /* 🔥 öka textstorleken */
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}

.font-trivia .subtitle {
  font-family: 'Poppins', sans-serif; /* modern sans-serif för "Online" */
  font-size: 1.2rem;   /* samma storlek som huvudtext */
  font-weight: 700;
  color: #3b82f6;
  margin-left: 4px;
}
.header h1.font-trivia {
  font-size: 3rem;   /* lagom stort utan att spränga layouten */
  line-height: 1.2;  /* mer luft */
}

.header {
  min-height: 80px;   /* gör headern högre */
  align-items: center;
}
.font-trivia svg {
  width: 48px;   /* större ikon */
  height: 48px;
}
.font-trivia {
  font-family: 'Great Vibes', cursive;
  font-size: 3.5rem;      /* ännu större text */
  line-height: 1.1;       /* tajtare radavstånd */
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}

.font-trivia .subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;        /* större för balans mot script-texten */
  font-weight: 700;
  color: #3b82f6;
  margin-left: 6px;
}

.font-trivia svg {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.footer {
  background: #1e293b;
  border-radius: 0 0 18px 18px; /* rundade hörn bara nertill */
  padding: 28px 32px;          /* mer luft runt scoreboard */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  min-height: 2px;           /* extra höjd */
  box-sizing: border-box;
}

/* varje spelare-box i scoreboard */
.scoreCard {
  background: #334155;         /* mörkgrå ruta */
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  min-width: 200px;            /* 🔥 lite bredare */
  text-align: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.scoreCard h3 {
  margin-bottom: 8px;
  font-size: 1.2rem;
  font-weight: 700;
}

/* prickarna / wedge-markeringarna */
.scoreDots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.scoreDots .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #475569;
}

.scoreDots .dot.active {
  background: #22c55e; /* grön när aktiv */
}
.footer {
  background: linear-gradient(90deg, #0f172a, #1e293b);
  color: #fff;
  padding: 24px 32px;        /* öka padding så det blir högre */
  border-top: 2px solid #334155;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.25);

  display: flex;
  align-items: center;       /* centrera vertikalt */
  justify-content: center;   /* centrera horisontellt */
  min-height: 120px;         /* 🔥 tvinga upp foterns höjd */
}

.footerInner {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
html, body {
  min-height: 100%;
  overflow: hidden; /* 🚫 ingen scroll */
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  align-items: flex-start;
  max-height: calc(100vh - 180px); /* 🔥 tryck ihop så att footer får plats */
  overflow: hidden;
}

.boardCard, .question {
  height: 100%;
  max-height: 420px; /* krymper spelet lite så allt syns */
}

.footer {
  padding: 16px 24px 28px; /* extra luft i botten */
  background: linear-gradient(90deg, #0f172a, #1e293b);
  color: #fff;
  display: flex;
  justify-content: center;
  gap: 40px;
}
/* Setup-stacken */


.setup .sidWrap {
  margin-top: 8px;
  background: rgba(255,255,255,0.85);
  padding: 10px 14px;
  border-radius: 10px;
  text-align: center;
}

.copyToast {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 999px;
}

.sidHint {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: #334155;
  opacity: .9;
}

/* Inputs i setup */
.setup input[type="text"] {
  width: 320px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Disabled-join-knapp */
button.btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}
.setup .actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
/* === Brand / Wordmark === */
.tpBrand{
  display:flex;
  align-items:baseline;
  gap:.5rem;                  /* lite luft mellan orden */
  line-height:1;
  margin:0;
}

/* Stora skrivstilsdelen: "Trivial Pursuit" */
.tpWordmark{
  font-family:'Great Vibes', cursive;
  font-weight:400;
  /* Skalar snyggt på olika skärmar */
  font-size:clamp(44px, 6.8vw, 92px);
  letter-spacing:.5px;
  line-height:1;
  /* Lätt blå gradient som i dina headers */
  background:linear-gradient(90deg,#7dd3fc,#3b82f6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Mindre "Online" i sans-serif */
.tpOnline{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight:800;
  /* lite mindre än scriptet, men fortfarande tydligt */
  font-size:clamp(18px, 2.2vw, 32px);
  letter-spacing:.4px;
  color:#93c5fd;              /* ljusare blå ton */
  margin-left:.25rem;
  position:relative;
  top:.15em;                  /* lyft lite så baslinjerna känns jämna */
}

/* Centrerad brand i setupen */
.setup .tpBrand{
  justify-content:center;
}

/* Små skärmar – dra ner storleken en aning */
@media (max-width:480px){
  .tpWordmark{ font-size:clamp(36px, 9vw, 64px); }
  .tpOnline{   font-size:clamp(16px, 4vw, 22px); }
}
/* Se till att inget runt ordmärket klipper utanför radrutan */
.setup,
.header,
.tpBrand {
  overflow: visible;
}
/* Hela brand-raden */
.tpBrand{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  line-height:1.2;          /* ↑ mer headroom */
  overflow:visible;
}

/* Skrivstilen: "Trivial Pursuit" */
.tpWordmark{
  display:inline-block;     /* needed för padding/transform att funka rätt */
  font-family:'Great Vibes', cursive;
  font-weight:400;
  font-size:clamp(44px, 6.8vw, 92px);
  letter-spacing:.5px;
  line-height:1.15;         /* ↑ lite extra här också */
  padding-top:.25em;        /* ↑ lyft bort från klippkanten */
  background:linear-gradient(90deg,#7dd3fc,#3b82f6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  overflow:visible;
}

/* Sans-ordet: "Online" – lite mindre */
.tpOnline{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight:800;
  font-size:clamp(18px, 2.2vw, 32px);
  letter-spacing:.4px;
  color:#93c5fd;
  margin-left:.25rem;
  position:relative;
  top:.15em;                /* finjustera baslinje */
}
.setup .tpBrand { 
  justify-content:center; 
  margin-top: 12px;         /* lite luft från toppen */
}
/* För rubriken i setupen */
.tpBrand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .6rem;
  margin-top: 16px;          /* lite luft från toppen */
  overflow: visible;         /* viktigt: inget klipp */
}

/* Skrivstilsordet: "Trivial Pursuit" */
.tpWordmark{
  display: inline-block;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(56px, 7.5vw, 108px);
  letter-spacing: .4px;
  line-height: 1.18;          /* extra headroom i raden */
  padding-top: .38em;         /* lyft bort från klippkanten */
  transform: translateY(.06em); /* finjustera nedåt */
  background: linear-gradient(90deg,#a5e3ff,#7cc2ff,#4f8dfb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow: visible;
  position: relative;
}

/* Osynlig spacer ovanför texten för att förhindra toppklipp */
.tpWordmark::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.32em;    /* höjden på “svepet” */
  height: 0.32em;  /* ger plats utan att synas */
}

/* Sans-ordet: "Online" – mindre, baslinjejusterat */
.tpOnline{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 32px);
  letter-spacing: .4px;
  color: #9ec7ff;
  position: relative;
  top: .18em;      /* matcha baslinjen mot skriptet */
  margin-left: .25rem;
}

/* Säkerställ att yttre containers inte klipper */
.setup, .header { overflow: visible; }
/* Elegant wordmark + “Online” */
.tpBrand {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  justify-content: center;
  margin: 0 0 16px 0;
}
.tpWordmark {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(40px, 8vw, 88px);
  line-height: 1.1;
  color: #bde2ff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  -webkit-font-smoothing: antialiased;
}
.tpOnline {
  font-family: ui-sans-serif, system-ui, "Segoe UI", Inter, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 2.6vw, 28px);
  color: #3b82f6;
  letter-spacing: .3px;
  margin-left: .2rem;
}
/* ====== Brand (skrivstil + "Online") ====== */
.tpBrand {
  display:flex;
  align-items: baseline;
  justify-content:center;
  gap:.6rem;
  margin: 0 0 12px 0;
}
.tpWordmark{ /* skrivstil */
  font-family:'Great Vibes', cursive;
  font-weight:400;
  font-size: clamp(40px, 8vw, 88px);
  line-height:1.1;
  color:#bde2ff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.tpOnline{
  font-family:ui-sans-serif,system-ui,"Segoe UI",Inter,Arial,sans-serif;
  font-weight:800;
  font-size: clamp(16px, 2.6vw, 28px);
  color:#3b82f6;
  letter-spacing:.3px;
}

/* ====== Header – desktop default ====== */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* ====== Header – mobil ====== */
@media (max-width: 768px){
  .header--mobile{
    padding: 10px 12px;
    gap:10px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .header--mobile .logo{
    flex:1 1 100%;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .header--mobile .font-trivia{
    font-size: clamp(22px, 6.2vw, 32px);
  }
  .header--mobile .subtitle{
    font-size: clamp(12px, 3.2vw, 16px);
  }
  .header--mobile .controls{
    flex:1 1 100%;
    display:flex;
    gap:8px;
    flex-wrap: wrap;              /* låt knappar bryta rad */
    justify-content: space-between;
  }
  .header--mobile .btn{
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 12px;
  }
  .header--mobile .pill{
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 12px;
  }
}

/* ====== Layout: mobil – stapla bräde och frågekort ====== */
.container--mobile{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 8px 12px 96px; /* extra botten-padding för FAB/scoreboard */
}
.container--mobile .boardWrap,
.container--mobile .question{
  width: 100%;
}

/* Kortare typografi och knappar i frågekort på mobil */
@media (max-width: 768px){
  .question .qCat{ font-size: 18px; }
  .question .qText{ font-size: 14px; }
  .qBtn{
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
  }
}

/* ====== FAB (floating action button) för “Slå” på mobil ====== */
.fabRoll{
  position: fixed;
  right: 16px;
  bottom: 92px;              /* ovanför scoreboarden */
  z-index: 60;
  background: #4f46e5;
  color:#fff;
  font-weight:800;
  border:none;
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.fabRoll:active{ transform: translateY(1px); }

/* ====== Scoreboard – tajtare på mobil ====== */
@media (max-width: 768px){
  .footer{
    gap: 10px;
    padding: 8px 10px;
  }
  .playerCard{
    padding: 10px 12px;
    border-radius: 14px;
  }
  .playerTitle{ font-size: 15px; }
}

/* Extra: fixa att headern/brand inte beskär skrivstils-bokstäver */
.tpWordmark{ overflow: visible; }
.font-trivia{ line-height: 1.15; }
.container--mobile{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 8px 12px 96px;
}

.container--mobile .boardWrap,
.container--mobile .question{
  width: 100%;
}

@media (max-width: 768px){
  .question .qCat{ font-size: 18px; }
  .question .qText{ font-size: 14px; }
  .qBtn{ padding: 10px 12px; font-size: 14px; }
}
/* En kolumn på mobil, med fokus på frågekortet */
.container--mobile{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 10px 12px 96px; /* lämna plats för scoreboard */
}

/* Frågekortet – mer luft på mobil */
.question--mobile{
  border-radius: 14px;
  padding: 12px;
}

/* Stor “Slå”-knapp i frågekortet */
.btn--mobileBig{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  margin: 6px 0 10px 0;
}

/* Flyttval – två feta knappar */
.qBtn--mobileChoice{
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
}
.qBtn--mobileChoice .qBtnSub{
  font-size: 13px;
  opacity: .9;
}

/* Svarsalternativ – bekväm touch-yta */
.qBtn--mobileAnswer{
  width: 100%;
  font-size: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

/* Lite tightare text på mobil */
@media (max-width: 768px){
  .question .qCat{ font-size: 18px; }
  .question .qText{ font-size: 14px; }
}
/* === Mobil-luft: topp + sidor === */
@media (max-width: 768px) {
  /* Headern lite tätare men med säkerhetsutskärning (notch) */
  .header {
    padding: max(env(safe-area-inset-top, 0px), 10px)
             max(env(safe-area-inset-right, 0px), 16px)
             10px
             max(env(safe-area-inset-left, 0px), 16px);
  }

  /* Huvudcontainern får sidopadding + lite avstånd från headern */
  .container {
    padding-left: max(env(safe-area-inset-left, 0px), 16px);
    padding-right: max(env(safe-area-inset-right, 0px), 16px);
    margin-top: 10px;   /* “gapping top” */
  }

  /* Frågekortet får extra inre padding + rundare hörn */
  .question {
    padding: 16px;
    border-radius: 16px;
  }
  .question .qCat { margin-bottom: 10px; }

  /* Knapparna får jämn vertikal spacing och full bredd */
  .qOptions { gap: 10px; }
  .qOptions .qBtn {
    width: 100%;
    border-radius: 12px;
    padding: 14px 16px;
  }

  /* Scoreboarden får luft från kanterna och botten */
  .footer {
    padding: 0 16px 16px 16px;
  }
  .playerCard { margin-bottom: 14px; }
}

/* Extra: på väldigt smala skärmar (≤480px) lite mer luft */
@media (max-width: 480px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .question { padding: 18px; }
}
/* --- Connection status pill --- */
.netStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  border: 1px solid #334155;
}
.statusDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.statusDot.ok { background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,.7); }
.statusDot.bad { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,.7); }

/* --- Small neutral button (copy) --- */
.btn.btn--slate {
  background: #334155;
  color: #fff;
  border: 1px solid #475569;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  transition: transform .05s ease, filter .2s ease;
  margin-top: 6px;
}
.btn.btn--slate:hover { filter: brightness(1.1); }

/* --- “Kopierat!” toast --- */
.toastCopy {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(20, 24, 38, 0.92);
  color: #fff;
  border: 1px solid #334155;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  font-weight: 700;
  z-index: 1000;
  animation: toastIn .18s ease-out;
}

@keyframes toastIn {
  from { transform: translateX(-50%) translateY(6px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);  opacity: 1; }
}

/* --- Inline error vid join --- */
.inlineError {
  margin-top: 10px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
}