/* Hem – hubbens eget utseende. Spelen ritar sitt eget inuti sin iframe. */
:root {
  --panel: rgba(255, 255, 255, 0.07);
  --text: #eaf4ff;
  --dim: #a9c6de;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #0a2840 0%, #123c5c 100%) fixed;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 🎉 Releaseeventet: Hem blir en hamnfest ---------- */
/* Natthimmel över mörkt vatten, med ljusskimmer, konfetti och fyrverkerier.
   Allt är ren CSS bakom innehållet – inget ritas, inget tar prestanda. */
body.event {
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(255, 209, 102, 0.16) 0%, rgba(255, 209, 102, 0) 60%),
    linear-gradient(180deg, #120a2c 0%, #241452 38%, #123c5c 72%, #0a2840 100%) fixed;
}
/* Stjärnor och konfetti som dalar sakta */
body.event::before {
  content: '';
  position: fixed;
  inset: -20% 0 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(2px 2px at 78% 12%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(3px 3px at 33% 42%, rgba(255, 209, 102, 0.9), transparent 60%),
    radial-gradient(3px 3px at 64% 63%, rgba(94, 242, 192, 0.85), transparent 60%),
    radial-gradient(3px 3px at 88% 48%, rgba(155, 107, 255, 0.9), transparent 60%),
    radial-gradient(2px 2px at 22% 78%, rgba(255, 140, 190, 0.85), transparent 60%),
    radial-gradient(2px 2px at 52% 88%, rgba(255, 255, 255, 0.6), transparent 60%);
  background-size: 100% 100%;
  animation: konfetti 22s linear infinite;
}
/* Två fyrverkerier som tänds i tur och ordning */
body.event::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 26%, rgba(255, 209, 102, 0.5) 0 2px, rgba(255, 209, 102, 0.18) 3px 6px, transparent 7px),
    radial-gradient(circle at 76% 20%, rgba(94, 242, 192, 0.5) 0 2px, rgba(94, 242, 192, 0.18) 3px 6px, transparent 7px);
  animation: smallar 6s ease-out infinite;
}
@keyframes konfetti {
  from { transform: translateY(0); }
  to { transform: translateY(20%); }
}
@keyframes smallar {
  0% { transform: scale(0.2); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: scale(14); opacity: 0.25; }
  70%, 100% { transform: scale(18); opacity: 0; }
}
/* Innehållet ligger ovanpå dekoren */
body.event #hylla, body.event .toppknappar { position: relative; z-index: 1; }
/* Banderollen glimmar i guld */
body.event #admin-event { width: 100%; margin-top: 8px; padding: 12px; font: inherit; font-size: 15px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: var(--text); }
.eventband { margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 209, 102, 0.12); border: 1px solid rgba(255, 209, 102, 0.35); line-height: 1.5; }
.eventband b { color: #ffd166; font-size: 18px; }
.eventband span { display: block; font-size: 13px; color: var(--dim); }
#eventband {
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.3), rgba(155, 107, 255, 0.3), rgba(94, 242, 192, 0.25));
  background-size: 200% 100%;
  animation: guldskimmer 9s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(255, 209, 102, 0.18);
}
@keyframes guldskimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* Den som bett om mindre rörelse får stillbilden */
@media (prefers-reduced-motion: reduce) {
  body.event::before, body.event::after, body.event #admin-event { width: 100%; margin-top: 8px; padding: 12px; font: inherit; font-size: 15px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: var(--text); }
.eventband { margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 209, 102, 0.12); border: 1px solid rgba(255, 209, 102, 0.35); line-height: 1.5; }
.eventband b { color: #ffd166; font-size: 18px; }
.eventband span { display: block; font-size: 13px; color: var(--dim); }
#eventband { animation: none; }
  body.event::after { opacity: 0.3; }
}
#admin-event { width: 100%; margin-top: 8px; padding: 12px; font: inherit; font-size: 15px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: var(--text); }
.eventband { margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 209, 102, 0.12); border: 1px solid rgba(255, 209, 102, 0.35); line-height: 1.5; }
.eventband b { color: #ffd166; font-size: 18px; }
.eventband span { display: block; font-size: 13px; color: var(--dim); }
#eventband {
  margin: 0 auto 4px;
  max-width: 900px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.22), rgba(155, 107, 255, 0.22));
  border: 1px solid rgba(255, 209, 102, 0.45);
  text-align: center;
  line-height: 1.5;
}
#eventband b { color: #ffd166; font-size: 18px; }
#eventband span { display: block; font-size: 13px; color: var(--dim); }

