/* ============================================================================
   THE TINY HAT CLUB SALES PAGE
   ============================================================================

   /club.html only. Everything here is scoped to body.club so it cannot leak
   into the rest of the site, which shares one calm 2002 theme in retro.css.
   This page is not calm. It is 1997, and it is selling something.

   RELATIONSHIP TO retro.css. That file still loads here and still does its
   job: wallpaper, Block Blueprint headings, the marquee, the hit counter and
   the loading bar all arrive for free, so the club page belongs to the same
   site. Everything below is the extra volume: WordArt, rules that scroll,
   blinking, and twenty adverts.

   HOW THE ADVERTS SCALE. A banner is 468x60 because that was the size, and
   468px does not fit on a phone. Each one is drawn at its true size and
   scaled by transform, with the factor in --adscale, set once by the page
   from the measured column width. The slot reserves the scaled height so the
   layout does not gap. Written this way rather than with zoom because zoom
   is newer than some of the phones Sam's players are holding.
   ========================================================================= */

body.club {
  margin: 0;
  padding-bottom: 2rem;
  font-family: var(--font-serif, 'Times New Roman', Times, serif);
  color: #000;
  display: block;              /* index.html centres with flex; this page scrolls */
  min-height: 0;
  text-align: left;
}

.club-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ---- Section furniture -------------------------------------------------- */

.c-sect {
  background: #FFFFCC;
  border: 3px ridge #000080;
  padding: 12px 14px;
  margin: 14px 0;
}

.c-sect h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: #000080;
  text-align: center;
  letter-spacing: 1px;
  border-bottom: 2px groove #C0C0C0;
  padding-bottom: 6px;
}

.c-sect p { margin: 0 0 10px; font-size: 1rem; line-height: 1.5; }
.c-sect p:last-child { margin-bottom: 0; }

