:root { color-scheme: dark; font-family: "Segoe UI", sans-serif; color: #f4f7fb; background: #07111d; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { display: flex; flex-direction: column; }
header { padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #10263d; }
h1 { font-size: 18px; margin: 0; }
#status { color: #b8c5d3; font-size: 14px; flex: 1 1 200px; }
button, input { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid #54708c; background: #142c44; color: #fff; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #f45d8c; }
#stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #07111d; overflow: hidden; }
#map { width: 100%; height: 100%; background: #18374e; }
#setup { margin: 20px; padding: 20px; max-width: 600px; border: 1px solid #54708c; border-radius: 16px; }
#setup label { display: grid; gap: 6px; margin: 12px 0; }
#setup p { line-height: 1.5; }
[hidden] { display: none !important; }
body[data-role="display"] header { position: fixed; z-index: 2; top: 12px; left: 12px; border-radius: 12px; opacity: .9; max-width: calc(100% - 24px); }
body[data-role="display"] #stage { height: 100%; position:relative; }

/* Gleiche optische Entzerrung wie in url.php; nur die PC-Anzeige. */
body[data-role="display"] #map { transform: scaleX(0.6); transform-origin: center; }

.map-crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;color:#e13041;font:bold 44px sans-serif;pointer-events:none;text-shadow:0 0 3px white,0 0 3px white}.map-game-hud{padding:10px 16px;background:#07111de8;color:#fff;z-index:6}.map-game-hud strong{font-size:24px}.map-game-hud p{margin:6px 0}body[data-role="display"] .map-game-hud{position:absolute;left:25%;right:25%;top:80px;border-radius:14px;text-align:center}body[data-role="display"] #setup{left:25%;right:25%;max-width:50%}body[data-role="controller"] #stage{position:relative;height:calc(100dvh - 260px);min-height:280px}

/* Karte: Name und jeweils relevanter Hinweis stehen im Vordergrund. */
.map-game-hud strong{display:block;font-size:clamp(28px,4vw,40px);line-height:1.15}
#game-hints{font-size:clamp(22px,3vw,30px);margin-top:8px;line-height:1.25}
#game-note{font-size:22px;font-variant-numeric:tabular-nums;margin:6px 0}
body[data-role="controller"] header h1{display:none}
body[data-role="controller"] #status{font-size:12px;flex-basis:100%}
body[data-role="controller"] .map-game-hud{position:relative;padding:12px 16px}
body[data-role="controller"] #play-map{display:none}
body[data-role="controller"] #end-map{position:absolute;right:16px;bottom:8px;font-size:16px}
body[data-role="controller"] #stage{height:calc(100dvh - 230px);min-height:220px}
body[data-role="display"] header{display:none}
body[data-role="display"] .map-game-hud{top:24px;padding:18px 24px}
body[data-role="display"] .map-game-hud strong{font-size:48px}
body[data-role="display"] #game-hints{font-size:34px}
body[data-role="display"] #game-note{font-size:28px}

body[data-role="guest"] #stage{position:relative;height:calc(100dvh - 260px);min-height:280px}.second-map{position:absolute;left:50%;top:0;width:50%;height:100%}.dual-map #map{position:absolute;left:0;top:0;height:100%}.dual-map~.arcade-board-floating{z-index:8}body[data-role="display"] .map-game-hud2{left:50%;right:25%}body[data-role="display"].map-duel .map-game-hud:not(.map-game-hud2){left:25%;right:50%}

.map-countdown{position:absolute;left:25%;width:50%;top:40%;z-index:10;text-align:center;font-size:96px;color:white;text-shadow:0 3px 24px #001b2b;pointer-events:none}

.map-result-wait{padding:16px;border:2px solid #66e8b0;border-radius:14px;font-size:22px;background:#163e35}
body[data-role="display"] .map-player-finished{background:#123e35f2;border:3px solid #66e8b0;box-shadow:0 0 40px #66e8b055}
body[data-role="display"] .map-player-finished strong{color:#a1ffcf}
.map-countdown{font-size:clamp(40px,5vw,76px);line-height:1.2;white-space:normal}
body[data-role="guest"] #status{font-size:12px;flex-basis:100%}

body[data-feature="maps"] .flow-countdown,body[data-role="guest"] .flow-countdown{font-size:clamp(36px,8vw,54px);line-height:1.2;white-space:normal}

body.map-counting[data-role="display"] .map-game-hud{visibility:hidden}
body.map-counting [data-flow-phase="waiting"] h2,body.map-counting [data-wait-note]{display:none}

/* Die beiden Google-Container behalten je eine eigene, eindeutige Zeichenfläche. */
body[data-role="display"] #stage{display:block;position:relative}
body[data-role="display"] #map,body[data-role="display"] #map2{position:absolute;top:0;bottom:0;height:100%;transform:none}
body[data-role="display"] #map{left:0;width:100%}
body[data-role="display"] .dual-map #map{width:50%}
body[data-role="display"] #map2{left:50%;width:50%}