/* ---------- Spelhyllan: en stor rad per spel ---------- */
#hylla {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           calc(32px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

.pill {
  position: relative;
  align-self: flex-end;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.pill:hover { background: rgba(255, 255, 255, 0.14); }

/* Röd plupp: olästa meddelanden i inkorgen */
.pill.ny::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 2px #10344f;
}

.toppknappar { display: flex; gap: 8px; align-self: flex-end; }

#status { color: var(--dim); line-height: 1.6; }
#status code { background: rgba(0, 0, 0, 0.35); padding: 2px 6px; border-radius: 6px; }

.rad {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 20px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.rad:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-2px); }

.rad .bild {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #0b2033 center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}
.rad .titel { display: block; font-size: 26px; font-weight: 600; margin-bottom: 6px; }
.rad .text { display: block; font-size: 15px; color: var(--dim); line-height: 1.5; }
.rad .märke { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: #9dffb0; }

.rad.stängd { cursor: default; opacity: 0.5; }
.rad.stängd:hover { transform: none; background: var(--panel); }
.rad.stängd .märke { color: var(--dim); font-weight: normal; }

@media (max-width: 620px) {
  .rad { grid-template-columns: 1fr; }
  .rad .titel { font-size: 22px; }
}

/* ---------- Ett spel som körs ---------- */
#spelvy { position: fixed; inset: 0; background: #000; z-index: 20; }
#spelram { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Rutor: profil och feedback ---------- */
#feedback { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 16, 28, 0.85); }
#feedback[hidden] { display: none; }
#feedback .box { width: min(460px, calc(100vw - 32px)); background: rgba(10, 40, 65, 0.97);
  border-radius: 18px; padding: 26px 24px 20px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); text-align: center; }
#feedback h2 { margin: 0 0 6px; font-size: 24px; }
#feedback p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #cfe8ff; }
#feedback textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical;
  border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.3); color: #fff; }
#feedback textarea:focus { outline: none; border-color: #ffd166; }
#feedback .fel { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: #ff9d7a; }
#feedback .fel.ok { color: #9dffb0; }
#feedback .stor { margin-top: 10px; width: 100%; padding: 13px; font: inherit; font-size: 17px; font-weight: bold;
  border: 0; border-radius: 12px; background: #2e9e5b; color: #fff; cursor: pointer; }