.c-red { color: #CC0000; font-weight: bold; }
.c-blue { color: #000080; font-weight: bold; }
.c-big { font-size: 1.3em; }

/* The blink, which is the single most 1997 thing available. Kept to a
   half-second cycle and switched off entirely for anyone who has asked their
   machine to stop moving things, because a blinking page is a genuine problem
   for some people and the joke is not worth it. */
.c-blink { animation: c-blink 1s step-end infinite; }
@keyframes c-blink { 50% { opacity: 0; } }

.c-rainbow {
  background: linear-gradient(90deg, #f00, #f80, #ff0, #0c0, #08f, #61f, #f0f, #f00);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: c-slide 4s linear infinite;
}
@keyframes c-slide { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .c-blink, .c-rainbow, .cad-blink { animation: none !important; }
  .c-blink { opacity: 1; }
}

/* The animated divider. In 1997 this was a spinning barber pole GIF; here it
   is a striped bar that slides, which costs nothing and cannot fail to load. */
.c-rule {
  height: 10px;
  margin: 14px 0;
  border: 1px solid #808080;
  background: repeating-linear-gradient(135deg,
    #FF0000 0 10px, #FFFFFF 10px 20px, #0000FF 20px 30px, #FFFFFF 30px 40px);
  background-size: 56px 100%;
  animation: c-rule 1.6s linear infinite;
}
@keyframes c-rule { to { background-position: 56px 0; } }
@media (prefers-reduced-motion: reduce) { .c-rule { animation: none; } }

/* ---- The hero ----------------------------------------------------------- */

.c-hero {
  text-align: center;
  background: #000040 url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'>\
<rect width='60' height='60' fill='%23000040'/>\
<circle cx='9' cy='13' r='1.1' fill='%23ffffff'/>\
<circle cx='41' cy='7' r='0.8' fill='%23c8c8ff'/>\
<circle cx='27' cy='34' r='1.3' fill='%23ffffff'/>\
<circle cx='52' cy='45' r='0.9' fill='%23fff0a0'/>\
<circle cx='15' cy='51' r='0.8' fill='%23ffffff'/>\
</svg>") repeat;
  border: 4px ridge #FFD700;
  padding: 18px 12px 20px;
  margin-top: 10px;
}

/* The WordArt. A chunky face, a hard drop shadow, an outline and a gradient
   fill: exactly the four things every 1997 heading had, and the reason they
   all looked the same. */
.c-wordart {
  margin: 0;
  font-family: var(--font-display, 'BlockBlueprint', 'Impact', sans-serif);
  font-size: clamp(1.5rem, 7.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #FFF6B0 0%, #FFD700 45%, #C88A00 55%, #FFE98A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #4A2E00;
  filter: drop-shadow(3px 3px 0 #000);
}

.c-hero-sub {
  color: #FFFFFF;
  font-size: 1rem;
  margin: 10px 0 0;
  letter-spacing: 1px;
}

.c-hero-sub em { color: #FF6666; font-style: normal; font-weight: bold; }

.c-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.c-badge {
  font-family: var(--font-window, Arial, Helvetica, sans-serif);
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border: 2px outset #C0C0C0;
  background: #C0C0C0;
  color: #000080;
}

.c-badge--new { background: #FF0000; color: #FFFF00; border-color: #FF6666; }

/* ---- Buy buttons -------------------------------------------------------- */

/* ---- Winning the colour argument with retro.css -------------------------
   retro.css carries `html.retro a { color: var(--r-ink) !important }`, which
   paints every link on the site navy. That is right everywhere else and
   catastrophic here, because on this page the adverts and the badge wall ARE
   links: it put navy text on the black Netscape button, and navy on navy on
   the "Best viewed 800 x 600" one, which measured a contrast ratio of exactly
   1.00. Thirty-six elements, several of them literally invisible.

   Beating an !important needs an !important, but only ONE of them. Every
   anchor this page owns takes its colour from --cad-ink, so each badge and
   banner sets a custom property like any other value and the single rule
   below is the only place the argument is had. Children (.cbtn b, .cad-msg
   and so on) are not anchors, so their own colours were never affected and
   are left alone. */
body.club .cad,
body.club .cbtn,
body.club .c-buy,
body.club .c-tower { color: var(--cad-ink, #000) !important; }

/* The same argument, for the same reason, over paragraphs. retro.css has
   `html.retro p { color: #202020 !important }`, which is right on the silver
   chrome the rest of the site is made of and wrong on the one dark thing on
   this page: the starfield hero, where it painted the subtitle near-black on
   near-black. Only the elements that genuinely sit on a dark ground are
   listed; every other paragraph here is on cream or wallpaper and #202020 is
   a better colour for them than anything this file would have picked. */
body.club .c-hero-sub { color: #FFFFFF !important; }
body.club .c-hero-sub em { color: #FF8080 !important; }
body.club .c-secure { color: #006600 !important; }

/* ---- And the same argument again, over layout, on phones only -----------
   retro.css has a `@media (pointer: coarse)` block that gives EVERY bare
   anchor a 44px finger target:

     html.retro a:not(.btn):not(p a):not(.r-marquee a) {
       display: inline-block; min-height: 44px; line-height: 2.6; padding: 0 6px;
     }

   That is a good rule and it should stay. It exists because the site is full
   of anchors that are really buttons, and Sam plays on an iPad. But on THIS
   page the anchors are not buttons, they are 468x60 adverts and 88x31 badges
   drawn to the pixel, and the rule took them apart on every touch device:
   the banners stopped being flex containers and stacked into a column, the
   badge wall grew to 44px rows, and the BUY button lost its padding and its
   height. None of it showed on a desktop, which is exactly why it is written
   down here: the page looked finished on a mouse and was broken on a phone,
   and a phone in the street is the whole audience for this site.

   The adverts opt out. They are decoration that happens to be a link, every
   one of them points at an anchor further down this same page, and at
   roughly 42px tall on a phone a banner is a big enough target anyway. The
   BUY button keeps the 44px floor, because that one really is a button. */
body.club .cad {
  display: flex !important;
  min-height: 0 !important;
  line-height: normal !important;
  padding: 0 !important;
}

body.club .cbtn {
  display: flex !important;
  min-height: 0 !important;
  line-height: 1.05 !important;
  padding: 0 !important;
}

body.club .c-buy {
  display: block !important;
  line-height: normal !important;
  padding: 14px 10px !important;
}

body.club .c-tower {
  display: block !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  padding: 8px 4px !important;
}

.c-buy {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 14px auto 0;
  padding: 14px 10px;
  font-family: var(--font-display, 'BlockBlueprint', Arial, sans-serif);
  font-size: clamp(1rem, 4.4vw, 1.4rem);
  letter-spacing: 2px;
  --cad-ink: #FFFF00;
  background: linear-gradient(180deg, #FF3B3B 0%, #C40000 50%, #8B0000 100%);
  border: 4px outset #FF8888;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px 0 #000;
  box-sizing: border-box;
}

.c-buy:hover { background: linear-gradient(180deg, #FF6666 0%, #E00000 50%, #A00000 100%); }
.c-buy:active { border-style: inset; }

.c-buy small {
  display: block;
  font-family: var(--font-window, Arial, Helvetica, sans-serif);
  font-size: 11px;
  letter-spacing: 0;
  color: #FFE0E0;
  text-shadow: none;
  margin-top: 4px;
}

/* ---- The tier table ----------------------------------------------------- */

.c-tiers { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--font-window, Arial, Helvetica, sans-serif); }
.c-tiers th, .c-tiers td { border: 1px solid #808080; padding: 5px 4px; text-align: center; }
.c-tiers thead th { background: #000080; color: #FFF; font-size: 11px; }
.c-tiers tbody th { background: #E8E8F0; text-align: left; font-weight: normal; font-size: 12px; }
.c-tiers tbody tr:nth-child(even) td { background: #F4F4FA; }
.c-tiers .c-yes { color: #007700; font-weight: bold; }
.c-tiers .c-no { color: #BB0000; }
.c-tiers .c-price { background: #FFFFCC !important; font-weight: bold; color: #CC0000; }
.c-tiers .c-price s { color: #666; font-weight: normal; display: block; font-size: 11px; }
.c-tiers .c-best { background: #FFD700 !important; color: #000; }

.c-tier-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Lists, quotes, FAQ ------------------------------------------------- */

.c-perks { margin: 0; padding: 0; list-style: none; }

.c-perks li {
  position: relative;
  padding: 4px 0 4px 26px;
  font-size: 0.98rem;
  line-height: 1.45;
}

/* The animated bullet, which used to be a spinning red ball GIF. */
.c-perks li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FF9999, #CC0000 70%);
  animation: c-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes c-pulse { to { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .c-perks li::before { animation: none; } }

.c-quote {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #FFF;
  border-left: 5px solid #000080;
  font-size: 0.95rem;
  font-style: italic;
}

.c-quote b { display: block; font-style: normal; color: #000080; margin-top: 4px; font-size: 0.85rem; }

/* A burnt orange rather than the #FFA500 these always were: plain orange
   measured 1.97:1 on the white quote card, which is a row of stars you have to
   squint at. This is 3.98:1 and still reads as gold. */
.c-stars { color: #C86400; letter-spacing: 2px; font-style: normal; }

.c-faq dt { font-weight: bold; color: #000080; margin-top: 10px; }
.c-faq dd { margin: 3px 0 0; padding-left: 14px; font-size: 0.95rem; line-height: 1.5; }
.c-faq dt:first-child { margin-top: 0; }

/* ---- Checkout ----------------------------------------------------------- */

.c-checkout { background: #FFFFFF; border: 4px ridge #CC0000; }
.c-checkout h2 { color: #CC0000; }

.c-order {
  font-family: var(--font-code, 'Courier New', Courier, monospace);
  font-size: 13px;
  background: #F4F4F4;
  border: 2px inset #C0C0C0;
  padding: 10px;
  margin-bottom: 12px;
}

.c-order div { display: flex; justify-content: space-between; padding: 2px 0; }
.c-order .c-total { border-top: 1px solid #999; margin-top: 6px; padding-top: 6px; font-weight: bold; }

.c-verify-line {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.c-secure {
  text-align: center;
  font-family: var(--font-window, Arial, Helvetica, sans-serif);
  font-size: 11px;
  color: #007700;
}

/* ---- Footer ------------------------------------------------------------- */

.c-foot {
  text-align: center;
  font-family: var(--font-window, Arial, Helvetica, sans-serif);
  font-size: 11px;
  color: #333;
  line-height: 1.7;
  margin-top: 16px;
}

.c-foot a { color: #0000EE; }

.c-buttonwall {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin: 12px 0;
}

/* ---- The 88x31 buttons -------------------------------------------------- */

.cbtn {
  width: 88px;
  height: 31px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  font-family: var(--font-window, Arial, Helvetica, sans-serif);
  line-height: 1.05;
  text-decoration: none;
  overflow: hidden;
  background: #000;
  --cad-ink: #FFF;
}

.cbtn i { font-size: 7px; font-style: normal; letter-spacing: 0.3px; }
.cbtn b { font-size: 10px; letter-spacing: -0.2px; }

.cbtn--nn    { background: #000; --cad-ink: #FFF; }
.cbtn--nn b  { color: #00CC00; }
.cbtn--np    { background: #FFF; --cad-ink: #000; }
.cbtn--np b  { color: #000080; }
.cbtn--res   { background: #000080; --cad-ink: #FFF; }
.cbtn--res b { color: #FFFF00; }
.cbtn--y2k   { background: #FFFF00; --cad-ink: #000; }
.cbtn--y2k b { color: #CC0000; }
.cbtn--html  { background: #FFF; --cad-ink: #333; }
.cbtn--html b{ color: #CC0000; }
.cbtn--nf    { background: #C0C0C0; --cad-ink: #000; }
.cbtn--hat   { background: #12121A; --cad-ink: #FFF; }
.cbtn--hat b { color: #FFB200; }
.cbtn--ring  { background: #006600; --cad-ink: #FFF; }
.cbtn--ring b{ color: #FFFF00; }
.cbtn--ra    { background: #000; --cad-ink: #FFF; }
.cbtn--ra b  { color: #FF6600; }
.cbtn--gb    { background: #FFCCCC; --cad-ink: #660000; }
.cbtn--uc    { background: repeating-linear-gradient(45deg, #FFD700 0 6px, #000 6px 12px); --cad-ink: #FFF; }
.cbtn--uc i, .cbtn--uc b { background: #000; padding: 0 3px; }
.cbtn--pct   { background: #FFF; --cad-ink: #000; }
.cbtn--pct b { color: #008000; }
.cbtn--theft { background: #8B0000; --cad-ink: #FFF; }
.cbtn--modem { background: #4B0082; --cad-ink: #FFF; }
.cbtn--modem b { color: #00FFFF; }
.cbtn--hot   { background: #FF4500; --cad-ink: #FFF; }
.cbtn--harm  { background: #E8E8F0; --cad-ink: #000080; }

/* ============================================================================
   THE 468x60 BANNERS
   ============================================================================
   One block per genre, in the order they are defined in club-ads.js.
   ========================================================================= */

.cad-slot {
  position: relative;
  width: 100%;
  max-width: 468px;
  height: calc(60px * var(--adscale, 1) + 13px);
  margin: 10px auto;
  overflow: hidden;
}

.cad-label {
  display: block;
  font-family: var(--font-window, Arial, Helvetica, sans-serif);
  font-size: 8px;
  letter-spacing: 2px;
  color: #777;
  text-align: center;
  height: 13px;
  line-height: 13px;
}

.cad {
  position: absolute;
  top: 13px;
  left: 0;
  width: 468px;
  height: 60px;
  display: flex;
  align-items: stretch;
  border: 1px solid #000;
  box-sizing: border-box;
  font-family: var(--font-window, Arial, Helvetica, sans-serif);
  font-size: 12px;
  text-decoration: none;
  --cad-ink: #000;
  overflow: hidden;
  transform: scale(var(--adscale, 1));
  transform-origin: top left;
}

.cad * { box-sizing: border-box; }

/* NOTHING IN A BANNER WRAPS BY ACCIDENT. A banner is a hard 60px box, so one
   line of text becoming two does not make the box taller, it pushes whatever
   is under it out of the bottom: "ADELAIDE MAGIC THEATRE" wrapped by four
   pixels and shoved the tagline through the floor of the advert.
   The banners that want two lines say so with a <br>, which nowrap still
   honours. This also covers the phones that have no Georgia and substitute a
   wider serif, which is most of them, and which no amount of testing on this
   machine would ever have shown. Overflow is hidden, so the failure mode is
   now a clipped right edge rather than a collapsed layout. */
.cad, .cad * { white-space: nowrap; }

/* ---- Shared parts ------------------------------------------------------- */

.cad-tb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 17px;
  padding: 0 2px 0 4px;
  background: linear-gradient(90deg, #000080 0%, #1084D0 100%);
  color: #FFF;
  font-size: 11px;
  font-weight: bold;
  flex: 0 0 17px;
}

.cad-tb-btns { display: flex; gap: 2px; }

.cad-tb-btns i {
  width: 14px;
  height: 12px;
  background: #C0C0C0;
  border: 1px outset #FFF;
  color: #000;
  font-style: normal;
  font-size: 8px;
  font-weight: bold;
  line-height: 10px;
  text-align: center;
}

.cad-x { width: 22px; height: 22px; flex: 0 0 22px; }

.cad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 21px;
  padding: 0 8px;
  background: #C0C0C0;
  border: 2px outset #FFF;
  font-size: 11px;
  color: #000;
  flex: 0 0 auto;
}

.cad-btn--hot { border-color: #FFD700; background: #D4D0C8; font-weight: bold; }
.cad-btn--focus { outline: 2px solid #FF6600; outline-offset: 1px; }
.cad-btn--small { min-width: 60px; height: 18px; font-size: 10px; }
.cad-btn--under { align-self: center; margin: 0 auto 6px; }
.cad-btn--red { background: #CC0000; color: #FFF; border-color: #FF8888; font-weight: bold; min-width: 58px; height: 17px; }
.cad-btn--blue { background: #0000CC; color: #FFF; border-color: #6666FF; font-weight: bold; min-width: 96px; height: 26px; font-size: 14px; }
.cad-btn--wc { min-width: 58px; height: 15px; font-size: 9px; align-self: flex-end; margin: 1px 3px 0 auto; }

/* The vertical CLICK HERE tab welded to the right edge. Two of the twenty
   scanned banners had one, which for a sample of twenty is a movement. */
.cad-tab {
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex: 0 0 16px;
  background: #0000CC;
  color: #FFF;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-left: auto;
}

/* ---- 1-4: the Windows dialogs ------------------------------------------- */

.cad--dialog { flex-direction: column; background: #C0C0C0; }

.cad-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  padding: 0 8px;
}

.cad-body--center { justify-content: center; text-align: center; }
.cad-msg { flex: 1 1 auto; font-size: 12px; }
.cad--virus .cad-tb { background: linear-gradient(90deg, #000 0%, #7A0000 100%); }
.cad--warn .cad-tb { background: linear-gradient(90deg, #000080 0%, #1084D0 100%); }
/* The only dialog whose button sits UNDER the message rather than beside it,
   which is 17px of title bar plus an icon plus a button in a box 60px tall.
   At the shared sizes that came to 72px and the OK was sliced in half by the
   banner's overflow, so this variant runs everything a few pixels smaller. */
.cad--error { border-color: #000; }
.cad--error .cad-body { flex: 0 0 auto; padding: 2px 8px 0; gap: 6px; }
.cad--error .cad-x { width: 16px; height: 16px; flex: 0 0 16px; }
.cad--error .cad-msg { font-size: 11px; }
.cad--error .cad-btn--under { height: 17px; min-width: 60px; margin-bottom: 3px; }

/* ---- 5: the browser toolbar --------------------------------------------- */

.cad--browser { flex-direction: column; background: #C0C0C0; }

.cad-tools { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; padding: 0 4px; }

.cad-tools i {
  font-style: normal;
  font-size: 10px;
  padding: 3px 5px;
  border: 1px solid transparent;
}

.cad-tools i:hover { border: 1px outset #FFF; }

.cad-addr { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 3px; }
.cad-addr em { font-style: normal; font-size: 10px; }

.cad-url {
  flex: 1 1 auto;
  height: 18px;
  line-height: 16px;
  padding: 0 4px;
  background: #FFF;
  border: 2px inset #C0C0C0;
  font-size: 10px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
}

.cad-go {
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 18px;
  background: #C0C0C0;
  border: 1px outset #FFF;
  font-size: 10px;
  font-weight: bold;
  color: #007700;
}

/* ---- 6: hats on net ------------------------------------------------------ */

.cad--casino { background: linear-gradient(180deg, #2A0000 0%, #6A1A00 50%, #2A0000 100%); --cad-ink: #FFD700; }

.cad-casino-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  flex: 0 0 122px;
  border-right: 1px solid #FFD700;
}

.cad-casino-name b {
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-size: 21px;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #FFF3A0, #FFD700 50%, #A87400);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cad-casino-name em { font-style: normal; font-size: 11px; letter-spacing: 3px; color: #FFAA33; }

.cad-radios {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
  gap: 1px 6px;
  padding: 0 8px;
}

.cad-radio { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #FFEE99; text-decoration: underline; }

.cad-radio i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid #666;
}

.cad-yesno {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 78px;
  background: #C0C0C0;
  color: #000;
  font-size: 10px;
  font-weight: bold;
}

.cad-yesno span { display: flex; gap: 3px; }

.cad-yesno i {
  font-style: normal;
  width: 30px;
  text-align: center;
  background: #C0C0C0;
  border: 2px outset #FFF;
  font-size: 10px;
  font-weight: normal;
}

/* ---- 7: windows hats ----------------------------------------------------- */

.cad--wincasino { background: #000; }

.cad-wc-left {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6px;
  text-align: center;
}

.cad-wc-left b {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 19px;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #FFF3A0, #E8B000 60%, #8A5E00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cad-wc-left em { font-family: var(--font-serif, Georgia, serif); font-style: italic; font-size: 15px; color: #FFD700; margin-top: -3px; }
.cad-wc-left span { font-size: 8px; color: #FFF; letter-spacing: 0.2px; margin-top: 2px; }

.cad-wc-right { flex: 1 1 auto; display: flex; flex-direction: column; background: #C0C0C0; }
.cad-wc-right .cad-tb { background: linear-gradient(90deg, #000080 0%, #1084D0 100%); }

/* Three columns, not two. Six checkboxes in two columns is three rows, and
   three rows plus a title bar plus the Click Here came to 72px inside a 60px
   banner, so the button was sliced off at the ankles. Three columns is two
   rows and it fits with room to spare. */
.cad-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 5px; padding: 2px 4px 0; }
.cad-check { display: flex; align-items: center; gap: 2px; font-size: 8px; line-height: 1.3; color: #000; }
.cad-check i { width: 7px; height: 7px; flex: 0 0 7px; background: #FFF; border: 1px inset #808080; }

/* ---- 8: hat wheels ------------------------------------------------------- */

.cad--slots { background: linear-gradient(90deg, #000 0%, #330000 60%, #000 100%); }

.cad-reels { display: flex; align-items: center; gap: 3px; padding: 0 8px; flex: 0 0 auto; }

.cad-reels i {
  width: 30px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  border: 2px inset #C0C0C0;
  font-size: 18px;
  font-style: normal;
}

.cad-slots-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 15px;
  font-weight: bold;
  color: #FF2222;
  text-shadow: 1px 1px 0 #660000;
  line-height: 1.15;
}

.cad-slots-text em { font-style: normal; color: #FFD700; }

/* ---- 9: we pay you ------------------------------------------------------- */

.cad--pay { background: #1A73E8; }

.cad-pay-left {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #F0F0F4;
}

.cad-pay-left b { font-size: 17px; color: #333; }
.cad-pay-left b em { font-style: normal; font-weight: bold; color: #000; }

.cad-pay-right {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-left: 18px;
  color: #FFF;
  font-size: 19px;
}

/* ---- 10: ten million ----------------------------------------------------- */

.cad--pledge { background: #FFF; }

.cad-pledge {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 20px;
  font-weight: bold;
  color: #333399;
  gap: 6px;
}

.cad-pledge em { font-style: normal; color: #E05500; }   /* 3.8:1 on the white banner */

/* ---- 11: hat ribbon ------------------------------------------------------ */

.cad--ribbon { background: linear-gradient(180deg, #FFF 0%, #DDE4EC 100%); }

.cad-printer {
  flex: 0 0 74px;
  margin: 6px 4px 6px 6px;
  background:
    linear-gradient(#8A8A94, #8A8A94) 4px 8px / 64px 22px no-repeat,
    linear-gradient(#D8D8E0, #D8D8E0) 10px 2px / 52px 8px no-repeat,
    linear-gradient(#5A5A64, #5A5A64) 14px 30px / 44px 12px no-repeat;
}

.cad-ribbon-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  color: #CC0000;
  line-height: 1.3;
}

.cad-ribbon-text em { font-style: normal; font-size: 16px; }

/* ---- 12: the hat 1 ------------------------------------------------------- */

.cad--search { background: #FFF; }

.cad-search-left {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #CCC;
}

.cad-search-left b { font-family: var(--font-serif, 'Times New Roman', serif); font-size: 25px; display: flex; align-items: center; gap: 4px; }

.cad-search-left b i {
  font-style: normal;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #FF7777, #BB0000 70%);
  color: #FFF;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.cad-search-left em { font-style: normal; font-size: 9px; color: #666; letter-spacing: 1px; }

.cad-search-right { flex: 1 1 auto; display: flex; flex-direction: column; background: #FFCC00; }

.cad-search-cry {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  line-height: 1.15;
}

.cad-search-fine {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 3px 0 8px;
  height: 19px;
  background: #FFF;
  font-size: 9px;
  font-weight: bold;
  border-top: 1px solid #000;
}

/* ---- 13: hat driver guide ------------------------------------------------ */

.cad--driver { flex-direction: column; background: #FFFFCC; }

.cad-driver-top {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  height: 21px;
  background: #000080;
  color: #FFFF66;
  font-size: 12px;
  font-weight: bold;
}

.cad-driver-top em { font-style: normal; color: #FFF; }

.cad-driver-bottom { display: flex; align-items: center; flex: 1 1 auto; padding-left: 8px; }
.cad-driver-bottom b { flex: 1 1 auto; font-family: var(--font-serif, Georgia, serif); font-size: 21px; color: #000080; }

/* ---- 14: free hat hosting ------------------------------------------------ */

.cad--hosting { background: #F4F4F4; }

.cad-host-left {
  flex: 0 0 154px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 8px;
  border-right: 1px solid #CCC;
}

.cad-host-left b { font-size: 19px; color: #000; }
.cad-host-left em { font-style: normal; font-size: 7px; letter-spacing: 1.2px; color: #555; }

.cad-host-right {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-style: italic;
  font-weight: bold;
  color: #222;
  line-height: 1.1;
  text-align: center;
}

.cad-host-right b { color: #CC0000; font-style: normal; }

/* ---- 15: sam's corner ---------------------------------------------------- */

.cad--music { background: #000033; }

.cad-music-left {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
}

.cad-music-left b { font-family: var(--font-serif, Georgia, serif); font-size: 18px; color: #FF9900; }
.cad-music-left em { font-style: normal; font-size: 12px; color: #6699FF; }

.cad-music-vis {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 8px 10px 8px 0;
  padding: 4px;
  background: #000;
  border: 1px inset #333366;
}

.cad-music-vis i { flex: 1 1 auto; background: linear-gradient(180deg, #FF0000, #FFFF00, #00FF00); animation: c-eq 0.7s ease-in-out infinite alternate; }
.cad-music-vis i:nth-child(2n) { animation-duration: 0.5s; }
.cad-music-vis i:nth-child(3n) { animation-duration: 0.9s; }

@keyframes c-eq { from { height: 15%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .cad-music-vis i { animation: none; height: 60%; } }

/* ---- 16: pretty tiny hats ------------------------------------------------ */

.cad--fan { background: linear-gradient(90deg, #FF8800 0%, #FF4400 60%, #CC2200 100%); }

.cad-fan-face {
  flex: 0 0 68px;
  margin: 4px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 62%, #F0C8A0 0 22px, transparent 22px),
    radial-gradient(circle at 50% 30%, #6A4520 0 26px, transparent 26px),
    linear-gradient(#FFD9A0, #E8B87A);
}

.cad-fan-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #FFF;
  font-size: 17px;
  line-height: 1.1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cad-fan-text b { font-size: 24px; font-weight: normal; }
.cad-fan-text b em { font-style: normal; font-weight: bold; color: #333; }

/* ---- 17: hat gardens ----------------------------------------------------- */

.cad--garden { background: linear-gradient(180deg, #FFF 0%, #F0F6E8 100%); }

.cad-daisies { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; padding-bottom: 2px; }

.cad-daisies i {
  width: 16px;
  height: 16px;
  background:
    radial-gradient(circle at 50% 50%, #FFCC00 0 4px, transparent 4px),
    radial-gradient(circle at 50% 12%, #FFF 0 4px, transparent 4px),
    radial-gradient(circle at 50% 88%, #FFF 0 4px, transparent 4px),
    radial-gradient(circle at 12% 50%, #FFF 0 4px, transparent 4px),
    radial-gradient(circle at 88% 50%, #FFF 0 4px, transparent 4px);
  filter: drop-shadow(0 0 1px #999);
}

.cad-daisies i:nth-child(even) { transform: translateY(-14px) scale(1.3); }

.cad-garden-text {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 20px;
  font-style: italic;
  color: #336633;
  text-shadow: 0 0 6px #FFF, 0 0 6px #FFF;
}

/* ---- 18: your ad here ---------------------------------------------------- */

.cad--arrows { background: #0000CC; align-items: center; }

.cad-arrow { width: 78px; height: 40px; flex: 0 0 78px; background: #FFF; }
.cad-arrow--l { clip-path: polygon(0 22%, 62% 22%, 62% 0, 100% 50%, 62% 100%, 62% 78%, 0 78%); }
.cad-arrow--r { clip-path: polygon(100% 22%, 38% 22%, 38% 0, 0 50%, 38% 100%, 38% 78%, 100% 78%); }

.cad-arrows-text {
  flex: 1 1 auto;
  text-align: center;
  color: #FFF;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* ---- 19: main menu ------------------------------------------------------- */

.cad--menu { background: #C0C0C0; gap: 4px; padding: 4px; }

.cad-pane { flex: 1 1 auto; background: #FFF; border: 2px inset #C0C0C0; }
.cad-side { flex: 0 0 152px; display: flex; flex-direction: column; gap: 3px; }
.cad-pane--small { flex: 1 1 auto; }

.cad-mainmenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 17px;
  padding: 0 2px 0 6px;
  background: #C0C0C0;
  border: 1px outset #FFF;
  font-size: 10px;
  font-weight: bold;
  color: #660000;
}

.cad-mainmenu em { font-style: normal; background: #008000; color: #FFF; padding: 0 4px; }

/* ---- 20: the web ring ---------------------------------------------------- */

.cad--ring { background: linear-gradient(180deg, #006600 0%, #003300 100%); }

.cad-ring-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
  color: #FFF;
}

.cad-ring-text b { font-size: 17px; color: #FFFF66; letter-spacing: 1px; }
.cad-ring-text em { font-style: normal; font-size: 11px; }

.cad-ring-nav { display: flex; align-items: center; gap: 3px; padding-right: 8px; }

.cad-ring-nav i {
  font-style: normal;
  font-size: 10px;
  padding: 3px 6px;
  background: #C0C0C0;
  border: 2px outset #FFF;
  color: #000;
}

/* ---- 21: the real one ---------------------------------------------------- */
/* Adelaide Magic Theatre, built to the recipe in public/js/ads.js: solid
   ground, hard border, three text sizes, a repeated little picture, and a
   CLICK HERE of its own on the right. */

.cad--amt { background: #FFD400; }

.cad-amt-left { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-left: 8px; }
/* Explicit line heights: Georgia at 19px carries a tall default line box, and
   the three lines together spilled a pixel past the bottom of the banner. */
.cad-amt-kicker { font-size: 9px; line-height: 1.2; letter-spacing: 1.5px; color: #6A4A00; }
.cad-amt-name { font-family: var(--font-serif, Georgia, serif); font-size: 17px; line-height: 1.15; font-weight: bold; color: #000; letter-spacing: 0.3px; }
.cad-amt-tag { font-size: 10px; line-height: 1.2; color: #3A2A00; }

.cad-amt-hats { display: flex; align-items: center; gap: 4px; padding: 0 8px; }

.cad-amt-hats i {
  width: 13px;
  height: 15px;
  background:
    linear-gradient(#12121A, #12121A) 0 11px / 13px 3px no-repeat,
    linear-gradient(#12121A, #12121A) 3px 0 / 7px 11px no-repeat;
}

.cad-amt-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 62px;
  background: #CC0000;
  color: #FFF;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 1.05;
}

/* ============================================================================
   THE SIDE RAILS
   ============================================================================
   Only on a screen wide enough that the 620px column is swimming in space.
   Below that they are not there at all, rather than squeezed: a phone has no
   margins to fill.
   ========================================================================= */

.c-rail { display: none; }

@media (min-width: 1120px) {
  .c-rail {
    display: block;
    position: fixed;
    top: 120px;
    bottom: 0;
    width: 130px;
    overflow: hidden;
    padding: 0 6px;
    text-align: center;
  }

  .c-rail--l { left: 0; }
  .c-rail--r { right: 0; }

  .c-rail .cbtn { margin: 0 auto 4px; }

  .c-tower {
    display: block;
    width: 118px;
    padding: 8px 4px;
    margin: 0 auto 8px;
    background: linear-gradient(180deg, #FF0000, #FF8800);
    border: 2px outset #FFAAAA;
    --cad-ink: #FFF;
    font-family: var(--font-window, Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.3;
  }

  .c-tower em { display: block; font-style: normal; font-size: 9px; font-weight: normal; }

  .c-tower--free  { background: linear-gradient(180deg, #0066CC, #00AAFF); border-color: #AADDFF; }
  .c-tower--click { background: linear-gradient(180deg, #008000, #00CC00); border-color: #AAFFAA; }
  .c-tower--win   { background: linear-gradient(180deg, #6A00A0, #B000FF); border-color: #E0AAFF; }
}