@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#1c1420;
  --bg2:#251b29;
  --panel:#2a1f2e;
  --line:#3d2f3f;
  --accent:#dd9276;
  --accent-dim:#a56b56;
  --gold:#c9a15a;
  --text:#f4ece4;
  --text-dim:#b5a0ab;
  --yes:#8fae94;
  --no:#b56a63;
  --l1:#93b596;
  --l2:#7fa3ab;
  --l3:#c9a15a;
  --l4:#c17a4f;
  --l5:#9c3b52;
  --lg:#a696c8;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(ellipse at 50% -10%, var(--bg2) 0%, var(--bg) 60%);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;margin:0;}
.wrap{width:100%;max-width:1040px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold);
  margin-bottom:10px;opacity:.9;font-weight:500;
}
.card{
  background:linear-gradient(180deg, var(--panel), var(--bg2));
  border:1px solid var(--line);
  border-radius:22px;
  padding:38px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--l1), var(--l2), var(--l3), var(--l4), var(--l5));
  opacity:.85;
}
.btn{
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:#241318;
  border:none;
  padding:15px 26px;
  border-radius:14px;
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.02rem;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 20px rgba(221,146,118,.25);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(221,146,118,.35);}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
.btn.yes{background:linear-gradient(135deg, var(--yes), #6f8f74);color:#0f1c11;}
.btn.no{background:linear-gradient(135deg, var(--no), #8a4a45);color:#260f0d;}
.btn.secondary{background:transparent;color:var(--text-dim);border:1px solid var(--line);box-shadow:none;}
.btn.small{padding:9px 16px;font-size:.85rem;}
input[type=text], input[type=number]{
  background:#170f19;
  border:1px solid var(--line);
  color:var(--text);
  padding:13px 15px;
  border-radius:12px;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  width:100%;
}
input:focus{outline:none;border-color:var(--accent);}
.hint{font-size:.85rem;color:var(--text-dim);}
.room-code{
  font-family:'Fraunces',serif;font-size:3rem;color:var(--gold);
  letter-spacing:.08em;text-align:center;margin:10px 0 18px;
}
.score-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.95rem;
}
.score-row:last-child{border-bottom:none;}
.score-row.active{color:var(--gold);}
.score-row .pts{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;}

.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
@media(min-width:600px){.level-grid{grid-template-columns:repeat(5,1fr);}}
.level-btn{
  border-radius:16px;padding:16px 6px;text-align:center;cursor:pointer;
  border:1px solid var(--line);background:#170f19;transition:transform .15s ease;
}
.level-btn:hover{transform:translateY(-2px);}
.level-btn .num{font-family:'Fraunces',serif;font-size:1.5rem;display:block;}
.level-btn .label{font-size:.68rem;color:var(--text-dim);margin-top:5px;display:block;}
.level-btn[data-lvl="1"]{border-color:var(--l1);} .level-btn[data-lvl="1"] .num{color:var(--l1);}
.level-btn[data-lvl="2"]{border-color:var(--l2);} .level-btn[data-lvl="2"] .num{color:var(--l2);}
.level-btn[data-lvl="3"]{border-color:var(--l3);} .level-btn[data-lvl="3"] .num{color:var(--l3);}
.level-btn[data-lvl="4"]{border-color:var(--l4);} .level-btn[data-lvl="4"] .num{color:var(--l4);}
.level-btn[data-lvl="5"]{border-color:var(--l5);} .level-btn[data-lvl="5"] .num{color:var(--l5);}
.level-btn[data-lvl="g"]{border-color:var(--lg);grid-column:span 3;} .level-btn[data-lvl="g"] .num{color:var(--lg);}
@media(min-width:600px){.level-btn[data-lvl="g"]{grid-column:span 5;}}
.level-btn:disabled, .level-btn.disabled{opacity:.3;pointer-events:none;}
.level-btn.locked{opacity:.18;pointer-events:none;position:relative;}
.level-btn.locked::after{content:"🔒";position:absolute;top:4px;right:6px;font-size:.7rem;}
.level-btn.mirror{cursor:default;}
.level-btn.mirror:hover{transform:none;}

.question-box{
  margin-top:22px;background:#170f19;border:1px solid var(--line);border-radius:18px;padding:30px 26px;
  min-height:100px;display:flex;align-items:center;justify-content:center;text-align:center;
}
.question-box .qtext{font-family:'Fraunces',serif;font-size:1.35rem;line-height:1.5;}
.question-box .placeholder{color:var(--text-dim);font-size:.95rem;}
.level-badge{
  font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}

/* Historik */
.history-list{display:flex;flex-direction:column;gap:14px;}
.history-card{
  background:#170f19;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  cursor:pointer;transition:transform .15s ease, border-color .15s ease;
  text-decoration:none;color:var(--text);display:block;
}
.history-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.history-card-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.history-code{font-family:'Fraunces',serif;font-size:1.2rem;color:var(--gold);}
.history-date{font-size:.8rem;color:var(--text-dim);}
.history-players{margin-top:8px;font-size:.9rem;color:var(--text-dim);}
.status-pill{
  display:inline-block;padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:600;
  letter-spacing:.03em;
}
.status-pill.finished{background:rgba(143,174,148,.18);color:var(--yes);}
.status-pill.playing{background:rgba(201,161,90,.18);color:var(--gold);}
.status-pill.lobby{background:rgba(181,160,171,.15);color:var(--text-dim);}
.back-link{display:inline-block;margin-bottom:20px;color:var(--text-dim);font-size:.85rem;text-decoration:none;}
.back-link:hover{color:var(--accent);}

.detail-section{margin-top:28px;}
.detail-section h2{font-size:1rem;color:var(--gold);margin-bottom:14px;letter-spacing:.02em;}
.settings-grid{display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--text-dim);}
.settings-grid strong{color:var(--text);}

.log-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.log-table th{
  text-align:left;font-family:'Inter',sans-serif;font-weight:600;color:var(--gold);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.log-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top;}
.log-table tr:last-child td{border-bottom:none;}
.log-table .q-text{font-family:'Fraunces',serif;font-size:.95rem;}
.outcome-yes{color:var(--yes);font-weight:600;}
.outcome-no{color:var(--no);font-weight:600;}
.winner-tag{
  display:inline-block;margin-left:8px;font-size:.7rem;background:rgba(201,161,90,.2);
  color:var(--gold);padding:3px 10px;border-radius:12px;font-weight:600;
}

.q-list{display:flex;flex-direction:column;gap:10px;}
.q-item{
  background:#170f19;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:10px;padding:14px 18px;font-size:.9rem;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.q-item[data-lvl="1"]{border-left-color:var(--l1);}
.q-item[data-lvl="2"]{border-left-color:var(--l2);}
.q-item[data-lvl="3"]{border-left-color:var(--l3);}
.q-item[data-lvl="4"]{border-left-color:var(--l4);}
.q-item[data-lvl="5"]{border-left-color:var(--l5);}
.q-item[data-lvl="g1"], .q-item[data-lvl="g2"], .q-item[data-lvl="g3"]{border-left-color:var(--lg);}
.q-item .lvl{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);
  display:block;margin-bottom:5px;font-weight:600;
}
.q-item .q-time{color:var(--text-dim);font-size:.78rem;white-space:nowrap;flex-shrink:0;}

/* Animerad topplista i slutsekvensen */
.rank-reveal-row{
  display:flex;align-items:center;gap:16px;padding:14px 20px;margin-bottom:10px;
  background:#170f19;border:1px solid var(--line);border-radius:14px;
  animation:rankSlideIn .5s ease both;
}
@keyframes rankSlideIn{
  from{opacity:0;transform:translateY(18px) scale(.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.rank-place{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--text-dim);width:30px;}
.rank-name{flex:1;text-align:left;font-family:'Fraunces',serif;font-size:1.1rem;}
.rank-pts{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;color:var(--gold);}
.rank-reveal-row.winner-row{
  border-color:var(--gold);
  background:linear-gradient(135deg, rgba(201,161,90,.18), rgba(221,146,118,.12));
}
.rank-reveal-row.winner-row .rank-place, .rank-reveal-row.winner-row .rank-name{color:var(--gold);}
.rank-reveal-row.winner-flourish{
  animation:winnerPulse 1.1s ease-in-out infinite alternate;
}
@keyframes winnerPulse{
  from{box-shadow:0 0 0 rgba(201,161,90,0);transform:scale(1);}
  to{box-shadow:0 0 34px rgba(201,161,90,.55);transform:scale(1.03);}
}
.turn-banner{text-align:center;margin-bottom:20px;}
.round-indicator{font-size:.8rem;color:var(--text-dim);margin-bottom:8px;letter-spacing:.03em;}
.whose{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--gold);}
.cue{color:var(--text-dim);font-size:.85rem;margin-top:8px;}
.verdict-row{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap;}
.reroll-wrap{text-align:center;margin-top:12px;}
.reroll-wrap .btn{background:transparent;color:var(--text-dim);border:1px solid var(--line);box-shadow:none;}
.err{color:var(--no);font-size:.85rem;margin-top:10px;text-align:center;}
.flex-row{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;}
.flex-row > .main{flex:1;min-width:280px;}
.flex-row > .side{width:230px;}
.settings-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;}
.threshold-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;}
.threshold-row select{
  background:#170f19;border:1px solid var(--line);color:var(--text);border-radius:10px;
  font-family:'Inter',sans-serif;padding:8px;
}
.tiebreak-banner{
  font-family:'Fraunces',serif;font-size:1.15rem;color:var(--l5);margin-bottom:10px;font-weight:600;
}
.spectator-badge{
  display:inline-block;font-family:'Fraunces',serif;font-size:.85rem;color:var(--no);
  border:1px solid var(--no);border-radius:10px;padding:6px 14px;margin-top:10px;
}

/* Röstning */
.vote-banner{
  background:#170f19;border:1px solid var(--gold);border-radius:16px;padding:20px;margin-top:20px;text-align:center;
}
.vote-banner .vote-question{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--gold);margin-bottom:6px;}
.vote-banner .vote-progress{color:var(--text-dim);font-size:.85rem;}
.vote-timer{
  font-family:'Fraunces',serif;font-size:2.2rem;color:var(--gold);text-align:center;margin:14px 0;
}
.event-banner{
  background:linear-gradient(135deg, rgba(201,161,90,.18), rgba(221,146,118,.12));
  border:1px solid var(--gold);border-radius:14px;padding:16px 20px;margin-top:18px;text-align:center;
  font-family:'Fraunces',serif;font-size:1.05rem;color:var(--gold);
}

