/* Layout: Vollbild-Spielfläche, HUD in den vier Ecken, Overlays als dunkle Glas-Karten links */
:root{
  --bg:#191516; --tile:#221d1e; --tile-2:#2b2526;
  --text:#f1e4da; --soft:rgba(241,228,218,.55); --faint:rgba(241,228,218,.14);
  --peach:#f6b387; --butter:#efe8a6; --mint:#8fd9c6; --lilac:#c3b0ee; --magenta:#e2589e; --cyan:#73d8ec;
  --ink:#191516; --glass:rgba(25,21,22,.74); --scrim:rgba(12,9,10,.55);
  --font:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.33,0,.67,1);
  --logo:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmIAAAB9CAQAAACrQMcKAAAFU0lEQVR42u3d0W7kOAxE0eXA///L3McdLGaQTmxLpHjuY4C0JUouVrntduQ/ANCXX0oAgIgBABEDgO9zKQFwEL9f5A5ODACIGAAQMQAgYgCIGAAUw7eTQHeGP3ZDxIDziEmTFScB9FZsD4CjQUgK5fhBiHSzKwDUxzUx4DwPRsQAtMaFfQDgxABxSU2IGABRUpwEwIkBQpOqEDFAOFIlcRIAODGITKpCxAAhSY2IGFDB40TZkYGIgb/4SDZClYhY3T5joUHoiRggQKkEEQPAhb2A+8QAcGJAo/iUf/lbjKsEEQMEJfU5VcQqdZW09AARA85odKkGRKzrwvBj6BvS7FtODFxYuebKhRExp3/bfp38Bhf2JO4TA8CJbe9DrLkgqQZEDIAgKU4CwAAnpsMIUbWOHMfXgIgBx7a1UAki9qdlyD8uSdocADgxoF98y2a1adX0L9tUIBs68lAJTuy7yxG2Bj/0wzYUx84ft52iOAnsljCNdmic1N8AHO/EdLi5jSbHznxc6xcnMY8wEiKmkwAgYjpcy/agshOC5N1fQs4b++bbFbxsEHKtWtaNE+MUABAxiFWtj+wbya9GEe+M9XIiiEPl5pZW0b6a6cQEyRrNYZ4H48K2jlScJGF728S61rO3yUXRle7W+qOTiImSAEY4sY5vW4wf/t+zd+5UbDz9Wpcgefe4t0cqTkL7mTnPOKWOFUVMkAQwwon5NhI7G985QTIfOp9yT/XESaxvEHHUbPo12mh0tA/+u4qI1epq+ehi52udD0BTJzbj9M+//C0e+Jx6TSibr4w4v616l82ARQ0iNoxHkBxgAC6nV0lJzUYzyiNqVXm2n99jmLePEv2q58K+bvj+iMLqFhDY2F6JlxrAVbLcEDGAQ5zYmtMrXzLYc9/2c+JYK8fW3Dan3F89cZILq/vpUXZevWq532nnm6O+ik8EAJo6sb1B8v4Y9hn8Tm0pNx+/2pqctfqLZiNOCn/TR1p/vmpZQsTqdZg8eq6iO8TJ0f27alf97H89ZtSrGeSW/z+ozV3NNwCLXVGqY/MnRPOVmRxEfzDia2C5zw6SgDiJTTKdZUays4nUiczv1vH9N9rHi/+Rlap5bdims0IbYO8f7cRWF+7eu1iiuGxXvgztPUbPf+6OtSi4juLkrA4ZhccaDea35jgNfw5n53yvo4sjSALHs8+JVQ6Sq39st4v8V7gjqcddcFVrcOT35+Jk9ZCl/tVqXP8Bo2izQx857jMi5v4oACOc2B69fy8cZpkZ12wj07+RPOutDWVX8xq1RbsFvWg01zhyBdaM1eWG8k6syxJtfXfeOJcCtIyTs6jzAM39NvKdR4XeeqAmW7TJXLwyX3/e/ce8suiuvCVierKIUGemwhgndvD2euMHdKsJeJb4/P5trcMPZfffreLkIG8SR880Bq7ojvln0VV4+MjXo2UBgAOc2LnXKLLY55wfZiuPP+1VcVKQnDWeaDm/aDLSWm+nyJWj/EzEhEgAI5xYjW4wQXJzTA2nfRts/78gYlzYagGPYuM5L2SvG3ccvldLzPQrEXvyEed0agCaRO04ecpmSFuo/Km1supZfHzfGefzjxnF7npcj/umXLxkJIQ7ACdmowJbG/KMcYqTC31DfLA1al4c9TC22a8bXZH5Xrc03TeXADgxXR6AOPmGNBJNzaX7zGPCfH85BwFwYvo3AHFytICGGrapVVihD4+96Iu/y3ID4MQ4CNg/xknEUH67nhfk/vvEbCAJX4+21ut9F1Xtar+xAczu4v+T9O9fiiNiADbiPjEARzkxAODEAICIAQARA0DEAKAw/wKdEwfVAV6yDAAAAABJRU5ErkJggg==);
  color-scheme:dark;
}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-stretch:88%;font-variation-settings:"wdth" 88;-webkit-font-smoothing:antialiased}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
body.playing canvas#game{cursor:none}
#lockhint{position:absolute;top:96px;left:50%;transform:translateX(-50%);background:var(--tile);border:1px solid rgba(239,232,166,.4);border-radius:14px;padding:10px 14px;font-size:13px;line-height:1.4;color:var(--butter);max-width:min(520px,calc(100% - 32px));text-align:center}
#lockhint[hidden]{display:none}
/* Server-Update: Hinweis über allem (Lobby und Spiel), nach 15 s lädt die Seite neu */
#updNote{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:calc(100% - 32px);box-sizing:border-box;background:var(--tile);border:1px solid var(--butter);border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.45)}
#updNote[hidden]{display:none}
#updNote b{color:var(--butter);text-transform:uppercase;letter-spacing:.14em;font-size:12px}
#updNote span{flex:1;min-width:200px}
.cond{font-stretch:66%;font-variation-settings:"wdth" 66;font-weight:800;text-transform:uppercase;line-height:.9}
.logo{display:block;aspect-ratio:1220/250;background:var(--peach);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--peach);outline-offset:3px}

