/* Cubefield. The playfield is a 400x300 stage, exactly the size of the 2006 SWF; #stage is an
   overlay of that size that JS scales and positions to sit on top of the canvas, so every HUD
   element can be placed at the coordinates the original used.                                  */

/* [hidden] must win. Any class rule that sets display: would otherwise leave an invisible panel
   sitting on top of the game eating every click. */
[hidden] { display: none !important; }

:root {
  --serif: "Bookman Old Style", Bookman, "URW Bookman L", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ink: #14110f;
  --panel: #ffffff;
  --shadow: rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--ui);
  -webkit-text-size-adjust: 100%;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

#app { position: fixed; inset: 0; }

#gl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  transition: filter 90ms linear;
}
#gl.blurring { transition: none; }

#stage {
  position: absolute;
  top: 0; left: 0;
  width: 400px; height: 300px;
  transform-origin: 0 0;
  pointer-events: none;
  font-family: var(--serif);
}
#stage button, #stage input, #stage a { pointer-events: auto; }

/* score: the original's score clip sits at (8,8) with its text field 2px inside, 10pt */
#score {
  position: absolute; left: 10px; top: 10px;
  font-size: 10px; line-height: 12px;
  color: #000; letter-spacing: 0.02em;
  text-rendering: geometricPrecision;
}
#score.light { color: #fff; }

#quality {
  position: absolute; left: 10px; top: 25.45px;
  font-size: 10px; line-height: 12px; color: #000;
}
#quality.light { color: #fff; }
.q-label { opacity: 0.75; }

#speedup {
  position: absolute; left: 145px; top: 136px;
  width: 111px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(55, 55, 55, 0.5);
  border-radius: 6.5px;
  color: #fff; font-size: 16px; letter-spacing: 0.06em;
  transition: opacity 60ms linear;
}

#pausemsg {
  position: absolute; left: 145px; top: 131px;
  width: 111px; min-height: 38px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(55, 55, 55, 0.5);
  border-radius: 6.5px; color: #fff;
}
#pausemsg strong { font-size: 16px; font-weight: normal; letter-spacing: 0.06em; }
#pausemsg em { font-size: 10px; font-style: normal; white-space: nowrap; }

#menu {
  position: absolute; left: 63px; top: 50px;
  width: 274px; height: 153px;
  background: var(--panel);
  border-radius: 6.5px;
  box-shadow: 2px 3px 0 var(--shadow);
  text-align: center;
  color: #000;
  padding: 6px 10px 0;
  transition: opacity 120ms linear;
}
#wordmark {
  font-size: 26px; line-height: 30px; letter-spacing: 0.14em;
  font-weight: 700; color: #000;
}
#menu button {
  font: inherit; font-size: 11px; line-height: 1;
  margin: 5px 0 2px;
  padding: 5px 14px;
  border: 1px solid #9a9a9a;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #dcdcdc);
  color: #000; cursor: pointer;
}
#menu button:hover { background: linear-gradient(#ffffff, #ededed); }
#menu button:active { background: linear-gradient(#d6d6d6, #ffffff); }
#menu button:focus-visible { outline: 2px solid #ff6a00; outline-offset: 1px; }
#topline { margin: 3px 0 6px; font-size: 10px; }
#menu .hint { margin: 1px 0; font-size: 10px; color: #222; }
#menu .byline { margin: 7px 0 0; font-size: 9px; color: #555; letter-spacing: 0.05em; }

/* toolbar: not part of the original, so it stays out of the stage and out of the way */
#toolbar {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; gap: 8px; align-items: center;
  font-family: var(--ui); font-size: 12px;
}
#toolbar button {
  font: inherit;
  padding: 5px 11px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #14110f;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
#toolbar button:hover { background: #fff; }
#toolbar button:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; }
#fps { font-variant-numeric: tabular-nums; opacity: 0.5; min-width: 4.5em; text-align: right; }
body.dark-hud #toolbar button {
  background: rgba(20, 20, 20, 0.72); color: #f4f4f4; border-color: rgba(255, 255, 255, 0.3);
}
body.dark-hud #fps { color: #ddd; }

/* sheets */
.sheet {
  position: absolute; inset: 0;
  background: rgba(10, 10, 12, 0.55);
  overflow-y: auto;
  padding: 24px 16px 40px;
  z-index: 20;
  -webkit-overflow-scrolling: touch;
}
.sheet-body {
  max-width: 640px;
  margin: 0 auto;
  background: #fffdf9;
  border-radius: 12px;
  padding: 22px 24px 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  font-size: 14px; line-height: 1.55;
  color: #211d1a;
}
.sheet-body h2 { margin: 0 0 10px; font-size: 20px; font-family: var(--serif); letter-spacing: 0.02em; }
.sheet-body h3 { margin: 18px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: #7a6a58; }
.sheet-body p { margin: 8px 0; }
.sheet-body ul { margin: 6px 0; padding-left: 20px; }
.sheet-body li { margin: 4px 0; }
.sheet-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: #f0ece5; padding: 1px 4px; border-radius: 3px; }
.sheet-body kbd {
  font-family: var(--ui); font-size: 11px; padding: 1px 6px;
  border: 1px solid #c6bcae; border-bottom-width: 2px; border-radius: 4px; background: #fff;
}
.sheet-body label { display: flex; gap: 9px; align-items: flex-start; margin: 9px 0; cursor: pointer; }
.sheet-body label input { margin-top: 3px; flex: none; }
.sheet-body hr { border: 0; border-top: 1px solid #e6dfd4; margin: 18px 0 12px; }
.sheet-body .note { color: #6a5c4c; font-size: 13px; }
.sheet-body textarea {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; border: 1px solid #d6cdbf; border-radius: 6px; padding: 7px; resize: vertical;
  background: #fff; color: #211d1a;
}
.sheet-body .seedline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.sheet-body button {
  font: inherit; font-size: 13px; padding: 6px 14px;
  border: 1px solid #c6bcae; border-radius: 999px; background: #fff; color: #211d1a; cursor: pointer;
}
.sheet-body button:hover { background: #f4efe7; }
.sheet-body button:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; }
.sheet-body .close { margin-top: 20px; background: #211d1a; color: #fff; border-color: #211d1a; }
.sheet-body .close:hover { background: #3b332c; }
#replaystatus { font-size: 12px; color: #6a5c4c; margin-left: 6px; }

@media (max-width: 520px) {
  #toolbar { right: 8px; bottom: 8px; font-size: 11px; }
  .sheet { padding: 12px 8px 32px; }
  .sheet-body { padding: 18px 16px 22px; }
}

/* keyboard vs touch wording: the 2006 text on keyboards, a touch equivalent on phones */
.t-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .k-only { display: none; }
  .t-only { display: block; }
  #pausemsg em.t-only { display: inline; }
}

/* landscape phones: the side margins beside the stage are narrow, so stack the toolbar there
   instead of letting it sit on top of the right half of the playfield (where you steer right) */
@media (orientation: landscape) and (max-height: 500px) {
  #toolbar { flex-direction: column; align-items: flex-end; gap: 6px; right: 6px; bottom: 6px; font-size: 11px; }
  #toolbar button { padding: 4px 9px; }
  #fps { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #gl, #speedup, #menu { transition: none; }
}