#feedback .stor:hover { background: #37b86b; }
#feedback .tunn { margin-top: 8px; font-size: 15px; font-weight: normal; background: rgba(255, 255, 255, 0.1); }
#feedback .tunn:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- Inkorgen, användarlistan och statistiken ---------- */
#statistik, #anvandare, #inkorg, #narvaro, #admin, #rum, #race, #inbjudan, #rekord, #rapport, #rapporter, #varning, #meddelande { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 16, 28, 0.85); padding: 16px; }
#statistik[hidden], #anvandare[hidden], #inkorg[hidden], #narvaro[hidden], #admin[hidden], #rum[hidden], #race[hidden], #inbjudan[hidden], #rekord[hidden], #rapport[hidden], #rapporter[hidden], #varning[hidden], #meddelande[hidden] { display: none; }
/* Rutan är en pelare: rubrik och knappar sitter still, listan skrollar */
#statistik .box, #anvandare .box, #inkorg .box, #narvaro .box, #admin .box, #rum .box, #race .box, #inbjudan .box, #rekord .box, #rapport .box, #rapporter .box, #varning .box, #meddelande .box { width: min(620px, 100%); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(10, 40, 65, 0.97); border-radius: 18px; padding: 26px 24px 20px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); text-align: center; }
#statistik h2, #anvandare h2, #inkorg h2, #narvaro h2, #admin h2, #rum h2, #race h2, #inbjudan h2, #rekord h2, #rapport h2, #rapporter h2, #varning h2, #meddelande h2 { margin: 0 0 6px; font-size: 24px; flex: none; }
#statistik p, #anvandare p, #inkorg p, #narvaro p, #admin p, #rum p, #race p, #inbjudan p, #rekord p, #rapport p, #rapporter p, #varning p, #meddelande p, #anvandare input, #inkorg input, #admin input,
#anvandare .stor, #inkorg .stor { flex: none; }
#anvandare p, #inkorg p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #cfe8ff; }
#anvandare input, #inkorg input { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.3); color: #fff; }
#anvandare input:focus, #inkorg input:focus { outline: none; border-color: #ffd166; }
#anvandare .fel, #inkorg .fel { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: #ff9d7a; }
#statistik .stor, #anvandare .stor, #inkorg .stor { margin-top: 10px; width: 100%; padding: 13px; font: inherit; font-size: 17px; font-weight: bold;
  border: 0; border-radius: 12px; background: #2e9e5b; color: #fff; cursor: pointer; }
#statistik .stor:hover, #anvandare .stor:hover, #inkorg .stor:hover { background: #37b86b; }
#statistik .tunn, #anvandare .tunn, #inkorg .tunn { margin-top: 8px; font-size: 15px; font-weight: normal; background: rgba(255, 255, 255, 0.1); }
#statistik .tunn:hover, #anvandare .tunn:hover, #inkorg .tunn:hover { background: rgba(255, 255, 255, 0.18); }
#statistik-lista, #anvandare-lista, #inkorg-lista { text-align: left; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#anvandare-lista:not(:empty), #inkorg-lista:not(:empty) { margin-top: 4px; padding-right: 4px; }
#statistik-lista .post, #anvandare-lista .post, #inkorg-lista .post { background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; }
#statistik-lista .huvud, #anvandare-lista .huvud, #inkorg-lista .huvud { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
#statistik-lista .huvud b, #anvandare-lista .huvud b, #inkorg-lista .huvud b { color: #ffd166; }
#statistik-lista .spar, #anvandare-lista .spar, #inkorg-lista .spar { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #7f9bb3; margin: 0 0 8px; }
#inkorg-lista .text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* ---------- Profilrutan ---------- */
#statistik-lista .plats { font-size: 20px; margin-right: 8px; }
#statistik-lista .stapel { height: 6px; border-radius: 3px; background: #2e9e5b; margin-top: 8px; min-width: 6px; }

#profil { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 16, 28, 0.85); }
#profil[hidden] { display: none; }
#profil .box { width: min(420px, calc(100vw - 32px)); background: rgba(10, 40, 65, 0.97);
  border-radius: 18px; padding: 28px 26px 22px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); text-align: center; }
#profil h2 { margin: 0 0 6px; font-size: 26px; }
#profil p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #cfe8ff; }
#profil input { width: 100%; padding: 13px 14px; font-size: 16px; font-family: inherit; border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.3); color: #fff; }
#profil input:focus { outline: none; border-color: #ffd166; }
#profil .fel { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: #ff9d7a; }
#profil .fraga { margin: 14px 0 8px; }
#profil .enheter { display: flex; gap: 8px; }
#profil .enheter button { flex: 1; padding: 12px 4px; font: inherit; font-size: 13px; line-height: 1.5; color: var(--text);
  border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.1); cursor: pointer; }
#profil .enheter button .ikon { display: block; font-size: 22px; }
#profil .enheter button.vald { background: #2a6fb0; box-shadow: inset 0 0 0 2px #ffd166; }
#profil .val { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; font-size: 14px; line-height: 1.4; color: #cfe8ff; cursor: pointer; }
#profil .val input { width: 20px; height: 20px; margin: 0; accent-color: #ffd166; flex: none; }
#profil .stor { margin-top: 12px; width: 100%; padding: 14px; font: inherit; font-size: 18px; font-weight: bold;
  border: 0; border-radius: 12px; background: #2e9e5b; color: #fff; cursor: pointer; }
