*{box-sizing:border-box} :root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;color:#edf2ff;background:#0b1226} body{margin:0;background:radial-gradient(ellipse at top right,#233259 0,transparent 55%);min-height:100vh} a{color:#b8d1ff;text-decoration:none} a:hover{text-decoration:underline} .topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 5%;border-bottom:1px solid #ffffff20} .brand{font-size:1.45rem;font-weight:800;color:#fff} nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} nav span{font-size:.85rem;color:#b2bfd9} nav form{margin:0} .container{max-width:1200px;margin:auto;padding:2rem 1.5rem 4rem} .intro{padding:1rem 0 2rem} .eyebrow{font-size:.75rem;letter-spacing:.14em;color:#aac0ed;font-weight:700} h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:.7rem 0 1rem} p{line-height:1.6;color:#bdc9df} .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem} .game-card{position:relative;padding:1.5rem;border:1px solid #ffffff25;border-radius:20px;background:#17223c;color:#fff;display:flex;flex-direction:column;transition:transform .15s,border-color .15s} .game-card:hover,.game-card:focus-visible,.game-card.selected{border-color:#90b8ff;transform:translateY(-3px);text-decoration:none;outline:2px solid #90b8ff;outline-offset:3px} .game-number{position:absolute;right:1.3rem;top:1.1rem;color:#92a5ca;font-size:.8rem} .game-icon{font-size:3rem;margin-bottom:1rem} h2{font-size:1.15rem;margin:.2rem 0} .game-card p{font-size:.9rem} .edition{margin:0;color:#f8cd81} .start{margin-top:auto;padding-top:1rem;color:#b4d1ff;font-weight:700} .hint{font-size:.85rem;color:#92a5c4;margin-top:2rem} .panel{max-width:620px;margin:2rem auto;background:#17223c;border:1px solid #ffffff25;border-radius:22px;padding:2rem} .panel h1{font-size:2rem} label{display:block;margin:1.2rem 0 .5rem;font-weight:600} input,textarea{width:100%;padding:.85rem;border:1px solid #ffffff35;border-radius:9px;background:#0c152b;color:#fff;font:inherit} input[type=submit],button,.button{cursor:pointer;background:#b7d1ff;color:#0b1730;border:0;border-radius:9px;padding:.8rem 1.1rem;font:inherit;font-weight:700} input[type=submit]{margin-top:1.5rem} .secondary{background:#ffffff12;color:#edf2ff;border:1px solid #ffffff30} .flash{background:#1b3b45;border:1px solid #64c7ac;padding:1rem;border-radius:10px;color:#e1fff3} .error{background:#482437;border-color:#f698ae;color:#ffe8ee} .playing{background:#000;overflow:hidden} .game-stage{height:100dvh;width:100%;display:flex;flex-direction:column;background:#000} .game-stage iframe{flex:1;min-width:0;min-height:0;width:100%;display:block;border:0;background:#000} .game-bar{flex:none;display:flex;align-items:center;gap:1rem;height:2.7rem;padding:0 1rem} .back-link{color:#fff;font-size:.9rem} .back-link:hover{text-decoration:none} .fullscreen-toggle{background:none;color:#fff;border:1px solid #ffffff40;border-radius:8px;padding:.25rem .7rem;font-size:.85rem;font-weight:600} @media(max-width:650px){.topbar{align-items:flex-start;flex-direction:column}nav{gap:.7rem}.container{padding:1.5rem 1rem}.panel{padding:1.5rem}.gallery{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

[hidden]{display:none!important}.online-links,.online-actions,.equipment{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.online-room,.online-bar{padding:20px;border:1px solid #ffffff30;border-radius:16px;background:#17223c;margin:12px 0}.online-bar h1{font-size:1.7rem}.online-bar .hint{margin-top:8px}.online-stage{height:75dvh;min-height:480px;background:#000;border-radius:12px;overflow:hidden}.online-stage iframe{height:100%;width:100%;border:0}.online-roster{display:flex;gap:12px;flex-wrap:wrap}.online-player{padding:10px 14px;border:1px solid #ffffff30;border-radius:10px}.online-player.ready{border-color:#7ee3a3}.equipment label{margin:0}select{font:inherit;padding:10px;border-radius:8px;background:#0c152b;color:white;border:1px solid #ffffff35;width:100%}button:disabled{opacity:.5;cursor:default}.online-bar [role=alert]{color:#ffc0cb}.online-results{font-size:1.1rem}

.online-live-controls{position:sticky;top:0;z-index:20;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px;background:#101b30;border:1px solid #ffffff30;border-radius:12px}.online-live-controls span{font-size:.85rem;color:#bfcee8}.online-stage{scroll-margin-top:68px}.online-stage:fullscreen{height:100vh;border-radius:0}
.multiplayer-guide{max-width:800px;margin:auto}.multiplayer-guide section{margin-bottom:2rem}.multiplayer-guide h2{font-size:1.4rem}.multiplayer-guide li{line-height:1.7;color:#bdc9df;margin:.6rem 0}.multiplayer-guide strong{color:#edf2ff}
.mode-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem}.mode-option{display:flex;flex-direction:column;align-items:flex-start;padding:1.5rem;border:1px solid #ffffff25;border-radius:20px;background:#17223c}.mode-option h2{font-size:1.5rem}.mode-option .button{display:inline-block;margin-top:auto}
/* Handy quer: Leiste als schmale Spalte links, dort ist neben den breiten Spielen ohnehin Platz. */
@media (orientation:landscape) and (max-height:500px){.game-stage{flex-direction:row}.game-bar{flex-direction:column;height:auto;width:2.9rem;padding:.5rem 0;gap:.6rem}.game-bar span{display:none}.back-link,.fullscreen-toggle{display:grid;place-items:center;width:2.3rem;height:2.3rem;padding:0;border-radius:10px;background:#ffffff14;border:1px solid #ffffff30;font-size:1.15rem}}