/* TinyHat 95. The Windows 95 palette, near enough to be unmistakable.
   Deliberately NOT themed by retro.css: this page is its own era. */

#th95 {
  --w95-face: #C0C0C0;
  --w95-shadow: #808080;
  --w95-dark: #000000;
  --w95-light: #FFFFFF;
  /* The classic Windows desktop blue. Teal was the 95 factory default, but
     the blue is the one everybody actually pictures, and it is what TinyHat
     95 wants to be. */
  --w95-desk: #3A6EA5;
  --w95-title: #000080;
  --w95-titletext: #FFFFFF;
  /* The one number the taskbar, the desktop and the running game all share.
     Authentic Win95 height on a desktop mouse; widened for touch below,
     alongside the same @media (pointer: coarse) query retro.css uses for
     its own 44px minimum (see retro.css and scripts/check-club-theme.mjs,
     which this page opts out of by not loading retro.css at all). */
  --w95-bar-h: 30px;

  position: fixed;
  inset: 0;
  background: #000;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Boot ── */
/* Hidden by default and switched on with the `on` class, the same way every
   other screen on this page works. It used to be visible by default and hidden
   with an inline style, which was the one state change here that did not go
   through a class. */
#th95-boot {
  position: absolute;
  inset: 0;
  display: none;
  background: #000;
  color: #C0C0C0;
  padding: 1.4rem;
  line-height: 1.7;
  white-space: pre-line;
  font-size: 12px;
}
#th95-boot.on { display: block; }
#th95-logo {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #FFF;
  gap: 1.4rem;
}
#th95-logo.on { display: flex; }
#th95-logo .mark { font-size: clamp(1.6rem, 6vw, 3rem); letter-spacing: 4px; }
#th95-logo .sub { font-size: 0.72rem; letter-spacing: 3px; color: #C0C0C0; text-align: center; }
/* The colour bar that crawled along the bottom of the splash. */
#th95-logo .bar {
  width: min(320px, 70vw);
  height: 14px;
  border: 2px solid #808080;
  overflow: hidden;
}
#th95-logo .bar i {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #FF0000, #FFFF00, #00FF00, #00FFFF);
  animation: th95-crawl 1.4s linear infinite;
}
@keyframes th95-crawl {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  #th95-logo .bar i { animation: none; }
}

/* ── Desktop ── */
#th95-desk {
  position: absolute;
  inset: 0 0 var(--w95-bar-h) 0;
  display: none;
  background: var(--w95-desk);
  padding: 12px;
  align-content: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 4px;
  overflow: auto;
}
#th95-desk.on { display: flex; }

