/* The games on play.cryptominium.com — every page there that is a game, and
 * the home page. Scam or Legit? and Cryptle (games.js), the arcade (arcade.js).
 *
 * The owner's brief, 12 October 2026: "It need to be colorful, no
 * inhibition." So this page does not wear the site's quiet uniform: loud
 * gradients, fat type, a bouncing card. It still reads in one glance on a
 * phone, keeps every text at a readable contrast on its own background, and
 * calms down for anyone who has asked their device for less motion.
 */

:root {
  --sol-scam: #ff2e63;
  --sol-scam-2: #ff7a00;
  --sol-legit: #00d68f;
  --sol-legit-2: #00b4ff;
  --sol-ink: #1b0b3a;
  --sol-sun: #ffd23f;
  --sol-grape: #7b2ff7;
  --sol-sky: #00c2ff;
  --sol-card: #ffffff;
}

body:has(#sol) {
  background:
    radial-gradient(1200px 600px at 10% -10%, #ff4ecd 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #00e0ff 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 120%, #ffd23f 0%, transparent 60%),
    linear-gradient(160deg, #5b1cff 0%, #b40fff 45%, #ff2e8a 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.sol {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px 40px;
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- top bar ---------------------------------------------------------- */
.sol-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 14px; }
.sol-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 900; letter-spacing: .12em; font-size: 13px; }
.sol-chip {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .2); color: #fff; padding: 8px 14px; border-radius: 999px;
  font-weight: 800; font-size: 14px; line-height: 1; font-family: inherit; backdrop-filter: blur(6px); text-decoration: none;
}
.sol-chip-streak { background: var(--sol-sun); color: var(--sol-ink); padding: 3px 8px; border-radius: 999px; font-size: 12px; }
.sol-chip-link:hover { background: rgba(255, 255, 255, .32); }

/* ---- title ------------------------------------------------------------ */
.sol-title { text-align: center; padding: 18px 0 8px; }
.sol-logo { margin: 8px 0 14px; line-height: .9; font-weight: 1000; font-size: clamp(56px, 17vw, 96px); letter-spacing: -.02em; }
.sol-logo span { display: block; }
.sol-logo-scam {
  color: #fff; text-shadow: 0 6px 0 var(--sol-scam), 0 12px 24px rgba(0, 0, 0, .25);
  transform: rotate(-4deg); animation: sol-wobble 3s ease-in-out infinite;
}
.sol-logo-or { font-size: .32em; color: var(--sol-sun); margin: 6px 0; letter-spacing: .3em; }
.sol-logo-legit {
  color: #fff; text-shadow: 0 6px 0 var(--sol-legit), 0 12px 24px rgba(0, 0, 0, .25);
  transform: rotate(3deg); animation: sol-wobble 3s ease-in-out infinite reverse;
}
.sol-sub { font-size: 19px; font-weight: 700; margin: 6px auto 6px; max-width: 30ch; }
.sol-meta { font-size: 14px; font-weight: 800; letter-spacing: .04em; opacity: .9; margin: 0 0 20px; }
.sol-how { list-style: none; padding: 0; margin: 22px auto 0; max-width: 34ch; text-align: left; display: grid; gap: 10px; }
.sol-how li { background: rgba(255, 255, 255, .16); border-radius: 16px; padding: 12px 14px; font-weight: 700; font-size: 15px; }
.sol-note { font-size: 14px; font-weight: 600; margin-top: 18px; opacity: .95; }

/* ---- buttons ---------------------------------------------------------- */
.sol-btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font-weight: 1000; font-size: 22px; line-height: 1; font-family: inherit; letter-spacing: .04em; color: #fff;
  padding: 18px 34px; border-radius: 22px; min-width: 150px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .22), 0 14px 30px rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.sol-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.sol-btn:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(0, 0, 0, .22), 0 6px 14px rgba(0, 0, 0, .2); }
