/* Candystood launcher: a homemade 1997-ish page. Carpet tile, a little pixel logo, and three
   bevelled tiles of real gameplay. System fonts only; pixel art scaled by whole numbers. */

:root {
  --silver: #c0c0c0;
  --light: #ffffff;
  --hi: #dfdfdf;
  --shade: #808080;
  --dark: #000000;
  --navy: #000080;
  --body: Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: #0a0616 url(carpet.png) 0 0 / 128px 128px repeat;
  image-rendering: pixelated; /* keeps the carpet crisp; text is unaffected */
  color: #fff;
  font: 13px/1.4 var(--body);
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* ---------- the logo: a little GIF-looking bitmap ---------- */
.head { text-align: center; }
.logo { margin: 0; line-height: 0; }
.logo-gif { display: none; image-rendering: pixelated; }
.has-logo .logo-gif { display: inline-block; }
.has-logo .logo-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.logo-text { font: bold 40px/1 var(--body); color: #ffcc00; text-shadow: 3px 3px 0 #000; }
.tag {
  display: inline-block;
  margin: 8px 0 0;
  padding: 1px 6px;
  background: #000;
  font: italic bold 15px/1.2 "Times New Roman", Times, serif;
  color: #ffff66;
  text-shadow: 1px 1px 0 #000;
}

/* ---------- the games: a plain <table border="4" cellspacing="6" cellpadding="4"> ---------- */
/* the two-tone 3D table border browsers drew around a bordered table, outset outside and
   inset around every cell, with the page background showing through the cell spacing */
table.games {
  border: 3px solid;
  border-color: #e0e0e0 #808080 #808080 #e0e0e0;
  border-spacing: 6px;
  margin: 0 auto;
}
table.games td {
  padding: 4px;
  border: 1px solid;
  border-color: #808080 #e0e0e0 #e0e0e0 #808080;
  background: #ffffff;
  text-align: center;
  vertical-align: top;
}
/* a linked image: the 2px link-coloured border, purple once visited */
a.pic {
  display: inline-block;
  line-height: 0;
  border: 2px solid #0000ee;
  position: relative;
}
a.pic:visited { border-color: #551a8b; }
a.pic:active { border-color: #ff0000; }
a.pic canvas {
  display: block;
  width: 384px;   /* the strips are 384 px wide: one image pixel per CSS pixel, */
  height: auto;   /* scaled by whole numbers (and kept crisp) on HiDPI screens */
  aspect-ratio: 384 / 240;
  image-rendering: pixelated;
  background: #000;
}
a.cap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0 2px;
  font: bold 15px/1.2 var(--body);
  color: #0000ee;
}
a.cap:visited { color: #551a8b; }
a.cap:hover, a.cap:active { color: #ff0000; }
.icon { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
a:focus { outline: none; }
a.pic:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

/* coming soon: under construction, and not a link */
a.is-soon { cursor: default; }
a.pic.is-soon { border-color: #808080; }
a.pic.is-soon canvas { filter: saturate(.5) brightness(.8); }
a.pic.is-soon::after {
  content: "UNDER CONSTRUCTION";
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  padding: 2px 0 1px;
  line-height: 1.2;
  font: bold 14px/1.2 var(--body);
  letter-spacing: 1px;
  color: #000;
  background: #ffcc00;
  border-block: 6px solid;
  border-image: repeating-linear-gradient(-45deg, #000 0 6px, #ffcc00 6px 12px) 6;
}
a.cap.is-soon { color: #808080; text-decoration: none; }

/* ---------- footer ---------- */
.foot {
  text-align: center;
  padding: 8px 12px 6px;
  background: #000;
  border: 1px solid #333;
}
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.b88 {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 88px;
  height: 31px;
  font: bold 8px/1.15 var(--body);
  text-transform: uppercase;
  text-align: center;
  border: 1px solid #000;
}
.b88 b { display: block; font-size: 9px; }
.b88-any { background: #fff; color: #000080; }
.b88-plug { background: #000; color: #ffcc00; box-shadow: inset 0 0 0 2px #ffcc00; }
.b88-plug b { color: #fff; }
.counter-wrap { font: bold 11px/1 var(--body); color: #ccc; display: inline-flex; align-items: center; gap: 6px; }
.counter {
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  background: #000;
  border: 2px solid;
  border-color: var(--shade) var(--light) var(--light) var(--shade);
}
.counter span {
  width: 11px;
  font: bold 13px/1.2 "Courier New", Courier, monospace;
  color: #33ff33;
  background: #102010;
  text-align: center;
}
.note { margin: 8px 0 0; font-size: 10px; color: #b8b0d8; }

/* ---------- sizes ---------- */
@media (max-width: 1259px) {
  a.pic canvas { width: 288px; image-rendering: auto; }
}
/* too narrow for three across: the cells stack, like a table squashed by a small window */
@media (max-width: 959px) {
  .page { gap: 16px; }
  table.games, table.games tbody, table.games tr { display: block; }
  table.games { padding: 6px; width: fit-content; max-width: 100%; }
  table.games td { display: block; }
  table.games td + td { margin-top: 6px; }
}
@media (max-width: 480px) {
  table.games { width: 100%; }
  a.pic { display: block; }
  a.pic canvas { width: 100%; }
  table.games br { display: none; }
}
/* phones on their side: three small cells across */
@media (max-height: 500px) and (orientation: landscape) {
  .page { justify-content: center; gap: 10px; padding-top: 10px; }
  table.games, table.games tbody { display: table; }
  table.games tr { display: table-row; }
  table.games td { display: table-cell; width: 33%; }
  table.games td + td { margin-top: 0; }
  table.games { width: 100%; padding: 0; table-layout: fixed; }
  a.pic { display: block; }
  a.pic canvas { width: 100%; image-rendering: auto; }
  table.games br { display: none; }
  a.cap { font-size: 13px; margin-top: 3px; }
  .tag { display: none; }
  .note { margin-top: 6px; }
}

/* ---------- rollovers, in the spirit of a Flash-era game portal ---------- */
/* hovering a game makes its icon hop and its title wobble, in choppy GIF-like steps */
table.games td:has(a:not(.is-soon)):hover .icon,
table.games td:has(a.pic:not(.is-soon):focus-visible) .icon { animation: hop .5s steps(4, end) infinite; }
table.games td:has(a:not(.is-soon)):hover .name,
table.games td:has(a.pic:not(.is-soon):focus-visible) .name { display: inline-block; animation: wobble .6s steps(3, end) infinite; }
table.games td:has(a.pic:not(.is-soon)):hover a.pic { border-color: #ff0000; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 33% { transform: rotate(-4deg); } 66% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
  table.games .icon, table.games .name { animation: none !important; }
}

/* ---------- the NEW! starburst stuck on the corner of the header ---------- */
.head { position: relative; }
.burst {
  position: absolute; left: calc(100% + 2px); top: -34px;
  width: 128px; height: 128px; margin: 0;
  display: grid; place-items: center;
  transform: rotate(12deg);
  animation: burst-pulse 1s steps(2, jump-none) infinite;
  pointer-events: none;
}
.burst::before, .burst::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(50.0% 0.0%, 56.4% 9.5%, 65.5% 2.4%, 68.6% 13.5%, 79.4% 9.5%, 79.0% 21.0%, 90.5% 20.6%, 86.5% 31.4%, 97.6% 34.5%, 90.5% 43.6%, 100.0% 50.0%, 90.5% 56.4%, 97.6% 65.5%, 86.5% 68.6%, 90.5% 79.4%, 79.0% 79.0%, 79.4% 90.5%, 68.6% 86.5%, 65.5% 97.6%, 56.4% 90.5%, 50.0% 100.0%, 43.6% 90.5%, 34.5% 97.6%, 31.4% 86.5%, 20.6% 90.5%, 21.0% 79.0%, 9.5% 79.4%, 13.5% 68.6%, 2.4% 65.5%, 9.5% 56.4%, 0.0% 50.0%, 9.5% 43.6%, 2.4% 34.5%, 13.5% 31.4%, 9.5% 20.6%, 21.0% 21.0%, 20.6% 9.5%, 31.4% 13.5%, 34.5% 2.4%, 43.6% 9.5%);
}
.burst::before { background: #000; transform: translate(3px, 3px); }
.burst::after { background: #ffff00; inset: 3px; box-shadow: inset 0 0 0 2px #ff0000; }
.burst span {
  position: relative; z-index: 1; width: 84px;
  font: bold 12px/1.15 var(--body); color: #cc0000; text-align: center;
}
.burst b { display: block; font: bold 20px/1 var(--body); color: #ff0000; letter-spacing: 1px; }
@keyframes burst-pulse { 0% { transform: rotate(12deg) scale(1); } 100% { transform: rotate(12deg) scale(1.07); } }
/* no room beside the logo: under the tagline instead */
@media (max-width: 760px) {
  .burst { position: relative; left: auto; top: auto; margin: 6px auto -8px; width: 112px; height: 112px; }
  .burst span { width: 74px; font-size: 11px; }
  .burst b { font-size: 17px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .burst { width: 80px; height: 80px; top: -14px; left: calc(100% + 6px); }
  .burst span { width: 54px; font-size: 8px; }
  .burst b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .burst { animation: none; }
}