/*
  Blobgarden stylesheet.

  The look is a colourful browser game from around 2003: compact, square
  borders, Verdana/Trebuchet text, traditional underlined links. Mobile
  first: phones get the logo, a grid of menu buttons, then the content.
  From 760px wide the menu moves into a left sidebar.

  Colours are collected here so the whole palette can be changed in one place.
*/

:root {
  --page-bg: #d9d9d9;
  --frame-bg: #f4f4f4;
  --frame-border: #9a9a9a;
  --banner-bg: #f5d75b;
  --banner-border: #b89a1e;
  --menu-bg: #fbe99c;
  --menu-border: #b89a1e;
  --content-bg: #ffffff;
  --content-border: #8c8c8c;
  --title-bg: #5c9bd6;
  --title-text: #ffffff;
  --illustration-bg: #fdf6dd;
  --illustration-border: #c9b27a;
  --item-bg: #f1f1f1;
  --item-border: #9a9a9a;
  --link: #1a3fbf;
  --link-visited: #5a2d9c;
  --text: #222222;
  --muted: #666666;
  --error-bg: #ffe0e0;
  --error-border: #c23b3b;
  --health-bar: #d9534f;
  --tile-correct: #4a9a2c;
  --tile-present: #d9a40b;
  --tile-absent: #8a8a8a;
  --marble-R: #d13b3b;
  --marble-Y: #e8c21c;
  --marble-G: #3f9a2b;
  --marble-B: #2f62c9;
  --marble-P: #8a3fb8;
  --marble-O: #ea7d1a;
  --worm-glowing: #d9f25c;
  --worm-asleep: #3b3550;
  --success-bg: #e3f7d8;
  --success-border: #4e8a2a;
  /* Accents the games and shops share. */
  --gold: #ffe066;
  --gold-glow: #ffd84d;
  --danger: #a33;
  --prize-text: #8a5a00;
  --wood: #8a6a2a;
  --wood-dark: #6b5a3a;
  --brass: #c9a45a;
  --slate: #2b2f3a;
  --parchment: #f6ebcf;
  /* The two typefaces: body text, and headings and the odd big number. */
  --font-body: Verdana, Geneva, Tahoma, sans-serif;
  --font-heading: "Trebuchet MS", Verdana, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--page-bg); }

body {
  margin: 0;
  padding: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }

h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0 0 8px;
}

p { margin: 0 0 10px; }

/* ----- Page frame ----- */

