/* =========================================================================
   MINEQUEST - style.css
   A love letter to Windows 95, classic Minesweeper and Web 1.0.
   Palette: face #c0c0c0, light #ffffff, shadow #808080, dark #0a0a0a.
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #008080;               /* the one true desktop teal */
  color: #000;
  font-family: "MS Sans Serif", "Tahoma", "Geneva", "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: none;
}

body {
  padding: 14px 10px 28px;
  min-height: 100vh;
}

#desktop {
  max-width: 900px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- bevels */

.window {
  background: #c0c0c0;
  padding: 3px;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}

.sunken {
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}

/* ------------------------------------------------------------- title bar */

.titlebar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  color: #fff;
  padding: 3px 3px 3px 4px;
  font-weight: bold;
  letter-spacing: 0.02em;
  user-select: none;
}

.titlebar-icon { font-size: 13px; line-height: 1; }

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

.titlebar-buttons { display: flex; gap: 2px; flex: 0 0 auto; }

.tb-btn {
  width: 18px;
  height: 16px;
  padding: 0;
  border: 0;
  background: #c0c0c0;
  color: #000;
  font-family: inherit;
  font-size: 10px;
  line-height: 14px;
  cursor: default;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}
.tb-btn:active {
  box-shadow:
    inset  1px  1px #0a0a0a,
    inset -1px -1px #ffffff,
    inset  2px  2px #808080,
    inset -2px -2px #dfdfdf;
}

/* -------------------------------------------------------------- menu bar */

.menubar {
  display: flex;
  gap: 2px;
  padding: 2px 2px 3px;
  border-bottom: 1px solid #808080;
  margin-bottom: 3px;
}

.menu-item {
  padding: 2px 7px;
  cursor: default;
  user-select: none;
}
.menu-item:hover { background: #000080; color: #fff; }
.menu-item u { text-decoration: underline; }

/* ------------------------------------------------------------- workspace */

.workspace {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 0 3px;
}

.board-col { flex: 0 1 auto; min-width: 0; }

.board-frame {
  padding: 3px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
  line-height: 0;
}

#board {
  display: block;
  width: 640px;
  height: auto;          /* keeps 4:3 when max-width shrinks the board */
  max-width: 100%;
  background: #808080;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  cursor: crosshair;
}

/* --------------------------------------------------------------- ticker */

.ticker {
  margin-top: 5px;
  height: 20px;
  overflow: hidden;
  position: relative;
  background: #000;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}

/* v9: THE TICKER IS A READING SPEED, NOT A DURATION.

   The track is the whole TIPS list joined into one line, so its width grows
   every time a tip is added and a fixed duration means the text speeds up as
   the game gets more to say -- at 46s the line was crossing the plate at
   roughly 800 pixels a second, which is unreadable by any measure. UI.fitTicker
   measures the track and sets `animation-duration` inline from a constant
   PIXELS PER SECOND, so the text reads at the same pace whatever it says.

   The duration below is only the floor the page falls back to when JS has not
   run yet (or cannot measure); it is deliberately slow rather than right. */
.ticker-track {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  line-height: 20px;
  color: #00ff66;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  padding-left: 100%;
  animation: scrollticker 900s linear infinite;
}

@keyframes scrollticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* REDUCED MOTION: the plate stops being a marquee and becomes a sign. JS picks
   one tip and adds .ticker-still (see UI.buildTicker); the media query is the
   half that works without it, and it also wins over the inline duration because
   `animation: none` is a different property to `animation-duration`. */
.ticker-track.ticker-still {
  padding-left: 8px;
  animation: none;
  transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 12px);
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    padding-left: 8px;
    animation: none;
    transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 12px);
  }
}

/* -------------------------------------------------------------- sidebar */

.side-col {
  flex: 1 1 208px;
  min-width: 190px;
  max-width: 230px;
}

.group {
  border: 0;
  margin: 0 0 6px;
  padding: 6px 7px 8px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}

