/* 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}
.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}
.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}
.mp,.solo{display:flex;flex-direction:column;gap:10px}
.mp{background:var(--tile);border-radius:20px;padding:14px}
.mphead{display:flex;align-items:center;justify-content:space-between}
.mphead .h3{margin:0}
.mpdot{width:9px;height:9px;border-radius:50%;background:var(--soft)}
.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}
.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} }
.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)}
/* 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}
.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)}
#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)}
#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}
#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)}
.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}
#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)}
#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}
  .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}}