/* THE FUCK-UP CLUB — one stylesheet, zero effort, maximum contrast */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --yellow: #ffff00;
  --green: #00ff00;
  --grey: #444444;
  --grey-2: #9a9a9a;
  --max: 1200px;
  --pad: clamp(20px, 6vw, 96px);
}

* { box-sizing: border-box; }

html { background: var(--bg); color: var(--fg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-bottom: 96px; }
html.lang-loading body { visibility: hidden; }

body {
  margin: 0;
  padding-bottom: 76px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.35;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

body.flash { background: var(--fg); }
body.flash * { visibility: hidden; }

:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 900; }
/* Last resort only: a word with no break in it must fold instead of shoving the page
   sideways on a 320px screen. Headings are worded so this never has to happen. */
h1, h2, h3 { overflow-wrap: break-word; }
h1 { font-size: clamp(44px, 10vw, 140px); }
h2 { font-size: clamp(32px, 6vw, 84px); }
h3 { font-size: clamp(22px, 3vw, 40px); }
p { margin: 0; }
.yellow { color: var(--yellow); }
.green { color: var(--green); }
.grey { color: var(--grey-2); }
.small { font-size: 0.8em; }
.upper { text-transform: uppercase; }
.center { text-align: center; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* The strip above everything: her channel, and the coin link once the owner fills it in. */
.topbar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 22px;
  padding: 0 clamp(12px, 3.2vw, 56px); background: #0b0b0b; border-bottom: 2px solid #1f1f1f;
  font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em;
  position: relative; z-index: 6;
}
.topbar a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 4px 0; text-decoration: none; color: var(--fg); }
.topbar a.topbar-tg { direction: ltr; unicode-bidi: isolate; }
.topbar a.topbar-tg:hover, .topbar a.topbar-tg:focus-visible { color: #29a9eb; }
.topbar a.topbar-coin {
  background: var(--yellow); color: var(--bg); padding: 3px 18px 3px 7px; gap: 10px;
  position: relative; overflow: hidden; margin: 5px 0;
}
/* A strip of light walks across the chip every few seconds. Nobody scrolls past it. */
.topbar a.topbar-coin::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; inset-inline-start: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: coinshine 4.2s ease-in-out infinite;
}
@keyframes coinshine { 0%, 62% { transform: translateX(-280%); } 100% { transform: translateX(400%); } }
.topbar a.topbar-coin:hover, .topbar a.topbar-coin:focus-visible { background: var(--green); }
.topbar a[hidden] { display: none; }
/* The handle is a name, not a phrase: it reads left to right in Arabic too. */
.tg-handle { direction: ltr; unicode-bidi: isolate; opacity: 0.75; }

/* ---------- the coin itself ----------
   Milled rim, flat face, her logo stamped in the middle, and a real second side so the
   flip never shows a mirrored logo. Drawn in CSS so it stays sharp at any size. */
