/* SourByte Games – gemeinsames Design (Farben, Schriften, Kopfzeile, Formulare, Lobby) */

@font-face{ font-family:"Unbounded"; font-weight:500; font-display:swap; src:url("../assets/fonts/unbounded-500.woff2") format("woff2"); }
@font-face{ font-family:"Figtree"; font-weight:400; font-display:swap; src:url("../assets/fonts/figtree-400.woff2") format("woff2"); }
@font-face{ font-family:"Figtree"; font-weight:500; font-display:swap; src:url("../assets/fonts/figtree-500.woff2") format("woff2"); }
@font-face{ font-family:"Figtree"; font-weight:600; font-display:swap; src:url("../assets/fonts/figtree-600.woff2") format("woff2"); }
/* Farben und Schriften von sourbyte.app */
:root{
  --paper:#0A0F1A; --card:#111A2B; --ink:#EEF2F7; --muted:#97A3B6; --line:rgba(238,242,247,.16);
  --signal:#B8FF3C; --signal-ink:#0A0F1A; --accent:#3CE0FF; --bad:#FF6B5E;
  --thumb:8px;
  --font:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --num:"Unbounded","Arial Black",sans-serif;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--paper); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.5;
  padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  -webkit-font-smoothing:antialiased;
}
button,input,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.bar{ display:flex; align-items:center; gap:14px; max-width:980px; margin:0 auto; padding:14px 20px; }
.brand{ font-family:var(--num); font-weight:500; letter-spacing:-.01em; font-size:1.05rem; text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:10px; }
.brand svg{ width:22px; height:22px; }
.crumb{ color:var(--muted); font-weight:500; }
.crumb::before{ content:"/"; margin-right:12px; color:var(--line); }
#roomTag{ color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
#leaveBtn{ padding:8px 14px; font-size:15px; white-space:nowrap; }
.bar .spacer{ flex:1; }
#conn{ color:var(--bad); font-size:14px; }

main{ max-width:980px; margin:0 auto; padding:8px 20px 48px; }

.primary,.ghost{ border-radius:12px; min-height:48px; padding:10px 22px; cursor:pointer; font-weight:600; border:1px solid transparent; transition:box-shadow .3s, border-color .2s; }
.primary{ background:var(--signal); color:var(--signal-ink); }
.primary:hover:not(:disabled){ box-shadow:0 0 0 6px rgba(184,255,60,.14), 0 0 40px rgba(184,255,60,.22); }
.ghost{ background:rgba(17,26,43,.5); color:var(--ink); border-color:var(--line); }
.ghost:hover:not(:disabled){ border-color:var(--ink); }
button:disabled{ opacity:.45; cursor:default; }
.wide{ width:100%; }
.linkish{ background:none; border:0; color:var(--muted); text-decoration:underline; cursor:pointer; padding:6px 0; }
input[type=text],input:not([type]),select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card);
}
input:focus,select:focus{ border-color:var(--signal); outline:none; }
label{ display:grid; gap:6px; font-weight:600; font-size:15px; }
.status{ color:var(--muted); }
.center{ text-align:center; margin-top:20vh; }

/* Startseite */
.home{ max-width:520px; margin:4vh auto 0; }
.hero-year{
  font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:clamp(64px, 20vw, 150px); line-height:.95; letter-spacing:-.04em; font-weight:500; margin:0 0 6px;
  color:var(--ink);
}
.home h1{ font-family:var(--num); font-weight:500; font-size:22px; margin:0 0 6px; letter-spacing:-.01em; }
.lede{ margin:0 0 28px; color:var(--muted); max-width:46ch; }
.homeform{ display:grid; gap:16px; }
.or{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14px; }
.or::before,.or::after{ content:""; flex:1; height:2px; background:var(--line); }
.joinrow{ display:flex; gap:10px; }
.joinrow input{ text-transform:uppercase; letter-spacing:.15em; font-weight:700; }
#code{ text-transform:uppercase; letter-spacing:.15em; font-weight:700; }

/* Lobby */
.lobby{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; margin-top:4vh; align-items:start; }
.codebox .hint{ margin:0; color:var(--muted); }
.code{ font-family:var(--num); font-weight:500; color:var(--signal); font-size:clamp(64px, 14vw, 120px); letter-spacing:.04em; line-height:1; margin:4px 0 18px; }
.lobby h2{ font-size:18px; margin:0 0 10px; }
.settings{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0 16px; }
.wait{ margin-top:24px; }

