/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ====== BAS ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0b1220;color:#eaf0ff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
:root{
  --blue:#1e63c5; --blue-dark:#1653a7; --blue-deep:#0b3f89;
  --green:#25d165; --green-dark:#19b050;
  --ink:#0b1220; --panel:#0e172e;
  --muted:#9fb0d0;
  --col:56px; --gap:14px; /* hålstorlek + mellanrum */
}
a{color:#a6c4ff}

/* ====== GEMENSAMMA KNAPPAR/INPUTS ====== */
.btn{background:#2a3a68;border:1px solid #3a4e85;color:#e8eeff;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn.primary{background:linear-gradient(90deg,#3b82f6,#2563eb);border:none;color:#fff}
.btn.xl{font-size:16px;padding:12px 18px;border-radius:14px}
.btn.huge{font-size:18px;padding:14px 20px;border-radius:14px}
.btn.disabled{opacity:.55;pointer-events:none}
.in{padding:12px 14px;border-radius:12px;border:1px solid #2e4478;background:#0b162c;color:#e5edff}
.sel{padding:10px;border-radius:10px;background:#0c1a33;color:#e8f0ff;border:1px solid #28498a}
.label{opacity:.9}

/* ====== LANDING (JOIN/SKAPA) ====== */
.landing{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%, #1b2a55 0%, #0b1220 60%)}
.hero{text-align:center;margin-bottom:16px}
.heroTitle{font-size:56px;line-height:1.05;font-weight:900;letter-spacing:.5px;text-shadow:0 8px 28px rgba(0,0,0,.45);margin:0}
.heroSubtitle{opacity:.82;margin-top:6px}
.joinCard{width:min(860px,94vw);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.4);padding:18px 18px 22px}
.joinTitle{font-size:18px;font-weight:800;margin-bottom:12px}
.joinGrid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:12px;gap:12px}
.joinGrid .btn{justify-content:center}
.tinyHint{margin-top:10px;opacity:.7}
@media (max-width:820px){
  .joinGrid{grid-template-columns:1fr}
}

/* ====== LOBBY ====== */
.lobbyWrap{min-height:100vh;display:grid;place-items:start;padding:32px}
.lobbyCard{width:min(980px,94vw);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.45);padding:18px}
.lobbyHeader{display:flex;align-items:center;justify-content:space-between}
.lobbyTitle{font-size:42px;font-weight:900;margin:0}
.sessionBadge{background:#102044;color:#c9d7ff;border:1px solid #233b77;border-radius:999px;padding:6px 10px}
.playersRow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.playerPill{background:#14305b;border:1px solid #294c86;color:#e5edff;padding:6px 10px;border-radius:999px;font-weight:700}
.playerPill.host{background:#184d3b;border-color:#2b7c5f}
.cfgRow{display:grid;grid-template-columns:auto 160px auto 120px auto;align-items:center;grid-gap:12px;gap:12px;margin-top:6px}
.waitHint{margin-top:10px;color:#a8c2ff}

/* ====== TOPPBAR (visas bara i spelet) ====== */
.topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  background: #0f1a2c;
  border-bottom: 1px solid #223555;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);

  padding: 10px 16px;
  box-sizing: border-box;
}
.topbar.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1000}
.topbarInner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.brand{display:flex;align-items:center;gap:10px}
.wordmark { margin: 0; font-weight: 800; font-size: 28px; letter-spacing: .5px; }
.logo{font-size:24px}
.sessionTag{margin-left:8px;padding:4px 8px;border-radius:999px;background:#102044;color:#c9d7ff;font-size:12px}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{background:#12204a;border:1px solid #263a73;border-radius:999px;padding:6px 10px;color:#c6d4ff}
.pill.name{background:#133057;border-color:#2a4f8d}
.pill.role{background:#153b2d;border-color:#2e6a51}
.pill.role.host{background:#1c4a36;border-color:#2f7f5e}
.pill.attempts{background:#102044;border-color:#223a73}

/* ====== SPELBRÄDA / LAYOUT ====== */
/* bredda och centrera hela spelarean */
.tableWrap{
  display:grid;
  place-items:center;
  padding:16px;
  max-width:1960px;    /* bred spelarea */
  width:100%;
  margin:0 auto;
}
.tableWrap .subtitle{
  max-width:1600px;
  margin:8px auto 18px auto;
  text-align:center;
}

/* Tre kolumner: vänster | MITTEN | höger (mitten får mest plats) */
.boardOuter{
  display:grid;
  grid-template-columns:260px 1fr 360px;
  grid-gap:24px;
  gap:24px;
  align-items:start;
}
@media (min-width:1600px){
  .boardOuter{ grid-template-columns:280px 1fr 380px; }
}
@media (min-width:1800px){
  .boardOuter{ grid-template-columns:300px 1fr 420px; }
}
@media (max-width:1100px){
  .boardOuter{ grid-template-columns:1fr; gap:16px; }
}

/* Bins (vänster/höger) */
.bin{position:relative;background:var(--blue);border:2px solid var(--blue-dark);border-radius:12px;box-shadow:inset 0 8px 14px rgba(0,0,0,.35),0 8px 28px rgba(0,0,0,.35);padding:10px}
.bin .binLid.green{position:absolute;right:8px;top:-10px;width:80px;height:14px;border-radius:6px;background:linear-gradient(180deg,var(--green),var(--green-dark));box-shadow:0 3px 8px rgba(0,0,0,.35)}
/* ta bort låst höjd – låt högerkorten växa utan scroll */
.bin-left{height:auto}
.bin-right{height:auto}
.binInner{height:auto;overflow:visible;border-radius:8px;background:rgba(255,255,255,.06);padding:8px}

/* feedback/nyckelpinnar */
.keys{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:6px;gap:6px;justify-items:center;align-items:center}
.keyBead{width:14px;height:14px;border-radius:50%;border:1px solid #000;box-shadow:inset 0 2px 3px rgba(255,255,255,.25)}
.keyBead.black{background:#000}.keyBead.white{background:#fff}

/* ===== FÄRGPALETT – EN RAD, INGEN SCROLL ===== */
.colors{
  display:flex !important;
  flex-wrap:nowrap;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px 6px 12px;
  overflow:hidden !important;    /* döljer ev. artefakter */
}
.colorBead{width:34px;height:34px;border-radius:50%;border:2px solid rgba(0,0,0,.35);box-shadow:inset 0 0 8px rgba(255,255,255,.28),0 2px 6px rgba(0,0,0,.4)}
.colorBead:hover{transform:scale(1.08);transition:.12s}
/* ta bort rullist i högerkortet */
.bin-right::-webkit-scrollbar,
.colors::-webkit-scrollbar{ display:none; }

/* Blå bräda */
.boardMiddle{position:relative; min-width:0; }
.greenCover.left,.greenCover.right{position:absolute;top:-10px;width:110px;height:18px;border-radius:6px;background:linear-gradient(180deg,var(--green),var(--green-dark));box-shadow:0 3px 8px rgba(0,0,0,.35);z-index:2}
.greenCover.left{left:-16px}.greenCover.right{right:-16px}
.blueBoard{background:linear-gradient(180deg,var(--blue),var(--blue-dark) 60%,var(--blue-deep));border:2px solid var(--blue-dark);border-radius:16px;padding:18px;box-shadow:inset 0 16px 28px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.45)}
.codeArea{position:relative;margin-bottom:12px;padding:10px;border-radius:12px;background:rgba(255,255,255,.06)}
.codeCover{position:absolute;inset:8px;border-radius:12px;background:linear-gradient(180deg,#b6e3b6,#82d782);border:2px solid #53c75c;box-shadow:inset 0 10px 18px rgba(0,0,0,.2),0 8px 18px rgba(0,0,0,.25);transform:translateY(0);transition:transform .5s ease;z-index:5}
.codeCover.open{transform:translateY(-120%)}
.codeRow{display:grid;grid-template-columns:repeat(var(--cols),var(--col));grid-gap:var(--gap);gap:var(--gap);justify-content:center}

.guessArea{display:flex;flex-direction:column;gap:10px}
.guessRow{display:grid;grid-template-columns:auto 78px;grid-gap:12px;gap:12px;align-items:center}
.holesRow{display:grid;grid-gap:var(--gap);gap:var(--gap);grid-template-columns:repeat(var(--cols),var(--col));width:calc(var(--cols)*var(--col) + (var(--cols)-1)*var(--gap));margin:0 auto}

.hole{width:var(--col);height:var(--col);border-radius:50%;background:radial-gradient(circle at 35% 30%, #d0e2ff 0%, #b1caf5 14%, #6d93d6 45%, #3d66a8 70%, #214c8c 85%);border:3px solid #0f3c82;display:grid;place-items:center;box-shadow:inset 0 10px 18px rgba(0,0,0,.35), inset 0 -8px 16px rgba(255,255,255,.18)}
.hole.drop{outline:2px dashed rgba(255,255,255,.25)}
.peg{width:calc(var(--col) - 16px);height:calc(var(--col) - 16px);border-radius:50%;border:1px solid rgba(0,0,0,.45);box-shadow:inset 0 0 10px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.45);transform:scale(0);transition:transform .22s ease}
.peg.pop{transform:scale(1)}

.fbBox{display:flex;justify-content:center}
.fbGrid{display:grid;grid-template-columns:repeat(2,16px);grid-auto-rows:16px;grid-gap:8px;gap:8px;background:rgba(255,255,255,.08);border:2px solid #0d3a7c;border-radius:10px;padding:8px}
.fbGrid.ghost{opacity:.45}
.fbDot{width:16px;height:16px;border-radius:50%;border:1px solid #000;opacity:0}
.fbDot.black{background:#000}.fbDot.white{background:#fff}.fbDot.empty{background:transparent;border:1px dashed rgba(0,0,0,.45)}
.anim-fade{animation:fade .35s ease forwards}
@keyframes fade{to{opacity:1}}

.winnerBanner{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:#0b1d3d;border:1px solid #244a9a;color:#8af2be;padding:10px 14px;border-radius:12px;font-weight:900;box-shadow:0 10px 26px rgba(0,0,0,.35);z-index:6}

/* ====== MODAL ====== */
.modalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:40}
.modal{background:#0e172e;border:1px solid #223868;color:#e5edff;border-radius:14px;padding:18px;max-width:520px}

/* Centrerar lobby-kortet på sidan */
.lobbyWrap{
  min-height:100vh;
  display:grid;
  place-items:center;   /* <-- var start tidigare */
  padding:32px;
}

/* Hostens hemliga kod i topbaren */
.secretBadge{
  margin-left:8px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#0f1f3f;
  border:1px solid #274a9c;
  box-shadow:0 4px 14px rgba(0,0,0,.25), inset 0 6px 12px rgba(255,255,255,.04);
}
.miniPeg{
  width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 0 6px rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.35);
}

/* ===== Chat ===== */
.chatWrap{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 320px;
  max-height: 60vh;
  display: none;
  flex-direction: column;
  background: #173055;
  border: 1px solid #2b4f8e;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 12px 16px rgba(255,255,255,.04);
  overflow: hidden;
  z-index: 60;
}
.chatWrap.open{ display:flex; }

.chatHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; font-weight:700; color:#fff;
  background: linear-gradient(180deg,#1b3866,#152b50);
}
.chatClose{
  background:transparent; border:none; color:#cbd5e1; font-size:16px; cursor:pointer;
}
.chatBody{
  padding:10px; overflow:auto; background:#18345f;
  display:flex; flex-direction:column; gap:8px;
}
.chatMsg{ display:grid; grid-template-areas:"from ts" "bubble bubble"; grid-template-columns:auto 1fr; grid-gap:2px 8px; gap:2px 8px; }
.chatMsg.mine{ grid-template-areas:"ts from" "bubble bubble"; }
.chatMsg .from{ grid-area:from; font-size:12px; color:#cbd5e1; }
.chatMsg .ts{ grid-area:ts; font-size:11px; color:#94a3b8; text-align:right; }
.chatMsg .bubble{
  grid-area:bubble; max-width: 90%; padding:8px 10px; border-radius:12px;
  background:#0f2446; color:#e5e7eb; border:1px solid #264a86;
  box-shadow: 0 4px 10px rgba(0,0,0,.25), inset 0 6px 10px rgba(255,255,255,.03);
}
.chatMsg.mine .bubble{ background:#2153a6; border-color:#3c7be2; }

.chatInputRow{ display:flex; gap:8px; padding:10px; background:#13294c; }
.chatInput{
  flex:1 1; border-radius:10px; border:1px solid #2b4f8e; background:#0c1e3d; color:#e5e7eb;
  padding:8px 10px; outline:none;
}
/* ====== SPELBRÄDA / LAYOUT – NY BREDD & GUTTERS ====== */
/* Samma sidogutter som topbaren (du hade ~24px där) */
.tableWrap{
  display:grid;
  place-items:stretch;          /* låt grid fylla bredden */
  padding:16px 24px 28px;       /* ← matchar topbarens sida-padding */
  max-width:none;               /* inget tak här */
}

/* Tre kolumner: vänsterfack (fast), MITTEN = 1fr (störst), högerfack (fast) */
.boardOuter{
  display:grid;
  grid-template-columns: 300px 1fr 360px;  /* ← mittkolumnen dominerar */
  grid-gap:22px;
  gap:22px;
  align-items:start;
}

/* Mobil/tablet – stapla allt och krymp paletten */
@media (max-width:1100px){
  .boardOuter{ grid-template-columns: 1fr; }
  .bin-left,.bin-right{ min-width:auto; }
}

/* ====== BINS (vänster/höger) – ingen onödig scroll ====== */
.bin{ 
  position:relative;
  background:var(--blue);
  border:2px solid var(--blue-dark);
  border-radius:12px;
  box-shadow:inset 0 8px 14px rgba(0,0,0,.35),0 8px 28px rgba(0,0,0,.35);
  padding:12px;
}
.bin-left{ min-width:300px; }
.bin-right{ min-width:360px; }   /* ← ge paletten plats */

/* Inget scroll i paletter/nycklar i desktop-läge */
.binInner{
  height:auto;          /* låt innehåll styra höjd i desktop */
  overflow:visible;     /* ingen scrollbar */
  border-radius:8px;
  background:rgba(255,255,255,.06);
  padding:8px;
}

/* ====== FÄRGPALETT – 6 färger utan scroll ====== */
.colors{
  display:grid;
  grid-template-columns: repeat(6, 44px); /* plats för 6 kulor på rad */
  grid-gap:10px;
  gap:10px;
  justify-content:center;
  align-content:start;
  padding:10px;
}
.colorBead{
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.35);
  box-shadow: inset 0 0 8px rgba(255,255,255,.28), 0 2px 6px rgba(0,0,0,.4);
}
.colorBead:hover{ transform:scale(1.08); transition:.12s; }

/* Mindre skärmar – lite mindre pärlor */
@media (max-width:1100px){
  .colors{ grid-template-columns: repeat(6, 36px); gap:8px; }
  .colorBead{ width:32px; height:32px; }
}

/* ====== BLÅ MITTBRÄDA – behåll look’n men låt centreringen vara bred ====== */
.boardMiddle{ position:relative; }
.blueBoard{
  background:linear-gradient(180deg,var(--blue),var(--blue-dark) 60%,var(--blue-deep));
  border:2px solid var(--blue-dark);
  border-radius:16px;
  padding:18px;
  box-shadow:inset 0 16px 28px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.45);
}

/* Hålmatrisen centreras men får full bredd i mittenkolumnen */
.holesRow{
  display:grid;
  grid-gap:var(--gap);
  gap:var(--gap);
  grid-template-columns: repeat(var(--cols), var(--col));
  width: max-content;            /* exakt så bred som hålen behöver */
  margin: 0 auto;                /* centrera i mittkolumnen */
}

/* Kodlocket och gröna “clips” orörda */
.greenCover.left,.greenCover.right{
  position:absolute; top:-10px; width:110px; height:18px;
  border-radius:6px; background:linear-gradient(180deg,var(--green),var(--green-dark));
  box-shadow:0 3px 8px rgba(0,0,0,.35); z-index:2;
}
.greenCover.left{ left:-16px; } .greenCover.right{ right:-16px; }

/* Feedbackrutans layout orörd; säkerställ centrering */
.fbBox{ display:flex; justify-content:center; }
/* === Modal overlay (alias till din modalBackdrop) === */
.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  z-index: 1000; /* över topbar och bräda */
}

/* Puts på själva modalkortet (din .modal finns redan) */
.modal.aboutModal {
  width: min(92vw, 680px);
  max-height: 75vh;
  overflow: auto;
  background: #0e172e;
  border: 1px solid #223868;
  color: #e5edff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 28px 60px rgba(0,0,0,.5);
}

.modal.aboutModal h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
}

.modal.aboutModal h3 {
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #cfe3ff;
}

.modal.aboutModal p { margin: 0 0 10px; }
.modal.aboutModal ul { margin: 0 0 8px 18px; }

/* Snygg stäng-knapp */
.closeBtn {
  background: linear-gradient(180deg,#1e3a8a,#1d335f);
  color: #e9f2ff;
  font-weight: 800;
  border: 1px solid #2a4f8d;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.closeBtn:hover {
  filter: brightness(1.06);
}
.sessionCreated {
  margin-top: 16px;
  background: #20242a;
  color: #fff;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
.sessionCreated .createdBy {
  font-size: 1rem;
  margin-bottom: 6px;
}
.sessionCreated .sessionIdBadge {
  background: #2d3748;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 1.1rem;
  color: #90cdf4;
}
.sessionCreated .sessionIdBadge .id {
  font-weight: bold;
  color: #63b3ed;
}