/* cat64. A profile page from 2005, with a working burn on it.
   Everything pixel is rendered crisp; nothing is allowed to go soft. */

* { box-sizing: border-box; }

img, .pfpimg, .grid img, .top5 img { image-rendering: pixelated; }

body {
  margin: 0;
  padding: 0 0 40px;
  font: 11px Verdana, Geneva, Arial, sans-serif;
  color: #000;
  background: #0d1f14 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ctext x='12' y='32' font-size='22' opacity='0.07'%3E🐱%3C/text%3E%3C/svg%3E") repeat;
  background-size: 48px 48px;
}

a { color: #003399; }
a:hover { color: #d33; }

b { font-weight: bold; }

/* ---------------------------------------------------------- fake nav bar */
.msnav {
  background: #6699cc;
  border-bottom: 2px solid #003399;
  padding: 4px 10px;
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.mslogo { font: bold 15px Arial, sans-serif; color: #fff; margin-right: 14px; }
.ms64 { color: #cee896; }
.msnavlinks { color: #dbe9f7; }
.msnavlinks a {
  color: #cee896;
  text-decoration: none;
}
.msnavlinks a:hover {
  color: #fff;
  text-decoration: underline;
}
.msnavlinks a.cur {
  font-weight: bold;
  color: #fff;
  text-decoration: underline;
}
.msnavlinks .nav-disabled {
  color: #4b6275 !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
  opacity: 0.6;
}

.page { max-width: 1000px; margin: 0 auto; padding: 0 8px; }

/* ------------------------------------------------------------- banner */
.banner { text-align: center; padding: 18px 0 10px; }
.logo { max-width: 420px; width: 100%; height: auto; mix-blend-mode: screen; margin: 0 auto; }
.logo-text {
  font: bold 42px Arial, sans-serif;
  color: #fff;
  text-align: center;
  margin: 10px 0 5px;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: -1px;
}
.logo-hood {
  color: #cee896;
}
.tagline {
  font: bold 12px Verdana, sans-serif;
  color: #cee896;
  margin-top: 6px;
  text-shadow: 1px 1px 0 #000;
}
.mq {
  display: block;
  margin: 10px auto 0;
  max-width: 900px;
  background: #000;
  color: #9ad86a;
  border: 2px solid #569c3c;
  padding: 4px 0;
  font: 11px Verdana, sans-serif;
}

/* -------------------------------------------------------------- columns */
.cols { display: flex; gap: 10px; align-items: flex-start; }
.left { width: 260px; flex: 0 0 260px; }
.right { flex: 1 1 auto; min-width: 0; }

@media (max-width: 820px) {
  .cols { flex-direction: column; }
  .left { width: 100%; flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- boxes */
.box {
  background: #fff;
  border: 1px solid #003399;
  margin-bottom: 10px;
}
.boxh {
  background: #6699cc;
  color: #fff;
  font: bold 11px Verdana, sans-serif;
  padding: 3px 6px;
  border-bottom: 1px solid #003399;
}
.boxh .hn { font-weight: normal; color: #dbe9f7; }
.boxb { padding: 8px; }
.badge { vertical-align: middle; margin-left: 6px; height: 16px; }

.note { color: #666; font-size: 10px; margin-top: 6px; }

/* ------------------------------------------------------------- profile */
.pfp {
  background: #fff;
  border: 1px solid #003399;
  padding: 8px;
  margin-bottom: 10px;
  text-align: center;
}
.pfpimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid #000;
  background: #3a6a7a;
  margin-bottom: 6px;
}
.pfpimg img { width: 100%; height: 100%; display: block; }
.pfpname { font: bold 16px Arial, sans-serif; }
.pfpsub { color: #444; margin: 3px 0 6px; line-height: 1.5; }
.mood { border-top: 1px dotted #999; padding-top: 6px; }
.emo { font-family: "Comic Sans MS", cursive; color: #b30; }
.pfplinks { margin-top: 6px; font-size: 10px; }

/* ------------------------------------------------------------- details */
table { border-collapse: collapse; width: 100%; }
.details td { padding: 2px 4px; vertical-align: top; }
.details tr td:first-child {
  background: #dbe9f7;
  color: #003399;
  font-weight: bold;
  width: 92px;
  white-space: nowrap;
}
.details tr:nth-child(even) td:first-child { background: #eaf2fb; }
.contact table td { padding: 3px; text-align: center; background: #eaf2fb; }

/* ------------------------------------------------------------- counter */
.counter {
  font: bold 20px "Courier New", monospace;
  background: #000;
  color: #6f6;
  letter-spacing: 3px;
  text-align: center;
  padding: 5px;
  border: 2px inset #888;
}

/* -------------------------------------------------------------- blurbs */
.blurbh {
  font: bold 12px Verdana, sans-serif;
  color: #003399;
  border-bottom: 1px solid #dbe9f7;
  margin: 4px 0 6px;
}
.boxb p { margin: 0 0 9px; line-height: 1.65; }

/* --------------------------------------------------------------- claim */
.claimbox { border: 2px solid #569c3c; }
.claimbox .boxh { background: #569c3c; border-bottom: 1px solid #1a3d1e; }

.claimtop { text-align: center; padding: 4px 0 10px; }
.claimnum { font: bold 30px Arial, sans-serif; color: #1a3d1e; }
.claimnum .of { font-size: 15px; color: #888; }
.claimlbl { color: #555; font-size: 10px; }
.bar {
  height: 14px;
  background: #e6e6e6;
  border: 1px solid #888;
  margin: 6px auto;
  max-width: 420px;
}
.barfill { height: 100%; width: 0; background: #569c3c; transition: width .4s; }

.price {
  background: #f2f8ec;
  border: 1px dashed #569c3c;
  padding: 8px;
  text-align: center;
  margin-bottom: 10px;
  font-size: 12px;
}

.status { text-align: center; margin-bottom: 8px; min-height: 16px; color: #333; }
.status.err { color: #b00; font-weight: bold; }
.status.ok { color: #1a7a1a; font-weight: bold; }

button.big {
  display: block;
  width: 100%;
  padding: 12px;
  font: bold 15px Verdana, sans-serif;
  color: #fff;
  background: #569c3c;
  border: 2px outset #7fc45f;
  cursor: pointer;
}
button.big:hover:not(:disabled) { background: #67b849; }
button.big:active:not(:disabled) { border-style: inset; }
button.big:disabled { background: #9aa79a; border-color: #b9c2b9; cursor: default; }

.result {
  margin-top: 12px;
  border: 2px solid #569c3c;
  background: #f2f8ec;
  padding: 10px;
  text-align: center;
}
.result img { width: 128px; height: 128px; border: 2px solid #000; margin: 4px; }

/* ------------------------------------------------------------- filters */
.filters { margin-bottom: 8px; }
.fbtn {
  font: 10px Verdana, sans-serif;
  padding: 3px 8px;
  margin-right: 4px;
  background: #dbe9f7;
  border: 1px solid #6699cc;
  cursor: pointer;
}
.fbtn.active { background: #569c3c; color: #fff; border-color: #1a3d1e; }

/* ---------------------------------------------------------------- grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 4px;
}
.cell {
  position: relative;
  border: 1px solid #888;
  background: #000;
  cursor: pointer;
  line-height: 0;
}
.cell img { width: 100%; display: block; }
.cell .id {
  position: absolute; left: 0; bottom: 0;
  background: rgba(0,0,0,.72); color: #fff;
  font: 9px Verdana, sans-serif; line-height: 1.4;
  padding: 0 3px;
}
/* A claimed cat has to be obvious at a glance across 200 cells, so it gets
   drained of colour as well as dimmed, and carries a tag. */
.cell.claimed img { opacity: .35; filter: grayscale(70%); }
.cell.claimed { border-color: #444; }
.cell.claimed .id { background: rgba(0,0,0,.85); color: #ffb; }
.cell .tag {
  position: absolute; right: 0; top: 0;
  background: #b00; color: #fff;
  font: bold 8px Verdana, sans-serif; line-height: 1.5;
  padding: 0 3px;
}
.cell.sup { border: 2px solid #d4a017; }
.cell.sup .id { background: #d4a017; color: #000; font-weight: bold; }

/* ---------------------------------------------------------------- top5 */
.top5 { display: flex; flex-wrap: wrap; gap: 10px; }
.top5 .t5 { text-align: center; width: 108px; }
.top5 img { width: 100px; height: 100px; border: 2px solid #d4a017; display: block; }
.top5 .n { font: bold 11px Verdana, sans-serif; margin-top: 3px; }
.top5 .s { color: #666; font-size: 9px; line-height: 1.4; }

/* ---------------------------------------------------------------- wall */
.wall .cmt {
  display: flex; gap: 8px; align-items: center;
  border-bottom: 1px dotted #ccc; padding: 6px 0;
}
.wall .cmt img { width: 44px; height: 44px; border: 1px solid #888; }
.wall .who { font-weight: bold; color: #003399; }
.wall .when { color: #888; font-size: 10px; }
.wall .empty { color: #666; padding: 8px 0; }

/* --------------------------------------------------------------- modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  padding: 16px;
}
/* display:flex above beats the browser default for [hidden], so the modal
   has to be hidden explicitly or it sits open on first paint. */
.modal[hidden] { display: none; }
.modalinner {
  background: #fff; border: 2px solid #003399;
  max-width: 380px; width: 100%; padding: 12px; text-align: center;
  max-height: 90vh; overflow: auto;
}
.modalinner img { width: 240px; height: 240px; border: 2px solid #000; }
.close { float: right; font-size: 10px; cursor: pointer; }
.mtraits { margin-top: 8px; }
.mtraits td { padding: 2px 4px; }

/* ---------------------------------------------------------------- foot */
.foot { text-align: center; padding: 16px 0 0; }
.foot .note { color: #9ab; }
.footstrip-container {
  display: flex;
  max-width: 100%;
  border: 2px solid #000;
  overflow: hidden;
  margin: 0 auto 12px;
}
.footstrip-container img {
  width: 12.5%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------- the CA box */
.cabox {
  margin: 10px 0;
  border: 3px solid #569c3c;
  background: #0d1f14;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
.cabox:hover { border-color: #7fc45f; background: #12281a; }
.cabox:active { border-style: inset; }
.calabel {
  font: bold 11px Verdana, sans-serif;
  color: #9ad86a;
  margin-bottom: 5px;
  text-transform: lowercase;
}
.caaddr {
  font: bold 14px "Courier New", monospace;
  color: #cee896;
  word-break: break-all;
  letter-spacing: 0.5px;
}
.cacopied {
  margin-top: 5px;
  font: bold 11px Verdana, sans-serif;
  color: #fff;
  background: #569c3c;
  display: inline-block;
  padding: 2px 10px;
}
/* inline-block above would beat the [hidden] attribute, same trap as the
   modal: the copied badge must be hidden explicitly */
.cacopied[hidden] { display: none; }

/* ----------------------------------------------------------- play-btn & play-modalinner */
.play-btn {
  display: inline-block;
  padding: 6px 20px;
  font: bold 16px "Courier New", Courier, monospace;
  color: #fff;
  background: #569c3c;
  border: 3px double #fff;
  box-shadow: 2px 2px 0px #000;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  image-rendering: pixelated;
  margin: 10px 0;
  outline: none;
}
.play-btn:hover {
  background: #67b849;
  box-shadow: 1px 1px 0px #000;
  transform: translate(1px, 1px);
}
.play-btn:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.play-modalinner {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
}