.th95-icon {
  width: 84px;
  padding: 6px 2px;
  background: transparent;
  border: 1px dotted transparent;
  color: #FFF;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  overflow-wrap: break-word;
  appearance: none;
  -webkit-appearance: none;
}
.th95-icon .glyph { font-size: 26px; display: block; margin-bottom: 4px; position: relative; }
.th95-icon.sel { background: var(--w95-title); border-color: #FFF; }

/* UNREAD MAIL. The red disc every mail program has worn since mail programs
   existed, sitting on the corner of the icon's glyph. It is drawn only when
   there is something to count, because a badge showing 0 is furniture.
   The glyph is the positioning parent so the disc rides the picture rather
   than the 84px column, which would float it out over the wallpaper. */
.th95-badge {
  position: absolute;
  top: -4px;
  right: 50%;
  transform: translateX(26px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #C0392B;
  border: 1px solid #FFF;
  color: #FFF;
  font-family: var(--font-window, Verdana, Geneva, Arial, sans-serif);
  font-size: 10px;
  font-weight: bold;
  line-height: 15px;
  text-align: center;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

/* ── The window layer ──
   A transparent sheet over the desktop that holds one open program. It does
   NOT take the pointer itself, so the icons behind stay clickable around the
   window, which is the whole difference between a window and a takeover. */
#th95-run {
  position: absolute;
  inset: 0 0 var(--w95-bar-h) 0;
  display: none;
  pointer-events: none;
}
#th95-run.on { display: block; }

/* The window itself: raised chrome, a title bar, and the program inside. */
.th95-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(940px, 92%);
  height: min(660px, 88%);
  display: flex;
  flex-direction: column;
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

/* Maximised: the old full-bleed behaviour, still one click away. */
.th95-window.max {
  left: 0;
  top: 0;
  transform: none;
  width: 100%;
  height: 100%;
  border-width: 2px 0 0 0;
  box-shadow: none;
}

.th95-window .th95-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 6px;
  background: linear-gradient(90deg, var(--w95-title), #1084d0);
  color: var(--w95-titletext);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: bold;
  user-select: none;
}

.th95-window .th95-titlebar .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The title bar's own buttons, smaller than a taskbar button. */
.th95-window .th95-titlebar button {
  flex: 0 0 auto;
  width: 20px;
  height: 18px;
  padding: 0;
  line-height: 16px;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: bold;
  color: #000;
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  cursor: pointer;
}
.th95-window .th95-titlebar button:active {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
}

/* The program. White behind it so a page that has not painted yet reads as
   a loading window rather than a hole in the screen. */
.th95-window .th95-body {
  flex: 1;
  min-height: 0;
  background: #FFFFFF;
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
  margin: 2px;
}
.th95-window iframe { width: 100%; height: 100%; border: 0; display: block; }

/* A window on a phone is a joke at its own expense: there is no room to see
   the desktop around it, so it fills the screen and keeps only its title
   bar, which is the part that says which program you are in. */
@media (max-width: 620px) {
  .th95-window {
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 100%;
    border-width: 2px 0 0 0;
    box-shadow: none;
  }
  .th95-window .th95-titlebar .th95-max { display: none; }

  /* A MAXIMISED WINDOW ON A PHONE IS THE WHOLE SCREEN (Sam, 2026-10-15:
     "I want it to take up the whole window. The buttons should be
     transparent overlay"). It covers the taskbar too, loses its frame and
     its title bar, and the close button floats see-through over the top
     right of the program. My Hats, the Cemetery and the games open this way.
     #th95-bar has no z-index, so any positive one here covers it. */
  #th95-run.full { bottom: 0; z-index: 3; }
  #th95-run.full .th95-window { border-width: 0; }
  #th95-run.full .th95-titlebar {
    position: absolute;
    z-index: 2;
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    padding: 0;
    background: none;
  }
  #th95-run.full .th95-titlebar .name { display: none; }
  #th95-run.full .th95-titlebar button {
    width: 38px;
    height: 36px;
    line-height: 32px;
    font-size: 16px;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
  }
  #th95-run.full .th95-body { margin: 0; border: 0; }
}

/* ── Taskbar ── */
#th95-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--w95-bar-h);
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: var(--w95-face);
  border-top: 2px solid var(--w95-light);
}
#th95-bar.on { display: flex; }

/* The Win95 bevel: light top-left, dark bottom-right.
   Arithmetic for the 30px desktop bar: content box is 30 - 2 (border-top,
   there is no border-bottom) - 3 - 3 (padding top/bottom) = 22px. A button
   with no line-height inherits `normal`, about 15.6px for 12px JetBrains
   Mono, which plus 6px padding plus 4px border comes to 25.6px, so it
   overhung the bar by ~1.8px each way. Pinning line-height to 14px and
   padding to 2px top/bottom brings it to 14 + 4 (padding) + 4 (border) =
   22px, exactly the content box. Do not delete line-height here, that is
   what keeps the button face from poking above the bevel into the desktop. */
.th95-btn {
  background: var(--w95-face);
  color: #000;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  line-height: 14px;
  padding: 2px 9px;
  cursor: pointer;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  appearance: none;
  -webkit-appearance: none;
}
.th95-btn:active,
.th95-btn.pressed {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
}
#th95-start { font-weight: bold; }
#th95-task { flex: 1; display: flex; gap: 4px; overflow: hidden; }
/* The close button holds two spans now (see th95Mount): a label that can be
   any length and an X that must always stay visible. max-width still caps
   the button; overflow:hidden still keeps it there. The ellipsis moves onto
   the label alone so a long game title trims itself instead of eating the X,
   and the X gets flex: none so it never shrinks to make room. */
#th95-task .th95-btn { max-width: 220px; overflow: hidden; display: flex; align-items: center; gap: 6px; }
#th95-task .th95-task-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#th95-task .th95-task-x { flex: none; }

/* Same 22px-content-box arithmetic as .th95-btn above: line-height 14px +
   2px top/bottom padding + 2px top/bottom border = 22px. */
#th95-tray {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px;
  line-height: 14px;
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
  font-size: 12px;
  color: #000;
  min-width: 84px;
  text-align: center;
  white-space: nowrap;
}

/* The season sits left of the clock, divided from it the way a status bar
   divides its panes. Empty until there is a score, and the divider goes with
   it rather than leaving a stray line beside the clock. */
