:root{
 --bg:#050617;

/* === Intro-splash när sidan laddas === */
#introSplash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #40c9ff 0%, #070a12 55%, #070a12 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.8s ease;  /* <-- NYTT: gör så att transitionend triggas */
}

/* Glittrig overlay */
#introSplash::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0, transparent 50%),
    radial-gradient(circle, rgba(255,255,255,0.7) 0, transparent 55%),
    radial-gradient(circle, rgba(255,255,255,0.5) 0, transparent 60%);
  background-size: 120px 120px, 160px 160px, 200px 200px;
  background-position: 0 0, 40px 80px, 80px 40px;
  mix-blend-mode: screen;
  opacity: 0.25;
  animation: glitterMove 2.2s linear infinite;
  pointer-events: none;
}

/* Loggan – större + pop-in */
#introSplash img {
  width: min(95vw, 720px);
  height: auto;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.55);
  animation: splashIn 0.6s ease-out forwards;
}

/* Kort runt bilden + textoverlay */
.introCard {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Containern för texten */
.introTagline {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  text-align: center;
}

/* Själva raderna "Make your own" / "game" */
.introTagline .introLine {
  display: block;
  padding: 8px 18px;
  margin: 2px 0;
  border-radius: 999px;

  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 10px 26px rgba(0,0,0,0.8);

  font-size: clamp(1.1rem, 2vw + 0.6rem, 1.6rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);

  /* dimma + animation */
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  animation:
    taglineIn 0.9s ease-out forwards,
    taglineGlow 2.6s ease-in-out infinite 2s;
}

.introTagline .introLine:first-child {
  animation-delay: 0.2s, 1.6s;
}

.introTagline .introLine:last-child {
  animation-delay: 0.4s, 1.8s;
}

/* Dyker upp ur dimma */
@keyframes taglineIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* Mjuk blink/glow-effekt */
@keyframes taglineGlow {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(124, 196, 255, 0.9),
      0 0 20px rgba(124, 196, 255, 0.7);
  }
  50% {
    text-shadow:
      0 0 3px rgba(124, 196, 255, 0.5),
      0 0 14px rgba(255, 255, 255, 1);
  }
}



/* När den ska bort */
#introSplash.hidden {
  opacity: 0;            /* <-- NYTT: tonar bort hela overlayen */
  pointer-events: none;
}

#introSplash.hidden img {
  animation: glitterOut 0.9s ease-in forwards;
}

#introSplash.hidden::before {
  animation: glitterBurst 0.9s ease-out forwards;
}


/* === Animationer === */

@keyframes splashIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Bilden “löses upp” bit för bit in mot mitten */
@keyframes glitterOut {
  0% {
    opacity: 1;
    filter: none;
    clip-path: inset(0 0 0 0);
  }
  40% {
    opacity: 0.9;
    filter: brightness(1.2);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(50% 50% 50% 50%);
  }
}

/* Glittret rör sig */
@keyframes glitterMove {
  0% {
    background-position: 0 0, 40px 80px, 80px 40px;
  }
  100% {
    background-position: 200px 200px, 240px 280px, 280px 240px;
  }
}

/* Extra glitter-burst när den försvinner */
@keyframes glitterBurst {
  0% {
    opacity: 0.25;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}



 /* Galaxy-accents */
 --accent-pink:#ff6ad5;
 --accent-blue:#4ac8ff;
 --accent-purple:#a26dff;
 --accent-gold:#ffc75b;


 --card: rgba(12,10,40,0.96);
 --border: rgba(255,255,255,0.16);
 --text: rgba(255,255,255,0.96);
 --muted: rgba(255,255,255,0.78);
 --shadow: 0 22px 60px rgba(0,0,0,0.75);
}


*{ box-sizing:border-box; }
html,body{ height:100%; }


/* ===== GLOBALT + BAKGRUND ===== */


body{
 margin:0;
 color:var(--text);
 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
 background-color: var(--bg);
}


/* galaxy-background för spel-sidan */
body.space-bg{
 background: url("images/galaxy-bg.webp") center top / cover fixed no-repeat;
 position:relative;
 overflow-x:hidden;
}




/* diskreta stjärnor ovanpå bakgrunden (ingen animation för prestanda) */
body.space-bg::before{
 content:"";
 position:fixed;
 inset:-20%;
 pointer-events:none;
 z-index:-1;
 opacity:0.30;
 background-image:
   radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8), transparent 60%),
   radial-gradient(1px 1px at 30% 80%, rgba(200,230,255,0.7), transparent 60%),
   radial-gradient(1px 1px at 60% 10%, rgba(255,200,255,0.75), transparent 60%),
   radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,0.8), transparent 60%),
   radial-gradient(2px 2px at 20% 50%, rgba(255,255,255,0.9), transparent 60%),
   radial-gradient(2px 2px at 70% 30%, rgba(255,255,255,0.85), transparent 60%);
}


