/* Neon-Arcade: the look of the start page (sign-in, arcade, shared header, start menu).
   Every rule is scoped to body[data-ansicht=halle]. The room view (data-ansicht=spiel) keeps its own frame. */

/* Fonts are bundled under /schrift (SIL Open Font License 1.1, from the Fontsource npm packages). */
@font-face{font-family:"Monoton";font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/monoton-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Monoton";font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/monoton-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/press-start-2p-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/press-start-2p-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/chakra-petch-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/chakra-petch-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(/schrift/chakra-petch-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(/schrift/chakra-petch-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(/schrift/chakra-petch-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(/schrift/chakra-petch-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(/schrift/nunito-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(/schrift/nunito-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* All colours and families of the neon look in one place. */
:root{
  --neon-grund:#0c0614;--neon-wand:#170b22;--neon-tafel:#07030c;--neon-kasten:#1c1029;--neon-kasten2:#120a1d;--neon-linie:#2d1b3f;
  --neon-pink:#ff3ea5;--neon-pink-knopf:#d81b7a;--neon-cyan:#2cf1ff;--neon-gelb:#ffe53b;--neon-gruen:#46ff8a;--neon-rot:#ff5a4f;--neon-violett:#9b5cff;
  --neon-gold:#f5a81c;--neon-text:#f6f0ff;--neon-leise:#c3b4dc;--neon-aus:#a898c2;
  --neon-pixel:"Press Start 2P",ui-monospace,"Courier New",monospace;
  --neon-titel:"Monoton","Press Start 2P",Impact,sans-serif;
  --neon-rund:"Nunito","Arial Rounded MT Bold",system-ui,sans-serif;
  --neon-schrift:"Chakra Petch","Segoe UI",system-ui,-apple-system,sans-serif;
  --neon-rand:clamp(14px,3vw,40px);
}

/* Ground and wall */
body[data-ansicht=halle]:has(#main){background:var(--neon-grund);color:var(--neon-text);overflow-x:clip}
body[data-ansicht=halle]:has(#main:is([data-screen=lobby],[data-screen=login])){
  background:
    linear-gradient(transparent 0 23px,rgba(0,0,0,.55) 23px 25px) 0 0/100% 25px,
    conic-gradient(at 58px 25px,rgba(0,0,0,.55) 0 25%,transparent 0) 0 0/60px 50px,
    conic-gradient(at 58px 25px,rgba(0,0,0,.55) 0 25%,transparent 0) 30px 25px/60px 50px,
    linear-gradient(180deg,#1f0f29,#140a1e 640px,var(--neon-grund) 1100px) 0 0/100% 1100px no-repeat,
    var(--neon-grund)
}
body[data-ansicht=halle] :is(header,#main:not([data-screen=admin]),#start-menu) :focus-visible{outline:none}
body[data-ansicht=halle] :is(header,#main:not([data-screen=admin]),#start-menu) :is(button,a,summary,select,input):focus-visible{filter:brightness(1.35) saturate(1.2)}

/* Score display: one grid, the existing wrappers dissolve into it */
body[data-ansicht=halle]>header{
  position:relative;z-index:3;display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto auto auto auto;align-items:center;
  background:transparent;border:0;box-shadow:none;color:var(--neon-text);font-family:var(--neon-schrift)
}
body[data-ansicht=halle]>header::before{content:"";grid-area:1/1/3/-1;background:var(--neon-tafel);border-bottom:2px solid #2a1838}
body[data-ansicht=halle]>header :is(.mast,nav,#identity){display:contents}
body[data-ansicht=halle]>header .brand{
  grid-area:1/1;display:inline-flex;align-items:center;min-height:32px;margin:10px 20px 10px var(--neon-rand);padding:0;
  font:11px/1.6 var(--neon-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan);text-decoration:none
}
body[data-ansicht=halle]>header .einsup{grid-area:1/2;margin:10px 14px 10px 0;font:11px/1.6 var(--neon-pixel);letter-spacing:.04em;text-transform:uppercase;color:var(--neon-text)}
body[data-ansicht=halle]>header .einsup b{font-weight:400;color:var(--neon-pink);text-shadow:0 0 8px var(--neon-pink)}
body[data-ansicht=halle]>header #connection{grid-area:1/3;display:inline-flex;align-items:center;gap:7px;margin:10px 18px 10px 0;font:600 13px/1 var(--neon-schrift);color:var(--neon-gruen)}
body[data-ansicht=halle]>header #connection::before{content:"";display:inline-block;width:9px;height:9px;margin:0;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor,0 0 14px currentColor}
body[data-ansicht=halle]>header #connection[data-verbunden=false]{color:var(--neon-gelb)}
body[data-ansicht=halle]>header .zaehler{grid-area:1/4;justify-self:center;display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 18px;font:11px/1.6 var(--neon-pixel);letter-spacing:.04em;text-transform:uppercase;color:var(--neon-text)}
body[data-ansicht=halle]>header .zaehler b{font-weight:400;color:var(--neon-gelb);text-shadow:0 0 8px var(--neon-gelb)}
body[data-ansicht=halle]>header #sound{grid-area:1/5;margin:6px 16px 6px 0;gap:8px;color:var(--neon-leise)}
body[data-ansicht=halle]>header #sound input{width:clamp(56px,5vw,84px);height:32px;accent-color:var(--neon-cyan)}
body[data-ansicht=halle]>header .test-windows{grid-area:1/6;margin:6px 16px 6px 0;font:500 12px/1 var(--neon-schrift)}
body[data-ansicht=halle]>header [data-pair]{grid-area:1/7;margin:6px 16px 6px 0}
body[data-ansicht=halle]>header [data-logout]{grid-area:1/8;margin:6px var(--neon-rand) 6px 0}
body[data-ansicht=halle]>header :is([data-pair],[data-logout]),body[data-ansicht=halle]>header .test-windows summary{
  display:inline-flex;align-items:center;min-height:32px;padding:0 2px;border:0;border-radius:0;background:transparent;
  font:500 12px/1 var(--neon-schrift);color:var(--neon-leise);text-decoration:underline;text-underline-offset:3px;cursor:pointer
}
body[data-ansicht=halle]>header :is([data-pair],[data-logout]):hover:enabled,body[data-ansicht=halle]>header .test-windows summary:hover{background:transparent;color:var(--neon-text)}
body[data-ansicht=halle]>header .window-links{background:var(--neon-kasten2);border:2px solid var(--neon-linie);box-shadow:0 10px 30px #000a;color:var(--neon-text)}
body[data-ansicht=halle]>header .window-links a{color:var(--neon-cyan);font-weight:600}

/* Arcade toggle switches: the effects switch in the header and both switches in the start menu */
body[data-ansicht=halle] :is(header #sound button,#start-menu .menu-setting button){
  display:inline-flex;align-items:center;gap:8px;min-height:32px;margin:0;padding:0 4px;border:0;border-radius:6px;background:transparent;
  font:600 13px/1 var(--neon-schrift);color:var(--neon-leise);white-space:nowrap;box-shadow:none
}
body[data-ansicht=halle] :is(header #sound button,#start-menu .menu-setting button)::before{
  content:"";flex:none;width:30px;height:18px;border-radius:4px;border:1px solid #4a3561;box-shadow:inset 0 2px 4px #000;
  background:linear-gradient(#8a7aa0,#4d3f62) 3px 2px/10px 12px no-repeat,#241634
}
body[data-ansicht=halle] :is(header #sound button,#start-menu .menu-setting button)[aria-pressed=true]{color:var(--neon-text)}
body[data-ansicht=halle] :is(header #sound button,#start-menu .menu-setting button)[aria-pressed=true]::before{
  border-color:var(--neon-cyan);box-shadow:inset 0 2px 4px #000,0 0 8px rgba(44,241,255,.5);
  background:linear-gradient(#bffcff,var(--neon-cyan)) 15px 2px/10px 12px no-repeat,#241634
}
body[data-ansicht=halle] :is(header #sound button,#start-menu .menu-setting button):hover:enabled{background:transparent;color:var(--neon-text);border-color:transparent}

/* Marquee */
body[data-ansicht=halle]>header .lauftext{grid-area:2/1/3/-1;overflow:hidden;margin:0;padding:8px var(--neon-rand) 9px;border-top:1px dashed #2f1c40}
body[data-ansicht=halle]>header .lauftext p{margin:0;font:10px/1.7 var(--neon-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--neon-gelb);text-shadow:0 0 6px rgba(255,229,59,.6)}
body[data-ansicht=halle]>header .lauf-marke{color:var(--neon-text);text-shadow:0 0 6px rgba(255,255,255,.6)}
body[data-ansicht=halle]>header .lauf-marke i{font-style:normal;color:var(--neon-gold);text-shadow:0 0 8px var(--neon-gold)}
body[data-ansicht=halle]>header :is(.lauf-doppel,.lauf-trenner){display:none}

/* Navigation as illuminated signs */
body[data-ansicht=halle]>header .tabs{grid-area:3/1/4/-1;display:flex;flex-wrap:wrap;gap:12px 14px;padding:22px var(--neon-rand) 2px}
body[data-ansicht=halle]>header .tabs button,body[data-ansicht=halle]>header .tabs button:first-child{
  min-height:44px;padding:11px 18px;border:2px solid #3b2a4b;border-radius:10px;background:rgba(10,4,16,.72);
  font:700 14px/1.15 var(--neon-schrift);letter-spacing:.12em;text-transform:uppercase;color:var(--neon-aus);text-align:center
}
body[data-ansicht=halle]>header .tabs [data-menu]{order:9}
body[data-ansicht=halle]>header .tabs button:hover:enabled{background:rgba(10,4,16,.72);color:var(--neon-text);border-color:#5d4675}
body[data-ansicht=halle]>header .tabs button[aria-current=page],body[data-ansicht=halle]>header .tabs button[aria-current=page]:hover:enabled{
  color:#ffe9f6;border-color:var(--neon-pink);
  text-shadow:0 0 4px #fff,0 0 10px var(--neon-pink),0 0 22px var(--neon-pink);
  box-shadow:0 0 10px var(--neon-pink),0 0 26px rgba(255,62,165,.45),inset 0 0 12px rgba(255,62,165,.4)
}

/* Opening on the wall */
body[data-ansicht=halle] #main:is([data-screen=lobby],[data-screen=login]){width:100%;max-width:none;margin:0;padding:0;color:var(--neon-text);font-family:var(--neon-schrift)}
body[data-ansicht=halle] #main .intro.auftakt{
  position:relative;display:block;min-height:0;max-width:none;margin:0;padding:clamp(34px,5.4vw,76px) var(--neon-rand) 0;text-align:center;
  background:radial-gradient(ellipse 60% 45% at 50% 38%,rgba(255,62,165,.16),transparent 70%);border-radius:0;box-shadow:none;overflow:visible;isolation:auto
}
body[data-ansicht=halle] #main .intro.auftakt::before{display:none}
body[data-ansicht=halle] #main .intro .neon-titel{
  max-width:none;margin:0;font:400 clamp(30px,8.9vw,128px)/1 var(--neon-titel);letter-spacing:.02em;text-transform:uppercase;color:#ffeefa!important;
  text-shadow:0 0 3px #fff,0 0 10px var(--neon-pink),0 0 24px var(--neon-pink),0 0 48px var(--neon-pink),0 0 90px rgba(255,62,165,.6)
}
body[data-ansicht=halle] #main .intro .titel-klein{display:block;margin-bottom:18px;font:12px/1.4 var(--neon-pixel);letter-spacing:.3em;color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}
body[data-ansicht=halle] #main .intro.auftakt p{max-width:44ch;margin:22px auto 0;font:400 clamp(16px,1.6vw,20px)/1.45 var(--neon-schrift);color:var(--neon-leise)}
body[data-ansicht=halle] #main .intro .start-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:28px}
body[data-ansicht=halle] #main .intro .start-actions .muenze{
  display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:18px 26px;border:0;border-radius:12px;background:var(--neon-gelb);color:#1a0d00;
  font:14px/1.3 var(--neon-pixel);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 6px 0 #b39a00,0 0 22px rgba(255,229,59,.55),0 0 60px rgba(255,229,59,.25)
}
body[data-ansicht=halle] #main .intro .start-actions .muenze::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #6b4a00;background:radial-gradient(circle at 35% 35%,#fff6b0,#e2a400 70%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.3)}
body[data-ansicht=halle] #main .intro .start-actions .muenze:hover:enabled{background:#fff06e;color:#1a0d00}
body[data-ansicht=halle] #main .intro .start-actions .muenze:active{transform:translateY(4px);box-shadow:0 2px 0 #b39a00,0 0 22px rgba(255,229,59,.55)}
body[data-ansicht=halle] #main .intro .start-actions [data-settings]{
  min-height:36px;padding:4px 8px;border:0;border-radius:0;background:transparent;font:600 15px/1.2 var(--neon-schrift);
  color:var(--neon-cyan);text-decoration:underline;text-underline-offset:4px
}
body[data-ansicht=halle] #main .intro .start-actions [data-settings]:hover:enabled{background:transparent;color:#bffcff}

/* Neon sign: Talnovia hangs on the wall, it is not a company logo in the header */
/* The sign hangs on two chains from the rail under the ticker. Chains and plate turn around the rail, so it swings as one piece. */
body[data-ansicht=halle] #main .neonschild{position:absolute;top:2px;right:calc(var(--neon-rand) + 10px);z-index:1;--kette:28px;transform-origin:50% calc(var(--kette) * -1);transform:rotate(-1.6deg)}
/* Without the sign row the plate hangs lower on the sign-in wall; the title moves below it. */
body[data-ansicht=halle] #main[data-screen=login] .neonschild{top:30px;--kette:34px}
body[data-ansicht=halle] #main[data-screen=login] .intro.auftakt{padding-top:clamp(34px,10vw,150px)}
body[data-ansicht=halle] #main .neonschild::before,body[data-ansicht=halle] #main .neonschild::after{content:"";position:absolute;z-index:2;top:calc(var(--kette) * -1);width:4px;height:calc(var(--kette) + 12px);margin-inline:-1px;border-radius:2px;
  background:radial-gradient(circle at 50% 3px,#cfc5dd 0 3px,#0000 3.5px),repeating-linear-gradient(#a99dbb 0 5px,#3d3448 5px 7px);filter:drop-shadow(0 2px 2px #000a)}
body[data-ansicht=halle] #main .neonschild::before{left:22%}
body[data-ansicht=halle] #main .neonschild::after{right:22%}
body[data-ansicht=halle] #main .schild-platte{
  position:relative;padding:22px 30px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(160deg,#2a1838,#0d0716 70%);
  box-shadow:0 18px 34px rgba(0,0,0,.65),0 0 46px rgba(255,62,165,.16),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 5px #0d0716,inset 0 0 0 6.5px rgba(255,62,165,.9),inset 0 0 22px rgba(255,62,165,.4)
}
body[data-ansicht=halle] #main .schild-platte::before,body[data-ansicht=halle] #main .schild-platte::after{content:"";position:absolute;z-index:3;top:8px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9e2f2,#6f6480 70%);box-shadow:0 1px 2px #000}
body[data-ansicht=halle] #main .schild-platte::before{left:calc(22% - 4px)}
body[data-ansicht=halle] #main .schild-platte::after{right:calc(22% - 4px)}
body[data-ansicht=halle] #main .schild-roehre{
  display:block;white-space:nowrap;font:800 clamp(34px,4vw,56px)/1 var(--neon-rund);letter-spacing:.01em;color:#fffaf3;
  text-shadow:0 0 2px #fff,0 0 8px #fff3e0,0 0 18px rgba(255,220,200,.8),0 0 34px rgba(255,180,210,.45)
}
body[data-ansicht=halle] #main .schild-o{display:inline-block;color:var(--neon-gold);text-shadow:0 0 3px #ffe2a8,0 0 10px var(--neon-gold),0 0 24px var(--neon-gold),0 0 40px rgba(245,168,28,.6)}
body[data-ansicht=halle] #main .schild-zeile{display:block;margin-top:8px;font:9px/1 var(--neon-pixel);letter-spacing:.3em;text-transform:uppercase;color:#b8acc8;text-align:center}
body[data-ansicht=halle] #main .schild-kabel{position:absolute;right:18px;bottom:-40px;width:64px;height:42px;border:2px solid #3a3044;border-top:0;border-left:0;border-radius:0 0 30px 0}

/* Perspective floor */
body[data-ansicht=halle] #main .gitterboden{position:relative;height:180px;margin:40px calc(-1 * var(--neon-rand)) 0;perspective:220px;perspective-origin:50% 0;overflow:hidden}
body[data-ansicht=halle] #main .gitterboden::before{
  content:"";position:absolute;left:-80%;right:-80%;top:-46px;height:646px;transform-origin:50% 46px;transform:rotateX(62deg);
  background:repeating-linear-gradient(90deg,rgba(44,241,255,.9) 0 3px,transparent 3px 70px),repeating-linear-gradient(180deg,rgba(255,62,165,.95) 0 3px,transparent 3px 46px),linear-gradient(#1b0a2c,var(--neon-grund))
}
body[data-ansicht=halle] #main .gitterboden::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ff9fd2 0,#ff3ea5 3px,rgba(255,62,165,.25) 10px,rgba(12,6,20,.75) 26px,transparent 55%),linear-gradient(0deg,var(--neon-grund),transparent 30%)}

/* The hall below the wall */
body[data-ansicht=halle] #main .halle{position:relative;background:var(--neon-grund);padding:8px var(--neon-rand) 64px}
body[data-ansicht=halle] #main .halle>*{max-width:1480px;margin-inline:auto}
body[data-ansicht=halle] #main .halle-kopf{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px 24px;margin-bottom:24px}
body[data-ansicht=halle] #main .halle h2{margin:0;font:14px/1.4 var(--neon-pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}
body[data-ansicht=halle] #main .halle-kopf h2 small{display:block;margin-top:8px;font:500 14px/1.3 var(--neon-schrift);letter-spacing:0;text-transform:none;color:var(--neon-leise);text-shadow:none}
body[data-ansicht=halle] #main .shelf-genres{display:flex;flex-wrap:wrap;gap:10px;width:auto;margin:0;padding:0;background:none;border-radius:0}
body[data-ansicht=halle] #main .shelf-genres:has(>:only-child){display:none}
body[data-ansicht=halle] #main .shelf-genres button{
  min-height:40px;padding:10px 16px;border:2px solid #3d2b50;border-radius:999px;background:transparent;box-shadow:none;
  font:700 13px/1 var(--neon-schrift);letter-spacing:.1em;text-transform:uppercase;color:var(--neon-aus)
}
body[data-ansicht=halle] #main .shelf-genres button:hover:enabled{background:transparent;color:var(--neon-text);border-color:#5d4675}
body[data-ansicht=halle] #main .shelf-genres button[aria-pressed=true]{color:#fff;border-color:var(--neon-cyan);background:transparent;text-shadow:0 0 8px var(--neon-cyan);box-shadow:0 0 10px rgba(44,241,255,.6),inset 0 0 10px rgba(44,241,255,.35)}

/* Every game is a cabinet: light box, CRT screen, control panel with its own buttons */
body[data-ansicht=halle] #main .games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}
body[data-ansicht=halle] #main .game-card.automat{
  --farbe:var(--neon-pink);position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:0 10px;overflow:visible;
  border-radius:20px 20px 6px 6px;border:2px solid color-mix(in srgb,var(--farbe) 55%,#1c1029);
  background:linear-gradient(180deg,var(--neon-kasten),var(--neon-kasten2));color:var(--neon-text);font-family:var(--neon-schrift);
  box-shadow:0 0 0 4px #0a0510,0 0 18px color-mix(in srgb,var(--farbe) 25%,transparent),inset 6px 0 0 -2px color-mix(in srgb,var(--farbe) 30%,transparent),inset -6px 0 0 -2px color-mix(in srgb,var(--farbe) 30%,transparent)
}
body[data-ansicht=halle] #main .game-card.automat[data-leuchte=cyan]{--farbe:var(--neon-cyan)}
body[data-ansicht=halle] #main .game-card.automat[data-leuchte=gelb]{--farbe:var(--neon-gelb)}
body[data-ansicht=halle] #main .automat .leuchtkasten{
  display:grid;place-items:center;min-height:58px;margin:10px 0;padding:8px 10px;border-radius:10px;border:2px solid var(--farbe);
  background:radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--farbe) 45%,#12081c),#12081c 75%);
  box-shadow:0 0 10px color-mix(in srgb,var(--farbe) 60%,transparent),inset 0 0 14px color-mix(in srgb,var(--farbe) 40%,transparent)
}
body[data-ansicht=halle] #main .automat .leuchtkasten h3{
  margin:0;font:700 clamp(14px,1.3vw,19px)/1.15 var(--neon-schrift);letter-spacing:.06em;text-transform:uppercase;text-align:center;
  color:#fff;text-shadow:0 0 6px var(--farbe),0 0 14px var(--farbe);text-wrap:balance;overflow-wrap:anywhere
}
body[data-ansicht=halle] #main .automat .cartridge{position:relative;display:block;aspect-ratio:auto;padding:9px;border:0;border-radius:16px;overflow:hidden;background:#050208;box-shadow:inset 0 0 0 2px #2a1d38,0 2px 0 #000}
body[data-ansicht=halle] #main .automat .cartridge img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px/18px;filter:saturate(1.1) contrast(1.05);transform:none;transition:none}
body[data-ansicht=halle] #main .automat .schirm-glas{
  position:absolute;inset:9px;z-index:1;border-radius:14px/18px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse 80% 55% at 30% 8%,rgba(255,255,255,.26),transparent 60%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.55));
  box-shadow:inset 0 0 16px rgba(0,0,0,.8)
}
body[data-ansicht=halle] #main .automat .cartridge-info{
  display:flex;flex:1;flex-direction:column;margin:12px -10px 0;padding:14px 14px 16px;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#2e1d40,#1d1229);border-top:2px solid color-mix(in srgb,var(--farbe) 50%,#2e1d40)
}
body[data-ansicht=halle] #main .automat .card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 10px;margin:0 0 12px;font:9px/1.4 var(--neon-pixel);letter-spacing:.02em;text-transform:uppercase;color:var(--neon-text)}
body[data-ansicht=halle] #main .automat .card-top small{font:inherit;color:var(--neon-gelb)}
body[data-ansicht=halle] #main .automat .card-top .seats{color:var(--neon-text)}
body[data-ansicht=halle] #main .automat .pult-stick{position:relative;flex:none;width:26px;height:30px}
body[data-ansicht=halle] #main .automat .pult-stick::before{content:"";position:absolute;left:11px;top:10px;width:4px;height:16px;border-radius:2px;background:linear-gradient(90deg,#888,#ddd,#777)}
body[data-ansicht=halle] #main .automat .pult-stick::after{content:"";position:absolute;left:3px;top:0;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--farbe) 45%,color-mix(in srgb,var(--farbe) 50%,#000));box-shadow:0 8px 0 -4px #000}
body[data-ansicht=halle] #main .automat .cartridge-info p{flex:1;margin:0 0 16px;font:400 14px/1.45 var(--neon-schrift);color:var(--neon-leise)}
body[data-ansicht=halle] #main .automat footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 10px;margin-top:auto;padding:0;border:0}
body[data-ansicht=halle] #main .automat footer button{
  min-height:46px;margin:0;padding:11px 8px;border:3px solid var(--neon-cyan);border-radius:12px;background:rgba(8,3,14,.6);color:var(--neon-cyan);
  font:700 13px/1.1 var(--neon-schrift);letter-spacing:.05em;text-transform:uppercase;box-shadow:0 5px 0 #0a5f66,0 0 12px rgba(44,241,255,.35)
}
body[data-ansicht=halle] #main .automat footer button.primary{grid-column:1/-1;background:var(--neon-pink-knopf);border-color:#ff8cc8;color:#fff;text-shadow:0 1px 0 #8a0d4f;box-shadow:0 6px 0 #8a0d4f,0 0 22px rgba(255,62,165,.6)}
body[data-ansicht=halle] #main .automat footer button:hover:enabled{background:#0d1f26;color:#bffcff;border-color:var(--neon-cyan)}
body[data-ansicht=halle] #main .automat footer button.primary:hover:enabled{background:#e8318c;color:#fff;border-color:#ff8cc8}
body[data-ansicht=halle] #main .automat footer button:active{transform:translateY(4px);box-shadow:0 1px 0 #0a5f66}
body[data-ansicht=halle] #main .automat footer button.primary:active{box-shadow:0 2px 0 #8a0d4f}
body[data-ansicht=halle] #main .games .automaten-leer{
  grid-column:1/-1;margin:0;padding:34px clamp(16px,3vw,40px);border:2px dashed #3d2b50;border-radius:18px;background:var(--neon-tafel);
  text-align:center;font:600 17px/1.5 var(--neon-schrift);color:var(--neon-leise)
}