#profil .stor:hover { background: #37b86b; }
#profil .tunn { margin-top: 8px; font-size: 15px; font-weight: normal; background: rgba(255, 255, 255, 0.1); }
#profil .tunn:hover { background: rgba(255, 255, 255, 0.18); }
#profil .liten { margin: 14px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); }

/* ---------- 🗨️ Chatten ---------- */
/* Ligger ovanpå allt utom rutorna (z 40), även över spelet (z 20). */
#chatt-knapp { position: fixed; z-index: 30; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  font-size: 20px; padding: 8px 12px; opacity: 0.85; }
#chatt-knapp[hidden] { display: none; }
#chatt-plupp { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #ff4d4d; color: #fff; font-size: 12px; font-weight: bold; line-height: 20px; text-align: center; }
#chatt-plupp[hidden] { display: none; }
#chatt { position: fixed; z-index: 35; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 24px)); height: min(520px, calc(100vh - 24px)); display: flex; flex-direction: column;
  background: rgba(10, 40, 65, 0.97); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); overflow: hidden; }
#chatt[hidden] { display: none; }
#chatt .huvud { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex: none; }
#chatt-flikar { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; }
#chatt-flikar button { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
#chatt-flikar button.vald { background: #2a6fb0; border-color: #ffd166; }
#chatt-flikar button .plupp { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: #ff4d4d; font-size: 11px; font-weight: bold; line-height: 18px; text-align: center; }
#chatt .liten { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, 0.08);
  color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
#chatt .liten:hover { background: rgba(255, 255, 255, 0.16); }
#chatt-lista { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  -webkit-user-select: text; user-select: text; }
#chatt-lista .msg { position: relative; padding: 8px 34px 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 14px; line-height: 1.45; }
#chatt-lista .msg.egen { background: rgba(42, 111, 176, 0.35); }
#chatt-lista .msg.system { background: transparent; color: var(--dim); font-size: 13px; text-align: center; padding-right: 10px; }
#chatt-lista .msg b { color: #ffd166; margin-right: 6px; }
#chatt-lista .msg time { color: var(--dim); font-size: 11px; }
#chatt-lista .msg .text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
#chatt-lista .msg .mer { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dim); font: inherit; font-size: 16px; line-height: 24px; cursor: pointer; }
#chatt-lista .msg .mer:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); }
#chatt-lista .msg .meny { display: flex; gap: 6px; margin-top: 6px; }
#chatt-lista .msg .meny button { padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.25); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
#chatt-status { flex: none; margin: 0; padding: 0 12px 4px; min-height: 16px; font-size: 12px; color: #ff9d7a; }
#chatt .fot { display: flex; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); flex: none; }
#chatt-text { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: 16px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.3); color: var(--text); }
#chatt-text:focus { outline: none; border-color: #ffd166; }
#chatt-skicka { flex: none; padding: 10px 14px; border: 0; border-radius: 10px; background: #2a9d5c; color: #fff; font: inherit; font-weight: bold; cursor: pointer; }
#chatt-skicka:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 480px) {
  #chatt { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(70vh, 520px); }
}

/* ---------- 🟢 Närvaro ---------- */
#narvaro-knapp[hidden] { display: none; }
#narvaro-lista { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#narvaro-lista .post { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
#narvaro-lista .post b { color: #ffd166; }
#narvaro-lista .post .var { margin-left: auto; color: var(--dim); font-size: 13px; white-space: nowrap; }
#narvaro-lista .post.jag { background: rgba(42, 111, 176, 0.35); }
#narvaro .stor { flex: none; }

/* ---------- ⚙️ Admin ---------- */
#admin-knapp[hidden] { display: none; }
#admin .box { width: min(460px, 100%); }
#admin-panel h3 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
#admin-panel .stor { margin-top: 8px; }
#admin-panel .svag { font-size: 13px; color: var(--dim); background: transparent; }
#admin .stor { flex: none; }

