:root{
  --fg:#ff4d6d;
  --panel-bg: rgba(0,0,0,0.85);
  --panel-fg:#ff4d6d;
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:#000; overflow:hidden;
  font-family: ui-monospace, "Courier New", monospace;
  -webkit-user-select:none; user-select:none;
}
#viewport{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000; overflow:hidden;
}
#gameContainer{
  position:relative; flex:none;
  transform-origin: center center;
}
#view{ display:block; touch-action:none; cursor:crosshair; image-rendering:pixelated; }

#progress{
  position:absolute; left:14px; top:14px;
  font-size:14px; letter-spacing:0.05em;
  color:#ddd; opacity:0.8; pointer-events:none; text-transform:uppercase;
}
#speedrunTimer{
  position:absolute; left:14px; top:40px;
  font-size:14px; letter-spacing:0.05em;
  color:#ffd23f; opacity:0.9; pointer-events:none;
  font-variant-numeric:tabular-nums;
}
#fps{
  position:absolute; right:14px; bottom:14px;
  font-size:12px; color:#888; opacity:0.5; pointer-events:none;
}
#gameTopRight{
  position:absolute; top:12px; right:12px; z-index:10;
  display:none; gap:8px;
}
#gameTopRight button{
  width:40px; height:40px;
  background:var(--panel-bg); color:var(--panel-fg);
  border:2px solid var(--panel-fg); border-radius:6px;
  font-size:17px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#gameTopRight button:hover{ background:var(--panel-fg); color:#000; }

#tray{
  position:absolute; left:14px; bottom:50px; z-index:10;
  display:flex; gap:10px;
}
.swatchBtn{
  width:52px; height:52px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.25);
  cursor:pointer; padding:0; position:relative;
  background:#111;
}
.swatchBtn.selected{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.35); }
.swatchBtn .dot{ position:absolute; inset:7px; border-radius:50%; }

#winOverlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:16px;
  background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none; transition:opacity 0.6s ease;
  z-index:30;
}
#winOverlay.show{ opacity:1; pointer-events:auto; }
#winOverlay h1{
  font-size:32px; letter-spacing:0.15em; color:#fff; margin:0;
  text-transform:uppercase; text-shadow:0 0 18px rgba(255,180,80,0.8);
}
#winTime{
  font-size:14px; letter-spacing:0.1em; color:#ffd23f;
  text-transform:uppercase; font-variant-numeric:tabular-nums;
}
#winThanks{
  font-size:15px; letter-spacing:0.12em; color:#ffd23f;
  text-transform:uppercase; display:none; text-shadow:0 0 12px rgba(255,210,63,0.5);
}
#winOverlay button{
  font-family:inherit; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  background:transparent; color:#fff; border:2px solid #fff; padding:10px 22px; cursor:pointer;
}
#winOverlay button:hover{ background:#fff; color:#000; }

/* ---------- Main menu ---------- */
#menuOverlay{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:rgba(0,0,0,0.92);
}
#menuOverlay h1{
  font-size:28px; letter-spacing:0.2em; color:#fff; margin:0;
  text-transform:uppercase; text-shadow:0 0 18px rgba(255,180,80,0.6);
}
#introBurnOverlay{ position:fixed; z-index:55; pointer-events:none; image-rendering:pixelated; }
#menuList{ display:flex; flex-direction:column; gap:10px; min-width:280px; }
.menu-speedrun{
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--panel-fg); opacity:0.85; cursor:pointer; user-select:none;
  padding:2px 4px;
}
.menu-speedrun input{ accent-color:var(--panel-fg); cursor:pointer; }
.menu-row{ display:flex; gap:8px; align-items:stretch; }
.menu-level{
  flex:1;
  background:transparent; color:var(--panel-fg);
  border:2px solid var(--panel-fg); padding:12px 18px;
  font-family:inherit; font-size:14px; letter-spacing:0.1em; cursor:pointer;
  text-transform:uppercase; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.menu-level:hover{ background:var(--panel-fg); color:#000; }
.menu-level.done{ color:#fff; border-color:#fff; }
.menu-level.locked{ opacity:0.45; cursor:not-allowed; }
.menu-level.locked:hover{ background:transparent; color:var(--panel-fg); }
.menu-dots{ display:flex; gap:5px; }
.menu-dots i{ width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(255,255,255,0.4); }