/* y9 — dressed the way a browser game portal was dressed in 2008: a blue
   chrome bar, silver panels with hard 1px borders, dense thumbnails, small
   Tahoma text and nothing rounded that does not have to be. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #d9dee7 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23d9dee7'/%3E%3Crect width='2' height='2' fill='%23d3d8e2'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23d3d8e2'/%3E%3C/svg%3E");
  color: #222;
  font: 12px/1.6 Tahoma, "IBM Plex Sans Thai", Verdana, sans-serif;
}

a { color: #14458c; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 10px; }
.hidden { display: none !important; }

/* --- chrome ------------------------------------------------------------- */

.topbar {
  background: linear-gradient(180deg, #4d7fd6 0%, #2a58ad 48%, #23499a 52%, #1b3c85 100%);
  border-bottom: 1px solid #14315f;
}
.topbar-in { display: flex; align-items: center; gap: 12px; height: 54px; }

.logo { text-decoration: none; font: bold 30px/1 Tahoma, sans-serif; letter-spacing: -1px; }
.logo-y { color: #fff; }
.logo-9 { color: #ffb400; }

.tagline { color: #cfe0ff; font-size: 11px; }

.searchbox { margin-left: auto; display: flex; }
.searchbox input {
  width: 190px; padding: 4px 7px; font: 12px Tahoma, sans-serif;
  border: 1px solid #14315f; border-right: 0; background: #fff;
}
.searchbox button {
  padding: 4px 11px; font: bold 11px Tahoma, sans-serif; cursor: pointer;
  border: 1px solid #14315f;
  background: linear-gradient(180deg, #ffcf4d, #f0a000);
  color: #4a2c00;
}
.searchbox button:hover { background: linear-gradient(180deg, #ffdd77, #ffb417); }

.backlink { color: #cfe0ff; font-size: 11px; text-decoration: none; white-space: nowrap; }
.backlink:hover { text-decoration: underline; }

.navbar {
  background: linear-gradient(180deg, #f4f6fa, #dfe4ee);
  border-bottom: 1px solid #a8b2c4;
  padding: 5px 0;
}
.navbar .wrap { display: flex; flex-wrap: wrap; gap: 5px; }

.cat {
  padding: 3px 11px; cursor: pointer; font: 11px Tahoma, sans-serif;
  border: 1px solid #a8b2c4; background: #fff; color: #14458c;
}
.cat:hover { background: #eef3ff; }
.cat.on { background: #2a58ad; border-color: #14315f; color: #fff; font-weight: bold; }

.main { padding: 12px 10px 30px; }

/* --- panels ------------------------------------------------------------- */

.panel {
  background: #fff; border: 1px solid #a8b2c4; margin-bottom: 12px;
  box-shadow: 0 1px 0 #fff inset;
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #eef1f7, #dde2ec);
  border-bottom: 1px solid #a8b2c4;
}
.panel-head h1, .panel-head h2 { margin: 0; font-size: 13px; color: #14315f; }
.panel-head span { margin-left: auto; color: #667; font-size: 11px; }
.panel-head .btn { margin-left: auto; }

/* --- the shelf ---------------------------------------------------------- */

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px; padding: 10px;
}

.tile {
  display: block; text-align: center; text-decoration: none; color: #14458c;
  border: 1px solid #c3cad8; background: #fbfcfe; padding: 5px;
  cursor: pointer;
}
.tile:hover { border-color: #2a58ad; background: #eef3ff; }
.tile img { width: 100%; aspect-ratio: 1; display: block; border: 1px solid #c3cad8; }
.tile b { display: block; margin-top: 4px; font-size: 11.5px; }
.tile small { display: block; color: #778; font-size: 10px; }

.empty { padding: 18px 10px; color: #667; }

/* --- one game ----------------------------------------------------------- */

.crumbs { margin-bottom: 8px; font-size: 11px; color: #667; }

.cols { display: grid; grid-template-columns: 1fr 210px; gap: 12px; align-items: start; }
.side .panel { margin-bottom: 10px; }

.stage { background: #000; border-bottom: 1px solid #a8b2c4; }
.stage iframe {
  display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; background: #000;
}

.gamebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; background: #f4f6fa; border-bottom: 1px solid #e2e6ee;
}
.how { color: #556; font-size: 11px; }
.desc { margin: 0; padding: 9px 10px; color: #444; }

.btn {
  padding: 4px 11px; cursor: pointer; font: bold 11px Tahoma, sans-serif;
  border: 1px solid #a8b2c4;
  background: linear-gradient(180deg, #fff, #e6eaf2);
  color: #14315f;
}
.btn:hover { background: linear-gradient(180deg, #fff, #d6dded); }
.btn.small { padding: 2px 8px; }

.sidelist { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sidelist.row { flex-direction: row; flex-wrap: wrap; }

.sideitem {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid #c3cad8; background: #fbfcfe; padding: 4px;
  text-decoration: none; color: #14458c; font-size: 11.5px;
}
.sideitem:hover { border-color: #2a58ad; background: #eef3ff; }
.sideitem img { width: 40px; height: 40px; border: 1px solid #c3cad8; }
.sidelist.row .sideitem { width: 150px; }

.footer {
  border-top: 1px solid #a8b2c4;
  background: linear-gradient(180deg, #eef1f7, #dde2ec);
  padding: 12px 0; color: #556; font-size: 11px;
}

/* full screen is the game's, not the page's */
.stage:fullscreen { display: flex; align-items: center; justify-content: center; }
.stage:fullscreen iframe { width: 100%; height: 100%; aspect-ratio: auto; }

@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; }
  .topbar-in { flex-wrap: wrap; height: auto; padding: 8px 0; }
  .searchbox { margin-left: 0; order: 3; width: 100%; }
  .searchbox input { flex: 1; width: auto; }
  .backlink { margin-left: auto; }
}

/* --- the boards --------------------------------------------------------- */

.board { padding: 6px 8px; }
.board table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.board td { padding: 4px 5px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.board tr:last-child td { border-bottom: 0; }
.board tr.me { background: #fff6d9; }
.board .rk { width: 22px; color: #889; text-align: center; font-weight: bold; }
.board .rk.top { color: #c78a00; }
.board .who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.board .who img { width: 20px; height: 20px; border: 1px solid #c3cad8; }
.board .who .em { width: 20px; text-align: center; font-size: 14px; }
.board .who b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .pts { text-align: right; font-weight: bold; color: #14458c; white-space: nowrap; }
.board .note { padding: 8px 5px; color: #778; font-size: 11px; }
.board .note a { font-weight: bold; }
.board svg { width: 11px; height: 11px; vertical-align: -1px; }

/* the offer to share a result, shown only when there is one worth sharing */
.sharebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 10px;
  background: #fff8e1; border-bottom: 1px solid #e6d9a8;
}
.sharebar span { flex: 1; min-width: 140px; font-weight: bold; color: #5a4a10; }