/* ---------- Overlays ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;padding-inline:clamp(16px,6vw,96px);padding-block:16px;background:linear-gradient(90deg,var(--scrim),transparent 70%)}
.screen[hidden]{display:none!important}
.card{width:min(440px,100%);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:16px;max-height:100%;overflow:auto;box-sizing:border-box}
.card.wide{width:min(600px,100%)}
.eyebrow{margin:0;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--peach);font-weight:500}
.title{margin:0;font-size:clamp(52px,8vw,84px);letter-spacing:-.01em;text-wrap:balance}
.title span{color:var(--soft)}
.h3{margin:4px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);font-weight:600}
.rows{display:flex;flex-direction:column;border-top:1px solid var(--faint)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;border-bottom:1px solid var(--faint)}
.row>span{font-size:13px;color:var(--soft);font-weight:500}
.row input:not([type]){background:transparent;border:0;color:var(--text);font:inherit;font-weight:800;font-size:18px;text-transform:uppercase;text-align:right;font-stretch:72%;font-variation-settings:"wdth" 72;min-width:0;width:60%;padding:8px 0}
.row input::placeholder{color:var(--soft)}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pills button{border:1px solid rgba(246,179,135,.45);background:transparent;border-radius:999px;padding:6px 13px;font-weight:600;font-size:13px;transition:background .35s var(--ease),color .35s var(--ease)}
.pills button.on{background:var(--peach);color:var(--ink);border-color:var(--peach)}
.cta{border:0;border-radius:999px;background:var(--peach);color:var(--ink);font-weight:800;font-size:22px;padding:15px 22px;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;font-stretch:70%;font-variation-settings:"wdth" 70;transition:background .35s var(--ease)}
.cta:hover{background:var(--butter)}
.cta.ghost{background:transparent;color:var(--text);border:1px solid var(--faint)}
.cta.ghost:hover{background:var(--tile-2)}
.cta.small{font-size:16px;padding:11px 18px}
.note{margin:0;font-size:13px;color:var(--soft);line-height:1.45}
.note.warn{color:var(--butter)}
.note[hidden]{display:none}
.verline{margin-top:auto;color:var(--soft);font-variant-numeric:tabular-nums}
.slider{display:flex;align-items:center;gap:10px;width:55%}
.slider input{width:100%;accent-color:var(--peach)}
.slider output{font-weight:700;font-size:13px;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.btns{display:flex;flex-direction:column;gap:8px}
/* Lobby: links Figur und Name, rechts Spielen (Reiter Multiplayer / Solo) – schmal untereinander */
#lobby{overflow:auto}
.lobbygrid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,780px);gap:16px;align-items:start;max-height:100%;width:100%}
.lobbygrid>.card{max-height:calc(100vh - 32px);width:100%}
.lobbyplay{gap:14px}
/* Breit: die Karte passt in die Fensterhöhe. Wird es eng, schrumpfen nur „Laufende Runden“ und „In der Lobby“
   und scrollen in ihrem eigenen Kasten – Karte, Modus und Startknopf bleiben immer sichtbar. */
@media (min-width:981px){
  .lobbyplay>*,.mp>*,.mpnew>*{flex-shrink:0}
  .lobbyplay>.mp,.mp>.mpnew{flex-shrink:1;min-height:0}
  .mp>.games{flex-shrink:1;min-height:120px;overflow:auto;padding-bottom:18px;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
  .mpnew>div:first-child{flex-shrink:1;min-height:0;display:flex;flex-direction:column}
  .mplist{min-height:28px;max-height:60px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
}
@media (max-width:980px){
  #lobby{align-items:flex-start}
  .lobbygrid{grid-template-columns:minmax(0,560px);max-height:none}
  .lobbygrid>.card{max-height:none;overflow:visible}
}
@media (max-height:820px) and (min-width:981px){
  .lobbyme .title{font-size:clamp(44px,6vw,64px)}
  .lobbyme .skin canvas{height:150px}
}
.tabs{display:flex;gap:6px;background:var(--tile);border-radius:999px;padding:4px}
.tabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:9px 14px;font-weight:800;font-size:16px;text-transform:uppercase;font-stretch:72%;font-variation-settings:"wdth" 72;color:var(--soft);display:flex;align-items:center;justify-content:center;gap:8px;transition:background .3s var(--ease),color .3s var(--ease)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{background:var(--peach);color:var(--ink)}
.tabs button[aria-selected="true"] .mpdot{box-shadow:0 0 0 2px var(--ink)}
.mp,.solo,.mpnew{display:flex;flex-direction:column;gap:14px}
.mp[hidden],.solo[hidden],.mpnew[hidden],.games[hidden]{display:none}
.mp .h3,.solo .h3{margin:0 0 8px}
/* Auswahl-Kacheln für Karte und Modus */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.pick{text-align:left;background:var(--tile);border:1px solid var(--faint);border-radius:16px;padding:10px 13px;display:flex;flex-direction:column;gap:3px;min-width:0;transition:background .3s var(--ease),border-color .3s var(--ease)}
.pick:hover{background:var(--tile-2)}
.pick[aria-pressed="true"]{border-color:var(--peach);background:rgba(246,179,135,.12);box-shadow:inset 0 0 0 1px var(--peach)}
.pick b{font-size:21px}
.pick[aria-pressed="true"] b{color:var(--peach)}
.pick small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--butter);font-weight:600}
.pick span{font-size:12.5px;color:var(--soft);line-height:1.4}
/* Karten: kompakte Kacheln (Bild, Name, Größe) in einer Zeile. Passen sie nicht, wird die Leiste seitlich scrollbar
   (Einrasten je Kachel) statt umzubrechen – Modus und Startknopf bleiben so auch bei vielen Karten sichtbar.
   Die Beschreibung steht nur für die gewählte Karte als Zeile darunter (.pickdesc, UI.markPick). */
