/* GitGud.WTF — a desktop from 1995, a fly from the future. */

@font-face {
  font-family: 'VT323';
  src: url('/fonts/vt323.woff2') format('woff2');
  font-display: swap;
}

:root {
  --desk: #008080;
  --face: #c0c0c0;
  --hi: #ffffff;
  --lite: #dfdfdf;
  --shade: #808080;
  --dark: #0a0a0a;
  --navy: #000080;
  --title2: #1084d0;
  --text: #000;
  --vipps: #ff5b24;
  --ui-font: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, Verdana, sans-serif;
  --raised: inset -1px -1px var(--dark), inset 1px 1px var(--hi), inset -2px -2px var(--shade), inset 2px 2px var(--lite);
  --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--shade), inset -2px -2px var(--lite), inset 2px 2px var(--dark);
  --pressed: inset -1px -1px var(--hi), inset 1px 1px var(--dark), inset -2px -2px var(--lite), inset 2px 2px var(--shade);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--desk);
  color: var(--text);
  font: 14px/1.4 var(--ui-font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

#desktop {
  flex: 1;
  position: relative;
  display: flex;
  min-height: 0;
}

#play {
  flex: 1;
  position: relative;
  isolation: isolate; /* dialogs stack inside here, always under the taskbar and Start menu */
  min-width: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body.playing #game,
body.placing #game {
  cursor: none;
}

/* ---------- desktop icons (decoration; the fly walks on them) ---------- */
#icons {
  list-style: none;
  margin: 0;
  padding: 10px 6px;
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 14px;
  pointer-events: none;
}

#icons li {
  position: relative;
  width: 78px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  word-break: break-word;
}

.ico {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: center / contain no-repeat;
  image-rendering: pixelated;
  flex: none;
}

.ico-pc { background-image: url('/img/pc.svg'); }
.ico-bin { background-image: url('/img/bin.svg'); }
.ico-folder { background-image: url('/img/folder.svg'); }
.ico-xls { background-image: url('/img/xls.svg'); }
.ico-fly { background-image: url('/img/fly.svg'); }
.ico-brain { background-image: url('/img/brain.svg'); }
.ico-trophy { background-image: url('/img/trophy.svg'); }
.ico-beer { background-image: url('/img/beer.svg'); }
.ico-mail { background-image: url('/img/mail.svg'); }
.ico-tube { background-image: url('/img/tube.svg'); }
.ico-txt { background-image: url('/img/txt.svg'); }

body.losing #icons li {
  animation: fall 1.4s ease-in forwards;
}

body.losing #icons li:nth-child(2) { animation-delay: 0.15s; }
body.losing #icons li:nth-child(3) { animation-delay: 0.3s; }
body.losing #icons li:nth-child(4) { animation-delay: 0.1s; }
body.losing #icons li:nth-child(5) { animation-delay: 0.4s; }

@keyframes fall {
  30% { transform: rotate(-8deg); }
  100% { transform: translateY(110vh) rotate(40deg); }
}

/* ---------- Windows-ish windows ---------- */
.window {
  background: var(--face);
  box-shadow: var(--raised);
  padding: 3px;
  display: flex;
  flex-direction: column;
}

.window .title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 3px 2px 4px;
  background: linear-gradient(90deg, var(--navy), var(--title2));
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
}

.title-ico {
  width: 16px;
  height: 16px;
}

.title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tbtn {
  width: 22px;
  height: 20px;
  padding: 0;
  border: 0;
  background: var(--face);
  box-shadow: var(--raised);
  color: #000;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.tbtn:active {
  box-shadow: var(--pressed);
}

.window > .body {
  padding: 10px 12px;
  overflow: auto;
}

/* Link-buttons look like every other button, not link-blue (or visited purple). */
a.btn,
a.btn:visited {
  color: inherit;
}

.btn {
  min-height: 30px;
  padding: 4px 14px;
  border: 0;
  background: var(--face);
  box-shadow: var(--raised);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn:active,
.btn[aria-pressed='true'] {
  box-shadow: var(--pressed);
}

.btn:focus-visible,
.tbtn:focus-visible,
#start-menu button:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -5px;
}

.btn[hidden] {
  display: none;
}

.btn-big {
  font-weight: bold;
  min-height: 38px;
  padding: 6px 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- dialogs ---------- */
.dialog {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 20px));
  max-height: calc(100% - 20px);
}