/* Boards: players wanted, today's high scores */
body[data-ansicht=halle] #main .tafeln{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:56px}
body[data-ansicht=halle] #main .tafel{
  position:relative;overflow:hidden;margin:0;padding:24px clamp(16px,2.4vw,30px) 26px;border:2px solid var(--neon-linie);border-radius:16px;
  background:var(--neon-tafel);box-shadow:inset 0 0 40px rgba(155,92,255,.12);color:var(--neon-text)
}
body[data-ansicht=halle] #main .tafel::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none}
body[data-ansicht=halle] #main .tafel-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;margin-bottom:18px}
body[data-ansicht=halle] #main [data-rooms] .tafel-kopf h2{color:var(--neon-gruen);text-shadow:0 0 8px var(--neon-gruen)}
body[data-ansicht=halle] #main .tafel-kopf small{font:9px/1.5 var(--neon-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--neon-leise)}
body[data-ansicht=halle] #main .tafel-leer{margin:0;font:400 15px/1.5 var(--neon-schrift);color:var(--neon-leise)}
body[data-ansicht=halle] #main .tafel .roomlist{display:grid;gap:0;max-height:27rem;overflow:auto;margin:0;border:0;border-radius:0;background:transparent;scrollbar-color:#4a3561 transparent}
body[data-ansicht=halle] #main .tafel .room-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;margin:0;padding:14px 0;
  border:0;border-top:1px dashed #3a2850;border-radius:0;background:transparent;box-shadow:none;color:var(--neon-text)
}
body[data-ansicht=halle] #main .tafel .room-row:first-child{border-top:0;padding-top:0}
body[data-ansicht=halle] #main .tafel .room-row strong{display:block;font:700 18px/1.2 var(--neon-schrift);letter-spacing:.05em;text-transform:uppercase;color:var(--neon-text)}
body[data-ansicht=halle] #main .tafel .room-row small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:7px;font:400 14px/1.4 var(--neon-schrift);color:var(--neon-leise)}
body[data-ansicht=halle] #main .raum-status{font:9px/1.4 var(--neon-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--neon-gruen)}
body[data-ansicht=halle] #main .room-row[data-status=playing] .raum-status{color:var(--neon-rot)}
body[data-ansicht=halle] #main .room-row:is([data-status=finished],[data-status=closed]) .raum-status{color:var(--neon-aus)}
body[data-ansicht=halle] #main .raum-plaetze{display:inline-flex;gap:4px}
body[data-ansicht=halle] #main .raum-plaetze span{width:10px;height:10px;border-radius:2px;border:1px solid var(--neon-gruen)}
body[data-ansicht=halle] #main .raum-plaetze .belegt{background:var(--neon-gruen);box-shadow:0 0 6px var(--neon-gruen)}
body[data-ansicht=halle] #main .tafel .room-row button{
  min-height:44px;margin:0;padding:12px 16px;border:2px solid var(--neon-gruen);border-radius:12px;background:transparent;color:var(--neon-gruen);
  font:700 14px/1 var(--neon-schrift);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 0 #0d5a2b,0 0 10px rgba(70,255,138,.35)
}
body[data-ansicht=halle] #main .tafel .room-row button:hover:enabled{background:#0b2215;color:#c9ffdc;border-color:var(--neon-gruen)}
body[data-ansicht=halle] #main .highscore-tabelle{width:100%;border-collapse:collapse;font:13px/1.2 var(--neon-pixel);letter-spacing:.04em;text-transform:uppercase}
body[data-ansicht=halle] #main .highscore-tabelle th{padding:0 6px 14px;font-weight:400;font-size:10px;text-align:left;color:var(--neon-rot)}
body[data-ansicht=halle] #main .highscore-tabelle td{padding:9px 6px;vertical-align:top;color:#d9cfe8;overflow-wrap:anywhere}
body[data-ansicht=halle] #main .highscore-tabelle :is(th,td):last-child{text-align:right;white-space:nowrap}
body[data-ansicht=halle] #main .highscore-tabelle tr[data-place="1"] td{font-size:15px;color:var(--neon-gelb);text-shadow:0 0 8px var(--neon-gelb)}
body[data-ansicht=halle] #main .highscore-tabelle tr[data-place="2"] td{color:var(--neon-cyan)}
body[data-ansicht=halle] #main .highscore-tabelle tr[data-place="3"] td{color:var(--neon-pink)}
body[data-ansicht=halle] #main .highscore-tabelle td small{display:block;margin-top:6px;font-size:9px;line-height:1.4;text-transform:none;color:var(--neon-leise);text-shadow:none}

