*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:#0b0b0d;color:#eae7df;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#app{max-width:1200px;margin:0 auto;padding:16px}
.topbar{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #222}
.logo{width:56px;height:56px}
.brand h1{margin:0;font-size:1.4rem;font-weight:800;color:#ff7a00}
.brand p{margin:0;color:#aaa}
.actions{margin-left:auto;display:flex;gap:8px}
button,.fileLabel{background:#19181a;border:1px solid #333;color:#eee;padding:10px 14px;border-radius:12px;cursor:pointer}
button.primary{background:#ff7a00;border-color:#ff7a00;color:#111;font-weight:800}
button.ghost{background:transparent;border-color:#444}
a.ghost{padding:10px 14px;border:1px solid #444;border-radius:12px;text-decoration:none;color:#ccc}
.layout{display:grid;grid-template-columns:340px 1fr;gap:16px;margin-top:16px}
.panel{background:#111114;border:1px solid #262626;border-radius:16px;padding:16px}
.panel h2{margin:0 0 8px 0;color:#ff7a00}
.mt{margin-top:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drop{height:100px;border:2px dashed #333;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#888}
.fileLabel{display:inline-block;margin-top:8px}
.info{background:#0f0f11;border:1px solid #222;border-radius:12px;padding:8px;min-height:48px;color:#cfcfcf}
.gamewrap{position:relative;background:#0f0f10;border:1px solid #222;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
canvas#game{background:#0a0a0b;border-radius:12px;border:1px solid #222;width:100%;height:auto;max-height:70vh}
.hud{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.legend{color:#9f9f9f;font-size:0.9rem}
kbd{background:#1f1f21;border:1px solid #333;border-bottom-color:#111;border-radius:4px;padding:2px 5px;margin:0 2px}
.editorRow{display:flex;gap:8px;align-items:center;margin-top:8px}
.edstats{background:#0a0a0b;border:1px solid #222;border-radius:8px;padding:8px;height:120px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace;color:#c7c7c7}
.hidden{display:none}
.hint{color:#a7a7a7}
.foot{margin-top:18px;color:#888;text-align:center}
@media(max-width:980px){.layout{grid-template-columns:1fr}}


/* --- Nav color normalization (global override) --- */
header nav a,
header nav a:link,
header nav a:visited,
header nav a:focus,
header nav a:active,
nav .nav-link,
nav a {
  color: #ffffff !important;
  text-decoration: none;
}

/* Hover uses brand orange */
header nav a:hover,
nav a:hover {
  color: #ff7a00 !important;
}