.dialog[hidden] {
  display: none;
}

/* Five weapons need a little more room. */
#start-dlg {
  width: min(660px, calc(100% - 20px));
}

.dialog .body {
  max-height: calc(100vh - 140px);
}

.logo {
  margin: 2px 0 8px;
  font: 900 clamp(34px, 7vw, 54px) / 1 Impact, 'Arial Black', 'Helvetica Neue', sans-serif;
  letter-spacing: 1px;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px 0 #000;
}

.logo span {
  color: #ff3b3b;
}

.lede {
  margin: 0 0 8px;
}

#weapons {
  border: 0;
  margin: 10px 0;
  padding: 8px;
  box-shadow: var(--sunken);
  background: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

#weapons legend {
  padding: 0 4px;
  background: var(--face);
  font-weight: bold;
  font-size: 13px;
}

.wpick {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 8px 4px;
  border: 0;
  background: var(--face);
  box-shadow: var(--raised);
  cursor: pointer;
  min-width: 0;
}

.wpick .big {
  font-size: 26px;
  line-height: 1.1;
}

.wpick b {
  font-size: 13px;
}

.wpick small {
  font-size: 11px;
  color: #333;
}

.wpick .lvl {
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: #000080;
  padding: 0 5px;
}

.wpick[aria-checked='true'] {
  box-shadow: var(--pressed);
  background: #d8d8ff;
}

.wpick[aria-checked='true'] .lvl {
  background: #c00;
}

/* The picked weapon's blurb, for phones, where the cards drop theirs. */
.weapon-hint {
  display: none;
  margin: -4px 0 8px;
  font-size: 12px;
}

.tips {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

.tips li {
  margin: 2px 0;
}

/* Tip of the Day: small and quiet under the tips. Set on load and on each opening, never on a timer. */
.totd {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #444;
}

.totd .linkbtn {
  font-size: 12px;
}

/* A bigger tap target without a taller line. */
body.touch .totd .linkbtn {
  padding: 8px 4px;
  margin: -8px -4px;
}

/* The narrowest phones: keep the longest tip to 3 lines, even in a wide font like Verdana. */
@media (max-width: 340px) {
  .totd,
  .totd .linkbtn {
    font-size: 11px;
  }
}

/* Very short phone desktops (landscape) fit one icon per column, so fly.exe would run off the
   right edge. README goes (it stays in the Start menu as "WTF is this fly?"). */
@media (max-width: 760px) and (max-height: 350px) {
  #icons li[data-act='readme'] {
    display: none;
  }
}

kbd {
  font: 12px 'Lucida Console', monospace;
  padding: 0 4px;
  background: #fff;
  box-shadow: var(--raised);
}

body.touch .only-mouse,
body:not(.touch) .only-touch {
  display: none;
}

#win-rank {
  margin: 4px 0 6px;
  font: 900 28px/1.1 Impact, 'Arial Black', sans-serif;
  color: #c00;
  letter-spacing: 0.5px;
}

.stat-table {
  border-collapse: collapse;
  margin-top: 8px;
  background: #fff;
  box-shadow: var(--sunken);
  width: 100%;
}

.stat-table th,
.stat-table td {
  text-align: left;
  padding: 4px 10px;
  font-size: 13px;
}

.stat-table th {
  width: 45%;
  color: #333;
  font-weight: normal;
}

.notepad {
  background: #fff;
  box-shadow: var(--sunken);
  margin: 4px;
  font: 14px/1.45 'Lucida Console', Consolas, 'Courier New', monospace;
}

.notepad p,
.notepad ul {
  margin: 0 0 10px;
}

.notepad ul {
  padding-left: 18px;
}

.warn {
  font-weight: bold;
  font-size: 16px;
}

.prices {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

/* Price in its own column, so a wrapped line lines up under the text, not under the price. */
.prices li {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px dotted var(--shade);
}

.prices b {
  color: var(--vipps);
}

#vipps-box {
  background: #fff;
  box-shadow: var(--sunken);
  padding: 12px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#vipps-box p {
  margin: 0;
}

#vipps-number {
  flex: 1 1 240px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

#vipps-number[hidden] {
  display: none;
}

#vipps-number strong {
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--vipps);
}

