:root{color-scheme:dark;font-family:Tahoma,Verdana,sans-serif;background:#090909;color:#d5d5d5}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at center,#202020,#060606)}main{width:min(100%,1000px);padding:24px 18px}#game-frame{position:relative;width:100%;aspect-ratio:4/3;box-shadow:0 10px 70px #000;border:1px solid #373737;background:#000;overflow:hidden}canvas{width:100%;height:100%;display:block;outline:0;image-rendering:auto}#menu{position:absolute;inset:0;background:#171717 url(assets/menu.jpg) center/100% 100% no-repeat}#menu[hidden],#result[hidden],button[hidden]{display:none}nav{position:absolute;left:2%;top:12%;width:23%;display:flex;flex-direction:column;align-items:center;gap:30px}button{font:inherit;color:#ddd;cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:3px}.picture-button{background:transparent;border:0;padding:3px;max-width:100%;transition:filter .15s}.picture-button:hover{filter:brightness(1.8)}.picture-button img{width:130px;max-width:100%;height:auto}.menu-options{position:absolute;top:8%;left:34%;width:55%;height:84%;overflow:auto;padding:0 3%;scrollbar-width:thin}h1{font-size:clamp(18px,3vw,29px);text-align:center;letter-spacing:3px;font-weight:400;margin:5px 0 13px;text-shadow:0 0 9px #fff7}.subtitle{text-align:center;font-size:13px;margin:10px 0 19px}label{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;margin:12px 0;color:#c8c8c8}select{font:11px Tahoma,sans-serif;min-width:190px;width:66%;color:#ddd;background:#222;border:1px solid #666;padding:5px;cursor:pointer;border-radius:0}.map-selection{text-align:right;margin:4px 0 15px}.map-selection img{width:66%;height:100px;object-fit:cover;border:1px solid #555;filter:brightness(.85)}.help{font-size:10px;line-height:1.6;margin-top:18px;color:#b0b0b0}.help p{margin:3px 0}.help b{font-weight:400;color:#ddd}.work-note{color:#8c8c8c;font-size:9px;line-height:1.6;margin:14px 0}.text-start{display:block;width:66%;margin:12px 0 0 auto;background:linear-gradient(#555,#252525);border:1px solid #888;padding:9px;letter-spacing:2px;font-size:12px}.text-start:hover{background:#666}#resume{font-size:11px;letter-spacing:2px;background:none;border:1px solid #888;padding:8px}#message{position:absolute;left:50%;top:10px;transform:translateX(-50%);color:#fff;font-size:13px;background:#000b;padding:8px 13px;pointer-events:none;opacity:0;white-space:nowrap;text-shadow:1px 1px #000}#result{position:absolute;inset:0;background:#000d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}#result h2{letter-spacing:8px;font-size:25px;font-weight:400}#results{min-width:300px;font-size:15px;line-height:2}#result button,dialog button{padding:8px 18px;border:1px solid #666;background:#222}.browser-bar{display:flex;align-items:center;justify-content:space-between;margin-top:12px;color:#aaa;font-size:11px;gap:12px}.browser-bar>span{letter-spacing:3px;font-size:12px}.browser-bar small{letter-spacing:0;font-size:9px;color:#777}.browser-bar button{border:1px solid #393939;color:#aaa;background:#171717;padding:6px 10px;font-size:10px}.browser-bar button:hover{color:#fff;border-color:#888}.notice{font-size:10px;color:#666;text-align:center;margin:15px 0 0;line-height:1.7}.notice a{color:#888}dialog{max-width:500px;background:#202020;color:#ccc;padding:30px;border:1px solid #777;line-height:1.8;font-size:13px}dialog::backdrop{background:#000b}dialog h2{font-size:19px;font-weight:400}#game-frame:fullscreen{border:0;width:auto;max-width:133.333vh;height:100vh;aspect-ratio:4/3;margin:auto}body:has(#game-frame:fullscreen){background:#000}@media(max-width:650px){main{padding:0}.browser-bar{padding:0 10px;flex-wrap:wrap}.browser-bar small{display:none}.notice{padding:0 15px}#menu label{font-size:9px;margin:7px 0}select{font-size:9px;min-width:110px;padding:3px}.map-selection img{height:60px}.menu-options h1{font-size:15px;margin:0}.subtitle{font-size:10px;margin:7px 0}.help{font-size:8px;margin-top:8px}.work-note{font-size:8px}.text-start{font-size:10px;padding:6px}.picture-button img{width:90px}nav{gap:20px}.browser-bar button{font-size:9px;padding:5px}.menu-options{left:31%;width:61%;top:7%;height:87%}}

#menu input[type=number]{font:11px Tahoma,sans-serif;min-width:190px;width:66%;color:#ddd;background:#222;border:1px solid #666;padding:5px;border-radius:0}#menu select:disabled,#menu input:disabled{opacity:.55}.rule-note{font-size:10px;color:#a8a8a8;text-align:right;margin:-4px 0 8px}
#dialog-layer{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:4/3;z-index:60;cursor:default;pointer-events:none}#game-frame.dialog-open #dialog-layer{pointer-events:auto;touch-action:none}#game-frame.screen-open #menu .original-menu-stage .menu-options{visibility:hidden}
#dialog-layer[hidden],.dialog-input[hidden]{display:none}
.dialog-input{position:absolute;z-index:61;opacity:0;border:0;padding:0;margin:0;font-size:16px;background:transparent;color:transparent;caret-color:transparent}
.rules-row{display:flex;align-items:center;gap:10px;width:66%;min-width:190px}
.rules-row #rules-summary{font-size:11px;color:#c8c8c8;line-height:1.4}
#game-type-button{flex:none;font:11px Tahoma,sans-serif;color:#ddd;background:linear-gradient(#3a3a3a,#1c1c1c);border:1px solid #888;padding:6px 10px;cursor:pointer}
#game-type-button:disabled{opacity:.5;cursor:default}

/* The legacy web form only stores the chosen values; the original screens are drawn by the dialog
   layer. Hidden from the first paint, and the menu stays invisible until original-menu.js has
   built the 800x600 stage, so a reload no longer flashes the old web menu. */
#menu .menu-options{visibility:hidden!important}
#menu:not(:has(.original-menu-stage)){visibility:hidden}

#gun-mouse{position:absolute;inset:0;margin:auto;z-index:70;pointer-events:none}#gun-mouse[hidden]{display:none}#game-frame.gun-cursor,#game-frame.gun-cursor *{cursor:none!important}