/* ---------- 🚪 Rummet ---------- */
#rum-knapp { position: fixed; z-index: 30; right: calc(70px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  font-size: 15px; padding: 10px 12px; opacity: 0.85; }
#rum-knapp[hidden] { display: none; }
#rum .box { width: min(460px, 100%); }
#rum h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); flex: none; }
#rum-medlemmar, #rum-lista { display: flex; flex-direction: column; gap: 6px; flex: none; }
#rum-medlemmar .post, #rum-lista .post { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 14px; }
#rum-medlemmar .post b, #rum-lista .post b { color: #ffd166; }
#rum .post .var { margin-left: auto; color: var(--dim); font-size: 13px; }
#rum .post button { padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
#rum .rad-kod { display: flex; gap: 8px; margin-top: 8px; flex: none; }
#rum-kod { flex: 1; min-width: 0; padding: 12px 14px; font: inherit; font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.3); color: var(--text); }
#rum-kod:focus { outline: none; border-color: #ffd166; }
#rum .rad-kod .stor { width: auto; margin: 0; flex: none; }
#rum .stor { flex: none; }
#rum .fel { flex: none; }

/* ---------- 🏁 Race ---------- */
#race-knapp { position: fixed; z-index: 30; right: calc(128px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  font-size: 15px; padding: 10px 12px; opacity: 0.85; }
#race-knapp[hidden] { display: none; }
#race-knapp.het { background: rgba(255, 209, 102, 0.25); border-color: #ffd166; opacity: 1; }
#race .box, #inbjudan .box { width: min(460px, 100%); }
#race h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); flex: none; }
#race .rad-val { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 10px; font-size: 14px; flex: none; }
#race .rad-val label { display: flex; align-items: center; gap: 8px; }
#race-platser { width: 70px; padding: 8px 10px; font: inherit; font-size: 16px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.3); color: var(--text); }
#race-auto { width: 18px; height: 18px; accent-color: #ffd166; }
#race-medlemmar, #race-bjud { display: flex; flex-direction: column; gap: 6px; flex: none; }
#race-medlemmar .post, #race-bjud .post { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 14px; }
#race-medlemmar .post b, #race-bjud .post b { color: #ffd166; }
#race-medlemmar .post.jag { background: rgba(42, 111, 176, 0.35); }
#race-medlemmar .post .plats { min-width: 26px; font-weight: bold; }
#race .post .var { margin-left: auto; color: var(--dim); font-size: 13px; white-space: nowrap; }
#race .post button { padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
#race .stor, #race .fel, #inbjudan .stor { flex: none; }
#race-nedrakning { position: fixed; z-index: 34; top: calc(70px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  padding: 10px 28px; border-radius: 18px; background: rgba(10, 40, 65, 0.85); border: 2px solid #ffd166; color: #ffd166;
  font-size: 44px; font-weight: 800; letter-spacing: 0.04em; pointer-events: none; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
#race-nedrakning[hidden] { display: none; }
#race-nedrakning.go { color: #9dffb0; border-color: #9dffb0; }
#race-notis { position: fixed; z-index: 34; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 10px 14px; border-radius: 14px;
  background: rgba(10, 40, 65, 0.96); border: 1px solid #ffd166; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); font-size: 14px; }
#race-notis[hidden] { display: none; }
#race-notis button { padding: 6px 12px; border-radius: 8px; border: 0; font: inherit; font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; }
#race-notis-ja { background: #2a9d5c; color: #fff; }
#race-notis-nej { background: rgba(255, 255, 255, 0.12); color: var(--text); }

/* ---------- Knapparna medan ett spel körs ----------
   Spelen har sina egna pekknappar i hörnen och menyer som täcker det mesta på
   en telefon. Därför samlas Hems knappar bakom en enda liten 🌐 i vänsterkanten
   mitt på skärmen, och fälls ut till 🗨️ 🚪 🏁 vid tryck. På Hem-sidan ligger
   🗨️ kvar i hörnet som vanligt. */