#vipps-number small {
  flex-basis: 100%;
  color: #555;
}

#vipps-nordic,
#tip-other {
  flex-basis: 100%;
}

#vipps-nordic[hidden],
#tip-other[hidden] {
  display: none;
}

.tip-links {
  margin: 2px 0 0;
  padding-left: 18px;
}

.tip-links li {
  margin: 2px 0;
}

.tip-links small {
  color: #555;
}

body.touch .tip-links a {
  display: inline-block;
  padding: 8px 0;
}

.small {
  font-size: 12px;
  color: #333;
}

/* ---------- tip jar ("Spander en øl?"): quiet on purpose. No orange, no animation, no badge. ---------- */
.win-tip {
  margin: 10px 0 0;
  padding-top: 6px;
  border-top: 1px dotted var(--shade);
  font-size: 12px;
  color: #333;
}

.win-tip[hidden],
#win-tip-acts[hidden],
#tip-tray[hidden],
#tip-banner[hidden],
#tip-badge[hidden],
#tip-view-text[hidden] {
  display: none;
}

#win-tip-acts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-left: 4px;
}

.win-tip .linkbtn {
  font-size: 12px;
}

body.touch .win-tip .linkbtn {
  min-height: 32px;
}

/* Never beside the in-round beer tool, and the timer wins the tray space on phones. */
body.playing #tip-tray,
body.losing #tip-tray {
  display: none;
}

@media (max-width: 760px) {
  #tip-tray {
    display: none;
  }
}

.tip-banner {
  background: #ffffe1;
  box-shadow: var(--sunken);
  padding: 6px 8px;
  margin: 6px 0;
}

#tip-body:not([data-view='ask']) :is(#tip-intro, #tip-menu, #tip-promise) {
  display: none;
}

/* Locked (tipjar.js worthy): the joke instead of the number. Nothing to pay with, nothing to answer; Close and the share link stay. */
#tip-body[data-view='locked'] :is(#tip-badge, #tip-view-text, #vipps-box, #tip-did, #tip-no, #tip-honour),
#tip-body:not([data-view='locked']) #tip-locked {
  display: none;
}

.tip-locked {
  background: #fff;
  box-shadow: var(--sunken);
  padding: 12px;
  margin: 10px 0;
}

.tip-locked p {
  margin: 0;
}

#tip-locked-progress {
  margin-top: 8px;
}

#tip-locked-progress:empty {
  display: none;
}

/* Once unlocked: one quiet line under the heading. No orange, no animation. */
.tip-badge {
  font-size: 12px;
  color: #333;
  margin: 0 0 6px;
}

/* "No thanks" stays until it has been said (Copy alone doesn't answer the question). */
#tip-body:is([data-view='never'], [data-view='tipped']) #tip-no,
#tip-body[data-view='tipped'] #tip-did {
  display: none;
}

#tip-menu .sp-label small {
  font-weight: normal;
  text-transform: none;
}

.tip-promise {
  font-weight: bold;
  margin: 8px 0 0;
}

.vipps-steps {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12px;
  flex-basis: 100%;
}

#vipps-num-text {
  user-select: all;
}

body.touch #vipps-number strong {
  font-size: 28px;
}

body.touch #vipps-copy,
body.touch #tip-acts .btn {
  min-height: 44px;
}

/* ---------- brain monitor ---------- */
#brain-win {
  width: 350px;
  margin: 8px;
  align-self: flex-start;
  max-height: calc(100% - 16px);
  flex: none;
  z-index: 10;
}

#brain-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
}

#brain-win.collapsed #brain-body {
  display: none;
}

#brain {
  width: 100%;
  aspect-ratio: 1.45;
  box-shadow: var(--sunken);
  background: #070b16;
  display: block;
}

#raster {
  width: 100%;
  height: 92px;
  box-shadow: var(--sunken);
  background: #070b16;
  display: block;
}

#mood {
  margin: 0;
  min-height: 2.6em;
  padding: 4px 6px;
  background: #000;
  color: #33ff66;
  font: 15px/1.25 'VT323', 'Lucida Console', monospace;
  box-shadow: var(--sunken);
}

#meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
  font-size: 11px;
}

.meter {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 4px;
}

.meter abbr {
  text-decoration: none;
}

