* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; background: #0c1117; color: #e6edf3; }
a { color: #58a6ff; }
.container { max-width: 720px; margin: 60px auto; padding: 0 20px; }
h1 { font-size: 28px; margin: 0 0 8px; }
.subtitle { color: #8b949e; margin: 0 0 24px; }
.box { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 20px; }
.btn { display: inline-block; background: #238636; color: white; border: none; border-radius: 6px; padding: 10px 16px; font-size: 14px; cursor: pointer; text-decoration: none; }
.btn:hover { background: #2ea043; }
.btn:disabled { background: #444; cursor: not-allowed; }
.btn.secondary { background: #30363d; }
.btn.secondary:hover { background: #484f58; }
.muted { color: #8b949e; }
.error { color: #f85149; }
.ok { color: #3fb950; }

#authBar { position: fixed; top: 0; left: 0; right: 0; background: rgba(13,17,23,0.92); border-bottom: 1px solid #30363d; padding: 8px 16px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; z-index: 100; font-size: 13px; }
#authBar .pill { background: #21262d; padding: 4px 10px; border-radius: 12px; font-family: monospace; }

/* World */
.world-shell { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
#worldCanvas { display: block; background: #0a0e14; }
#hud { position: fixed; bottom: 12px; left: 12px; background: rgba(13,17,23,0.85); border: 1px solid #30363d; border-radius: 8px; padding: 10px 14px; font-family: monospace; font-size: 12px; line-height: 1.5; }
#hud .label { color: #8b949e; }
.center-msg { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(13,17,23,0.95); padding: 30px 50px; border: 1px solid #30363d; border-radius: 8px; text-align: center; }

/* D-pad tactile — fixé bas-droite, marche aussi à la souris sur desktop */
#dpad { position: fixed; right: 18px; bottom: 18px; width: 160px; height: 160px; z-index: 50; user-select: none; -webkit-user-select: none; touch-action: none; }
#dpad button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(13,17,23,0.55); color: #e6edf3; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.1s; padding: 0; }
#dpad button:hover, #dpad button:active { background: rgba(60,80,110,0.85); }
#dpad .up    { top: 0;     left: 54px; }
#dpad .down  { bottom: 0;  left: 54px; }
#dpad .left  { left: 0;    top: 54px; }
#dpad .right { right: 0;   top: 54px; }
@media (max-width: 600px) {
  #hud { font-size: 11px; padding: 8px 10px; }
}