#hubb-knapp[hidden] { display: none; }
#hubb-knapp { position: fixed; z-index: 31; left: calc(4px + env(safe-area-inset-left)); top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 18px; line-height: 40px; text-align: center;
  background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.5); opacity: 0.75; }
#hubb-knapp:hover, body.hubb-oppen #hubb-knapp { opacity: 1; background: rgba(20, 50, 78, 0.9); }
body.hubb-oppen #hubb-knapp { border-color: #ffd166; }
#mp-knapp[hidden] { display: none; }
body.spelar #chatt-knapp, body.spelar #rum-knapp, body.spelar #race-knapp, body.spelar #mp-knapp {
  display: none;
  right: auto; bottom: auto; left: calc(50px + env(safe-area-inset-left)); top: 50%;
  width: 46px; height: 46px; padding: 0; border-radius: 14px; font-size: 20px; line-height: 46px; text-align: center;
  background: rgba(20, 50, 78, 0.95); border: 2px solid rgba(255, 255, 255, 0.5); opacity: 1;
}
body.spelar.hubb-oppen #chatt-knapp:not([hidden]), body.spelar.hubb-oppen #rum-knapp:not([hidden]), body.spelar.hubb-oppen #race-knapp:not([hidden]), body.spelar.hubb-oppen #mp-knapp:not([hidden]) { display: block; }
body.spelar #chatt-knapp { transform: translateY(-108px); }
body.spelar #rum-knapp { transform: translateY(-51px); }
body.spelar #race-knapp { transform: translateY(6px); }
body.spelar #mp-knapp { transform: translateY(63px); }
body.spelar #mp-knapp.av { opacity: 0.6; filter: grayscale(1); }
/* Det korta som ändå ska synas (rumskod, platser, sekunder, olästa) blir en liten lapp */
.pill .lapp { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 6px; border-radius: 8px;
  background: #ffd166; color: #0a2840; font-size: 10px; font-weight: 800; line-height: 16px; white-space: nowrap; }
.pill .lapp[hidden] { display: none; }
body:not(.spelar) #rum-knapp .lapp, body:not(.spelar) #race-knapp .lapp { position: static; transform: none; margin-left: 6px; background: transparent; color: inherit; font-size: 14px; font-weight: 600; }
#hubb-knapp.het { border-color: #ffd166; opacity: 1; }
/* Spel utan multiplayer har bara chatten bakom knappen – då står den mitt för */
body.spelar:not(.hubb-online) #chatt-knapp { transform: translateY(-23px); }
/* Multiplayer av: bara chatten och strömbrytaren finns kvar */
body.spelar.hubb-online.ensam #chatt-knapp { transform: translateY(-51px); }
body.spelar.hubb-online.ensam #mp-knapp { transform: translateY(6px); }
/* Flygsimulatorn har sina knappar längs vänsterkanten: "hubbKnapp": "höger" i manifestet
   flyttar Hems knapp till högerkanten, en bit upp (gasen sitter nedtill). */
body.spelar.hubb-hoger #hubb-knapp { left: auto; right: calc(4px + env(safe-area-inset-right)); top: 36%; }
body.spelar.hubb-hoger #chatt-knapp, body.spelar.hubb-hoger #rum-knapp, body.spelar.hubb-hoger #race-knapp, body.spelar.hubb-hoger #mp-knapp {
  left: auto; right: calc(50px + env(safe-area-inset-right)); top: 36%; }

/* ---------- 🏆 Världsrekord ---------- */
#rekord-lista { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
#rekord-lista .kat { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
#rekord-lista .kat h3 { margin: 0 0 6px; font-size: 14px; }
#rekord-lista .kat ol { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.6; }
#rekord-lista .kat ol b { color: #ffd166; }
#rekord-lista .kat .tom { color: var(--dim); font-size: 13px; }
#rekord .stor { flex: none; }

