@font-face{font-family:"Figtree";font-weight:300 900;font-display:swap;src:url(figtree-latin-wght-normal.4ba7d3d096.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-display:swap;src:url(bricolage-grotesque-latin-opsz-normal.a79fdb52d4.woff2) format("woff2")}
/* Layout: one 16:9 game stage centered in a midnight field; HTML overlays sit on the canvas and scale with it (container units). */
:root{
  --night:#08102a;
  --night-2:#101c45;
  --ink:#f4f6fb;
  --muted:#a9b4d6;
  --red:#ff9858;
  --red-deep:#e0743a;
  --snow:#e9eef8;
  --panel:rgba(9,16,42,.86);
  --line:rgba(169,180,214,.22);
  --display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body{
  background:radial-gradient(120% 90% at 50% 0%, #142257 0%, var(--night) 60%);
  color:var(--ink);font-family:var(--body);
  display:grid;place-items:center;overflow:hidden;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:16px;box-sizing:border-box;
}
.stage{
  position:relative;width:100%;height:calc(100dvh - 32px);max-width:calc((100dvh - 32px) * 2.4);
  container-type:size;--l:min(1cqw, 1.7778cqh);--f:var(--l);border-radius:18px;overflow:hidden;clip-path:inset(0 round 18px);isolation:isolate;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  background:var(--night-2);user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;touch-action:none}
.overlay{
  position:absolute;inset:0;display:flex;align-items:safe center;justify-content:center;border-radius:inherit;overflow-y:auto;
  padding:calc(4*var(--l));box-sizing:border-box;
  background:linear-gradient(180deg, rgba(8,16,42,.55), rgba(8,16,42,.88));
  backdrop-filter:blur(3px);
}
.eyebrow{font:600 calc(1.15*var(--f))/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
h1,h2{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:calc(6.2*var(--f));line-height:.92;font-weight:800}
h2{font-size:calc(4*var(--f));line-height:1;font-weight:800}
p{margin:0}
.lead{font-size:calc(1.65*var(--f));line-height:1.45;color:var(--muted);max-width:38ch}
.btn{
  font:700 calc(1.6*var(--f))/1 var(--body);color:var(--night);background:var(--red);border:0;border-radius:999px;
  padding:calc(1.35*var(--l)) calc(2.6*var(--l)) calc(1.35*var(--l));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:calc(0.8*var(--l));
  text-box:trim-both cap alphabetic;
  box-shadow:0 calc(0.6*var(--l)) calc(2*var(--l)) rgba(255,152,88,.4), inset 0 calc(-0.3*var(--l)) 0 var(--red-deep);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.pick:focus-visible,.icon-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--line);color:var(--ink)}
.row{display:flex;gap:calc(1.2*var(--l));flex-wrap:wrap;align-items:center}
kbd{
  font:700 calc(1.1*var(--f))/1 var(--body);color:var(--ink);background:rgba(255,255,255,.1);
  border:0;border-radius:calc(0.6*var(--l));box-shadow:inset 0 0 0 1px var(--line);
  box-sizing:border-box;height:calc(2.4*var(--f));min-width:calc(2.4*var(--f));padding:0 calc(0.8*var(--f));
  display:inline-flex;align-items:center;justify-content:center;
}
kbd span{display:block;line-height:1;text-box:trim-both cap alphabetic;transform:translateY(.1em)}
.keys{display:flex;flex-wrap:wrap;gap:calc(1.6*var(--l));font-size:calc(1.25*var(--f));color:var(--muted)}
.keys span{display:inline-flex;align-items:center;gap:calc(0.6*var(--l))}

/* Inhalte bleiben bei sehr breiten Fenstern kompakt in der Mitte */
.start,.select,.result{max-width:calc(94*var(--l));margin-inline:auto}
/* Start */
.start{display:grid;grid-template-columns:1.05fr 1fr;gap:calc(4*var(--l));align-items:center;width:100%}
.start figure{margin:0;position:relative}
.start figure img{width:100%;height:auto;border-radius:calc(1.2*var(--l));transform:rotate(-2.5deg);box-shadow:0 calc(2*var(--l)) calc(5*var(--l)) rgba(0,0,0,.55);display:block}
.start .copy{display:flex;flex-direction:column;gap:calc(1.8*var(--l))}
.foot{position:static;text-align:left;line-height:1.45;font-size:calc(1.25*var(--f));color:var(--muted);margin:0}
.foot b{color:var(--ink);font-weight:600}

/* Select */
.select{display:flex;flex-direction:column;gap:calc(2*var(--l));width:100%;align-items:center}
.select header{text-align:center;display:flex;flex-direction:column;gap:calc(0.8*var(--l));align-items:center}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(1.2*var(--l));width:100%}
.pick{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:calc(1.2*var(--l));color:var(--ink);
  padding:calc(1.2*var(--l)) calc(1*var(--l)) calc(1.1*var(--l));display:flex;flex-direction:column;align-items:center;gap:calc(0.7*var(--l));cursor:pointer;
  font-family:var(--body);text-align:center;transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.pick img{width:calc(7.2*var(--l));height:calc(7.2*var(--l));border-radius:50%;object-fit:cover;box-shadow:0 0 0 calc(0.25*var(--l)) rgba(255,255,255,.85)}
.pick strong{font:700 calc(1.35*var(--f))/1.1 var(--display)}
.pick .abil{font-style:normal;font-size:calc(0.95*var(--f));line-height:1.3;color:var(--red);display:flex;gap:calc(0.4*var(--l));align-items:center;justify-content:center}
.pick .abil b{font:700 calc(0.8*var(--f))/1 var(--body);color:var(--night);background:var(--red);border-radius:calc(0.3*var(--l));padding:calc(0.2*var(--l)) calc(0.35*var(--l))}
.pick small{font-size:calc(1*var(--f));line-height:1.3;color:var(--muted);min-height:calc(2.6*var(--l))}
.pick:hover{transform:translateY(calc(-0.3*var(--l)));background:rgba(255,255,255,.07)}
.pick[aria-pressed="true"]{border-color:var(--red);background:rgba(255,152,88,.12);box-shadow:0 0 calc(2.4*var(--l)) rgba(255,152,88,.35)}
.pick[aria-pressed="true"] img{box-shadow:0 0 0 calc(0.25*var(--l)) var(--red)}

/* Result */
.result{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(1.6*var(--l))}
.stats{display:flex;gap:calc(1.2*var(--l));flex-wrap:wrap;justify-content:center}
.stat{min-width:calc(12*var(--l));padding:calc(1.2*var(--l)) calc(1.6*var(--l));border-radius:calc(1*var(--l));background:rgba(255,255,255,.05);border:1px solid var(--line);display:flex;flex-direction:column;gap:calc(0.5*var(--l))}
.stat span{font-size:calc(1*var(--f));letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat b{font:800 calc(2.6*var(--f))/1 var(--display);font-variant-numeric:tabular-nums}
.faces{display:flex;justify-content:center}
.faces img{width:calc(4.6*var(--l));height:calc(4.6*var(--l));border-radius:50%;object-fit:cover;margin-left:calc(-1*var(--l));box-shadow:0 0 0 calc(0.22*var(--l)) var(--night)}
.faces img:first-child{margin-left:0}
.best{font-size:calc(1.2*var(--f));color:var(--muted)}
.best:empty{display:none}
.easy{display:flex;align-items:flex-start;gap:calc(0.7*var(--l));font-size:calc(1.15*var(--f));line-height:1.35;color:var(--muted);cursor:pointer;max-width:calc(60*var(--l))}
.easy input{accent-color:var(--red);width:1.2em;height:1.2em;margin:0;flex:none}
.easy:focus-within{color:var(--ink)}

/* Bestenliste */
.legal{font-size:max(12px,calc(1*var(--f)));color:var(--muted)}
.legal a,.note a{color:inherit}
.join{display:flex;flex-direction:column;align-items:center;gap:calc(0.7*var(--l));width:100%}
.join label{font:700 calc(1.3*var(--f))/1.2 var(--body)}
.join input{font:600 max(16px,calc(1.5*var(--f)))/1.2 var(--body);color:var(--ink);background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:999px;
  padding:calc(1*var(--l)) calc(1.8*var(--l));width:calc(22*var(--l));min-width:0;box-sizing:border-box;user-select:text;-webkit-user-select:text}
.join input:focus-visible,.legal a:focus-visible,.note a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.join .row{justify-content:center}
.note{font-size:max(12px,calc(1*var(--f)));line-height:1.4;color:var(--muted);max-width:62ch}
.join .err{color:var(--red);font-size:max(13px,calc(1.1*var(--f)))}
.join .err:empty{display:none}
.board{width:100%;max-width:calc(62*var(--l))}
.ranks{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:calc(0.3*var(--l))}
.ranks li{display:grid;grid-template-columns:calc(3*var(--f)) calc(3*var(--l)) 1fr auto calc(8*var(--f));align-items:center;gap:calc(1*var(--l));text-align:left;
  padding:calc(0.5*var(--l)) calc(1.2*var(--l));border-radius:calc(0.8*var(--l));background:rgba(255,255,255,.05);font-size:max(13px,calc(1.3*var(--f)));font-variant-numeric:tabular-nums}
.ranks li.me{background:rgba(255,152,88,.16);box-shadow:inset 0 0 0 1px var(--red)}
.ranks img{width:calc(2.6*var(--l));height:calc(2.6*var(--l));border-radius:50%;object-fit:cover}
.ranks .n{font-weight:800;color:var(--red)}
.ranks .who{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranks .pts{text-align:right;color:var(--muted)}
.ranks .empty{display:block;text-align:center;color:var(--muted)}

.icon-btn{
  position:absolute;bottom:calc(1.4*var(--l));right:calc(1.4*var(--l));z-index:5;width:calc(3.4*var(--l));height:calc(3.4*var(--l));border-radius:50%;
  border:1px solid var(--line);background:rgba(8,16,42,.6);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;font:600 calc(1.3*var(--f))/1 var(--body);
}
.icon-btn svg{width:calc(1.7*var(--l));height:calc(1.7*var(--l))}
/* Touch-Steuerung: Position/Größe setzt layoutUI() je nach Format */
.tbtn{position:absolute;z-index:4;display:none;align-items:center;justify-content:center;gap:.45em;box-sizing:border-box;
  border:2px solid rgba(255,255,255,.4);background:rgba(8,16,42,.55);color:#fff;font:700 16px/1 var(--body);border-radius:999px;
  touch-action:none;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:0;user-select:none;-webkit-user-select:none}
.tbtn.on{display:flex}
.tbtn.down{background:rgba(255,152,88,.45);border-color:var(--red)}
.tbtn.ab{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.tbtn.ab.down{background:rgba(255,152,88,.18)}
.tbtn i{font-style:normal;font-size:1.3em}
.hint{position:absolute;left:50%;bottom:calc(2.2*var(--l));transform:translateX(-50%);font-size:calc(1.15*var(--f));color:rgba(244,246,251,.7);z-index:3;pointer-events:none;transition:opacity .6s}
.tkeys{display:none}
.dots,.swipehint{display:none}
/* Browser-Zoom verkleinert die Bühne in CSS-Pixeln, ohne Untergrenze bliebe die Schrift gleich groß. Mit Finger gibt es Pinch-Zoom. */
@media (pointer:fine){ .stage{--f:max(var(--l),10.7px)} }
@media (pointer:coarse){ .keys{display:none} .tkeys{display:flex} .pick:hover{transform:none} }
@media (prefers-reduced-motion:reduce){ .btn,.pick{transition:none} }

/* ---------- Phone hochkant: Bühne füllt den ganzen Screen ---------- */
@media (max-aspect-ratio:1/1){
  body{padding:0}
  .stage{width:100vw;height:100dvh;max-width:none;border-radius:0;clip-path:none;box-shadow:none}
}
/* ---------- Phone quer: niedrige Bühne, randlos ---------- */
@media (min-aspect-ratio:1/1) and (max-height:520px){
  body{padding-block:0;padding-left:max(8px, env(safe-area-inset-left, 0px));padding-right:max(8px, env(safe-area-inset-right, 0px))}
  .stage{height:100dvh;max-width:calc(100dvh * 2.4);border-radius:0;clip-path:none;box-shadow:none}
}
.stage.portrait .overlay{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top, 0px) + calc(7*var(--u))) calc(6*var(--u)) calc(env(safe-area-inset-bottom, 0px) + calc(8*var(--u)))}
.stage.portrait{--u:min(1cqw,5.4px)}
.stage.compact{--u:var(--l)}
.stage.portrait .overlay>*{margin-block:auto;margin-inline:auto;width:100%;max-width:calc(100*var(--u))}
.stage.portrait .eyebrow{font-size:calc(2.9*var(--u))}
.stage.portrait h1{font-size:calc(12.5*var(--u))}
.stage.portrait h2{font-size:calc(9*var(--u))}
.stage.portrait .lead{font-size:calc(4.1*var(--u));max-width:none}
.stage.portrait .btn{font-size:calc(4.4*var(--u));padding:calc(4.2*var(--u)) calc(7*var(--u));gap:calc(2*var(--u))}
.stage.portrait .row{gap:calc(3*var(--u));justify-content:center}
.stage.portrait .start{grid-template-columns:1fr;gap:calc(7*var(--u))}
.stage.portrait .start figure{width:min(76%, 36cqh);margin:0 auto}
.stage.portrait .start figure img{border-radius:calc(3*var(--u))}
.stage.portrait .start .copy{gap:calc(4.4*var(--u))}
.stage.portrait .start .row .btn{flex:1}
.stage.portrait .keys,.stage.portrait .tkeys{font-size:calc(3.5*var(--u));gap:calc(2.6*var(--u)) calc(4.4*var(--u))}
.stage.portrait .keys span,.stage.portrait .tkeys span{gap:calc(1.8*var(--u))}
.stage.portrait kbd{font-size:calc(3*var(--u));height:calc(6.6*var(--u));min-width:calc(6.6*var(--u));padding:0 calc(2*var(--u));border-radius:calc(1.6*var(--u))}
.stage.portrait .foot{position:static;font-size:calc(3.4*var(--u));text-align:left;line-height:1.4}
.stage.portrait .select{gap:calc(5*var(--u))}
.stage.portrait .result{gap:calc(4.4*var(--u))}
.stage.portrait .stats{gap:calc(2.6*var(--u));width:100%}
.stage.portrait .stat{min-width:0;flex:1 1 0;padding:calc(3.2*var(--u)) calc(2.4*var(--u));border-radius:calc(3*var(--u));gap:calc(1.6*var(--u))}
.stage.portrait .stat span{font-size:calc(2.5*var(--u));letter-spacing:.1em}
.stage.portrait .stat b{font-size:calc(6.4*var(--u))}
.stage.portrait .faces img{width:calc(10*var(--u));height:calc(10*var(--u));margin-left:calc(-2.4*var(--u))}
.stage.portrait .best{font-size:calc(3.4*var(--u))}
.stage.portrait .join{gap:calc(2.4*var(--u))}
.stage.portrait .join label{font-size:calc(4*var(--u))}
.stage.portrait .join input{width:100%;padding:calc(3.4*var(--u)) calc(5*var(--u))}
.stage.portrait .note{font-size:max(12px,calc(3*var(--u)))}
.stage.portrait .board{max-width:none}
.stage.portrait .ranks{gap:calc(1.2*var(--u))}
.stage.portrait .ranks li{grid-template-columns:calc(6*var(--u)) calc(8*var(--u)) 1fr auto;gap:calc(2*var(--u));padding:calc(1.8*var(--u)) calc(2.6*var(--u));border-radius:calc(2.4*var(--u));font-size:calc(3.4*var(--u))}
.stage.portrait .ranks img{width:calc(8*var(--u));height:calc(8*var(--u))}
.stage.portrait .ranks .pts{display:none}
.stage.portrait .icon-btn{width:calc(11*var(--u));height:calc(11*var(--u));top:calc(env(safe-area-inset-top, 0px) + calc(4*var(--u)));bottom:auto;right:calc(5*var(--u))}
.stage.portrait .icon-btn svg{width:calc(5.4*var(--u));height:calc(5.4*var(--u))}
.stage.portrait .hint{display:none}

/* Figurenwahl als Swipe-Karussell (hochkant + Phone quer) */
.stage.portrait .grid,.stage.compact .grid{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch;box-sizing:border-box}
.stage.portrait .grid::-webkit-scrollbar,.stage.compact .grid::-webkit-scrollbar{display:none}
.stage.portrait .grid{gap:calc(4*var(--u));padding:calc(2*var(--u)) calc(50cqw - 35*var(--u)) calc(3*var(--u));margin:0;width:100cqw;flex:none;align-self:center}
.stage.portrait .pick{flex:0 0 calc(70*var(--u));scroll-snap-align:center;padding:calc(7*var(--u)) calc(5*var(--u)) calc(6*var(--u));border-radius:calc(5*var(--u));gap:calc(3.2*var(--u))}
.stage.portrait .pick img{width:calc(36*var(--u));height:calc(36*var(--u));box-shadow:0 0 0 calc(1*var(--u)) rgba(255,255,255,.85)}
.stage.portrait .pick[aria-pressed="true"] img{box-shadow:0 0 0 calc(1*var(--u)) var(--red)}
.stage.portrait .pick strong{font-size:calc(6.6*var(--u))}
.stage.portrait .pick small{font-size:calc(3.7*var(--u));min-height:calc(10.5*var(--u))}
.stage.portrait .pick .abil{font-size:calc(3.7*var(--u));gap:calc(1.6*var(--u))}
.stage.portrait .pick .abil b{font-size:calc(2.8*var(--u));padding:calc(0.9*var(--u)) calc(1.5*var(--u));border-radius:calc(1*var(--u))}
.stage.portrait .pick,.stage.compact .pick{opacity:.5;transform:scale(.93);transition:opacity .2s ease, transform .2s ease, border-color .2s ease, background .2s ease}
.stage.portrait .pick[aria-pressed="true"],.stage.compact .pick[aria-pressed="true"]{opacity:1;transform:none}
.stage.portrait .pick:hover,.stage.compact .pick:hover{transform:scale(.93)}
.stage.portrait .pick[aria-pressed="true"]:hover,.stage.compact .pick[aria-pressed="true"]:hover{transform:none}
.stage.portrait .pick,.stage.compact .pick{background:rgba(14,24,60,.94)}
.stage.portrait .pick[aria-pressed="true"],.stage.compact .pick[aria-pressed="true"]{background:linear-gradient(rgba(255,152,88,.14),rgba(255,152,88,.14)),#0e183c}
.stage.portrait .dots,.stage.compact .dots{display:flex;gap:calc(1.8*var(--u));justify-content:center;align-items:center}
.stage.portrait .dots i,.stage.compact .dots i{display:block;width:calc(2*var(--u));height:calc(2*var(--u));border-radius:calc(1*var(--u));background:rgba(255,255,255,.25);transition:width .2s ease, background .2s ease}
.stage.portrait .dots i.on,.stage.compact .dots i.on{width:calc(6*var(--u));background:var(--red)}
.stage.portrait .easy{font-size:calc(3.4*var(--u));gap:calc(2*var(--u));max-width:none}
.stage.portrait .swipehint{display:block;font-size:calc(3.3*var(--u));color:var(--muted);margin:0}

/* Phone quer: alles etwas größer, damit es lesbar bleibt */
.stage.compact .overlay{padding:calc(3*var(--l)) calc(4.5*var(--l))}
.stage.compact .eyebrow{font-size:calc(1.5*var(--f))}
.stage.compact h2{font-size:calc(4.4*var(--f))}
.stage.compact .lead{font-size:calc(1.95*var(--f))}
.stage.compact .btn{font-size:calc(2*var(--f));padding:calc(1.7*var(--l)) calc(3.2*var(--l))}
.stage.compact .keys,.stage.compact .tkeys{font-size:calc(1.65*var(--f))}
.stage.compact kbd{font-size:calc(1.4*var(--f));height:calc(3*var(--l));min-width:calc(3*var(--l))}
.stage.compact .foot{font-size:calc(1.6*var(--f));}
.stage.compact .select{gap:calc(1.5*var(--l))}
.stage.compact .grid{gap:calc(2*var(--l));padding:calc(1*var(--l)) calc(50cqw - 14*var(--l)) calc(1.4*var(--l));margin:0;width:100cqw;flex:none;align-self:center}
.stage.compact .pick{flex:0 0 calc(28*var(--l));scroll-snap-align:center;padding:calc(1.8*var(--l)) calc(1.4*var(--l)) calc(1.6*var(--l));gap:calc(1*var(--l))}
.stage.compact .pick img{width:calc(10.5*var(--l));height:calc(10.5*var(--l))}
.stage.compact .pick strong{font-size:calc(2.2*var(--f))}
.stage.compact .pick small{font-size:calc(1.55*var(--f));min-height:calc(4.6*var(--l))}
.stage.compact .pick .abil{font-size:calc(1.5*var(--f))}
.stage.compact .pick .abil b{font-size:calc(1.2*var(--f))}
.stage.compact .dots i{width:calc(1*var(--l));height:calc(1*var(--l))}
.stage.compact .dots i.on{width:calc(3*var(--l))}
.stage.compact .stat span{font-size:calc(1.4*var(--f))}
.stage.compact .stat b{font-size:calc(3.4*var(--f))}
.stage.compact .best{font-size:calc(1.6*var(--f))}
.stage.compact .easy{font-size:calc(1.5*var(--f));max-width:none}
.stage.compact .join label{font-size:calc(1.7*var(--f))}
.stage.compact .board{max-width:none}
.stage.compact .ranks li{font-size:calc(1.7*var(--f))}
.stage.compact .icon-btn{width:calc(5*var(--l));height:calc(5*var(--l))}
.stage.compact .icon-btn svg{width:calc(2.4*var(--l));height:calc(2.4*var(--l))}