/* ================= CX LIVE ================= */
:root{
  /* Guld & svart – standardtemat */
  --bg:#08090B; --card:#121317; --line:#2A2822;
  --txt:#F5F2EA; --dim:#8E8A82;
  --gold:#D9B45B; --gold-hi:#F0D689; --gold-lo:#8E6E28;
  --silver:#C9CED6; --bronze:#B87333;
  --a1:#B4453C; --a2:#D9B45B; --a3:#B87333; --a4:#C9CED6;
  --glow1:rgba(217,180,91,.16); --glow2:rgba(184,115,51,.12);
  --r:16px;
}
body[data-theme="teal"]{
  --bg:#06070B; --card:#141824; --line:#232838;
  --txt:#F2F4F8; --dim:#8B93A7;
  --a1:#FF2E63; --a2:#00E5A0; --a3:#FFB020; --a4:#5B7CFA;
  --gold:#00E5A0; --gold-hi:#7CF0CB; --gold-lo:#00A377;
  --glow1:rgba(91,124,250,.16); --glow2:rgba(255,46,99,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(1200px 720px at 12% -12%, var(--glow1), transparent 62%),
    radial-gradient(1000px 700px at 96% 112%, var(--glow2), transparent 62%),
    var(--bg);
  color:var(--txt);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.center{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:18px}
.muted{color:var(--dim)}
.small{font-size:14px}
.tiny{font-size:12px}
h1,h2,h3{margin:0;letter-spacing:-.015em}

/* ---- avsändare ---- */
.logo{font-weight:800;letter-spacing:-.03em;font-size:clamp(26px,4.4vw,40px);line-height:1}
.logo span{color:var(--gold)}
.brand{display:flex;align-items:center;gap:clamp(10px,1.3vw,18px)}
.brand img{height:clamp(34px,4vw,66px);width:auto;display:block;object-fit:contain}
.pbrand{display:flex;justify-content:center;padding:16px 16px 14px;padding-top:calc(max(16px, env(safe-area-inset-top)) + 28px)}
.pbrand .brand.ensam img{height:clamp(170px,54vw,240px)}
.brand.ensam{justify-content:center}
.brand.ensam img{height:clamp(58px,7.5vw,116px);filter:drop-shadow(0 3px 10px rgba(0,0,0,.55))}
.stage .brand.ensam img{height:clamp(74px,8.5vw,140px)}
.brand .bn{
  font-weight:800;letter-spacing:.055em;text-transform:uppercase;line-height:1.1;
  font-size:clamp(13px,1.45vw,21px);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .bs{
  font-size:clamp(10px,1.05vw,14px);letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);margin-top:3px;
}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.45}

.card{background:linear-gradient(180deg,#15161B,#101116);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
input,select,textarea{
  width:100%;background:#0C0D11;border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:14px 16px;font-size:16px;font-family:inherit;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,180,91,.14)}
label{font-size:12px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
button{font-family:inherit;font-size:16px;font-weight:700;border:0;border-radius:12px;padding:14px 20px;cursor:pointer;transition:.15s transform,.15s filter}
button:active{transform:scale(.975)}
button:disabled{opacity:.45;cursor:not-allowed}
.btn{background:linear-gradient(180deg,var(--gold-hi),#C39A38);color:#1A1608}
.btn-2{background:#212228;color:var(--txt);border:1px solid var(--line)}
.btn-ghost{background:transparent;color:var(--dim);border:1px solid var(--line)}
.btn-red{background:var(--a1);color:#fff}
.btn-lg{padding:18px 26px;font-size:18px;width:100%}
.err{background:rgba(180,69,60,.14);border:1px solid rgba(180,69,60,.45);color:#EBA69F;padding:12px 14px;border-radius:12px;font-size:14px}
.ok{background:rgba(217,180,91,.1);border:1px solid rgba(217,180,91,.4);color:var(--gold-hi);padding:12px 14px;border-radius:12px;font-size:14px}
.hidden{display:none !important}
.pill{display:inline-flex;align-items:center;gap:6px;background:#1A1B21;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600}
.pill.gold{background:linear-gradient(180deg,var(--gold-hi),#C39A38);color:#1A1608;border-color:transparent}

/* ---- kod ---- */
.codebox{font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:.12em}
.codeinput{text-align:center;font-size:34px;font-weight:800;letter-spacing:.35em;padding:18px}

/* ---- svarsknappar ---- */
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answers.one,.answers.three{grid-template-columns:1fr}
.ans{
  display:flex;align-items:center;gap:14px;text-align:left;
  min-height:78px;padding:16px 18px;border-radius:14px;font-size:17px;font-weight:700;
  border:1px solid rgba(255,255,255,.10);position:relative;overflow:hidden;
}
.ans .shape{width:24px;height:24px;flex:0 0 24px;background:currentColor;opacity:.9}
.ans .lbl{flex:0 0 auto;min-width:30px;height:30px;padding:0 9px;border-radius:8px;
  display:grid;place-items:center;font-weight:900;font-size:.92em;
  background:rgba(0,0,0,.22);color:inherit;font-variant-numeric:tabular-nums}
.stage .ans .lbl{min-width:clamp(34px,2.6vw,48px);height:clamp(34px,2.6vw,48px);border-radius:10px}
.varning{background:rgba(180,69,60,.14);border:1px solid rgba(180,69,60,.5);color:#EBA69F;
  border-radius:12px;padding:10px 16px;font-weight:700;font-size:clamp(13px,1.3vw,18px);display:inline-block}
.sh0{clip-path:polygon(50% 0,100% 100%,0 100%)}
.sh1{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.sh2{border-radius:50%}
.sh3{border-radius:3px}
.c0{background:linear-gradient(158deg,#EBCE79,#B08D2C);color:#1A1608}
.c1{background:linear-gradient(158deg,#E4E8EE,#98A0AA);color:#141619}
.c2{background:linear-gradient(158deg,#D08B45,#8A5220);color:#1B0F05}
.c3{background:linear-gradient(158deg,#33353D,#191A1F);color:#F0EDE5;border-color:rgba(217,180,91,.45)}

/* ============ TEMA: TRÄ & GULD ============
   Svarsplattorna blir träskivor, guldet blir beslagen. Ådringen på plattorna är
   ritad i CSS; bara bakgrunden och logotypen är bilder (två små filer). */
/* Fotograferad mörk träpanel bakom hela appen. Bilden är smal och kaklas i sidled,
   ett mörkt lager ovanpå håller texten läsbar oavsett var sömmen hamnar. */
body[data-theme="tra"]{
  background:
    linear-gradient(180deg, rgba(8,7,6,.34), rgba(8,7,6,.12) 40%, rgba(8,7,6,.58)),
    url(tra-bakgrund.jpg?v=8) center top / auto 100% repeat-x,
    #0C0A09;
  background-attachment:fixed, fixed, scroll;
}
@media (max-width:820px){
  body[data-theme="tra"]{
    background:
      linear-gradient(180deg, rgba(8,7,6,.34), rgba(8,7,6,.12) 40%, rgba(8,7,6,.58)),
      url(tra-bakgrund.jpg?v=8) center top / 200% auto repeat,
      #0C0A09;
    background-attachment:scroll, scroll, scroll;
  }
}

body[data-theme="tra"] .ans{
  border:1px solid rgba(217,180,91,.5);
  box-shadow:inset 0 1px 0 rgba(255,244,214,.30), inset 0 -16px 26px -16px rgba(40,22,6,.34);
}
body[data-theme="tra"] .ans .lbl{
  background:linear-gradient(180deg,#F2D98E,#B78F2F);color:#1E1608;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(40,22,6,.35);
}
body[data-theme="tra"] .ans .shape{background:rgba(30,18,6,.72)}

/* 1 · Björkplywood – ljus, med synliga skikt i nederkanten */
body[data-theme="tra"] .c0{
  color:#2A1D0B;
  background-color:#DCC396;
  background-image:
    radial-gradient(ellipse 62px 13px at 24% 64%, rgba(112,76,34,.20), transparent 68%),
    radial-gradient(ellipse 90px 18px at 71% 30%, rgba(112,76,34,.13), transparent 70%),
    repeating-linear-gradient(90.5deg,
      transparent 0 9px, rgba(118,84,42,.10) 9px 11px,
      transparent 11px 17px, rgba(118,84,42,.05) 17px 20px,
      transparent 20px 31px, rgba(96,66,30,.09) 31px 32px,
      transparent 32px 47px),
    repeating-linear-gradient(88.7deg,
      transparent 0 23px, rgba(96,66,30,.07) 23px 27px,
      transparent 27px 58px, rgba(96,66,30,.04) 58px 65px,
      transparent 65px 97px),
    linear-gradient(168deg,#EEDBB6,#C8AA7C);
}
body[data-theme="tra"] .c0::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:repeating-linear-gradient(90deg,
    #E7D4B2 0 11px, #C4A472 11px 13px, #DDC69B 13px 23px, #CBAE80 23px 25px);
  opacity:.9;box-shadow:inset 0 1px 0 rgba(40,22,6,.22);
}

/* X · Ek – mellanton, tydlig kärnådring */
body[data-theme="tra"] .c1{
  color:#241705;
  background-color:#BE9054;
  background-image:
    radial-gradient(ellipse 74px 15px at 77% 36%, rgba(70,42,15,.24), transparent 66%),
    radial-gradient(ellipse 110px 22px at 26% 72%, rgba(70,42,15,.16), transparent 70%),
    repeating-linear-gradient(90.6deg,
      transparent 0 7px, rgba(72,44,17,.14) 7px 9px,
      transparent 9px 14px, rgba(72,44,17,.07) 14px 16px,
      transparent 16px 26px, rgba(54,32,11,.12) 26px 28px,
      transparent 28px 41px),
    repeating-linear-gradient(88.4deg,
      transparent 0 19px, rgba(54,32,11,.09) 19px 24px,
      transparent 24px 51px, rgba(54,32,11,.05) 51px 59px,
      transparent 59px 88px),
    linear-gradient(168deg,#D1A267,#A47A43);
}

/* 2 · Valnöt – mörk, ljus text */
body[data-theme="tra"] .c2{
  color:#F6EBD7;
  background-color:#4B3220;
  background-image:
    radial-gradient(ellipse 70px 14px at 34% 68%, rgba(20,10,3,.36), transparent 68%),
    radial-gradient(ellipse 96px 20px at 78% 32%, rgba(255,226,180,.06), transparent 70%),
    repeating-linear-gradient(90.5deg,
      transparent 0 8px, rgba(22,11,4,.22) 8px 10px,
      transparent 10px 16px, rgba(22,11,4,.12) 16px 18px,
      transparent 18px 29px, rgba(255,226,180,.045) 29px 30px,
      transparent 30px 44px),
    repeating-linear-gradient(88.6deg,
      transparent 0 21px, rgba(16,8,2,.16) 21px 26px,
      transparent 26px 55px, rgba(16,8,2,.09) 55px 63px,
      transparent 63px 94px),
    linear-gradient(168deg,#5B3F26,#372414);
}

/* 3 · Svartbetsad ask – mörkast, för frågor med fyra alternativ */
body[data-theme="tra"] .c3{
  color:#EFE6D6;border-color:rgba(217,180,91,.5);
  background-color:#291F18;
  background-image:
    repeating-linear-gradient(90.5deg,
      transparent 0 8px, rgba(8,5,2,.30) 8px 10px,
      transparent 10px 18px, rgba(240,214,137,.045) 18px 19px,
      transparent 19px 33px),
    repeating-linear-gradient(88.8deg,
      transparent 0 25px, rgba(8,5,2,.18) 25px 31px,
      transparent 31px 67px),
    linear-gradient(168deg,#332820,#1A140F);
}
/* ---- valt svar ---- */
.ans.dim{opacity:.34;filter:saturate(.5)}
/* valt svar: grönt är "det här har ni valt", skilt från guldet som är varumärket */
.ans.sel{outline:3px solid #22C55E;outline-offset:3px;box-shadow:0 0 0 7px rgba(34,197,94,.16)}
.ans.sel::after{content:"✓";margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:#15803D;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900;
  box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.ans.ovald{opacity:.5}
.bekraftat{background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.45);color:#8FE8B0;
  padding:11px 14px;border-radius:12px;font-size:13.5px;text-align:center;line-height:1.45}
.ans.right{outline:3px solid var(--gold-hi);box-shadow:0 0 46px rgba(217,180,91,.45)}
.ans .cnt{margin-left:auto;font-variant-numeric:tabular-nums;font-size:15px;opacity:.85}

/* ---- timer ---- */
.timer{position:relative;width:104px;height:104px;flex:0 0 104px}
.klocka{display:flex;flex-direction:column;align-items:center;gap:10px}
.klocka .timer{width:126px;height:126px;flex:0 0 126px}
.klocka .timer svg{width:100%;height:100%}
.klocka .timer .num{font-size:44px}
.klocka .fnr{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:700}
.answers.stor .ans{min-height:88px;font-size:18px}
.timer svg{transform:rotate(-90deg)}
.timer .num{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;font-weight:900;font-variant-numeric:tabular-nums}
.bar{height:6px;background:#1B1C22;border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transition:width .3s linear}

/* ---- storskärm ---- */
.stage{min-height:100dvh;display:flex;flex-direction:column;padding:clamp(18px,3vw,44px);gap:clamp(14px,2vw,26px)}
.stage .top{display:flex;align-items:center;gap:18px}
.qtext{font-size:clamp(26px,4.2vw,60px);font-weight:800;line-height:1.12;letter-spacing:-.015em;text-align:center}
.stage .answers{grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.stage .answers.one,.stage .answers.three{grid-template-columns:1fr}
.stage .ans{min-height:clamp(88px,11vh,140px);font-size:clamp(18px,2.1vw,30px)}
.media{max-height:38vh;width:auto;max-width:100%;border-radius:14px;object-fit:contain;margin:0 auto;display:block}
.joinbox{display:flex;gap:clamp(16px,3vw,44px);align-items:center;justify-content:center;flex-wrap:wrap}
.qrcard{background:#F7F3E8;padding:14px;border-radius:14px;line-height:0;
  border:1px solid rgba(217,180,91,.5);box-shadow:0 0 70px rgba(217,180,91,.12)}
.rank{width:clamp(38px,3.4vw,52px);height:clamp(38px,3.4vw,52px);border-radius:50%;
  display:grid;place-items:center;margin:0 auto 10px;font-weight:900;
  font-size:clamp(17px,1.7vw,26px);letter-spacing:-.02em}
.rank.r1{background:linear-gradient(160deg,#F5DF9E,#B78F2F);color:#1A1408}
.rank.r2{background:linear-gradient(160deg,#E9EDF2,#98A0AA);color:#15171A}
.rank.r3{background:linear-gradient(160deg,#D9954F,#8A5220);color:#1B0F05}
.rank.sm{width:26px;height:26px;font-size:14px;display:inline-grid;margin:0 8px 0 0;vertical-align:-5px}
.bigcode{font-size:clamp(52px,9vw,132px);font-weight:900;letter-spacing:.08em;line-height:1;
  background:linear-gradient(180deg,var(--gold-hi),#B78F2F);-webkit-background-clip:text;background-clip:text;color:transparent}
.players{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-content:flex-start;max-height:32vh;overflow:hidden}
.ptag{background:#16171C;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-weight:700;font-size:clamp(13px,1.3vw,19px);animation:pop .35s ease}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.lb{display:flex;flex-direction:column;gap:9px;width:min(880px,100%);margin:0 auto}
.lbrow{display:flex;align-items:center;gap:14px;background:#131419;border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:clamp(15px,1.7vw,24px)}
.lbrow .pos{width:44px;font-weight:900;color:var(--dim)}
.lbrow .nm{font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow .sc{font-weight:900;font-variant-numeric:tabular-nums}
.lbrow.me{border-color:var(--gold);background:rgba(217,180,91,.08)}
.lbrow.g1{background:linear-gradient(90deg,rgba(217,180,91,.20),#131419);border-color:rgba(217,180,91,.55)}
.lbrow.g2{background:linear-gradient(90deg,rgba(201,206,214,.13),#131419);border-color:rgba(201,206,214,.35)}
.lbrow.g3{background:linear-gradient(90deg,rgba(184,115,51,.15),#131419);border-color:rgba(184,115,51,.4)}
.tabs{display:flex;gap:8px;justify-content:center}
.tabs button{background:#16171C;color:var(--dim);border:1px solid var(--line);padding:10px 18px}
.tabs button.on{background:linear-gradient(180deg,var(--gold-hi),#C39A38);color:#1A1608;border-color:transparent}
.cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.cloud span{background:#16171C;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:700;animation:pop .3s ease}
.hostbar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:8px;background:rgba(10,11,14,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;padding:8px;z-index:50}
.hostbar button{padding:12px 18px;font-size:15px}
.podium{display:flex;gap:16px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.pod{width:min(300px,31vw);background:linear-gradient(180deg,#1A1B22,#111216);border:1px solid var(--line);border-radius:16px 16px 0 0;padding:20px;text-align:center}
.pod .nm{font-size:clamp(16px,2vw,30px);font-weight:800;margin-bottom:6px}
.pod .sc{font-size:clamp(20px,2.6vw,38px);font-weight:900}
.pod.p1{height:clamp(230px,31vh,330px);border-color:rgba(217,180,91,.65);box-shadow:0 0 80px rgba(217,180,91,.18)}
.pod.p1 .sc{color:var(--gold)}
.pod.p2{height:clamp(175px,24vh,255px);border-color:rgba(201,206,214,.4)}
.pod.p2 .sc{color:var(--silver)}
.pod.p3{height:clamp(145px,20vh,215px);border-color:rgba(184,115,51,.42)}
.pod.p3 .sc{color:var(--bronze)}

/* ---- admin ---- */
.qcard{background:#111217;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.qcard .hd{display:flex;gap:10px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.optrow{display:flex;gap:8px;align-items:center}
.optrow .chip{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;border:2px solid transparent;font-weight:900}
.optrow .chip.on{border-color:var(--gold-hi)}
table{width:100%;border-collapse:collapse}
td,th{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}.answers{grid-template-columns:1fr}}