#th95-weather:not(:empty) {
  border-right: 1px solid var(--w95-shadow);
  padding-right: 10px;
}

/* POST. The Mail icon grows and shakes itself when a letter lands, because
   the badge alone is a small red number in the corner of a busy desktop and
   the whole opening depends on somebody NOTICING that they have mail. Two
   seconds, once per arrival, then it sits still again.

   transform-origin at the bottom so it hops on its own base rather than
   sliding about, and prefers-reduced-motion turns the whole thing off: the
   badge still changes, which is the information. */
@keyframes th95-newmail {
  0%   { transform: scale(1)    rotate(0deg); }
  12%  { transform: scale(1.28) rotate(0deg); }
  26%  { transform: scale(1.22) rotate(-9deg); }
  38%  { transform: scale(1.22) rotate(8deg); }
  50%  { transform: scale(1.2)  rotate(-6deg); }
  62%  { transform: scale(1.18) rotate(5deg); }
  74%  { transform: scale(1.14) rotate(-3deg); }
  86%  { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1)    rotate(0deg); }
}
.th95-icon.newmail .glyph {
  animation: th95-newmail 1.5s ease-in-out 1;
  transform-origin: 50% 85%;
}
@media (prefers-reduced-motion: reduce) {
  .th95-icon.newmail .glyph { animation: none; }
}

/* A MILLION POINTS, LIT UP. The opening sequence hands a brand new player a
   fortune they did not earn and then takes it off them, and the whole joke
   depends on their having noticed it sitting there first. So while the lie
   is running the tray number is gold, bold and a size larger than the clock
   beside it: the one bright thing on an otherwise empty desktop. It goes
   back to ordinary the instant the drain finishes. */
/* THE SCORE READS LIKE A METER (Sam, 2026-09-06: "points in the corner need
   to stand out more"). A sunken black panel with bold yellow digits, the way
   a tray battery meter or a car odometer reads, instead of yellow text on
   grey with a glow that the grey ate. The divider the other tray panes use
   is dropped for it: the panel is its own edge. */
#th95-score:not(:empty) {
  background: #000;
  color: #FFD400;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.6px;
  padding: 1px 8px;
  margin-right: 4px;
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
  text-shadow: none;
  font-variant-numeric: tabular-nums;
}
#th95-score.rich {
  color: #FFE34D;
  text-shadow: 0 0 4px rgba(255, 227, 77, 0.8);
}

/* On a phone the taskbar is already carrying Start and a running program, so
   the season keeps its place and the words give way to the numbers. */
@media (max-width: 520px) {
  #th95-tray { gap: 6px; padding: 2px 6px; font-size: 11px; }
  #th95-report-btn { padding-left: 4px; padding-right: 4px; }
  #th95-score:not(:empty) { padding-right: 6px; }
  /* EVERYTHING IN THE TRAY STAYS ON THE SCREEN (2026-10-11, with the bug
     report ladybird). At 375 wide the clock was already past the right edge,
     and the ladybird pushed the score after it. A phone shows the time
     itself, so the clock goes; the score keeps its place and trims with an
     ellipsis rather than leaving the screen, whatever Sam's words say. */
  #th95-clock { display: none; }
  #th95-tray { min-width: 0; flex-shrink: 1; }
  #th95-score:not(:empty) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #th95-sound, #th95-report-btn, #th95-weather { flex: none; }
}

/* ── Start menu ── */
/* SITS ON TOP OF THE TASKBAR, NEVER OVER IT. This was a hardcoded 32px, which
   was right for the 30px desktop bar and wrong for the 52px touch one: the menu
   started at 32px while the Start button reached up to 47px, so the bottom of
   the menu, which is the Shut Down item, covered the top of the button that
   opens it. Tapping Start a second time to dismiss the menu shut the machine
   down instead, and none of it was visible on a mouse. It tracks the bar now.
   Do not put a number back here. */
#th95-menu {
  position: absolute;
  left: 4px;
  bottom: calc(var(--w95-bar-h) + 2px);
  display: none;
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  padding: 3px;
  min-width: 190px;
  z-index: 5;
}
#th95-menu.on { display: block; }
#th95-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 7px 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: #000;
  cursor: pointer;
}
#th95-menu button:hover { background: var(--w95-title); color: #FFF; }
/* Shut Down sits under a groove, the way it always did. */
#th95-menu .th95-sep {
  border-top: 1px solid var(--w95-shadow);
  margin-top: 3px;
}
/* A thumb needs a real target, and this menu is the site's whole navigation
   now rather than a one-item joke. */