/* Lobby: QR + spelarlista i fokus */
.qr-frame{
  display:flex;justify-content:center;margin:20px 0;background:#fff;padding:18px;border-radius:18px;
  width:fit-content;margin-left:auto;margin-right:auto;box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.connected-players{margin-top:16px;display:flex;flex-direction:column;gap:10px;max-width:420px;margin-left:auto;margin-right:auto;}
.connected-players .player-pill{
  background:#170f19;border:1px solid var(--line);border-radius:14px;padding:14px 20px;
  font-family:'Fraunces',serif;font-size:1.2rem;
}

/* Turordning */
.order-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#170f19;border:1px solid var(--line);border-radius:14px;padding:12px 16px;
}
.order-row .order-name{font-family:'Fraunces',serif;font-size:1.1rem;}
.order-row .order-buttons{display:flex;gap:6px;}
.order-btn{
  background:transparent;border:1px solid var(--line);color:var(--text-dim);
  border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1rem;
}
.order-btn:hover{color:var(--accent);border-color:var(--accent);}
.order-btn:disabled{opacity:.25;cursor:not-allowed;}

/* Resultatsida */
.result-message{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--gold);margin-top:8px;}
.result-detail{color:var(--text-dim);font-size:.95rem;margin-top:12px;}
.result-countdown{font-size:.75rem;color:var(--text-dim);margin-top:22px;}

.shuffle-name{
  font-family:'Fraunces',serif;font-weight:700;font-size:2.6rem;color:var(--accent);
  margin-top:20px;min-height:70px;
  text-shadow:0 0 24px rgba(221,146,118,.4);
  animation:shufflePulse .4s ease-in-out infinite alternate;
}
@keyframes shufflePulse{0%{transform:scale(1);}100%{transform:scale(1.04);}}