.tcoin { position: relative; flex: none; aspect-ratio: 1; transform-style: preserve-3d; animation: coinflip 5.5s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
/* closest-side, not the default farthest-corner: the gradient has to end where the
   border-radius cuts, otherwise the milled rim is drawn outside the circle and clipped away. */
.tcoin-face {
  position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden;
  background:
    radial-gradient(circle closest-side, var(--yellow) 0 74%, var(--bg) 74% 85%, transparent 85%),
    repeating-conic-gradient(from 0deg, var(--yellow) 0 9deg, #1a1a1a 9deg 18deg);
}
.tcoin-face.back { transform: rotateY(180deg); }
.tcoin-face img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; }
@keyframes coinflip { 0%, 58% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.topbar-coin { perspective: 140px; }
.topbar-coin .tcoin { width: 34px; }
/* Thirty teeth turn to mush at 34px, so the small strike gets a dozen of them. */
.topbar-coin .tcoin-face {
  background:
    radial-gradient(circle closest-side, var(--yellow) 0 78%, var(--bg) 78% 88%, transparent 88%),
    repeating-conic-gradient(from 0deg, var(--yellow) 0 15deg, #1a1a1a 15deg 30deg);
}
.topbar-coin span { position: relative; z-index: 1; }

/* header */
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px clamp(18px, 3.2vw, 56px);
  border-bottom: 4px solid var(--fg);
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 900; font-size: clamp(18px, 2vw, 26px); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; }
.brand img { width: 58px; height: 58px; object-fit: contain; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-weight: 700; text-transform: uppercase; font-size: clamp(13px, 1.2vw, 17px); }
.nav a { text-decoration: none; padding: 4px 0; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a.active { border-bottom-color: var(--yellow); color: var(--yellow); }
/* Only ever visible on a phone, where six menu items cannot share a row with the wordmark. */
.menubtn { display: none; flex: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 9px; background: none; border: 3px solid var(--fg); }
.menubtn span { display: block; height: 3px; background: var(--fg); transition: transform 0.18s, opacity 0.18s; }
.menubtn[aria-expanded="true"] { background: var(--yellow); border-color: var(--yellow); }
.menubtn[aria-expanded="true"] span { background: var(--bg); }
.menubtn[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
.menubtn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menubtn[aria-expanded="true"] span:last-child { transform: translateY(-8px) rotate(-45deg); }
.langwrap { position: relative; }
.langbtn {
  background: var(--fg); color: var(--bg); border: 0; padding: 12px 18px; font-weight: 900; text-transform: uppercase;
  font-size: 16px; white-space: nowrap;
  /* The label shrinks on narrow phones; the thumb target must not shrink with it. */
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
}
.langbtn:hover { background: var(--yellow); }
.langlist {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); background: var(--fg); color: var(--bg);
  list-style: none; margin: 0; padding: 8px; min-width: 460px; display: none; z-index: 20;
  /* Fifteen languages in one column would run off the bottom of a laptop screen. */
  grid-template-columns: repeat(2, 1fr); gap: 2px;
  box-shadow: 0 0 0 4px var(--yellow);
}
.langlist.open { display: grid; }
.langlist button { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 12px 14px; font-weight: 700; font-size: 16px; color: var(--bg); white-space: nowrap; }
.langlist button:hover { background: var(--yellow); }
.langlist button.current { background: var(--bg); color: var(--yellow); }


/* sections */
main { flex: 1; }
.section { padding: clamp(56px, 9vw, 140px) 0; border-bottom: 4px solid var(--fg); }
.section:last-child { border-bottom: 0; }
.section.tight { padding: clamp(36px, 5vw, 80px) 0; }
.lead { font-size: clamp(22px, 3vw, 44px); font-weight: 700; margin-top: 24px; line-height: 1.15; }
.callout { display: inline-block; margin-top: 40px; background: var(--yellow); color: var(--bg); font-weight: 900; padding: 18px 26px; font-size: clamp(20px, 2.6vw, 38px); line-height: 1.1; text-transform: uppercase; }
.callout-green { background: var(--green); }
.honest { margin-top: 40px; color: var(--green); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); }
.stack > * + * { margin-top: 28px; }
.quote { font-size: clamp(22px, 3vw, 40px); font-weight: 700; line-height: 1.2; padding-inline-start: 24px; border-inline-start: 12px solid var(--yellow); }
.quote.green { border-inline-start-color: var(--green); color: var(--fg); }

/* buttons */
.btn {
  display: inline-block; text-decoration: none; text-align: center; border: 0; text-transform: uppercase; font-weight: 900;
  padding: 22px 34px; font-size: clamp(18px, 2vw, 28px); line-height: 1; color: var(--bg); background: var(--fg);
  user-select: none;
  /* A button never grows wider than the box it sits in: some languages have one very long
     word, and on a 320px phone that word used to push the whole page sideways. */
  max-width: 100%; overflow-wrap: break-word;
}
.btn:hover { filter: brightness(0.85); }
.btn:active { transform: translateY(2px); }
.btn-green { background: var(--green); }
.btn-yellow { background: var(--yellow); }
.btn-outline { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 4px var(--fg); }
.btn-outline:hover { background: var(--fg); color: var(--bg); filter: none; }
.btn-huge { padding: 30px 44px; font-size: clamp(24px, 3.4vw, 48px); }
.btn-small { padding: 12px 18px; font-size: 14px; }
.btn-grey { background: var(--grey); color: #bbb; }
/* The label and the handle break onto separate lines rather than the label breaking
   inside itself, which on a phone left a three-line word stack next to the handle. */
.btn-tg { background: #2aabee; color: #000; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; }
.btn-tg span { white-space: nowrap; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; align-items: center; }

/* members counter */
/* The height is held from the start: the number arrives a beat after the page does, and it
   must not push everything under it down when it lands. */
.counter { margin-top: 40px; min-height: 2.3em; font-size: clamp(16px, 1.6vw, 22px); color: var(--grey-2); font-weight: 700; }
.counter b { color: var(--fg); font-size: 1.4em; }
.ticker { margin-top: 22px; min-height: 2.8em; color: var(--yellow); font-weight: 700; font-size: clamp(16px, 1.5vw, 22px); max-width: 920px; }
.tick-addr { direction: ltr; unicode-bidi: isolate; }
.counter[hidden] { display: none; }

/* coins */
.coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.coin {
  position: relative; aspect-ratio: 1 / 1; background: var(--fg); color: var(--bg); border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-weight: 900; font-size: clamp(24px, 4vw, 56px); text-transform: uppercase; line-height: 1; padding: 12px;
}
.coin small { font-size: clamp(13px, 1.2vw, 16px); font-weight: 700; text-transform: none; text-align: center; color: #333; }
.coin:hover, .coin:focus-visible { background: var(--yellow); outline: none; }
.coin.none { background: var(--grey); color: var(--fg); font-size: clamp(14px, 2vw, 26px); }
.coin.none small { color: #ccc; }
.coin.none:hover { background: var(--grey-2); }
.coin-icon { width: 34%; height: 34%; }

/* hover hint — parked beside the tile, never chasing the cursor */
.hint {
  position: fixed; z-index: 30; display: none;
  background: var(--fg); color: var(--bg); width: 330px; padding: 18px; font-size: 16px; font-weight: 700; line-height: 1.3;
  box-shadow: 0 0 0 4px var(--yellow);
}
.hint.on { display: block; }
.hint img { display: block; width: 210px; height: 210px; margin: 14px auto 0; }
.hint code {
  display: block; margin-top: 12px; padding: 10px 12px; background: var(--bg); color: var(--fg);
  font-size: 14px; line-height: 1.5; letter-spacing: 0.02em; word-break: break-all;
  -webkit-user-select: all; user-select: all;
}
.hint .hint-copy {
  margin-top: 12px; display: block; width: 100%; border: 0; cursor: pointer;
  background: var(--green); color: var(--bg); padding: 13px 10px; font-size: 14px; font-weight: 900; text-transform: uppercase;
}
.hint .hint-copy:hover { filter: brightness(0.92); }

.dock {
  position: fixed; z-index: 40; inset-inline: 0; bottom: 0;
  background: var(--green); color: var(--bg); text-align: center; text-decoration: none;
  font-weight: 900; text-transform: uppercase; padding: 16px 12px;
  font-size: clamp(16px, 2vw, 24px); letter-spacing: 0.02em;
}
.dock:hover { filter: brightness(0.92); }
body.paying { padding-bottom: 0; }
body.paying .dock { display: none; }

/* payment */
.pay { display: none; margin-top: 40px; }
.pay.on { display: block; }
.pay-grid { display: grid; grid-template-columns: minmax(260px, 480px) 1fr; gap: 40px; align-items: start; }
.qr { background: var(--fg); padding: 16px; width: 100%; max-width: 480px; }
.qr img { width: 100%; height: auto; }
.pay-title { font-size: clamp(28px, 4vw, 64px); font-weight: 900; text-transform: uppercase; line-height: 1; }
.pay-taunt { margin-top: 14px; font-size: clamp(19px, 2.2vw, 30px); font-weight: 900; line-height: 1.15; }
.pay-net { margin-top: 14px; color: var(--yellow); font-weight: 700; text-transform: uppercase; }

.addr-block { margin-top: 26px; }
.addr-label { font-size: 14px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 10px; }
.addr {
  font-family: "Courier New", Courier, monospace; font-weight: 700;
  font-size: clamp(17px, 1.75vw, 25px); line-height: 1.55; letter-spacing: 0.02em;
  word-break: break-all; background: #0d0d0d; color: var(--fg);
  padding: 20px 22px; border: 3px solid var(--yellow); cursor: pointer;
  /* One click or tap selects the whole key, so it can be copied by hand too. */
  -webkit-user-select: all; user-select: all;
}
.addr:hover, .addr:focus-visible { background: #1d1d00; outline: none; }
.addr.copied { border-color: var(--green); color: var(--green); }
.btn-copy { margin-top: 12px; }
.btn-white { background: var(--fg); color: var(--bg); }
.btn-white:hover { background: var(--yellow); }
.pay-msg { margin-top: 20px; min-height: 1.4em; color: var(--green); font-weight: 700; }
.pity-zone { position: relative; height: 90px; margin-top: 20px; }
.pity { position: absolute; left: 0; top: 0; transition: left 0.12s, top 0.12s; max-width: 100%; white-space: normal; text-align: start; }
.pity.done { position: static; }
.back { display: inline-block; margin-top: 32px; color: var(--grey-2); text-decoration: underline; background: none; border: 0; font-size: 16px; }

/* airdrop */
.drop { text-align: center; position: relative; overflow: hidden; }
/* The bottle stands quietly in the corner. Nobody has to notice it; the ones who do will
   work out what "sit down" was about. Never in the flow, so it cannot widen the page. */
.bottle {
  position: absolute; inset-block: 0; inset-inline-end: 3%; margin-block: auto;
  height: clamp(130px, 22vw, 300px); width: auto; color: var(--green); opacity: 0.1;
  pointer-events: none;
}
.timer { font-size: clamp(64px, 18vw, 260px); font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--green); font-variant-numeric: tabular-nums; margin-top: 24px; position: relative; }
.timer.danger { color: var(--yellow); }
/* Half a second of the number physically recoiling, so a reset is felt and not just read. */
.timer.reset { color: var(--fg); animation: timerreset 0.45s ease both; }
@keyframes timerreset {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3%); }
  45% { transform: translateX(2.4%); }
  70% { transform: translateX(-1.4%); }
  88% { transform: translateX(0.7%); }
}
.dropnote { margin-top: 26px; font-weight: 900; font-size: clamp(17px, 1.8vw, 24px); }
/* She only raises her voice when he has just lost three minutes of his life. */
.dropnote.hot { color: var(--yellow); }

/* modals */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px;
  transition: background 0.7s ease;
}
.overlay.on { display: flex; }
.overlay.dim { background: rgba(0,0,0,0.85); }
.modal {
  background: var(--fg); color: var(--bg); width: 100%; max-width: 720px; padding: clamp(28px, 4vw, 56px);
  opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease;
  max-height: 90vh; overflow: auto;
}
.overlay.dim .modal { opacity: 1; transform: none; }
.modal h2 { font-size: clamp(28px, 4vw, 56px); }
.modal h3 { font-size: clamp(22px, 3vw, 36px); }
.modal p { margin-top: 18px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; line-height: 1.3; }
.modal .btn { margin-top: 32px; width: 100%; background: var(--bg); color: var(--fg); }
/* Some of her buttons are whole sentences pretending to be buttons. They wrap, so they
   need room between the lines and a size that does not swallow a phone screen. */
.modal .btn.btn-say { font-size: clamp(14px, 3.4vw, 18px); line-height: 1.25; padding: 16px 18px; }
.modal .btn:hover { background: #222; filter: none; }
.modal .btn.btn-green { background: var(--green); color: var(--bg); }
.modal .btn.btn-yellow { background: var(--yellow); color: var(--bg); }
.modal textarea, .modal input {
  width: 100%; margin-top: 20px; padding: 16px; font: inherit; font-size: 18px; border: 4px solid var(--bg); background: var(--fg); color: var(--bg); resize: vertical;
}
.modal .big { font-size: clamp(30px, 5vw, 64px); font-weight: 900; text-transform: uppercase; line-height: 1; margin-top: 12px; }
/* Square rather than glyph-sized: a 28px × is a miss on a phone. */
.modal .close { position: sticky; float: right; top: 0; background: none; border: 0; font-size: 28px; font-weight: 900; color: var(--bg); width: 44px; height: 44px; margin: -10px -10px 0 6px; line-height: 1; padding: 0; }
.modal.gone { transition: transform 0.9s cubic-bezier(.5,-0.2,.9,.6), opacity 0.9s; transform: translate(35vw, 60vh) scale(0.05) rotate(25deg) !important; opacity: 0 !important; }
.trashbin { position: fixed; right: 24px; bottom: 24px; font-size: 64px; z-index: 60; display: none; filter: grayscale(1) brightness(3); }
.trashbin.on { display: block; }
/* The hash gate. This modal is white, so acid green and acid yellow cannot carry the
   verdict as text; a small block of colour in front of the line does it instead. */
.jmsg { min-height: 1.4em; margin-top: 10px; font-size: 0.85em; font-weight: 700; }
.jmsg.ok::before, .jmsg.bad::before {
  content: ''; display: inline-block; width: 0.7em; height: 0.7em;
  margin-inline-end: 0.5em; background: var(--bg);
}
.jmsg.ok::before { background: var(--green); }
.modal input.good { border-color: var(--green); }
/* A hash is 64 characters of gibberish: it has to be readable and it has to fit. */
/* A hash has no language and no direction, so it is left to run left-to-right even on the
   Arabic and Urdu pages, where an RTL box would otherwise show him the tail of it. */
.modal input#hash { font-family: "Courier New", monospace; font-size: 15px; letter-spacing: 0; direction: ltr; text-align: start; }
/* She reselects what he got wrong so he can type over it; the browser's own blue has no
   business on this site. */
.modal input#hash::selection { background: var(--bg); color: var(--fg); }
#jcheck { margin-top: 22px; }
.loader { margin-top: 24px; height: 18px; background: #ddd; overflow: hidden; }
.loader i { display: block; height: 100%; width: 0; background: var(--bg); transition: width 5s linear; }
.loader.go i { width: 100%; }

/* lists */
.list { list-style: none; margin: 32px 0 0; padding: 0; }
.list li { padding: 18px 0; border-top: 2px solid var(--grey); font-size: clamp(17px, 1.6vw, 24px); line-height: 1.35; }
.list li:last-child { border-bottom: 2px solid var(--grey); }
.list code { font-family: "Courier New", Courier, monospace; color: var(--yellow); font-weight: 700; }
.list .sum { color: var(--green); font-weight: 900; }
.list.plans li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; }
.list.plans b { color: var(--yellow); font-size: 1.4em; font-weight: 900; }

.rank { margin-top: 64px; }
.rank h3 { color: var(--yellow); }
.rank.trash h3 { color: var(--grey-2); }
.rank.legend h3 { color: var(--green); }

/* faq */
.faq details { border-top: 3px solid var(--fg); }
.faq details:last-child { border-bottom: 3px solid var(--fg); }
/* The padding belongs to the summary, not the wrapper: on a phone the gap around a question
   looks like part of the row, and tapping it has to open the answer. */
.faq summary { cursor: pointer; font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2.2vw, 32px); list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--yellow); flex-shrink: 0; }
.faq details[open] summary { padding-bottom: 14px; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 22px; font-size: clamp(17px, 1.6vw, 24px); color: #ddd; }

/* calculator */
.calc { margin-top: 40px; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; cursor: pointer; margin: 0; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 16px; background: var(--fg); border: 0; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 48px; margin-top: -16px; background: var(--yellow); border: 4px solid var(--bg); border-radius: 0; }
.calc input[type=range]::-moz-range-track { height: 16px; background: var(--fg); border: 0; }
.calc input[type=range]::-moz-range-thumb { width: 32px; height: 40px; background: var(--yellow); border: 4px solid var(--bg); border-radius: 0; }
.calc input[type=range]:focus-visible { outline: none; }
.calc input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--green); }
.calc-ends { display: flex; justify-content: space-between; margin-top: 4px; color: var(--grey-2); font-weight: 900; font-size: 15px; }
.calc-amount { font-size: clamp(56px, 12vw, 160px); font-weight: 900; line-height: 1; color: var(--yellow); letter-spacing: -0.04em; }
.calc-text { margin-top: 24px; font-size: clamp(20px, 2.6vw, 38px); font-weight: 700; line-height: 1.2; min-height: 3em; }
.calc-profit { margin-top: 16px; color: var(--green); font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2vw, 28px); }

