/* Caustic Bloom - styles, matching nilesgames.com.
   The page is mostly 1995-style HTML attributes. These few rules add the
   Win95 button and keep things from breaking on phones. */

/* Spelled out here as well as in <body bgcolor> so a host that wraps the page
   in its own template can't change the color or font. */
body { margin: 8px; background: #C0C0C0; color: #000; font: 16px "Times New Roman", Times, serif; }
/* Dividers: colors spelled out so every browser draws the same etched line.
   Left to its defaults, Firefox draws them much darker than Chrome. */
hr { border: 1px solid; border-color: #9A9A9A #EEEEEE #EEEEEE #9A9A9A; }
img { max-width: 100%; height: auto; }
table.banner { margin-top: 8px; max-width: 100%; }
/* The banner image is the page's main heading. */
table.banner h1 { margin: 0; line-height: 0; }
table.page { width: 640px; max-width: 100%; }
table.page img[src*="shot-"] { box-sizing: border-box; }

/* Feature rows: screenshot beside its title and text. */
table.feature h2 { margin-top: 0; }
table.feature td.pic img { display: block; }

/* Too narrow for side by side: stack each row with the picture on top. */
@media (max-width: 600px) {
  table.feature tr { display: flex; flex-direction: column; }
  table.feature td { display: block; width: auto; }
  table.feature td.pic { order: -1; text-align: center; }
  table.feature td.pic img { display: inline-block; width: 100%; }
}

/* Wishlist button: a Windows 95 push button. The bevel is the real
   1px-per-ring Win95 palette (white/#DFDFDF light edges, black/#808080
   shadow edges). */
.btn { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;
       padding: 6px 16px 5px 10px; font-weight: bold; font-size: 18px;
       background: #C0C0C0; color: #000; text-decoration: none; white-space: nowrap;
       -webkit-user-select: none; user-select: none;
       box-shadow: inset -1px -1px #000, inset 1px 1px #FFF,
                   inset -2px -2px #808080, inset 2px 2px #DFDFDF; }
/* :hover too, so dragging off a held button pops it back up like Win95. */
.btn:active:hover { padding: 7px 15px 4px 11px;
                    box-shadow: inset -1px -1px #FFF, inset 1px 1px #000,
                                inset -2px -2px #DFDFDF, inset 2px 2px #808080; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -6px; }
.btn img { image-rendering: pixelated; }

.counter { font-family: "Courier New", Courier, monospace; background: #000; color: #33FF33;
           padding: 1px 6px; letter-spacing: 2px; border: 2px inset #808080; }

/* Embedded video keeps a 16:9 shape at any width. */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; border: 2px inset #808080; margin-top: 16px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video + p { margin-top: 6px; }