/* Sign-in: test persons as arcade buttons */
body[data-ansicht=halle] #main[data-screen=login] .panel{
  max-width:960px;margin:0 auto;padding:24px clamp(16px,2.4vw,30px) 26px;border:2px solid var(--neon-linie);border-radius:16px;
  background:var(--neon-tafel);box-shadow:inset 0 0 40px rgba(155,92,255,.12);color:var(--neon-text)
}
body[data-ansicht=halle] #main[data-screen=login] .panel h2{margin:0 0 20px}
body[data-ansicht=halle] #main .accounts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:16px}
body[data-ansicht=halle] #main .accounts button{
  --farbe:var(--neon-pink);display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 16px;border:3px solid var(--farbe);border-radius:14px;
  background:rgba(10,4,16,.8);color:#fff;font:700 15px/1.2 var(--neon-schrift);letter-spacing:.04em;text-transform:uppercase;text-align:start;
  box-shadow:0 5px 0 color-mix(in srgb,var(--farbe) 40%,#000),0 0 14px color-mix(in srgb,var(--farbe) 40%,transparent)
}
body[data-ansicht=halle] #main .accounts button:nth-child(3n+2){--farbe:var(--neon-cyan)}
body[data-ansicht=halle] #main .accounts button:nth-child(3n){--farbe:var(--neon-gelb)}
body[data-ansicht=halle] #main .accounts button::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--farbe) 45%,color-mix(in srgb,var(--farbe) 45%,#000));box-shadow:0 3px 0 #000}
body[data-ansicht=halle] #main .accounts button:hover:enabled{background:#1a0d26;color:#fff;border-color:var(--farbe)}
body[data-ansicht=halle] #main .accounts button:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--farbe) 40%,#000)}
body[data-ansicht=halle] #main[data-screen=login] .test-windows{margin-top:20px;font:500 14px/1.4 var(--neon-schrift)}
body[data-ansicht=halle] #main[data-screen=login] .test-windows summary{display:inline-flex;align-items:center;min-height:32px;color:var(--neon-cyan)}
body[data-ansicht=halle] #main[data-screen=login] .window-links a{color:var(--neon-cyan)}