.meter b {
  height: 11px;
  box-shadow: var(--sunken);
  background: #fff;
  padding: 2px;
  display: block;
}

.meter i {
  display: block;
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 8px);
}

.meter[data-k='gf'] i {
  background: repeating-linear-gradient(90deg, #c00 0 6px, transparent 6px 8px);
}

.meter[data-k='bac'] i {
  background: repeating-linear-gradient(90deg, #c88a00 0 6px, transparent 6px 8px);
}

.meter em {
  font-style: normal;
  font-size: 11px;
  min-width: 34px;
  text-align: right;
}

.stats {
  margin: 0;
  font-size: 11px;
  color: #333;
}

/* ---------- taskbar ---------- */
#taskbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  background: var(--face);
  box-shadow: inset 0 1px var(--lite), inset 0 2px var(--hi);
}

.btn.start {
  font-weight: bold;
  padding: 2px 8px 2px 4px;
  min-height: 30px;
}

.btn.start .ico {
  width: 22px;
  height: 22px;
}

.sep {
  width: 2px;
  align-self: stretch;
  margin: 2px 2px;
  box-shadow: inset 1px 0 var(--shade), inset -1px 0 var(--hi);
}

.btn.task {
  min-height: 30px;
  padding: 2px 10px;
}

.btn.task:disabled {
  color: var(--shade);
  cursor: default;
}

.task-label {
  font-size: 12px;
  color: #222;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spacer {
  flex: 1;
}

.tray {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 8px;
  box-shadow: var(--sunken);
  min-height: 30px;
  white-space: nowrap;
  font-size: 13px;
}

#timer b {
  font-variant-numeric: tabular-nums;
}

#timer.urgent b {
  color: #c00;
  animation: blink 0.5s steps(1) infinite;
}

.tray-btn {
  box-shadow: none;
  background: transparent;
  width: auto;
  font-size: 15px;
}

#start-menu {
  position: absolute;
  z-index: 40;
  left: 2px;
  bottom: calc(42px + env(safe-area-inset-bottom));
  display: flex;
  background: var(--face);
  box-shadow: var(--raised);
  padding: 3px;
  min-width: 250px;
}

#start-menu[hidden] {
  display: none;
}

#start-menu .banner {
  width: 26px;
  background: linear-gradient(0deg, var(--navy), var(--title2));
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#start-menu .banner span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #c0c0c0;
  font: bold 18px Impact, 'Arial Black', sans-serif;
  padding: 6px 0;
  letter-spacing: 1px;
}

#start-menu .banner b {
  color: #fff;
}

#start-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#start-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px 8px 10px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
}

#start-menu button:hover,
#start-menu button:focus-visible {
  background: var(--navy);
  color: #fff;
}

.sepline {
  height: 2px;
  margin: 3px 2px;
  box-shadow: inset 0 1px var(--shade), inset 0 -1px var(--hi);
}

#toast {
  position: absolute;
  z-index: 89; /* over the windows (a toast under fly.exe is never seen), under the balloons and bluescreens */
  top: 10px;
  left: 10px;
  right: 10px;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 20px);
  padding: 6px 12px;
  background: #ffffe1;
  border: 1px solid #000;
  font-size: 13px;
  pointer-events: none;
  text-align: center;
}

#toast[hidden] {
  display: none;
}

/* ---------- WIN: classic bluescreen ---------- */
.bsod-classic {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0000aa;
  color: #fff;
  font: clamp(18px, 2.4vw, 30px) / 1.25 'VT323', 'Lucida Console', 'Courier New', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.bsod-classic[hidden] {
  display: none;
}

.bsod-classic-inner {
  max-width: 46em;
}

.bsod-classic p {
  margin: 0 0 1em;
}

.bsod-classic-title {
  text-align: center;
}

.bsod-classic-title span {
  background: #aaa;
  color: #0000aa;
  padding: 0 0.5em;
}

.bsod-classic .center {
  text-align: center;
}

.bsod-classic .hint {
  min-height: 1.2em;
  color: #ffff55;
}

.bsod-key {
  font: inherit;
  color: #0000aa;
  background: #fff;
  border: 0;
  padding: 0 0.4em;
  cursor: pointer;
  animation: pulse 1.2s ease-in-out infinite;
}

.shatter-host {
  position: fixed;
  inset: 0;
  z-index: 101;
  pointer-events: none;
  overflow: hidden;
}

.shatter-strip {
  position: absolute;
  inset: 0;
  transition:
    transform 1s cubic-bezier(0.55, 0, 0.9, 0.45),
    opacity 1s;
}

.blink {
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); }
}