.players{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.players li{ display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.players li.me .pname{ color:var(--accent); font-weight:700; }
.players li.away{ opacity:.45; }
.players small{ color:var(--muted); font-weight:500; margin-left:6px; }
.players .pstat{ color:var(--muted); font-variant-numeric:tabular-nums; }
.players.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.players.chips li{ border:2px solid var(--line); border-radius:999px; padding:4px 12px; font-size:15px; }
.players.chips li.done{ border-color:var(--ink); }

/* Spielrunde */
.round-head{ display:flex; justify-content:space-between; align-items:baseline; font-weight:650; margin-bottom:6px; }
.time{ font-variant-numeric:tabular-nums; }
.timer{ height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-bottom:14px; }
#timerFill{ height:100%; width:100%; background:var(--signal); transition:width .2s linear; }
#timerFill.low{ background:var(--bad); }

.photo{ margin:0; background:#05080D; border:1px solid var(--line); border-radius:6px; overflow:hidden; display:grid; place-items:center; min-height:200px; }
.photo.empty{ color:#ccd; padding:40px; }
.zoombtn{ all:unset; cursor:zoom-in; display:block; }
.zoombtn:focus-visible{ outline:3px solid var(--signal); outline-offset:-3px; }
.photo img{ display:block; max-width:100%; max-height:56vh; width:auto; height:auto; margin:0 auto; }
.photo figcaption{ width:100%; background:var(--card); color:var(--muted); font-size:13px; padding:8px 12px; }
.photo figcaption a{ color:var(--accent); }

.picker{ margin-top:18px; display:grid; gap:10px; }
.picker.locked .ruler, .picker.locked .nudge{ opacity:.4; }
.year{
  display:block; text-align:center; font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:clamp(52px, 13vw, 108px); line-height:1; letter-spacing:-.04em; font-weight:500;
}

.ruler{ position:relative; height:76px; margin:0 14px; touch-action:pan-y; }
.ruler .ticks{ position:absolute; inset:0; pointer-events:none; }
.tick{ position:absolute; top:calc(52px - 8px); width:1px; height:8px; background:var(--line); transform:translateX(-50%); }
.tick.mid{ top:calc(52px - 16px); height:16px; background:var(--muted); }
.tick.major{ top:calc(52px - 30px); height:30px; width:2px; background:var(--ink); }
.tick{ background:rgba(238,242,247,.22); }
.tick b{ position:absolute; top:34px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.ruler input[type=range]{
  position:absolute; left:0; right:0; top:0; width:100%; height:52px; margin:0; background:transparent;
  -webkit-appearance:none; appearance:none; pointer-events:none;
}
.ruler input[type=range]::-webkit-slider-runnable-track{ height:52px; background:transparent; }
.ruler input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:var(--thumb); height:52px; border-radius:3px; background:var(--signal);
  box-shadow:0 0 0 2px var(--paper), 0 0 14px rgba(184,255,60,.55);
}
.ruler input[type=range]::-moz-range-track{ height:52px; background:transparent; }
.ruler input[type=range]::-moz-range-thumb{ width:var(--thumb); height:52px; border:0; border-radius:3px; background:var(--signal); box-shadow:0 0 0 2px var(--paper); }
.ruler.live{ cursor:ew-resize; }

.nudge{ display:flex; justify-content:center; gap:8px; }
.nudge button{ min-width:64px; padding:8px 12px; font-variant-numeric:tabular-nums; }

/* Auflösung */
.answer{ display:flex; align-items:baseline; gap:8px 24px; flex-wrap:wrap; margin:20px 0 18px; }
.answer .year{ text-align:left; margin:0; }
.answer .mine{ margin:0; }
.truth{ position:absolute; top:0; height:52px; width:var(--thumb); border-radius:3px; background:var(--signal);
        transform:translateX(-50%); transform-origin:bottom; animation:rise .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise{ from{ transform:translateX(-50%) scaleY(0); } }
.mark{ position:absolute; top:4px; width:24px; height:24px; border-radius:50%; transform:translateX(-50%);
       display:grid; place-items:center; font-size:11px; font-weight:800; background:var(--card); border:2px solid var(--ink); }
.mark.me{ background:var(--accent); border-color:var(--accent); color:var(--signal-ink); z-index:2; }
.results{ width:100%; border-collapse:collapse; margin:22px 0; font-variant-numeric:tabular-nums; }
.results th{ text-align:left; font-size:14px; color:var(--muted); font-weight:600; padding:6px 8px 6px 0; border-bottom:1px solid var(--ink); }
.results td{ padding:10px 8px 10px 0; border-bottom:1px solid var(--line); }
.results th:not(:first-child), .results td:not(:first-child){ text-align:right; }
.results tr.me td:first-child{ color:var(--accent); font-weight:700; }

/* Endstand */
.final h1{ font-family:var(--num); font-weight:500; font-size:clamp(36px,7vw,64px); letter-spacing:-.035em; margin:3vh 0 18px; }
.ranking{ list-style:none; margin:0 0 16px; padding:0; }
.ranking li{ position:relative; display:grid; grid-template-columns:56px 1fr auto; align-items:baseline; gap:12px; padding:14px 0 16px; border-bottom:1px solid var(--line); }
.ranking .place{ font-family:var(--num); font-weight:500; color:var(--signal); font-size:30px; font-variant-numeric:tabular-nums; }
.ranking .pname{ font-size:20px; font-weight:650; }
.ranking .pts{ font-variant-numeric:tabular-nums; font-weight:700; font-size:20px; }
.ranking .meter{ position:absolute; left:0; bottom:-2px; height:4px; width:var(--w); background:var(--signal); }
.ranking li.me .pname{ color:var(--accent); }
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

#toast{ border:1px solid var(--line); position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0)); transform:translate(-50%, 20px);
  background:var(--card); color:var(--ink); padding:12px 18px; border-radius:12px; max-width:min(92vw,480px);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:20; }
#toast.show{ opacity:1; transform:translate(-50%,0); }
#zoom{ position:fixed; inset:0; background:rgba(5,8,9,.94); display:grid; place-items:center; z-index:30; cursor:zoom-out; padding:12px; }
#zoom[hidden]{ display:none; }
#zoom img{ max-width:100%; max-height:100%; object-fit:contain; }

@media (max-width:720px){
  .brand .bt{ display:none; }
  .crumb::before{ margin-right:8px; }
  body{ font-size:16px; }
  .bar{ padding:12px 16px; gap:10px; }
  main{ padding:4px 16px 40px; }
  .lobby{ grid-template-columns:1fr; gap:24px; }
  .tick.minor{ display:none; }
  .tick b.odd{ display:none; }
  .photo img{ max-height:46vh; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

.ghost.small,.primary.small{ min-height:36px; padding:6px 12px; font-size:14px; border-radius:10px; }
#leaveBtn{ padding:6px 12px; }
.tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
.tools small{ color:var(--muted); font-weight:500; }
.jokerhint{ margin:0; color:var(--signal); font-weight:600; }
.decade{ position:absolute; top:0; height:52px; background:rgba(184,255,60,.13); border-radius:3px; pointer-events:none; }
.reportbox{ position:relative; margin-left:auto; }
.reportmenu{ position:absolute; z-index:15; top:calc(100% + 6px); right:0; width:min(290px, 86vw); display:grid; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; box-shadow:0 12px 40px rgba(0,0,0,.45); }
.reportmenu[hidden]{ display:none; }
.reportmenu p{ margin:0 0 4px; font-weight:600; }
.reportmenu .ghost{ text-align:left; }
.round-head .reportbox{ font-weight:400; }
.themetag{ margin-left:10px; color:var(--muted); font-weight:500; font-size:14px; }
.settings{ grid-template-columns:1fr 1fr; }
.settings .full{ grid-column:1 / -1; }
label.check{ display:flex; align-items:center; gap:10px; font-weight:500; cursor:pointer; }
label.check input{ width:18px; height:18px; accent-color:var(--signal); }
.note{ color:var(--muted); font-size:12px; font-weight:500; }
.lobby h2.inroom{ margin-top:28px; }
.timer.nolimit{ background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.timer.nolimit #timerFill{ display:none; }
.hostbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.hostbar small{ color:var(--muted); }
label.check.off{ opacity:.45; }
.tick.mid b{ top:20px; }
.tick.minor b{ top:12px; }
.mine small{ color:var(--muted); }
@media (max-width:720px){ .themetag{ display:block; margin-left:0; } .reportbox{ margin-left:0; } }

/* v3: Startseite */
.twobtn{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.twobtn button{ display:grid; gap:2px; padding:12px 14px; }
.twobtn small{ font-weight:500; font-size:13px; opacity:.75; }
.dailycard{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:16px 18px; border-radius:14px;
  border:1px solid rgba(184,255,60,.55); background:radial-gradient(circle at 100% 0%, rgba(184,255,60,.14), transparent 60%), var(--card); }
.dailycard:hover{ box-shadow:0 0 0 6px rgba(184,255,60,.1); }
.dailycard:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.dailycard .dtitle{ font-family:var(--num); font-weight:500; font-size:18px; color:var(--signal); }
.dailycard .dsub{ grid-column:1; color:var(--muted); font-size:15px; }
.dailycard .ddate{ grid-row:1 / span 2; grid-column:2; align-self:center; font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px; }
.dailycard[disabled]{ opacity:.6; }
/* Lobby */
.lobby.solo{ grid-template-columns:1fr 1.4fr; }
.lobbytitle{ font-family:var(--num); font-weight:500; font-size:clamp(40px,7vw,64px); margin:0; letter-spacing:-.03em; }
.settings .note{ margin:0; }
.lbtn{ display:flex; align-items:flex-end; }
.teampick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 20px; }
.teambtn{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:4px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); border-left:5px solid var(--tc); }
.teambtn.on{ border-color:var(--tc); box-shadow:0 0 0 1px var(--tc) inset; }
.teambtn .tname{ font-weight:600; }
.teambtn .tmem{ color:var(--muted); font-size:14px; }
.tdot{ display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--tc); margin-right:8px; vertical-align:1px; }
/* Karte */
.maphint{ margin:6px 0 0; color:var(--muted); font-size:14px; }
.map{ position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#070B14; }
.map svg{ display:block; width:100%; height:auto; aspect-ratio:1000 / 394.4; touch-action:none; cursor:crosshair; user-select:none; }
.revealmap .map svg{ cursor:grab; }
.map .sea{ fill:#070B14; }
.map .land{ fill:#1B2942; stroke:#34496B; stroke-width:.4; vector-effect:non-scaling-stroke; }
.map .pin circle{ fill:var(--pin, var(--accent)); stroke:var(--paper); }
.map .pin.me circle{ fill:var(--accent); }
.map .pin.ptruth circle{ fill:var(--signal); filter:drop-shadow(0 0 6px rgba(184,255,60,.7)); }
.map .pin text{ fill:var(--signal-ink); font-weight:800; text-anchor:middle; font-family:var(--font); }
.map .mline{ stroke:rgba(238,242,247,.55); }
.map .mline.me{ stroke:var(--accent); }
.mapzoom{ position:absolute; right:8px; top:8px; display:grid; gap:4px; }
.mapzoom button{ width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:rgba(17,26,43,.85); color:var(--ink); font-size:18px; cursor:pointer; }
.revealmap{ margin:16px 0 4px; }
/* Runden */
.spectator{ margin:16px 0 0; padding:14px 16px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); }
.koline{ margin:4px 0 14px; font-weight:600; color:var(--bad); }
.koline.me{ font-size:18px; }
.players li.out .pname{ text-decoration:line-through; opacity:.6; }
.teamround{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:16px 0 0; }
.teamround p{ margin:0; width:100%; color:var(--muted); font-size:14px; }
.mark{ border-color:var(--tc, var(--ink)); }
/* Endstand */
.banner{ font-family:var(--num); font-weight:500; font-size:clamp(20px,3.4vw,30px); color:var(--tc, var(--signal)); margin:0 0 18px; }
.ranking.teams small{ color:var(--muted); font-weight:500; font-size:14px; margin-left:8px; }
.ranking.small li{ padding:8px 0 10px; }
.ranking.small .place{ font-size:18px; }
.ranking.small .pname,.ranking.small .pts{ font-size:16px; }
.ranking .pname small{ color:var(--muted); font-weight:500; font-size:14px; }
.mystats{ margin-top:34px; padding:16px 18px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.mystats h2{ margin:0 0 6px; font-size:16px; }
.mystats p{ margin:0; color:var(--muted); }
.awards-h{ margin-top:30px; font-size:18px; }
.awards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.award{ display:grid; gap:4px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--card); }
.award.me{ border-color:var(--accent); }
.award .aname{ color:var(--signal); font-weight:600; font-size:14px; }
.award .awho{ font-weight:700; font-size:18px; }
.award .atxt{ color:var(--muted); font-size:14px; }
.final h2{ font-size:18px; margin:26px 0 8px; }
.final .mystats h2{ margin:0 0 6px; font-size:16px; }
.bigscore{ font-family:var(--num); font-weight:500; font-size:clamp(56px,12vw,96px); color:var(--signal); margin:0; line-height:1; }
.shareline{ font-size:28px; letter-spacing:4px; margin:10px 0 4px; }
@media (max-width:720px){
  .twobtn{ grid-template-columns:1fr; }
  .lobby.solo{ grid-template-columns:1fr; }
}

.joincard{ margin-top:6px; padding:16px 18px; border-radius:14px; border:1px solid rgba(60,224,255,.5);
  background:radial-gradient(circle at 100% 0%, rgba(60,224,255,.12), transparent 60%), var(--card); display:grid; gap:10px; }
.joincard p{ margin:0; color:var(--muted); }
.joincard p strong{ color:var(--accent); font-weight:600; }
.joinbtn{ border:0; border-radius:12px; padding:10px 22px; min-height:48px; background:var(--accent); color:var(--signal-ink); font-weight:700; cursor:pointer; }
.joinbtn:hover{ box-shadow:0 0 0 6px rgba(60,224,255,.15); }
.setview{ display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:0 0 18px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.setview dt{ color:var(--muted); }
.setview dd{ margin:0; font-weight:600; }
.setview .extras{ display:flex; flex-wrap:wrap; gap:6px 14px; font-weight:500; }
.setview .extras .on{ color:var(--signal); }
.setview .extras .off{ color:var(--muted); }
.rate{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 0; color:var(--muted); font-size:13px; }
.ratethanks{ color:var(--signal); font-size:13px; }
.ratebtn{ width:38px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-size:16px; cursor:pointer; filter:grayscale(1); opacity:.7; }
.ratebtn:hover{ opacity:1; filter:none; }
.ratebtn.on{ filter:none; opacity:1; border-color:var(--signal); box-shadow:0 0 0 1px var(--signal) inset; }

/* ===== Gemeinsame Bausteine der Partyspiele ===== */
.bigbtn{ display:grid; gap:2px; }
.bigbtn small{ font-weight:500; font-size:13px; opacity:.75; }
.status.small{ font-size:14px; }
.ava{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--c); color:#0A0F1A; font-weight:800; font-size:13px; margin-right:10px; flex:none; }
.players .pname{ display:flex; align-items:center; }
.players li{ align-items:center; }
.catgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px; }
.catcard{ display:grid; gap:2px; padding:12px 14px 12px 40px; border-radius:12px; border:1px solid var(--line); background:var(--card); cursor:pointer; position:relative; }
.catcard input{ position:absolute; left:14px; top:15px; width:18px; height:18px; accent-color:var(--signal); }
.catcard:has(input:checked){ border-color:var(--signal); }
.catcard .cname{ font-weight:600; }
.catcard .cmeta{ color:var(--muted); font-size:13px; }
.setview2{ padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); margin-bottom:12px; }
.setview2 p{ margin:0 0 6px; }
.rules{ margin-top:22px; border:1px solid var(--line); border-radius:12px; padding:12px 16px; background:var(--card); }
.rules summary{ cursor:pointer; font-weight:600; }
.rules p{ color:var(--muted); margin:10px 0 0; line-height:1.6; }
.crumb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:720px){ .catgrid{ grid-template-columns:1fr; } #roomTag{ display:none; } }
@media (max-width:520px){ .rbt{ display:none; } .bar{ gap:8px; } .bar .ghost.small{ padding:6px 10px; font-size:13px; } }