:root {
  --blue: #000080;
  --blue2: #1084d0;
}
* { box-sizing: border-box; }

/* Computer Modern (self-hosted, OFL-licensed) — primary text face */
@font-face {
  font-family: "Computer Modern";
  src: url("fonts/WebCM Serif 10 Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: "Computer Modern";
  src: url("fonts/WebCM Serif 10 Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: "Computer Modern";
  src: url("fonts/WebCM Serif 10 Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: "Computer Modern";
  src: url("fonts/WebCM Serif 10 BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic;
}
@font-face {
  font-family: "Computer Modern Mono";
  src: url("fonts/WebCM Mono 10 Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: "Computer Modern Mono";
  src: url("fonts/WebCM Mono 10 Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: "Computer Modern Mono";
  src: url("fonts/WebCM Mono 10 Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: "Computer Modern Mono";
  src: url("fonts/WebCM Mono 10 BoldOblique.woff2") format("woff2");
  font-weight: 700; font-style: italic;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Banner ad up top: full width of the desktop column, bevel-framed like the
   rest of the chrome. ONE ad, cycling through ./ads (JS swaps the image). */
.top-banner {
  display: block;
  margin: 0 0 10px 0;
  border: 2px solid;
  border-color: #ececec #000 #000 #ececec;
  line-height: 0;
  cursor: pointer;
}
.top-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.banners .top-banner { display: none; }
.banners .top-banner.active { display: block; }

/* Cyan tiled background - brushed teal diamond tile (bg.png) */
body {
  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
  font-size: 13px;
  background-color: #0e8392;
  background-image: url("bg.png");
  background-repeat: repeat;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100%;
  padding: 12px;
}

.desktop {
  width: 100%;
  max-width: 720px;
}

/* ---- The window (titlebar + content + footer) ---- */
.appwin {
  position: relative;
  width: min(720px, 100%);
  height: min(750px, calc(100vh - 24px)); /* 1.25x the old 600px */
  min-width: 280px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 12px rgba(0,0,0,.35);
}
.appwin.minimized { height: auto; min-height: 0; }
.appwin.minimized > .window,
.appwin.minimized > .footer,
.appwin.minimized > .grip { display: none; }

.appwin.maximized {
  width: calc(100vw - 24px) !important;
  height: calc(100vh - 24px) !important;
  max-width: none;
}

/* In-flow spacer that keeps the page tall (and scrollable) while the window is
   floating at position:fixed. Sized to the window by JS. */
.appwin-slab {
  width: min(720px, 100%);
  flex: 0 0 auto;
}

/* Windows title bar */
.titlebar {
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue2) 100%);
  color: #fff;
  padding: 3px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid;
  border-color: #ececec #000 #000 #ececec;
  font-weight: bold;
  letter-spacing: .5px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.titlebar:active, .appwin.dragging .titlebar { cursor: grabbing; }
.title-inner { display: flex; align-items: center; gap: 6px; min-width: 0; }
.title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-icon {
  width: 14px; height: 14px; flex: 0 0 14px;
  background: linear-gradient(135deg,#0080ff 25%,#40c0ff 50%,#0080ff 75%);
  border-radius: 3px;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.4), inset 1px 1px 0 rgba(255,255,255,.5);
}

/* title bar buttons (now real buttons) */
.title-btns { display: flex; gap: 2px; flex: 0 0 auto; }
button.tbtn {
  appearance: none;
  width: 18px; height: 16px; padding: 0; margin: 0;
  font-size: 10px; font-weight: bold; line-height: 14px; text-align: center;
  background: #c0c0c0; color: #000; font-family: inherit;
  border: 2px solid; border-color: #ececec #404040 #404040 #ececec;
  cursor: pointer;
}
button.tbtn:active { border-color: #404040 #ececec #ececec #404040; }
button.tbtn.x { font-weight: bold; }

/* Main window bevel */
.window {
  flex: 1 1 auto;
  min-height: 0;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #000 #000 #ececec;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.menu {
  flex: 0 0 auto;
  display: flex; gap: 14px; font-weight: bold;
  border-bottom: 1px solid #888;
  padding: 2px 4px;
  position: relative;
}
.menu-group { position: relative; }
.menu span:hover { text-decoration: underline; cursor: default; }
.menu-item { cursor: pointer; }
.menu-item.open { background: var(--blue); color: #fff; text-decoration: none; }

/* Win98 style dropdown */
.dropdown {
  position: absolute;
  top: 100%; left: 0;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
  z-index: 30;
  min-width: 170px;
}
.dd-item {
  display: block;
  padding: 5px 14px 5px 8px;
  font-weight: normal;
  white-space: nowrap;
  cursor: pointer;
}
.dd-item:hover { background: var(--blue); color: #fff; }

.toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px; padding: 2px;
}
.toolbar label { font-weight: bold; }
select, input[type=text] {
  background: #fff; border: 2px solid; border-color: #404040 #ececec #ececec #404040;
  padding: 3px; font-family: inherit; font-size: 13px; min-width: 0;
}
#model { flex: 1 1 auto; }
.btn {
  background: #c0c0c0; border: 2px solid; border-color: #ececec #404040 #404040 #ececec;
  padding: 3px 10px; font-weight: bold; cursor: pointer; font-family: inherit;
}
.btn:active { border-color: #404040 #ececec #ececec #404040; }

/* chat box fills the resizable window. Computer Modern (serif) is the message
   text face — very 1998; handles stay in the mono face, like a channel tag. */
.chat {
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  border: 2px solid; border-color: #404040 #ececec #ececec #404040;
  overflow-y: auto;
  padding: 6px;
  font-family: "Computer Modern", "Times New Roman", serif;
  white-space: pre-wrap; word-wrap: break-word;
}
.msg { margin: 2px 0; }
.msg.user   { color: #000080; }
.msg.model  { color: #006400; }
.msg.system { color: #808080; font-style: italic; }
.msg.thinking { animation: thinkblink 1s step-start infinite; }
@keyframes thinkblink { 50% { opacity: .25; } }
.msg .who {
  font-family: "Computer Modern Mono", "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
}
.msg .body code {
  font-family: "Computer Modern Mono", "Courier New", monospace;
  background: #eee; border: 1px solid #aaa; padding: 0 2px; font-size: 11px;
}
.msg .body a { color: #0000ee; text-decoration: underline; }
.msg .body .md-quote { color: #666; }
.chat.greyed { opacity: .5; pointer-events: none; }

.inputbar { flex: 0 0 auto; display: flex; gap: 4px; }
.inputbar input { flex: 1 1 auto; }

.hidden { display: none !important; }

/* Watercolor flamingo sticker (PINK_PLAN.md): viewport-pinned, inert, front until a window is clicked */
.flamingo {
  position: fixed;
  z-index: 95;              /* baseline; JS owns it after the first spawn */
  pointer-events: none;     /* never blocks a click, never receives one */
  user-select: none;
  -webkit-user-drag: none;
  width: clamp(140px, 34vw, 320px);
  height: auto;
}

/* footer / hit counter */
.footer {
  flex: 0 0 auto;
  margin-top: 8px;
  background: #c0c0c0;
  border: 2px solid; border-color: #ececec #404040 #404040 #ececec;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 8px;
  flex-wrap: wrap; text-align: center;
}
.counter-label { font-size: 12px; }
.counter-label .odometer { font-size: 12px; padding: 0 4px; letter-spacing: 1px; }
.odometer {
  font-family: "Courier New", monospace; font-weight: bold; font-size: 16px;
  background: #000; color: #0f0; padding: 1px 6px; letter-spacing: 2px;
  border: 1px solid #404040;
}
.credit { color: #000080; font-size: 12px; }
.credit a {
  color: #000080;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}
.credit a:hover { color: #1084d0; }

.disclaimer {
  margin-top: 6px;
  padding: 5px 8px;
  background: #c0c0c0;
  border: 2px solid; border-color: #ececec #404040 #404040 #ececec;
  text-align: center;
}
.disclaimer p { margin: 2px 0; font-size: 11px; color: #303030; }

/* resize grip in the bottom-right corner */
.grip {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 45%, #404040 45%, #404040 52%, transparent 52%),
    linear-gradient(135deg, transparent 60%, #808080 60%, #808080 67%, transparent 67%);
  touch-action: none;
  z-index: 5;
}
.appwin.maximized > .grip { display: none; }

/* hint shown after the window is closed */
.restore-hint {
  margin-top: 20px;
  color: #003a4a;
  font-weight: bold;
  background: rgba(255,255,255,.6);
  border: 1px dashed #003a4a;
  padding: 8px 12px;
  text-align: center;
  width: 100%;
}

/* visitor's own handle */
.youhandle {
  color: #b22222;
  font-weight: bold;
}

/* episode banner: a digital LED-style scrolling marquee, just under the ad */
.now-showing {
  margin: 0 0 10px 0;
  width: 100%;
  background: #000;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  overflow: hidden;
  white-space: nowrap;
  padding: 5px 0;
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll 16s linear infinite;
}
.marquee-text {
  display: inline-block;
  font-family: "Computer Modern Mono", "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0f0;
  text-shadow: 0 0 6px rgba(0, 255, 0, .65);
  padding-right: 60px; /* gap between repeats so the loop breathes */
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* fake-win popup: Win98 system dialog */
.popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.popup-win {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  box-shadow: 4px 4px 12px rgba(0,0,0,.5);
  min-width: 300px;
  max-width: 420px;
}
.popup-title {
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue2) 100%);
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.popup-body {
  padding: 16px 14px 6px;
  text-align: center;
}
.popup-body p { margin: 6px 0; }
.popup-sub { font-size: 11px; color: #333; }
.popup-btns {
  display: flex;
  justify-content: center;
  padding: 10px 14px 14px;
}
.popup-btns .btn {
  min-width: 84px;
  text-align: center;
  text-decoration: none;
  color: #000;
  display: inline-block;
}

/* About box: free-floating window you can drag (like the music player) */
.about-popup {
  position: fixed;
  top: 80px;
  left: 16px;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  box-shadow: 4px 4px 12px rgba(0,0,0,.5);
  z-index: 90;
}
.about-title { justify-content: space-between; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.about-popup.dragging .about-title { cursor: grabbing; }

/* About box body: scrollable, left-aligned, preformatted */
.about-body-wrap {
  max-height: 48vh;
  overflow-y: auto;
  padding: 14px 14px 8px;
}
.about-body {
  white-space: pre-wrap;
  text-align: left;
  font-size: 12px;
  line-height: 1.55;
  color: #111;
}

/* ---- Shitty music player: a free-floating window you can drag ---- */
.music-popup {
  position: fixed;
  top: 60px;
  left: 16px;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  box-shadow: 4px 4px 12px rgba(0,0,0,.5);
  z-index: 90;
}
.music-title { justify-content: space-between; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.music-popup.dragging .music-title { cursor: grabbing; }
.mp-close {
  appearance: none;
  width: 17px; height: 16px; padding: 0; margin: 0;
  font-size: 11px; font-weight: bold; line-height: 14px; text-align: center;
  background: #c0c0c0; color: #000; font-family: inherit;
  border: 2px solid; border-color: #ececec #404040 #404040 #ececec;
  cursor: pointer; flex: 0 0 auto;
}
.mp-close:active { border-color: #404040 #ececec #ececec #404040; }
.music-machine { padding: 12px 14px 14px; }
.music-display {
  background: #111; color: #0f0;
  font-family: "Courier New", monospace;
  font-size: 12px; letter-spacing: 1px;
  padding: 6px 8px; text-align: center;
  border: 2px solid; border-color: #404040 #ececec #ececec #404040;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 8px;
}
.music-controls { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.music-controls .btn { min-width: 40px; text-decoration: none; color: #000; text-align: center; }
#music-download { min-width: 40px; font-size: 15px; line-height: 1; }
#music-audio { width: 100%; margin: 0 0 8px; }
.music-progress {
  height: 16px;
  margin: 4px 0 8px;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #ececec #ececec #404040;
  overflow: hidden;
  position: relative;
}
.music-progress-fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, #000080 0, #000080 8px, #1084d0 8px, #1084d0 10px);
  transition: width .2s linear;
}
.music-credit {
  margin-top: 8px;
  font-size: 11px;
  text-align: center;
  color: #303030;
}
.music-credit a { color: #000080; font-weight: bold; text-decoration: underline; }
.music-list {
  border: 2px solid; border-color: #404040 #ececec #ececec #404040;
  background: #fff;
  max-height: 170px; overflow-y: auto;
}
.music-track {
  padding: 4px 8px; font-size: 12px; cursor: pointer;
  font-family: "Computer Modern Mono", "Courier New", monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-track:hover, .music-track.active { background: var(--blue); color: #fff; }

/* Shitty video player (tools > videos): a free-floating win98 window like the
   music player, sized around a native <video> element with its own playlist. */
.video-popup {
  position: fixed;
  top: 60px;
  left: 24px;
  width: 460px;
  max-width: calc(100vw - 24px);
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  box-shadow: 4px 4px 12px rgba(0,0,0,.5);
  z-index: 90;
}
.video-title { justify-content: space-between; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.video-popup.dragging .video-title { cursor: grabbing; }
.video-machine { padding: 12px 14px 14px; }
.video-display {
  background: #111; color: #0f0;
  font-family: "Courier New", monospace;
  font-size: 12px; letter-spacing: 1px;
  padding: 6px 8px; text-align: center;
  border: 2px solid; border-color: #404040 #ececec #ececec #404040;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 8px;
}
#video-el {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border: 2px solid; border-color: #404040 #ececec #ececec #404040;
  margin: 0 0 8px;
}
.video-controls { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.video-controls .btn { min-width: 40px; text-decoration: none; color: #000; text-align: center; }
#video-download { min-width: 40px; font-size: 15px; line-height: 1; }
.video-credit {
  margin-top: 8px;
  font-size: 11px;
  text-align: center;
  color: #303030;
}
.video-credit a { color: #000080; font-weight: bold; text-decoration: underline; }
.video-list {
  border: 2px solid; border-color: #404040 #ececec #ececec #404040;
  background: #fff;
  max-height: 140px; overflow-y: auto;
}
.video-track {
  padding: 4px 8px; font-size: 12px; cursor: pointer;
  font-family: "Computer Modern Mono", "Courier New", monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-track:hover, .video-track.active { background: var(--blue); color: #fff; }

/* Under-construction sign: bottom-of-page web barricade */
.construction {
  margin: 28px auto 48px;
  width: min(660px, 92%);
  border: 2px solid #000;
  border-radius: 5px;
  overflow: hidden;
  background: #e8e6e3;
  box-shadow: 0 0 0 3px #c0c0c0, 0 6px 14px rgba(0,0,0,.35);
  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
}
.construction-stripes {
  height: 16px;
  background: repeating-linear-gradient(45deg, #f7d308 0 16px, #181818 16px 32px);
}
.construction-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  color: #111;
  text-align: left;
}
.construction-icon { font-size: 34px; line-height: 1; color: #b8860b; }
.construction-text { min-width: 0; }
.construction-title {
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
  color: #200;
}
.construction-note { margin: 4px 0 0; font-size: 13px; color: #333; }

/* ---- Tetris (tools > tetris) ----
   Free-floating Win98 window. 2/3 the main window width (~480px), full height.
   Same drag/bevel pattern as the music player. */
.tetris-popup {
  position: fixed;
  top: 48px;
  left: 16px;
  width: min(480px, calc(100vw - 24px));
  height: min(calc(100vh - 56px), 760px);
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  box-shadow: 4px 4px 12px rgba(0,0,0,.5);
  z-index: 90;
}
.tetris-title { justify-content: space-between; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.tetris-popup.dragging .tetris-title { cursor: grabbing; }
.tetris-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tetris-hud {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: bold;
  color: #111;
}
.tetris-stat b {
  font-family: "Courier New", monospace;
  background: #000; color: #0f0;
  padding: 0 5px; border: 1px solid #404040;
  font-weight: bold;
}
.tetris-gold-stat b { color: #ffd700; }
.tetris-silver-stat b { color: #c0c0c0; }
.tetris-debug { color: #b22222; letter-spacing: .5px; }
.tetris-debug b { display:none; }
#tetris-canvas {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  align-self: center;
  display: block;
  margin: 0 auto;
  background: #c0c0c0 url("greek.png") center/cover no-repeat;
  border: 2px solid;
  border-color: #404040 #ececec #ececec #404040;
  touch-action: none;
}
.tetris-legend {
  flex: 0 0 auto;
  font-size: 11px;
  color: #303030;
  text-align: center;
}
.goldtxt { color: #b8860b; }
.silvertxt { color: #808080; }
.tetris-controls {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.tetris-controls .btn {
  min-width: 34px;
  text-align: center;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.tetris-hint {
  flex: 0 0 auto;
  font-size: 10px;
  color: #606060;
  text-align: center;
  letter-spacing: .3px;
}

/* ---- The Scrolls: a text CYOA that looks like a terminal (Tools > Terminal) ---- */
.term-popup {
  position: fixed;
  top: 48px;
  left: 16px;
  width: min(560px, calc(100vw - 24px));
  height: min(calc(100vh - 56px), 640px);
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  box-shadow: 4px 4px 12px rgba(0,0,0,.5);
  z-index: 90;
}
.term-title { justify-content: space-between; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.term-popup.dragging .term-title { cursor: grabbing; }
.term-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.term-screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #050505;
  color: #35f05a;
  font-family: "Computer Modern Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 2px solid;
  border-color: #404040 #ececec #ececec #404040;
  white-space: normal;
  outline: none;
  -webkit-user-select: text; user-select: text;
  scrollbar-color: #0b3a14 #000;
  touch-action: pan-y;
}
.term-hint {
  flex: 0 0 auto;
  font-size: 10px;
  color: #505050;
  text-align: center;
  letter-spacing: .3px;
}
.term-hint b { color: #b8860b; font-weight: bold; }

.term-screen .trow {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.5em;
}
.term-screen .tprompt { color: #35f05a; }
.term-screen .tcontent code {
  color: #ffd75f;
  background: #131313;
  padding: 0 3px;
}
.term-screen .tcontent b { color: #d7ffa8; }
.term-screen .tcontent em { color: #9fffc0; }

/* blinking cursor while a line is streaming */
.term-screen .trow.typing .tcontent::after {
  content: "\2588";
  color: #35f05a;
  animation: tl-blink 1s step-start infinite;
  margin-left: 1px;
}
@keyframes tl-blink { 50% { opacity: 0; } }

/* choices: look like cyan links, clickable once ready */
.term-screen .trow.topt { cursor: default; }
.term-screen .trow.topt .topttext { color: #5ec8ff; cursor: pointer; }
.term-screen .trow.topt .topttext:hover { background: #103a33; }
.term-screen .trow.topt.picked .topttext { color: #ffb95e; font-weight: bold; }
.term-screen .trow.promptline .tprompt { font-weight: bold; }
.term-screen .trow.promptline .tcontent { color: #fff; }

/* ---- Calculator (tools > calculator): simple arithmetic window ----
   A free-floating Win98 window like the music player / tetris. */
.calc-popup {
  position: fixed;
  top: 96px;
  left: 24px;
  width: 240px;
  max-width: calc(100vw - 24px);
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ececec #404040 #404040 #ececec;
  box-shadow: 4px 4px 12px rgba(0,0,0,.5);
  z-index: 90;
}
.calc-title { justify-content: space-between; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.calc-popup.dragging .calc-title { cursor: grabbing; }
.calc-body { padding: 10px; }
.calc-display {
  background: #fff;
  border: 2px solid;
  border-color: #404040 #ececec #ececec #404040;
  font-family: "Courier New", monospace;
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  padding: 6px 8px;
  margin-bottom: 8px;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
}
.calc-crow { margin-bottom: 5px; }
.calc-crow .btn { width: 100%; padding: 6px 0; font-size: 13px; font-family: inherit; font-weight: bold; }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.calc-grid .btn {
  padding: 9px 0;
  font-size: 15px;
  font-family: inherit;
  text-align: center;
  min-width: 0;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.calc-grid .calc-op { font-weight: bold; }
.calc-grid .calc-eq { font-weight: bold; }
.calc-hint {
  margin-top: 8px;
  font-size: 10px;
  color: #606060;
  text-align: center;
  letter-spacing: .3px;
}