/* illustration */
.frame, .art { margin-top: 48px; background: var(--fg); padding: 16px; }
.frame.slim { max-width: 560px; margin-left: auto; margin-right: auto; margin-top: 0; }
.frame img, .art img, .art svg { width: 100%; height: auto; display: block; }
.frame figcaption, .art-cap { margin-top: 12px; color: #333; font-size: 15px; font-weight: 900; text-transform: uppercase; }
.hero-row { display: grid; grid-template-columns: 1fr minmax(240px, 420px); gap: 56px; align-items: start; }
.hero-row .frame { margin-top: 0; }

/* game */
.game-wrap { margin-top: 32px; }
.game-hud { display: flex; flex-wrap: wrap; gap: 14px 32px; font-weight: 900; text-transform: uppercase; font-size: clamp(16px, 1.6vw, 22px); }
.game-hud b { color: var(--yellow); }
#game { display: block; width: 100%; max-width: 900px; height: auto; background: #050505; border: 4px solid var(--fg); margin: 16px auto 0; touch-action: none; }
.game-over { display: none; margin-top: 24px; background: var(--yellow); color: var(--bg); padding: 24px; font-weight: 900; font-size: clamp(20px, 2.6vw, 36px); text-transform: uppercase; line-height: 1.1; }
.game-over.on { display: block; }

/* rank — the same widget on the home page and above the trials */
.rankbox { border: 4px solid var(--fg); padding: clamp(20px, 3vw, 34px); margin-top: 40px; }
.rank-top { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; justify-content: space-between; }
.rank-label { font-size: 14px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-2); }
.rank-name { font-size: clamp(30px, 5.4vw, 68px); font-weight: 900; text-transform: uppercase; line-height: 1; color: var(--yellow); letter-spacing: -0.02em; }
.rank-count { font-weight: 900; color: var(--grey-2); font-size: 15px; white-space: nowrap; }
.rank-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 20px; }
.rank-bar i { height: 22px; background: #1e1e1e; display: block; }
.rank-bar i.on { background: var(--green); }
.rank-bar i.gold { background: var(--yellow); }
.rank-say { margin-top: 18px; font-weight: 700; font-size: clamp(17px, 1.7vw, 24px); line-height: 1.3; }
/* The grind, spelled out: how many points he has and how far the next rank still is. */
.rank-pts { margin-top: 20px; }
.rank-pts span { display: block; font-weight: 900; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.rank-pts i { display: block; height: 10px; margin-top: 7px; background: #1e1e1e; }
.rank-pts b { display: block; height: 100%; background: var(--green); transition: width 0.4s; }
.rank-next { margin-top: 12px; font-weight: 900; font-size: clamp(15px, 1.5vw, 20px); }
.rank-earn { margin-top: 8px; color: var(--grey-2); font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; line-height: 1.35; }
.rank-memory { margin-top: 8px; color: #666; font-size: clamp(13px, 1.2vw, 16px); font-weight: 700; line-height: 1.35; }
.rank-locked { margin-top: 16px; color: var(--yellow); font-weight: 900; text-transform: uppercase; font-size: clamp(15px, 1.4vw, 19px); }
.rankbox .btn { margin-top: 18px; }

/* ---------- the coin sale ----------
   The only solid yellow band on a site that is otherwise pure black, so nobody scrolls past
   it by accident. The whole band is one link, and the whole thing stays out of the markup
   until the owner puts a real address in ssylka-na-monetu.js. */
.coinsale { padding: 0; }
.coinsale[hidden] { display: none; }
.coinsale-in {
  display: block; padding: clamp(28px, 4vw, 54px) 0;
  background: var(--yellow); color: var(--bg); text-decoration: none;
  border-block: 6px solid var(--bg);
}
/* The band bleeds edge to edge, but its contents line up with every other section. */
.coinsale-row {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 56px);
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding-inline: var(--pad); perspective: 900px;
}
.coinsale-in:hover, .coinsale-in:focus-visible { background: var(--green); }
/* The face has to read against yellow, so this one is struck the other way round:
   black metal, her logo in gold. */
.coinsale .tcoin { width: clamp(148px, 25vw, 300px); }
.coinsale .tcoin-face {
  background:
    radial-gradient(circle closest-side, #0a0a0a 0 74%, var(--yellow) 74% 85%, transparent 85%),
    repeating-conic-gradient(from 0deg, #0a0a0a 0 9deg, #5c5c00 9deg 18deg);
}
.coinsale-txt { display: block; flex: 1 1 auto; min-width: 0; }
.coinsale-kick { display: block; font-weight: 900; font-size: clamp(13px, 1.3vw, 17px); letter-spacing: 0.22em; text-transform: uppercase; }
.coinsale-title { display: block; margin-top: 6px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(30px, 5.2vw, 74px); overflow-wrap: break-word; }
.coinsale-sub { display: block; margin-top: 14px; max-width: 46ch; font-weight: 700; font-size: clamp(15px, 1.5vw, 21px); line-height: 1.3; }
.coinsale-go {
  display: inline-block; margin-top: 22px; padding: 18px 30px; background: var(--bg); color: var(--yellow);
  font-weight: 900; text-transform: uppercase; font-size: clamp(17px, 2vw, 28px); line-height: 1; max-width: 100%; overflow-wrap: break-word;
}
.coinsale-in:hover .coinsale-go { color: var(--green); }

/* ---------- the five-day warning ----------
   Yellow, because the green clock on the home page is his humiliation and this one is hers.
   Like the band above it, none of this exists until the coin link is filled in. */
.rug { border-block: 6px solid var(--yellow); }
.rug[hidden] { display: none; }
.rug-kick { margin: 0; color: var(--yellow); font-weight: 900; font-size: clamp(12px, 1.3vw, 16px); letter-spacing: 0.2em; text-transform: uppercase; }
.rug h2 { margin-top: 12px; }
/* Digits count down, so they never flip direction, and a fixed-width figure keeps the
   whole row from twitching sideways once a second. */
.rugclock { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(4px, 1.2vw, 16px); margin-top: clamp(20px, 3vw, 36px); direction: ltr; font-variant-numeric: tabular-nums; }
.rugcell { display: flex; flex-direction: column; align-items: center; }
.rugcell b { font-size: clamp(46px, 11vw, 148px); line-height: 0.85; font-weight: 900; color: var(--yellow); }
.rugcell i { margin-top: 10px; font-style: normal; font-weight: 900; font-size: clamp(10px, 1.1vw, 15px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.rugsep { font-size: clamp(46px, 11vw, 148px); line-height: 0.85; font-weight: 900; color: var(--grey); }
.rug-text { margin-top: clamp(20px, 2.6vw, 32px); max-width: 64ch; font-weight: 700; font-size: clamp(15px, 1.5vw, 20px); line-height: 1.45; color: var(--grey-2); }
.rug .btn { margin-top: clamp(22px, 2.6vw, 34px); }
.rug.over .rugcell b, .rug.over .rugsep { color: var(--grey); }
/* Days first stays days first in Arabic and Urdu, but the row still belongs on the right. */
[dir="rtl"] .rugclock { justify-content: flex-end; }

/* trials */
.trial { border-top: 4px solid var(--fg); padding-top: clamp(40px, 6vw, 84px); margin-top: clamp(40px, 6vw, 84px); }
.trial:first-of-type { border-top: 0; margin-top: 44px; padding-top: 0; }
.trial h2 { font-size: clamp(26px, 4.6vw, 62px); }
.trial-sub { margin-top: 16px; color: var(--grey-2); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.3; }
.trial-tag { font-size: 14px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.panel { margin-top: 28px; background: #0c0c0c; border: 4px solid var(--fg); padding: clamp(20px, 3vw, 40px); }
.opt { display: block; width: 100%; text-align: start; background: var(--fg); color: var(--bg); border: 0; padding: 18px 20px; font-weight: 900; font-size: clamp(16px, 1.7vw, 22px); line-height: 1.25; }
.opt + .opt { margin-top: 12px; }
.opt:hover, .opt:focus-visible { background: var(--yellow); outline: none; }
.step { font-size: 14px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); }
.ask { margin-top: 14px; margin-bottom: 26px; font-size: clamp(20px, 2.6vw, 36px); font-weight: 900; line-height: 1.15; }
.bar { height: 14px; background: #1e1e1e; margin-top: 18px; }
.bar i { display: block; height: 100%; background: var(--yellow); width: 0; transition: width 0.3s; }
.verdict-title { font-size: clamp(26px, 4.4vw, 56px); font-weight: 900; text-transform: uppercase; color: var(--green); line-height: 1; }
.verdict-text { margin-top: 18px; font-size: clamp(17px, 1.8vw, 26px); font-weight: 700; line-height: 1.32; }
.panel .btnrow { margin-top: 30px; }
.panel .btn { padding: 20px 28px; font-size: clamp(17px, 1.8vw, 24px); }

/* trial: hold the button */
.holdbtn { display: block; width: 100%; padding: clamp(30px, 6vw, 62px) 20px; font-size: clamp(22px, 4vw, 46px); background: var(--yellow); color: var(--bg); border: 0; font-weight: 900; text-transform: uppercase; touch-action: none; user-select: none; -webkit-user-select: none; }
.holdbtn.down { background: var(--green); }
.holdbtn:disabled { background: var(--grey); color: #bbb; cursor: not-allowed; }
.holdgoal { margin-top: 18px; font-weight: 900; text-transform: uppercase; color: var(--yellow); font-size: clamp(16px, 1.6vw, 22px); }

/* trial: wheel */
.wheelwrap { display: grid; grid-template-columns: minmax(230px, 380px) 1fr; gap: 40px; align-items: start; }
.wheelbox { position: relative; width: 100%; max-width: 380px; margin-inline: auto; }
.wheelbox canvas { width: 100%; height: auto; display: block; transition: transform 4.6s cubic-bezier(0.17, 0.67, 0.12, 1); }
.wheelpin { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 32px solid var(--yellow); z-index: 2; }

/* trial: the confession */
.vowline { font-size: clamp(19px, 2.4vw, 32px); font-weight: 900; line-height: 1.25; margin-top: 14px; font-family: "Courier New", Courier, monospace; }
.vowline b { color: var(--green); }
.vowline u { color: var(--grey-2); text-decoration: none; }
.vowinput { width: 100%; margin-top: 20px; padding: 16px; font-family: "Courier New", Courier, monospace; font-size: clamp(17px, 1.8vw, 24px); font-weight: 700; background: #0d0d0d; color: var(--fg); border: 3px solid var(--yellow); }
.vowinput:focus-visible { outline: none; border-color: var(--green); }
.vowinput.bad { border-color: #ff3b3b; animation: shake 0.24s; }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

/* trial: auction */
.auc-lot { font-weight: 900; text-transform: uppercase; color: var(--yellow); font-size: clamp(16px, 1.6vw, 22px); }
.auc-bid { font-size: clamp(48px, 11vw, 128px); font-weight: 900; color: var(--green); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-top: 10px; }
.auc-by { margin-top: 10px; font-weight: 700; color: var(--grey-2); font-size: clamp(15px, 1.4vw, 19px); }
.auc-by b { color: var(--fg); }
.auc-log { list-style: none; margin: 22px 0 0; padding: 0; max-height: 210px; overflow-y: auto; }
.auc-log li { padding: 10px 0; border-top: 2px solid var(--grey); font-size: 16px; font-weight: 700; color: var(--grey-2); }
.auc-log li.you { color: var(--yellow); }

/* chat with the mistress */
.chatdock {
  position: fixed; z-index: 41; inset-inline-end: 14px; bottom: 90px;
  background: var(--yellow); color: var(--bg); border: 0; font-weight: 900; text-transform: uppercase;
  padding: 13px 16px; font-size: 14px; box-shadow: 0 0 0 3px var(--bg); display: inline-flex; gap: 9px; align-items: center;
}
.chatdock:hover { background: var(--fg); }
.chatdock i { width: 10px; height: 10px; background: #0a0; border-radius: 50%; animation: pulse 1.5s infinite; }
.chat-ico { display: none; width: 26px; height: 26px; fill: currentColor; }
@keyframes pulse { 50% { opacity: 0.15; } }
body.paying .chatdock { bottom: 20px; }
/* Both bars sit over the bottom of the play field, where the bag being dragged lives. */
body.playing .dock, body.playing .chatdock { display: none; }
.modal.chat-modal { max-width: 560px; background: var(--bg); color: var(--fg); box-shadow: 0 0 0 4px var(--fg); padding: 0; display: flex; flex-direction: column; max-height: 86vh; }
.chat-head { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 3px solid var(--fg); flex-shrink: 0; }
.chat-head img { width: 46px; height: 46px; flex-shrink: 0; }
.chat-who { font-weight: 900; text-transform: uppercase; font-size: 18px; line-height: 1.2; }
.chat-status { font-size: 13px; color: var(--green); font-weight: 700; }
.chat-head .close { position: static; float: none; margin: 0; margin-inline-start: auto; color: var(--fg); font-size: 30px; width: 44px; height: 44px; flex: none; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 11px; min-height: 240px; }
.bub { max-width: 84%; padding: 13px 16px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.bub.her { background: var(--fg); color: var(--bg); align-self: flex-start; }
.bub.me { background: var(--green); color: var(--bg); align-self: flex-end; }
.bub.dots { color: #777; background: #161616; }
.chat-opts { border-top: 3px solid var(--fg); padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.chat-opts button { background: transparent; color: var(--fg); border: 3px solid var(--fg); padding: 13px 14px; font-weight: 900; font-size: 15px; text-align: start; line-height: 1.25; }
.chat-opts button:hover { background: var(--fg); color: var(--bg); }
/* An <a> does not inherit the button padding, so the main call to action was a 24px sliver. */
.chat-opts .pay { background: var(--green); color: var(--bg); border: 3px solid var(--green); padding: 15px 14px; font-weight: 900; font-size: 15px; line-height: 1.25; text-align: center; text-transform: uppercase; text-decoration: none; display: block; }
.chat-opts .pay:hover { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }

/* footer */
.footer { border-top: 4px solid var(--fg); padding: 40px var(--pad); display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; font-size: 15px; color: var(--grey-2); }
.audit { display: inline-flex; align-items: center; gap: 10px; background: #0a3d0a; color: var(--green); border: 3px solid var(--green); padding: 12px 18px; font-weight: 900; text-decoration: none; font-size: 15px; text-transform: uppercase; cursor: pointer; }
.audit:hover { background: var(--green); color: var(--bg); }
/* Drawn rather than an emoji: the ✅ glyph fell back to a grey box on some devices. */
.tick { width: 19px; height: 19px; flex: none; fill: currentColor; }
/* Complaints get the last line of the footer and nothing else: its own row, tucked into
   the bottom corner on the side the chat button is not on, faint and small — but with
   enough height around it to still be hit with a thumb. */
.footer-fine { flex-basis: 100%; order: 3; margin-top: -14px; }
.complain { background: none; border: 0; color: #333; font-size: 11px; padding: 15px 0; text-decoration: underline; cursor: pointer; }
.complain:hover { color: #666; }
.footer-right { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; text-align: end; }
.footer-right .tg { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); background: var(--fg); color: var(--bg); padding: 16px 24px; font-weight: 900; text-transform: uppercase; z-index: 70; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* watermark */
.watermark { position: fixed; right: -4vw; bottom: -6vw; width: clamp(200px, 32vw, 520px); opacity: 0.09; pointer-events: none; z-index: 0; }
main, .footer { position: relative; z-index: 1; }
.header { z-index: 10; }

/* Russian, German and Indonesian menus are long: shrink the header before it wraps. */
@media (min-width: 1061px) and (max-width: 1500px) {
  .header { gap: 16px; padding: 22px clamp(18px, 3vw, 44px); }
  .brand { font-size: 18px; gap: 10px; }
  .brand img { width: 48px; height: 48px; }
  .nav { font-size: 13px; gap: 4px 11px; }
  .langbtn { font-size: 13px; padding: 10px 12px; }
}

/* Below this the six menu items no longer fit beside the wordmark in the longer
   languages, so the menu takes its own row instead of wrapping into a ragged block. */
@media (max-width: 1060px) {
  .header { flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 16px var(--pad); }
  .nav { order: 3; width: 100%; justify-content: flex-start; margin-top: 0; gap: 0 16px; font-size: 13px; }
  .nav a { padding: 10px 0; }
  .brand { font-size: 17px; gap: 10px; }
  .brand img { width: 44px; height: 44px; }
  .langbtn { font-size: 13px; padding: 10px 13px; }
}

/* dropdown of coins on small screens */
@media (max-width: 760px) {
  /* One swipeable row instead of a ragged two-row block; the half-cut last item hints at the scroll. */
  .nav { gap: 0 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .brand img { width: 38px; height: 38px; }
  .brand { font-size: 14px; gap: 8px; }
  .langbtn { font-size: 12px; padding: 9px 11px; }
  .hero-row { grid-template-columns: 1fr; gap: 28px; }
  .coins { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pay-grid { grid-template-columns: 1fr; gap: 24px; }
  /* A full-width QR pushed the address off the screen; the key matters more than the square. */
  .qr { max-width: 264px; margin: 0 auto; padding: 12px; }
  .addr { font-size: 18px; padding: 16px 14px; }
  .btn-copy { width: 100%; }
  /* The biggest buttons keep their swagger but give back the padding a phone cannot spare. */
  .btn-huge { padding: 24px 20px; font-size: clamp(21px, 5.6vw, 34px); }
  /* The coin sits above its own pitch instead of beside it. */
  .coinsale-row { flex-direction: column; text-align: center; gap: 22px; }
  .coinsale .tcoin { width: min(190px, 52vw); }
  .coinsale-sub { margin-inline: auto; }
  .hint { display: none !important; }
  .list.plans li { grid-template-columns: 80px 1fr; gap: 12px; }
  .footer-right { align-items: flex-start; text-align: start; }
  .btnrow .btn { width: 100%; }
  .wheelwrap { grid-template-columns: 1fr; gap: 26px; }
  .rank-bar i { height: 16px; }
  /* A pill floating over the page covered real buttons on every screenful, so on a phone
     the chat sits in the bottom bar next to the payment button instead of on top of it. */
  .dock { inset-inline-end: 58px; display: flex; align-items: center; justify-content: center; height: 58px; padding: 0 12px; }
  .chatdock {
    inset-inline-end: 0; bottom: 0; width: 58px; height: 58px; padding: 0;
    justify-content: center; box-shadow: none; border-inline-start: 3px solid var(--bg);
  }
  .chatdock span { display: none; }
  .chat-ico { display: block; }
  .chatdock i { position: absolute; top: 9px; inset-inline-end: 9px; width: 8px; height: 8px; }
  /* During payment the bar is gone, and a square floating over the QR would only be
     something else to tap instead of paying. */
  body.paying .chatdock { display: none; }
  /* Both links must fit a phone row; below that the coin drops to its own line. */
  .topbar { font-size: 12px; gap: 0 12px; padding: 4px var(--pad); }
  .topbar a { min-height: 40px; }
  .topbar a.topbar-coin { padding: 4px 10px; }
  .chat-log { min-height: 200px; }
}

/* On a phone the menu ate a quarter of the screen before the page began, and swiping it
   sideways hid four of the six pages in Spanish. It folds behind a button instead.
   A phone held sideways is just as cramped vertically, so it gets the same treatment. */
@media (max-width: 560px), (max-height: 460px) {
  .header { padding: 12px var(--pad); gap: 10px; }
  .menubtn { display: flex; order: 4; }
  .nav {
    order: 5; width: 100%; display: none; flex-direction: column; gap: 0; overflow: visible;
    margin-top: 2px; border-top: 3px solid var(--fg); font-size: 16px; text-align: start;
  }
  .nav.open { display: flex; }
  .nav a { padding: 16px 2px; border-bottom: 2px solid #1c1c1c; }
  .nav a:last-child { border-bottom: 0; }
  .nav a:hover, .nav a.active { border-bottom-color: var(--yellow); }
  /* Fifteen languages in two columns are wider than a phone, so the picker hangs
     off the whole header rather than off the button. */
  .langwrap { position: static; }
  .langlist { inset-inline: var(--pad); min-width: 0; top: calc(100% + 6px); max-height: 72vh; overflow-y: auto; }
  .langlist button { font-size: 14px; padding: 14px 10px; }
}

/* The smallest phones still in use: wordmark, language and menu on one row or nothing fits. */
@media (max-width: 400px) {
  .header { gap: 8px; padding: 10px 12px; }
  .brand { font-size: 13px; gap: 7px; }
  .brand img { width: 34px; height: 34px; }
  .langbtn { font-size: 12px; padding: 10px 9px; }
  /* Never below 44px: that is the smallest thing a thumb hits reliably. */
  .menubtn { width: 44px; height: 44px; padding: 0 8px; }
  .langlist { inset-inline: 12px; }
}

/* 320px wide: everything in the header gives up a few pixels. */
@media (max-width: 340px) {
  .header { gap: 5px; padding: 8px; }
  .brand { font-size: 11px; gap: 5px; }
  .brand img { width: 28px; height: 28px; }
  .langbtn { font-size: 11px; padding: 9px 6px; }
  .menubtn { padding: 0 7px; }
  .langlist { inset-inline: 10px; }
}

/* Arabic and Urdu flip the page, but wallet keys, hashes and QR captions stay left to right. */
[dir="rtl"] .addr,
[dir="rtl"] .hint code,
[dir="rtl"] .list.shame code,
[dir="rtl"] .modal input,
[dir="rtl"] .brand { direction: ltr; text-align: left; }
/* A clock counts down left to right in Arabic too, but it still belongs in the middle
   of its own block, where the rest of the page has it. */
[dir="rtl"] #timer { direction: ltr; }
[dir="rtl"] .brand { flex-direction: row; }
[dir="rtl"] .list.shame li { direction: rtl; }
/* The arrow follows the reading direction: in Arabic it has to point the other way. */
[dir="rtl"] .topbar-coin b { display: inline-block; transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}