.site {
  max-width: 920px;
  margin: 0 auto;
  padding: 8px;
  background: var(--frame-bg);
  border: 1px solid var(--frame-border);
  display: grid;
  gap: 8px;
  /* minmax(0, ...) lets the column shrink to the screen. A plain 1fr
     cannot go narrower than its widest content, which pushed shop pages
     a little past the edge of a phone screen. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "nav"
    "content"
    "footer";
}

.site-header  { grid-area: header; }
.site-nav     { grid-area: nav; }
.site-content { grid-area: content; }
.site-footer  { grid-area: footer; }

/* ----- Logo banner ----- */

.site-header {
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  text-align: center;
}

.site-logo-link { display: block; color: var(--text); text-decoration: none; }

/* The search bar, in the banner under the logo. */
.site-search { display: flex; justify-content: center; gap: 4px; padding: 0 8px 8px; }
.site-search input {
  flex: 0 1 260px;
  min-width: 0;
  padding: 2px 4px;
  border: 2px inset #d8c98a;
  font: 13px var(--font-body);
}
.site-search button {
  padding: 2px 10px;
  background: var(--menu-bg);
  border: 2px outset var(--menu-border);
  font: bold 12px var(--font-body);
  cursor: pointer;
}

.site-logo {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.picture-placeholder.site-logo {
  padding: 22px 8px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: bold;
  font-style: normal;
  color: var(--text);
  background: transparent;
  border: 0;
}

/* ----- Navigation: button grid on phones ----- */

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.site-nav-heading { display: none; }

.site-nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  font-family: var(--font-heading);
  font-weight: bold;
  color: var(--text);
  text-decoration: none;
  text-align: center;
}

.site-nav li a img { display: block; max-width: 100%; height: auto; }

/* A form button that should look like a menu link (used for logging out). */
.site-nav li form { margin: 0; height: 100%; }
.site-nav li button {
  width: 100%;
  height: 100%;
  min-height: 48px;
  padding: 6px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  font: inherit;
  font-family: var(--font-heading);
  font-weight: bold;
  color: var(--text);
  cursor: pointer;
}

/* ----- Content column ----- */

.site-content {
  background: var(--content-bg);
  border: 1px solid var(--content-border);
  padding: 8px;
}

.page-title {
  background: var(--title-bg);
  color: var(--title-text);
  font-size: 18px;
  padding: 8px 10px;
  margin: 0 0 10px;
}

.illustration-box {
  background: var(--illustration-bg);
  border: 1px solid var(--illustration-border);
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.picture { max-width: 100%; height: auto; }

/* A labelled box standing in for missing artwork. Most are small, so the
   label is small and wraps between words. Words are never split: a box
   grows just wide enough for its longest word (min-content), and a label
   that is still too tall is clipped rather than spilling out. */
.picture-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-height: 80px;
  min-width: min-content;
  max-width: 100%;
  overflow: hidden;
  background: var(--illustration-bg);
  border: 1px dashed var(--illustration-border);
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  line-height: 1.25;
  text-align: center;
}

.picture-placeholder.hero { width: 100%; min-height: 160px; font-size: 13px; }
a .picture-placeholder { text-decoration: none; color: var(--muted); }
a:has(> .picture-placeholder) { text-decoration: none; }

.item-grid {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  /* minmax(0, ...) lets the two columns share a narrow phone screen
     instead of growing to fit their widest content. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* On the narrowest phones two cards side by side leave too little room
   for a long name, so cards stack one per row. */
@media (max-width: 359px) {
  .item-grid { grid-template-columns: minmax(0, 1fr); }
}

.item-box {
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  padding: 10px;
  text-align: center;
  overflow-wrap: break-word; /* a word too long for the whole card may break; nothing else does */
}

.item-box a { font-weight: bold; }

.muted { color: var(--muted); font-size: 11px; }

.species-choices label { display: block; cursor: pointer; }
.species-choices .picture { display: block; margin: 0 auto 6px; }
.species-choices .picture-placeholder { display: flex; }
.item-box .pet-thumb { display: block; margin: 0 auto 6px; }

/* ----- Purse (coin balance in the menu) ----- */

.purse {
  grid-column: 1 / -1;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: var(--content-bg);
  border: 1px solid var(--menu-border);
  text-align: center;
  font-size: 12px;
}

/* ----- Random events (partials/random-event.ejs) ----- */

.random-event {
  border: 2px solid var(--menu-border);
  background: #fff7c2;
  margin: 0 0 10px;
}
.random-event-heading {
  background: var(--banner-bg);
  border-bottom: 2px solid var(--menu-border);
  padding: 3px 8px;
  font-weight: bold;
  font-size: 13px;
}
.random-event-body { padding: 6px 10px; }
.random-event-body p { margin: 4px 0 0; }
.random-event-bad { border-color: var(--error-border); background: #ffe9e4; }
.random-event-bad .random-event-heading { background: #f2a59b; border-bottom-color: var(--error-border); }
.random-event-odd { border-color: #7a5aa6; background: #f1eafb; }
.random-event-odd .random-event-heading { background: #cbb6ea; border-bottom-color: #7a5aa6; }

/* ----- Shops ----- */

.section-title {
  font-size: 14px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  padding: 3px 8px;
  margin: 12px 0 8px;
}
.shop-header .shop-banner { display: block; margin: 0 auto 8px; }
.shop-keeper-row { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.shop-keeper { font-style: italic; }
.checkup-box {
  background: var(--illustration-bg);
  border: 1px dashed var(--illustration-border);
  padding: 6px 10px;
  margin-bottom: 10px;
}
.checkup-box p { margin: 4px 0; }
.stock-count { font-size: 12px; font-weight: bold; color: #1f6b2a; margin-top: 4px; }
.per-player { font-size: 11px; color: var(--muted); }
.per-player-done { font-size: 11px; font-weight: bold; color: var(--prize-text); margin-top: 3px; }
.sold-out .item-icon { opacity: 0.5; }
.sold-out-label { color: var(--danger); }
.price { font-weight: bold; color: #7a4a00; }
.buy-form { margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 4px; }
.buy-form input[type="number"] { width: 56px; min-height: 36px; padding: 3px; font: inherit; border: 1px solid var(--content-border); }
.buy-form button { min-height: 36px; min-width: 64px; }
.restock-message { margin-bottom: 8px; }

/* ----- Small tables of figures, used all over (lessons, prizes, sales) ----- */

.data-table { border-collapse: collapse; margin-bottom: 6px; }
.data-table th, .data-table td { text-align: left; padding: 2px 8px 2px 0; }

/* ----- Player shops ----- */

.open-shop-form label, .inline-form label { font-weight: bold; margin-right: 4px; }
.open-shop-form input[type="text"] { max-width: 100%; margin: 0 4px 4px 0; }
.inline-form { margin-bottom: 6px; }
.inline-form input[type="number"] { width: 72px; padding: 3px; font: inherit; border: 1px solid var(--content-border); }
.inline-form input[type="text"] { max-width: 100%; }
.sell-form .sell-fields { display: block; margin-top: 4px; }
.sell-form input[type="number"] { width: 72px; padding: 3px; font: inherit; border: 1px solid var(--content-border); margin-right: 6px; }
.recent-sales td { padding-right: 10px; }

/* ----- Searching the shops ----- */

.search-list { margin: 0 0 10px; padding-left: 18px; }
.search-list li { margin-bottom: 4px; }
.search-result { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--content-border); }
.search-result:last-of-type { border-bottom: none; }
.search-result .item-icon { flex: 0 0 auto; }
.search-result-details { flex: 1 1 auto; min-width: 0; }
.where-to-buy { border-collapse: collapse; width: 100%; margin-top: 4px; }
.where-to-buy th, .where-to-buy td { text-align: left; padding: 2px 6px 2px 0; vertical-align: top; }
.where-to-buy th { font-size: 11px; color: var(--muted); font-weight: normal; border-bottom: 1px solid var(--content-border); }
.where-to-buy .price, .where-to-buy .stock-count { margin: 0; }
.where-to-buy .stock-count { white-space: nowrap; }
.where-to-buy .muted { display: block; font-size: 11px; }
/* On narrow phones the table needs the whole width: the picture sits above. */
@media (max-width: 420px) {
  .search-result { display: block; }
  .search-result .item-icon { float: left; margin: 0 8px 4px 0; }
  .search-result .where-to-buy { clear: both; }
}

/* ----- Inventory ----- */

.inventory-grid .item-box { text-align: center; }
.item-box .item-icon { display: block; margin: 0 auto 6px; }
/* Placeholders keep their label centred (display: block above would not). */
.item-box .picture-placeholder.item-icon { display: flex; }
.item-name { font-weight: bold; }
.item-qty { color: var(--muted); font-weight: normal; }
.item-meta { margin: 2px 0; }
.item-action { margin-top: 6px; }
.item-action select { width: auto; max-width: 60%; }
/* A whole inventory card is the link to the item's page. */
.item-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.item-link .item-name { color: var(--link); text-decoration: underline; }
.item-link:hover, .item-link:focus { border-color: var(--link); }
.item-page { margin-bottom: 4px; }
.item-actions { margin: 0 0 10px; padding-left: 18px; }
.item-actions li { margin-bottom: 8px; }
.item-actions .item-action label { font-weight: bold; margin-right: 4px; }

/* Something marked hidden stays hidden even if a rule below gives it a
   display, e.g. a "needs JavaScript" note once the script has run. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ----- Forms ----- */

.form-row { margin-bottom: 10px; }
.form-row label { display: block; font-weight: bold; margin-bottom: 2px; }

input[type="text"],
input[type="password"],
select {
  width: 100%;
  max-width: 320px;
  padding: 4px;
  font: inherit;
  border: 1px solid var(--content-border);
  background: var(--content-bg);
}

/* Phones zoom in on a text box whose text is under 16px when it is tapped,
   and stay zoomed, so on touch screens every box gets at least 16px.
   (The Word Puddle box is already bigger.) This selector outweighs the
   smaller sizes set on particular forms. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not(.game-form input),
  select,
  textarea { font-size: 16px; }
}

button, .button {
  padding: 5px 14px;
  font: inherit;
  font-weight: bold;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  color: var(--text);
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* A link that looks like a button, for going to another page. */
a.button, a.button:visited {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
}

/* ----- Explore: location and place lists ----- */

.place-list { list-style: none; margin: 0 0 10px; padding: 0; }
.place-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-bottom: 1px dotted var(--content-border);
}
.place-list li:last-child { border-bottom: none; }
/* Every picture in a list is the same size, whatever its name: a
   placeholder never grows to fit a long word (the general rule above lets
   it). public/js/site.js shrinks a label until its longest word fits
   (adding .text-fitted); without JavaScript, only a word too long for the
   box at all is broken. */
.place-list li > a:has(> .place-icon) { flex: none; }
.place-list .place-icon {
  flex: none;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.place-list .place-icon.text-fitted { overflow-wrap: normal; }
.place-name { font-weight: bold; }

/* ----- Training School ----- */

.form-label { display: block; font-weight: bold; margin-bottom: 2px; }
.pupil-list { list-style: none; margin: 0; padding: 0; }
.pupil-list li { padding: 5px 0; border-bottom: 1px dotted var(--content-border); }
.pupil-list li:last-child { border-bottom: none; }
.pupil-stats { display: block; font-size: 11px; color: var(--muted); margin-left: 22px; }
.pupil-status { display: block; font-size: 11px; font-weight: bold; margin-left: 22px; }
.pupil-status.ready { color: var(--success-border); }
.pupil-status.resting { color: var(--error-border); }

/* ----- Word Puddle ----- */

.puddle-board { border-collapse: separate; border-spacing: 4px; margin: 0 auto 10px; }
.tile {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  font-weight: bold;
  color: var(--content-bg);
  border: 2px solid transparent;
}
.puddle-board .tile {
  display: table-cell;
  width: 44px;
  height: 44px;
  font-family: var(--font-heading);
  font-size: 24px;
  vertical-align: middle;
}
.tile-correct { background: var(--tile-correct); border-color: var(--tile-correct); }
.tile-present { background: var(--tile-present); border-color: var(--tile-present); }
.tile-absent { background: var(--tile-absent); border-color: var(--tile-absent); }
.tile-empty { background: var(--content-bg); border-color: var(--content-border); }
/* Six-letter words need six tiles across even the narrowest phone. */
@media (max-width: 359px) {
  .puddle-board { border-spacing: 3px; }
  .puddle-board .tile { width: 34px; height: 34px; font-size: 19px; }
}
/* Shared by the daily games (Word Puddle, Marble Muddle, Glowworm Hush):
   the colour key, the move form and the result line. */
/* The strip above a game's board (the chest, the tally, the mirrors
   turned): one shape, each game's own colours. */
.game-panel { text-align: center; margin: 0 0 8px; padding: 6px; border: 2px solid; }
.game-key { list-style: none; margin: 0 0 10px; padding: 0; }
.game-key li { margin-bottom: 3px; }
.game-key .tile { padding: 1px 3px; margin-right: 4px; }
.game-form { text-align: center; margin-bottom: 10px; }
.game-form label { display: block; font-weight: bold; margin-bottom: 4px; }
.game-form input {
  width: 7em;
  font: inherit;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  padding: 4px;
  border: 2px solid var(--content-border);
}
.game-result { text-align: center; font-size: 15px; }
/* A chart of the letters tried so far, not keys to press (guesses are
   typed in the box), so the letters are flat and borderless. */
.puddle-keyboard { text-align: center; margin-bottom: 12px; }
.puddle-keyboard .puddle-keyboard-label { display: block; margin-bottom: 3px; font-size: 11px; color: var(--muted); }
/* Each row is a flex line whose keys may shrink, so ten keys always fit
   across even a narrow phone with large text. */
.puddle-keyboard div { display: flex; justify-content: center; gap: 2px; margin-bottom: 3px; }
.puddle-keyboard .key {
  flex: 0 1 1.9em;
  min-width: 0;
  padding: 2px 0;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  background: transparent;
  color: var(--text);
}
.puddle-keyboard .key.tile-correct { background: var(--tile-correct); color: var(--content-bg); }
.puddle-keyboard .key.tile-present { background: var(--tile-present); color: var(--content-bg); }
.puddle-keyboard .key.tile-absent { background: var(--tile-absent); color: var(--content-bg); }

/* ----- Marble Muddle ----- */

.marble-board { border-collapse: collapse; margin: 0 auto 10px; }
.marble-board th { padding: 3px 6px 3px 0; color: var(--muted); font-weight: normal; text-align: right; }
.marble-board td { padding: 3px 4px; vertical-align: middle; }
.marble-row { white-space: nowrap; }
.marble-marks .muted { display: block; font-size: 11px; }
.marble {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 3px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.35);
  color: var(--content-bg);
  font-size: 11px;
  font-weight: bold;
  line-height: 22px;
  text-align: center;
  vertical-align: middle;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.marble-R { background: var(--marble-R); }
.marble-Y { background: var(--marble-Y); }
.marble-G { background: var(--marble-G); }
.marble-B { background: var(--marble-B); }
.marble-P { background: var(--marble-P); }
.marble-O { background: var(--marble-O); }
.peg {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 2px;
  border-radius: 50%;
  border: 1px solid #333;
  vertical-align: middle;
}
.peg-exact { background: var(--text); }
.peg-near { background: var(--content-bg); }
.marble-form { text-align: center; margin-bottom: 12px; }
.marble-form-title { font-weight: bold; margin: 0 0 6px; }
/* The picker: a column per marble position, like a row on the board. The
   radio buttons are hidden; their labels are drawn as marbles. The chosen
   marble in each column is bright and ringed, the rest faded. */
.marble-picker { border-collapse: separate; border-spacing: 6px 4px; margin: 0 auto 8px; }
.marble-picker th { font-size: 11px; font-weight: bold; color: var(--muted); }
.marble-picker th[scope="col"] { min-width: 30px; }
.marble-picker th[scope="row"] { text-align: right; font-weight: normal; }
.marble-picker td { text-align: center; }
.marble-pick { width: 30px; height: 30px; line-height: 26px; margin: 0; cursor: pointer; opacity: 0.35; }
.marble-picker input:checked + .marble-pick { opacity: 1; box-shadow: 0 0 0 3px var(--content-bg), 0 0 0 5px var(--text); }
.marble-picker input:focus-visible + .marble-pick { outline: 2px dashed var(--link); outline-offset: 3px; }
/* On the narrowest phones the colour names give way (each marble shows its
   letter, and screen readers still hear the names). */
@media (max-width: 359px) {
  .marble-picker th[scope="row"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .marble-picker { border-spacing: 4px; }
}

/* ----- Glowworm Hush ----- */

.glowworm-count { text-align: center; }
.glowworm-board { border-collapse: separate; border-spacing: 5px; margin: 0 auto 10px; background: #1f1b2e; border: 2px solid #120f1c; }
.glowworm-board td { padding: 0; }
.worm {
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #120f1c;
  border-radius: 50%;
  cursor: pointer;
}
span.worm { cursor: default; }
.worm-glowing { background: var(--worm-glowing); box-shadow: 0 0 10px 3px rgba(217, 242, 92, 0.7); }
.worm-asleep { background: var(--worm-asleep); }
button.worm:hover, button.worm:focus-visible { outline: 2px dashed var(--content-bg); outline-offset: 2px; }
.tier-list th, .tier-list td { padding-right: 10px; }

/* ----- Pachinko ----- */

.pachinko-machine { text-align: center; margin-bottom: 10px; }
#pachinko-canvas {
  display: block;
  width: 100%;
  max-width: 324px;
  height: auto;
  margin: 0 auto 4px;
  border: 4px solid #8a6d1c;
  background: #2b1d4f;
}
#pachinko-canvas[hidden] { display: none; }
.pachinko-pockets { font-size: 11px; }
.pachinko-form { margin-bottom: 6px; }
.pachinko-form label { font-weight: bold; margin-right: 4px; }
.pachinko-form select { max-width: 100%; margin-bottom: 6px; }
.pachinko-prompt { font-weight: bold; text-align: center; }
.pachinko-busy { margin: 4px 0 0; }
#pachinko-canvas.waiting { cursor: pointer; }
.pachinko-prizes { margin: 0 0 10px; padding-left: 18px; }
.pachinko-recent td { padding-right: 10px; }

/* ----- Perilous Excavation ----- */

.dig-chest { border-color: #8a5a1e; background: #fff3d6; }
/* Ten squares must fit across the narrowest phone: each is a tenth of the
   space left, never more than 32px. (An older 8 by 8 game is narrower.) */
.dig-field { border-collapse: separate; border-spacing: 1px; margin: 0 auto 10px; background: #5b3a1a; border: 2px solid #3d2610; }
.dig-field td { padding: 0; }
.dig-square {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(32px, calc((100vw - 84px) / 10));
  height: min(32px, calc((100vw - 84px) / 10));
  padding: 0;
  font: bold 16px var(--font-body);
  border: 0;
}
button.dig-covered {
  cursor: pointer;
  background: #a8743a;
  border: 3px outset #c99357;
}
button.dig-covered:hover, button.dig-covered:focus-visible { background: #bd8648; outline: 2px dashed var(--content-bg); outline-offset: 1px; }
span.dig-covered { background: #a8743a; border: 3px outset #c99357; }
.dig-dug { background: #e9d3a8; border: 1px solid #c9ad7b; }
.dig-bomb { background: #e9d3a8; color: var(--text); }
.dig-exploded { background: var(--marble-R); color: var(--content-bg); }
.dig-treasure { box-shadow: inset 0 0 0 3px #f0c419; }
.dig-defuser { box-shadow: inset 0 0 0 3px var(--marble-B); }
.dig-defused { background: #9fd18f; color: #2e5a22; }
.dig-dud { background: #c9c3b4; color: #6b6355; }
.dig-defuser-held { color: var(--marble-B); font-weight: bold; font-size: 12px; }
.dig-count-1 { color: var(--marble-B); }
.dig-count-2 { color: #2e7d22; }
.dig-count-3 { color: #c62828; }
.dig-count-4 { color: #1a237e; }
.dig-count-5 { color: #7b1f1f; }
.dig-count-6 { color: #00796b; }
.dig-count-7 { color: var(--text); }
.dig-count-8 { color: var(--muted); }

/* ----- Admin ----- */

.admin-tool { margin-bottom: 16px; }

/* ----- Notices ----- */

.notice { padding: 8px 10px; margin-bottom: 10px; border: 1px solid; }
.notice p:last-child { margin: 0; }
.notice-error { background: var(--error-bg); border-color: var(--error-border); }
.notice-success { background: var(--success-bg); border-color: var(--success-border); }

/* ----- Stat bars (pet pages) ----- */

.stat-table { border-collapse: collapse; width: 100%; max-width: 420px; margin-bottom: 10px; }
.stat-table th, .stat-table td { text-align: left; padding: 3px 6px; vertical-align: middle; }
.stat-table th { width: 90px; }
.stat-bar { width: 100%; height: 12px; border: 1px solid var(--content-border); background: var(--content-bg); }
.stat-bar-fill { height: 100%; background: var(--title-bg); }
.stat-bar-fill-health { background: var(--health-bar); }
.stat-table + .section-title { margin-top: 14px; }
.stat-number { width: 50px; text-align: right; color: var(--muted); }
.care-level { font-weight: bold; }
.care-low { color: #b3261e; }

/* ----- Footer ----- */

.site-footer {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 4px;
}
.site-clock { margin-top: 3px; }

/* ----- Crumbling Rookery ----- */
.rook-tally { border-color: #4b5d6e; background: #e6eef5; }
/* Ten tiles across, sized like Perilous Excavation's field. */
.rook-roof { border-collapse: separate; border-spacing: 1px; margin: 0 auto 10px; background: var(--slate); border: 2px solid #1a1d24; }
.rook-roof td { padding: 0; }
.rook-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(32px, calc((100vw - 84px) / 10));
  height: min(32px, calc((100vw - 84px) / 10));
  padding: 0;
  font: bold 10px var(--font-body);
  color: #5a3d12;
  border: 0;
}
.rook-standing { background: #9fae8a; border: 2px outset #bccaa6; }
.rook-crumbled { background: var(--slate); }
.rook-fallen { background: #4a3a3a; box-shadow: inset 0 0 0 2px #b04a3a; }
/* Cracked: falls after the next jump. Jagged stripes over the stone. */
.rook-cracked { background: repeating-linear-gradient(135deg, #9fae8a 0 4px, var(--wood-dark) 4px 6px); color: #fff3a0; border: 2px dashed #6b3a2a; }
.rook-here { background: #f4e7b0; color: var(--text); font-size: 18px; border-color: #fff6cf; }
.rook-item { color: #b8860b; font-size: 16px; }
.rook-rich { color: #7a1fa2; font-size: 11px; }
button.rook-legal { cursor: pointer; background: var(--gold); border: 2px outset #fff2a8; box-shadow: 0 0 0 1px var(--content-bg); }
button.rook-legal:hover, button.rook-legal:focus-visible { background: #ffc61a; outline: 2px dashed var(--content-bg); outline-offset: 1px; }

/* ----- Active pets and player profiles ----- */
.active-pet-badge { color: var(--prize-text); font-weight: bold; font-size: 12px; margin-top: 4px; }
.make-active-form { margin: 4px 0 0; }
.make-active-form button { font-size: 11px; padding: 1px 6px; }
.profile { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.profile-pet { width: 150px; padding: 8px; border: 2px solid #7a9cc6; background: #f2f7ff; text-align: center; }
.profile-pet .pet-thumb { display: block; margin: 0 auto 6px; }
.profile-facts { border-collapse: collapse; flex: 1 1 160px; }
.profile-facts th, .profile-facts td { text-align: left; padding: 3px 6px; border-bottom: 1px dotted #b8c7dc; vertical-align: top; }
.profile-facts th { white-space: nowrap; color: #345; }

/* ----- Mirrorworks ----- */
.mw-panel { border-color: #3a4f7a; background: #e8eefc; }
/* Eight tiles plus the frame around them must fit across a phone. */
.mw-board { border-collapse: separate; border-spacing: 1px; margin: 0 auto 10px; background: #1b2238; border: 3px ridge #8d97b3; }
.mw-board td {
  position: relative;
  box-sizing: border-box;
  width: min(36px, calc((100vw - 84px) / 10));
  height: min(36px, calc((100vw - 84px) / 10));
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
.mw-tile { background: #2b3556; }
.mw-edge { background: #141a2c; }
.mw-emitter { background: #5a1b1b; color: #ff6b6b; font-size: 14px; border: 2px outset var(--danger); }
.mw-coins { position: relative; z-index: 2; font: bold 10px var(--font-body); color: var(--gold-glow); }
.mw-item { position: relative; z-index: 2; font-size: 17px; color: #7dffb0; }
.mw-lit { background: #4c3a2a; }
.mw-lit .mw-coins { color: var(--content-bg); text-shadow: 0 0 3px var(--gold-glow); }
.mw-lit .mw-item { color: var(--content-bg); text-shadow: 0 0 4px #7dffb0; }

/* The beam: an arm from the middle of a tile to each side it crosses. */
.mw-arm { display: none; position: absolute; z-index: 1; background: #ff4f4f; box-shadow: 0 0 4px #ff8a8a; }
.mw-arm-n, .mw-arm-s { left: calc(50% - 2px); width: 4px; height: 50%; }
.mw-arm-e, .mw-arm-w { top: calc(50% - 2px); height: 4px; width: 50%; }
.mw-arm-n { top: 0; }
.mw-arm-s { bottom: 0; }
.mw-arm-e { right: 0; }
.mw-arm-w { left: 0; }
.mw-n > .mw-arm-n, .mw-e > .mw-arm-e, .mw-s > .mw-arm-s, .mw-w > .mw-arm-w { display: block; }

/* Mirrors: a silver bar across the tile, on top of the beam. */
.mw-mirror { position: absolute; inset: 0; z-index: 3; display: block; }
/* A gradient's stripe runs across its direction, so a "to bottom right"
   gradient draws a stripe from bottom left to top right: a '/' mirror. */
.mw-slash { background: linear-gradient(to bottom right, transparent 42%, #e4ecf7 42%, #9fb0c8 50%, #e4ecf7 58%, transparent 58%); }
.mw-backslash { background: linear-gradient(to top right, transparent 42%, #e4ecf7 42%, #9fb0c8 50%, #e4ecf7 58%, transparent 58%); }
a.mw-mirror { cursor: pointer; }
a.mw-mirror:hover, a.mw-mirror:focus-visible { outline: 2px dashed var(--gold-glow); outline-offset: -3px; }
.mw-turned { box-shadow: inset 0 0 0 2px var(--gold-glow); }
a.mw-locked { cursor: not-allowed; opacity: 0.75; }

.mw-fire-form { text-align: center; margin: 0 0 8px; }
.mw-fire {
  padding: 6px 28px;
  font: bold 18px var(--font-heading);
  color: var(--content-bg);
  background: #c62828;
  border: 3px outset #ef6b6b;
  cursor: pointer;
}
.mw-fire:active { border-style: inset; }
.mw-fire-form a { display: inline-block; margin-left: 10px; }
.mw-result { border-color: #8a5a1e; background: #fff3d6; }

/* Just fired: the beam crosses the board tile by tile, then the result. */
.mw-firing .mw-arm { animation: mw-beam-in 0.12s ease-out both; animation-delay: calc(var(--step, 0) * 60ms); }
.mw-firing .mw-lit { animation: mw-collect 0.4s ease-out both; animation-delay: calc(var(--step, 0) * 60ms + 60ms); }
.mw-result { animation: mw-beam-in 0.3s ease-out both; }
@keyframes mw-beam-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mw-collect { from { background: #2b3556; } 40% { background: #fff1a8; } to { background: #4c3a2a; } }
@media (prefers-reduced-motion: reduce) {
  .mw-firing .mw-arm, .mw-firing .mw-lit, .mw-result { animation: none; }
}

/* ----- Games page: how far the player has got today ----- */
.today { margin-top: 3px; font-size: 11px; font-weight: bold; }
.today-done { color: #2e7d22; }
.today-started { color: #b35a00; }
.today-new { color: #1a3fbf; }

/* ----- My Pets: each card carries the pet's care meters ----- */
.pet-care { margin: 6px auto; font-size: 11px; }
.pet-care th { text-align: right; padding-right: 6px; font-weight: normal; color: var(--muted); }
.pet-care td { text-align: left; }

/* ----- Home page ----- */
.home-adopt { padding: 8px 12px; margin-bottom: 12px; background: #fff6cf; border: 2px dashed #d8a520; }
.home-adopt p:last-child { margin-bottom: 0; }

/* ----- The Clockmaker ----- */
.cm-panel { border-color: var(--wood); background: #f7ecd2; }
/* The ring: clocks and gears placed by percentages (see the template). */
.cm-ring { position: relative; width: 100%; max-width: 330px; aspect-ratio: 1 / 1.2; margin: 0 auto 10px; background: radial-gradient(circle at 50% 50%, #6b4e2e 0 9%, #3b2a1a 10% 100%); border: 3px ridge #b08a4a; }
.cm-clock { position: absolute; transform: translate(-50%, -50%); text-align: center; line-height: 1.1; }
.cm-face { display: block; margin: 0 auto; }
.cm-dial { fill: #fffaf0; stroke: var(--wood); stroke-width: 5; }
.cm-tick { stroke: var(--wood-dark); stroke-width: 2; }
.cm-tick-big { stroke-width: 4; }
.cm-numeral { font: bold 13px var(--font-body); fill: var(--wood-dark); text-anchor: middle; }
.cm-minute-hand { stroke: #b9a98a; stroke-width: 2; stroke-linecap: round; }
.cm-hand { transform: rotate(var(--to)); transform-origin: 50px 50px; transform-box: view-box; }
.cm-hand line { stroke: var(--slate); stroke-width: 6; stroke-linecap: round; }
.cm-pin { fill: #b08a4a; stroke: var(--wood-dark); stroke-width: 1; }
.cm-hour { display: block; color: #f7ecd2; font-weight: bold; font-size: 12px; }
.cm-twelve .cm-dial { fill: var(--gold); stroke: #3d8b2f; }
.cm-twelve .cm-hour { color: var(--gold); }
.cm-buttons { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.cm-buttons button { min-width: 34px; min-height: 30px; padding: 0; font-size: 18px; line-height: 1; }
.cm-gear { position: absolute; transform: translate(-50%, -50%); font-size: 26px; line-height: 1; color: var(--brass); text-shadow: 1px 1px 0 #3b2a1a; }
.cm-bells { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--gold); font: bold 18px var(--font-heading); text-shadow: 2px 2px 0 #3b2a1a; white-space: nowrap; }
.cm-prizes { margin: 0 auto 10px; }
.cm-result { margin-top: 0; }

/* Just turned: the hands swing from where they were, and the gears that
   joined the moving clocks spin. */
.cm-turning .cm-hand { animation: cm-hand-turn 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes cm-hand-turn { from { transform: rotate(var(--from)); } }
.cm-gear-cw { animation: cm-gear-cw 0.45s ease-out; }
.cm-gear-ccw { animation: cm-gear-ccw 0.45s ease-out; }
@keyframes cm-gear-cw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(60deg); } }
@keyframes cm-gear-ccw { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-60deg); } }

/* Just solved: the last hands swing home, every clock rings in turn, the
   gears whirl, and the bells pop up. */
.cm-chime .cm-hand { animation: cm-hand-turn 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cm-chime .cm-clock { animation: cm-ring 0.5s ease-in-out 2; animation-delay: calc(0.5s + var(--order) * 0.15s); }
.cm-chime .cm-gear { animation: cm-gear-cw 0.4s linear 4; }
.cm-chime .cm-bells { animation: cm-bells 0.8s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: 1.3s; }
@keyframes cm-ring {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-50%, -50%) rotate(-12deg) scale(1.08); }
  75% { transform: translate(-50%, -50%) rotate(12deg) scale(1.08); }
}
@keyframes cm-bells { from { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.cm-solved .cm-dial { filter: drop-shadow(0 0 4px var(--gold)); }

@media (prefers-reduced-motion: reduce) {
  .cm-turning .cm-hand, .cm-chime .cm-hand, .cm-chime .cm-clock, .cm-chime .cm-gear, .cm-chime .cm-bells, .cm-gear-cw, .cm-gear-ccw { animation: none; }
}

/* ----- The Coliseum ----- */
.co-versus { width: 100%; border-collapse: collapse; margin-bottom: 8px; table-layout: fixed; }
.co-versus td { vertical-align: top; padding: 0; }
.co-versus td.co-vs { width: 34px; text-align: center; vertical-align: middle; font: bold 18px var(--font-heading); color: var(--danger); }
.co-fighter { padding: 6px; border: 3px ridge var(--brass); background: var(--parchment); text-align: center; }
.co-fighter.co-down { opacity: 0.6; }
.co-portrait { margin: 0 auto 4px; }
.co-name { font-weight: bold; font-size: 14px; }
.co-health-label { margin-top: 4px; font-size: 12px; }
.co-health { height: 10px; margin: 2px 0 4px; }
.co-health .stat-bar-fill { background: #3f9a2b; }
.co-health .co-health-low { background: #c63b2b; }
.co-stats { width: 100%; font-size: 12px; border-collapse: collapse; }
.co-stats th, .co-stats td { padding: 2px 0; vertical-align: top; border-top: 1px dotted #d8c38f; }
.co-stats th { text-align: left; font-weight: bold; }
.co-stats td { text-align: right; font-weight: bold; }
.co-chance { display: block; font-size: 10px; font-weight: normal; color: var(--muted); }
.co-defending { margin-top: 4px; font-size: 11px; font-weight: bold; color: var(--marble-B); }
.co-round { padding: 6px 8px; margin-bottom: 8px; border: 2px solid var(--wood); background: #fff8e1; }
.co-round p { margin: 4px 0 0; }
.co-actions { margin-bottom: 10px; padding: 6px; border: 2px solid var(--wood); background: var(--parchment); }
.co-action-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.co-action-row:last-child { margin-bottom: 0; }
.co-action-row select { max-width: 100%; width: auto; }
.co-flee { margin-left: auto; background: #eee; }
.co-log { max-height: 220px; overflow-y: auto; margin: 0 0 10px; padding: 4px 8px 4px 28px; border: 1px solid var(--content-border); background: var(--content-bg); font-size: 12px; }
.co-lobby-pet { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.co-lobby-pet .co-fighter { flex: 0 1 230px; }
.co-lobby-notes { flex: 1 1 200px; }
.co-lobby-notes p { margin: 0 0 6px; }
.co-warning { color: #c63b2b; font-weight: bold; }
.co-challengers { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.co-challengers td { vertical-align: top; padding: 6px 4px; border-bottom: 1px dashed var(--content-border); }
.co-challengers p { margin: 4px 0; }
.co-challenger-picture { width: 76px; }
.co-challenger-stats { font-size: 11px; color: var(--muted); }
.co-prize { margin: 4px 0; font-size: 12px; font-weight: bold; color: var(--prize-text); }
.co-result { padding: 8px 10px; margin-bottom: 10px; border: 3px ridge var(--brass); font-size: 14px; }
.co-result-won { background: #e6f5d6; }
.co-result-lost { background: #f8dcd6; }
.co-result-fled { background: #eee; }
@media (max-width: 420px) {
  .co-versus td.co-vs { width: 22px; font-size: 13px; }
  .co-fighter { padding: 4px; }
  /* Smaller pictures on a phone; !important beats the size the picture partial sets inline. */
  .co-portrait { width: 64px !important; height: 64px !important; }
}

/* ----- Wider screens: sidebar layout ----- */

@media (min-width: 760px) {
  .site {
    grid-template-columns: 170px minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "nav    content"
      "footer footer";
    align-items: start;
  }

  .site-nav {
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    padding: 10px;
  }

  .site-nav-heading {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .site-nav ul { display: block; }
  .site-nav li { margin-bottom: 6px; }
  .purse { text-align: left; }

  .site-nav li a,
  .site-nav li button {
    display: block;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-weight: normal;
    font-size: 13px;
    color: var(--link);
    text-decoration: underline;
    text-align: left;
  }

  .site-nav li a.nav-image-link { text-decoration: none; }
}