.group legend {
  padding: 0 4px;
  font-weight: bold;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1px 0;
}
.stat-row.tiny { font-size: 10px; color: #303030; }
.stat-key { color: #000080; font-weight: bold; }
.stat-val { font-family: "Courier New", Courier, monospace; font-weight: bold; }
.stat-val.gold { color: #806000; }

/* v6: the FIELD plate carries a PHRASE ("a wall of mines"), not a number, so
   it gets the room the label does not need and clips rather than wrapping the
   row onto two lines and shoving the panel about. */
#s-field {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.bar {
  height: 14px;
  margin: 3px 0 5px;
  background: #000;
  overflow: hidden;
}
.bar.thin { height: 8px; }

.bar-fill {
  height: 100%;
  width: 100%;
  transition: width 0.12s linear;
}
.bar-fill.hp {
  background: repeating-linear-gradient(90deg, #00c000 0 6px, #00a000 6px 8px);
}
.bar-fill.hp.hurt {
  background: repeating-linear-gradient(90deg, #d0d000 0 6px, #a0a000 6px 8px);
}
.bar-fill.hp.danger {
  background: repeating-linear-gradient(90deg, #e00000 0 6px, #a00000 6px 8px);
}
.bar-fill.xp {
  background: repeating-linear-gradient(90deg, #3050d0 0 6px, #2038a0 6px 8px);
}

/* v6: ENERGY. Amber, so it reads as "stamina" beside the green HP bar and the
   blue Focus bar without any of the three being mistaken for another. It goes
   red when there is not enough left for a single deliberate act. */
.bar-fill.nrg {
  background: repeating-linear-gradient(90deg, #e0a020 0 6px, #b07810 6px 8px);
}
.bar-fill.nrg.low {
  background: repeating-linear-gradient(90deg, #c06010 0 6px, #904008 6px 8px);
}
.bar-fill.nrg.spent {
  background: repeating-linear-gradient(90deg, #a01818 0 6px, #700f0f 6px 8px);
}

/* v7.1: the plate carries the BEARING as well as the distance, because they
   are one fact -- how far Minehead is, and which way. The needle is small and
   cyan so it reads as an instrument beside the red LED rather than competing
   with it; the number keeps the whole middle of the plate and its old size. */
.depth-box {
  display: flex;
  align-items: center;
  background: #000;
  color: #ff3030;
  font-family: "Courier New", Courier, monospace;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  padding: 2px 5px 3px;
  margin-bottom: 3px;
}

.depth-dir {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0;
  color: #40e0ff;                    /* the compass cyan: never quest gold */
}

.depth-num { flex: 1 1 auto; }

.band-name {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #000080;
  margin-bottom: 4px;
  min-height: 12px;
}

/* -------------------------------------------------------------- buttons */

.btn {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 6px;
  background: #c0c0c0;
  color: #000;
  border: 0;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}
.btn:active, .btn.pressed {
  padding: 5px 5px 3px 7px;
  box-shadow:
    inset  1px  1px #0a0a0a,
    inset -1px -1px #ffffff,
    inset  2px  2px #808080,
    inset -2px -2px #dfdfdf;
}
.btn:focus { outline: 1px dotted #000; outline-offset: -4px; }
.btn[disabled] { color: #808080; text-shadow: 1px 1px #fff; cursor: default; }
.btn.wide { display: block; width: 100%; margin-top: 6px; }
.btn.big { font-size: 13px; font-weight: bold; padding: 7px 14px; }
.btn.big:active { padding: 8px 13px 6px 15px; }

.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

/* ------------------------------------------------------------ message log */

.log-wrap { padding: 6px 6px 0; }

.panel-label {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #000080;
  margin-bottom: 2px;
}

.log {
  height: 104px;
  overflow-y: scroll;
  background: #000;
  padding: 3px 5px;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 14px;
  color: #c0c0c0;
}

.log div { white-space: pre-wrap; word-break: break-word; }
.log .m-good   { color: #40ff40; }
.log .m-bad    { color: #ff5050; }
.log .m-gold   { color: #ffd700; }
/* v7.4: a SET piece dropping is its own event. The message log is plain text
   with a class per line -- it cannot colour one word inside a sentence -- so a
   set drop gets a LINE of its own in the same green the pack paints it, which
   is the only per-item colour the log can honestly carry. Kept in step with
   Items.SET_RARITY.color. */
.log .m-set    { color: #00e08c; font-weight: bold; }
.log .m-level   { color: #ffff40; font-weight: bold; }
.log .m-sys    { color: #8080ff; }
.log .m-dim    { color: #808080; }
.log .m-crit   { color: #ff9020; font-weight: bold; }

/* ------------------------------------------------------------- status bar */

.statusbar {
  display: flex;
  gap: 3px;
  padding: 4px 3px 2px;
}

.status-cell {
  padding: 2px 6px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
.status-cell.grow { flex: 1 1 auto; min-width: 0; }

/* =================================================================== WEB 1.0 */

.web10 {
  margin-top: 14px;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  color: #ffffcc;
}

.construction {
  background: repeating-linear-gradient(45deg, #ffd800 0 10px, #000 10px 20px);
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  animation: blinkbar 1.6s steps(1) infinite;
}
@keyframes blinkbar { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.72; } }

.counter-line { margin: 10px 0 6px; font-size: 14px; line-height: 1.7; }

/* the aside beside the counter: present, but never competing with the number */
.counter-note {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-style: italic;
  color: #99bbbb;
}

.counter {
  display: inline-block;
  background: #000;
  color: #00ff44;
  font-family: "Courier New", Courier, monospace;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 3px;
  padding: 2px 7px;
  border: 2px inset #808080;
  vertical-align: middle;
}

/* the badge wall wraps as a centred block, so six badges on a phone are three
   tidy rows rather than a ragged column with one orphan */
.netscape {
  margin: 6px auto;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.badge {
  display: inline-block;
  margin: 2px;
  padding: 3px 7px;
  font-size: 10px;
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}

.smallprint {
  font-size: 12px;
  margin: 8px auto 0;
  max-width: 640px;
  line-height: 1.6;
  color: #cceeee;
}
/* the fake links are BUTTONS wearing 1997 link paint: they open a window and
   never navigate, so they must not look clickable-then-do-nothing */
.smallprint a {
  color: #ffff66;
  white-space: nowrap;
  cursor: pointer;
}
.smallprint a:visited { color: #ff99ff; }
.smallprint a:hover, .smallprint a:focus { color: #ffffff; background: #000066; }

#site-version { letter-spacing: 1px; }

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

@media (max-width: 700px) {
  .counter-note { display: block; margin: 2px 0 0; }
  .construction { font-size: 10px; }
  .smallprint { padding: 0 8px; }
}

/* ================================================================== OVERLAY */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.overlay[hidden] { display: none; }

.dialog {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow: auto;
  padding: 3px;
}
.dialog.wide { max-width: 620px; }

/* v7.2: THE TWO LIST WINDOWS HOLD THEIR SHAPE.
   The overlay centres the dialog, so any change in its height moves every row
   inside it by half that change -- which is how a hover that resized the
   compare panel could shake a row out from under the pointer. The panel is a
   fixed box now, so hovering cannot do it at all; this floor stops the same
   jump happening for the OTHER reasons these two windows change content
   (switching BUY/SELL, ticking the first line, a category tab with fewer rows
   in it). They keep `max-height: 92vh` and their own scrollbar above it, so a
   short screen is unaffected. */
.dialog.dlg-shop, .dialog.dlg-gear { min-height: 560px; }

@media (max-height: 780px) {
  .dialog.dlg-shop, .dialog.dlg-gear { min-height: 500px; }
}
@media (max-height: 640px) {
  .dialog.dlg-shop, .dialog.dlg-gear { min-height: 0; }
}

.dialog-body { padding: 12px 14px 14px; }

.dialog-body h2 {
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.dialog-body p { margin: 0 0 8px; line-height: 1.45; }
.dialog-body ul { margin: 0 0 10px; padding-left: 18px; line-height: 1.5; }
.dialog-body .hint { font-size: 11px; color: #404040; }

.dialog-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

/* ------------------------------------------------------------- splash art */

.splash { text-align: center; }

/* v10 rename: SWEEPER HEROES is five characters longer than MINEQUEST and the
   title dialog is 480px wide, so the wordmark is sized to fit the new name
   rather than to overflow it. It still wraps rather than clipping if a
   fallback font is wider than Courier. */
.wordmark {
  font-family: "Courier New", Courier, monospace;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 1;
  margin: 6px 0 2px;
  color: #c0c0c0;
  text-shadow:
     2px  2px 0 #000080,
     4px  4px 0 #000040,
    -1px -1px 0 #ffffff;
}

.wordmark .q { color: #ff3030; text-shadow: 2px 2px 0 #600000, -1px -1px 0 #ffc0c0; }

.tagline {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 14px;
  margin: 6px 0 12px;
}

.splash-rule {
  height: 2px;
  background: linear-gradient(90deg, transparent, #000080, transparent);
  margin: 10px 0;
}

.seed-row {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  margin: 10px 0 4px;
  font-size: 11px;
}

.seed-row input {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  width: 150px;
  padding: 3px 4px;
  border: 0;
  background: #fff;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}

/* ------------------------------------------------------------------ combat */

.combat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.combat-portrait {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  background: #000;
  image-rendering: pixelated;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}

.combat-info { flex: 1 1 auto; min-width: 0; }
.combat-name { font-weight: bold; font-size: 14px; }
.combat-sub { font-size: 11px; color: #404040; margin-bottom: 3px; }

.combat-log {
  height: 116px;
  overflow-y: scroll;
  background: #000;
  color: #c0c0c0;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 15px;
  padding: 3px 5px;
  margin-top: 8px;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
.combat-log .m-good { color: #40ff40; }
.combat-log .m-bad  { color: #ff5050; }
.combat-log .m-crit { color: #ff9020; font-weight: bold; }
.combat-log .m-gold { color: #ffd700; }
.combat-log .m-set  { color: #00e08c; font-weight: bold; }
.combat-log .m-sys  { color: #8080ff; }
.combat-log .m-dim  { color: #808080; }
.combat-log .m-level { color: #ffff60; font-weight: bold; }

/* ==================================================== v6: CHOICE EVENTS
   The dialog reuses the combat window's parts -- portrait, log, big buttons.
   All that is new is the stack of option rows and the little numbered key
   badge on each, so a mouse player and a keyboard player see the same thing. */

.ev-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.ev-name {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: bold;
  font-size: 15px;
  color: #400000;
}
.ev-intro {
  background: #d8d4c0;
  padding: 6px 8px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080;
}
.ev-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.btn.ev-opt {
  text-align: left;
  padding: 5px 8px;
}
.btn.ev-opt .btn-sub {
  display: block;
  margin-top: 1px;
}
.ev-key {
  display: inline-block;
  min-width: 13px;
  margin-right: 5px;
  padding: 0 2px;
  background: #000080;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
}
.btn[disabled] .ev-key { background: #808080; }

/* -------------------------------------------------------------------- shop */

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: #fff;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
table.grid th,
table.grid td {
  border: 1px solid #c0c0c0;
  padding: 3px 5px;
  text-align: left;
}
table.grid th {
  background: #c0c0c0;
  font-size: 10px;
  letter-spacing: 0.06em;
}
table.grid td.num { text-align: right; font-family: "Courier New", monospace; }
table.grid tr.rank1 td { background: #ffffcc; font-weight: bold; }

.shop-row-btn { font-size: 10px; padding: 2px 6px; }

/* ------------------------------------------------------------------ misc */

.kbd {
  display: inline-block;
  min-width: 16px;
  text-align: center;
  padding: 1px 4px;
  margin: 0 1px;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}

.blink { animation: blinktext 1s steps(1) infinite; }
@keyframes blinktext { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.center { text-align: center; }
.dead-stat { font-family: "Courier New", monospace; font-size: 13px; }
.dead-depth {
  font-family: "Courier New", monospace;
  font-size: 34px;
  font-weight: bold;
  color: #a00000;
  letter-spacing: 3px;
}

/* the run you just lost, drawn as a map -- sunken like every other panel */
.death-map {
  display: block;
  margin: 8px auto;
  max-width: 300px;
  background: #0b0b0f;
  image-rendering: pixelated;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}

/* ==================================================== v2: STATUS EFFECTS */

.sbadges { display: flex; flex-wrap: wrap; gap: 3px; }

.sbadge {
  display: inline-block;
  padding: 1px 4px;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: bold;
  background: #000;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
.sbadge.bad  { background: #1a0000; }
.sbadge.good { background: #001a00; }

/* ========================================================= v2: CONTRACTS */

.qlist { font-size: 10px; line-height: 13px; }
.qrow { padding: 1px 0; border-bottom: 1px dotted #a0a0a0; }
.qrow:last-child { border-bottom: 0; }
.qrow.qdone { color: #006000; font-weight: bold; }

/* ========================================================= v2: RARITIES */

.it { font-weight: bold; }

/* ========================================================= v2: PAPERDOLL */

.paperdoll {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}
.pd-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.pd-slot {
  padding: 4px 5px;
  min-height: 54px;
  background: #c0c0c0;
  cursor: default;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
.pd-slot.filled { cursor: pointer; background: #cdcdcd; }
.pd-slot.filled:hover { background: #d8d8d8; }

.pd-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #000080;
  font-weight: bold;
  margin-bottom: 2px;
}

/* v5: a little bevelled plate of a glyph in front of each slot name, so the
   three typed accessory slots read apart at a glance. */
.pd-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  line-height: 13px;
  margin-right: 4px;
  text-align: center;
  vertical-align: -2px;
  background: #000;
  color: #ffd700;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080;
}

/* v5: the note that explains typed accessory slots, in the paperdoll's third
   column where the second trinket used to sit. */
.pd-note {
  padding: 5px 6px;
  font-size: 10px;
  line-height: 13px;
  background: #d8d4c0;
  flex: 1 1 auto;
}
.pd-note b { color: #000080; }
.pd-item { font-size: 11px; line-height: 13px; word-break: break-word; }
.pd-stats { font-size: 10px; line-height: 12px; margin-top: 2px; }

.pd-totals {
  padding: 5px 7px;
  font-size: 11px;
  background: #000;
  color: #c0c0c0;
  font-family: "Courier New", Courier, monospace;
}
.pd-totals b { color: #ffd700; }

/* ================================================ v7 phase 1: SETS & LEGENDS
   Two more black-on-grey readout plates under the paperdoll totals, in the
   same Courier the totals already use -- a 1997 property sheet would have
   listed a set bonus in exactly this kind of fixed-pitch block, and the
   inactive tiers are simply dimmer rather than hidden, so you can see what
   the next two pieces would buy you. */
.pd-sets, .pd-legends {
  padding: 5px 7px;
  margin-bottom: 4px;
  font-size: 11px;
  background: #000;
  color: #909090;
  font-family: "Courier New", Courier, monospace;
}
.pd-sets > b, .pd-legends > b { color: #ffd700; }
.set-block { margin-top: 4px; }
.set-name  { font-weight: bold; }
.set-name .hint { color: #707070; font-weight: normal; }
.set-bonus { padding-left: 8px; color: #6a6a6a; line-height: 14px; }
.set-bonus.live { color: #d8d8d8; }
.set-bonus b { color: #909090; }
.set-bonus.live b { color: #ffd700; }
.set-live { color: #3ec93e; font-weight: bold; }
.it-set { font-size: 10px; }
.legend-line { padding-left: 8px; line-height: 14px; }
.legend-line b { color: #ff9424; }
.legend-line .hint { color: #909090; }

/* ============================================== v6 phase 4: PACK + GEAR
   One window: the paperdoll on the left, everything you are carrying on the
   right. Two bevelled panes side by side, which is exactly how a 1997
   property sheet would have done it -- and which collapses to one column on a
   narrow window without any of it moving about. */

.gearwin {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.gearwin-left  { flex: 1 1 300px; min-width: 0; }
.gearwin-right { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; }

.gearwin .paperdoll { margin-bottom: 6px; }
.gearwin .pd-totals { margin-bottom: 4px; }
.gearwin .hint { font-size: 10px; line-height: 13px; }

/* the pack list scrolls inside its pane rather than growing the dialog */
.gear-scroll {
  max-height: 268px;
  overflow-y: auto;
  margin-bottom: 5px;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
.row-btns { white-space: nowrap; }
.row-btns .btn { margin-right: 3px; }
.row-btns .btn:last-child { margin-right: 0; }

@media (max-width: 700px) {
  .gearwin { flex-direction: column; }
  .gearwin-left, .gearwin-right { flex: 1 1 auto; width: 100%; }
}

/* ================================== v6 phase 4: THE COMPARISON CHIPS
   Green is what you would gain, red what you would give up. Deliberately
   chunky and monospaced so a column of them lines up and can be read at a
   glance instead of parsed. */

.cmp-row { margin-top: 2px; line-height: 15px; }

.cmp {
  display: inline-block;
  margin: 1px 3px 0 0;
  padding: 0 3px;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: bold;
  background: #000;
  box-shadow:
    inset -1px -1px #6a6a6a,
    inset  1px  1px #2a2a2a;
}
.cmp.up   { color: #40ff40; }
.cmp.down { color: #ff5050; }
.cmp-same { font-size: 10px; color: #606060; font-style: italic; }
.cmp-more { font-size: 10px; color: #808080; }

/* =============================== v7 phase 3: PER-ITEM ICONS
   A bevelled tile, exactly the shape of every other affordance on this page.
   The SYMBOL is the item, its COLOUR is the rarity and the FRAME is the
   category, so one 16px square carries three facts. Sized in whole pixels and
   never scaled, because a half-pixel border is the one thing that stops a
   Windows 95 form looking like a Windows 95 form. */

.it-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 15px;
  margin-right: 4px;
  vertical-align: -3px;
  text-align: center;
  font-size: 12px;
  background: #101018;
  border: 1px solid #808080;
  box-shadow:
    inset -1px -1px #000000,
    inset  1px  1px #4a4a55;
}

/* The single-item version, big enough for the painted sheet. */
.it-art {
  display: inline-block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background-color: #101018;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  border: 1px solid #808080;
  box-shadow:
    inset -1px -1px #000000,
    inset  1px  1px #4a4a55;
}
.it-art-glyph {
  line-height: 31px;
  text-align: center;
  font-size: 22px;
}

.cmp-head { display: flex; gap: 6px; align-items: flex-start; }
.cmp-headtext { min-width: 0; }
.cmp-set { margin-top: 2px; font-size: 10px; font-weight: bold; }

/* the "now -> after" totals table: the phase-3 half of the comparison */
.cmp-tot-label {
  margin-top: 5px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #000080;
}
table.cmp-totals {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2px;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
}
table.cmp-totals td { padding: 0 3px; border: 0; }
.ct-label { font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif; color: #303030; }
.ct-before { color: #606060; }
.ct-arrow { color: #808080; text-align: center; width: 12px; }
.ct-after.up,  .ct-delta.up   { color: #106010; font-weight: bold; }
.ct-after.down, .ct-delta.down { color: #900000; font-weight: bold; }
.ct-delta { width: 46px; }

/* ================================ v7 phase 3: THE PACK'S CATEGORY TABS */

.tabs.cat-tabs { margin-bottom: 0; flex-wrap: wrap; }
.tab.cat-tab { font-size: 10px; padding: 3px 6px 4px; letter-spacing: 0.04em; }
.tab.cat-tab.on { padding-bottom: 6px; }
.tab.cat-tab.cat-empty { color: #808080; }
.cat-tab-glyph { margin-right: 3px; font-size: 11px; }
.cat-n { color: #505050; font-size: 9px; }
.tab.cat-tab.on .cat-n { color: #000080; font-weight: bold; }

table.grid tr.cat-head td {
  background: #c0c0c0;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #000080;
  padding: 2px 5px;
}
.cat-head-glyph { margin-right: 4px; font-size: 11px; }
/* v7.1: armour slot sub-headers -- indented and lighter than a category header */
table.grid tr.cat-head.sub td { background: #d4d0c8; color: #505078; padding-left: 16px; }

/* v7.1: THE SUB-CATEGORY STRIP.
   A second row of tabs under the category tabs, for a category that covers
   more than one slot. Deliberately subordinate: inset from the left, smaller
   type, its own parchment ground and a label naming its parent, so it can
   never be misread as more categories. */
.tabs.sub-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 0 14px;
  padding: 3px 4px 0;
  background: #d4d0c8;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080;
}

.sub-tabs-key {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #505078;
  padding: 0 4px 3px 2px;
}

.tab.sub-tab {
  font-size: 9px;
  padding: 2px 6px 3px;
  letter-spacing: 0.04em;
}
.tab.sub-tab.on { padding-bottom: 5px; }
.tab.sub-tab.cat-empty { color: #808080; }

/* ==================================== v7 phase 3: THE SHOP BASKET */

table.grid th.markcell,
table.grid td.markcell { width: 20px; padding: 2px; text-align: center; }

.btn.markbox {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  font-size: 11px;
  line-height: 14px;
  font-weight: bold;
}
.btn.markbox.on { color: #006000; background: #d4f0d4; }
/* the category-wide box sits inline in a heading, not in a markcell */
.btn.markbox.catmark { vertical-align: middle; margin-right: 2px; }

/* v7.2: ONE SELECTION, ONE LOOK.
   Green means selected -- the same green the tick box wears, because they are
   the same fact. The keyboard CURSOR (what is left of shopState.sel) is a
   faint blue wash and nothing more: it says where the arrows are, not what is
   about to be bought. Both are pure background changes, so moving the cursor
   or ticking a line cannot alter a single row's height. */
table.grid tr.markedrow td { background: #e8f4d8; }
table.grid tr.cursorrow td { background: #dfe4f5; }
table.grid tr.markedrow.cursorrow td { background: #d4ecc0; }

.tab.tab-mark { margin-left: 8px; font-size: 10px; }

.qty-inline { display: inline-flex; align-items: center; gap: 2px; }
.qty-inline .qty-input { width: 34px; padding: 1px 2px; font-size: 11px; }
.qty-inline .btn.qbtn { padding: 1px 4px; font-size: 10px; }
.btn.qbtn.qbtn-all { font-size: 9px; padding: 1px 3px; }

.cart-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 7px;
  margin-bottom: 8px;
  background: #d8e8c8;
}
.cart-bar.cart-poor { background: #f0d0d0; }
/* v7.2: the bar is always drawn, so it needs a resting look -- the ordinary
   window face, so an empty selection reads as "nothing here yet" rather than
   as a live basket. */
.cart-bar.cart-empty { background: #c8c8c0; }
.cart-bar.cart-empty .cart-label { color: #505050; }
.cart-none { color: #505050; font-style: italic; }
.cart-label {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #204020;
}
.cart-bar.cart-poor .cart-label { color: #802020; }
.cart-count { font-size: 11px; font-weight: bold; }
.cart-names {
  flex: 1 1 120px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bulk-scroll { max-height: 260px; overflow-y: auto; margin-bottom: 6px; }
table.grid tr.bulk-total td { background: #ffffcc; }

/* a worn line in the merchant's paperdoll is a button now */
table.worn-grid tr.worn-live { cursor: pointer; }
table.worn-grid tr.worn-live:hover td { background: #e8e8d0; }

/* ====================================================== v6.1: WHAT'S NEW
   A changelog that reads like a page, not a table: grouped headings, tight
   bullets, and the same parchment panel the event dialog uses for its intro
   so it sits in the same world as the rest of the game. */

.wn-scroll {
  max-height: 58vh;
  overflow-y: auto;
  padding: 6px 9px 2px;
  background: #c0c0c0;
}

.wn-intro {
  background: #d8d4c0;
  padding: 6px 8px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080;
}

.wn-head {
  margin: 10px 0 3px;
  padding: 2px 5px;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: #ffffff;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
}

.wn-list {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 15px;
}
.wn-list li { margin-bottom: 3px; }
.wn-list b { color: #000080; }

.wn-foot { margin-top: 10px; }

/* =================================================== v7 phase 6: THE JOURNAL
   The Update Journal is the What's New panel repeated once per version, so it
   borrows every one of those rules and adds only what separates one release
   from the next: a ruled version bar, and a badge on the one you are running.
   Deliberately no new colours -- this is still a 16-colour window. */

.upd-entry {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px #ffffff;
}
.upd-entry:last-child { border-bottom: 0; box-shadow: none; margin-bottom: 2px; }

.upd-ver {
  margin: 0;
  padding: 3px 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: #000080;
}

.upd-now {
  float: right;
  padding: 0 4px;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: #000000;
  background: #ffff00;
  box-shadow:
    inset -1px -1px #808080,
    inset  1px  1px #ffffff;
}

.upd-title {
  margin: 3px 0 0;
  font-size: 11px;
  font-style: italic;
  color: #000080;
}

/* ============================================================ v2: COMBAT */

.foes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }

.foe {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  cursor: pointer;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}
.foe.targeted { background: #d4d4a0; }
.foe.dead { opacity: 0.5; cursor: default; }

.foe-portrait {
  width: 32px; height: 32px; flex: 0 0 32px;
  background: #000;
  image-rendering: pixelated;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
.foe-info { flex: 1 1 auto; min-width: 0; }
.foe-name { font-weight: bold; font-size: 12px; }

/* v6 phase 3: the second half of the two-click attack, said out loud on the
   row that is already targeted. */
.strike-hint {
  font-weight: normal;
  font-size: 9px;
  color: #800000;
  letter-spacing: 0.04em;
}

.elite-tag {
  background: #800000;
  color: #ffd700;
  font-size: 9px;
  padding: 0 3px;
  letter-spacing: 0.1em;
}

.hero-bar {
  padding: 4px 6px;
  margin-bottom: 6px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}

/* ============================================================== v2: TABS */

.tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 2px solid #808080;
  margin-bottom: 6px;
  padding-bottom: 0;
}

.tab {
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 14px;
  border: 0;
  background: #b0b0b0;
  cursor: pointer;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}
.tab.on { background: #d4d4d4; padding-bottom: 6px; }

.tab-gold { margin-left: auto; font-size: 11px; padding: 0 4px 3px; }
.tab-gold .gold { color: #806000; }

.npc-greet {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 13px;
  margin: 0 0 8px;
}

/* ============================== v7 phase 4: THE MERCHANT'S OWN LINE
   A status strip, not a banner: the sunken 3D groove every other read-only
   readout in the game already uses, so it reads as part of the window frame
   rather than as an advertisement pasted on top of it. */

.shop-shelf {
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: #d4d0c8;
  padding: 3px 6px;
  margin: 0 0 6px;
  font-size: 11px;
}

.shop-shelf.shelf-temp { background: #f0e0b0; color: #503000; }

/* ========================================================= v2: SHOP/QTY */

.shop-table { max-height: 230px; overflow-y: auto; margin-bottom: 6px; }

/* =============================== v6 phase 4: SHOP COMPARE + WORN PANEL
   The goods on the left, YOU on the right. Same two-pane property-sheet
   shape as the merged Pack & Gear window, for the same reason: the question
   the player is asking spans both halves. */

.shopwin { display: flex; gap: 8px; align-items: flex-start; }
.shopwin-left  { flex: 1 1 58%; min-width: 0; }
.shopwin-right { flex: 1 1 42%; min-width: 0; }

/* v7.2: A RESERVED BOX, NOT A MINIMUM.
   `min-height` let the panel grow with what was under the cursor, which grew
   the dialog, which moved the rows, which ended the hover -- a flicker loop
   (see the long note over cmpShell in ui.js). The height is now FIXED and the
   contents scroll inside it, so an empty panel and a panel describing a
   six-affix legendary occupy exactly the same pixels and hovering cannot
   change one measurement anywhere on screen. */
.cmp-panel {
  background: #d8d4c0;
  padding: 5px 6px;
  margin-bottom: 6px;
  height: 208px;
  overflow: hidden;
  font-size: 11px;
  line-height: 14px;
}

.cmp-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* On a short screen a 208px reservation would push these windows into their
   own scrollbar. Still a FIXED number -- just a smaller one -- so the
   no-resize-on-hover guarantee holds at every size. */
@media (max-height: 780px) {
  .cmp-panel { height: 156px; }
}
@media (max-height: 640px) {
  .cmp-panel { height: 124px; }
}
.cmp-name { font-size: 12px; font-weight: bold; margin-bottom: 1px; }
.cmp-affix {
  margin-top: 2px;
  font-size: 10px;
  font-style: italic;
  color: #400060;
}
.cmp-stats { margin-top: 3px; font-size: 10px; color: #303030; }
.cmp-vs {
  margin-top: 5px;
  padding-top: 4px;
  font-size: 11px;
  border-top: 1px solid #a8a494;
}

/* the one-word verdict, so the panel answers the question before it is read */
.cmp-verdict {
  margin-top: 4px;
  padding: 1px 4px;
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: #606060;
}
.cmp-verdict.better { background: #1f7a1f; }
.cmp-verdict.worse  { background: #9a1f1f; }
.cmp-verdict.mixed  { background: #8a6a10; }
.cmp-verdict.even   { background: #505050; }

.worn-scroll { max-height: 150px; overflow-y: auto; }
table.worn-grid td { padding: 2px 4px; vertical-align: top; }
.worn-slot {
  width: 62px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #000080;
  font-weight: bold;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .shopwin { flex-direction: column; }
  .shopwin-left, .shopwin-right { flex: 1 1 auto; width: 100%; }
}

/* v7.2: `.selrow` is gone. It was the solid navy bar that drew the OTHER
   selection -- the one that competed with the tick boxes -- and with one
   selection there is nothing for it to mean. Selected is green
   (`.markedrow`), the keyboard cursor is a pale wash (`.cursorrow`); both are
   defined with the basket, above. */
table.grid tr[data-act] { cursor: pointer; }
table.grid td.poor { color: #a00000; font-size: 10px; }

.qty-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 6px 7px;
  margin-bottom: 8px;
}

.qty-label {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #000080;
}

.qty-input {
  width: 62px;
  padding: 3px 4px;
  border: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  background: #fff;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}

.btn.qbtn { padding: 3px 8px; font-size: 12px; font-weight: bold; }
.btn.qbtn.wide-btn { font-size: 10px; }
.qty-total { margin-left: auto; font-size: 12px; }
.qty-total .gold { color: #806000; }

/* ============================================================ v2: QUESTS */

.quest-card {
  padding: 6px 8px;
  margin-bottom: 6px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}
.quest-card.ready { background: #cfe0cf; }

.quest-title { font-weight: bold; font-size: 12px; }
.qtier {
  font-size: 9px;
  background: #000080;
  color: #fff;
  padding: 0 4px;
  letter-spacing: 0.06em;
}
.quest-reward { font-size: 11px; margin-top: 3px; }
.quest-reward .gold { color: #806000; }
.quest-prog {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  margin-top: 2px;
  color: #000080;
}
.quest-offer, .quest-done { margin-bottom: 8px; }
.quest-done { background: #ffffcc; padding: 4px; }

/* ====================================================== v3: ACTION BAR */

.skillbar-wrap { margin-top: 5px; }

.skillbar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}

.sk-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 4px;
  border: 0;
  background: #c0c0c0;
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}
.sk-btn:active,
.sk-btn.armed {
  box-shadow:
    inset  1px  1px #0a0a0a,
    inset -1px -1px #ffffff,
    inset  2px  2px #808080,
    inset -2px -2px #dfdfdf;
}
.sk-btn.armed { background: #d4d4a0; }
.sk-btn[disabled] { color: #808080; cursor: default; }
.sk-btn[disabled] .sk-icon { opacity: 0.4; }
.sk-btn.small { font-size: 10px; }

.sk-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-color: #000;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
.sk-icon-txt {
  color: #ffd700;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  font-family: "Courier New", monospace;
}

.sk-txt { display: flex; flex-direction: column; line-height: 12px; }
.sk-sub { font-size: 9px; color: #303030; }
.sk-btn.armed .sk-sub { color: #404000; }
.sk-btn[disabled] .sk-sub { color: #909090; }

.sk-key {
  position: absolute;
  top: 1px; right: 2px;
  font-family: "Courier New", monospace;
  font-size: 8px;
  color: #505050;
}

.sk-sep {
  width: 2px;
  align-self: stretch;
  margin: 0 3px;
  background: #808080;
  border-right: 1px solid #ffffff;
}

/* ============================================ v5: SKILL DRAG + CONTEXTS */

/* A skill you can drag onto the board. `touch-action:none` is what lets a
   pointer drag start here instead of being eaten as a scroll gesture. */
.sk-btn.sk-drag { cursor: grab; touch-action: none; }
.sk-btn.sk-drag:active { cursor: grabbing; }

/* the icon that is currently in flight */
.sk-btn.dragging {
  background: #d4d4a0;
  outline: 1px dotted #000080;
  outline-offset: -3px;
}

/* A skill greyed because of WHERE you are rather than what you can afford:
   hatched, so "wrong context" reads differently from "recharging". */
.sk-btn.off-context {
  background: repeating-linear-gradient(
    135deg, #c0c0c0 0 4px, #b4b4b4 4px 8px);
}
.sk-btn.off-context .sk-sub {
  color: #000080;
  font-weight: bold;
  letter-spacing: 0.06em;
}

/* while a skill is riding the cursor the board is a target, not a map */
body.dragging-skill { cursor: crosshair; }
body.dragging-skill #board { cursor: crosshair; }
body.dragging-skill .board-frame { outline: 2px dotted #000080; }

/* the cost/cooldown tail on a combat skill button */
.btn-sub {
  font-size: 9px;
  font-weight: normal;
  color: #303030;
}
.btn[disabled] .btn-sub { color: #808080; }

/* the right-click hint under the shop table */
.shop-tip { margin: 4px 0 2px; }

/* ======================================================== v3: RESOURCE */

.bar-fill.res {
  background: repeating-linear-gradient(90deg, #20b0c0 0 6px, #1080a0 6px 8px);
}

/* ========================================================== v3: REGION */

.region-name {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 12px;
  font-weight: bold;
  color: #400000;
  background: #d8d4c0;
  padding: 2px 3px;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080;
}

/* ==================================================== v3: TITLE BANNER */

.title-banner {
  display: block;
  margin: 0 auto 4px;
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
}

.class-line {
  background: #d8d4c0;
  padding: 5px 7px;
  font-size: 11px;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}

/* --------------------------------------------------------- narrow screens */

@media (max-width: 880px) {
  .workspace { flex-wrap: wrap; }
  .side-col { max-width: none; flex: 1 1 100%; }
  .btn-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ================================================== v7.4: FULLSCREEN MODE
   The expanded layout. `body.fs-on` is the whole of it: the 900px desktop
   stops constraining, the page padding and the Web-1.0 garnish go away, and
   the window grows to the browser. Everything keeps its bevels -- this is a
   bigger Windows-95 window, not a different one.

   The board itself is sized in JS (UI.fitBoard), because only JS can know how
   much room is left after the sidebar and the chrome; all this does is let it
   have the room. Modals are untouched: `.overlay` was already fixed to the
   viewport, so a dialog has always spanned the whole browser. */

body.fs-on { padding: 0; }

body.fs-on #desktop {
  max-width: none;
  margin: 0;
}

body.fs-on #app {
  min-height: 100vh;
  overflow-x: hidden;
}

body.fs-on .web10 { display: none; }

/* the board column takes the slack the sidebar does not want */
body.fs-on .board-col { flex: 1 1 auto; }
body.fs-on #board { margin: 0 auto; }

/* dialogs may breathe a little in all that room -- no more than that */
body.fs-on .dialog { max-width: 560px; }
body.fs-on .dialog.wide { max-width: 760px; }

/* ============================================== v7.5: THE HEROES JOURNAL
   The player's own marks, listed under the contracts in the Journal window.
   Same bevelled card as a quest, with a teal pip instead of gold so the two
   halves of the window are told apart at a glance -- exactly the way they are
   told apart on the board. */

.mark-card {
  padding: 6px 8px;
  margin-bottom: 6px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
}

.mark-title {
  font-weight: bold;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mark-pip { color: #007c72; }

/* ============================================ v7.6: THE DISPLAY STEPPERS
   [-] 100% [+] on a stat row. The buttons are the ordinary bevelled .btn with
   the padding taken down to a size that sits on one line beside a readout, and
   the readout is fixed-width so the row does not twitch as it counts through
   75% / 100% / 125%. */

.step-ctl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn.step {
  padding: 1px 5px 2px;
  font-size: 11px;
  line-height: 12px;
  min-width: 18px;
}
.btn.step:active { padding: 2px 4px 1px 6px; }

.step-val {
  min-width: 40px;
  text-align: center;
}

/* ================================== v7.7: WHAT A TOWN LIVES BY
   One nameplate strip, over the shop's goods and over the board's contracts.
   Sits in the same sunken-panel language as the merchant's restock line so
   the two read as the same kind of standing information about the place. */

.town-id {
  margin: 0 0 8px;
  padding: 5px 7px;
  background: #d8d4c0;
  font-size: 11px;
  line-height: 1.4;
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #808080,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a;
}
.town-id .hint { font-size: 11px; color: #404040; }

/* ================================== v8: THE TEMPLE'S DIRECTION CHOOSER
   The eight roads laid out as the compass they are -- a 3x3 rose with the
   bearings where a compass puts them and the way out in the middle -- so
   picking a direction is pointing at it rather than reading a list. Same
   sunken Win95 language as every other window; nothing new is invented here
   but the shape. */

table.temple-rose {
  margin: 8px auto;
  border-collapse: separate;
  border-spacing: 4px;
}
table.temple-rose td {
  padding: 0;
  text-align: center;
}
.btn.temple-dir {
  width: 92px;
  padding: 6px 4px;
  line-height: 1.25;
}
.temple-arrow {
  font-size: 15px;
  line-height: 1;
}
.temple-key {
  font-size: 10px;
  color: #404040;
}
.temple-mid .btn {
  width: 92px;
  padding: 6px 4px;
  line-height: 1.25;
}

/* =========================================================================
   v10 PHASE 2: THE ACCOUNT LAYER
   The sign-in window, the name in the menu bar, and the PREMIUM badge on the
   global Hall of Fame. Nothing here invents a new look: the window is the
   same bevelled dialog as every other one, and the form rows reuse .seed-row.
   ========================================================================= */

/* the signed-in name sits at the far right of the menu bar, away from the
   game's own menus, because it is not one of them */
.menu-item.account {
  margin-left: auto;
  font-weight: bold;
  color: #000080;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-item.account:hover { color: #fff; }

.acct-head { margin-bottom: 4px; }

.acct-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 0 0 10px;
}

/* the form rows are .seed-row, widened: an e-mail address does not fit in a
   seed box, and a label that wraps looks broken */
.seed-row.acct-row { justify-content: flex-start; margin: 6px 0; }
.seed-row.acct-row label {
  flex: 0 0 140px;
  text-align: right;
}
.seed-row.acct-row input { width: 220px; max-width: 100%; }

.acct-err {
  margin: 8px 0 0;
  padding: 5px 7px;
  background: #ffe0e0;
  border: 1px solid #a00000;
  color: #700000;
  font-size: 11px;
  text-align: center;
}

.acct-note {
  margin: 6px 0;
  padding: 5px 7px;
  background: #ffffcc;
  border: 1px solid #808000;
  font-size: 11px;
}

.acct-busy { font-style: italic; }

.acct-line { font-size: 11px; margin: 6px 0; }

.acct-badge {
  display: inline-block;
  padding: 0 4px;
  background: #000080;
  color: #ffd700;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.btn.tiny {
  font-size: 10px;
  padding: 1px 6px;
}

/* =========================================================================
   v10 PHASE 3: THE CLASS PICKER AND THE PREMIUM CHARACTERS
   The picker is a row of ordinary buttons -- .pressed is the selection, the
   same as everywhere else in the game -- and a LOCKED class is drawn greyed
   with its PREMIUM badge rather than hidden. A door with a sign on it.
   ========================================================================= */

.class-pick { margin: 10px 0 6px; }

.class-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.btn.class-opt {
  min-width: 108px;
  padding: 5px 9px;
  line-height: 1.3;
  text-align: center;
}

.btn.class-opt b { display: block; }

.btn.class-opt.locked {
  color: #606060;
  text-shadow: 1px 1px #fff;
}

.class-sub {
  display: block;
  font-size: 9px;
  color: #606060;
  letter-spacing: 0.04em;
}

/* the Characters window reuses table.grid; only the empty row needs a voice */
.dlg-characters table.grid td.hint { font-style: italic; }

/* v10 fix: an empty character slot can offer TWO actions -- save the run you
   are playing into it, or start a new character there. They stack so the
   primary one is unmistakably the primary one. */
.dlg-characters td.slot-actions { white-space: nowrap; }
.dlg-characters td.slot-actions .btn { display: block; width: 100%; }
.dlg-characters td.slot-actions .btn + .btn { margin-top: 3px; }