/*
  Classics revisited - shared shell for the browser ports of jukimv1986's
  old VB6 / QuickBASIC / Excel games.

  Two layers:
  - the page (.cr-*): dark jukimv1986.com chrome, same tokens as the home page;
  - the window (.win*): a Windows 98 form that recreates the original VB
    window, so each game still looks like the program it was.

  Plain CSS, no dependencies. Each game page links this file and classics.js.
*/
:root {
  --cr-bg: #07070d;
  --cr-bg-2: #0c0c17;
  --cr-panel: #0e0e1a;
  --cr-line: rgba(0, 240, 255, .16);
  --cr-line-2: rgba(255, 255, 255, .14);
  --cr-text: #ececf6;
  --cr-soft: #b9b9d0;
  --cr-muted: #8a8aab;
  --cr-cyan: #00f0ff;
  --cr-magenta: #ff2a6d;
  --cr-yellow: #fcee0a;
  --cr-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --cr-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Windows 98 */
  --w-face: #c0c0c0;
  --w-light: #ffffff;
  --w-hi: #dfdfdf;
  --w-shadow: #808080;
  --w-dark: #000000;
  --w-title-a: #000080;
  --w-title-b: #1084d0;
  --w-title-off-a: #808080;
  --w-title-off-b: #b5b5b5;
  --w-font: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Verdana, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--cr-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(40rem 26rem at 90% 0%, rgba(255, 42, 109, .14), transparent 70%),
    radial-gradient(36rem 24rem at 0% 20%, rgba(0, 240, 255, .08), transparent 70%),
    var(--cr-bg);
  color: var(--cr-soft);
  font: 15px/1.5 var(--cr-display);
}
[hidden] { display: none !important; }
a { color: var(--cr-cyan); }
:focus-visible { outline: 2px solid var(--cr-cyan); outline-offset: 2px; }

/* ---- Page chrome ---- */
.cr-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  padding: .7rem 1rem;
  background: rgba(7, 7, 13, .86);
  border-bottom: 1px solid var(--cr-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cr-back {
  font: 500 .72rem/1 var(--cr-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cr-muted);
  text-decoration: none;
  white-space: nowrap;
}
.cr-back:hover { color: var(--cr-cyan); }
.cr-crumb {
  font: 500 .72rem/1 var(--cr-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cr-yellow);
  white-space: nowrap;
}
.cr-top h1 {
  margin: 0;
  font: 700 1.25rem/1.1 var(--cr-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cr-text);
}
.cr-grow { flex: 1; }
.cr-tag {
  padding: .3rem .5rem;
  font: 500 .64rem/1 var(--cr-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cr-cyan);
  border: 1px solid var(--cr-line);
  white-space: nowrap;
}

.cr-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1rem, 4vw, 2.5rem) 16px 2rem;
  min-width: 0;
}
/* The scaler keeps the window at its original pixel size and shrinks it to
   fit narrow screens (see classics.js). */
.cr-fit {
  position: relative;
  max-width: 100%;
  transform-origin: top left;
}
/* A scaled-down window still reports its unscaled width; clip it so phones
   don't get a sideways scroll. */
.cr-stage { overflow-x: clip; }

.cr-notes {
  width: 100%;
  max-width: 44rem;
  padding: 1rem 1.15rem;
  font: 400 .8rem/1.7 var(--cr-mono);
  color: var(--cr-muted);
  background: rgba(252, 238, 10, .035);
  border-left: 2px solid var(--cr-yellow);
}
.cr-notes h2 {
  margin: 0 0 .35rem;
  font: 600 .72rem/1.2 var(--cr-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cr-yellow);
}
.cr-notes p { margin: 0 0 .6rem; }
.cr-notes p:last-child { margin-bottom: 0; }
.cr-notes kbd {
  display: inline-block;
  padding: 0 .35em;
  font: 500 .74rem/1.5 var(--cr-mono);
  color: var(--cr-text);
  border: 1px solid var(--cr-line-2);
  border-bottom-width: 2px;
  border-radius: 3px;
}
.cr-notes ul { margin: 0 0 .6rem; padding-left: 1.2rem; }

.cr-foot {
  padding: 1rem 16px 1.6rem;
  text-align: center;
  font: 500 .64rem/1 var(--cr-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

/* Touch controls some games add under the window. */
.cr-pad {
  display: none;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  user-select: none;
  -webkit-user-select: none;
}
.cr-pad button {
  min-width: 56px;
  min-height: 48px;
  font: 700 1rem/1 var(--cr-mono);
  color: var(--cr-text);
  background: var(--cr-panel);
  border: 1px solid var(--cr-line-2);
  border-radius: 6px;
  touch-action: none;
}
.cr-pad button:active { background: rgba(0, 240, 255, .18); border-color: var(--cr-cyan); }
@media (hover: none) and (pointer: coarse) {
  .cr-pad { display: flex; }
}

/* ---- Windows 98 window ---- */
.win {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  padding: 3px;
  background: var(--w-face);
  color: #000;
  font: 11px/1.3 var(--w-font);
  box-shadow:
    inset -1px -1px var(--w-dark),
    inset 1px 1px var(--w-hi),
    inset -2px -2px var(--w-shadow),
    inset 2px 2px var(--w-light),
    0 18px 60px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(0, 240, 255, .08);
  -webkit-font-smoothing: none;
  font-smooth: never;
  user-select: none;
  -webkit-user-select: none;
}
.win-title {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--w-title-a), var(--w-title-b));
  color: #fff;
  font-weight: bold;
}
.win.is-inactive .win-title { background: linear-gradient(90deg, var(--w-title-off-a), var(--w-title-off-b)); color: var(--w-face); }
.win-title img, .win-title .win-ico { width: 16px; height: 16px; flex: none; image-rendering: pixelated; }
.win-title span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win-btns { display: flex; gap: 0; }
.win-btns button, .win-tbtn {
  width: 16px;
  height: 14px;
  margin-left: 0;
  padding: 0;
  font: bold 9px/1 var(--w-font);
  color: #000;
  background: var(--w-face);
  border: 0;
  box-shadow: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-light), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-hi);
}
.win-btns button + button:last-child { margin-left: 2px; }
.win-btns button:active { box-shadow: inset 1px 1px var(--w-dark), inset -1px -1px var(--w-light), inset 2px 2px var(--w-shadow), inset -2px -2px var(--w-hi); }