/* ---------- LOSE: the fly eats your PC ---------- */
#lose-canvas {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0078d7;
  display: block;
}

#lose-canvas[hidden] {
  display: none;
}

#lose-canvas.shake {
  animation: shake 0.16s linear;
}

@keyframes shake {
  25% { transform: translate(-6px, 3px); }
  50% { transform: translate(5px, -4px); }
  75% { transform: translate(-3px, -2px); }
}

.skip {
  position: fixed;
  z-index: 105;
  right: 12px;
  top: calc(12px + env(safe-area-inset-top));
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  padding: 6px 12px;
  cursor: pointer;
}

.skip[hidden] {
  display: none;
}

#dead-screen {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #000;
  color: #c0c0c0;
  padding: max(24px, 5vh) max(16px, 6vw);
  overflow: auto;
  font: clamp(17px, 2.2vw, 26px) / 1.3 'VT323', 'Lucida Console', monospace;
}

#dead-screen[hidden] {
  display: none;
}

#dead-text {
  font: inherit;
  margin: 0 0 1em;
  white-space: pre-wrap;
  word-break: break-word;
}

#dead-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#dead-actions[hidden] {
  display: none;
}

.term-btn {
  font: inherit;
  color: #c0c0c0;
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  text-align: left;
}

.term-btn:hover,
.term-btn:focus-visible {
  background: #c0c0c0;
  color: #000;
  outline: none;
}

.noscript {
  position: fixed;
  inset: auto 0 50% 0;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

/* ---------- small screens: brain on top, compact ---------- */
@media (max-width: 760px) {
  #desktop {
    flex-direction: column;
  }

  #brain-win {
    order: -1;
    width: auto;
    margin: 4px 4px 0;
    align-self: stretch;
    max-height: 46vh;
  }

  #brain-body {
    display: grid;
    grid-template-columns: 44% 1fr;
    grid-template-areas:
      'brain mood'
      'brain meters'
      'raster raster';
    gap: 4px 6px;
    padding: 4px;
  }

  #brain { grid-area: brain; }
  #mood { grid-area: mood; font-size: 14px; min-height: 0; }
  #meters { grid-area: meters; grid-template-columns: 1fr; gap: 1px; font-size: 10px; }
  #raster { grid-area: raster; height: 70px; }
  .stats { display: none; }
  .meter { grid-template-columns: 64px 1fr auto; }
  .meter b { height: 8px; padding: 1px; }
  .meter:nth-child(n + 5):not([data-k='bac']) { display: none; }

  .window .title {
    font-size: 12px;
  }

  #weapons {
    gap: 5px;
    padding: 6px;
  }

  .wpick small {
    display: none;
  }

  .weapon-hint {
    display: block;
  }

  #icons li {
    width: 64px;
    font-size: 11px;
  }

  .task-label,
  #clock,
  .btn.task span {
    display: none;
  }

  .tray {
    gap: 8px;
    padding: 3px 6px;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  #raster {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blink,
  .bsod-key,
  #timer.urgent b,
  #lose-canvas.shake,
  body.losing #icons li {
    animation: none;
  }

  .shatter-strip {
    transition: opacity 0.6s;
  }
}


/* ===================== Lab Leak & friends ===================== */

#icons li.hover span:last-of-type {
  background: var(--navy);
  outline: 1px dotted #fff;
}

#icons .badge {
  position: absolute;
  top: -2px;
  right: 14px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e00;
  color: #fff;
  font: bold 11px/18px var(--ui-font);
  text-shadow: none;
  box-shadow: 0 0 0 1px #fff;
}

#icons .badge[hidden] {
  display: none;
}

body.playing #icons li.extra {
  opacity: 0.6;
}

.dialog.wide {
  width: min(760px, calc(100% - 20px));
}

.modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.btn.mode {
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  padding: 8px 10px;
  min-height: 58px;
}

.btn.mode .mi {
  font-size: 22px;
  width: 28px;
  text-align: center;
  flex: none;
}

