/*
  Izipets stylesheet.

  The look is a browser game from around 2003: a light blue page, white
  content, a green banner, blue buttons, bright blue underlined links,
  Verdana everywhere, square borders, outset buttons and inset boxes.
  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. The dark palette follows: it applies when the device prefers
  dark and the player has not chosen light (Settings), or when they have
  chosen dark. The two dark blocks must stay the same.
*/

:root {
  /* The classic web of 2003: a light blue page, white content, a yellow
     banner, blue buttons and bright blue links, with red-orange for
     accents. */
  --page-bg: #a8c8ec;
  --frame-bg: #e8f0fa;
  --frame-border: #3a66b0;
  --banner-bg: #3f9a4c;
  --banner-border: #2a6b34;
  --menu-bg: #3a66b0;
  --menu-border: #1f3f7a;
  --menu-text: #ffffff;
  /* A menu button that wants looking at (Mail with something unread).
     Deep enough that the white label stays readable. */
  --menu-attention-bg: #c45000;
  --menu-attention-border: #7a3000;
  --frame-text: #1f3f7a;
  --content-bg: #ffffff;
  --content-border: #3a66b0;
  --title-bg: #3a66b0;
  --title-text: #ffffff;
  --heading: #1f3f7a;
  --accent: #e04e1f;
  --illustration-bg: #f4f8ff;
  --illustration-border: #9ab6dc;
  --item-bg: #f4f8ff;
  --item-border: #9ab6dc;
  --link: #0033cc;
  --link-visited: #660099;
  --link-hover: #e04e1f;
  --text: #000000;
  --muted: #555555;
  --error-bg: #ffe0d6;
  --error-border: #c0392b;
  --health-bar: #d9433a;
  --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: #e0f5d0;
  --success-border: #3a9a2b;
  /* Accents the games and shops share. */
  --gold: #ffd84a;
  --gold-glow: #ffe88a;
  --danger: #cc0000;
  --prize-text: #b36b00;
  --price: #cc3300;
  --wood: #8a6a2a;
  --wood-dark: #5e4420;
  --brass: #c9a45a;
  --slate: #2b2f3a;
  --parchment: #f6ebcf;
  /* Panels behind a game's board or an odd random event. */
  --panel-blue: #dbe8f8;
  --panel-purple: #e8def5;
  --panel-grey: #e6e6e6;
  color-scheme: light;
  /* The two typefaces: body text, and headings and the odd big number. */
  --font-body: Verdana, Geneva, Tahoma, sans-serif;
  --font-heading: Verdana, Geneva, Tahoma, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #10203a;
    --frame-bg: #1a2b47;
    --frame-border: #4f78b8;
    --banner-bg: #2f6f3a;
    --banner-border: #6fbf7a;
    --menu-bg: #2d5190;
    --menu-border: #7fa8e8;
    --menu-attention-bg: #b84a00;
    --menu-attention-border: #ffa866;
    --frame-text: #c9d6ea;
    --content-bg: #121a28;
    --content-border: #4f78b8;
    --title-bg: #2d5190;
    --heading: #a9c4ea;
    --accent: #ff8a5c;
    --illustration-bg: #1e2a40;
    --illustration-border: #4f78b8;
    --item-bg: #1e2a40;
    --item-border: #4f78b8;
    --link: #7fb0ff;
    --link-visited: #c9a6e6;
    --link-hover: #ff8a5c;
    --text: #ececec;
    --muted: #a9a9a9;
    --error-bg: #4a1f1b;
    --error-border: #e06a60;
    --success-bg: #1f3d1c;
    --success-border: #7fb573;
    --gold: #d9b24a;
    --prize-text: #f0c060;
    --price: #ff9d5c;
    --parchment: #302a1c;
    --panel-blue: #203250;
    --panel-purple: #2f2740;
    --panel-grey: #353535;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page-bg: #10203a;
  --frame-bg: #1a2b47;
  --frame-border: #4f78b8;
  --banner-bg: #2f6f3a;
  --banner-border: #6fbf7a;
  --menu-bg: #2d5190;
  --menu-border: #7fa8e8;
  --menu-attention-bg: #b84a00;
  --menu-attention-border: #ffa866;
  --frame-text: #c9d6ea;
  --content-bg: #121a28;
  --content-border: #4f78b8;
  --title-bg: #2d5190;
  --heading: #a9c4ea;
  --accent: #ff8a5c;
  --illustration-bg: #1e2a40;
  --illustration-border: #4f78b8;
  --item-bg: #1e2a40;
  --item-border: #4f78b8;
  --link: #7fb0ff;
  --link-visited: #c9a6e6;
  --link-hover: #ff8a5c;
  --text: #ececec;
  --muted: #a9a9a9;
  --error-bg: #4a1f1b;
  --error-border: #e06a60;
  --success-bg: #1f3d1c;
  --success-border: #7fb573;
  --gold: #d9b24a;
  --prize-text: #f0c060;
  --price: #ff9d5c;
  --parchment: #302a1c;
  --panel-blue: #203250;
  --panel-purple: #2f2740;
  --panel-grey: #353535;
  color-scheme: dark;
}