/* wrapper runt hela appen (index) */
.appShell{
 max-width: 1200px;
 margin: 0 auto;
 padding: 18px 18px 32px;
}


/* ===== LAYOUT ===== */
.grid{
 width:100%;
 display:grid;
 grid-template-columns: 1.1fr 0.9fr;
 gap:14px;
}
@media (max-width: 980px){
 .grid{ grid-template-columns: 1fr; }
}


.stack{
 display:flex;
 flex-direction:column;
 gap:14px;
}


/* ===== CARDS ===== */


.card,
.scoreCard{
 border-radius:22px;
 padding:16px;
 background:
   radial-gradient(120% 180% at 0% 0%,
     rgba(255,255,255,0.08),
     transparent 55%),
   radial-gradient(150% 200% at 100% 100%,
     rgba(0,200,255,0.20),
     transparent 60%),
   linear-gradient(150deg, rgba(10,14,30,0.98), rgba(8,8,20,0.96));
 border:1px solid rgba(255,255,255,0.14);
 box-shadow:
   0 0 0 1px rgba(120,60,255,0.28),
   0 18px 50px rgba(0,0,0,0.75);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 position:relative;
 overflow:hidden;
}


/* liten kant-glow */
.card::before,
.scoreCard::before{
 content:"";
 position:absolute;
 inset:-1px;
 border-radius:inherit;
 background:
   linear-gradient(130deg,
     rgba(255,255,255,0.18),
     rgba(120,60,255,0.5),
     rgba(0,200,255,0.55),
     rgba(255,180,80,0.6));
 opacity:0.15;
 mix-blend-mode:screen;
 pointer-events:none;
}


/* svag nebula-dimma i nederkant */
.card::after,
.scoreCard::after{
 content:"";
 position:absolute;
 left:-20%;
 right:-20%;
 bottom:-30%;
 height:60%;
 background:
   radial-gradient(ellipse at 50% 0%,
     rgba(255,255,255,0.18),
     transparent 65%);
 opacity:0.18;
 pointer-events:none;
}


/* ===== HERO-HEADER (toppen) ===== */
.heroHeader{
 max-width: 1200px;
 margin: 0 auto 26px;
 border-radius: 28px;
 padding: 8px 10px;
 background: linear-gradient(135deg, #672273, #006e9f);
 border: 1px solid rgba(255,255,255,0.24);
 box-shadow:
   0 0 0 1px rgba(120,60,255,0.45),
   0 18px 50px rgba(0,0,0,0.9);
 position: relative;
}


.shell{
 padding: 8px 0 28px;
 display:flex;
 justify-content:center;
}


.heroHeader-img{
 display:block;
 width:100%;
 height:auto;
 border-radius:22px;
}


/* ===== HUVUD-NAV ===== */


.mainNav{
display:flex;
gap:0.7rem;
justify-content:flex-end;
padding:0.6rem 1.2rem 0.2rem;
flex-wrap:nowrap;
}




.mainNav a{
 text-decoration: none;
 padding: 0.3rem 0.9rem;   /* mindre höjd + bredd */
 border-radius: 999px;
 font-weight: 800;
 font-size: 0.8rem;        /* aningen mindre text */


 background: #1b2850;
 color: #fdfdff;


 border: 1px solid rgba(255,255,255,0.35);
 box-shadow:
   0 8px 22px rgba(0,0,0,0.75),
   0 0 14px rgba(70,130,255,0.55);


 display:flex;
 align-items:center;
 gap:0.4rem;


 text-shadow: 0 2px 6px rgba(0,0,0,0.7);
 transition:
   transform 120ms ease-out,
   box-shadow 150ms ease-out,
   background 150ms ease-out,
   color 150ms ease-out;
}


.mainNav a:hover{
 transform: translateY(-1px) scale(1.02);
 background: #24346b;
 box-shadow:
   0 12px 28px rgba(0,0,0,0.9),
   0 0 18px rgba(110,180,255,0.9);
}


.mainNav a.active{
 background: #f7c94b;
 color: #14051c;
 box-shadow:
   0 14px 32px rgba(0,0,0,0.95),
   0 0 22px rgba(247,201,75,0.95);
}


.mainNav-over{
 position:absolute;
 right:60px;   /* <-- detta trycker hela menyraden från högerkanten */
 bottom:40px;        /* lyfter upp menyn – justera 14–22px efter smak */
 transform:none;     /* ingen extra nedsänkning */
 padding:0.35rem 0.6rem;
 border-radius:999px;
 background:rgba(3,5,20,0.85);
 box-shadow:0 12px 32px rgba(0,0,0,0.9);
 z-index:5;
}




/* ===== DICE / HERO-KORT ===== */


.hero{ padding:16px; }


.diceBox{
 position: relative;
 width: 100%;
 aspect-ratio: 1 / 1;
 border-radius: 22px;
 overflow: hidden;
 background:
   radial-gradient(140% 160% at 50% 10%, rgba(40,60,120,0.9), transparent 70%),
   radial-gradient(140% 140% at 10% 90%, rgba(120,60,255,0.7), transparent 70%),
   radial-gradient(160% 160% at 90% 100%, rgba(0,200,255,0.6), transparent 70%),
   rgba(0,0,0,0.55);
 border:1px solid rgba(255,255,255,0.18);
 box-shadow:
   0 26px 60px rgba(0,0,0,0.85),
   0 0 40px rgba(40,120,255,0.35);
}




/* Lättare glow/stjärnor istället för tunga bilder */
.diceBox::before{
 content:"";
 position:absolute;
 inset:-10%;
 pointer-events:none;
 opacity:0;
 z-index: 40;
 background:
   radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6) 0 2px, transparent 60%),
   radial-gradient(circle at 70% 25%, rgba(160,210,255,0.7) 0 2px, transparent 60%),
   radial-gradient(circle at 40% 70%, rgba(255,180,255,0.7) 0 2px, transparent 60%);
 transition: opacity 0.25s ease-out;
}


