/* FAT CATZ - a laminated vet chart taped to a 1997 homepage. Web-safe
   palette only, no webfonts, bevelled chrome, visible table rules. */
body {
  margin: 0;
  background: #FFFFCC;
  /* subtle 90s tile: two-tone paper stripes */
  background-image: repeating-linear-gradient(0deg, #FFFFCC 0, #FFFFCC 23px, #FFFF99 23px, #FFFF99 24px);
  color: #333300;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.55;
}
b { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
a { color: #008080; }
a:visited { color: #800080; }
p { max-width: 62ch; margin: 0 0 12px; }
.cap { font-size: 12px; color: #996633; }
.mono { font-family: 'Courier New', Courier, monospace; font-size: 12px; word-break: break-all; }

#frame { margin: 0 auto; border-collapse: collapse; }
#rail { vertical-align: top; width: 160px; padding: 16px 0 0 8px; }
#page { vertical-align: top; width: 860px; max-width: 96vw; padding: 16px 8px; }

/* the rail is a real bordered table */
.railbox { width: 152px; border: 2px outset #996633; background: #FFFFCC; }
.railbox th {
  font-family: Impact, 'Arial Black', sans-serif; font-weight: normal;
  font-size: 20px; letter-spacing: 1px; background: #996633; color: #FFFFCC;
  padding: 6px; text-align: left;
}
.railbox td { border-top: 1px solid #996633; padding: 6px 8px; font-size: 14px; }
.railbox td a { text-decoration: underline; }
.railbox .railgap { background: repeating-linear-gradient(45deg, #FFFFCC, #FFFFCC 3px, #FFFF99 3px, #FFFF99 6px); height: 10px; padding: 0; }

/* masthead */
#masthead { margin-bottom: 14px; }
#title {
  font-family: Impact, 'Arial Black', sans-serif; font-size: 64px;
  letter-spacing: 2px; line-height: 1; color: #333300;
  text-shadow: 3px 3px 0 #996633;
}
#strap { font-size: 15px; color: #996633; margin: 4px 0 10px; }
#counterbox { width: 100%; border: 2px outset #996633; background: #FFFFCC; }
#counterbox td { padding: 6px 10px; }
.counterlabel { font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: bold; }
.counterlabel.right { text-align: right; }
.odo {
  font-family: 'Courier New', Courier, monospace; font-size: 22px; font-weight: bold;
  background: #333300; color: #FFFF99; border: 2px inset #996633;
  padding: 2px 8px; letter-spacing: 4px; display: inline-block;
}
#connect {
  font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: bold;
  background: #CCCC99; color: #333300; border: 2px outset #996633;
  padding: 4px 10px; cursor: pointer;
}
#connect:active { border-style: inset; }

/* panels are bordered tables with a title bar */
.panel { width: 100%; table-layout: fixed; border: 2px outset #996633; background: #FFFFCC; margin-bottom: 18px; border-collapse: separate; }
.paneltitle {
  font-family: Impact, 'Arial Black', sans-serif; font-weight: normal;
  font-size: 24px; letter-spacing: 1px; text-align: left;
  background: #996633; color: #FFFFCC; padding: 6px 12px;
}
.paneltitle .cap { color: #FFFF99; font-family: Georgia, serif; letter-spacing: 0; font-size: 12px; }
.panelbody { padding: 14px; }
.lede { font-size: 16px; }

/* THE CHONK CHART */
#chartWrap { overflow-x: auto; }
#chonkchart { border-collapse: collapse; width: 100%; }
#chonkchart td { border: 1px solid #996633; padding: 4px 8px; text-align: center; font-family: 'Courier New', Courier, monospace; font-size: 13px; }
#chonkchart .charthead td { background: #CCCC99; font-weight: bold; font-size: 11px; border-bottom: 2px solid #996633; }
#chonkchart .tiernum {
  font-family: Impact, 'Arial Black', sans-serif; font-size: 46px;
  color: #996633; width: 56px; background: #FFFFCC;
}
#chonkchart .tiername { font-family: Impact, 'Arial Black', sans-serif; font-size: 18px; letter-spacing: 1px; text-align: left; color: #333300; }
#chonkchart .catcell { text-align: left; background: #FFFFCC; }
#chonkchart .catcell img { image-rendering: pixelated; display: block; }
#chonkchart tr.chartrow:hover td { background: #FFFF99; cursor: pointer; }
#chonkchart .alive { font-size: 16px; font-weight: bold; }
.newbadge {
  font-family: 'Courier New', Courier, monospace; font-size: 11px; font-weight: bold;
  color: #FFFFCC; background: #FF6600; padding: 1px 5px; margin-left: 6px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* stat rows */
.statrow { width: 100%; margin: 10px 0; border-collapse: collapse; }
.statrow td { border: 2px inset #996633; background: #FFFFCC; padding: 8px 10px; width: 25%; }
.statrow b { display: block; font-size: 20px; }
.statrow span { font-size: 10px; font-family: 'Courier New', Courier, monospace; font-weight: bold; color: #996633; letter-spacing: 1px; }

/* buttons */
button.big, .btnrow button {
  font-family: 'Courier New', Courier, monospace; font-size: 15px; font-weight: bold;
  background: #CCCC99; color: #333300; border: 3px outset #996633;
  padding: 10px 18px; cursor: pointer;
}
button.big:active, .btnrow button:active { border-style: inset; }
button:disabled { color: #999966; cursor: not-allowed; border-color: #CCCC99; }
.btnrow td { padding-right: 10px; vertical-align: middle; }
.status { min-height: 20px; font-size: 14px; margin: 6px 0; font-family: 'Courier New', Courier, monospace; }
.status.ok { color: #008000; }
.status.err { color: #CC0000; }
.stamp { font-family: 'Courier New', Courier, monospace; font-size: 13px; border: 2px dashed #996633; padding: 8px 10px; background: #FFFF99; display: inline-block; }

/* the cat box */
.boxtitle { font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: bold; color: #996633; margin-top: 12px; }
.box { border: 2px inset #996633; background: #FFFF99; padding: 8px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 60px; }
.slot { background: #FFFFCC; border: 2px outset #996633; cursor: pointer; position: relative; width: 72px; }
.slot img { width: 100%; display: block; image-rendering: pixelated; }
.slot.on { border: 2px solid #FF6600; background: #FFFF99; }
.slot .tag { display: block; font-size: 9px; text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; background: #996633; color: #FFFFCC; }
.slot.on .tag { background: #FF6600; }

#breedRow { display: flex; gap: 8px; margin-top: 10px; }
#breedRow .sw { width: 56px; text-align: center; font-size: 9px; font-family: 'Courier New', Courier, monospace; font-weight: bold; color: #996633; }
#breedRow img { width: 56px; image-rendering: pixelated; border: 1px solid #996633; }

/* the manual */
.manual { border-collapse: collapse; width: 100%; }
.manual th { font-family: Impact, 'Arial Black', sans-serif; font-weight: normal; letter-spacing: 1px; color: #996633; text-align: left; vertical-align: top; padding: 8px 14px 8px 0; white-space: nowrap; }
.manual td { border-bottom: 1px solid #996633; padding: 8px 0; }

#footer { text-align: center; font-size: 12px; color: #996633; padding: 18px 0 30px; }

.gone { display: none !important; }

@media (max-width: 900px) {
  #frame, #frame tr, #rail, #page { display: block; width: auto; }
  /* tables become blocks on a phone, so nothing can force the page wide */
  .panel, .panel tbody, .panel tr, .panel th, .panel td { display: block; width: auto; }
  .statrow, .statrow tbody, .statrow tr { display: block; }
  .btnrow, .btnrow tbody, .btnrow tr, .btnrow td { display: inline-block; padding: 2px; }
  .manual, .manual tbody, .manual tr, .manual th, .manual td { display: block; }
  .manual td { border-bottom: 1px solid #996633; padding: 2px 0 8px; }
  /* the chart alone stays a real table and scrolls inside its wrap */
  #chonkchart { display: table; width: 100%; }
  #chonkchart tbody { display: table-row-group; }
  #chonkchart tr { display: table-row; }
  #chonkchart td { display: table-cell; }
  #counterbox, #counterbox tr { display: block; }
  #counterbox td { display: block; padding: 4px 10px; }
  .counterlabel.right { text-align: left; }
  .odo { font-size: 18px; }
  #rail { padding: 8px; }
  .railbox { width: 100%; }
  #title { font-size: 44px; }
  .statrow td { display: inline-block; width: 44%; }
  #chonkchart .tiernum { font-size: 30px; width: 36px; }
  #chonkchart td { font-size: 11px; padding: 3px 4px; }
}