/*
  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;
  --success-bg: #e3f7d8;
  --success-border: #4e8a2a;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 8px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  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: "Trebuchet MS", Verdana, sans-serif;
  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;
  grid-template-columns: 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; }

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

.picture-placeholder.site-logo {
  padding: 22px 8px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  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: "Trebuchet MS", Verdana, sans-serif;
  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: "Trebuchet MS", Verdana, sans-serif;
  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; }

.picture-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 80px;
  min-width: 80px;
  max-width: 100%;
  background: var(--illustration-bg);
  border: 1px dashed var(--illustration-border);
  color: var(--muted);
  font-style: italic;
}

.picture-placeholder.hero { width: 100%; min-height: 160px; }
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;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

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

.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; }
.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;
}

/* ----- 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; }
.stock-count { font-size: 12px; font-weight: bold; color: #1f6b2a; margin-top: 4px; }
.sold-out .item-icon { opacity: 0.5; }
.sold-out-label { color: #a33; }
.price { font-weight: bold; color: #7a4a00; }
.buy-form { margin-top: 6px; display: flex; 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; }

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

.inventory-grid .item-box { text-align: center; }
.item-box .item-icon { display: block; margin: 0 auto 6px; }
.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%; }

.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: #fff;
}

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;
}

/* ----- 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; }
.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: #fff; }
.stat-bar-fill { height: 100%; background: var(--title-bg); }
.stat-number { width: 50px; text-align: right; color: var(--muted); }

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

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

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

@media (min-width: 760px) {
  .site {
    grid-template-columns: 170px 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: Verdana, Geneva, Tahoma, sans-serif;
    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; }
}