.win-menu {
  display: flex;
  gap: 0;
  padding: 1px 0;
}
.win-menu > .mi { position: relative; }
.win-menu > .mi > button {
  padding: 2px 6px;
  font: inherit;
  color: #000;
  background: transparent;
  border: 1px solid transparent;
}
.win-menu > .mi > button:hover,
.win-menu > .mi.open > button { border-color: var(--w-light) var(--w-shadow) var(--w-shadow) var(--w-light); }
.win-menu > .mi.open > button { border-color: var(--w-shadow) var(--w-light) var(--w-light) var(--w-shadow); }
.win-drop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  display: none;
  min-width: 150px;
  padding: 2px;
  background: var(--w-face);
  box-shadow: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-hi), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-light);
}
.win-menu > .mi.open > .win-drop { display: block; }
.win-drop button {
  display: block;
  width: 100%;
  padding: 3px 20px;
  font: inherit;
  text-align: left;
  color: #000;
  background: transparent;
  border: 0;
  white-space: nowrap;
}
.win-drop button:hover, .win-drop button:focus-visible { color: #fff; background: var(--w-title-a); outline: 0; }
.win-drop button[disabled] { color: var(--w-shadow); text-shadow: 1px 1px var(--w-light); }
.win-drop button[aria-checked="true"]::before { content: "\2713"; position: absolute; margin-left: -14px; }
.win-drop hr { margin: 3px 1px; border: 0; border-top: 1px solid var(--w-shadow); border-bottom: 1px solid var(--w-light); }

.win-body { position: relative; overflow: hidden; }

/* Common VB controls */
.w-btn {
  min-width: 75px;
  min-height: 23px;
  padding: 3px 8px;
  font: inherit;
  color: #000;
  background: var(--w-face);
  border: 0;
  box-shadow: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-light), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-hi);
  cursor: default;
}
.w-btn:active:not([disabled]), .w-btn.is-down {
  box-shadow: inset 1px 1px var(--w-dark), inset -1px -1px var(--w-light), inset 2px 2px var(--w-shadow), inset -2px -2px var(--w-hi);
  padding: 4px 7px 2px 9px;
}
.w-btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.w-btn[disabled] { color: var(--w-shadow); text-shadow: 1px 1px var(--w-light); }
.w-sunken {
  background: #fff;
  box-shadow: inset -1px -1px var(--w-light), inset 1px 1px var(--w-shadow), inset -2px -2px var(--w-hi), inset 2px 2px var(--w-dark);
}
.w-field {
  padding: 3px 4px;
  font: inherit;
  color: #000;
  background: #fff;
  border: 0;
  box-shadow: inset -1px -1px var(--w-light), inset 1px 1px var(--w-shadow), inset -2px -2px var(--w-hi), inset 2px 2px var(--w-dark);
}
.w-frame {
  position: relative;
  margin: 8px 0 0;
  padding: 10px 8px 8px;
  border: 1px solid var(--w-shadow);
  box-shadow: 1px 1px 0 var(--w-light), inset 1px 1px 0 var(--w-light);
}
.w-frame > legend, .w-frame > .w-legend {
  position: absolute;
  top: -7px;
  left: 6px;
  padding: 0 2px;
  background: var(--w-face);
}
.w-label { white-space: pre-wrap; }
.w-status {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}
.w-status > div {
  flex: 1;
  padding: 2px 4px;
  box-shadow: inset -1px -1px var(--w-light), inset 1px 1px var(--w-shadow);
  white-space: nowrap;
  overflow: hidden;
}

/* A VB MsgBox */
.w-modal {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .08);
}
.w-modal .win { min-width: 220px; max-width: 90%; }
.w-modal .w-msg { display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px 10px; }
.w-modal .w-msg-ico { flex: none; width: 32px; height: 32px; }
.w-modal .w-msg-btns { display: flex; gap: 6px; justify-content: center; padding: 0 12px 10px; }

canvas.w-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---- Inside jukimv1986 OS (?embed, see classics.js) ---- */
html.cr-embed, .cr-embed body { background: transparent; }
.cr-embed body { overflow: hidden; }
.cr-embed .cr-top,
.cr-embed .cr-foot,
.cr-embed .cr-stage > :not(.cr-fit):not(.cr-pad) { display: none; }
.cr-embed .cr-stage { justify-content: center; gap: 8px; padding: 0; overflow: hidden; }
.cr-embed .win { box-shadow: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-hi), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-light); }
.cr-embed .cr-fit .win-title { touch-action: none; }
.cr-embed.cr-inactive .win-title { background: linear-gradient(90deg, var(--w-title-off-a), var(--w-title-off-b)); color: var(--w-face); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}