.diceBox.spinning::before{
 opacity:1;
}


/* Ingen explosion-bild – bara en mjuk ljusflash */
.diceBox::after{
 content:"";
 position:absolute;
 inset:-15%;
 pointer-events:none;
 opacity:0;
 transform: scale(0.9);
 background:
   radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5), transparent 65%);
 mix-blend-mode:screen;
 z-index:2;
 transition:
   opacity 0.3s ease-out,
   transform 0.3s ease-out;
}


.diceBox.spinning::after{
 opacity:1;
 transform: scale(1.05);
}


/* Engångs-snurr när man klickar – lite längre, mjuk */
.dice3d.spinOnce{
 animation: diceSpin 0.9s cubic-bezier(.22,.9,.25,1.05);
}


@keyframes diceSpin{
 0%   { transform: rotateX(-18deg) rotateY(22deg) rotateZ(0deg); }
 40%  { transform: rotateX(-24deg) rotateY(382deg) rotateZ(4deg); }
 75%  { transform: rotateX(-16deg) rotateY(742deg) rotateZ(-3deg); }
 100% { transform: rotateX(-18deg) rotateY(742deg) rotateZ(0deg); }
}




/* CANVAS */
#fx{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 z-index:60;
 pointer-events:none;
}


/* fallback-element (syns ej normalt) */
#diceImage{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit: cover;
 display:none;
 z-index:6;
}
#placeholder{
 position:absolute;
 inset:0;
 display:none;
 place-items:center;
 font-size:72px;
 font-weight:1000;
 letter-spacing:0.5px;
 color:rgba(255,255,255,0.90);
 text-shadow: 0 2px 12px rgba(0,0,0,0.65);
 z-index:6;
}


/* COUNTDOWN */
#countdown{
 position:absolute;
 top:16px; right:16px;
 width:56px; height:56px;
 border-radius:16px;
 background: rgba(0,0,0,0.35);
 border:1px solid rgba(255,255,255,0.14);
 display:none;
 place-items:center;
 font-weight:1000;
 font-size:22px;
 text-shadow: 0 2px 12px rgba(0,0,0,0.65);
 z-index:70;
}
#countdown.show{ display:grid; }


/* ===== 3D DICE ===== */


.diceStage{
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 z-index:50;
 perspective: 1200px;
 perspective-origin: 50% 50%;
 transform-style: preserve-3d;


 transform: translateY(9%);   /* 🔻 flytta kuben lite nedåt */
}






/* NÄR det finns spelare/bilder: gör kuben lite mindre */
.diceBox.hasPlayers .dice3d{
 --size: clamp(260px, 46vw, 430px);
}


/* NÄR det inte finns spelare: större centerpiece */
.diceBox.noPlayers .dice3d{
 --size: clamp(220px, 46vw, 360px);
}


.dice3d{
 --size: clamp(340px, 62vw, 560px);
 --half: calc(var(--size) / 2);
 --rx: -18deg;
 --ry: 22deg;
 --rz: 0deg;


 width: var(--size);
 height: var(--size);
 position:relative;
 z-index: 2;
 transform-style: preserve-3d;


 transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
 transition: transform 520ms cubic-bezier(.2,.9,.2,1);
 filter: none !important;
}


/* Idle-rotation */
.dice3d.idle{
 animation: cubeIdle 10s linear infinite;
}
@keyframes cubeIdle{
 0%   { --ry: 22deg;  --rz: 6deg; --rx: -18deg; }
 100% { --ry: 382deg; --rz: 6deg; --rx: -18deg; }
}


/* spinning */
.dice3d.isSpinning{
 transition: transform 120ms linear;
 animation: none !important;
}