/* Scoreboards and releases under the neon header */
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content){color:var(--neon-text);font-family:var(--neon-schrift)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-section{background:#140a20;border-color:var(--neon-linie);color:var(--neon-text);box-shadow:inset 0 0 40px rgba(155,92,255,.08)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-section :is(h2,p){color:var(--neon-text)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-section p{color:var(--neon-leise)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-scroll{background:#0d0716;border-color:var(--neon-linie);color:var(--neon-text)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-scroll :is(td,th){background:transparent;color:var(--neon-text);border-color:#2f1f44}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-scroll th{background:#1c1029;color:var(--neon-leise)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-scroll tr[data-user] :is(td,th) a{color:var(--neon-cyan)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) [data-testid=game-scores]{background:linear-gradient(90deg,#140a20 47%,#140a20b3),var(--discipline-art) right top/auto 10.5rem no-repeat,#140a20}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-section :is(summary,dt){color:var(--neon-gelb)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-section dl dd{color:var(--neon-leise)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .stats-section textarea{background:#0d0716;border:1px solid #4a3561;color:var(--neon-text)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .league-shortcuts a{background:#1c1029;border-color:#4a3561;color:var(--neon-text)}
:is(body[data-ansicht=halle] #main[data-screen=stats],#room-rankings .standings-content) .league-shortcuts a:hover{background:var(--neon-cyan);border-color:var(--neon-cyan);color:#05141a}
body[data-ansicht=halle] #main[data-screen=admin]>h1{color:var(--neon-text)}
body[data-ansicht=halle] #main[data-screen=admin]>p{color:var(--neon-leise)}
/* The release form stays a light sheet; its labels keep the dark ink instead of the inherited neon text colour. */
body[data-ansicht=halle] #main[data-screen=admin] .policy{color:var(--ink)}

/* Start menu on the start page: dark board with a neon frame */
body[data-ansicht] #start-menu{
  border:2px solid var(--neon-pink);border-radius:18px;background:linear-gradient(160deg,#1f0f2c,#0f0718);color:var(--neon-text);color-scheme:dark;font-family:var(--neon-schrift);
  box-shadow:0 0 22px rgba(255,62,165,.45),inset 0 0 30px rgba(255,62,165,.08),0 30px 80px #000c
}
body[data-ansicht] #start-menu::backdrop{background:rgba(8,3,14,.72);backdrop-filter:blur(4px)}
body[data-ansicht] #start-menu .menu-art{background:linear-gradient(90deg,#0c0614 4%,#0c0614e8 36%,#0c061433 86%),var(--cover,url(/spielhalle.webp)) right 45%/cover;border-bottom:2px solid var(--neon-cyan);box-shadow:0 2px 12px rgba(44,241,255,.35)}
body[data-ansicht] #start-menu .menu-art .menu-wordmark{display:none}
body[data-ansicht] #start-menu .menu-art small{font:10px/1.6 var(--neon-pixel);letter-spacing:.14em;color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}
body[data-ansicht] #start-menu .menu-art h2{margin-top:10px;font:700 clamp(28px,4.6vw,42px)/1.05 var(--neon-schrift);letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 0 8px var(--neon-pink),0 0 22px var(--neon-pink);overflow-wrap:anywhere}
body[data-ansicht] #start-menu [data-menu-description]{color:var(--neon-leise)}
body[data-ansicht] #start-menu .menu-body h3{font:11px/1.5 var(--neon-pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--neon-gelb)}
body[data-ansicht] #start-menu .menu-setting{border-color:var(--neon-linie);color:var(--neon-text)}
body[data-ansicht] #start-menu .menu-setting strong{font-weight:600}
body[data-ansicht] #start-menu .menu-setting :is(small,output),body[data-ansicht] #start-menu .menu-body .menu-setting output{color:var(--neon-leise)}
body[data-ansicht] #start-menu input[type=range]{accent-color:var(--neon-cyan)}
body[data-ansicht] #start-menu details[open]{border-color:var(--neon-linie)}
body[data-ansicht] #start-menu summary{color:var(--neon-cyan)}
body[data-ansicht] #start-menu details :is(strong,p){color:var(--neon-text)}
body[data-ansicht] #start-menu details p[data-rule]{color:var(--neon-leise)}
body[data-ansicht] #start-menu [data-rock-preview]{border:2px solid var(--neon-cyan);background:transparent;color:var(--neon-cyan)}
body[data-ansicht] #start-menu .tempo-setting .select{color:var(--neon-cyan)}
body[data-ansicht] #start-menu .tempo-setting select{min-height:44px;padding-block:.55rem;padding-inline-start:14px;border:2px solid #4a3561;border-radius:10px;background-color:var(--neon-kasten2);color:var(--neon-text);font:600 15px/1.2 var(--neon-schrift)}
body[data-ansicht] #start-menu .menu-actions button{min-height:48px;border-radius:12px;font:700 14px/1.1 var(--neon-schrift);letter-spacing:.06em;text-transform:uppercase}
body[data-ansicht] #start-menu .menu-actions .menu-primary,body[data-ansicht] #start-menu .menu-actions .menu-primary:hover:enabled{
  min-width:9rem;border:0;background:var(--neon-gelb);color:#1a0d00;font:12px/1.3 var(--neon-pixel);letter-spacing:.06em;box-shadow:0 5px 0 #b39a00,0 0 18px rgba(255,229,59,.45)
}
body[data-ansicht] #start-menu .menu-actions .menu-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #b39a00}
body[data-ansicht] #start-menu :is([data-cancel-start],[data-menu-full]),body[data-ansicht] #start-menu :is([data-cancel-start],[data-menu-full]):hover:enabled{border:2px solid var(--neon-cyan);background:transparent;color:var(--neon-cyan);box-shadow:0 4px 0 #0a5f66}
body[data-ansicht] #start-menu [data-menu-full]{min-height:44px;border-radius:12px;font:600 14px/1.1 var(--neon-schrift)}

/* Movement only when wanted */
@media (prefers-reduced-motion:no-preference){
  body[data-ansicht=halle]>header .lauftext p{display:inline-block;white-space:nowrap;animation:neon-lauf 28s linear infinite}
  body[data-ansicht=halle]>header :is(.lauf-doppel,.lauf-trenner){display:inline}
  body[data-ansicht=halle] #main .start-actions .muenze span{animation:neon-blink 1.1s steps(1) infinite}
  body[data-ansicht=halle] #main .schild-flacker{animation:neon-defekt 7s steps(1,end) infinite}
  body[data-ansicht=halle] #main .neonschild{animation:schild-pendel 5.5s ease-in-out infinite alternate}
  body[data-ansicht=halle] #main .gitterboden::before{animation:neon-boden 1.6s linear infinite}
  body[data-ansicht=halle] #main .intro .neon-titel{animation:neon-summen 6s ease-in-out infinite}
  body[data-ansicht=halle] #main .game-card.automat{transition:transform .15s}
  body[data-ansicht=halle] #main .game-card.automat:hover{transform:translateY(-3px)}
}
@keyframes neon-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes neon-blink{0%,60%{opacity:1}61%,100%{opacity:.45}}
/* A worn tube: it buzzes twice, drops to a dull ember, catches again. Steps keep the jumps hard. */
@keyframes neon-defekt{0%,9%,12%,15%,48%,50%,53%,69%,73%,76%,100%{opacity:1}8%,11%,14%{opacity:.4;text-shadow:0 0 5px rgba(245,168,28,.5)}47%,49%,52%{opacity:.55;text-shadow:0 0 6px rgba(245,168,28,.6)}56%,71%,75%{opacity:.16;text-shadow:none}}
@keyframes schild-pendel{from{transform:rotate(-1.9deg)}to{transform:rotate(1.3deg)}}
/* The floor runs as a transform along the tilted plane (compositor only): one stripe period of 46px.
   Animating background-position instead repainted the whole tilted layer every frame (about 60 % main thread per page). */
@keyframes neon-boden{from{transform:rotateX(62deg) translateY(0)}to{transform:rotateX(62deg) translateY(46px)}}
@keyframes neon-summen{0%,100%{opacity:1}50%{opacity:.92}}

/* Medium and small widths: desktop leads, the phone stays usable */
@media (max-width:1100px){
  body[data-ansicht=halle] #main .games{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-ansicht=halle] #main .neonschild,body[data-ansicht=halle] #main[data-screen=login] .neonschild{position:relative;top:auto;right:auto;display:inline-block;margin:36px 0 40px}
  body[data-ansicht=halle] #main[data-screen=login] .intro.auftakt{padding-top:clamp(34px,5.4vw,76px)}
}
@media (max-width:860px){
  body[data-ansicht=halle] #main .games{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  body[data-ansicht=halle] #main .tafeln{grid-template-columns:minmax(0,1fr)}
}
/* Between tablet and wide desktop the counters get their own row, otherwise they wrap into the neighbours. */
@media (min-width:921px) and (max-width:1340px){
  body[data-ansicht=halle]>header::before{grid-area:1/1/4/-1}
  body[data-ansicht=halle]>header .zaehler{grid-area:2/1/3/-1;justify-self:start;flex-wrap:nowrap;margin:0 var(--neon-rand) 8px}
  body[data-ansicht=halle]>header .lauftext{grid-area:3/1/4/-1}
  body[data-ansicht=halle]>header .tabs{grid-area:4/1/5/-1}
}
@media (max-width:920px){
  body[data-ansicht=halle]>header{grid-template-columns:minmax(0,1fr) auto auto}
  body[data-ansicht=halle]>header::before{grid-area:1/1/6/-1}
  body[data-ansicht=halle]>header .brand{grid-area:1/1;margin:8px 12px 4px var(--neon-rand)}
  body[data-ansicht=halle]>header .test-windows{grid-area:1/2;margin:4px 12px 0 0;align-self:center}
  body[data-ansicht=halle]>header [data-logout]{grid-area:1/3;margin:4px var(--neon-rand) 0 0}
  body[data-ansicht=halle]>header .einsup{grid-area:2/1/3/3;margin:4px 12px 4px var(--neon-rand)}
  body[data-ansicht=halle]>header #connection{grid-area:2/3;margin:4px var(--neon-rand) 4px 0}
  body[data-ansicht=halle]>header .zaehler{grid-area:3/1/4/-1;justify-self:start;margin:4px var(--neon-rand)}
  body[data-ansicht=halle]>header #sound{grid-area:4/1/5/3;justify-self:start;margin:2px 0 6px var(--neon-rand)}
  body[data-ansicht=halle]>header [data-pair]{grid-area:4/3;margin:2px var(--neon-rand) 6px 0}
  body[data-ansicht=halle]>header .lauftext{grid-area:5/1/6/-1}
  body[data-ansicht=halle]>header .tabs{grid-area:6/1/7/-1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;padding-top:16px}
  body[data-ansicht=halle]>header .tabs button,body[data-ansicht=halle]>header .tabs button:first-child{padding:9px 4px;font-size:11px;letter-spacing:.04em;overflow-wrap:anywhere;hyphens:auto}
  body[data-ansicht=halle]>header .tabs [data-menu]{order:9}
}
@media (max-width:560px){
  body[data-ansicht=halle] #main .game-card.automat{padding:0 6px}
  body[data-ansicht=halle] #main .automat .leuchtkasten{min-height:52px;padding:6px}
  body[data-ansicht=halle] #main .automat .leuchtkasten h3{font-size:12px;letter-spacing:.03em}
  body[data-ansicht=halle] #main .automat .cartridge{padding:6px}
  body[data-ansicht=halle] #main .automat .schirm-glas{inset:6px}
  body[data-ansicht=halle] #main .automat .cartridge-info{margin:10px -6px 0;padding:10px 8px 12px}
  body[data-ansicht=halle] #main .automat .pult-stick{display:none}
  body[data-ansicht=halle] #main .automat .cartridge-info p{font-size:13px}
  body[data-ansicht=halle] #main .automat footer{grid-template-columns:minmax(0,1fr);gap:10px}
  body[data-ansicht=halle] #main .automat footer button{min-height:44px;padding:9px 4px;font-size:12px;letter-spacing:.03em}
  body[data-ansicht=halle] #main .intro .start-actions .muenze{padding:16px 18px;font-size:12px}
  body[data-ansicht=halle] #main .highscore-tabelle{font-size:11px}
  body[data-ansicht=halle] #main .highscore-tabelle tr[data-place="1"] td{font-size:12px}
  body[data-ansicht=halle] #main .tafel .room-row{grid-template-columns:minmax(0,1fr)}
  body[data-ansicht=halle] #main .tafel .room-row button{justify-self:start}
  body[data-ansicht=halle] #main .halle h2{font-size:12px}
  body[data-ansicht=halle] #main .intro .neon-titel{font-size:11vw}
}
@media (forced-colors:active){
  body[data-ansicht=halle] :is(.tabs button,.shelf-genres button,.automat footer button,.muenze,.accounts button,.room-row button){border:2px solid ButtonText}
  body[data-ansicht=halle] .tabs button[aria-current=page],body[data-ansicht=halle] .shelf-genres button[aria-pressed=true]{border-color:Highlight}
  body[data-ansicht=halle] #main .neonschild .schild-platte{border:1px solid CanvasText}
}

/* Knopftexte bleiben einzeilig: Kachel-Knöpfe sparen Laufweite, Reiter brechen als ganze Knöpfe in die nächste Zeile statt mitten im Text */
body[data-ansicht=halle] #main .automat footer button { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body[data-ansicht=halle] #main .automat footer button:not(.primary) { font-size:12px; letter-spacing:0; padding-inline:2px; }
@media (max-width:920px) {
  body[data-ansicht=halle]>header .tabs { display:flex; flex-wrap:wrap; }
  body[data-ansicht=halle]>header .tabs button,body[data-ansicht=halle]>header .tabs button:first-child { flex:1 1 auto; white-space:nowrap; overflow-wrap:normal; hyphens:none; }
}
@media (max-width:360px) {
  body[data-ansicht=halle] #main .automat footer button { font-size:11px; letter-spacing:0; padding-inline:2px; }
}

/* Freigaben im Neon-Look: dunkle Karte, eigenes Auswahlfeld (auswahl.js), Pfeil 16 px vom Rand, 12 px Luft zum Text */
body[data-ansicht=halle] #main[data-screen=admin] .policy { color:var(--neon-text); background:#140a20; border:2px solid var(--neon-linie); box-shadow:inset 0 0 40px rgba(155,92,255,.08); font-family:var(--neon-schrift); }
body[data-ansicht=halle] #main[data-screen=admin]>h1 { font:700 clamp(1.6rem,4vw,2.4rem)/1.15 var(--neon-schrift); letter-spacing:.02em; text-transform:none; }
body[data-ansicht=halle] #main[data-screen=admin] .policy fieldset { border-color:var(--neon-linie); }
body[data-ansicht=halle] #main[data-screen=admin] .policy legend { color:var(--neon-gelb); }
body[data-ansicht=halle] #main[data-screen=admin] .policy p { color:var(--neon-leise); }
body[data-ansicht=halle] #main[data-screen=admin] .policy input:not([type=checkbox]) { background:#0d0716; border:1px solid #4a3561; color:var(--neon-text); color-scheme:dark; }
body[data-ansicht=halle] #main[data-screen=admin] .policy input[type=checkbox] { accent-color:var(--neon-cyan); }
body[data-ansicht=halle] #main[data-screen=admin] .policy [data-save-policy] { background:var(--neon-pink-knopf); border:2px solid #ff8cc8; border-radius:12px; color:#fff; font:700 .95rem/1.1 var(--neon-schrift); min-height:44px; padding:.5rem 1.2rem; }
.feldzeile { display:grid; gap:.3rem; font-weight:600; min-width:0; }
.policy > .feldzeile { margin-bottom:1rem; }
.auswahl { position:relative; display:block; min-width:0; max-width:100%; font-weight:500; }
body[data-ansicht] #main .auswahl-knopf, body[data-ansicht] #main .auswahl-knopf:hover:enabled { position:relative; display:block; width:100%; min-height:44px; padding-block:.55rem; padding-inline:.8rem calc(16px + 12px + 12px); text-align:start; cursor:pointer;
  background:#0d0716; color:var(--neon-text); border:1px solid #4a3561; border-radius:10px; font:500 1rem/1.3 var(--neon-schrift); }
.auswahl-knopf > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auswahl-knopf::after { content:""; position:absolute; inset-inline-end:16px; top:50%; margin-top:-3px; width:12px; height:7px; background:currentColor; pointer-events:none;
  clip-path:polygon(0 0,50% 67%,100% 0,100% 33%,50% 100%,0 33%); }
.auswahl-knopf[aria-expanded=true]::after { transform:scaleY(-1); }
body[data-ansicht] #main .auswahl-knopf:hover:enabled { background:#170c24; color:var(--neon-text); border-color:#4a3561; }
.auswahl-liste { position:absolute; z-index:20; inset-inline:0; top:calc(100% + 4px); max-height:min(18rem,50vh); overflow:auto; margin:0; padding:.3rem; list-style:none;
  background:#1c1029; border:2px solid var(--neon-pink); border-radius:10px; box-shadow:0 10px 30px #000a; color-scheme:dark; }
.auswahl-liste[hidden] { display:none; }
.auswahl-liste li { padding:.5rem .7rem; border-radius:7px; color:var(--neon-text); cursor:pointer; overflow-wrap:anywhere; }
.auswahl-liste li.aktiv, .auswahl-liste li:hover { background:#33205a; }
.auswahl-liste li[aria-selected=true] { color:var(--neon-gelb); }
@media (forced-colors:active) { .auswahl-knopf::after { background:ButtonText; forced-color-adjust:none; } .auswahl-knopf, .auswahl-liste { border:2px solid ButtonText; } }

/* Die App ist ausschließlich dunkel: native Elemente (Scrollleisten, Zeit- und Datumsfelder) folgen dem */
:root { color-scheme:dark; }