.sol-btn:focus-visible { outline: 4px solid var(--sol-sun); outline-offset: 4px; }
.sol-btn:disabled { opacity: .6; cursor: default; transform: none; }
.sol-btn-go { background: linear-gradient(135deg, var(--sol-sun), #ff9f1c); color: var(--sol-ink); }
.sol-btn-scam { background: linear-gradient(135deg, var(--sol-scam), var(--sol-scam-2)); }
.sol-btn-legit { background: linear-gradient(135deg, var(--sol-legit), var(--sol-legit-2)); color: #032b1e; }
.sol-btn-share { background: linear-gradient(135deg, var(--sol-grape), var(--sol-sky)); margin-top: 14px; }
.sol-link { display: inline-block; margin-left: 14px; color: #fff; font-weight: 800; }

/* ---- progress dots ---------------------------------------------------- */
.sol-dots { display: flex; justify-content: center; gap: 10px; margin: 4px 0 8px; }
.sol-dots i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.sol-dots i.now { background: var(--sol-sun); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255, 210, 63, .35); }
.sol-dots i.ok { background: var(--sol-legit); }
.sol-dots i.no { background: var(--sol-scam); }
.sol-count { text-align: center; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; margin: 0 0 12px; }

/* ---- the card --------------------------------------------------------- */
.sol-play { text-align: center; }
.sol-card {
  position: relative; margin: 0 auto 22px; max-width: 460px; text-align: left;
  background: var(--sol-card); color: var(--sol-ink); border-radius: 28px; padding: 18px;
  box-shadow: 0 18px 0 rgba(27, 11, 58, .25), 0 30px 60px rgba(27, 11, 58, .35);
  touch-action: pan-y; user-select: none; cursor: grab;
  animation: sol-pop .45s cubic-bezier(.2, 1.4, .4, 1);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .35s ease;
}
.sol-card.dragging { transition: none; cursor: grabbing; }
.sol-card:focus-visible { outline: 5px solid var(--sol-sun); outline-offset: 6px; }
.sol-card.gone-left { transform: translateX(-130%) rotate(-24deg); opacity: 0; }
.sol-card.gone-right { transform: translateX(130%) rotate(24deg); opacity: 0; }
.sol-stamp {
  position: absolute; top: 22px; padding: 6px 14px; border: 5px solid; border-radius: 12px;
  font-weight: 1000; font-size: 30px; line-height: 1; font-family: inherit; letter-spacing: .06em; opacity: 0; pointer-events: none;
}
.sol-stamp-scam { left: 18px; color: var(--sol-scam); border-color: var(--sol-scam); transform: rotate(-14deg); }
.sol-stamp-legit { right: 18px; color: #00a36c; border-color: #00a36c; transform: rotate(14deg); }

.sol-face-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.sol-kind {
  font-weight: 900; font-size: 12px; line-height: 1; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--sol-grape), #c13bff); color: #fff;
}
.sol-hard { font-weight: 900; font-size: 12px; line-height: 1; font-family: inherit; letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--sol-sun); color: var(--sol-ink); }
.sol-scene { font-size: 15px; font-weight: 700; color: #4b3a6e; margin: 0 0 12px; }

/* message, post, offer */
.sol-bubble { background: linear-gradient(160deg, #f1ecff, #e7f8ff); border-radius: 20px 20px 20px 6px; padding: 14px 16px; }
.sol-face-post .sol-bubble { border-radius: 20px; background: linear-gradient(160deg, #fff4d6, #ffe3f1); }
.sol-face-offer .sol-bubble { border-radius: 20px; background: linear-gradient(160deg, #e6fff4, #fff4d6); }
.sol-who { font-weight: 900; font-size: 15px; color: var(--sol-grape); margin-bottom: 6px; word-break: break-word; }
.sol-bubble-title { font-weight: 900; margin-bottom: 4px; }
.sol-text { font-size: 18px; font-weight: 600; line-height: 1.38; margin: 0; }
.sol-addr, .sol-mail-link {
  margin-top: 10px; display: inline-block; font: 800 15px/1.2 ui-monospace, 'SF Mono', Consolas, monospace;
  background: #1b0b3a; color: #9ff7d4; padding: 7px 10px; border-radius: 10px; word-break: break-all;
}
.sol-detail { margin-top: 10px; font-weight: 800; font-size: 16px; }

/* website */
.sol-urlbar {
  display: flex; align-items: center; gap: 10px; background: #f0eef7; border: 3px solid #d9d2f0;
  border-radius: 16px; padding: 14px 16px;
}
.sol-lock { width: 14px; height: 16px; border: 3px solid #6b5b95; border-radius: 4px; position: relative; flex: none; }
.sol-lock::before { content: ''; position: absolute; left: 1px; top: -9px; width: 6px; height: 7px; border: 3px solid #6b5b95; border-bottom: 0; border-radius: 6px 6px 0 0; }
.sol-url { font: 900 clamp(17px, 5vw, 22px)/1.2 ui-monospace, 'SF Mono', Consolas, monospace; word-break: break-all; color: var(--sol-ink); }

/* wallet pop-up */
.sol-popup { border: 3px solid #e4ddf7; border-radius: 22px; padding: 16px; background: linear-gradient(180deg, #ffffff, #f6f2ff); }
.sol-popup-site { font: 900 15px/1.2 ui-monospace, 'SF Mono', Consolas, monospace; background: #efe9ff; color: var(--sol-grape); padding: 8px 10px; border-radius: 10px; display: inline-block; word-break: break-all; }
.sol-popup-title { font-weight: 1000; font-size: 20px; margin: 12px 0 6px; }
.sol-popup-detail { font-weight: 800; font-size: 18px; line-height: 1.35; }
.sol-popup-row { display: flex; gap: 10px; margin-top: 14px; }
.sol-fakebtn { flex: 1; text-align: center; padding: 11px; border-radius: 12px; background: #ece8f7; font-weight: 900; color: #4b3a6e; }
.sol-fakebtn-go { background: #2f6bff; color: #fff; }

/* email */
.sol-mail { border-radius: 18px; border: 3px solid #e4ddf7; padding: 14px 16px; }
.sol-mail-from { font-weight: 800; font-size: 14px; color: #4b3a6e; word-break: break-all; }
.sol-mail-subj { font-weight: 1000; font-size: 18px; margin: 8px 0 6px; }
.sol-mail-body { font-size: 17px; font-weight: 600; line-height: 1.38; margin: 0; }

.sol-choose { display: flex; gap: 14px; justify-content: center; }
.sol-choose .sol-btn { flex: 1; max-width: 220px; font-size: 26px; padding: 20px 10px; }
.sol-hint { font-size: 13px; font-weight: 700; opacity: .85; margin-top: 12px; }

/* ---- the reveal ------------------------------------------------------- */
.sol-reveal { text-align: center; }
.sol-verdict {
  display: inline-block; font-weight: 1000; font-size: clamp(60px, 18vw, 104px); line-height: 1; font-family: inherit; letter-spacing: .02em; margin: 10px 0 4px;
  animation: sol-slam .5s cubic-bezier(.2, 1.6, .4, 1);
}
.sol-verdict-scam { color: #fff; text-shadow: 0 7px 0 var(--sol-scam), 0 14px 28px rgba(0, 0, 0, .3); }
.sol-verdict-legit { color: #fff; text-shadow: 0 7px 0 #00a36c, 0 14px 28px rgba(0, 0, 0, .3); }
.sol-you { font-weight: 1000; font-size: 26px; line-height: 1.2; font-family: inherit; margin: 6px 0 16px; }
.is-right .sol-you { color: var(--sol-sun); }
.is-wrong .sol-you { color: #fff; }
.sol-why { background: #fff; color: var(--sol-ink); border-radius: 26px; padding: 18px 20px; text-align: left; margin: 0 auto 20px; max-width: 460px; box-shadow: 0 14px 0 rgba(27, 11, 58, .2); }
.sol-why h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sol-grape); margin: 0 0 6px; }
.sol-why h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #00936a; margin: 14px 0 6px; }
.sol-why p { font-size: 17px; font-weight: 600; line-height: 1.42; margin: 0; }
.sol-crowd { margin-top: 14px !important; font-weight: 900 !important; color: #b0127a; }
.sol-more { margin-top: 14px !important; font-size: 14px !important; }
.sol-more a { color: var(--sol-grape); font-weight: 800; }

/* ---- results ---------------------------------------------------------- */
.sol-results { text-align: center; }
.sol-score { font-weight: 1000; font-size: clamp(80px, 26vw, 140px); line-height: 1; font-family: inherit; text-shadow: 0 8px 0 var(--sol-grape), 0 16px 34px rgba(0, 0, 0, .3); margin: 6px 0 2px; animation: sol-slam .55s cubic-bezier(.2, 1.6, .4, 1); }
.sol-score-line { font-weight: 900; font-size: 21px; line-height: 1.3; font-family: inherit; margin: 0 0 12px; }
.sol-points { display: inline-block; background: var(--sol-sun); color: var(--sol-ink); font-weight: 1000; padding: 10px 16px; border-radius: 999px; }
.sol-medal { font-weight: 900; color: var(--sol-sun); }
.sol-keep { background: rgba(255, 255, 255, .18); border-radius: 26px; padding: 18px; margin: 16px 0; backdrop-filter: blur(6px); }
.sol-keep h2 { margin: 0 0 6px; font-size: 24px; font-weight: 1000; }
.sol-keep p { margin: 0 0 14px; font-weight: 700; }
.sol-next { font-weight: 800; margin: 16px 0; }

.sol-board, .sol-profile { background: #fff; color: var(--sol-ink); border-radius: 26px; padding: 16px 18px; margin: 16px auto; text-align: left; max-width: 460px; box-shadow: 0 12px 0 rgba(27, 11, 58, .2); }
.sol-board-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sol-board-head h2 { flex: 1 0 100%; margin: 0 0 4px; font-size: 22px; font-weight: 1000; }
.sol-profile h2 { margin: 0; font-size: 22px; font-weight: 1000; }
.sol-tab { border: 0; cursor: pointer; padding: 8px 12px; border-radius: 999px; background: #efe9ff; color: var(--sol-grape); font-weight: 900; font-size: 13px; line-height: 1; font-family: inherit; }
.sol-tab.on { background: var(--sol-grape); color: #fff; }
.sol-board-list { list-style: none; padding: 0; margin: 12px 0 0; }
.sol-board-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; padding: 10px 12px; border-radius: 14px; font-weight: 800; }
.sol-board-list li:nth-child(odd) { background: #f6f2ff; }
.sol-board-list li:nth-child(1) .rk { color: #d39b00; }
.sol-board-list li.me { background: linear-gradient(135deg, #fff2b8, #ffd6f0); }
.sol-board-list .pt { color: var(--sol-grape); }
.sol-empty { display: block !important; font-weight: 700 !important; }
.sol-prof-line { font-weight: 800; color: #4b3a6e; margin: 6px 0 12px; }
.sol-guide h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sol-grape); margin: 0 0 8px; }
.sol-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sol-guide-item { background: #f2f0f7; border-radius: 14px; padding: 10px; font-size: 13px; color: #6b6185; }
.sol-guide-item b { display: block; color: var(--sol-ink); }
.sol-guide-item.got { background: linear-gradient(135deg, #d9fff0, #dff4ff); color: #00936a; font-weight: 900; }
.sol-medals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sol-medal-chip { background: var(--sol-sun); color: var(--sol-ink); font-weight: 900; font-size: 13px; padding: 6px 10px; border-radius: 999px; }

.sol-panel { background: rgba(255, 255, 255, .18); border-radius: 20px; padding: 16px; font-weight: 700; }
.sol-panel a { color: #fff; }
.sol-fine { font-size: 12px; font-weight: 600; opacity: .85; text-align: center; margin-top: 28px; line-height: 1.5; }

/* The site's small footer (cm_focus_footer()) is drawn for a light page. */
body:has(#sol) .focusfoot { background: transparent; border-top: 0; }
body:has(#sol) .focusfoot, body:has(#sol) .focusfoot a, body:has(#sol) .focusfoot span { color: #fff; opacity: .92; }

.sol-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  background: var(--sol-ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: opacity .5s ease;
}
.sol-toast.out { opacity: 0; }

/* How to play and FAQ, below every game (13 Oct 2026, PLAY-GROWTH.md):
   plain HTML a crawler can read, outside #sol-stage so no game script clears
   it. Quiet on purpose: the game is the page, this is the small print. */
.gm-about {
  margin: 36px auto 0; max-width: 640px; text-align: left; font-size: 15px; line-height: 1.6; font-weight: 500;
  background: rgba(10, 4, 30, .22); border-radius: 20px; padding: 18px 20px; color: #fff;
}
.gm-about h2 { margin: 0 0 8px; font-size: 20px; font-weight: 900; }
.gm-about h3 { margin: 16px 0 4px; font-size: 16px; font-weight: 800; }
.gm-about p, .gm-about ul, .gm-about ol { margin: 0 0 8px; }
.gm-about ul, .gm-about ol { padding-left: 20px; }
.gm-about li { margin: 3px 0; }
.gm-about a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.gm-about a:hover { color: #ffd23f; }
.gm-about details { margin: 10px 0; background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 8px 12px; }
.gm-about summary { cursor: pointer; font-weight: 800; min-height: 32px; display: flex; align-items: center; }
.pl .gm-about { max-width: none; }

/* The share sheet on a computer (games.js shareSheet, 13 Oct 2026). */
.sol-sheet-back { position: fixed; inset: 0; z-index: 45; background: rgba(10, 4, 30, .6); display: grid; place-items: center; padding: 16px; }
.sol-sheet {
  width: min(100%, 460px); background: #160a3d; color: #fff; border-radius: 22px; padding: 18px; display: grid; gap: 12px;
  box-shadow: 0 0 0 3px rgba(255, 210, 63, .7), 0 24px 60px rgba(0, 0, 0, .5); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.sol-sheet-h { margin: 0; font-weight: 900; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #ffd23f; }
.sol-sheet-text { margin: 0; white-space: pre-wrap; word-break: break-word; background: rgba(255, 255, 255, .07); border-radius: 12px; padding: 12px; font: 600 14px/1.45 system-ui, sans-serif; max-height: 40vh; overflow: auto; }
.sol-sheet-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-sheet-btn {
  flex: 1 1 120px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; font: 800 15px system-ui, sans-serif; text-decoration: none; padding: 0 14px;
}
.sol-sheet-btn:hover { background: rgba(255, 255, 255, .22); }
.sol-sheet-copy { background: linear-gradient(135deg, #ffd23f, #ff9f1c); color: #1b0b3a; }
.sol-sheet-close { justify-self: end; background: none; border: 0; color: #bfd3e6; text-decoration: underline; font: 700 14px system-ui, sans-serif; cursor: pointer; min-height: 44px; }
.sol-sheet-btn:focus-visible, .sol-sheet-close:focus-visible { outline: 4px solid #ffd23f; outline-offset: 3px; }

/* A friend's dare on the quiz (quiz.js challenge). */
.qz-challenge { margin: 0 auto 14px; max-width: 460px; background: linear-gradient(100deg, #ffd23f, #ff9f1c); color: #1b0b3a; font-weight: 900; font-size: 16px; padding: 10px 14px; border-radius: 14px; box-shadow: 0 0 24px rgba(255, 210, 63, .45); }

/* ---- confetti --------------------------------------------------------- */
.sol-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.sol-confetti i {
  position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 3px;
  background: hsl(var(--hue), 95%, 58%);
  animation: sol-fall 1.6s cubic-bezier(.2, .6, .4, 1) forwards;
}

@keyframes sol-pop { 0% { transform: scale(.8) translateY(20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sol-slam { 0% { transform: scale(2.2) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sol-wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-1deg) scale(1.03); } }
@keyframes sol-fall { to { transform: translateY(105vh) rotate(var(--spin)); opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .sol-logo-scam, .sol-logo-legit, .sol-card, .sol-verdict, .sol-score { animation: none; }
  .sol-card, .sol-btn { transition: none; }
}

/* ======================================================================
 * The games page (#) and Cryptle (#cryptle) — added 12 Oct 2026, when the
 * owner asked for "more than one game on the page" and no sign-up.
 * ==================================================================== */

.gm-hub { text-align: center; padding: 10px 0 6px; }
.gm-hub-title { font-weight: 1000; font-size: clamp(44px, 13vw, 72px); line-height: .95; margin: 10px 0 10px; text-shadow: 0 6px 0 var(--sol-grape), 0 12px 26px rgba(0, 0, 0, .25); }
.gm-hub-sub { font-weight: 800; font-size: 17px; margin: 0 0 22px; }
.gm-tile {
  display: block; text-align: left; text-decoration: none; color: #fff; border-radius: 28px; padding: 22px 22px 18px; margin: 0 auto 18px; max-width: 480px;
  box-shadow: 0 12px 0 rgba(27, 11, 58, .25), 0 22px 44px rgba(27, 11, 58, .3);
  transition: transform .15s ease;
}
.gm-tile:hover { transform: translateY(-3px) rotate(-.5deg); }
.gm-tile:focus-visible { outline: 5px solid var(--sol-sun); outline-offset: 5px; }
.gm-tile-scam { background: linear-gradient(135deg, var(--sol-scam) 0%, #ff7a00 55%, var(--sol-legit) 130%); }
.gm-tile-cryptle { background: linear-gradient(135deg, #12b76a 0%, #00b4ff 60%, var(--sol-sun) 140%); }
.gm-tile-name { display: block; font-weight: 1000; font-size: 34px; line-height: 1; letter-spacing: -.01em; text-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.gm-tile-line { display: block; font-weight: 700; font-size: 16px; margin: 8px 0 14px; max-width: 34ch; }
.gm-tile-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gm-tile-status { background: #fff; color: var(--sol-ink); font-weight: 1000; padding: 9px 14px; border-radius: 999px; }
.gm-tile-streak { background: var(--sol-sun); color: var(--sol-ink); font-weight: 900; padding: 8px 12px; border-radius: 999px; font-size: 14px; }
.gm-next { margin: 20px 0 6px; text-align: center; }

.sol-contact { text-align: center; font-weight: 800; margin-top: 26px; }
.sol-contact a { color: var(--sol-sun); }

/* ---- Cryptle ------------------------------------------------------------ */
.cr { text-align: center; }
.cr-logo { display: flex; justify-content: center; gap: 6px; margin: 8px 0 8px; }
.cr-logo-t {
  width: clamp(34px, 11vw, 52px); height: clamp(34px, 11vw, 52px); display: grid; place-items: center; border-radius: 10px;
  font-weight: 1000; font-size: clamp(22px, 7vw, 32px); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .2);
  animation: sol-pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.cr-logo-t.g { background: #12b76a; }
.cr-logo-t.y { background: #f5b301; }
.cr-logo-t.p { background: var(--sol-grape); }
.cr-sub { font-weight: 800; margin: 6px 0 16px; }
.cr-grid { display: grid; gap: 6px; margin: 0 auto 10px; width: 100%; max-width: calc(var(--cols) * 58px); }
.cr-row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
.cr-row.shake { animation: cr-shake .4s; }
.cr-cell {
  aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border-radius: 9px;
  background: rgba(255, 255, 255, .18); border: 3px solid rgba(255, 255, 255, .35);
  font-weight: 1000; font-size: clamp(16px, calc(60vw / var(--cols)), 30px); color: #fff; text-transform: uppercase;
}
.cr-cell.typed { border-color: #fff; background: rgba(255, 255, 255, .28); animation: cr-tap .12s ease; }
.cr-cell.g { background: #12b76a; border-color: #0e9a59; }
.cr-cell.y { background: #f5b301; border-color: #d49a00; color: #2a1a00; }
.cr-cell.x { background: #3b2a63; border-color: #2f2150; color: #d8d0ef; }
.cr-cell.flip { animation: cr-flip .45s ease; }
.cr-legend { font-size: 13px; font-weight: 700; opacity: .9; margin: 4px 0 14px; }

.cr-kb { display: grid; gap: 7px; margin: 6px auto 0; max-width: 520px; }
.cr-kb-row { display: flex; gap: 5px; justify-content: center; }
.cr-key {
  flex: 1 1 0; min-width: 0; height: 52px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--sol-ink); font-weight: 900; font-size: 16px; font-family: inherit;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}
.cr-key.wide { flex: 1.6 1 0; font-size: 13px; }
.cr-key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.cr-key.g { background: #12b76a; color: #fff; }
.cr-key.y { background: #f5b301; color: #2a1a00; }
.cr-key.x { background: #3b2a63; color: #b9add9; }

.cr-end { margin-top: 6px; }
.cr-result { font-weight: 1000; font-size: 28px; color: var(--sol-sun); margin: 6px 0 2px; }
.cr-word { font-weight: 1000; font-size: clamp(42px, 13vw, 66px); letter-spacing: .06em; text-shadow: 0 6px 0 #12b76a, 0 12px 26px rgba(0, 0, 0, .3); margin-bottom: 14px; animation: sol-slam .5s cubic-bezier(.2, 1.6, .4, 1); }
.cr-stats { display: flex; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.cr-stat { background: rgba(255, 255, 255, .2); border-radius: 16px; padding: 10px 14px; min-width: 80px; }
.cr-stat b { display: block; font-size: 26px; font-weight: 1000; }
.cr-stat span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

@keyframes cr-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes cr-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes cr-tap { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cr-cell.flip, .cr-row.shake, .cr-cell.typed, .cr-logo-t, .cr-word, .gm-tile { animation: none; transition: none; }
}

/* ======================================================================
 * play.cryptominium.com (12 Oct 2026): every game on its own page, a home
 * page with HashMinium as the flagship, and the arcade.
 * ==================================================================== */

.sol.gm-wide { max-width: 1040px; }
.gm-static { text-align: center; padding: 30px 0; }
.gm-static h1 { font-weight: 1000; font-size: clamp(36px, 10vw, 60px); margin: 0 0 10px; }
.gm-static p { font-weight: 700; font-size: 17px; max-width: 46ch; margin: 0 auto 10px; }
.gm-sec { font-weight: 1000; font-size: clamp(30px, 8vw, 44px); margin: 34px 0 6px; text-shadow: 0 4px 0 var(--sol-grape); }
.gm-sec-sub { font-weight: 700; margin: 0 0 18px; }
.gm-daily { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.gm-daily .gm-tile { margin: 0; max-width: none; }
.gm-tile-streak[hidden] { display: none; }

/* HashMinium, the flagship (owner: the games live here "until HashMinium is
   ready as the flagship game"). */
.gm-flag {
  display: grid; gap: 6px; text-align: left; text-decoration: none; color: #fff; border-radius: 28px; padding: 24px;
  background: radial-gradient(500px 240px at 90% 0%, rgba(0, 207, 255, .5), transparent 60%), linear-gradient(135deg, #050a14 0%, #0b2340 60%, #0a3a5c 100%);
  box-shadow: 0 0 0 3px rgba(0, 207, 255, .55), 0 22px 44px rgba(27, 11, 58, .35); margin: 6px 0 0;
  transition: transform .15s ease;
}
.gm-flag:hover { transform: translateY(-3px); }
.gm-flag:focus-visible { outline: 5px solid var(--sol-sun); outline-offset: 5px; }
.gm-flag-kick { font-weight: 900; font-size: 12px; letter-spacing: .22em; color: #7fe7ff; }
.gm-flag-name { font-weight: 1000; font-size: clamp(34px, 9vw, 52px); line-height: 1; }
.gm-flag-line { font-weight: 700; font-size: 16px; max-width: 60ch; color: #dbe9f7; }
.gm-flag-go { justify-self: start; margin-top: 8px; background: linear-gradient(100deg, #00cfff, #7fe7ff); color: #03101e; font-weight: 1000; padding: 9px 16px; border-radius: 999px; }

/* The arcade's tiles: the owner's posters. */
.ar-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .ar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ar-tile {
  display: block; border-radius: 18px; overflow: hidden; background: #0d1033; color: #fff; text-decoration: none; text-align: left;
  box-shadow: 0 8px 0 rgba(27, 11, 58, .25), 0 16px 32px rgba(27, 11, 58, .3); transition: transform .15s ease;
}
.ar-tile:hover { transform: translateY(-3px) rotate(-.6deg); }
.ar-tile:focus-visible { outline: 5px solid var(--sol-sun); outline-offset: 4px; }
.ar-tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.ar-tile-foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; padding: 8px 10px 10px; }
.ar-tile-name { font-weight: 900; font-size: 14px; }
.ar-tile-best { background: var(--sol-sun); color: var(--sol-ink); font-weight: 900; font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.gm-also { text-align: center; font-weight: 700; margin: 30px 0 0; }
.gm-also a { color: var(--sol-sun); font-weight: 900; }

/* One arcade game. The canvas keeps 2:3 and fits the screen's height. */
.ar { text-align: center; }
.ar-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 0 10px; }
.ar-name { margin: 0; font-weight: 1000; font-size: clamp(24px, 7vw, 34px); text-align: left; text-shadow: 0 3px 0 var(--sol-grape); }
.ar-best { background: var(--sol-sun); color: var(--sol-ink); font-weight: 900; padding: 6px 12px; border-radius: 999px; white-space: nowrap; font-size: 14px; }
.ar-box {
  position: relative; margin: 0 auto; aspect-ratio: 2 / 3; border-radius: 22px; overflow: hidden; background: #0b1035;
  width: min(100%, calc((100vh - 200px) * 2 / 3)); width: min(100%, calc((100svh - 200px) * 2 / 3)); min-width: 260px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 18px 40px rgba(0, 0, 0, .35);
}
.ar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ar-layer {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; background: rgba(18, 6, 48, .8); backdrop-filter: blur(3px); overflow: auto;
}
.ar-layer[hidden] { display: none; }
.ar-poster { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.ar-layer-how { font-weight: 700; font-size: 15px; margin: 0; max-width: 34ch; }
.ar-over-title { font-weight: 1000; font-size: 28px; margin: 0; }
.ar-score { font-weight: 1000; font-size: clamp(40px, 12vw, 56px); line-height: 1; text-shadow: 0 4px 0 var(--sol-grape); }
.ar-why { font-weight: 700; margin: 0; max-width: 34ch; }
.ar-newbest { background: var(--sol-sun); color: var(--sol-ink); font-weight: 900; padding: 4px 12px; border-radius: 999px; }
.ar-best-line { font-weight: 800; opacity: .9; }
.ar-word { background: #fff; color: var(--sol-ink); border-radius: 14px; padding: 10px 12px; text-align: left; font-size: 14px; font-weight: 600; max-width: 34ch; }
.ar-word b { display: block; font-weight: 900; margin-bottom: 2px; }
.ar-word a { color: #5b1cff; font-weight: 900; }
.ar-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ar-btns .sol-btn, .ar-layer .sol-btn { margin: 0; }
.ar-all { margin: 0; }
.ar-btn-quiet { background: rgba(255, 255, 255, .22); color: #fff; }
.ar-how { font-weight: 700; margin: 14px auto 0; max-width: 46ch; font-size: 15px; }
.ar-extra { margin: 14px auto 0; display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: 480px; }
.ar-extra .ar-word { max-width: none; }
.ar-extra .sol-btn { margin: 0; }
/* While a game is being played on a computer (owner, 13 Oct 2026: "when
   playing the game must be the only thing on the screen"), everything else
   steps away and the game sits alone in the middle, at its usual size.
   Esc pauses and brings the page back, as do the game-over and pause
   screens. Phones keep the page as it is. */
.ar-esc { display: none; }
@media (min-width: 900px) {
  .ar-esc { display: block; margin: 0; font-weight: 700; font-size: 13px; opacity: .85; }
  body.ar-playing { margin: 0; overflow: hidden; }
  body.ar-playing .sol { padding-top: 0; padding-bottom: 0; }
  body.ar-playing .sol-top, body.ar-playing .ar-head, body.ar-playing .ar-how, body.ar-playing .ar-extra,
  body.ar-playing .sol-contact, body.ar-playing .sol-fine, body.ar-playing .gm-about { display: none; }
  body.ar-playing .sol-stage { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; }
  body.ar-playing .ar { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-tile, .gm-flag { transition: none; }
}
.ar-layer .sol-btn, .ar-extra .sol-btn { font-size: 18px; padding: 14px 22px; min-width: 0; border-radius: 18px; }

/* ======================================================================
 * Think you know crypto? Prove it! (quiz.js). First built 13 Oct 2026 in
 * the kit's deep navy; the same day the owner found it "too traditional and
 * intimidating" and asked for a game room, an arena with the player at its
 * center: lights and sounds for a right answer, the lights going down for a
 * wrong one, and topics as even check-mark options. So the page is a dark
 * arena (.qa, built by quiz.js: stage bulbs, four beams, a crowd) with the
 * card in the middle on a lit floor. Every target at least 44px; works from
 * 320px; under reduced motion nothing sways, chases or flashes.
 * ==================================================================== */

.gm-tile-quiz { background: radial-gradient(420px 200px at 95% 0%, rgba(0, 207, 255, .55), transparent 60%), linear-gradient(135deg, #07122b 0%, #0d2a55 60%, #0a5a8c 100%); box-shadow: 0 0 0 3px rgba(0, 207, 255, .6), 0 12px 0 rgba(27, 11, 58, .25), 0 22px 44px rgba(27, 11, 58, .3); max-width: none; }
.gm-tile-quiz .gm-tile-status { background: #ffd23f; }

/* ---- the arena -------------------------------------------------------- */
body[data-game="quiz"]:has(#sol) { background: #0f0630; }
body.qa-on .sol { position: relative; z-index: 1; }
.qa {
  --heat: 0;
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -12%, #4a1fa8 0%, transparent 70%),
    radial-gradient(700px 420px at -5% 105%, rgba(255, 46, 138, .4), transparent 70%),
    radial-gradient(700px 420px at 105% 105%, rgba(0, 194, 255, .35), transparent 70%),
    linear-gradient(180deg, #0f0630 0%, #160a3d 55%, #07031a 100%);
}
.qa > * { position: absolute; }
.qa-haze { inset: 0; background: radial-gradient(60% 45% at 50% 46%, rgba(127, 231, 255, .1), transparent 70%); }

.qa-beams { inset: 0; opacity: calc(.55 + var(--heat) * .45); transition: opacity .5s ease; }
.qa-beam {
  position: absolute; top: -6vh; width: 46vmax; height: 125vh; margin-left: -23vmax; transform-origin: 50% 0;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--c) 0%, transparent 78%);
  opacity: .32; mix-blend-mode: screen; transition: opacity .5s ease;
  animation: qa-sway var(--s) ease-in-out infinite alternate;
}
.qa-beam-1 { left: 8%;  --c: rgba(255, 78, 205, .85); --r0: -34deg; --r1: -12deg; --s: 7s; }
.qa-beam-2 { left: 34%; --c: rgba(0, 224, 255, .85);  --r0: -10deg; --r1: 16deg;  --s: 9s; }
.qa-beam-3 { left: 66%; --c: rgba(160, 90, 255, .9);  --r0: 12deg;  --r1: -14deg; --s: 8s; }
.qa-beam-4 { left: 92%; --c: rgba(255, 210, 63, .8);  --r0: 34deg;  --r1: 10deg;  --s: 10s; }
@keyframes qa-sway { from { transform: rotate(var(--r0)); } to { transform: rotate(var(--r1)); } }

.qa-bulbs { top: 0; left: 0; right: 0; height: 14px; padding-top: 4px; display: flex; justify-content: space-around; opacity: calc(.55 + var(--heat) * .45); transition: opacity .5s ease; }
.qa-bulbs i { width: 8px; height: 8px; border-radius: 50%; background: #ffe58a; box-shadow: 0 0 8px 2px rgba(255, 210, 63, .8); opacity: .3; animation: qa-chase 2.2s linear infinite; animation-delay: calc(var(--i) * -.1s); }
@keyframes qa-chase { 0%, 60%, 100% { opacity: .3; } 75% { opacity: 1; } }

.qa-crowd { left: 0; right: 0; bottom: 0; width: 100%; height: min(18vh, 150px); }
.qa-ph { fill: #fff; opacity: calc(var(--heat) * .8); filter: drop-shadow(0 0 3px #fff); }
.qa-front, .qa-back { transform-box: fill-box; }

.qa-flash { inset: 0; opacity: 0; background: radial-gradient(55% 45% at 50% 42%, rgba(255, 244, 200, .5), rgba(61, 220, 132, .16) 45%, transparent 75%); }
.qa-dark { inset: 0; opacity: 0; transition: opacity .8s ease; background: radial-gradient(70% 60% at 50% 40%, rgba(3, 1, 12, .5), rgba(3, 1, 12, .94) 75%); }
.qa-spot {
  left: 50%; top: -4vh; width: min(900px, 150vw); height: 110vh; transform: translateX(-50%); opacity: 0; transition: opacity .3s ease;
  clip-path: polygon(45% 0, 55% 0, 92% 100%, 8% 100%);
  background: linear-gradient(180deg, rgba(200, 215, 255, .26) 0%, rgba(200, 215, 255, .08) 70%, transparent 100%);
}

/* A right answer: the beams swing to the middle in green and gold, a flash, the crowd jumps and holds up its phones. */
.qa-up .qa-beam { opacity: .75; animation: qa-hit 1.4s ease-out 1 both; }
.qa-up .qa-beam-1, .qa-up .qa-beam-3 { --c: rgba(61, 220, 132, .9); }
.qa-up .qa-beam-2, .qa-up .qa-beam-4 { --c: rgba(255, 214, 90, .95); }
@keyframes qa-hit { 0% { transform: rotate(var(--r0)); } 35% { transform: rotate(calc(var(--r0) * .15)); } 100% { transform: rotate(var(--r0)); } }
.qa-up .qa-bulbs i { background: #c8ffe0; box-shadow: 0 0 10px 3px rgba(61, 220, 132, .9); animation-duration: .7s; }
.qa-up .qa-flash { animation: qa-flash 1s ease-out 1; }
@keyframes qa-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.qa-up .qa-ph { animation: qa-phone 1.3s ease-out var(--d) 1 both; }
@keyframes qa-phone { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: calc(var(--heat) * .8); } }
.qa-up .qa-front { animation: qa-jump .45s ease-out 2; }
.qa-up .qa-back { animation: qa-jump .45s ease-out .12s 2; }
@keyframes qa-jump { 50% { transform: translateY(-6px); } }

/* The Search Lifeline: a cyan sweep. */
.qa-search .qa-beam { opacity: .6; --c: rgba(0, 224, 255, .95); }

/* A wrong answer: the house lights go down, one cold spotlight stays on the card, until the next question. */
.qa-down .qa-dark { opacity: 1; }
.qa-down .qa-beams { opacity: 0; transition-duration: .35s; }
.qa-down .qa-bulbs i { animation: none; opacity: .5; background: #ff5c7a; box-shadow: 0 0 6px 1px rgba(255, 92, 122, .6); }
.qa-down .qa-ph { opacity: 0; }
.qa-down .qa-spot { animation: qa-flicker .9s ease-out .35s 1 both; }
@keyframes qa-flicker { 0% { opacity: 0; } 30% { opacity: .8; } 42% { opacity: .4; } 60%, 100% { opacity: 1; } }

/* ---- the lobby: the sign, topics and levels --------------------------- */
.qz { text-align: center; }
.qz-marquee {
  display: block; max-width: 460px; margin: 4px auto 12px; padding: 14px; border-radius: 26px;
  background: radial-gradient(circle, #fff4c2 0 2.5px, rgba(255, 210, 63, .55) 3.5px, transparent 5.5px) 0 0 / 18px 18px, linear-gradient(135deg, #ff2e8a, #7b2ff7);
  box-shadow: 0 0 0 3px #ffd23f, 0 0 40px rgba(255, 46, 138, .45), 0 18px 40px rgba(0, 0, 0, .45);
  animation: qz-bulbs 1s steps(2) infinite;
}
@keyframes qz-bulbs { to { background-position: 9px 0, 0 0; } }
.qz-marquee-in { display: block; container-type: inline-size; padding: 18px 12px 22px; border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%, #2a1170, #0b0424 75%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.qz-marquee-top { display: block; font-weight: 900; font-size: clamp(17px, 5vw, 24px); letter-spacing: .03em; color: #bff3ff; text-shadow: 0 0 12px rgba(0, 207, 255, .8); }
.qz-marquee-big {
  display: block; margin-top: 6px; font-weight: 1000; font-size: clamp(34px, 19cqi, 82px); line-height: .95; text-transform: uppercase; white-space: nowrap;
  color: #ffd23f; transform: rotate(-3deg); text-shadow: 0 4px 0 #ff2e8a, 0 0 28px rgba(255, 210, 63, .7);
}
.qz-sub { font-weight: 700; font-size: 16px; margin: 0 auto 16px; max-width: 44ch; }
.qz-card {
  background: linear-gradient(180deg, rgba(22, 10, 64, .94), rgba(8, 4, 28, .95)); color: #eef4ff; border-radius: 24px; padding: 18px; text-align: left;
  box-shadow: 0 0 0 2px rgba(127, 231, 255, .45), 0 0 50px rgba(123, 47, 247, .35), 0 18px 40px rgba(0, 0, 0, .45);
}
.qz-h { font-weight: 900; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #7fe7ff; margin: 4px 0 10px; }
.qz-h-small { font-size: 13px; margin-top: 12px; }

.qz-opts { display: grid; gap: 8px; margin-bottom: 14px; }
.qz-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 440px) { .qz-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qz-topic-all { grid-column: 1 / -1; justify-content: center; }
.qz-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qz-opt {
  position: relative; display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 8px 10px; border-radius: 14px; cursor: pointer;
  text-align: left; font: inherit; font-weight: 800; font-size: 14px; line-height: 1.2; color: #eef4ff;
  background: rgba(255, 255, 255, .05); border: 2px solid rgba(127, 231, 255, .22); transition: border-color .15s ease, background .15s ease;
}
.qz-opt:hover:not(:disabled) { border-color: rgba(0, 207, 255, .75); }
.qz-opt[aria-checked="true"] { border-color: #3ddc84; background: rgba(61, 220, 132, .14); }
.qz-opt:disabled { opacity: .4; cursor: default; }
.qz-check { flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(127, 231, 255, .5); display: grid; place-items: center; }
.qz-opt[aria-checked="true"] .qz-check { background: #3ddc84; border-color: #3ddc84; }
.qz-opt[aria-checked="true"] .qz-check::after { content: ""; width: 5px; height: 10px; border: solid #062a17; border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }
.qz-opt-icon { font-size: 17px; line-height: 1; }
.qz-opt-name { min-width: 0; }
.qz-level { flex-direction: column; justify-content: center; gap: 3px; min-height: 96px; padding: 12px 6px; text-align: center; }
.qz-level .qz-check { position: absolute; top: 7px; right: 7px; }
.qz-level .qz-opt-icon { font-size: 26px; }
.qz-level .qz-opt-name { font-size: 16px; }
.qz-opt-line { font-weight: 600; font-size: 12px; opacity: .8; }
@media (max-width: 400px) {
  .qz-card { padding: 14px; }
  .qz-topic:not(.qz-topic-all) .qz-opt-icon { display: none; }
  .qz-opt { font-size: 13.5px; padding: 8px 6px; gap: 6px; }
}

.qz-best { font-weight: 900; color: #ffd23f; margin: 4px 0 0; }
.sol-btn.qz-go { display: block; width: 100%; margin-top: 12px; padding: 18px 12px; font-size: clamp(18px, 5.6vw, 22px); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 7px 0 rgba(0, 0, 0, .35), 0 0 30px rgba(255, 210, 63, .45); }
.qz-note { font-weight: 700; font-size: 14px; opacity: .9; margin: 10px 0 0; }
.qz-lobby-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-weight: 800; font-size: 14px; color: #bfd3e6; }
.qz-sound {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; font-size: 19px; line-height: 1;
  border: 2px solid rgba(127, 231, 255, .4); background: rgba(255, 255, 255, .08);
}
.qz-sound[aria-pressed="false"] { opacity: .7; }
.qz-rules { list-style: none; padding: 0; margin: 14px auto 0; max-width: 460px; display: grid; gap: 8px; }
.qz-rules li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 9px 12px; font-weight: 700; font-size: 14px; text-align: left; }
.qz-wait { margin-top: 40px; font-size: 20px; text-align: center; background: rgba(255, 255, 255, .08); }

/* The report form's reasons. */
.qz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.qz-chip {
  min-height: 44px; border: 2px solid rgba(127, 231, 255, .35); background: rgba(255, 255, 255, .06); color: #eaf6ff;
  border-radius: 14px; padding: 8px 14px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-align: left;
}
.qz-chip:hover:not(:disabled) { border-color: #00cfff; }
.qz-chip[aria-pressed="true"] { background: #00cfff; border-color: #00cfff; color: #03101e; }
.qz-chip-small { min-height: 40px; font-size: 13px; padding: 6px 10px; }
.qz-opt:focus-visible, .qz-chip:focus-visible, .qz-choice:focus-visible, .qz-lifeline:focus-visible, .qz-report-link:focus-visible, .qz-sound:focus-visible { outline: 4px solid #ffd23f; outline-offset: 3px; }

/* ---- a question: the scoreboard, the card, the floor ------------------ */
.qz-hud {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 8px 8px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 4, 34, .94), rgba(25, 10, 70, .94)); box-shadow: 0 0 0 2px rgba(255, 210, 63, .5), 0 10px 30px rgba(0, 0, 0, .4);
}
.qz-you { position: relative; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.qz-you-tag { font-weight: 1000; font-size: 11px; letter-spacing: .16em; color: #1b0b3a; background: #ffd23f; padding: 4px 7px; border-radius: 6px; }
.qz-score { font-weight: 1000; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255, 210, 63, .6); }
.qz-pts { font-weight: 800; font-size: 12px; color: #bfd3e6; }
.qz-plus { position: absolute; left: 44px; top: -8px; font-weight: 1000; font-size: 18px; color: #3ddc84; text-shadow: 0 0 10px rgba(61, 220, 132, .8); pointer-events: none; animation: qz-plus 1.1s ease-out forwards; }
@keyframes qz-plus { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.qz-lamps { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; gap: 5px; }
.qz-lamps i { flex: 0 1 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.qz-lamps i.is-now { background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .7); animation: qz-blink 1.2s ease-in-out infinite; }
.qz-lamps i.is-right { background: #3ddc84; box-shadow: 0 0 10px 2px rgba(61, 220, 132, .75); }
.qz-lamps i.is-wrong { background: #ff5c7a; box-shadow: 0 0 8px 1px rgba(255, 92, 122, .6); }
@keyframes qz-blink { 50% { opacity: .45; } }
.qz-streak { flex: 0 0 auto; background: #ffd23f; color: #1b0b3a; padding: 5px 9px; border-radius: 999px; font-weight: 1000; font-size: 14px; }
.qz-streak[hidden] { display: none; }
@media (max-width: 480px) {
  .qz-hud { flex-wrap: wrap; row-gap: 8px; }
  .qz-hud .qz-sound { margin-left: auto; }
  .qz-hud .qz-lamps { order: 5; flex-basis: 100%; }
}

.qz-play { position: relative; }
.qz-qcard { box-shadow: 0 0 0 2px rgba(127, 231, 255, .55), 0 0 60px rgba(0, 207, 255, .25), 0 22px 50px rgba(0, 0, 0, .5); transition: box-shadow .4s ease; }
.qz-play.is-right .qz-qcard { box-shadow: 0 0 0 3px #3ddc84, 0 0 70px rgba(61, 220, 132, .45), 0 22px 50px rgba(0, 0, 0, .5); }
.qz-play.is-wrong .qz-qcard { box-shadow: 0 0 0 2px rgba(255, 92, 122, .6), 0 0 40px rgba(200, 215, 255, .15), 0 22px 50px rgba(0, 0, 0, .6); }
.qz-floor { width: 92%; height: 34px; margin: -6px auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 207, 255, .55), rgba(123, 47, 247, .25) 60%, transparent); transition: opacity .6s ease; }
.is-right > .qz-floor { background: radial-gradient(closest-side, rgba(61, 220, 132, .75), rgba(255, 210, 63, .25) 60%, transparent); }
.is-wrong > .qz-floor { opacity: .2; }

.qz-tag { display: inline-block; font-weight: 800; font-size: 12px; letter-spacing: .04em; color: #7fe7ff; background: rgba(0, 207, 255, .12); padding: 4px 10px; border-radius: 999px; }
.qz-q { font-weight: 900; font-size: clamp(20px, 5.5vw, 26px); line-height: 1.25; margin: 12px 0 16px; outline: none; }
.qz-choices { display: grid; gap: 10px; }
.qz-choice {
  display: flex; align-items: center; gap: 12px; min-height: 52px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: #fff; border: 2px solid rgba(127, 231, 255, .3); border-radius: 16px;
  padding: 10px 14px; font: inherit; font-weight: 800; font-size: 16px; line-height: 1.3;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.qz-choice:hover:not(:disabled) { border-color: #00cfff; transform: translateY(-1px); box-shadow: 0 0 18px rgba(0, 207, 255, .3); }
.qz-choice:disabled { cursor: default; }
.qz-key { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #00cfff; color: #03101e; font-weight: 1000; font-size: 15px; }
.qz-choice.picked { border-color: #ffd23f; }
.qz-choice.right { background: #0f7a4f; border-color: #3ddc84; box-shadow: 0 0 24px rgba(61, 220, 132, .6); animation: qz-win .5s ease-out 1; }
.qz-choice.right .qz-key { background: #3ddc84; }
@keyframes qz-win { 40% { transform: scale(1.03); } }
.qz-choice.wrong { background: #7a1430; border-color: #ff5c7a; }
.qz-choice.wrong .qz-key { background: #ff5c7a; color: #fff; }
.qz-choice:disabled:not(.right):not(.wrong) { opacity: .55; }
.qz-liferow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.qz-lifeline {
  min-height: 44px; border: 0; border-radius: 14px; padding: 8px 16px; cursor: pointer; font: inherit; font-weight: 900; font-size: 15px;
  background: linear-gradient(100deg, #00cfff, #7fe7ff); color: #03101e;
}
.qz-lifeline:disabled { background: rgba(255, 255, 255, .15); color: #bfd3e6; cursor: default; }
.qz-lifenote { font-size: 13px; font-weight: 700; color: #bfd3e6; }
.qz-feedback:empty { display: none; }
.qz-feedback { margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.qz-feedback.is-right { box-shadow: inset 0 0 0 2px #3ddc84; }
.qz-feedback.is-wrong { box-shadow: inset 0 0 0 2px #ff5c7a; }
.qz-feedback.pop { animation: qz-pop .35s ease; }
@keyframes qz-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
.qz-verdict { font-weight: 1000; font-size: 22px; margin: 0 0 6px; }
.is-right .qz-verdict { color: #3ddc84; text-shadow: 0 0 14px rgba(61, 220, 132, .5); }
.is-wrong .qz-verdict { color: #ff8da1; }
.qz-explain { font-weight: 600; font-size: 16px; line-height: 1.45; margin: 0 0 8px; }
.qz-more { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.qz-more a, .qz-words a { color: #7fe7ff; }
.qz-crowd { font-size: 13px; font-weight: 700; color: #bfd3e6; margin: 0 0 6px; }
.qz-nextrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.qz-next { font-size: 18px; padding: 14px 24px; min-width: 0; border-radius: 18px; }
.qz-report-link { background: none; border: 0; color: #bfd3e6; text-decoration: underline; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0 4px; }
.qz-report { margin-top: 10px; }
.qz-note-input { width: 100%; box-sizing: border-box; border-radius: 12px; border: 2px solid rgba(127, 231, 255, .35); background: #07122b; color: #fff; font: inherit; padding: 10px; margin: 6px 0 8px; }
.qz-send { font-size: 16px; padding: 12px 20px; min-width: 0; background: linear-gradient(135deg, var(--sol-grape), var(--sol-sky)); }

.qz-lifeback { position: fixed; inset: 0; z-index: 50; background: rgba(3, 8, 24, .7); display: grid; place-items: center; padding: 16px; }
.qz-lifebox {
  width: min(100%, 480px); max-height: calc(100vh - 32px); overflow: auto; background: #0b1838; color: #eaf6ff; border-radius: 22px; padding: 20px;
  box-shadow: 0 0 0 3px #00cfff, 0 24px 60px rgba(0, 0, 0, .5); text-align: left;
}
.qz-life-h { margin: 0 0 8px; font-weight: 900; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #7fe7ff; }
.qz-life-term { font-weight: 1000; font-size: 22px; margin: 0 0 8px; }
.qz-life-text { font-weight: 600; font-size: 16px; line-height: 1.5; margin: 0 0 10px; }
.qz-life-close { font-size: 17px; padding: 12px 20px; min-width: 0; margin-top: 6px; }

/* ---- the end of a round ----------------------------------------------- */
.qz-results { padding-top: 6px; }
.qz-board { max-width: 380px; }
.qz-final { display: block; margin-top: 6px; font-weight: 1000; font-size: clamp(60px, 18vw, 100px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 5px 0 #ff2e8a, 0 0 26px rgba(255, 210, 63, .8); }
.qz-final-pts { display: block; margin-top: 4px; font-weight: 900; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #ffd23f; }
.qz-lamps-end { margin: 4px auto 6px; max-width: 260px; }
.qz-lamps-end i { flex: 0 0 14px; height: 14px; }
.qz-final-line { font-weight: 900; font-size: 18px; margin: 8px 0 4px; }
.qz-newbest { display: inline-block; }
.qz-change { background: rgba(255, 255, 255, .16); color: #fff; font-size: 17px; padding: 12px 20px; min-width: 0; margin-top: 12px; }
.qz-words { background: rgba(11, 6, 40, .92); color: #eaf6ff; border-radius: 20px; padding: 14px 18px; margin: 20px auto 0; max-width: 480px; text-align: left; box-shadow: 0 0 0 2px rgba(0, 207, 255, .4); }
.qz-words ul { margin: 0; padding-left: 20px; columns: 2; column-gap: 20px; }
.qz-words li { margin: 3px 0; font-weight: 700; break-inside: avoid; }
.qz-allgames { margin-top: 16px; }
@media (max-width: 380px) { .qz-words ul { columns: 1; } }

@media (prefers-reduced-motion: reduce) {
  .qa-beam, .qa-up .qa-beam { animation: none; transform: rotate(var(--r0)); }
  .qa-bulbs i, .qa-up .qa-bulbs i, .qa-up .qa-flash, .qa-up .qa-ph, .qa-up .qa-front, .qa-up .qa-back, .qa-down .qa-spot { animation: none; }
  .qa-down .qa-spot { opacity: 1; }
  .qz-marquee, .qz-lamps i.is-now, .qz-choice.right, .qz-plus, .qz-feedback.pop { animation: none; }
  .qz-choice, .qz-opt, .qz-qcard { transition: none; }
}

/* ======================================================================
 * The games home, redesigned 13 Oct 2026 (owner: the quiz on top, "modern
 * … with some type of graphics", HashMinium "as a square banner like an
 * ad, coming soon", and the arcade without scrolling all the way down).
 *
 *   desktop  quiz hero (two thirds) | HashMinium square
 *            daily games, two compact tiles
 *            arcade, four across
 *   phone    quiz hero, daily (side by side), arcade as a sideways strip,
 *            then the HashMinium square
 * ==================================================================== */

.pl { max-width: 1080px; }
.pl-top { display: flex; align-items: center; gap: 12px 16px; padding: 4px 0 10px; flex-wrap: wrap; }
.pl-title { margin: 0; flex: 1 1 260px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; line-height: 1; }
.pl-title-play {
  font-weight: 1000; font-size: 30px; letter-spacing: -.01em; padding: 4px 12px 6px; border-radius: 12px; transform: rotate(-3deg);
  background: linear-gradient(100deg, #ffd23f, #ff7a00); color: #1b0b3a; box-shadow: 0 5px 0 rgba(27, 11, 58, .35);
}
.pl-title-sub { font-weight: 800; font-size: 15px; }
.pl-home { margin-left: auto; }

/* The ticker: every game's name, sliding by. */
.pl-ticker { overflow: hidden; border-radius: 999px; background: rgba(7, 18, 43, .55); margin: 0 0 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pl-ticker-run { display: flex; gap: 28px; width: max-content; padding: 7px 0; font-weight: 800; font-size: 14px; white-space: nowrap; animation: pl-tick 60s linear infinite; }
@keyframes pl-tick { to { transform: translateX(-50%); } }

.pl-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "quiz" "arcade" "daily" "hm"; }
@media (min-width: 620px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); grid-template-areas: "quiz quiz" "daily hm" "arcade arcade"; }
}
@media (min-width: 1000px) {
  .pl-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "quiz hm" "daily daily" "arcade arcade"; }
}

/* ---- the quiz, the featured game -------------------------------------- */
.pl-quiz {
  grid-area: quiz; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  border-radius: 28px; padding: 22px; color: #eaf6ff;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(0, 207, 255, .35), transparent 60%),
    radial-gradient(420px 240px at 0% 100%, rgba(123, 47, 247, .45), transparent 60%),
    linear-gradient(135deg, #07122b 0%, #0d2a55 55%, #0a4a78 100%);
  box-shadow: 0 0 0 3px rgba(0, 207, 255, .65), 0 14px 0 rgba(27, 11, 58, .3), 0 26px 50px rgba(27, 11, 58, .35);
}
.pl-quiz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(127, 231, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 231, 255, .5) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 70%); mask-image: radial-gradient(circle at 70% 40%, #000, transparent 70%);
}
@media (min-width: 620px) { .pl-quiz { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; padding: 26px 26px 26px 30px; } }
.pl-quiz-copy { position: relative; z-index: 1; }
.pl-kicker { display: inline-block; font-weight: 900; font-size: 11px; letter-spacing: .2em; color: #03101e; background: #7fe7ff; padding: 5px 10px; border-radius: 999px; }
.pl-quiz-h { margin: 12px 0 8px; font-weight: 1000; font-size: clamp(32px, 7.4vw, 50px); line-height: .98; letter-spacing: -.02em; text-shadow: 0 4px 0 #0a4a78; }
.pl-quiz-prove { display: block; margin-top: 4px; color: #ffd23f; text-transform: uppercase; text-shadow: 0 4px 0 #ff2e8a, 0 0 24px rgba(255, 210, 63, .55); transform: rotate(-2deg); transform-origin: left center; }
.pl-quiz-line { margin: 0 0 16px; font-weight: 700; font-size: 16px; line-height: 1.4; color: #cfe6f7; max-width: 38ch; }
.pl-quiz-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pl-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 18px; text-decoration: none;
  font-weight: 1000; font-size: 20px; color: #1b0b3a; background: linear-gradient(135deg, #ffd23f, #ff9f1c);
  box-shadow: 0 7px 0 rgba(0, 0, 0, .3), 0 14px 28px rgba(0, 0, 0, .3); transition: transform .12s ease, box-shadow .12s ease;
}
.pl-btn::after { content: "→"; font-size: 22px; }
.pl-btn:hover { transform: translateY(-2px); }
.pl-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 6px 14px rgba(0, 0, 0, .3); }
.pl-btn:focus-visible, .pl-topics a:focus-visible, .pl-hm:focus-visible, .pl-day:focus-visible { outline: 4px solid #ffd23f; outline-offset: 4px; }
.pl-quiz-best { background: rgba(255, 255, 255, .14) !important; color: #fff !important; font-size: 14px; }
.pl-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pl-topics a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: 14px; color: #eaf6ff; border: 2px solid rgba(127, 231, 255, .45); background: rgba(255, 255, 255, .06);
}
.pl-topics a:hover { border-color: #00cfff; background: rgba(0, 207, 255, .15); }
.pl-quiz-art { position: relative; z-index: 0; display: none; }
@media (min-width: 620px) { .pl-quiz-art { display: block; } }
.pl-quiz-svg { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.pl-float { animation: pl-float 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pl-f2 { animation-delay: -1.2s; animation-duration: 5.2s; }
.pl-f3 { animation-delay: -2.4s; animation-duration: 4s; }
.pl-f4 { animation-delay: -3s; animation-duration: 3.6s; }
@keyframes pl-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-3deg); } }
.pl-right { animation: pl-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.pl-spark { animation: pl-twinkle 2.2s ease-in-out infinite; }
@keyframes pl-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
.pl-orbit { animation: pl-spin 40s linear infinite; transform-origin: 180px 150px; }
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* ---- HashMinium, a square "coming soon" banner ------------------------ */
.pl-hm {
  grid-area: hm; position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 28px; text-decoration: none; color: #fff;
  width: 100%; max-width: 420px; justify-self: center; align-self: start;
  box-shadow: 0 0 0 3px rgba(0, 207, 255, .55), 0 14px 0 rgba(27, 11, 58, .3), 0 26px 50px rgba(27, 11, 58, .35);
  transition: transform .15s ease;
}
@media (min-width: 620px) { .pl-hm { max-width: none; align-self: end; } }
@media (min-width: 1000px) { .pl-hm { align-self: start; } }
.pl-hm { container-type: inline-size; }
@container (max-width: 300px) {
  .pl-hm-line { display: none; }
  .pl-hm-copy { padding: 14px; }
}
.pl-hm:hover { transform: translateY(-3px); }
.pl-hm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-chain { animation: pl-float 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pl-stars { animation: pl-twinkle 3s ease-in-out infinite; }
.pl-hm-ribbon {
  position: absolute; top: 22px; right: -46px; transform: rotate(45deg); width: 190px; text-align: center; padding: 6px 0;
  background: #ffd23f; color: #1b0b3a; font-weight: 1000; font-size: 12px; letter-spacing: .14em; box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.pl-hm-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; display: grid; gap: 4px; background: linear-gradient(180deg, transparent, rgba(3, 10, 22, .92) 38%); }
.pl-hm-kick { font-weight: 900; font-size: 11px; letter-spacing: .2em; color: #7fe7ff; }
.pl-hm-name { font-weight: 1000; font-size: clamp(22px, 13cqi, 46px); line-height: 1; text-shadow: 0 0 18px rgba(0, 207, 255, .6); }
.pl-hm-line { font-weight: 700; font-size: 14px; color: #dbe9f7; }
.pl-hm-go { justify-self: start; margin-top: 6px; background: linear-gradient(100deg, #00cfff, #7fe7ff); color: #03101e; font-weight: 1000; font-size: 14px; padding: 8px 14px; border-radius: 999px; }

/* ---- daily, compact --------------------------------------------------- */
.pl-daily { grid-area: daily; }
.pl-sec { margin: 0 0 10px; font-weight: 1000; font-size: clamp(26px, 6vw, 34px); text-shadow: 0 4px 0 var(--sol-grape); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; text-align: left; }
.pl-sec-note { font-weight: 800; font-size: 14px; text-shadow: none; opacity: .95; }
.pl-daily-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-day {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon name" "icon line" "foot foot"; column-gap: 12px; row-gap: 2px;
  align-items: center; text-decoration: none; color: #fff; border-radius: 22px; padding: 14px 16px;
  box-shadow: 0 8px 0 rgba(27, 11, 58, .25), 0 16px 32px rgba(27, 11, 58, .28); transition: transform .15s ease;
}
.pl-day:hover { transform: translateY(-2px) rotate(-.4deg); }
.pl-day-scam { background: linear-gradient(135deg, var(--sol-scam) 0%, #ff7a00 70%, #ffb000 120%); }
.pl-day-cryptle { background: linear-gradient(135deg, #12b76a 0%, #00b4ff 80%); }
.pl-day-icon { grid-area: icon; font-size: 34px; line-height: 1; }
.pl-day-name { grid-area: name; font-weight: 1000; font-size: 22px; line-height: 1.05; }
.pl-day-line { grid-area: line; font-weight: 700; font-size: 14px; }
.pl-day-foot { grid-area: foot; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pl-day .gm-tile-status { padding: 7px 12px; font-size: 14px; }
.pl-day .gm-tile-streak { padding: 6px 10px; font-size: 13px; }
@media (max-width: 560px) {
  .pl-day { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "name" "line" "foot"; padding: 12px; }
  .pl-day-icon { font-size: 28px; }
  .pl-day-name { font-size: 19px; }
  .pl-day-line { font-size: 13px; }
}

/* ---- arcade: four across, a sideways strip on phones ------------------ */
.pl-arcade { grid-area: arcade; }
@media (max-width: 759px) {
  .pl-arcade-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .pl-arcade-grid .ar-tile { scroll-snap-align: start; }
}
.pl .gm-also { text-align: left; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .pl-ticker-run, .pl-float, .pl-right, .pl-spark, .pl-orbit, .pl-chain, .pl-stars { animation: none; }
  .pl-btn, .pl-hm, .pl-day { transition: none; }
}

/* Phones: a two-line header, a smaller picture on the quiz, topics in one
   sideways row, so the arcade comes up within a thumb's scroll. */
@media (max-width: 619px) {
  .pl-top { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
  .pl-home { display: none; }
  .pl-title { flex: 1 1 auto; gap: 4px 8px; }
  .pl-title-play { font-size: 22px; padding: 3px 10px 5px; }
  .pl-title-sub { flex-basis: 100%; font-size: 13px; line-height: 1.3; }
  .pl-ticker { margin-bottom: 12px; }
  .pl-ticker-run { font-size: 13px; padding: 6px 0; }
  .pl-quiz { padding: 16px 18px 18px; }
  .pl-quiz-art { display: block; order: -1; margin: -4px 0 2px; }
  .pl-quiz-svg { max-height: 150px; }
  .pl-quiz-h { margin-top: 10px; }
  .pl-quiz-line { font-size: 15px; margin-bottom: 14px; }
  .pl-topics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 14px -18px 0; padding: 0 18px 2px; }
  .pl-topics::-webkit-scrollbar { display: none; }
  .pl-topics a { flex: 0 0 auto; }
  .pl-quiz-best { display: none; }
  .pl-day .gm-tile-status { font-size: 13px; padding: 6px 10px; }
}