/* faces */
.face{
 position:absolute;
 inset:0;
 border-radius: 20px;
 overflow:hidden;
 transform-style: preserve-3d;
 font-size: clamp(90px, 14vw, 150px);
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;


 border: 1px solid rgba(255,255,255,0.18);
 background:
   radial-gradient(120px 120px at 30% 25%, rgba(255,255,255,0.20), transparent 55%),
   linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.20));
 box-shadow:
   inset 0 1px 0 rgba(255,255,255,0.22),
   inset 0 -18px 30px rgba(0,0,0,0.25);


 display:grid;
 place-items:center;
 font-weight:1100;
 letter-spacing:0.4px;
 color: rgba(255,255,255,0.95);
 text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}


/* större symbol när inga spelare */
.diceBox.noPlayers .face{
 font-size: clamp(110px, 18vw, 180px);
 border: 1px solid rgba(255,255,255,0.08);
 background:
   radial-gradient(140px 140px at 30% 25%, rgba(255,255,255,0.18), transparent 55%),
   linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.26));
}
.diceBox.noPlayers .dice3d{
 animation: idleSpin 4.5s linear infinite;
}
@keyframes idleSpin{
 0%   { transform: rotateX(var(--rx)) rotateY(0deg) rotateZ(var(--rz)); }
 100% { transform: rotateX(var(--rx)) rotateY(360deg) rotateZ(var(--rz)); }
}


.face.hasImg{
 background-size: cover;
 background-position: center center; /* centrerad bild i ramen */
 background-repeat: no-repeat;
 filter: brightness(1.08) contrast(1.06) saturate(1.05);
}


/* glossy highlight */
.face::after{
 content:"";
 position:absolute;
 inset:-20%;
 background: radial-gradient(closest-side, rgba(255,255,255,0.22), transparent 60%);
 transform: translateY(-10%) rotate(-12deg);
 mix-blend-mode: screen;
 opacity: 0.75;
 pointer-events:none;
}


/* subtle edge shine */
.face::before{
 content:"";
 position:absolute;
 inset:0;
 border-radius: 20px;
 box-shadow:
   inset 0 0 0 1px rgba(255,255,255,0.10),
   inset 0 0 28px rgba(0,200,255,0.10);
 pointer-events:none;
}


/* cube positioning */
.face--1{ transform: translateZ(var(--half)); }
.face--2{ transform: rotateY(180deg) translateZ(var(--half)); }
.face--3{ transform: rotateY(90deg)  translateZ(var(--half)); }
.face--4{ transform: rotateY(-90deg) translateZ(var(--half)); }
.face--5{ transform: rotateX(90deg)  translateZ(var(--half)); }
.face--6{ transform: rotateX(-90deg) translateZ(var(--half)); }


/* little "pop" när tärningen landar */
.dice3d.land{
 transition: transform 520ms cubic-bezier(.2,.9,.2,1);
 animation: landPop 420ms ease-out 1;
}
@keyframes landPop{
 0%{ filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35)); transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(0.98); }
 60%{ filter: drop-shadow(0 26px 44px rgba(0,0,0,0.50)); transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(1.03); }
 100%{ filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45)); transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(1.0); }
}


/* ===== HERO-KONTROLLER ===== */


.heroControls{ margin-top:14px; }
.btnRow{ display:flex; flex-wrap:wrap; gap:10px; }


/* ===== TEXTER / HINTS ===== */


.hint{
 margin-top:10px;
 color:var(--muted);
 font-size:13.5px;
 line-height:1.35;
 text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}


