:root{color-scheme:dark;font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#eff8fa;}*{box-sizing:border-box;}html,body{margin:0;width:100%;height:100%;background:transparent;overflow:hidden;}body.demo{background:repeating-conic-gradient(#18222c 0% 25%,#1d2934 0% 50%) 0 0/40px 40px;}body.chroma{background:#00ff00;}[hidden]{display:none!important;}button{font:inherit;cursor:pointer;color:#eff8fa;background:#152432e8;border:1px solid #687d8c;border-radius:6px;padding:6px 10px;}button:focus-visible{outline:2px solid #d9ffb3;outline-offset:3px;}#controls{position:fixed;top:12px;right:12px;display:flex;gap:6px;z-index:3;}#connection{position:fixed;top:12px;left:12px;background:#101e2ce0;border-radius:6px;padding:5px 9px;font-size:11px;color:#c9d9e2;}#layer{position:absolute;bottom:0;left:0;width:100%;height:290px;}header{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1080px;margin:auto;padding:8px 20px;text-shadow:0 2px 4px #000,0 0 10px #000;}h1{font-size:20px;letter-spacing:-.025em;margin:0;}header p{margin:2px 0 0;font-size:11px;color:#d9e8ee;}.metrics{display:flex;gap:14px;font-size:12px;}#meter{font-weight:700;color:#dfffae;}#playfield{width:100%;height:220px;display:block;filter:drop-shadow(0 2px 4px #07121acc);}#result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:90%;width:max-content;background:#11232ef2;color:#e4ffbb;border:1px solid #739d88;border-radius:12px;padding:20px 26px;font-size:20px;text-align:center;box-shadow:0 8px 30px #0005;z-index:2;}.maze #layer{left:auto;right:18px;bottom:18px;width:800px;max-width:calc(100% - 36px);height:auto;border:1px solid #637e83;border-radius:14px;overflow:hidden;background:#101c25;box-shadow:0 10px 40px #0005;}.maze header{padding:14px 18px;}.maze #playfield{height:auto;aspect-ratio:16/10;image-rendering:pixelated;filter:none;}.maze #result{font-size:24px;}.health-track{height:4px;background:#392433;}#health{height:100%;background:#a0e4c3;transition:width .2s;}body.fullscreen.maze #layer{width:100%;max-width:none;right:0;bottom:0;height:100%;border-radius:0;border:0;}.fullscreen.maze #playfield{height:calc(100% - 69px);object-fit:cover;}@media(max-width:600px){header{padding:8px 12px;}h1{font-size:17px;}.metrics{gap:7px;font-size:10px;}.maze header{flex-wrap:wrap;}.maze #layer{right:10px;bottom:10px;max-width:calc(100% - 20px);}#result,.maze #result{font-size:17px;padding:14px;}#connection{max-width:calc(100% - 160px);font-size:10px;}}

/* Maze Raid fills the browser source; its compact HUD sits over the game. */
.maze { font-family: 'Courier New', monospace; }
body.maze #layer { top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; height: 100%; border: 0; border-radius: 0; background: #252338; box-shadow: none; }
body.maze #playfield, body.fullscreen.maze #playfield { width: 100%; height: 100%; aspect-ratio: auto; object-fit: fill; }
.maze header { position: absolute; bottom: 8px; left: 0; right: 0; z-index: 1; max-width: none; background: linear-gradient(0deg,#111927ed,transparent); padding: 20px 18px 10px; text-shadow: 2px 2px #081224; }
.maze h1 { font-family: 'Courier New', monospace; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fff0bd; }
.maze .metrics { font-weight: bold; text-transform: uppercase; }
.maze .health-track { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; height: 6px; background: #351b20; }
.maze #health { background: repeating-linear-gradient(90deg,#cf3e38 0,#cf3e38 12px,#732827 12px,#732827 14px); }
.maze #result { border: 2px solid #c1bba9; border-radius: 0; background: #101c39ed; color: #ffe19b; font-family: 'Courier New',monospace; }
.maze button, .maze #connection { border-radius: 0; }

@media(max-width:600px){body:not(.maze) #layer{height:320px}body:not(.maze) header{flex-wrap:wrap;gap:6px}body:not(.maze) header>div:first-child{width:100%}body:not(.maze) .metrics{white-space:nowrap}}
