/* Classic Mac OS (System 7 / Platinum) styling, to match the 2001 RealBASIC app. */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Geneva", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #000;
  /* the classic 50% gray desktop */
  background-color: #888;
  background-image:
    repeating-conic-gradient(#8a8a8a 0% 25%, #828282 0% 50%);
  background-size: 4px 4px;
}

/* ----- top bar (back link) ----- */
#topbar {
  position: sticky; top: 0; z-index: 1000;
  height: 24px; line-height: 24px;
  background: linear-gradient(#fff, #e8e8e8);
  border-bottom: 1px solid #000;
  padding: 0 10px;
  box-shadow: 0 1px 0 #fff inset;
}
#topbar a { font-weight: bold; text-decoration: none; }
#topbar a:hover { text-decoration: underline; }

/* ----- windows ----- */
.window {
  position: absolute;
  background: #d8d8d8;
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  min-width: 200px;
}
.titlebar {
  height: 19px;
  display: flex; align-items: center;
  border-bottom: 1px solid #000;
  /* the classic horizontal pinstripe title bar */
  background-image: repeating-linear-gradient(
    to bottom, #cfcfcf 0 1px, #ffffff 1px 2px);
  cursor: move;
  user-select: none;
  padding: 0 4px;
}
.titlebar .close {
  width: 11px; height: 11px; margin-right: 6px;
  border: 1px solid #000; background: #d8d8d8;
  border-radius: 1px; cursor: pointer; flex: 0 0 auto;
  box-shadow: inset -1px -1px 0 #888, inset 1px 1px 0 #fff;
}
.titlebar .close:active { background: #aaa; }
.titlebar .title {
  flex: 1; text-align: center; font-weight: bold; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #d8d8d8; padding: 0 8px; margin: 0 4px;
}
.titlebar .zoom {
  width: 11px; height: 11px; border: 1px solid #000; background: #d8d8d8;
  box-shadow: inset -1px -1px 0 #888, inset 1px 1px 0 #fff; flex: 0 0 auto;
}
.window .body { padding: 10px; }

/* ----- titles / headings ----- */
.bigtitle {
  text-align: center; color: #1414ff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold; line-height: 1.0; margin: 6px 0 12px;
}
.bigtitle .l1 { font-size: 40px; letter-spacing: -1px; }
.bigtitle .l2 { font-size: 22px; }
.bigtitle .l3 { font-size: 40px; letter-spacing: -1px; }

/* ----- group boxes (RB GroupBox) ----- */
.groupbox {
  border: 1px solid #808080;
  border-radius: 3px;
  margin: 12px 0; padding: 14px 12px 12px;
  position: relative;
  background: #d8d8d8;
}
.groupbox > .legend {
  position: absolute; top: -8px; left: 10px;
  background: #d8d8d8; padding: 0 4px; font-weight: bold;
}

/* ----- buttons ----- */
button, .btn {
  font-family: inherit; font-size: 12px;
  background: linear-gradient(#fcfcfc, #d6d6d6);
  border: 1px solid #000; border-radius: 7px;
  padding: 2px 12px; cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 1px 1px 0 rgba(0,0,0,0.25);
}
button:active, .btn:active { background: linear-gradient(#c8c8c8, #b8b8b8); }
button:disabled { color: #999; cursor: default; box-shadow: none; }
button.default { border-width: 2px; font-weight: bold; }
button.square { border-radius: 3px; padding: 2px 8px; }

select {
  font-family: inherit; font-size: 12px;
  border: 1px solid #000; border-radius: 3px;
  background: linear-gradient(#fcfcfc, #e0e0e0);
  padding: 1px 4px;
}
input[type=text], input[type=number] {
  font-family: inherit; font-size: 12px;
  border: 1px solid #000; border-radius: 2px;
  padding: 1px 4px; background: #fff;
  box-shadow: inset 1px 1px 0 #bbb;
}
label.check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* ----- canvases ----- */
canvas { display: block; background: #fff; image-rendering: pixelated; }
.sunken { border: 1px solid #000; box-shadow: inset 1px 1px 0 #888; background: #fff; }

/* ----- classic Mac horizontal scrollbar (the pan control) ----- */
.canvaspane { width: 608px; }
.sunken.nb { border-bottom: none; }       /* share the scrollbar's top border */
.macscroll {
  display: flex; height: 16px; width: 608px;
  border: 1px solid #000; background: #cfcfcf; user-select: none;
}
.macscroll.disabled { opacity: 0.55; pointer-events: none; }
.sb-arrow {
  width: 16px; flex: 0 0 16px; position: relative; cursor: default;
  background: linear-gradient(#fcfcfc, #d6d6d6);
}
.sb-arrow:active { background: linear-gradient(#c8c8c8, #b8b8b8); }
.sb-left  { border-right: 1px solid #000; }
.sb-right { border-left: 1px solid #000; }
.sb-arrow::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-style: solid;
}
.sb-left::after  { transform: translate(-60%, -50%); border-width: 4px 6px 4px 0; border-color: transparent #000 transparent transparent; }
.sb-right::after { transform: translate(-40%, -50%); border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #000; }
.sb-track {
  position: relative; flex: 1; cursor: default;
  background: repeating-linear-gradient(45deg, #d2d2d2 0 2px, #c4c4c4 2px 4px);
}
.sb-thumb {
  position: absolute; top: 1px; bottom: 1px; left: 50%;
  width: 44px; transform: translateX(-50%);
  background: linear-gradient(#fcfcfc, #cfcfcf);
  border: 1px solid #000; border-radius: 1px; cursor: grab;
}
.sb-thumb.dragging { transform: none; cursor: grabbing; }

/* control strip under the creature view */
.controlstrip {
  display: flex; align-items: center; gap: 8px;
  background: #d8d8d8; padding: 6px 4px;
}
.controlstrip .wavewrap { margin-left: auto; }

/* logs */
.logbox {
  background: #fff; border: 1px solid #000; box-shadow: inset 1px 1px 0 #888;
  font-family: "Monaco", "Courier New", monospace; font-size: 11px;
  white-space: pre-wrap; overflow: auto; padding: 4px;
}
.statline { cursor: pointer; padding: 0 2px; }
.statline:hover { background: #1414ff; color: #fff; }

.instructions {
  border: 1px solid #808080; border-radius: 3px; padding: 12px 10px 10px;
  position: relative; margin-top: 10px; line-height: 1.35;
}
.instructions > .legend {
  position: absolute; top: -8px; left: 10px; background: #d8d8d8; padding: 0 4px; font-weight: bold;
}

.stepbtn { font-family: inherit; padding: 1px 7px; }

.hint { color: #444; font-size: 11px; }
a { color: #1414ff; }