/* 🚩 Rapportera och rapporterna */
#rapport-knapp[hidden] { display: none; }
#rapport .fraga { display: block; margin: 10px 0 0; font-size: 14px; color: var(--dim); }
#rapport .fraga select, #rapport .fraga textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--text);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; box-sizing: border-box; }
#rapport .citat { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid #ffd166; background: rgba(255, 255, 255, 0.05); font-size: 14px; white-space: pre-wrap; }
#narvaro-lista .post .flagga { flex: none; padding: 2px 6px; font-size: 14px; background: transparent; border: 0; color: var(--dim); cursor: pointer; }
#narvaro-lista .post .flagga:hover { color: #ff6b6b; }
.pill .antal, #admin-panel .antal { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.pill .antal[hidden], #admin-panel .antal[hidden] { display: none; }
#rapporter-lista { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
#rapporter-lista .post { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 14px; }
#rapporter-lista .post.klar { opacity: 0.55; }
#rapporter-lista .post b { color: #ffd166; }
#rapporter-lista .post .tid { color: var(--dim); font-size: 12px; }
#rapporter-lista .post .text { margin: 6px 0; white-space: pre-wrap; }
#rapporter-lista .post .citat { margin: 6px 0; padding: 6px 10px; border-left: 3px solid #ffd166; background: rgba(0, 0, 0, 0.2); white-space: pre-wrap; }
#rapporter-lista .post .rad { display: flex; gap: 8px; margin-top: 6px; }
#rapporter-lista .post .rad button { padding: 6px 10px; font: inherit; font-size: 13px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: var(--text); cursor: pointer; }
#toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 20px); padding: 10px 16px; border-radius: 12px;
  background: rgba(16, 52, 79, 0.95); color: var(--text); font-size: 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
#toast.syns { opacity: 1; transform: translate(-50%, 0); }
#admin-knapp.rapporter { background: rgba(255, 59, 48, 0.35); }

/* 🎚️ Brytare: en rad per funktion, tre lägen, och en checklista när "Vissa" är valt */
#admin-panel .hjalp { margin: 0 0 6px; font-size: 13px; color: var(--dim); }
#admin-meddelande { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: var(--text); resize: vertical; }
/* Varningen och meddelandet ligger ovanpå allt annat, även adminrutan */
#varning, #meddelande { z-index: 45; }
#varning .box, #meddelande .box { width: min(460px, 100%); }
#varning-text, #meddelande-text { white-space: pre-wrap; font-size: 18px; }
#varning .stor, #meddelande .stor { flex: none; }
.brytare { padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.brytare .namn { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.brytare.spel { margin-top: 12px; background: rgba(255, 255, 255, 0.1); }
.brytare.under { margin: 4px 0 0 18px; padding: 8px 10px; background: rgba(255, 255, 255, 0.04); border-left: 2px solid rgba(255, 255, 255, 0.15); border-radius: 0 12px 12px 0; }
.brytare.under .namn { font-weight: 500; font-size: 14px; }
.brytare .lagen { display: flex; gap: 4px; }
.brytare .lage { padding: 5px 9px; font: inherit; font-size: 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: var(--dim); cursor: pointer; }
.brytare .lage.vald { background: rgba(42, 111, 176, 0.6); color: #fff; border-color: transparent; }
.brytare .lage.vald[data-mode="off"] { background: rgba(255, 59, 48, 0.55); }
.brytare .lage.vald[data-mode="on"] { background: rgba(46, 204, 113, 0.5); }
.brytare .lista { max-height: 220px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.brytare .lista label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.brytare .lista label:hover { background: rgba(255, 255, 255, 0.06); }
.brytare .lista input { width: 18px; height: 18px; accent-color: #2a6fb0; }
.brytare .lista .info { color: var(--dim); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.brytare .fot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--dim); }
.brytare .fot button { padding: 6px 12px; font: inherit; font-size: 13px; border-radius: 8px; border: 0; background: #2a6fb0; color: #fff; cursor: pointer; }
.brytare .fot button[disabled] { opacity: 0.5; cursor: default; }