.btn.mode b {
  display: block;
  font-size: 14px;
}

.btn.mode small {
  display: block;
  font-weight: normal;
  font-size: 11px;
  color: #333;
}

.btn.mode.locked {
  color: var(--shade);
}

.progress-line {
  margin: 4px 0 10px;
  font-weight: bold;
}

#specimen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.spec {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 92px;
  padding: 8px;
  border: 0;
  background: #fff;
  box-shadow: var(--raised);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.spec .num {
  font: 18px/1 'VT323', 'Lucida Console', monospace;
  color: #c00;
}

.spec .nm {
  font-style: italic;
  font-size: 15px;
}

.spec .nick {
  color: #444;
  font-size: 11px;
}

.spec .medals {
  margin-top: auto;
  display: flex;
  gap: 4px;
}

.spec .medals i {
  font-style: normal;
  filter: grayscale(1);
  opacity: 0.3;
}

.spec .medals i.got {
  filter: none;
  opacity: 1;
}

.spec .stamp {
  position: absolute;
  right: -18px;
  top: 16px;
  transform: rotate(28deg);
  padding: 1px 22px;
  background: #0a0;
  color: #fff;
  font: bold 10px var(--ui-font);
  letter-spacing: 1px;
}

.spec.locked {
  background: repeating-linear-gradient(45deg, #ddd 0 8px, #ccc 8px 16px);
  color: #777;
  cursor: not-allowed;
}

.spec.boss:not(.locked) {
  background: #000;
  color: #7dffea;
}

.spec.boss:not(.locked) .nick {
  color: #ff6bd5;
}

.spec:not(:disabled):hover {
  outline: 2px solid var(--navy);
}

.spec:active:not(:disabled) {
  box-shadow: var(--pressed);
}

.sp-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

#sp-preview {
  width: 200px;
  height: 130px;
  flex: none;
  box-shadow: var(--sunken);
}

.sp-num {
  margin: 0;
  font: 18px 'VT323', 'Lucida Console', monospace;
  color: #c00;
}

#sp-name {
  margin: 0;
  font: italic 900 28px/1.1 Georgia, 'Times New Roman', serif;
}

.sp-sym,
.sp-nick {
  margin: 2px 0;
  font-size: 13px;
}

.sp-label {
  margin: 10px 0 2px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #555;
}

.sp-fact,
.sp-twist {
  margin: 0;
  padding: 6px 8px;
  background: #fff;
  box-shadow: var(--sunken);
}

.sp-twist {
  background: #ffffe1;
}

.sp-loadout {
  margin: 8px 0 0;
  font-weight: bold;
}

.sp-medals {
  margin: 0;
}

#ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

#ach-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: #fff;
  box-shadow: var(--sunken);
}

#ach-list li.locked {
  background: #e8e8e8;
  color: #666;
}

#ach-list .aico {
  font-size: 22px;
  width: 30px;
  text-align: center;
  flex: none;
}

#ach-list b,
#ach-list small {
  display: block;
}

#ach-list small {
  font-size: 12px;
}

.mailbody {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 8px;
  min-height: 340px;
}

#mail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  box-shadow: var(--sunken);
  overflow: auto;
  max-height: 60vh;
}

#mail-list .empty,
#mail-view .empty {
  padding: 10px;
  color: #666;
}

.mail {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  cursor: pointer;
}

.mail.unread .from,
.mail.unread .subj {
  font-weight: bold;
}

.mail.unread::before {
  content: '✉ ';
  color: var(--navy);
}

.mail.sel {
  background: var(--navy);
  color: #fff;
}

.mail .from {
  display: block;
  font-weight: normal;
  font-size: 12px;
}

.mail .subj {
  display: block;
  font-size: 13px;
}

.mail .when {
  display: block;
  font-size: 11px;
  opacity: 0.7;
}

#mail-view {
  background: #fff;
  box-shadow: var(--sunken);
  padding: 10px 14px;
  overflow: auto;
  max-height: 60vh;
}

#mail-view h3 {
  margin: 0 0 4px;
}

#mail-view .meta {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  color: #444;
}

#mail-view p {
  margin: 0 0 10px;
}

.note-body {
  margin: 0;
  padding: 10px;
  background: #fff;
  box-shadow: var(--sunken);
  font: 14px/1.45 'Lucida Console', Consolas, monospace;
  white-space: pre-wrap;
}