/* Senaste uppdrag */
.assignmentCard{
 margin-top:12px;
 padding:12px 14px;
 border-radius:18px;
 background: rgba(0,0,0,0.25);
 border:1px solid rgba(255,255,255,0.12);
}
.assignmentTitle{
 font-size:12px;
 color:var(--muted);
 margin-bottom:6px;
}
.assignment{
 font-size:16px;
 font-weight:1000;
 line-height:1.35;
 text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.assignment.isEmpty{
 background: rgba(255,255,255,0.06);
 border: 1px dashed rgba(255,255,255,0.28);
 padding: 14px;
 border-radius: 16px;
 font-size: 15px;
 line-height: 1.35;
}


/* ===== KNAPPAR ===== */


button{
 border:none;
 cursor:pointer;
 border-radius:999px;
 padding:10px 14px;
 font-weight:1000;
 color:var(--text);
 text-shadow: 0 2px 10px rgba(0,0,0,0.45);
 transition:
   transform 140ms ease-out,
   box-shadow 140ms ease-out,
   background 160ms ease-out,
   opacity 120ms ease-out;
}
button:disabled{
 opacity:0.45;
 cursor:not-allowed;
 box-shadow:none;
}


/* huvudknapp */
.primary{
 background:
   radial-gradient(circle at 0 0, rgba(255,255,255,0.40) 0 20%, transparent 56%),
   linear-gradient(135deg, #ffcf6d, #ff6ad5, #6fd6ff);
 border:1px solid rgba(255,255,255,0.7);
 box-shadow:
   0 12px 30px rgba(0,0,0,0.85),
   0 0 22px rgba(255,200,140,0.95);
}
.primary:hover:not(:disabled){
 transform: translateY(-1px) scale(1.02);
 box-shadow:
   0 16px 40px rgba(0,0,0,0.9),
   0 0 30px rgba(255,220,170,1);
}
.primary:active:not(:disabled){
 transform: translateY(0) scale(0.97);
 box-shadow:
   0 10px 24px rgba(0,0,0,0.8),
   0 0 18px rgba(255,190,130,0.9);
}


/* genomskinlig/glass */
.ghost{
 background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
 border:1px solid rgba(255,255,255,0.25);
 box-shadow: 0 10px 26px rgba(0,0,0,0.55);
}
.ghost:hover:not(:disabled){
 transform: translateY(-1px);
 background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
}


/* statusknappar */
.danger{
 background: linear-gradient(135deg, rgba(255,80,120,0.85), rgba(180,0,40,0.9));
 border:1px solid rgba(255,190,210,0.6);
 box-shadow: 0 10px 26px rgba(0,0,0,0.75);
}
.success{
 background: linear-gradient(135deg, rgba(60,255,170,0.9), rgba(0,180,90,0.9));
 border:1px solid rgba(190,255,215,0.7);
 box-shadow: 0 10px 26px rgba(0,0,0,0.75);
}
.big{
 padding:12px 18px;
}


/* ===== INPUTS ===== */


.row{ display:flex; align-items:flex-end; gap:10px; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; }


.label{
 display:flex;
 flex-direction:column;
 gap:6px;
 font-size:12px;
 color:var(--muted);
}


input, select, textarea{
 border-radius:14px;
 border:1px solid rgba(255,255,255,0.16);
 background: rgba(0,0,0,0.32);
 color: var(--text);
 padding:10px 12px;
 outline:none;
}
textarea{ resize:vertical; width:100%; }
textarea::placeholder{ color: rgba(255,255,255,0.45); }


.checkRow{
 display:flex;
 align-items:center;
 gap:10px;
 padding:8px 10px;
 border-radius:14px;
 border:1px solid rgba(255,255,255,0.12);
 background: rgba(255,255,255,0.04);
 color: rgba(255,255,255,0.82);
 font-weight: 900;
}
.checkRow input{ transform: scale(1.05); }


.nameEdit{
 width: 100%;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,0.16);
 background: rgba(0,0,0,0.28);
 color: rgba(255,255,255,0.95);
 padding: 8px 10px;
 font-weight: 1000;
 outline: none;
}
.nameEdit:focus{
 border-color: rgba(120,60,255,0.55);
}


/* ===== SCOREBOARD ===== */


.scoreHeader{
 display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
 align-items:flex-end;
 gap:10px;
}
.scoreHeader h2{
 margin:0;
 font-size:20px;
 text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.scoreActions{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 align-items:flex-end;
}
.miniField{
 display:flex;
 align-items:center;
 gap:8px;
 padding:6px 10px;
 border:1px solid rgba(255,255,255,0.12);
 border-radius:12px;
 background:rgba(255,255,255,0.04);
}
.miniField > span{
 font-size:12px;
 color: var(--muted);
 white-space:nowrap;
}
.miniField > input{
 width:72px;
 padding:6px 8px;
 border-radius:10px;
 border:1px solid rgba(255,255,255,0.14);
 background:rgba(0,0,0,0.25);
 color:var(--text);
}


.scoreboard{
 margin-top:12px;
 display:flex;
 flex-direction:column;
 gap:8px;
}
.scoreRow{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:10px 12px;
 border-radius:16px;
 background: rgba(0,0,0,0.28);
 border: 1px solid rgba(255,255,255,0.14);
}
.scoreName{
 font-weight:1100;
 letter-spacing:0.2px;
 text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.badge{
 display:inline-block;
 padding:6px 10px;
 border-radius:14px;
 background: rgba(0,0,0,0.35);
 border:1px solid rgba(255,255,255,0.16);
 font-weight:1000;
 text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}


/* ===== DELTAGAR-BILDER ===== */


.thumbs{
 margin-top:12px;
 display:grid;
 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 gap:10px;
}
.thumb{
 border-radius:18px;
 overflow:hidden;
 border:1px solid rgba(255,255,255,0.12);
 background: rgba(255,255,255,0.04);
 min-height:110px;
}
.thumb img{
 width:100%;
 height:86px;
 object-fit:cover;
 display:block;
}
.thumbName{
 padding:8px 10px;
 font-size:13px;
 font-weight:1000;
}


/* ===== OVERLAY (vinnare, quiz mm) ===== */


.overlay{
 position:fixed;
 inset:0;
 display:none;
 background: rgba(0,0,0,0.62);
 padding:16px;
 z-index:999;
 overflow:auto;
}
.overlay.show{ display:grid; place-items:start center; }


@keyframes confettiDrop{
 0%   { opacity:0; transform: translateY(-25%) scale(1.08); }
 15%  { opacity:0.95; }
 70%  { opacity:0.55; transform: translateY(6%) scale(1.02); }
 100% { opacity:0; transform: translateY(14%) scale(1.00); }
}


.winnerName{
 font-size:28px;
 font-weight:1100;
 margin-top:8px;
 letter-spacing:0.6px;
 color: rgba(255,255,255,0.96);
}
.winnerComment{
 margin-top:6px;
 color:rgba(255,255,255,0.75);
 font-weight:900;
}


/* Winner overlay card */


.winnerPrompt{
 padding: 14px 16px;
 border-radius: 18px;
 background: rgba(0,0,0,0.28);
 border: 1px solid rgba(255,255,255,0.12);
 font-size: 18px;
 line-height: 1.4;
}


.overlayTimerBox{
 display: flex;
 gap: 14px;
 align-items: center;
 flex-wrap: wrap;
}


.winnerActions{
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
}
.winnerActions button{
 flex: 1 1 calc(50% - 10px);
}


/* Quiz-delar */
.quizControls{
 margin-top:12px;
 padding-top:12px;
 border-top:1px solid rgba(255,255,255,0.10);
}
.quizFacit{
 margin-top:8px;
 padding:10px 12px;
 border-radius:14px;
 background:rgba(255,255,255,0.08);
 border:1px solid rgba(255,255,255,0.14);
 font-weight:1000;
 color: rgba(255,255,255,0.95);
}


/* Timer UI */
.overlayTimer{
 margin-top: 14px;
 padding: 12px 14px;
 border-radius: 18px;
 background: rgba(255,255,255,0.06);
 border: 1px solid rgba(255,255,255,0.12);
}


.overlayRing{
 width: 140px;
 height: 140px;
 position: relative;
 flex: 0 0 auto;
}
.ringSvg{
 width: 140px;
 height: 140px;
 transform: rotate(-90deg);
}
.ringBg, .ringFg{
 fill: none;
 stroke-width: 10;
}
.ringBg{ stroke: rgba(255,255,255,0.16); }
.ringFg{
 stroke: rgba(255,255,255,0.85);
 stroke-linecap: round;
 stroke-dasharray: 314;
 stroke-dashoffset: 314;
 transition: stroke-dashoffset 0.12s linear;
}
.ringText{
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 text-align:center;
}
.ringTime{
 font-size: 34px;
 font-weight: 1100;
 color: rgba(255,255,255,0.95);
 line-height: 1;
}
.ringHint{
 margin-top: 2px;
 font-size: 12px;
 color: rgba(255,255,255,0.60);
}
.timerControls{
 display:flex;
 flex-direction:column;
 gap:10px;
 min-width: 220px;
}


/* Endgame-podium */
.podiumCard{
 width:min(720px, calc(100vw - 32px));
 border-radius:22px;
 padding:18px 18px 20px;
 background: rgba(10,14,25,0.96);
 border:1px solid rgba(255,255,255,0.14);
 box-shadow: 0 20px 60px rgba(0,0,0,0.55);
 overflow:hidden;
 position:relative;
 z-index:6;
}
.podiumHeader{
 font-weight:1100;
 font-size:22px;
 margin-bottom:10px;
}
.podiumWrap{
 position:relative;
 border-radius:18px;
 overflow:hidden;
 border:1px solid rgba(255,255,255,0.12);
 background: rgba(255,255,255,0.04);
 min-height: 280px;
}
.podiumBg{
 position:absolute;
 inset:0;
 background:
   radial-gradient(600px 260px at 50% 10%, rgba(255,255,255,0.10), transparent 60%),
   url("images/bg_podium.webp");
 background-size: cover;
 background-position: center;
 opacity: 0.95;
}
.podiumSlots{
 position:relative;
 display:flex;
 justify-content:center;
 align-items:flex-end;
 gap:18px;
 padding:22px 16px 18px;
 min-height:280px;
}
.podiumSlot{
 width: 180px;
 max-width: 30vw;
 text-align:center;
 padding:10px 10px 12px;
 border-radius:18px;
 background: rgba(0,0,0,0.35);
 border:1px solid rgba(255,255,255,0.14);
 backdrop-filter: blur(6px);
}
.podiumRank{ font-size:18px; font-weight:1100; margin-bottom:6px; }
.podiumName{ font-size:16px; font-weight:1100; margin-bottom:4px; }
.podiumPts{ font-size:13px; color: var(--muted); }
.podiumSlot.rank1{ transform: translateY(-10px); }
.podiumSlot.rank2{ transform: translateY(10px); opacity:0.95; }
.podiumSlot.rank3{ transform: translateY(20px); opacity:0.90; }


.podiumAvatar{
 width: 72px;
 height: 72px;
 margin: 8px auto 6px;
 border-radius: 16px;
 overflow: hidden;
 border: 1px solid rgba(255,255,255,0.16);
 background: rgba(255,255,255,0.06);
 display: grid;
 place-items: center;
}
.podiumAvatar img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.podiumInitials{
 font-weight: 1000;
 font-size: 22px;
 letter-spacing: 0.5px;
}


/* ===== RESPONSIVE ===== */


@media (max-width: 980px){
 .btnRow button{ flex: 1 1 calc(50% - 10px); }
 .diceBox{ aspect-ratio: 16 / 14; }
}
@media (max-width: 520px){
 .shell{ padding: 12px 0 18px; }
 .diceBox{ aspect-ratio: 1 / 1; }
 .btnRow button{ flex: 1 1 100%; }
}


/* Reduce motion */
@media (prefers-reduced-motion: reduce){
 .dice3d, .dice3d.isSpinning, .dice3d.land{
   transition: none !important;
   animation: none !important;
 }
}


/* ===== TV-MODE ===== */


body.tv-mode{
 font-size: 18px;
}
body.tv-mode .card,
body.tv-mode .scoreCard{
 padding: 22px;
}
body.tv-mode .logoMain{
 height: 130px;
}
body.tv-mode .winnerCard{
 width: min(1100px, calc(100vw - 60px));
 max-height: calc(100vh - 60px);
 padding: 26px;
}
body.tv-mode .winnerName{
 font-size: 44px;
 letter-spacing: 0.8px;
}
body.tv-mode .winnerComment{
 font-size: 22px;
}
body.tv-mode .winnerPrompt{
 font-size: 30px;
 line-height: 1.25;
 padding: 22px 24px;
 border-radius: 22px;
 max-height: none;
}


/* ingen scroll på sidan när overlay är öppen */
body.noScroll{
 overflow: hidden !important;
 height: 100% !important;
}


/* ===== SIDORNA Feedback / Sponsring / Info / Kontakt ===== */


.page {
 max-width: 800px;
 margin: 1.5rem auto 4rem;
 padding: 0 1rem;
}


/* cards bara inuti .page */
.page .card {
 background: rgba(0, 0, 0, 0.4);
 padding: 1rem 1.25rem;
 border-radius: 1rem;
 margin-bottom: 1rem;
 border: 1px solid rgba(255,255,255,0.18);
}


.primaryBtn {
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;

  /* 👇 Lägg till detta */
  background: linear-gradient(135deg, #ffcf6d, #ff6ad5, #6fd6ff);
  color: #14051c; /* mörk text på ljus knapp */
}
.primaryBtn:hover {
  transform: translateY(-1px);
}
.primaryBtn.small {
 padding: 0.4rem 0.9rem;
 font-size: 0.9rem;
}


/* profilruta (info/kontakt) */
.profile {
 display: flex;
 gap: 1rem;
 align-items: flex-start;
}
.profile-img {
 width: 250px;
 height: 250px;
 object-fit: cover;
 border-radius: 5px;
}


/* Cookie-banner */


.cookie-banner {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0.8rem 1rem;
 background: rgba(0, 0, 0, 0.9);
 color: #fff;
 display: flex;
 gap: 0.8rem;
 justify-content: space-between;
 align-items: center;
 font-size: 0.9rem;
 z-index: 999;
}
.cookie-banner p {
 margin: 0;
 max-width: 600px;
}
.cookie-banner a {
 color: #fff;
 text-decoration: underline;
}


@media (max-width: 600px) {
 .profile {
   flex-direction: column;
 }
 .cookie-banner {
   flex-direction: column;
   align-items: flex-start;
 }
}


/* Begränsa storleken på stora loggan i hero-intro på andra sidor */
.hero > img {
 max-width: 420px;
 width: 60vw;
 height: auto;
 display: block;
 margin: 0 auto;
}


@media (max-width: 840px){
 .heroHeader{
   padding: 10px 10px 6px;
   margin-bottom: 18px;
 }


 .mainNav-over{
   position: static;
   transform: none;
   margin-top: 8px;
   background: transparent;
   box-shadow: none;
 }


 .mainNav{
   justify-content: center;
   flex-wrap: wrap;
 }
}


/* === TEMA-KOLUMN-LAYOUT (NYTT) === */


.themePanel{
 margin-top:14px;
}
.themeColumns{
 display:flex;
 flex-wrap:wrap;
 gap:14px;
}
.themeColumn{
 flex:1 1 220px;
}
.themeColumn h3{
 margin:0 0 4px;
 font-size:15px;
}
.themeHint{
 margin:0 0 8px;
 font-size:13px;
 color:var(--muted);
}
.themeItem{
 margin-bottom:6px;
}


/* ===== KNAPP-ANIMATIONER ===== */


@keyframes buttonBump {
 0%   { transform: translateY(0) scale(1); }
 30%  { transform: translateY(-2px) scale(1.04); }
 100% { transform: translateY(0) scale(1); }
}
button.bump {
 animation: buttonBump 200ms ease-out;
}


@keyframes pulseGlow {
 0% {
   box-shadow:
     0 12px 30px rgba(0,0,0,0.85),
     0 0 18px rgba(255,200,140,0.5);
 }
 50% {
   box-shadow:
     0 18px 40px rgba(0,0,0,0.95),
     0 0 30px rgba(255,230,190,0.95);
   transform: translateY(-1px) scale(1.02);
 }
 100% {
   box-shadow:
     0 12px 30px rgba(0,0,0,0.85),
     0 0 18px rgba(255,200,140,0.5);
   transform: translateY(0) scale(1);
 }
}
.primary.pulse {
 animation: pulseGlow 1.1s ease-in-out infinite;
}


.winnerMusicRow {
 margin-top: 0.75rem;
 font-size: 0.9rem;
 opacity: 0.95;
}


.overlayMusicControls{
 display:flex;
 flex-wrap:wrap;
 gap:0.5rem;
 align-items:center;
}


.overlayMusicLabel{
 margin-bottom:0.25rem;
 display:block;
}


.winnerMusicRow select{
 min-width:180px;
}


/* Färgad bakgrund för själva overlay-rutan */
#winnerOverlay {
 background:
   radial-gradient(140% 140% at 0% 0%, rgba(255, 120, 200, 0.20), transparent),
   radial-gradient(140% 140% at 100% 100%, rgba(80, 180, 255, 0.25), transparent),
   rgba(7, 10, 18, 0.96);
}


.winnerCard {
 width: min(980px, calc(100vw - 40px));   /* lite mer liggande */
 max-height: calc(100vh - 80px);
 padding: 20px 24px;


 background:
   radial-gradient(circle at top left, rgba(255, 120, 200, 0.18), transparent 55%),
   radial-gradient(circle at bottom right, rgba(120, 180, 255, 0.22), transparent 55%),
   linear-gradient(135deg, #0b0d18, #05060b);
 border-radius: 24px;
 border: 1px solid rgba(255,255,255,0.12);
 box-shadow:
   0 32px 70px rgba(0,0,0,0.85),
   0 0 30px rgba(255,180,220,0.35);


 overflow: auto;
 -webkit-overflow-scrolling: touch;


 display: flex;
 flex-direction: column;
 gap: 14px;
}


.winnerTop      { order: 1; }
.winnerName     { order: 2; }
.winnerComment  { order: 3; }
.winnerPrompt   { order: 4; }   /* frågetext/uppdraget */
.overlayTimer   { order: 5; }   /* ringen + fältet */
.quizControls   { order: 6; }   /* Visa facit / Rätt / Fel – bara synligt vid quiz */
.winnerMusicRow,
.overlayMusic   { order: 7; }   /* Välj musik */
.winnerActions  { order: 8; }   /* alla knapprader hamnar längst ned */




.winnerTop {
 background: linear-gradient(90deg, #ff8ad4, #ffd288);
 background-clip: text;           /* lägg till denna */
 -webkit-background-clip: text;
 color: transparent;
 letter-spacing: 0.12em;
 text-transform: uppercase;
}


/* ===== GLITTER-KONFETTI – HELA SKÄRMEN ===== */
.confettiFx{
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 1200;
 opacity: 1; /* vi ritar allt med JS */
}
/* ingen .show-klass längre, ingen bakgrundsbild, ingen keyframes */

.adBanner{
  max-width: 1200px;
  margin: 10px auto 22px;
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 14px 36px rgba(0,0,0,0.75);
  text-align: center;
}

/* ===== Mobil: byt ordning på score och players ===== */
@media (max-width: 768px) {
  /* Behåll grid men gör den säkert enkolumnig här också */
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Låt korten inuti .stack bli egna grid-items */
  .stack {
    display: contents;
  }

  /* Ordning i mobil-vy:
     1) Dice/hero
     2) Scoreboard
     3) Players
     4) Tasks / Questions
  */
  .hero {
    order: 1;
  }

  .scoreCard {
    order: 2;
  }

  .playersCard {
    order: 3;
  }

  .themeCard {
    order: 4;
  }
}

.makeGameBanner {
  display: block;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(135deg, #ffd54a, #ffb300);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);

  color: #1a1028;
  text-align: center;
  cursor: pointer;

  transition: transform 0.15s ease, box-shadow 0.15s ease,
    filter 0.15s ease;
}

.makeGameBanner-main {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.makeGameBanner-sub {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 2px;
}

.makeGameBanner:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
  filter: brightness(1.05);
}

.makeGameBanner:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.adBanner {
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
}