:root {
  --ink: #202038;
  --muted: #56576c;
  --paper: #f6f4ee;
  --surface: #fffefa;
  --line: #d8d5da;
  --sea: #4843a4;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
body {
  min-height: 100vh;
  background: var(--paper);
}
body:has(main:is([data-screen="login"],[data-screen="lobby"])) {
  background: #17172d;
  color: #fff9eb;
}
body > header {background:#141429; color:#fffbef; box-shadow:0 1px #ffffff20}
.mast, nav, main {width:min(1390px,100%);padding-inline:clamp(15px,4vw,60px)}
.mast {min-height:59px}
.brand {display:inline-flex;align-items:center;font-family:inherit;font-weight:800;font-size:1.07rem;letter-spacing:-.04em}
.brand span {color:#77748e;padding:0 .45rem}
.brand-mark {background:#e6ff7d;color:#252241;display:inline-grid;place-items:center;height:28px;width:28px;margin-inline-end:.55rem;border-radius:8px;transform:rotate(-7deg);font-size:1.4rem;font-style:normal}
nav {border-color:#ffffff1e}
.tabs button,.tabs button:first-child {padding:.56rem .85rem;font-weight:680;font-size:.88rem}
.tabs button[aria-current="page"] {border-bottom-color:#e6ff7d;color:#e6ff7d}
#identity {gap:.8rem}
#connection {color:#bde6d0}
#connection:not(:empty)::before {content:"";display:inline-block;background:#8bedad;width:6px;height:6px;border-radius:50%;margin-inline-end:.4em}
main {padding-block:clamp(16px,2.4vw,34px) 3rem}
h1,h2,h3 {font-family:inherit;font-weight:800;letter-spacing:-.045em;text-wrap:balance}
:focus-visible {outline:none}
:is(button,a,summary,[tabindex]):focus-visible {filter:brightness(1.25)}
.game-card button:focus-visible,.tabs button:focus-visible {outline-color:#fcd24f;outline-offset:3px}
main .intro {
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(178px,17.5vw,242px);max-width:none;margin:0 0 1.55rem;padding:clamp(20px,3.3vw,52px);
  background:#27217a url(/spielhalle.webp) no-repeat right 48% / cover;
  border-radius:1.15rem;isolation:isolate;overflow:hidden;position:relative;
}
main .intro::before {content:"";position:absolute;inset:0;background:linear-gradient(90deg,#201b6cdd,#201b6c77 37%,transparent 65%);z-index:-1}
.intro h1 {color:#fff8e1!important;font-size:clamp(2.7rem,5.3vw,5rem);letter-spacing:-.065em;line-height:.95;margin:0 0 .8rem}
main .intro p {color:#f0edff;max-width:min(48%,26rem);margin:0;line-height:1.4;font-weight:540}
main .intro .overline {color:#e5ff7b!important;font-size:.72rem;font-weight:850;letter-spacing:.16em;margin:0 0 .85rem}
.shelf > h2,section[data-rooms] h2 {font-size:clamp(1.45rem,2.3vw,2.15rem);margin-bottom:.65em;color:#fff9e8}
.shelf > h2::before {content:"";display:inline-block;background:#e5ff7b;height:.66em;width:.24em;border-radius:3px;transform:skew(-15deg);margin-inline-end:.38em}
.games {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.45vw,22px)}
.game-card {
  padding:0;display:flex;min-width:0;min-height:0;overflow:hidden;border-radius:1.05rem;
  background:#25253f;border:1px solid #44445f;color:#fffbed;
}
.cartridge {aspect-ratio:2.1;overflow:hidden;background:#403c72}
.cartridge img {display:block;width:100%;height:100%;object-fit:cover}
.cartridge-info {display:flex;flex:1;flex-direction:column;padding:.85rem clamp(10px,1.12vw,18px) 1rem}
.game-card .card-top {margin:0 0 .4rem;font-size:.73rem;line-height:1.2;color:#d8d6ed;gap:.35rem}
.card-top small {font-size:inherit;font-weight:720;color:#e1eab2}
.seats {font-variant-numeric:tabular-nums}
.game-card h3 {font-size:clamp(1.4rem,2vw,1.95rem);line-height:1;margin:0 0 .4rem;color:#fff9e6}
.game-card p {font-size:.86rem;line-height:1.42;margin:0 0 .8rem;color:#d2d1df}
.game-card footer,.game-card footer:has([data-practice]) {margin-top:auto;border:0;padding:0;display:flex;gap:.38rem;flex-wrap:wrap}
.game-card footer button {min-height:36px;border:1px solid #65647b;border-radius:.5rem;background:#34344f;color:#fffbee;font-size:.77rem;font-weight:700;flex:1 1 5.8rem;line-height:1.2}
.game-card footer button.primary {background:#e5ff7b;border-color:#e5ff7b;color:#23232a}
.game-card footer button:hover:enabled {background:#51506d;color:white;border-color:#8d8da0}
.game-card footer button.primary:hover:enabled {background:#f0ffaf;color:#252536}
section[data-rooms]:not(:empty) {margin-top:2rem}
.room-row {color:var(--ink)}
#main[data-screen="login"] .panel {background:#25253f;border-color:#45455b}
#main[data-screen="login"] h2 {color:#fffbed}
#main[data-screen="login"] .window-links a {color:#e5ff7b}
.accounts button {text-align:start}
.roomtop {margin-bottom:.65rem}
.roomtop button {font-size:.82rem;border:0;background:transparent;padding:.25rem 0;color:#46437c}
.room-heading {display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.3rem);margin-bottom:.9rem}
.room-cover {width:clamp(55px,6.5vw,90px);aspect-ratio:1.35;background-position:center;background-size:cover;border-radius:.8rem;flex:none;box-shadow:0 2px 4px #25243720}
.room-heading h1 {font-size:clamp(2rem,3.8vw,3.5rem);line-height:1;margin:0 0 .24rem}
.room-heading p {font-size:.82rem;line-height:1.4;margin:0}
.panel.room-panel {padding:0;background:transparent;border:0}
.room-panel>.practice-feed:not(:empty) {margin:.8rem 0 0;padding:.5rem .1rem;border:0;font-size:.86rem;color:#525369}
.practice-feed p {margin:0}
.practice-feed ul {margin:.35rem 0 0;padding-inline-start:1.3rem}
.room-panel>.controls:not(:empty) {margin-top:.55rem;padding-top:.65rem}
.outcome:not(:empty) {padding:1rem 1.2rem;border-radius:.8rem;background:#fffbea}
header .window-links {color:var(--ink)}
@media(max-width:1000px) {.games {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:740px) {
  .games {grid-template-columns:repeat(2,minmax(0,1fr))}
  #identity {gap:.5rem;flex-wrap:wrap}
  .card-top .seats {font-size:.7rem}
  .mast {gap:.4rem}
  .room-heading {margin-bottom:.6rem}
}
@media(max-width:520px) {
  main {padding-inline:12px}
  .mast,nav {padding-inline:12px}
  .mast {min-height:0;align-items:start}
  #identity {font-size:.72rem}
  #identity button {padding:.25rem .48rem}
  .brand {font-size:.93rem}
  .test-windows {margin:0;font-size:.74rem}
  nav {align-items:center}
  .tabs button,.tabs button:first-child {font-size:.77rem;padding:.55rem .4rem}
  #connection {font-size:.65rem}
  main .intro {min-height:176px;padding:17px;background-position:58% center}
  main .intro::before {background:linear-gradient(90deg,#201b6cf2,#201b6c99 55%,transparent)}
  main .intro p {max-width:65%;font-size:.8rem}
  .intro h1 {font-size:2.65rem;max-width:62%}
  main .intro .overline {font-size:.6rem;margin-bottom:.6rem}
  .games {gap:.6rem}
  .game-card {border-radius:.7rem}
  .cartridge {aspect-ratio:1.65}
  .cartridge-info {padding:.65rem .55rem}
  .game-card .card-top {align-items:start;flex-wrap:wrap;gap:.15rem .4rem;font-size:.67rem}
  .game-card h3 {font-size:1.28rem}
  .game-card p {font-size:.76rem}
  .game-card footer button {flex-basis:100%}
}
@media(prefers-reduced-motion:no-preference) {
  .cartridge img {transition:transform .25s ease-out}
  .game-card:hover .cartridge img {transform:scale(1.035)}
}
@media(forced-colors:active) {
  .room-cover,.brand-mark {border:1px solid CanvasText}
  .game-card footer button:focus-visible {outline-color:Highlight}
}
.beach-game {border-radius:1rem;overflow:hidden;border:3px solid #29243e;box-shadow:0 4px #29243e;background:#fff4db}
.beach-score {display:flex;justify-content:space-between;align-items:center;background:#26243c;color:#fff3d6;font-size:clamp(.84rem,1.4vw,1.1rem);font-variant-numeric:tabular-nums}
.beach-score strong {padding:.45rem max(12px,2vw);color:inherit}
.beach-score .blue-score {background:#295fa6;color:white;border-bottom-right-radius:.6rem}
.beach-score .gold-score {background:#ffc366;color:#3e2b20;border-bottom-left-radius:.6rem}
.play .beach-game [data-volley] {display:block;width:100%;margin:0;border-radius:0}
.beach-stands {display:flex;justify-content:space-between;gap:1rem;padding:.4rem 1rem;border-block:1px solid #c6a976;color:#453449;font-weight:750;font-size:.85rem}
.beach-game .actions {justify-content:center;padding:.6rem .45rem 0}
.beach-game .actions button {border-color:#403348;color:#2e2943;background:#fffaf0;box-shadow:0 2px #403348;touch-action:none}
.beach-game .actions button:active {background:#ffcb7d}
.beach-game .volley-help {text-align:center;margin:.45rem .9rem .8rem;color:#514351}