/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { font-family:Arial,sans-serif; color:#333; }
a { color:#1f7ae0; text-decoration:none; }
.content { max-width:800px; margin:60px auto; padding:0 20px; }

/* Header */
.site-header { background:#1f7ae0; padding:10px; position:fixed; width:100%; top:0; z-index:100; }
.nav-bar a { margin:0 15px; color:#fff; font-weight:600; }

/* Footer */
.site-footer { background:#222; color:#ccc; text-align:center; padding:20px; margin-top:40px; }
.site-footer a { color:#ccc; margin:0 5px; }

/* Buttons */
.btn, button { padding:10px 20px; background:#1f7ae0; color:#fff; border:none; border-radius:4px; cursor:pointer; }
button:disabled { opacity:0.6; cursor:not-allowed; }

/* Game Container */
.game-container { position:relative; margin-top:80px; }
#gameCanvas { display:block; width:100%; height:auto; background:#87CEEB; }
#ui { position:absolute; top:10px; left:10px; right:10px; display:flex; align-items:center; z-index:10; }
#hud { margin-left:auto; background:rgba(255,255,255,0.7); padding:6px 12px; border-radius:6px; }

/* Overlay */
#overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); display:grid; place-items:center; }
.hidden { display:none; }
.panel { background:#fff; padding:20px; border-radius:8px; text-align:center; width:90%; max-width:320px; }

/* Forms */
form { display:flex; flex-direction:column; gap:12px; }
label { display:flex; flex-direction:column; font-weight:600; }
textarea { min-height:100px; }

/* Legal & FAQ Pages */
.content h1 { margin-bottom:20px; }
.content h2 { margin-top:20px; margin-bottom:8px; }
.content p { margin-bottom:12px; }