/* tray additions */
#lives b,
#streak b,
#temp b {
  font-variant-numeric: tabular-nums;
}

#lives[hidden],
#streak[hidden],
#temp[hidden] {
  display: none;
}

#temp.hot b {
  color: #c00;
}

#mail-btn {
  position: relative;
}

#mail-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #e00;
  color: #fff;
  font: bold 10px/15px var(--ui-font);
}

#mail-count[hidden] {
  display: none;
}

#tools {
  display: flex;
  gap: 4px;
}

.btn.task.cooling {
  color: #c00;
}

/* CPU heat (shibire level) */
#play::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgba(255, 120, 0, 0.35), rgba(255, 40, 0, 0.55));
  opacity: var(--heat, 0);
  mix-blend-mode: multiply;
  z-index: 3;
}

/* Balloons */
#balloons {
  position: fixed;
  z-index: 90; /* under the bluescreens */
  right: 8px;
  bottom: calc(48px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.balloon {
  pointer-events: auto;
  position: relative;
  width: min(300px, calc(100vw - 24px));
  padding: 8px 28px 8px 10px;
  background: #ffffe1;
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  animation: pop 0.25s ease-out;
}

.balloon.out {
  opacity: 0;
  transition: opacity 0.25s;
}

.balloon .bt {
  margin: 0;
  font-weight: bold;
  display: flex;
  gap: 6px;
  align-items: center;
}

.balloon .bb {
  margin: 3px 0 0;
  font-size: 13px;
}

.balloon .bclose {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  font-size: 12px;
}

@keyframes pop {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .modes {
    grid-template-columns: 1fr;
  }

  .btn.mode {
    min-height: 46px;
  }

  #specimen-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .sp-head {
    flex-direction: column;
    align-items: flex-start;
  }

  #sp-preview {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 200 / 130;
  }

  #ach-list {
    grid-template-columns: 1fr;
  }

  .mailbody {
    grid-template-columns: 1fr;
  }

  /* Tight taskbar: the tray (timer!) always wins over the tool buttons. */
  #taskbar {
    gap: 3px;
  }

  .btn.start {
    font-size: 0;
    padding: 2px 4px;
  }

  .sep {
    margin: 2px 0;
  }

  #tools {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  #tools .btn.task {
    padding: 2px 6px;
    flex-shrink: 0;
  }

  #tools [data-tool='heat'] b {
    display: none;
  }

  .tray {
    flex-shrink: 0;
    gap: 6px;
    padding: 3px 5px;
  }

  #temp,
  #lives,
  #streak,
  #miss-count {
    font-size: 12px;
  }

  #mail-list,
  #mail-view {
    max-height: none;
  }

  #icons li.extra {
    display: none;
  }

  #lives,
  #streak {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .balloon {
    animation: none;
  }
}

@media (max-width: 760px), (max-height: 500px) {
  .mailbody {
    min-height: 0;
  }
}

@media (max-width: 400px) {
  body.playing #miss-count {
    display: none;
  }
}

/* ---------- FULL BRAIN toggle ---------- */
.fullbrain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 6px 8px;
  box-shadow: var(--sunken);
  background: #fff;
}

.fb-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  border: 0;
  background: none;
  padding: 2px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.fb-switch small {
  font-size: 11px;
  color: #333;
}

.fb-switch:focus-visible,
.linkbtn:focus-visible {
  outline: 1px dotted #000;
}

.fb-switch:disabled {
  cursor: not-allowed;
  color: var(--shade);
}

.fb-box {
  flex: none;
  width: 13px;
  height: 13px;
  background: #fff;
  box-shadow: var(--sunken);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
}

.fb-switch[aria-checked='true'] .fb-box::after {
  content: '✓';
}

.fb-bar {
  flex: 1 1 100%;
  height: 12px;
  padding: 2px;
  background: #fff;
  box-shadow: var(--sunken);
}

.fb-bar[hidden] {
  display: none;
}

.fb-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--navy) 0 8px, transparent 8px 10px);
}

.fb-status {
  flex: 1 1 200px;
  margin: 0;
  font-size: 11px;
  color: #333;
}

.fb-status.err {
  color: #c00;
}

.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

.notepad .linkbtn {
  font-size: inherit;
}