* { 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); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:visited { color: var(--link-visited); }
a:hover, a:focus-visible { color: var(--link-hover); }

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

::selection { background: var(--gold); color: #000000; }

/* Boxes you type in are sunk into the page, 2003 style; buttons stand
   out of it. Rules below that size a particular box keep these looks. */
input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="email"], textarea, select {
  font: 13px var(--font-body);
  color: var(--text);
  background: var(--content-bg);
  border: 2px inset var(--illustration-border);
  padding: 3px 4px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

p { margin: 0 0 10px; }

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

.site {
  max-width: 920px;
  margin: 0 auto;
  padding: 8px;
  background: var(--frame-bg);
  border: 3px double 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. Its box and button and
   the menu buttons are all this tall, so the banner and menu line up. */
:root { --bar-button-height: 23px; }

.site-search { display: flex; justify-content: center; gap: 4px; padding: 0 8px 8px; }
.site-search input {
  flex: 0 1 260px;
  min-width: 0;
  height: var(--bar-button-height);
  padding: 2px 4px;
}
.site-search button {
  height: var(--bar-button-height);
  padding: 2px 10px;
  font: bold 12px var(--font-heading);
}

.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(--title-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(4, 1fr);
  gap: 6px;
}


.site-nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* A minimum, not a fixed height, so a long label can wrap to two lines. */
  min-height: var(--bar-button-height);
  padding: 2px 3px;
  background: var(--menu-bg);
  border: 2px outset var(--menu-border);
  font: bold 12px var(--font-heading);
  color: var(--menu-text);
  text-decoration: none;
  text-align: center;
}
.site-nav li a:hover, .site-nav li a:focus-visible { color: var(--gold); }

/* Mail with unread messages or waiting offers (see src/web/navigation.js). */
.site-nav li a.nav-attention { background: var(--menu-attention-bg); border-color: var(--menu-attention-border); }

.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: var(--bar-button-height);
  padding: 2px 3px;
  background: var(--menu-bg);
  border: 2px outset var(--menu-border);
  font: bold 12px var(--font-heading);
  color: var(--menu-text);
  cursor: pointer;
}

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

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

.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--title-bg);
  color: var(--title-text);
  font-size: 17px;
  padding: 7px 10px;
  margin: 0 0 10px;
}
/* A button at the right end of the title (the inventory's Vault). */
.page-title-action, .page-title-action:visited {
  flex: none;
  padding: 3px 10px;
  background: var(--content-bg);
  border: 2px outset var(--illustration-border);
  color: var(--heading);
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}
.page-title-action:hover, .page-title-action:focus-visible { color: var(--link-hover); }

.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);
  color: var(--heading);
  font-weight: bold;
  text-align: center;
  font-size: 12px;
}

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