@media (pointer: coarse) {
  #th95-menu button { padding: 11px 14px; font-size: 13px; }
  #th95-menu { min-width: 210px; }
}

/* ── Notepad, for the empty desktop ── */
#th95-pad {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  display: none;
  width: min(420px, 88vw);
  max-height: 80vh;
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  /* Deliberately no z-index. It needs to sit above the teal desktop but
     below the taskbar, and #th95-bar has no z-index of its own (see the
     taskbar rule above), so any explicit positive z-index here, however
     small, would outrank it regardless. z-index:auto is the only value
     that keeps this ordered by document position instead, which is why
     the mount must build #th95-desk, then #th95-pad, then #th95-bar in
     that order. */
}
/* Flex column so .body can shrink to whatever room is left under max-height
   and hand the overflow to its own scrollbar, rather than the window just
   growing past the viewport (or #th95's own overflow: hidden silently
   clipping longer README copy with no way to reach the rest of it). */
#th95-pad.on { display: flex; flex-direction: column; }
#th95-pad .bar {
  background: var(--w95-title);
  color: var(--w95-titletext);
  padding: 3px 6px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
#th95-pad .body {
  background: #FFF;
  color: #000;
  padding: 12px;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-line;
  overflow: auto;
  /* A column flex item's default min-height:auto stops it shrinking below
     its content, which would defeat the overflow:auto above. */
  min-height: 0;
  user-select: text;
  -webkit-user-select: text;
}
/* README.TXT ON A PHONE (Sam, 2026-10-17: "the read me txt ... is cut off
   when looking on a phone"). Centred at 46% with an 80vh cap, a long README
   ran under the taskbar: on an iPhone 80vh is measured with Safari's bars
   hidden, and the bar itself grows for the home indicator. Here the window
   is pinned between the top of the screen and the top of the taskbar, the
   text is a little bigger, and the rest scrolls inside the window. */
@media (max-width: 620px) {
  #th95-pad {
    top: 10px;
    bottom: calc(var(--w95-bar-h) + 10px);
    transform: translateX(-50%);
    width: calc(100% - 20px);
    max-height: none;
  }
  #th95-pad .body {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ── Shut down ── */
#th95-off {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #FFA800;
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  text-align: center;
  padding: 2rem;
  z-index: 9;
}
#th95-off.on { display: flex; }

/* ── Touch sizing ──
   This page skips retro.css on purpose (see the file header), which means
   it also skips retro.css's own @media (pointer: coarse) { button {
   min-height: 44px } } rule (retro.css around lines 512-523) and the
   scripts/check-club-theme.mjs check that exists to enforce it elsewhere.
   That rule is the right call on a phone in Rundle Mall, so it is
   reproduced here rather than left out: the desktop keeps the authentic
   30px CRT-era taskbar, and a coarse pointer gets a taskbar and buttons
   sized for a thumb instead. Bumping --w95-bar-h is enough to resize the
   bar, the desktop and the running game together, because all three read
   from that one variable.

   Arithmetic for the 52px touch bar, same shape as the 30px desktop case
   above: content box is 52 - 2 (border-top, still no border-bottom) - 3 -
   3 (padding top/bottom) = 44px. The buttons are min-height 44px, so they
   fit that content box exactly. Do not shrink the 44px minimum to make
   the bar smaller, that defeats the point of this block; grow --w95-bar-h
   instead if it ever needs to change, the same way this number was found. */
@media (pointer: coarse) {
  /* The safe-area term keeps the bar clear of the iPhone home indicator,
     which was drawn straight over the Start button. Growing the var grows
     the bar, the desktop and the running game together (see above); the
     matching padding-bottom keeps the buttons in the top 52px of it, so
     the content box arithmetic is unchanged. */
  #th95 { --w95-bar-h: calc(52px + env(safe-area-inset-bottom, 0px)); }
  #th95-bar { padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px)); }
  .th95-btn,
  #th95-tray,
  #th95-menu button,
  #th95-pad .bar button {
    min-height: 44px;
  }
}

/* THE HOLD (see hold() in win95.js): the shield over everything behind a
   window that must not be clicked off, and the chrome buttons gone so
   there is nothing to reach for. #th95-run is pointer-events: none so the
   desktop around an ordinary window stays live; the shield turns that back
   on for itself alone. */
#th95-shield {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.35);
}
#th95-run.hold .th95-titlebar button { display: none; }