.picks.maps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:4px;padding:4px;margin:-4px;scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.maps .pick{scroll-snap-align:start;padding:0 0 9px;gap:2px;overflow:hidden}
.maps .pick img{width:100%;margin:0 0 6px;aspect-ratio:16/9;object-fit:cover;border-radius:15px 15px 0 0}
.maps .pick b,.maps .pick small{padding-inline:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maps .pick b{font-size:19px;line-height:1}
.maps .pick small{font-size:10px}
.maps .pick span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* nur für Screenreader */
.maps .pick{position:relative}
.pickdesc{margin:7px 0 0;min-height:1.45em;text-wrap:pretty}
/* Laufende Runden am Server */
.gamelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* Spieleliste (mehrere Spiele am Server, je Karte und Modus eins) */
.mphead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mphead[hidden],#gbWrap[hidden],#mpBack[hidden],#mpPlayersWrap[hidden],#mpMapWrap[hidden],#mpModeWrap[hidden],#mpFillRow[hidden],#mpRulesRow[hidden]{display:none}
.gblist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:200px;overflow:auto}
.gblist button{width:100%;display:flex;align-items:center;gap:12px;background:var(--tile);border:1px solid var(--faint);border-radius:14px;padding:9px 12px;color:var(--text);text-align:left}
.gblist button:hover{border-color:var(--peach)}
.gblist b{font-size:15px;font-weight:800;text-transform:uppercase;font-stretch:72%;font-variation-settings:"wdth" 72}
.gblist span{flex:1;font-size:12px;color:var(--soft)}
.gblist em{font-style:normal;font-size:11px;font-weight:700;color:var(--ink);background:var(--mint);border-radius:999px;padding:3px 8px}
.gblist em.run{background:var(--peach)} .gblist em.full{background:var(--faint);color:var(--soft)}
.gblist .exp{background:var(--butter)}
.game{background:var(--tile);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.ghead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ghead b{font-size:24px}
.ghead span{font-size:13px;color:var(--soft);font-weight:600;flex:1 1 150px;min-width:0}
.ghead em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);background:var(--soft);border-radius:999px;padding:3px 9px}
.ghead em.open{background:var(--mint)}
.ghead em.done{background:var(--butter)}
.ghead em.exp{background:var(--peach)}
.gstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gstats div{background:var(--tile-2);border-radius:12px;padding:8px 10px;min-width:0}
.gstats b{display:block;font-size:24px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gstats span{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.1em}
.game .tbl{overflow-x:auto;border-radius:10px}
table.rank.mini td{font-size:12.5px;padding:5px 8px}
table.rank.mini th{background:var(--tile)}
table.rank tr.out td{color:var(--soft);font-weight:500}
.mpdot{width:9px;height:9px;border-radius:50%;background:var(--soft);flex:none}
.mpdot.on{background:var(--mint)}
.mpdot.off{background:var(--magenta)}
.mplist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mplist[hidden]{display:none}
.mplist li{background:var(--tile-2);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mplist li.me{color:var(--peach)}
.mplist li small{color:var(--soft);font-weight:500;margin-left:4px}
/* zcon.gg-Verknüpfung unter dem Namen */
/* Versionsauswahl und Kennzeichen abseits des Release (client/channel.js) */
.lobbyme{position:relative}
.chanchip{align-self:flex-start;background:var(--magenta);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:1}
.chanchip[hidden],.verrow[hidden],#chanStats[hidden]{display:none}
.lobbyme>.chanchip{position:absolute;top:22px;right:22px}
.hud-tl .chanchip{position:absolute;left:132px;top:4px}
.hud-tl .expchip{position:absolute;left:132px;top:26px}
.verrow .pills button{font-size:12px;padding:6px 11px}
.verrow .pills button:disabled{opacity:.45;cursor:default}
#chanNote a{color:var(--peach);font-weight:600}
.zconrow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:-6px}
.zconrow[hidden],.linkbtn[hidden]{display:none}
/* Spielregeln: Kurzfassung in der Lobby, Formular wie die Einstellungen (#rules nutzt setcard/setpanel) */
.rulesrow{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-height:30px}
.rulesrow .h3{margin:0}
.rulesum{font-size:13px;color:var(--soft);flex:1;min-width:0}
.expchip{background:var(--butter);color:var(--ink);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.expchip[hidden]{display:none}
#rules{padding-block:clamp(12px,3vh,32px);background:linear-gradient(90deg,var(--scrim),rgba(12,9,10,.3))}
#rules .setscroll>.note{margin-bottom:12px}
#rules .row.changed>span{color:var(--butter)}
#rules button:disabled,#rules input:disabled{opacity:.5;cursor:default}
/* Spielleitung (F8): wie die Einstellungen; je Regel „jetzt“ (live) und „nächste“ Runde */
#admin{padding-block:clamp(12px,3vh,32px);background:linear-gradient(90deg,var(--scrim),rgba(12,9,10,.45));z-index:20}
#admin button:disabled{opacity:.45;cursor:default}
/* Feedback (F2): kleines Fenster über allem, Hinweise in Lobby, Pause und HUD */
#feedback{background:rgba(12,9,10,.55);z-index:25}
.fbcard{width:min(560px,100%);display:flex;flex-direction:column;gap:14px}
.fbcard .pills{justify-content:flex-start}
#fbText{width:100%;min-height:140px;resize:vertical;font:inherit;font-size:14px;line-height:1.45;color:inherit;background:rgba(255,255,255,.06);border:1px solid rgba(246,179,135,.35);border-radius:10px;padding:10px 12px}
#fbText:focus{outline:none;border-color:var(--peach)}
.fbmeta{display:flex;justify-content:space-between;gap:12px}.fbmeta .note.small{margin-top:0}
#fbCount{flex:none;font-variant-numeric:tabular-nums}
#feedback button:disabled{opacity:.45;cursor:default}
#fbMsg.good{color:var(--mint)}
kbd.fbkey{font:inherit;font-weight:700;font-size:.92em;padding:1px 6px;border:1px solid rgba(246,179,135,.5);border-radius:5px;color:var(--peach)}
.fbnote .linkbtn{margin-left:4px}
.hud-tl .hudfb{font-size:10px;color:var(--soft);opacity:.75;padding-left:2px}
.hud-tl .hudfb[hidden]{display:none}
.admlogin{display:flex;flex-direction:column;gap:8px;max-width:520px}
.admlogin[hidden],#admBody[hidden]{display:none}
.admlogin label{font-size:13px;color:var(--soft)}
.admlogin div{display:flex;gap:8px}
.admlogin input{flex:1;min-width:0;background:var(--tile);border:1px solid var(--faint);border-radius:12px;color:var(--text);font:inherit;padding:10px 12px}
#admBody>.note{margin-bottom:12px}
.admrule{align-items:flex-start;padding-block:6px}
.admrule.changed>span{color:var(--butter)}
.admcell{display:flex;flex-direction:column;gap:4px;align-items:flex-end;width:62%}
.admline{display:flex;align-items:center;gap:8px;justify-content:flex-end;width:100%}
.admline small{font-size:11px;color:var(--soft);min-width:46px;text-align:right}
.admline .slider{width:100%}
.admline b{font-size:13px;font-weight:600}
.admlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.admlist li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--faint);padding-bottom:6px}
.zconrow.on .note{color:var(--mint)}
.linkbtn{flex:none;background:none;border:0;padding:0;color:var(--peach);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--butter)}
/* Firefox-Hinweis: kleine Karte unten rechts in der Lobby */
.ffhint{position:fixed;right:16px;bottom:16px;width:min(340px,calc(100% - 32px));box-sizing:border-box;background:var(--tile);border:1px solid rgba(239,232,166,.4);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:5}
.ffhint[hidden]{display:none}
.ffhint .h3{margin:0;color:var(--butter)}
.ffhint .cta{align-self:flex-end;gap:12px}
/* Hinweis für Mobilgeräte (client/mobile.js): wie der Firefox-Tipp, mit aufklappbarer Liste je Browser */
.mobhint{width:min(420px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;z-index:50}
.mobhint details{border-top:1px solid var(--faint);padding:8px 0 4px}
.mobhint summary{cursor:pointer;font-weight:600;font-size:14px}
.mobhint ul{margin:6px 0 2px;padding-left:18px;font-size:13px;line-height:1.45;color:var(--soft)}
#padState{color:var(--soft);font-size:13px;text-align:right}
/* Bildschirm-Controller (client/touchpad.js): unsichtbare Hälften für Stick und Blick, Tastenfeld unten rechts über dem Waffen-Kasten */
#touch{position:fixed;inset:0;z-index:40;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#touch[hidden],#tpPause[hidden]{display:none}
.tpzone{position:absolute;top:0;bottom:0;width:50%}
#tpLeft{left:0} #tpRight{right:0}
#tpStick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(142px,calc(env(safe-area-inset-bottom) + 130px));width:112px;height:112px;border-radius:50%;border:2px solid rgba(241,228,218,.35);background:rgba(25,21,22,.22);pointer-events:none;opacity:.55}
#tpStick.on{opacity:1}
body.tpc #tpStick{bottom:max(114px,calc(env(safe-area-inset-bottom) + 102px))}
#tpStick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;border-radius:50%;background:rgba(241,228,218,.5)}
#tpBtns{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(172px,calc(env(safe-area-inset-bottom) + 160px));display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:6px}
#tpBtns button,#tpPause{border-radius:50%;border:2px solid rgba(241,228,218,.4);background:rgba(25,21,22,.5);color:#f4ece6;text-shadow:0 1px 2px rgba(0,0,0,.6);font:700 11px/1 Archivo,sans-serif;letter-spacing:.02em;padding:0;touch-action:none}
#tpBtns button.fire{grid-row:2 / span 2 !important;border-radius:26px;background:rgba(226,88,158,.4)}
#tpBtns button.on,#tpPause.on{background:rgba(241,160,122,.7);color:#1a1222}
#tpPause{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;font-size:14px}
#tpTurn{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);background:rgba(25,21,22,.78);border-radius:18px;padding:14px 20px;display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700;color:#f4ece6;pointer-events:none;white-space:nowrap}
#tpTurn[hidden]{display:none}
#tpTurn b{font-size:30px;line-height:1}
/* Handy quer (body.tpc, TouchPad.update): Tastenfeld kleiner und unter der Pause-Taste statt über dem Waffen-Kasten, HUD unten verkleinert */
body.tpc #tpBtns{bottom:auto;top:calc(max(14px,env(safe-area-inset-top)) + 52px);grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:5px}
body.tpc #tpBtns button.fire{border-radius:22px}
body.tpc #hud .hud-br{transform:scale(.75);transform-origin:100% 100%}
body.tpc #hud .hud-bl{transform:scale(.75);transform-origin:0 100%}
@media (max-height:330px){ body.tpc #tpBtns{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:4px} body.tpc #tpBtns button{font-size:9.5px} body.tpc #tpBtns button.fire{border-radius:20px} }
#name[readonly]{color:var(--mint)}
.cta[hidden]{display:none}
.cta:disabled{opacity:.45;cursor:default}
.cta:disabled:hover{background:var(--peach)}
.big{font-size:clamp(90px,15vw,150px);margin:0}
.big small{font-size:.32em;color:var(--soft)}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.endcard{width:min(780px,100%)}
.endcard .big{font-size:clamp(56px,9vw,104px)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pod{background:var(--tile-2);border-radius:16px;padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:2px}
.pod b{font-size:13px;letter-spacing:.14em;color:var(--soft)}
.pod strong{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod span{font-size:12px;color:var(--soft)}
.pod.p1{background:rgba(246,179,135,.16);box-shadow:inset 0 0 0 1px var(--peach)}
.pod.p1 b{color:var(--peach)}
.pod.me strong{color:var(--peach)}
.awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.aw{background:var(--tile-2);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.aw em{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--butter);font-weight:700}
.aw strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw strong.me{color:var(--peach)}
.aw span{font-size:13px;font-weight:600}
.aw small{font-size:10.5px;color:var(--soft);line-height:1.35}
.stats6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.stats6 div{background:var(--tile-2);border-radius:14px;padding:10px 12px;min-width:0}
.stats6 b{display:block;font-size:24px;white-space:nowrap}
.stats6 span{font-size:11px;color:var(--soft)}
@media (max-width:640px){ .stats6{grid-template-columns:repeat(3,1fr)} .podium{grid-template-columns:1fr} .gstats{grid-template-columns:repeat(2,1fr)} }
.fullboard summary{cursor:pointer;list-style:none;border:1px solid rgba(246,179,135,.45);border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;display:inline-flex;gap:6px}
.fullboard summary::-webkit-details-marker{display:none}
.fullboard[open] summary{background:var(--peach);color:var(--ink)}
.fullboard .tbl{max-height:min(46vh,520px);overflow:auto;margin-top:10px;border-radius:12px}
.note.small{font-size:11px;margin-top:8px}
table.rank{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.rank th{position:sticky;top:0;background:var(--tile);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:500;text-align:right;padding:6px 8px;border-bottom:1px solid var(--faint);white-space:nowrap}
table.rank td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--faint);font-size:13px;font-weight:600;white-space:nowrap}
table.rank th:nth-child(2),table.rank td:nth-child(2){text-align:left;max-width:180px;overflow:hidden;text-overflow:ellipsis}
table.rank td small{color:var(--soft);font-weight:500;font-size:10px;margin-left:5px;letter-spacing:.1em;text-transform:uppercase}
table.rank tr.me td{color:var(--peach)}
table.rank tr.top td:first-child{color:var(--butter)}
.stats3 div{background:var(--tile-2);border-radius:16px;padding:12px;min-width:0}
.stats3 b{display:block;font-size:32px}
.stats3 span{font-size:12px;color:var(--soft)}
/* Einstellungen: volle Breite, Kopf mit Knöpfen steht, Themen-Kacheln fließen in Spalten (je ≥ 330 px) */
#settings{padding-block:clamp(12px,3vh,32px);background:linear-gradient(90deg,var(--scrim),rgba(12,9,10,.3))}
.setcard{width:100%;max-width:1800px;padding:0;gap:0;overflow:hidden}
.sethead{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:20px 24px 16px;border-bottom:1px solid var(--faint)}
.sethead .title{font-size:clamp(40px,5.5vw,64px)}
.setbtns{display:flex;gap:8px;flex-wrap:wrap}
.setbtns .cta{gap:14px}
.setbtns #setDone{min-width:150px}
.setscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 24px 24px}
.setcols{columns:330px;column-gap:16px}
#keyRows{display:contents}
.setpanel{break-inside:avoid;background:var(--tile);border-radius:18px;padding:12px 14px 6px;margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.setpanel .h3{margin:0}
.setpanel .rows{border-top:0}
.setpanel .row{min-height:42px}
.setpanel .row:last-child{border-bottom:0}
.setpanel .note{font-size:12px}
.setpanel .note:last-child{margin-bottom:8px}
.setpanel .keybtn{min-width:120px}
.setpanel .slider{width:52%}
.setpanel .xhprev{margin:0}
@media (max-width:640px){
  .sethead{padding:16px 16px 12px} .setscroll{padding:12px 12px 16px}
  .setbtns{width:100%;flex-wrap:nowrap} .setbtns .cta{font-size:14px;padding:10px 14px;gap:8px}
  .setbtns #setReset{flex:1;min-width:0} .setbtns #setDone{min-width:0;flex:none}
}
/* Skin-Auswahl */
.skin{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;background:var(--tile);border-radius:20px;padding:8px}
.skin>div{min-width:0}
.skin canvas{width:100%;height:190px;display:block}
.skin .arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--faint);background:transparent;font-size:18px}
.skin .arrow:hover{background:var(--tile-2)}
.skinname{text-align:center;font-size:24px;margin-top:-4px}
/* Tastenbelegung */
.keybtn{min-width:132px;border:1px solid var(--faint);background:var(--tile);border-radius:10px;padding:7px 12px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;transition:background .3s var(--ease),border-color .3s var(--ease)}
.keybtn:hover{background:var(--tile-2)}
.keybtn.listen{border-color:var(--peach);color:var(--peach)}
.keybtn.unset{border-color:var(--magenta);color:var(--magenta)}
.switch{width:46px;height:26px;border-radius:999px;border:1px solid var(--faint);background:var(--tile);position:relative;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--soft);transition:transform .3s var(--ease),background .3s var(--ease)}
.switch.on{background:var(--peach);border-color:var(--peach)}
.switch.on::after{transform:translateX(20px);background:var(--ink)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;user-select:none}
#hud[hidden]{display:none!important}
.hud-tl{position:absolute;left:24px;top:20px;display:flex;flex-direction:column;gap:6px}
.hud-tl .logo{width:120px}
.hud-tl span{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--soft);font-weight:300;padding-left:2px}
.hudver{position:absolute;left:26px;bottom:4px;font-size:13px;line-height:1;color:var(--soft);opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.7);font-variant-numeric:tabular-nums}   /* unter dem Lebensbalken */
.hudver[hidden]{display:none}
.hud-top{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:var(--glass);border-radius:999px;padding:8px 10px}
.stat{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:2px 8px}
.stat b{font-size:28px;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.12em;margin-top:2px}
.stat.hot b{color:var(--peach)}
.stat.off b{color:var(--soft)}
.stat.last b{color:var(--magenta)}
#feed{position:absolute;right:20px;top:20px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:min(400px,45vw)}
.kf{background:var(--glass);border-radius:12px;padding:7px 12px;font-size:14px;font-weight:600;display:flex;gap:8px;align-items:center;transition:opacity .5s var(--ease),transform .5s var(--ease);max-width:100%}
.kf.me{box-shadow:inset 0 0 0 1px rgba(246,179,135,.6)}
.kf .w{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);border:1px solid var(--faint);border-radius:999px;padding:2px 7px;white-space:nowrap}
.kf .w.hs{color:var(--ink);background:var(--peach);border-color:var(--peach)}
.kf .p{color:var(--peach)}
.kf.out{opacity:0;transform:translateX(12px)}
#banner{position:absolute;top:92px;left:50%;transform:translate(-50%,-14px);opacity:0;background:var(--tile);border-radius:18px;padding:12px 18px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .6s var(--ease),transform .6s var(--ease);max-width:calc(100% - 32px);text-align:center}
#banner.on{opacity:1;transform:translate(-50%,0)}
#banner b{font-size:24px;color:var(--butter)}
#banner span{font-size:13px;color:var(--soft)}
/* Zwirbel-Modus (client/crazy-fx.js): große Ansage, Hinweis außerhalb des Finales */
#banner.zw{padding:18px 30px;background:rgba(40,8,18,.82);box-shadow:0 0 40px rgba(255,90,40,.35)}
#banner.zw b{font-size:clamp(28px,4.4vw,44px);color:#ffb627;letter-spacing:.02em}
#banner.zw span{font-size:15px}
#zwWarn{position:absolute;top:calc(50% - 110px);left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:12px;background:var(--tile);font-size:13px;font-weight:800;color:var(--butter);pointer-events:none;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
#zwWarn.out{color:#fff;background:rgba(200,40,40,.78);animation:zwPulse .8s ease-in-out infinite alternate}
@keyframes zwPulse{from{opacity:.75}to{opacity:1}}
#xhair{position:absolute;left:50%;top:50%;width:0;height:0;transition:opacity .15s var(--ease)}
.xh i,.xh em,.xh b{position:absolute;box-shadow:0 0 0 1px rgba(25,21,22,.55)}
.xh em{border-radius:50%}
.xh b{border-radius:50%;box-sizing:border-box;background:none}
.xh [hidden]{display:none}
.xhprev{flex:none;display:flex;justify-content:center;gap:8px;height:104px;border-radius:14px;background:linear-gradient(135deg,#3a2a48,#5b4166 55%,#8b8396);margin:4px 0 2px;overflow:hidden}
.xhcell{position:relative;flex:1;max-width:180px;display:flex;align-items:center;justify-content:center}
.xhcell .xh{position:relative;width:0;height:0;margin-top:-12px}
.xhcell small{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,228,218,.75)}
.slider output{min-width:44px}
.swatches button{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 2px var(--tile)}
.swatches button.on{border-color:var(--text)}
#hitm{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;transition:opacity .15s var(--ease);color:var(--text)}
#hitm.on{opacity:1;transition:none}
#hitm::before,#hitm::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%);-webkit-mask:radial-gradient(circle,transparent 7px,#000 7.5px);mask:radial-gradient(circle,transparent 7px,#000 7.5px)}
#hitm::after{transform:rotate(90deg)}
#hitm.hs{color:var(--peach)}#hitm.kill{color:var(--magenta)}#hitm.legs{color:var(--soft);transform:scale(.75)}
/* Trefferrichtung: Bögen auf einem Ring um das Fadenkreuz, Abstand passt sich der Bildschirmgröße an */
#dmgind{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;--r:clamp(110px,24vmin,220px)}
#dmgind i{position:absolute;left:0;top:0;width:104px;height:28px;margin:-14px 0 0 -52px;opacity:0;will-change:transform,opacity}
#dmgind i::before{content:"";position:absolute;inset:0;border-top:6px solid #ff4655;border-radius:50% 50% 0 0/100% 100% 0 0;filter:drop-shadow(0 0 5px rgba(255,70,85,.55))}
#dmgflash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 60%,rgba(255,70,85,.55) 100%)}
#cmsg{position:absolute;left:50%;top:58%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
#cmsg[hidden]{display:none}
/* Zuschauen: eigene Anzeigen (Leben, Munition, Fadenkreuz …) ausblenden, unten die beobachtete Figur */
body.spec #hud :is(.hud-bl,.hud-br,#lockhint,#xhair,#rlind,#prompt,#cmsg,#vig,#dmgind,#dmgflash,#hitm,#kconf,#stun,#scope){display:none}
#specbar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:var(--glass);border-radius:20px;padding:10px 12px 10px 18px;display:flex;align-items:center;gap:18px;max-width:calc(100% - 32px)}
#specbar[hidden]{display:none}
#specbar>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.specwho{margin:0;display:flex;align-items:baseline;gap:10px;min-width:0}
.specwho b{font-size:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.specwho span{font-size:14px;color:var(--soft);white-space:nowrap}
#specbar small{font-size:12px;color:var(--soft);white-space:nowrap}
#specbar .cta{flex:none}
@media (max-width:640px){ #specbar small{display:none} }
#cmsg b{font-size:clamp(40px,6vw,64px)}
#cmsg span{font-size:14px;color:var(--soft)}
#kconf{position:absolute;left:50%;top:calc(50% + 34px);transform:translateX(-50%);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--peach);opacity:0;transition:opacity .6s var(--ease);white-space:nowrap}
#kconf.on{opacity:1;transition:none}
#prompt{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);background:var(--glass);border-radius:999px;padding:8px 16px 8px 8px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;max-width:calc(100% - 32px)}
#prompt[hidden]{display:none}
#prompt kbd{font:inherit;font-weight:800;background:var(--peach);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:12px;text-transform:uppercase}
#prompt small{color:var(--soft);font-weight:500}
.hud-bl{position:absolute;left:24px;bottom:22px;background:var(--glass);border-radius:20px;padding:14px 16px;width:min(260px,40vw);display:flex;flex-direction:column;gap:8px}
.hp-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hp-top b{font-size:46px;font-variant-numeric:tabular-nums}
.hp-top span{font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-bar{height:8px;background:var(--tile-2);border-radius:999px;overflow:hidden}
.hp-bar i{display:block;height:100%;width:100%;background:var(--mint);border-radius:999px;transition:width .3s var(--ease),background .3s var(--ease)}
.hp-bar i.low{background:var(--magenta)}
.ar-row{display:flex;align-items:center;gap:10px;margin-top:-2px}
.ar-row[hidden]{display:none}
.ar-bar{flex:1;height:6px;background:var(--tile-2);border-radius:999px;overflow:hidden}
.ar-bar i{display:block;height:100%;width:0;background:var(--cyan);border-radius:999px;transition:width .3s var(--ease)}
.ar-row small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.ar-row b{color:var(--cyan);font-variant-numeric:tabular-nums}
.shield{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.crouchchip{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.crouchchip[hidden]{display:none}
.shield[hidden]{display:none}
.hud-br{position:absolute;right:24px;bottom:22px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ammobox{background:var(--glass);border-radius:20px;padding:12px 18px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:180px}
.ammo{display:flex;align-items:baseline;gap:6px}
.ammo b{font-size:54px;font-variant-numeric:tabular-nums}
.ammo span{font-size:22px;color:var(--soft);font-variant-numeric:tabular-nums}
.ammo b.empty{color:var(--magenta)}
.wname{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--peach);font-weight:600}
.reload{width:100%;height:4px;background:var(--tile-2);border-radius:999px;overflow:hidden}
.reload[hidden]{display:none}
.reload i{display:block;height:100%;width:0;background:var(--butter)}
#slots{display:flex;gap:6px}
.slot{background:var(--glass);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;gap:2px;min-width:62px;border:1px solid transparent}
.slot b{font-size:10px;color:var(--soft);letter-spacing:.1em}
.slot span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.slot.empty span{color:var(--soft);font-weight:400}
.slot.cur{border-color:var(--peach)}
.slot.cur span{color:var(--peach)}
.slot{box-shadow:inset 3px 0 0 var(--wc,transparent)}
.slot.sp:not(.empty){border-color:var(--butter)}
.slot.sp:not(.empty) span{color:var(--butter)}
#stun{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s var(--ease);background:radial-gradient(ellipse at center,transparent 50%,rgba(239,232,166,.22) 82%,rgba(115,216,236,.32) 100%)}
#stun.on{opacity:1}
/* in einer Rauchwolke (Joint): grauer Schleier, Deckkraft setzt Fx.updSmoke */
#smokeOv{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(206,202,194,.82) 0%,rgba(186,190,176,.97) 75%)}
#smokeOv[hidden]{display:none}
#skyflash{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(to bottom,rgba(255,246,214,.9),rgba(255,246,214,.25) 35%,transparent 65%)}
#stun span{position:absolute;left:50%;top:calc(50% + 64px);transform:translateX(-50%);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--butter);white-space:nowrap}
#stun.zap{animation:zap .4s var(--ease)}
@keyframes zap{0%{background-color:rgba(239,232,166,.32)}100%{background-color:transparent}}
#scope.short{background:radial-gradient(circle at center,transparent 0,transparent 41vmin,rgba(115,216,236,.18) 41.6vmin,#0b0809 42.2vmin)}
#scope.short::before{left:50%;top:calc(50% + 2.2vmin);width:2px;height:12vmin;margin-left:-1px;background:rgba(11,8,9,.85)}
#scope.short::after{display:none}
#scope.short i{background:var(--cyan);box-shadow:0 0 0 1px rgba(11,8,9,.7)}
#vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(226,88,158,.55));opacity:0;transition:opacity .4s var(--ease)}
/* Nachlade-/Repetier-Ring: steht im DOM nach #scope und liegt damit auch über dem Zielfernrohr */
#rlind{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;transition:opacity .2s var(--ease);--p:0;--c:var(--butter)}
#rlind.on{opacity:1;transition:none}
#rlind.cd{--c:var(--cyan)}
#rlind i{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*360deg),rgba(241,228,218,.22) 0);-webkit-mask:radial-gradient(circle,transparent 20px,#000 20.5px);mask:radial-gradient(circle,transparent 20px,#000 20.5px);filter:drop-shadow(0 0 1.5px #0b0809)}
#rlind span{position:absolute;left:0;top:-50px;transform:translateX(-50%);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--c);white-space:nowrap;text-shadow:0 0 3px #0b0809,0 0 1px #0b0809}
/* Test-Anzeigen: Achsfarben x grün, y blau, z rot (auch in den Graphen, Werte liest hud.js aus den Variablen) */
#perf{--ax-x:#7fe08e;--ax-y:#6fa8ff;--ax-z:#ff6470;position:absolute;left:24px;top:84px;display:flex;flex-direction:column;gap:4px;background:var(--glass);border-radius:10px;padding:6px 9px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
#perf[hidden],#perf .prow[hidden],#perf canvas[hidden]{display:none}
#perf .prow{display:flex;align-items:center;justify-content:space-between;gap:10px}
#perf canvas{width:120px;height:28px;border-radius:4px;background:rgba(25,21,22,.5)}
#perf #hMoveG{height:40px}
.pmove{display:flex;flex-direction:column;gap:2px}
.pax{display:flex;align-items:baseline}
.pax i{font-style:normal;font-weight:800;margin-left:8px}
.pax i:first-child{margin-left:0}
.pax b{font-weight:700;min-width:5ch;text-align:right;color:var(--text)}
.pax .x,.pax .x+b{color:var(--ax-x)}.pax .y,.pax .y+b{color:var(--ax-y)}.pax .z,.pax .z+b{color:var(--ax-z)}
#scope{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,transparent 36vmin,#0b0809 36.3vmin)}
#scope[hidden]{display:none}
#scope::before{content:"";position:absolute;left:50%;top:50%;width:72vmin;height:1px;margin-left:-36vmin;background:rgba(11,8,9,.9)}
#scope::after{content:"";position:absolute;left:50%;top:50%;height:72vmin;width:1px;margin-top:-36vmin;background:rgba(11,8,9,.9)}
#scope i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--magenta)}
#board{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding-inline:16px;pointer-events:none}
#board[hidden]{display:none!important}
#board .card{width:min(560px,100%)}
#board .tbl{overflow-x:auto}
#board table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#board th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-weight:500;text-align:right;padding:6px 8px;border-bottom:1px solid var(--faint)}
#board th:nth-child(2),#board td:nth-child(2){text-align:left}
#board td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--faint);font-size:14px;font-weight:600}
#board tr.me td{color:var(--peach)}
#board tr.out td{color:var(--soft);font-weight:400}
@media (max-width:720px){
  .hud-tl{display:none}
  #perf{top:auto;bottom:170px}
  .stat{min-width:48px;padding:2px 4px}.stat b{font-size:22px}
  #feed{top:86px}
  #slots{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Statistik: wie die Einstellungen in voller Breite; Runden links, gewählte Runde rechts (schmal: nacheinander) */
#stats{padding-block:clamp(12px,3vh,32px);background:linear-gradient(90deg,var(--scrim),rgba(12,9,10,.3))}
.stbar{flex:none;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid var(--faint)}
.stbar .tabs{flex:0 1 320px}
.stbar .pills[hidden]{display:none}
.stsearch{display:flex;align-items:center;gap:10px;flex:1 1 220px;max-width:420px;background:var(--tile);border-radius:999px;padding:4px 6px 4px 16px}
.stsearch .h3{margin:0}
.stsearch input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font:inherit;font-weight:700;font-size:15px;padding:7px 4px}
.stsearch input::placeholder{color:var(--soft);font-weight:500}
.stbody{display:flex;flex-direction:column;gap:12px}
.stgames{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.stgames[hidden],#stPlayers[hidden],.stdetail[hidden]{display:none}
@media (min-width:1100px){ .stgames{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .stdetail{position:sticky;top:0} .stclose{display:none!important} }
@media (max-width:1099px){ .stgames.open .stlist{display:none} }
.stlist{display:flex;flex-direction:column;gap:10px;min-width:0}
.stgame{width:100%;text-align:left;border:1px solid transparent;color:inherit;transition:background .3s var(--ease),border-color .3s var(--ease)}
.stgame:hover{background:var(--tile-2)}
.stgame.sel{border-color:var(--peach);box-shadow:inset 0 0 0 1px var(--peach)}
.stgame .ghead b{font-size:20px}
.stsub{margin:0;font-size:13px;color:var(--soft);line-height:1.4}
.stsub strong{color:var(--text)}
.stdetail{background:var(--tile);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.stdetail .h3{margin:0}
.stdetail .gstats b{font-size:20px}
.stdetail .tbl{overflow-x:auto;border-radius:10px}
.sthead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.stwin{margin:2px 0 0;font-size:clamp(30px,4vw,44px);overflow-wrap:anywhere}
#stPlayers .tbl{overflow-x:auto;border-radius:12px;background:var(--tile)}
.stptable th{padding:0}
.stsort{width:100%;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;padding:8px;cursor:pointer;white-space:nowrap}
.stsort:hover:not(:disabled){color:var(--text)}
.stsort.on{color:var(--peach)}
.stsort:disabled{cursor:default}
.stname{border:0;background:transparent;padding:0;font-weight:700;color:inherit;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
.stname:hover{color:var(--peach);text-decoration-color:var(--peach)}
@media (max-width:640px){ .stbar{padding:10px 12px} .stbar .tabs{flex:1 1 100%} .stsearch{max-width:none} }
#stats .setcard{height:100%}
.stclose{flex:none;white-space:nowrap}
table.rank.stptable th:nth-child(2),table.rank.stptable td:nth-child(2){text-align:right;max-width:none}
table.rank.stptable th:first-child,table.rank.stptable td:first-child{text-align:left}
.stptable .stsort{text-align:inherit}
.stsearch input:focus-visible{outline:none}
.stsearch:focus-within{box-shadow:inset 0 0 0 2px var(--peach)}
/* ---------- Startseite: Anmeldung mit dem zcon.gg-Konto (client/landing.js), nach dem Vorbild der Startseite von zcon.gg:
   Pixelraster und Körnung über der Spielszene, driftende Linien, Logo, großer Titel, „Enter“ öffnet die Login-Karte ---------- */
#landing{z-index:30;flex-direction:column;align-items:center;justify-content:center;padding:0;overflow:auto;background:rgba(25,21,22,.84);color:var(--peach);text-align:center}
#landing::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(ellipse at 50% 42%,rgba(111,85,104,.16),transparent 52%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,14px 14px,14px 14px}
#landing::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.landhead{position:fixed;top:0;left:0;right:0;z-index:1;display:flex;justify-content:space-between;gap:16px;padding:24px clamp(16px,4vw,56px);color:rgba(246,179,135,.6);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.landhero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;padding:clamp(48px,9vh,80px) 16px 48px;box-sizing:border-box}
.landlogo{width:min(520px,80vw);margin-bottom:clamp(24px,5vh,56px);animation:land-rise 1s var(--ease) both}
.landkick{margin:0;font-size:clamp(13px,1.8vw,18px);font-weight:400;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;animation:land-rise 1s .15s var(--ease) both}
.landtitle{margin:8px 0 0;font-size:clamp(44px,13vw,128px);letter-spacing:.005em;line-height:.95;white-space:nowrap;color:var(--peach);animation:land-rise 1s .25s var(--ease) both}
.landtitle span{color:rgba(246,179,135,.55)}
.landdays{margin:28px 0 0;color:rgba(246,179,135,.6);font-size:13px;letter-spacing:.28em;text-transform:uppercase;animation:land-rise 1s .3s var(--ease) both}
.landstatus{margin:40px 0 0;min-height:1.5em;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,179,135,.75);animation:land-rise 1s .4s var(--ease) both}
.landstatus[hidden],.landentry[hidden]{display:none}
.landentry{width:min(100%,512px);margin-top:40px;animation:land-rise 1s .4s var(--ease) both}
.landentry>summary{display:inline-flex;align-items:center;justify-content:center;min-width:160px;min-height:56px;padding:12px 32px;border:1px solid rgba(246,179,135,.72);border-radius:999px;color:var(--peach);cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.24em;list-style:none;text-transform:uppercase;box-sizing:border-box;transition:color .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)}
.landentry>summary::-webkit-details-marker{display:none}
.landentry>summary:hover,.landentry>summary:focus-visible{color:var(--ink);background:var(--peach);box-shadow:0 0 32px rgba(246,179,135,.28);outline:none}
.landentry[open]>summary{display:none}
.landlogin{width:100%;padding:28px;border:1px solid rgba(246,179,135,.45);border-radius:24px;background:linear-gradient(145deg,rgba(47,39,40,.96),rgba(25,21,22,.96));box-shadow:0 24px 80px rgba(0,0,0,.36),inset 0 1px rgba(246,179,135,.12);text-align:left;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;color:var(--text);animation:land-reveal .4s var(--ease) both}
.landlogin h2{margin:0;font-size:30px;color:var(--peach)}
.landlogin .cta{width:100%;box-sizing:border-box}
.landlogin .note a{color:var(--peach);font-weight:600}
@keyframes land-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes land-reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Linien wie auf zcon.gg: 28 Elemente, Lage je nth-child, langsames Driften und Flackern */
.deco{position:fixed;inset:0;z-index:0;pointer-events:none}
.deco i{--dd:60px;--dt:14s;--dl:0s;position:absolute;display:block;animation:deco-flicker 6s var(--ease) infinite,deco-x var(--dt) var(--ease) var(--dl) infinite alternate}
.deco .h{height:1px;background:linear-gradient(90deg,transparent,rgba(246,179,135,.45) 20%,var(--peach) 50%,rgba(246,179,135,.45) 80%,transparent)}
.deco .v{width:1px;background:linear-gradient(180deg,transparent,rgba(246,179,135,.45) 20%,var(--peach) 50%,rgba(246,179,135,.45) 80%,transparent);animation-name:deco-flicker,deco-y}
.deco .dh{height:1px;background:repeating-linear-gradient(90deg,rgba(246,179,135,.45) 0 1px,transparent 1px 5px)}
.deco .dv{width:1px;background:repeating-linear-gradient(180deg,rgba(246,179,135,.45) 0 1px,transparent 1px 5px);animation-name:deco-flicker,deco-y}
.deco .dot{width:9px;height:9px;border-radius:50%;background:var(--peach);--dd:18px;animation-name:deco-flicker,deco-y}
.deco i:nth-child(2n){--dd:-70px;--dt:17s} .deco i:nth-child(3n){--dd:90px;--dt:21s;--dl:-6s} .deco i:nth-child(4n){--dd:-45px;--dt:12s;--dl:-3s}
.deco i:nth-child(5n){--dd:110px;--dt:24s;--dl:-9s} .deco i:nth-child(7n){--dd:-80px;--dt:19s;--dl:-12s}
@keyframes deco-flicker{0%,100%{opacity:.9}50%{opacity:.35}}
@keyframes deco-x{from{translate:0 0}to{translate:var(--dd) 0}}
@keyframes deco-y{from{translate:0 0}to{translate:0 var(--dd)}}
.deco i:nth-child(1){left:2.6%;top:4%;height:16%} .deco i:nth-child(2){left:6.2%;top:7%;height:9%} .deco i:nth-child(3){left:17%;top:8%;width:8%}
.deco i:nth-child(4){left:25%;top:23.5%;width:3.4%} .deco i:nth-child(5){left:38.8%;top:8%;height:14%} .deco i:nth-child(6){left:50%;top:7%;width:4%}
.deco i:nth-child(7){left:53.4%;top:3%;height:8%} .deco i:nth-child(8){left:70%;top:12.7%;width:8%} .deco i:nth-child(9){left:59%;top:23.5%;width:19%}
.deco i:nth-child(10){left:4.3%;top:29%;height:8%} .deco i:nth-child(11){left:11%;top:53%;width:1.5%} .deco i:nth-child(12){right:6%;top:32%;height:16%}
.deco i:nth-child(13){right:12%;top:48.4%;width:8%} .deco i:nth-child(14){left:2.6%;top:68%;height:9%} .deco i:nth-child(15){left:22%;top:69.2%;width:8%}
.deco i:nth-child(16){right:25%;top:67.8%;width:4%} .deco i:nth-child(17){right:9%;top:63%;height:8%} .deco i:nth-child(18){right:9%;top:71%;height:14%}
.deco i:nth-child(19){right:29%;top:84.5%;width:4%} .deco i:nth-child(20){right:30.3%;top:81%;height:7.5%} .deco i:nth-child(21){left:51%;top:85.5%;width:8%}
.deco i:nth-child(22){left:48%;top:89.2%;width:3.2%} .deco i:nth-child(23){left:19%;top:92.8%;width:13%} .deco i:nth-child(24){right:18%;top:94.8%;width:8%}
.deco i:nth-child(25){left:4.6%;top:94%} .deco i:nth-child(26){right:15%;top:91%;width:3.4%} .deco i:nth-child(27){right:14.3%;top:90.6%;width:7px;height:7px}
.deco i:nth-child(28){right:13.4%;top:90.6%;width:7px;height:7px}
@media (max-width:600px){ .landtitle{white-space:normal} .landlogin{padding:20px} }