/* Madrid Explorer: Windows 98 / Internet Explorer chrome. */
:root{font:12px Tahoma,"MS Sans Serif",Verdana,sans-serif;color:#000;background:#c0c0c0;--paper:#c0c0c0;--green:#000080;--line:#808080;--muted:#333;--face:#c0c0c0;--light:#fff;--dark:#404040;--navy:#000080;--accent:#ffe249;--raised:inset 1px 1px #fff,inset -1px -1px #404040,inset 2px 2px #dfdfdf,inset -2px -2px #808080;--sunken:inset 1px 1px #404040,inset -1px -1px #fff,inset 2px 2px #808080,inset -2px -2px #dfdfdf}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit;color:inherit}button{border:0;border-radius:0;background:var(--face);box-shadow:var(--raised);min-height:30px;padding:7px 12px;cursor:pointer}button:hover{background:#d4d4d4}button:active,button[aria-pressed=true]{box-shadow:var(--sunken);background:#dfdfdf}button:disabled{color:#808080;text-shadow:1px 1px white;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:1px dotted #000;outline-offset:-5px}button.primary{font-weight:bold;outline:1px solid #000;outline-offset:1px}a{color:#000080;text-underline-offset:2px}a:visited{color:#800080}h1,h2,p{margin:0}h1{font:bold 12px Tahoma,Verdana,sans-serif}h2{font:bold 17px Tahoma,Verdana,sans-serif;line-height:1.3}p{font-size:12px;line-height:1.5}h2+p{margin-top:12px}[hidden]{display:none!important}.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}#map{display:block;width:100vw;height:100dvh;touch-action:none;outline-offset:-4px}
header,#place,#setup,#arcade,#game-hud,#game-guidance,nav,#compass,#status,footer,#production,#landmark-browser{position:fixed;z-index:3}header{top:0;left:0;width:100%;padding:3px;background:var(--face);box-shadow:var(--raised)}.titlebar,.window-caption{background:linear-gradient(90deg,#000080,#086aa8);color:#fff;font-weight:bold;min-height:24px;display:flex;align-items:center;padding:3px 4px;gap:6px}.titlebar h1,.titlebar h2{flex:1;font:bold 12px Tahoma,Verdana,sans-serif}.titlebar button{color:#000;min-width:24px;min-height:20px;padding:0 5px;font:bold 15px Tahoma;box-shadow:var(--raised)}.ie-logo{font:bold italic 23px Georgia;line-height:17px;color:#c5e8ff;text-shadow:1px 1px #000}.menu-strip{display:flex;align-items:center;gap:2px;padding:2px 0;border-bottom:1px solid #808080;box-shadow:0 1px white}.menu-strip button{box-shadow:none;min-height:24px;padding:3px 10px}.menu-strip button:hover{background:#000080;color:white}.menu-strip a{color:black;text-decoration:none;padding:4px 10px}.menu-strip a:hover{background:#000080;color:white}.browser-tools{display:flex;align-items:center;gap:5px;padding:5px 4px;border-bottom:1px solid #808080;box-shadow:0 1px white}.browser-tools button{white-space:nowrap}.browser-tools button>span:first-child{font-size:17px;vertical-align:middle;margin-right:4px;color:#000080}.browser-tools label{display:flex;align-items:center;gap:5px;margin-left:9px;white-space:nowrap}.browser-tools input[type=checkbox]{width:15px;height:15px;min-height:0;margin:0;accent-color:#000080}#search-panel{padding:5px 5px 2px}.address-row{display:flex;align-items:center;gap:10px}.address-row>label{font-size:11px;min-width:48px}input,select{width:100%;padding:8px;background:#fff;box-shadow:var(--sunken);border:0;border-radius:0;min-height:32px;font-size:12px}.search{position:relative;flex:1}#search-note{font-size:10px;color:#404040;margin:3px 0 0 58px}#results{position:absolute;top:100%;left:0;right:0;background:white;box-shadow:var(--sunken);border:1px solid #000;max-height:45dvh;overflow:auto;z-index:5}#results button{display:block;width:100%;text-align:left;box-shadow:none;background:white;font-size:12px;padding:8px 10px}#results button:hover,#results button[aria-selected=true]{background:#000080;color:white}
#landmark-browser{left:10px;top:165px;width:255px;background:var(--face);padding:3px;box-shadow:var(--raised)}.window-body{padding:8px}.window-hint{padding-top:7px;font-size:11px;color:#333}#landmark-list{margin-top:7px;max-height:38dvh;overflow:auto;background:white;box-shadow:var(--sunken);padding:2px}#landmark-list button{display:flex;align-items:center;gap:7px;width:100%;text-align:left;box-shadow:none;background:white;padding:8px;min-height:34px;font-size:11px}#landmark-list button::before{content:"▦";font-size:17px;color:#806000}#landmark-list button:hover,#landmark-list button:focus-visible{background:#000080;color:white}#landmark-list button:hover::before{color:#ffe249}#landmark-loading{font-size:11px;margin:6px 0}#landmark-state{margin-right:auto}#place{left:278px;top:165px;width:310px;padding:35px 16px 16px;background:var(--face);box-shadow:var(--raised);max-height:calc(100dvh - 285px);overflow:auto}.window-caption{position:absolute;top:3px;left:3px;right:3px;padding-right:30px;min-height:24px;font-size:11px}#place p{margin:10px 0}#place h2{font-size:18px}.close{position:absolute;right:6px;top:6px;z-index:1;padding:0;min-width:21px;min-height:18px;height:18px;font:bold 14px Tahoma;background:#c0c0c0}.subtle{font-size:11px;color:#404040}.place-actions{display:flex;gap:8px;margin-top:16px}.place-actions button{font-size:11px;padding:8px}#compass{right:12px;top:165px;width:40px;height:52px;display:grid;place-content:center;text-align:center;background:var(--face);box-shadow:var(--raised);font-size:10px}#compass strong{font-size:27px;font-weight:normal}
#arcade{bottom:30px;left:50%;transform:translateX(-50%);padding:5px;background:var(--face);box-shadow:var(--raised)}.modes{display:flex;gap:5px}.modes button{min-width:92px;font-size:11px;padding:8px 10px;min-height:46px}.modes button span{font-size:19px;margin-right:7px;color:#000080}.modes button[aria-pressed=true]{background:#e0e0e0;font-weight:bold;outline:1px dotted #333;outline-offset:-5px}nav{right:12px;bottom:32px;display:flex;gap:4px;background:var(--face);padding:4px;box-shadow:var(--raised)}nav button{min-width:36px;padding:8px}#status{left:12px;bottom:34px;max-width:255px;padding:6px 9px;background:#ffffe1;border:1px solid #000;font-size:10px;pointer-events:none}#production{left:12px;bottom:90px;font-size:11px;background:var(--face);padding:10px;box-shadow:var(--raised);max-width:300px}footer{bottom:0;left:0;width:100%;min-height:24px;display:flex;align-items:center;gap:16px;background:var(--face);padding:3px 8px;font-size:10px;box-shadow:inset 0 1px white;border-top:1px solid #808080}footer>span,footer>a{padding:2px 6px;box-shadow:inset 1px 1px #808080,inset -1px -1px white}footer a{white-space:nowrap}#pin{position:fixed;z-index:2;width:12px;height:12px;border:2px solid #000;background:#ffe249;transform:translate(-50%,-50%);pointer-events:none}#landmarks{position:fixed;inset:0;z-index:2;pointer-events:none}.landmark{position:absolute;pointer-events:auto;width:23px;height:23px;min-height:23px;min-width:23px;padding:0;transform:translate(-50%,-50%);background:#ffe249;border:1px solid #000;box-shadow:1px 1px black;font-size:11px}.landmark:hover{background:white}.landmark:focus-visible{outline:2px solid navy;outline-offset:2px}#hover-label{position:fixed;z-index:4;pointer-events:none;background:#ffffe1;color:#000;border:1px solid #000;padding:6px 9px;font-size:12px;max-width:280px;box-shadow:2px 2px #0005}
#setup{right:12px;bottom:105px;width:315px;padding:36px 18px 18px;background:var(--face);box-shadow:var(--raised);max-height:calc(100dvh - 275px);overflow:auto}#vehicle-preview{display:block;width:100%;height:115px;background:#ddd;box-shadow:var(--sunken);margin-bottom:12px}#setup-model{margin-bottom:5px}#setup-description{margin:12px 0}#setup-keys{font-size:11px;margin:12px 0}#setup .primary{width:100%}#setup-error{color:#a00000;margin-top:10px}#race-options label{display:block;font-size:11px;margin:10px 0 5px}#route-summary{font-size:11px;margin-top:6px}#preview-route{width:100%;margin-bottom:10px}body.route-preview #vehicle-preview,body.route-preview #setup-description,body.route-preview #setup-keys,body.route-preview #setup-model{display:none}body.route-preview #setup h2{font-size:17px;margin:4px 0 12px}
#game-hud{top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;background:var(--face);padding:10px 14px;box-shadow:var(--raised)}#game-hud>div{white-space:nowrap}#game-hud strong{font-variant-numeric:tabular-nums;font:22px "Courier New",monospace;font-weight:bold}#game-hud span{font-size:10px}#race-hud{min-width:174px;text-align:left}#race-hud strong{display:block;font-size:19px}#race-hud span{display:block;white-space:nowrap}#game-hud button{min-width:30px;padding:5px;font-size:18px}#game-guidance{left:50%;bottom:120px;transform:translateX(-50%);background:var(--face);padding:10px 14px;box-shadow:var(--raised);min-width:300px;max-width:calc(100vw - 24px);text-align:center}#game-note{font-size:12px}#game-note.accionable{cursor:pointer;text-decoration:underline;font-weight:bold}#junction{display:flex;gap:5px;justify-content:center;margin-top:10px}#junction button{font-size:11px;padding:7px}#junction button[aria-pressed=true]{background:#dfdfdf;font-weight:bold}progress{width:100%;height:12px;accent-color:#000080;margin-top:10px}#countdown{position:fixed;z-index:4;left:50%;top:44%;transform:translate(-50%,-50%);font:bold 78px "Courier New",monospace;color:#fff;text-shadow:3px 3px #000;pointer-events:none}#touch-controls{position:fixed;z-index:3;left:12px;right:12px;bottom:calc(36px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}#touch-controls>div{display:flex;gap:10px;pointer-events:auto;align-items:flex-end}#touch-controls button{border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none;font-weight:bold;background:var(--face);padding:0;line-height:1}#touch-controls .touch-steering button{width:72px;height:72px;font-size:30px}#touch-controls .touch-pedals{position:relative}#touch-controls .btn-gas{width:84px;height:84px;font-size:32px;background:#dfdfdf}#touch-controls .btn-freno{width:68px;height:68px;font-size:26px}#touch-controls .btn-mano{position:absolute;top:-48px;right:8px;width:44px;height:44px;font-size:9px}#touch-stick{width:128px;height:128px;border-radius:50%;background:var(--face);box-shadow:var(--sunken);pointer-events:auto;position:relative;touch-action:none}#touch-stick[hidden]{display:none}#touch-stick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;background:#dfdfdf;box-shadow:var(--raised);transform:translate(-50%,-50%);pointer-events:none}
dialog{position:fixed;border:0;border-radius:0;padding:42px 22px 22px;background:var(--face);color:#000;max-width:380px;width:calc(100vw - 24px);box-shadow:var(--raised)}dialog::backdrop{background:#0006}dialog button{display:block;width:100%;margin-top:10px}dialog p{margin:12px 0}body.playing header,body.playing #place,body.playing #arcade,body.playing #status,body.playing nav,body.playing #pin,body.playing #landmark-browser,body.preparing #landmark-browser{display:none!important}body.playing #compass{top:10px}body.playing footer>span:not(:first-child){display:none}
@media(hover:hover) and (pointer:fine){#touch-controls .touch-steering,#touch-controls .touch-pedals,#touch-controls #touch-stick{display:none}}
@media(max-width:1000px){#arcade{left:12px;transform:none}#status{bottom:95px}nav{bottom:32px}#place{left:278px;width:300px}#setup{bottom:103px}#game-hud{gap:12px;max-width:calc(100vw - 80px);left:10px;transform:none}}
@media(max-width:600px){header{padding:2px}.titlebar h1{font-size:11px}.titlebar button{min-width:30px;min-height:24px}.menu-strip{display:none}.browser-tools{gap:4px;padding:4px 2px;flex-wrap:wrap}.browser-tools button{min-height:36px;padding:6px;font-size:11px}.browser-tools button>span:first-child{font-size:15px;margin-right:2px}.browser-tools label{margin-left:0;font-size:10px}.browser-tools label input{width:14px;height:14px}.address-row{gap:5px}.address-row>label{min-width:43px;font-size:10px}#search-panel{padding:4px 2px}#search-note{margin-left:48px;font-size:9px}input,select{min-height:36px}#compass{top:151px;right:8px;width:32px;height:43px}#landmark-browser{left:8px;right:8px;top:154px;width:auto;max-height:calc(100dvh - 255px);overflow:auto}#landmark-list{max-height:36dvh}#landmark-list button{min-height:44px;font-size:12px}#place{left:8px;right:8px;top:154px;width:auto;max-height:calc(100dvh - 270px);padding:35px 14px 14px}#place h2{font-size:17px}.close{min-width:30px;min-height:24px;height:24px}#arcade{left:8px;right:8px;bottom:29px;max-width:none;width:auto;transform:none;padding:5px}.modes{gap:4px}.modes button{min-width:0;flex:1;min-height:48px;padding:7px 4px;font-size:10px}.modes button span{display:block;margin:0 0 3px;font-size:17px}nav{right:8px;bottom:96px;padding:3px}nav button{min-width:36px;min-height:36px;padding:5px}nav #share{display:none}#status{left:8px;bottom:101px;max-width:calc(100vw - 155px);font-size:10px;padding:4px}footer{gap:5px;min-height:24px;font-size:8px;padding:3px 4px}footer>span:nth-child(2){display:none}footer>span,footer>a{padding:2px 3px}#setup{right:8px;left:8px;bottom:100px;width:auto;max-height:calc(100dvh - 120px);padding:36px 16px 16px}body.preparing header,body.preparing #place,body.preparing nav,body.preparing #status{display:none}body.preparing #compass{top:10px}#vehicle-preview{height:85px}#setup h2{font-size:19px}#setup-description{font-size:12px}#setup-keys{margin:10px 0}#game-hud{top:8px;left:8px;gap:6px;padding:7px 8px;max-width:calc(100vw - 55px)}#game-hud button{min-width:32px;min-height:36px;font-size:18px;padding:4px}#game-hud strong{font-size:20px}#game-hud span{font-size:11px}#vehicle-name{font-size:10px}#game-guidance{bottom:calc(172px + env(safe-area-inset-bottom,0px));min-width:0;width:calc(100vw - 16px);padding:9px}#touch-controls{left:8px;right:8px;bottom:calc(34px + env(safe-area-inset-bottom,0px))}#touch-controls>div{gap:8px}#touch-controls .touch-steering button{width:66px;height:66px;font-size:27px}#touch-controls .btn-gas{width:78px;height:78px;font-size:30px}#touch-controls .btn-freno{width:62px;height:62px;font-size:24px}#touch-controls .btn-mano{top:-44px;right:6px;width:42px;height:42px;font-size:9px}#touch-stick{width:116px;height:116px}#touch-stick-knob{width:52px;height:52px}#flight-height{max-width:none;white-space:nowrap!important;flex-shrink:0}#race-hud{max-width:158px;min-width:128px}#race-hud strong{font-size:19px}#race-hud #race-progress{display:none}#junction button{flex:1;font-size:10px;min-height:40px}#production{bottom:170px;left:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* The compass is decorative and must never intercept a window's close button. */
#compass{pointer-events:none}
@media(max-width:600px){body:not(.playing):not(.preparing) #place:not([hidden]) ~ #compass,body:not(.playing):not(.preparing) #landmark-browser:not([hidden]) ~ #compass{top:auto;bottom:166px}}

#car-size-options label{display:block;font-size:11px;margin:10px 0 5px}#car-size-options{margin:10px 0}body.route-preview #car-size-options{display:none}

/* Agrupacion tactil: direccion a la izquierda; velocidad y altura juntas a */
/* la derecha (en vuelo el crucero mantiene 16 m/s sin pedal, asi que el */
/* pulgar derecho alterna pedales y Subir/Bajar sin soltar la direccion). */

/* Telefonos apaisados (pantalla baja): el aviso va en la banda de los */
/* controles, en el hueco central muerto: el coche queda encuadrado hacia */
/* arriba y el aviso no tapa ni el coche ni la carretera. */
@media(max-height:480px){#game-guidance{top:auto;bottom:40px;left:142px;transform:none;min-width:0;max-width:calc(100vw - 362px);padding:5px 10px}#game-guidance #junction button{min-height:36px}#race-hud #race-progress,#race-hud #race-best{display:none}}
@media(max-height:480px){body[data-mode=flight] #game-guidance{max-width:calc(100vw - 428px)}}
@media(max-height:480px) and (max-width:600px){#game-guidance{left:109px;max-width:calc(100vw - 271px)}body[data-mode=flight] #game-guidance{max-width:calc(100vw - 328px)}}
/* En carreras estrechas el bloque de vueltas no cabe con tres botones en
   una sola fila. Los botones conservan tamaño táctil y quedan dentro del HUD. */
@media(max-width:360px){
 body[data-mode=race] #game-hud{display:grid;grid-template-columns:48px minmax(0,1fr) repeat(3,32px);gap:4px;width:calc(100vw - 55px);padding:7px 6px}
 body[data-mode=race] #race-hud{min-width:0;max-width:none}
 body[data-mode=race] #race-hud strong{font-size:15px}
 body[data-mode=race] #race-hud span{font-size:10px}
 body[data-mode=race] #race-best{display:none}
 body[data-mode=race] #game-hud button{width:32px}
}
/* En vuelo estrecho pasa lo mismo: altura + contador de anillos + tres
   botones no caben en una fila; la rejilla mantiene los botones dentro. */
@media(max-width:420px){
 body[data-mode=flight] #game-hud{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) repeat(3,32px);gap:4px;width:calc(100vw - 55px);padding:7px 6px}
 body[data-mode=flight] #flight-height{white-space:normal!important;flex-shrink:1}
 body[data-mode=flight] #game-hud button{width:32px}
}

/* Pulsación sostenida, también con varios dedos o teclado. */
#touch-controls [data-key].control-held{box-shadow:var(--sunken);background:#000080;color:#fff;outline:1px dotted #fff;outline-offset:-5px}

#paint-options{margin:6px 0}
#paint-options>label{display:block;font-size:12px;margin-bottom:3px}
#paint-swatches{display:flex;gap:4px}
.paint-swatch{width:22px;height:22px;padding:0;border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;background:var(--swatch);cursor:pointer}
.paint-swatch.is-on{border-color:#808080 #dfdfdf #dfdfdf #808080;outline:2px solid #000080;outline-offset:-4px}

/* Telefonos muy estrechos: los controles grandes siguen por encima de 44px
   de objetivo tactil pero dejan hueco central para ver la carretera. */
@media(max-width:340px){
 #touch-controls .touch-steering button{width:58px;height:58px;font-size:24px}
 #touch-controls .btn-gas{width:70px;height:70px;font-size:26px}
 #touch-controls .btn-freno{width:56px;height:56px;font-size:21px}
 #touch-stick{width:104px;height:104px}#touch-stick-knob{width:46px;height:46px}
}

#touch-controls .btn-freno.atras{font-size:13px}

/* Compact explorer chrome: the city owns the viewport. */
::selection{background:#000080;color:white}input{caret-color:#000080}*{scrollbar-color:#808080 #dfdfdf;scrollbar-width:thin}
.menu-strip{display:none}.browser-tools{position:absolute;right:9px;top:33px;border:0;box-shadow:none;padding:0;background:var(--face)}
.browser-tools #home-map,.browser-tools #find-place{display:none}.browser-tools button{min-height:32px}.browser-tools label{font-size:11px;margin-right:6px}
#search-panel{padding:5px 300px 5px 5px}#search-note{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.address-row>label{min-width:48px}
#landmark-browser{top:87px;left:12px}#place{top:87px;left:12px}#compass{top:87px;right:12px}
#arcade{padding:4px}.modes button{min-height:38px;min-width:87px}.modes button span{font-size:16px}#status{background:var(--face);border:0;box-shadow:var(--sunken);padding:5px 8px}
#minimap{position:fixed;right:12px;bottom:90px;z-index:3;width:208px;padding:4px;background:var(--face);box-shadow:var(--raised)}
#minimap .titlebar{min-height:21px;font-size:11px;justify-content:space-between}#minimap .titlebar button{min-width:20px;min-height:17px;height:17px}
#minimap-map{width:200px;height:150px;display:block;cursor:crosshair;margin-top:3px;touch-action:none}#minimap-map:focus-visible{outline:2px solid navy;outline-offset:1px}
#keyboard-help{font-size:11px;line-height:1.7;max-width:70ch;margin:0 auto 5px;color:#222}#game-note{font-size:11px}#game-guidance{bottom:38px;min-width:0;padding:8px 12px}
body.playing #minimap{top:100px;bottom:auto}body.preparing #minimap{display:none}body.playing #compass{display:none}
@media(pointer:fine){#touch-controls{display:none!important}#game-guidance{bottom:38px;max-width:calc(100vw - 40px);left:50%;transform:translateX(-50%)} }
@media(max-width:700px){
 .browser-tools{top:32px;right:5px}.browser-tools label{display:none}.browser-tools button{min-height:36px;font-size:11px}
 #search-panel{padding:5px 155px 5px 3px}.address-row>label{display:none}.search input{font-size:12px;min-width:0}header{min-height:78px}
 #landmark-browser,#place{top:87px;left:8px;right:8px;width:auto}#compass{top:87px}
 #minimap{right:8px;bottom:146px;width:128px}#minimap-map{width:120px;height:90px}body.playing #minimap{top:90px;width:108px}body.playing #minimap-map{width:100px;height:75px}
 #arcade{left:8px;right:8px}.modes button{min-width:0;min-height:44px}.modes button span{display:inline;margin-right:4px}
 #game-guidance{bottom:calc(174px + env(safe-area-inset-bottom,0px));padding:7px 10px}
 footer>span:nth-child(2){display:none}#status{max-width:calc(100vw - 155px)}
}
@media(max-height:480px) and (pointer:coarse){#game-guidance{left:150px;bottom:34px;max-width:calc(100vw - 320px);transform:none}body.playing #minimap{top:85px;width:108px}body.playing #minimap-map{width:100px;height:75px}}

#minimap-hint{font-size:10px;padding:4px 2px}#minimap-map{height:auto!important}body[data-mode=race] #minimap{display:none}

.landmark{background:#fffdf5;color:#000080;border:0;box-shadow:0 1px 3px #0004;border-radius:50%;width:25px;height:25px;min-height:25px}.landmark:hover{background:#ffe249}.landmark:focus-visible{outline:2px solid navy;outline-offset:2px}

/* Keep functional labels readable, including the retro status bar. */
button:disabled{color:#505050}#status,#minimap-hint,.modes button,#junction button,#game-hud span{font-size:11px}
footer{font-size:10px;gap:5px}footer>span,footer>a{font-size:10px}#touch-controls .btn-mano{font-size:11px}
#minimap .titlebar>span{flex:1}#minimap .titlebar button{font:14px Tahoma;max-width:24px;overflow:hidden}
@media(max-width:600px){footer>span:nth-child(3){display:none}.modes button{font-size:11px}footer>span,footer>a{font-size:10px}#minimap .titlebar button{min-width:20px;width:20px} }
