* { box-sizing: border-box; }
html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:#000}
/* Title screen (covers entire viewport while active) */
#overlay{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;color:#fff;z-index:60;padding:20px}
#overlay.title-screen{background:linear-gradient(180deg,#021226 0%, rgba(2,18,38,0.85) 45%, rgba(0,0,0,0.65) 100%);backdrop-filter: blur(4px)}
#overlay h1{margin:0 0 12px 0;font-size:56px;letter-spacing:2px;text-transform:uppercase;text-shadow:0 6px 18px rgba(26,115,232,0.08), 0 2px 6px rgba(0,0,0,0.6);color:#fff}
#overlay p{margin:6px 0;font-size:18px;opacity:0.95}
#playBtn{padding:14px 22px;font-size:18px;border-radius:10px;background:linear-gradient(180deg,#4ea3ff,#1a73e8);border:0;color:#fff;cursor:pointer;box-shadow:0 10px 30px rgba(26,115,232,0.18)}
#playBtn:hover{transform:translateY(-2px);filter:brightness(1.03)}

/* While the title is active hide game UI so title is the only thing visible */
body.title-active #mainCanvas,
body.title-active #touchControls,
body.title-active #winModal{display:none !important}

/* Hide minimap visually while title is active but keep it in the layout so it can fade in */
body.title-active #minimap{opacity:0;pointer-events:none}

/* Timer (top-right). Hidden on title screen */
#timer{position:fixed;right:14px;top:14px;z-index:160;background:rgba(0,0,0,0.45);color:#fff;padding:8px 12px;border-radius:8px;font-weight:700;font-size:16px;box-shadow:0 6px 18px rgba(0,0,0,0.5)}
body.title-active #timer{display:none}

#score{position:fixed;right:14px;top:54px;z-index:160;background:rgba(0,0,0,0.45);color:#fff;padding:8px 12px;border-radius:8px;font-weight:700;font-size:16px;box-shadow:0 6px 18px rgba(0,0,0,0.5)}
body.title-active #score{display:none}

/* keep overlay content centered card */
#overlay{align-items:center}
#overlay .title-card{max-width:760px;text-align:center;padding:24px}
#overlay .title-card h1{display:block;margin:0 0 14px 0}
#overlay .title-card .subtitle{display:block;margin:0 0 18px 0;opacity:0.95}
#overlay .title-card #playBtn{display:inline-block}
#overlay .title-card .title-actions{display:inline-flex;gap:12px;margin:0 auto 12px auto}
#titleQuitBtn{padding:14px 22px;font-size:18px;border-radius:10px;background:linear-gradient(180deg,#4ea3ff,#1a73e8);border:0;color:#fff;cursor:pointer;box-shadow:0 10px 30px rgba(26,115,232,0.18)}
#overlay .title-card .title-message{margin-top:8px;color:#ffd700;font-weight:700}
canvas{display:block}
#message{margin-top:8px;color:#ffd700;font-weight:700}

/* Make only the main renderer cover the viewport and prevent page scrolling during touch */
#mainCanvas{width:100vw;height:100vh}
body,html{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none}

/* Overlay adjustments for small screens */
@media (max-width:600px){
	#overlay{padding:12px}
	#overlay h1{font-size:34px}
	#overlay p{font-size:15px}
	#playBtn{font-size:16px;padding:10px 14px}
}

/* Touch controls UI */
#touchControls{position:fixed;left:12px;bottom:12px;z-index:12;color:#fff;display:none;align-items:center;gap:10px}
.dpad{display:flex;flex-direction:column;align-items:center}
.dpad .hrow{display:flex;gap:8px;margin:6px 0}
.tbtn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:#fff;border-radius:8px;padding:12px 14px;font-size:18px}
.tbtn:active{background:rgba(255,255,255,0.18)}
.lookHint{margin-left:12px;background:rgba(0,0,0,0.45);padding:8px;border-radius:6px;font-size:13px}

@media (max-width:700px){
	#touchControls{left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between}
	.lookHint{flex:1;text-align:center}
}

/* Desktop help (WASD + mouse) */
#desktopHelp{position:fixed;left:12px;bottom:12px;z-index:150;color:#fff;display:none;align-items:center;gap:8px;background:rgba(0,0,0,0.42);padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.desktop-help .keys{display:flex;flex-direction:column;gap:6px;align-items:center}
.desktop-help .row{display:flex;gap:6px}
.desktop-help .key{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:8px 10px;border-radius:6px;font-weight:700;font-size:14px;min-width:30px;text-align:center}
.desktop-help .mouseHint{margin-top:6px;background:rgba(0,0,0,0);font-size:13px;opacity:0.95;text-align:center}

/* Hide the desktop help on small / touch-first devices and on the title screen */
@media (pointer:coarse){
	#desktopHelp{display:none}
}
body.title-active #desktopHelp{display:none}

/* Minimap at top center */
#minimap{position:fixed;left:50%;transform:translateX(-50%);top:12px;z-index:140;border-radius:8px;background:rgba(0,0,0,0.35);box-shadow:0 4px 12px rgba(0,0,0,0.6);pointer-events:none;opacity:1;transition:opacity 320ms ease}
@media (max-width:700px){
	#minimap{width:200px;height:140px}
}

/* Win modal */
#winModal{position:fixed;left:0;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:40}
#winModal[aria-hidden="false"]{display:flex}
.winContent{background:#111;color:#fff;padding:20px 22px;border-radius:10px;max-width:320px;text-align:center}
.winContent h2{margin:0 0 8px 0}
.winActions{margin-top:12px}
.winActions button{padding:10px 14px;font-size:16px}