:root {
  color-scheme: dark;
  /* the landing page's palette and type */
  --ground:#17191c; --bone:#ece6da; --dust:#8f897e;
  --quake:#9c5a2a; --quake2:#7d8a3c; --quake3:#7a5a9e; --doom3:#b8321f; --bfg:#5b7c99; --abuse:#2f8a7a; --debris:#8a6a48; --secondreality:#8e2436; --kkrieger:#7a4a2e; --candytron:#7d3c8c;
  --display:'Big Shoulders Display','Arial Narrow','Helvetica Neue Condensed',sans-serif;
  --text:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#000; --fg:#e6e2d8; --dim:#9a958a; --accent:#c8862b; --panel:#141210; --line:#2c2823; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; overflow:hidden; }
#stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#000; }
#canvas { width:100% !important; height:100% !important; object-fit:contain; display:block; outline:none; background:#000; }
#canvas.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.92); z-index:20; padding:16px; }
.boot-card { width:min(520px,100%); text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:32px 28px; }
.boot-card h1 { margin:0 0 4px; font:800 44px/1.1 var(--display); letter-spacing:.02em; color:var(--accent); }
.boot-card .sub { margin:0 0 22px; color:var(--dim); }
#boot-status { min-height:1.4em; color:var(--fg); }
.bar { height:6px; background:#2a2622; border-radius:3px; margin:10px 0 18px; overflow:hidden; }
#boot-bar { height:100%; width:0; background:var(--accent); transition:width .15s; }
button, .filebtn { font:inherit; color:var(--fg); background:#221f1b; border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer; }
button:hover, .filebtn:hover { border-color:var(--accent); }
button:disabled { opacity:.45; cursor:default; }
button.primary { background:var(--accent); color:#111; border-color:var(--accent); font-weight:700; font-size:16px; padding:10px 34px; }
button.primary:hover:not(:disabled) { filter:brightness(1.1); }
.fine { color:var(--dim); font-size:12.5px; margin:16px 0 0; }
.fine b { color:var(--fg); }
code, kbd { font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace; background:#221f1b; padding:1px 5px; border-radius:4px; }
kbd { border:1px solid #3a352f; }

#toolbar { position:fixed; top:0; right:0; z-index:10; display:flex; gap:8px; align-items:center; padding:8px 10px; padding-top:calc(8px + env(safe-area-inset-top,0px)); background:rgba(10,9,8,.75); backdrop-filter:blur(6px); border-bottom-left-radius:10px; font-size:13px; flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
#toolbar label { display:inline-flex; gap:5px; align-items:center; color:var(--dim); }
#toolbar select { font:inherit; color:var(--fg); background:#221f1b; border:1px solid var(--line); border-radius:6px; padding:4px 6px; }

#hint { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:10; background:rgba(10,9,8,.8); border:1px solid var(--line); border-radius:999px; padding:8px 16px; color:var(--fg); pointer-events:none; }

.panel { position:fixed; top:56px; right:10px; z-index:15; width:min(520px, calc(100% - 20px)); max-height:calc(100% - 70px); overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.6); }
#boot:not([hidden]) ~ .panel { z-index:25; }	/* a panel opened from the boot screen sits above it */
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); }
.panel-head h2 { margin:0; font-size:16px; }
.panel-head .close { padding:2px 10px; font-size:18px; line-height:1; }
.panel-body { padding:14px; }
.panel-body p { margin:0 0 12px; }
.panel-body hr { border:0; border-top:1px solid var(--line); margin:14px 0; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.filebtn input { display:none; }
.filelist { border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.filelist .item { display:flex; align-items:center; gap:10px; padding:7px 10px; border-top:1px solid var(--line); }
.filelist .item:first-child { border-top:0; }
.filelist .name { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; min-width:110px; }
.filelist .meta { color:var(--dim); flex:1; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filelist .dir { background:#1c1915; color:var(--dim); padding:5px 10px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.filelist .empty { padding:10px; color:var(--dim); }
.filelist button { padding:3px 9px; font-size:12px; }
.msg { color:var(--dim); font-size:12.5px; min-height:1.2em; }
.msg.err { color:#e07a5f; }
label.block { display:block; }
label.block input { display:block; width:100%; margin-top:4px; font:inherit; color:var(--fg); background:#0d0c0a; border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
table.keys { border-collapse:collapse; margin-bottom:12px; }
table.keys td { padding:4px 10px 4px 0; vertical-align:top; }
#log { max-height:220px; overflow:auto; background:#0d0c0a; padding:8px; font-size:11.5px; white-space:pre-wrap; }
#fatal pre { text-align:left; white-space:pre-wrap; background:#0d0c0a; padding:10px; border-radius:6px; }
@media (max-width:560px) { #toolbar { font-size:12px; gap:6px; } .boot-card { padding:22px 16px; } .boot-card h1 { font-size:34px; } }
label.slider { display:block; margin:10px 0; }
label.slider output { color:var(--accent); margin-left:6px; font-variant-numeric:tabular-nums; }
label.slider input[type=range] { display:block; width:100%; margin-top:4px; accent-color:var(--accent); }
.seg { display:flex; gap:8px; margin:0 0 18px; text-align:left; }
.seg label { flex:1; display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#0d0c0a; }
.seg label:has(input:checked) { border-color:var(--accent); background:#1c1712; }
.seg input { margin-top:3px; }
.seg span { display:flex; flex-direction:column; gap:2px; }
.seg small { color:var(--dim); font-size:11.5px; line-height:1.3; }
@media (max-width:560px) { .seg { flex-direction:column; } }
.seg-q { margin:6px 0 4px; }
.seg-q label { padding:7px 6px; justify-content:center; text-align:center; }
.seg-q input { display:none; }
.seg-q span b { font-weight:600; font-size:13px; }
.panel a { color:var(--accent); }

/* ---- start screen: the game's own picture, its color rising from the foot, the name large ---- */
#boot.start {
  --tint:#444;
  flex-direction:column; align-items:stretch; justify-content:flex-start;
  background:#0e0f11; color:var(--bone); font:17px/1.55 var(--text);
  padding:calc(20px + env(safe-area-inset-top,0px)) clamp(20px,6vw,88px) calc(clamp(28px,7vh,72px) + env(safe-area-inset-bottom,0px));
  overflow-y:auto; isolation:isolate;
}
#boot.quake  { --tint:var(--quake);  --focus:50% 45%; }
#boot.quake2 { --tint:var(--quake2); --focus:62% 50%; }
#boot.quake3 { --tint:var(--quake3); --focus:50% 50%; }
#boot.doom3  { --tint:var(--doom3);  --focus:42% 50%; }
#boot.bfg    { --tint:var(--bfg);    --focus:54% 50%; }
#boot.abuse  { --tint:var(--abuse);  --focus:70% 45%; }
#boot.debris { --tint:var(--debris); --focus:50% 50%; }
#boot.secondreality { --tint:var(--secondreality); --focus:50% 50%; }
#boot.kkrieger { --tint:var(--kkrieger); --focus:50% 45%; }
#boot.candytron { --tint:var(--candytron); --focus:50% 50%; }
.start-art {
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 50%);
  z-index:-2; filter:saturate(.9) brightness(.85);
  animation:start-settle 2.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes start-settle { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:none; } }
#boot.start::after {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top, color-mix(in srgb,var(--tint) 90%,#000) 0%, color-mix(in srgb,var(--tint) 58%,transparent) 32%, transparent 66%),
    linear-gradient(to right, rgba(0,0,0,.5), transparent 58%),
    linear-gradient(to bottom, rgba(0,0,0,.5), transparent 20%);
}
.start-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.start-source {
  position:relative; display:grid; place-items:center; width:40px; height:40px; margin-right:-8px; padding:0;
  border:0; border-radius:50%; background:none; color:rgba(236,230,218,.75); cursor:pointer;
  transition:color .2s, background-color .2s;
}
.start-source:hover, .start-top:has(.source-menu:popover-open) .start-source { color:var(--bone); background:rgba(0,0,0,.35); }
.start-source:focus-visible { outline:2px solid var(--bone); outline-offset:2px; }
/* hover label, under the icon; the menu replaces it once open */
.start-source::after {
  content:attr(data-tip); position:absolute; top:calc(100% + 8px); right:0; white-space:nowrap; pointer-events:none;
  padding:6px 10px; border-radius:4px; background:rgba(23,25,28,.92); color:var(--bone);
  font:14px/1.2 var(--text); opacity:0; transform:translateY(-3px); transition:opacity .18s, transform .18s;
}
.start-source:hover::after, .start-source:focus-visible::after { opacity:1; transform:none; transition-delay:.25s; }
.start-top:has(.source-menu:popover-open) .start-source::after { display:none; }
.source-menu {
  position:fixed; inset:auto; margin:0;
  top:calc(68px + env(safe-area-inset-top,0px)); right:clamp(12px,calc(6vw - 8px),80px);
  width:min(320px, calc(100% - 24px)); padding:6px;
  background:rgba(23,25,28,.96); color:var(--bone); border:1px solid rgba(236,230,218,.14); border-radius:6px;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
}
.source-menu a { display:block; padding:10px 12px; border-radius:4px; color:var(--bone); text-decoration:none; }
.source-menu a:hover, .source-menu a:focus-visible { background:rgba(236,230,218,.08); outline:none; }
.source-menu b { display:block; font:800 20px/1.1 var(--display); letter-spacing:.03em; }
.source-menu span { display:block; margin-top:3px; font:14px/1.4 var(--text); color:rgba(236,230,218,.7); }
.start-back {
  padding:6px 0; color:rgba(236,230,218,.82); text-decoration:none;
  font:600 18px/1 var(--display); letter-spacing:.06em;
}
.start-back:hover { color:var(--bone); text-decoration:underline; text-underline-offset:4px; }

#boot.start .boot-card {
  margin-top:auto; padding:40px 0 0; width:min(640px,100%);
  text-align:left; background:none; border:0; border-radius:0;
}
#boot.start h1 {
  margin:0; color:var(--bone); font:900 clamp(72px,12vw,176px)/.84 var(--display);
  letter-spacing:-.005em; text-transform:uppercase; white-space:nowrap;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
#boot.start h1 small { display:block; font-size:.36em; font-weight:800; letter-spacing:.04em; margin-top:.2em; }
#boot.start .sub { margin:16px 0 0; color:rgba(236,230,218,.8); font:600 18px/1 var(--display); letter-spacing:.06em; }
.start-about { margin:18px 0 0; max-width:30em; color:rgba(236,230,218,.92); }
.start-about b { display:block; margin-top:.7em; color:var(--bone); }
#boot.start #boot-status { margin-top:26px; min-height:1.55em; font-size:15px; color:rgba(236,230,218,.85); }
#boot.start .bar { height:3px; max-width:420px; margin:8px 0 22px; border-radius:2px; background:rgba(236,230,218,.2); }
#boot.start #boot-bar { background:var(--bone); }
.start-actions { display:flex; flex-wrap:wrap; gap:10px; }
#boot.start .start-actions button {
  border-radius:4px; font:800 22px/1 var(--display); letter-spacing:.04em; padding:14px 26px 15px;
  color:var(--bone); background:rgba(0,0,0,.25); border:1.5px solid rgba(236,230,218,.6);
}
#boot.start .start-actions button:hover:not(:disabled) { border-color:var(--bone); }
#boot.start .start-actions button.primary { padding-inline:40px; color:var(--ground); background:var(--bone); border-color:var(--bone); }
#boot.start .start-actions button.primary:hover:not(:disabled) { filter:none; background:#fff; }
#boot.start .start-actions button:disabled { opacity:.4; }
#boot.start a:focus-visible, #boot.start button:focus-visible { outline:3px solid var(--bone); outline-offset:3px; }
#boot.start .fine { margin:22px 0 0; max-width:34em; font-size:14px; color:rgba(236,230,218,.72); }
#boot.start .fine b { color:var(--bone); }
#boot.start .fine code { background:rgba(0,0,0,.35); }

/* signature, bottom right; on narrow screens it follows the text */
.start-maker {
  position:fixed; right:clamp(20px,6vw,88px); bottom:calc(clamp(28px,7vh,72px) + env(safe-area-inset-bottom,0px));
}
.start-maker img { display:block; height:34px; width:auto; }
.start-maker:focus-visible { outline:3px solid var(--bone); outline-offset:3px; }
@media (max-width:900px) { .start-maker { position:static; align-self:flex-start; margin-top:28px; } }

/* Doom 3 on a phone or tablet: the message replaces the controls */
#boot.start.blocked .bar, #boot.start.blocked .start-actions, #boot.start.blocked .fine { display:none; }
#boot.start.blocked #boot-status { max-width:30em; font-size:17px; font-weight:700; color:var(--bone); }

/* phones: more of the screen is text, so the color climbs higher */
@media (max-width:700px) {
  #boot.start::after {
    background:
      linear-gradient(to top, color-mix(in srgb,var(--tint) 92%,#000) 0%, color-mix(in srgb,var(--tint) 70%,transparent) 48%, transparent 82%),
      linear-gradient(to bottom, rgba(0,0,0,.5), transparent 20%);
  }
  #boot.start h1 { font-size:clamp(64px,19vw,110px); }
}
@media (prefers-reduced-motion:reduce) { .start-art { animation:none; } }

/* ---- "All games": top-left, shown with the toolbar while the mouse is free ---- */
#corner {
  position:fixed; top:0; left:0; z-index:10; display:flex; align-items:center;
  padding:0 4px; padding-top:env(safe-area-inset-top,0px);
  background:rgba(10,9,8,.75); backdrop-filter:blur(6px); border-bottom-right-radius:10px;
}
#corner a { padding:13px 12px 12px; color:var(--bone); text-decoration:none; font:700 18px/1 var(--display); letter-spacing:.05em; }
#corner .corner-maker { padding:9px 12px 8px; }
#corner .corner-maker img { display:block; height:21px; width:auto; }
#corner .corner-maker:hover { text-decoration:none; opacity:.85; }
#corner #leave { color:rgba(236,230,218,.8); border-left:1px solid rgba(236,230,218,.2); }
#corner a:hover { color:var(--bone); text-decoration:underline; text-underline-offset:4px; }
#corner a:focus-visible { outline:3px solid var(--bone); outline-offset:-3px; }
#toolbar[hidden] ~ #corner { display:none; }
#toolbar { max-width:calc(100% - 240px); }

#leave-dialog {
  width:min(440px, calc(100% - 32px)); padding:28px 28px 26px; margin:auto;
  background:var(--ground); color:var(--bone); border:1px solid rgba(236,230,218,.16); border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.6); font:16px/1.55 var(--text);
}
#leave-dialog::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }
#leave-dialog h2 { margin:0; font:800 34px/1 var(--display); letter-spacing:.01em; }
#leave-dialog p { margin:12px 0 0; color:rgba(236,230,218,.85); }
.leave-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.leave-actions button {
  border-radius:4px; font:800 20px/1 var(--display); letter-spacing:.04em; padding:12px 22px 13px;
  color:var(--bone); background:transparent; border:1.5px solid rgba(236,230,218,.6);
}
.leave-actions button:hover { border-color:var(--bone); }
.leave-actions button.primary { color:var(--ground); background:var(--bone); border-color:var(--bone); font-size:20px; padding:12px 22px 13px; }
.leave-actions button.primary:hover { filter:none; background:#fff; }
.leave-actions button:focus-visible { outline:3px solid var(--bone); outline-offset:3px; }