.random-event {
  border: 2px solid var(--banner-border);
  background: var(--illustration-bg);
  margin: 0 0 10px;
}
.random-event-heading {
  background: var(--banner-bg);
  color: var(--content-bg);
  border-bottom: 2px solid var(--banner-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: var(--error-bg); }
.random-event-bad .random-event-heading { background: var(--danger); border-bottom-color: var(--error-border); }
.random-event-odd { border-color: #6a4e8a; background: var(--panel-purple); }
.random-event-odd .random-event-heading { background: #6a4e8a; border-bottom-color: #6a4e8a; }

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

.section-title {
  font-size: 13px;
  background: var(--panel-blue);
  border: 1px solid var(--content-border);
  color: var(--heading);
  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: var(--success-border); 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: var(--price); }
.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 4px; }
.data-table th { color: var(--heading); border-bottom: 2px solid var(--illustration-border); }
.data-table tr:nth-child(even) td { background: var(--item-bg); }

/* ----- 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; }
.form-row .checkbox-label { font-weight: normal; }

/* Two-factor login setup (Settings). The QR code keeps a white
   background in the dark theme too, or phone cameras cannot read it. */
.qr-code { display: inline-block; padding: 6px; background: #ffffff; border: 2px solid var(--content-border); }
.qr-code svg { display: block; width: 180px; height: 180px; }
.setup-key { font-size: 14px; letter-spacing: 1px; }
.recovery-codes { list-style: none; padding: 0; columns: 2; max-width: 360px; }
.recovery-codes li { margin-bottom: 4px; font-size: 14px; }

input[type="text"],
input[type="password"],
input[type="email"],
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-family: var(--font-heading);
  font-weight: bold;
  background: var(--menu-bg);
  border: 2px outset var(--menu-border);
  color: var(--menu-text);
  cursor: pointer;
}
button:hover, .button:hover, button:focus-visible { background: var(--menu-border); }
button:active { border-style: inset; }
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(--menu-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: var(--wood); background: var(--illustration-bg); }
/* 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; }
.admin-form p { margin: 0 0 6px; }
.admin-form input[type="text"] { max-width: 100%; }
/* The staff's tables have many columns; on a phone they scroll sideways
   rather than squash. */
.table-scroll { overflow-x: auto; margin-bottom: 6px; }
.table-scroll .data-table { white-space: nowrap; }

/* ----- Forums ----- */

.forum-list, .thread-list { width: 100%; }
.forum-list td, .thread-list td { vertical-align: top; padding-top: 4px; padding-bottom: 4px; border-bottom: 1px dotted var(--item-border); }
.forum-name { font-weight: bold; }
.hidden-row { opacity: 0.6; }
.paging a, .paging strong { margin-right: 4px; }
.post { border: 1px solid var(--content-border); margin-bottom: 8px; }
.post-meta { background: var(--illustration-bg); border-bottom: 1px solid var(--content-border); padding: 3px 6px; font-size: 11px; }
.post-meta a { margin-right: 6px; color: var(--heading); }
.post-meta a strong { font-size: 12px; }
.post-meta .post-link { float: right; margin: 0; }
.post-body { padding: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-hidden .post-body { background: var(--error-bg); }
.post .staff-tool { margin: 0 6px 6px; }
.post-form textarea, .post-form input[type="text"] { max-width: 100%; font: inherit; border: 1px solid var(--content-border); padding: 3px; }
.post-form p { margin: 0 0 6px; }
.staff-tool input[type="text"] { width: 160px; }

/* ----- Mailbox and trades ----- */

.mail-list { list-style: none; padding: 0; margin: 0 0 10px; }
.mail-list li { padding: 4px 0; border-bottom: 1px dotted var(--item-border); }
.mail-unread > a { font-weight: bold; }
.trade-line select { max-width: 100%; }
.trade-form input[type="number"] { width: 90px; }

/* ----- 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: var(--danger); }

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

.site-footer {
  font-size: 11px;
  color: var(--frame-text);
  text-align: center;
  padding: 6px 4px 4px;
  border-top: 3px double var(--illustration-border);
}
.site-clock { margin-top: 3px; }
.page-presence { display: inline-block; margin-top: 6px; padding: 2px 8px; border: 1px solid var(--frame-border); background: var(--content-bg); color: var(--text); }

/* ----- Crumbling Rookery ----- */
.rook-tally { border-color: var(--slate); background: var(--panel-blue); }
/* 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 var(--page-bg); background: var(--content-bg); 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 var(--item-border); vertical-align: top; }
.profile-facts th { white-space: nowrap; color: var(--heading); }

/* ----- Mirrorworks ----- */
.mw-panel { border-color: #1b2238; background: var(--panel-blue); }
/* 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: var(--wood); background: var(--illustration-bg); }

/* 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: var(--success-border); }
.today-started { color: var(--price); }
.today-new { color: var(--link); }

/* ----- 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: var(--illustration-bg); border: 2px dashed var(--price); }
.home-adopt p:last-child { margin-bottom: 0; }

/* ----- The Clockmaker ----- */
.cm-panel { border-color: var(--wood); background: var(--parchment); }
/* 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: var(--tile-correct); }
.co-health .co-health-low { background: var(--danger); }
.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 var(--brass); }
.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: var(--illustration-bg); }
.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: var(--panel-grey); }
.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: var(--danger); 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: var(--success-bg); }
.co-result-lost { background: var(--error-bg); }
.co-result-fled { background: var(--panel-grey); }
@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;
  }

  /* The same square buttons as on phones, stacked one to a row. */
  .site-nav ul { grid-template-columns: minmax(0, 1fr); }
  .purse { text-align: left; }
}