/* THE CAPTCHA, DRESSED AS RECAPTCHA
   ==========================================================================

   Ported from rj1's `infinite-recaptcha` and then rebuilt in two places.

   The original lays the nine tiles out as a 400px <table> with 128px cells,
   which is the right shape for a desktop and thirty pixels too wide for a
   phone. Tiny Hats is played on a phone in the street, so the tiles are a
   CSS grid that shrinks, and the panel is a centred overlay rather than a
   popup pinned to the checkbox. Modern reCAPTCHA does exactly that on a
   narrow screen, so nothing about the disguise is lost.

   THIS FILE IS DELIBERATELY OUTSIDE THE 2002 THEME. Everything else on
   club.html is 1997 GeoCities; this one component has to look like it was
   pasted in from 2014, because that is the joke: the only modern thing on the
   page is the bit that stops you.

   KEEPING THE THEME OUT, which took two goes. retro.css names none of these
   classes, so the first version assumed the component was safe. It was not:
   retro.css styles bare `button` elements, and a captcha is nothing but bare
   buttons. On a touch device it was worse again, because of this:

     @media (pointer: coarse) {
       html.retro button { min-height: 44px !important;
                           display: inline-flex !important;
                           padding: 10px 16px !important; }
     }

   plus a bevel, square corners and a silver face from the rules above it. On
   a phone the "I'm not a robot" checkbox came out 35x44 with a Windows 98
   inset border, and the blue Verify button came out grey and rectangular.
   The disguise was gone on exactly the devices the site is played on.

   So the reset below is scoped to the two roots and every control is restated
   at TWO classes of specificity (`.cc-box .cc-cb`, not `.cc-cb`), because
   `html.retro button` is (0,1,2) with !important and a single class with
   !important still loses to it. Anything added to this panel later needs the
   same treatment; a bare `button` in here will be silver by morning.
   ========================================================================= */

/* Every control listed by BOTH its root and its own class. `.cc-box button`
   looks like it should be enough and is not: it scores (0,1,1) against
   `html.retro button`'s (0,1,2), so the 44px floor and the Windows bevel came
   straight back through it and the checkbox stayed a grey lozenge. Two
   classes is the bar on this page. */
.cc-box .cc-cb,
.cc-backdrop .cc-verify,
.cc-backdrop .cc-icon,
.cc-backdrop .cc-tile,
.cc-backdrop .cc-close {
  min-height: 0 !important;
  line-height: normal !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--font-window, Roboto, Helvetica, Arial, sans-serif) !important;
}

.cc-box {
  font-family: var(--font-window, Roboto, Helvetica, Arial, sans-serif);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 302px;
  max-width: 100%;
  height: 76px;
  padding: 0 12px;
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.cc-cbwrap { position: relative; width: 28px; height: 28px; flex: 0 0 28px; }

.cc-cb {
  width: 28px;
  height: 28px;
  background: #fff;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: opacity 300ms, transform 300ms;
}

.cc-cb:hover { border-color: #b2b2b2; }
.cc-cb--busy { opacity: 0; transform: scale(0.2); }

/* The spinner: a ring with one quarter missing, turning. The original ships
   a loading.gif; a border trick weighs nothing and never 404s. */
.cc-spin {
  position: absolute;
  inset: 0;
  border: 3px solid #dcdcdc;
  border-top-color: #4285f4;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}

.cc-spin--on { opacity: 1; animation: cc-turn 900ms linear infinite; }

@keyframes cc-turn { to { transform: rotate(360deg); } }

.cc-label { font-size: 14px; color: #000; flex: 1 1 auto; }

.cc-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #555;
  text-align: center;
}

.cc-logo { width: 32px; height: 32px; }
.cc-brand b { font-size: 10px; font-weight: 400; }
.cc-brand i { font-size: 8px; font-style: normal; }

/* ---- The challenge ------------------------------------------------------ */

.cc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-family: var(--font-window, Roboto, Helvetica, Arial, sans-serif);
}

.cc-backdrop[hidden] { display: none; }

/* The page behind must not scroll while the panel is up: on a phone, dragging
   the grid to select a tile otherwise scrolls the sales page underneath. */
body.cc-open { overflow: hidden; }

.cc-panel {
  width: 400px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #cecece;
  box-shadow: 5px 6px 12px -3px rgba(0, 0, 0, 0.35);
  padding: 8px;
  box-sizing: border-box;
}

.cc-head {
  background: #1a73e8;
  color: #fff;
  padding: 14px 16px 20px;
}

.cc-head-small { display: block; font-size: 14px; }
.cc-head-big { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; }
/* The prompts run long once they stop making sense ("the feeling of nearly
   finishing something"), and a fixed height would clip them. */
.cc-head-big { margin: 2px 0; }

.cc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 5px;
}

.cc-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: #dfdfdf;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.cc-tile svg { width: 100%; height: 100%; display: block; transition: transform 200ms; }

/* Selected tiles shrink behind a white gutter, which is the reCAPTCHA tell. */
.cc-tile--on svg { transform: scale(0.82); }
.cc-tile--on { background: #fff; }

.cc-tile--on::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231a73e8' stroke-width='3' \
stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat;
}

.cc-err {
  visibility: hidden;
  color: #d14836;
  font-size: 13px;
  text-align: center;
  padding: 8px 4px 2px;
  min-height: 1.2em;
}

.cc-foot {
  border-top: 1px solid #cecece;
  margin-top: 6px;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cc-foot-btns { display: flex; gap: 2px; }

.cc-icon {
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  background: transparent center / 22px no-repeat;
  opacity: 0.55;
  cursor: pointer;
}

.cc-icon:hover { opacity: 0.85; }

/* The three footer glyphs, drawn as data URIs rather than the three PNGs the
   original ships. Same reason as everywhere else on this page: no request,
   nothing to 404, nothing of anyone else's. */
.cc-icon--reload {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'>\
<path d='M17.6 6.4A8 8 0 1 0 19.7 14h-2.1a6 6 0 1 1-1.4-6.2L13 11h7V4z'/></svg>");
}

.cc-icon--audio {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'>\
<path d='M4 9v6h4l5 5V4L8 9zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/></svg>");
}

.cc-icon--info {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'>\
<path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/></svg>");
}

.cc-verify {
  background: #1a73e8;
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

.cc-verify:hover { background: #1765cc; }

/* The way out, stated in plain words under the panel. It is a prank, and a
   prank that cannot be left is just a broken page. */
.cc-out {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: #eee;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.cc-close {
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.cc-def { position: absolute; width: 0; height: 0; }

/* Phones. Below 400px the panel is already at max-width, so only the header
   needs to give ground. */
/* The panel's own narrow-screen tweaks. The button and icon sizes are NOT
   here: they need the two-class form to beat the theme, so they live in the
   matching media query at the foot of this file with the rest of them. */
@media (max-width: 420px) {
  .cc-head { padding: 12px 12px 16px; }
  .cc-head-big { font-size: 20px; }
}

/* Each control pinned at two classes, per the note at the top of this file. */
.cc-box .cc-cb {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 2px solid #c1c1c1 !important;
  border-radius: 2px !important;
  background: #fff !important;
}

.cc-box .cc-cb:hover { border-color: #b2b2b2 !important; }

.cc-foot .cc-verify {
  display: block !important;
  padding: 12px 26px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #1a73e8 !important;
  color: #fff !important;
}

.cc-foot .cc-verify:hover { background: #1765cc !important; }

.cc-foot .cc-icon {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}

.cc-grid .cc-tile {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;      /* restated after the blanket reset above */
  background-color: #dfdfdf !important;
}

.cc-grid .cc-tile--on { background-color: #fff !important; }

.cc-out .cc-close {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #fff !important;
  font: inherit !important;
  text-decoration: underline !important;
}

@media (max-width: 420px) {
  .cc-foot .cc-verify { padding: 12px 18px !important; }
  .cc-foot .cc-icon { width: 34px !important; height: 34px !important; background-size: 20px; }
}