/* HALFTONE — a calm, friendly game site with a riso-print accent.
   One accent ink (pink) for actions, blue only as a print-shadow on featured things,
   paper background, rounded-but-not-bubbly corners, two typefaces. */

:root {
  --paper: #f4f0e6;
  --paper-2: #ebe5d6;
  --sheet: #fffdf8;
  --ink: #1b1a26;
  --muted: #5d5869;
  --line: #dcd4c3;
  --accent: #d4237f;
  --accent-soft: #fbe3ef;
  --blue: #0078bf;
  --pink: #d4237f;
  --yellow: #ffe14d;
  --ok: #11613a;
  --ok-soft: #dcf1e5;
  --warn: #7a4b00;
  --warn-soft: #fdeac4;
  --display: 'Anybody', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: var(--sans);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --r: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  overflow-x: hidden;
  min-height: 100vh; display: flex; flex-direction: column;
}
body > * { width: 100%; }
body > main { flex: 1 0 auto; }
/* faint paper grain, kept from the print identity */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .14;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .15  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; display: block; }
code { font: .88em var(--mono); background: var(--paper-2); padding: .1em .35em; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }
.mono { font-family: var(--mono); font-size: 13px; }
.small { font-size: 14px; }
.muted { color: var(--muted); }
.hint { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.inline { display: inline; }
.eyebrow, .kicker { display: block; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0 0 6px; }
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 40px; }

/* ---------- logo (the one place the two-ink misprint stays) ---------- */
.logo { text-decoration: none; display: inline-block; line-height: 1; }
.logo:hover { color: var(--ink); }
.logo-word { position: relative; display: inline-block; isolation: isolate; font: 900 26px/1 var(--display); font-stretch: 125%; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.logo-word::before, .logo-word::after { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; mix-blend-mode: multiply; transition: transform .25s; }
.logo-word::before { color: var(--pink); transform: translate(-2px, 1.5px); }
.logo-word::after { color: var(--blue); transform: translate(2px, -1.5px); opacity: .8; }
.logo:hover .logo-word::before { transform: translate(-3px, 2.5px); }
.logo:hover .logo-word::after { transform: translate(3px, -2.5px); }
.logo-sm .logo-word { font-size: 20px; }

/* ---------- header ---------- */
.mast {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}
.mast-search input, .big-search input, .field input:not([type=file]), .field textarea, .auth input {
  width: 100%;
  font: 16px var(--sans);
  color: var(--ink);
  background: var(--sheet);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  outline: none;
}
.mast-search input { max-width: 420px; padding-left: 38px; background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235d5869' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 13px 50%; }
.mast-search input:focus, .big-search input:focus, .field input:focus, .field textarea:focus, .auth input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.mast-nav { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 15px; }
.mast-nav > a:not(.btn) { text-decoration: none; }
.mast-nav > a.on { color: var(--accent); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mast-nav .link-btn { text-decoration: none; }
.link-btn:hover { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1.2 var(--sans);
  text-decoration: none;
  padding: 11px 18px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background-color .12s;
  white-space: nowrap;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { color: var(--paper); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--accent); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { color: #fff; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn-ghost { background: var(--sheet); color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { color: var(--ink); background: #fff; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn-liked { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.btn-liked:hover { color: var(--accent); }
.btn:active { transform: translate(1px, 1px); box-shadow: none; }
.btn-sm { padding: 7px 12px; font-size: 14px; }
.btn-big { padding: 14px 24px; font-size: 17px; }
.btn-block { display: flex; width: 100%; margin-top: 12px; }

/* ---------- page intros ---------- */
.dek { font-size: 19px; line-height: 1.55; max-width: 34em; margin: 0 0 26px; color: #34313f; }


.section { margin: 52px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.section-head h2 { font: 800 26px/1.15 var(--display); margin: 0; }
.section-head > a { font-weight: 600; font-size: 15px; white-space: nowrap; }


/* ---------- game cards ---------- */
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; }
.sheet { min-width: 0; }
.sheet-link { display: block; text-decoration: none; }
.sheet-link:hover { color: var(--ink); }
.sheet-art { position: relative; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; border: 1.5px solid var(--ink); background: var(--paper-2); transition: transform .15s, box-shadow .15s; }
.sheet-art img { width: 100%; height: 100%; object-fit: cover; }
.sheet-link:hover .sheet-art { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.sheet-art .badge { position: absolute; top: 8px; left: 8px; }
.sheet-title { font: 700 19px/1.2 var(--display); margin: 12px 0 2px; }
.sheet-link:hover .sheet-title { text-decoration: underline; text-underline-offset: 3px; }
.sheet-tag { font-size: 15px; line-height: 1.4; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sheet-by { font-size: 14px; margin: 6px 0 0; color: var(--muted); }
.sheet-by a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sheet-by a:hover { color: var(--accent); }
.sheet-meta { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin: 4px 0 0; font-variant-numeric: tabular-nums; }

/* ---------- tags & badges ---------- */
.stamps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.stamp { display: inline-block; font: 500 14px/1 var(--sans); text-decoration: none; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line); border-radius: 6px; padding: 7px 11px; }
a.stamp:hover { border-color: var(--ink); color: var(--ink); }
.stamp.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.badge { display: inline-block; font: 700 12px/1 var(--sans); letter-spacing: .02em; padding: 5px 8px; border-radius: 4px; white-space: nowrap; }
.badge-live, .stamp-live { background: var(--ok-soft); color: var(--ok); }
.badge-draft, .stamp-draft { background: var(--warn-soft); color: var(--warn); }
.badge-admin, .stamp-admin { background: var(--ink); color: var(--paper); }

/* ---------- page heads, browse ---------- */
.page-head { padding: 36px 0 12px; }
.page-head.center { text-align: center; padding: 88px 0; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-title { font: 800 clamp(30px, 4vw, 44px)/1.1 var(--display); margin: 0 0 6px; overflow-wrap: anywhere; }
.page-head p { margin: 0; }
.center-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 24px !important; }
.narrow { max-width: 720px; }
.back-link { display: inline-block; font-size: 15px; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.back-link:hover { color: var(--accent); }
.bio { font-size: 18px; max-width: 40em; margin-top: 10px !important; }
.empty { border: 1.5px dashed var(--line); border-radius: 12px; padding: 48px 20px; text-align: center; color: var(--muted); font-size: 17px; }
.empty p { margin: 0 0 12px; }
.empty p:last-child { margin: 0; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 18px; }
.big-search { display: flex; gap: 8px; flex: 1 1 360px; max-width: 560px; }
.big-search input { flex: 1; min-width: 0; }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--sheet); border: 1.5px solid var(--line); border-radius: 8px; }
.tabs a { text-decoration: none; padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 14px; color: var(--muted); }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: var(--ink); color: var(--paper); }

/* ---------- game page ---------- */
.draft-banner { margin-top: 20px; background: var(--warn-soft); color: var(--warn); border-radius: var(--r); padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.game-head { padding: 24px 0 20px; }
.game-title { font: 800 clamp(32px, 5vw, 52px)/1.05 var(--display); margin: 0 0 6px; overflow-wrap: anywhere; }
.byline { font-size: 17px; margin: 0; }
.byline a { font-weight: 600; }
.game-tagline { color: var(--muted); }

.stage-wrap { margin: 0 auto; max-width: min(100%, calc(76vh * var(--ar-num, 1.6))); }
.stage { position: relative; aspect-ratio: var(--ar); max-width: 100%; max-height: 80vh; margin: 0 auto; background: var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--ink), 10px 10px 0 var(--blue); }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.stage-cover { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.stage-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.play-stamp { position: relative; display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: #fff; font: 800 clamp(22px, 3vw, 30px)/1 var(--display); padding: 18px 34px 18px 28px; border-radius: 999px; box-shadow: 0 6px 0 rgba(0, 0, 0, .4); transition: transform .2s; }
.play-icon { font-size: .8em; }
.play-none { background: var(--sheet); color: var(--ink); font-size: 18px; }
.stage-cover:hover .play-stamp { transform: scale(1.06); }
.stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.stage-stats { margin-left: auto; color: var(--muted); font-size: 15px; }

.game-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; margin: 40px 0; }
.game-desc h2, .colophon h2 { font: 700 20px var(--display); margin: 0 0 10px; }
.game-desc p { font-size: 17px; line-height: 1.65; max-width: 68ch; white-space: pre-line; margin: 0 0 14px; }
.colophon { background: var(--sheet); border: 1.5px solid var(--line); border-radius: 12px; padding: 20px; }
.colophon dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.colophon dt { color: var(--muted); }
.colophon dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.colophon .stamps { margin: 16px 0 0; }
.owner-tools { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }

/* ---------- forms ---------- */
.order { margin: 12px 0 0; }
.field { display: grid; gap: 7px; margin: 0 0 22px; }
.field > label:not(.drop) { font-weight: 600; font-size: 15px; }
.field textarea { resize: vertical; line-height: 1.5; }
.dims { display: flex; align-items: center; gap: 10px; }
.dims input { max-width: 130px; }
.drop { position: relative; display: grid; place-items: center; min-height: 110px; padding: 20px; border: 2px dashed var(--line); border-radius: var(--r); background: var(--sheet); color: var(--muted); text-align: center; cursor: pointer; }
.drop-sm { min-height: 72px; }
.drop:hover, .drop.over { border-color: var(--ink); color: var(--ink); }
.drop.has-file { border-style: solid; border-color: var(--ok); background: var(--ok-soft); color: var(--ink); font-weight: 600; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.more { border-top: 1px solid var(--line); padding: 14px 0 0; margin: 0 0 18px; }
.more summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.more summary:hover { color: var(--ink); }
.order-submit { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; }
.danger { margin-top: 36px; font-size: 14px; color: #b01262; }
.flash { font-size: 15px; padding: 12px 14px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); margin: 0 0 16px; }
.flash-err { background: #fde6ee; color: #9c0f52; }

.auth { display: grid; place-items: center; padding: 48px 0; }
.auth-card { width: min(100%, 420px); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 12px; padding: 28px; box-shadow: 8px 8px 0 var(--blue); }
.auth-card .page-title { font-size: 32px; }
.auth-card > .muted { margin: 0 0 8px; }
.auth label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; margin: 16px 0 0; }
.auth .btn-block { margin-top: 24px; }

/* ---------- my games ---------- */
.table-wrap { overflow-x: auto; background: var(--sheet); border: 1.5px solid var(--line); border-radius: 12px; }
.desk { width: 100%; border-collapse: collapse; font-size: 16px; }
.desk th { font-size: 14px; font-weight: 600; color: var(--muted); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.desk td { border-bottom: 1px solid var(--line); padding: 14px 16px; vertical-align: middle; }
.desk tr:last-child td { border-bottom: 0; }
.desk .num { text-align: right; font-variant-numeric: tabular-nums; }
.desk a { text-decoration: none; }
.desk-actions { white-space: nowrap; text-align: right; font-size: 15px; }
.desk-actions > * + * { margin-left: 14px; }
.desk-actions a, .desk-actions .link-btn { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); margin-top: 56px; }
.foot-inner { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.foot-inner p { margin: 0; color: var(--muted); font-size: 15px; flex: 1 1 280px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.foot-links a { text-decoration: none; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .mast { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .mast-search { grid-column: 1 / -1; grid-row: 2; }
  .mast-search input { max-width: none; }
  .game-body { grid-template-columns: 1fr; }
  .colophon { max-width: 460px; }
}
@media (max-width: 640px) {
  .mast { grid-template-columns: 1fr; }
  .mast-search { grid-row: auto; }
  .mast-nav { flex-wrap: wrap; gap: 10px 18px; }
  .mast-nav .press-btn { margin-left: auto; }
  .rack { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .sheet-title { font-size: 17px; }
  .sheet-tag { display: none; }
  .sheet-meta { gap: 10px; }
  .stage { box-shadow: 0 0 0 1.5px var(--ink), 6px 6px 0 var(--blue); border-radius: 8px; }
  .play-stamp { padding: 14px 24px 14px 20px; }
  .desk thead { display: none; }
  .desk tr { display: grid; grid-template-columns: 1fr auto; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .desk tr:last-child { border-bottom: 0; }
  .desk td { border: 0; padding: 3px 0; }
  .desk td.num { text-align: left; color: var(--muted); font-size: 14px; }
  .desk td[data-label]::after { content: ' ' attr(data-label); }
  .order-submit .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- back office ---------- */
.admin-head { padding-bottom: 8px; }
.admin-tabs { margin-top: 14px; }
.tabs-sm { font-size: 12px; flex-wrap: wrap; }
.tabs-sm a { padding: 5px 9px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 26px 0; }
.tile { background: var(--sheet); border: 1.5px solid var(--ink); padding: 14px 16px; min-width: 0; }
.tile-label { margin: 0; text-transform: uppercase; color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.tile-value { margin: 6px 0 2px; font: 900 44px/1 var(--display); font-stretch: 70%; font-variant-numeric: tabular-nums; }
.tile-note { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.35; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr)); gap: 18px; }
.chart-card { margin: 0; background: var(--sheet); border: 1.5px solid var(--ink); padding: 14px 14px 6px; min-width: 0; }
.chart-card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.chart-name { font: 800 18px var(--display); font-stretch: 85%; text-transform: uppercase; }
.chart-scroll { overflow-x: auto; }
.chart-card svg { display: block; width: 100%; min-width: 420px; height: auto; }
.chart-card .bar { fill: var(--bar); }
.chart-card .hit { fill: transparent; }
.chart-card .bar-g:hover .bar { fill: var(--ink); }
.chart-card .grid { stroke: var(--ink); stroke-opacity: .12; stroke-width: 1; }
.chart-card .axis { font: 12px var(--mono); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-tip { position: fixed; z-index: 150; pointer-events: none; background: var(--ink); color: var(--paper); font: 12px var(--mono); padding: 6px 9px; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }
.admin-section { margin: 48px 0; }
.admin-section .section-head { flex-wrap: wrap; }
/* analytics */
a.tile { display: block; text-decoration: none; color: inherit; }
a.tile:hover { background: color-mix(in srgb, var(--yellow) 22%, var(--sheet)); }
.tile-live { border-color: #00a95c; box-shadow: 4px 4px 0 #00a95c; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #00a95c; margin-right: 4px; vertical-align: 1px; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .25; } }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; margin: 26px 0; }
.panel-grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.panel-grid > *, .panel-grid > div > .panel { min-width: 0; }
.panel { margin: 0; background: var(--sheet); border: 1.5px solid var(--ink); padding: 14px 16px; height: 100%; box-sizing: border-box; }
.panel .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; }
.panel .section-head h2 { font: 800 18px var(--display); font-stretch: 85%; text-transform: uppercase; margin: 0; }
.panel .section-head .small { flex-basis: 100%; }
.admin-subhead { font: 900 26px var(--display); font-stretch: 80%; text-transform: uppercase; margin: 40px 0 0; }
.audience-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.audience-head p { margin: 0; }
.barlist { list-style: none; margin: 0; padding: 0; }
.barlist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); font-size: 15px; }
.barlist li:last-child { border-bottom: 0; }
.bl-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-n i, .fn-n i { font-style: normal; color: var(--muted); margin-left: 8px; font-size: 12px; }
.bl-bar, .fn-bar { grid-column: 1 / -1; display: block; height: 5px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.bl-bar span, .fn-bar span { display: block; height: 100%; background: var(--blue); min-width: 2px; }
.flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.funnel { list-style: none; margin: 0; padding: 0; }
.funnel li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 7px 0; font-size: 15px; }
.fn-bar { height: 12px; }
.fn-bar span { background: #00a95c; }
.fn-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.heat-scroll { overflow-x: auto; }
.heat { border-collapse: separate; border-spacing: 3px; font: 11px var(--mono); color: var(--muted); }
.heat th { font-weight: 400; text-align: left; padding: 0 4px 0 0; white-space: nowrap; }
.heat thead th { text-align: left; padding: 0; height: 14px; }
.heat td { width: 22px; height: 18px; min-width: 14px; background: color-mix(in srgb, var(--blue) calc(var(--a) * 100%), color-mix(in srgb, var(--ink) 5%, transparent)); }
.ledger-tight { font-size: 14px; }
.ledger-tight td { padding: 8px 10px; }
.privacy-note { margin: 30px 0; max-width: 72ch; }
.csheet-warning { margin: 0 16px 8px; padding: 10px 12px; background: #ffd9d6; color: #7a120c; border: 1.5px solid #e5352b; font-size: 14px; line-height: 1.4; }
.comment-warning { background: #ffd9d6; color: #7a120c; border: 1.5px solid #e5352b; }
.comment-rules { margin: 4px 0 8px; }
/* review queue, scans and reports */
.count-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #e5352b; color: #fff; font: 700 11px/18px var(--mono); text-align: center; margin-left: 2px; }
.tile-alert { border-color: #e5352b; box-shadow: 4px 4px 0 #e5352b; }
.badge-review { background: #ffe800; color: var(--ink); }
.badge-bad { background: #e5352b; color: #fff; }
.review-intro { max-width: 72ch; margin-top: 18px; }
.review-card { display: grid; grid-template-columns: 160px 1fr; gap: 18px; background: var(--sheet); border: 1.5px solid var(--ink); padding: 16px; margin: 0 0 16px; }
.review-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.review-body h3 { margin: 0 0 4px; font: 800 22px var(--display); font-stretch: 85%; }
.review-body h3 a { text-decoration: none; }
.review-body p { margin: 6px 0; }
.review-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.review-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.send-back summary { list-style: none; cursor: pointer; }
.send-back summary::-webkit-details-marker { display: none; }
.send-back[open] { flex-basis: 100%; }
.send-back form { display: grid; gap: 8px; margin-top: 10px; max-width: 560px; }
.send-back textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1.5px solid var(--ink); }
.scan { margin: 8px 0; }
.scan-verdict { display: inline-block; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; vertical-align: 3px; }
.scan-clean { background: #d6f5e3; color: #0b5d34; }
.scan-flagged { background: #ffe800; color: var(--ink); }
.scan-blocked { background: #e5352b; color: #fff; }
.scan-list { margin: 6px 0 0; padding-left: 18px; font-size: 15px; }
.scan-list li { margin: 3px 0; }
.scan-list .scan-block strong { color: #c4231a; }
.scan-list .scan-flag strong { color: #8a6d00; }
.scan-list .scan-info { color: var(--muted); }
.reason-chip { display: inline-block; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; margin: 0 4px 4px 0; white-space: nowrap; }
.reason-bad { background: #e5352b; color: #fff; border-color: #e5352b; }
.report-quote { margin: 4px 0; color: var(--muted); }
.report-list { list-style: none; padding: 0; margin: 0; }
.report-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.small-head { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
@media (max-width: 640px) { .review-card { grid-template-columns: 1fr; } .review-cover { max-width: 220px; } }
/* public: guidelines, reports, upload agreement */
.banner-review { background: #fff6b0; }
.banner-bad { background: #ffd9d6; }
.review-note { color: #a11b13; }
.report-link { margin-top: 18px; font-size: 14px; }
.report-link a { color: var(--muted); }
.report-form { display: grid; gap: 12px; max-width: 560px; }
.report-form fieldset { border: 1.5px solid var(--ink); padding: 12px 16px; margin: 0; display: grid; gap: 8px; }
.report-form legend { font-weight: 700; padding: 0 6px; }
.report-form .radio { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.report-form textarea { font: inherit; padding: 8px; border: 1.5px solid var(--ink); }
.report-page { padding: 30px 0 60px; }
.agree { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 6px; font-size: 15px; }
.agree input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.review-hint { margin: 6px 0 14px; }
.guidelines { padding: 30px 0 60px; }
.guidelines h2 { margin-top: 34px; }
.guidelines li { margin: 6px 0; }
.lead-text { font-size: 19px; }
.table-scroll { overflow-x: auto; border: 1.5px solid var(--ink); background: var(--sheet); }
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; }
.ledger th { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; text-align: left; border-bottom: 3px double var(--ink); padding: 10px; vertical-align: bottom; white-space: nowrap; }
.ledger th i { font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.ledger td { border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); padding: 10px; vertical-align: top; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: color-mix(in srgb, var(--yellow) 22%, transparent); }
.ledger td:nth-child(2) { min-width: 190px; }
.ledger td.mono.small { white-space: nowrap; }
.ledger .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger a { text-decoration: none; }
.ledger a:hover { text-decoration: underline; }
.ledger tr.is-banned td { color: var(--muted); }
.meter { display: block; height: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); margin-top: 6px; max-width: 260px; }
.meter span { display: block; height: 100%; background: var(--blue); }
.row-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 13px var(--mono); white-space: nowrap; }
.danger-link { color: #c0145f; }
.stamp-admin { color: var(--ink); font-size: 10px; padding: 1px 6px; margin-left: 4px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 22px 0 10px; }
.filters label { display: grid; gap: 4px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.filters input, .filters select { font: 15px var(--mono); padding: 8px 10px; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); min-width: 0; }
.filters input { width: 220px; max-width: 100%; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--ink); }
.feed img { width: 64px; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--ink); mix-blend-mode: multiply; }
.feed a { text-decoration: none; }
.feed-people li { grid-template-columns: 1fr auto; }
.creators { margin-bottom: 30px; }
.detail-head { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; margin-top: 22px; }
.detail-cover { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--blue); mix-blend-mode: multiply; }
.detail-title { font: 900 clamp(34px, 5vw, 60px)/.9 var(--display); font-stretch: 65%; text-transform: uppercase; margin: 0 0 10px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.facts dt { font: 600 12px var(--mono); text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile-value { font-size: 34px; }
  .detail-head { grid-template-columns: 1fr; }
  .detail-cover { max-width: 260px; }
  .filters input { width: 100%; }
  .filters label { flex: 1 1 140px; }
}

/* admin lists that reuse the old ranked-chart look */
.chart { list-style: none; counter-reset: c; margin: 0; padding: 0; }
.chart li { counter-increment: c; border-bottom: 1px solid var(--line); }
.chart a { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; padding: 10px 0; text-decoration: none; align-items: center; }
.chart a::before { content: counter(c); grid-row: span 2; font: 800 24px/1 var(--display); color: var(--muted); }
.chart-title { font: 700 17px/1.2 var(--display); }
.chart-by { font-size: 14px; color: var(--muted); grid-column: 2; }
.chart-n { grid-row: 1 / span 2; grid-column: 3; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.section-head.section-gap { margin-top: 40px; }

/* ---------- reels feed (home page) ---------- */
body.reels-mode { height: 100vh; height: 100svh; height: 100dvh; min-height: 0; overflow: hidden; }
body.reels-mode > main { flex: 1 1 0; min-height: 0; max-width: none; padding: 0; }
.reels-mode .mast { padding-top: 10px; padding-bottom: 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
.reels-mode .mast-search input { max-width: 300px; padding-top: 8px; padding-bottom: 8px; }
.reels {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
.reel {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  padding: 6px 16px 22px;
}
.reel-card {
  position: relative;
  height: 100%;
  max-height: 860px;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: var(--ink);
  box-shadow: 10px 10px 0 var(--blue);
  color: #fff;
}
.reel-bg {
  position: absolute; inset: -40px;
  background: center / cover no-repeat;
  filter: blur(28px) saturate(1.3) brightness(.75);
}
.reel-stage { position: absolute; inset: 0; }
.reel-art { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.reel-art img { width: 100%; height: 100%; object-fit: cover; }
.reel-preview { position: absolute; inset: 0; pointer-events: none; background: #0d0c14; opacity: 0; transition: opacity .35s; }
.reel-preview.on { opacity: 1; }
.reel-preview iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.reel-preview.live iframe { position: absolute; left: 50%; top: 42%; transform-origin: 50% 50%; background: transparent; }
.reel-preview.clip { background: rgba(13, 12, 20, .45); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.reel-preview video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 40%; }
.preview-badge {
  position: absolute; left: 14px; top: 14px; pointer-events: none;
  font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(13, 12, 20, .7); padding: 4px 8px; border-radius: 999px;
  opacity: 0; transition: opacity .35s;
}
.reel-preview.on + .preview-badge { opacity: 1; }
.reel-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 80px 76px 22px 22px;
  background: linear-gradient(transparent, rgba(12, 11, 20, .55) 30%, rgba(12, 11, 20, .9));
}
.reel-title { font: 800 clamp(26px, 3.6vh, 34px)/1.05 var(--display); margin: 0 0 6px; letter-spacing: -.01em; }
.reel-title a, .reel-by a { color: inherit; text-decoration: none; }
.reel-title a:hover, .reel-by a:hover { text-decoration: underline; color: inherit; }
.reel-by { margin: 0; font-weight: 600; font-size: 15px; }
.reel-tagline { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.reel-stats { margin: 8px 0 14px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.reel-actions { display: flex; align-items: center; gap: 8px; }
.nav-in { display: none; flex: none; }
.reel-play { flex: 1; min-width: 0; font-size: 18px; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); border-color: var(--accent); }
.reel-play:hover { color: #fff; transform: translateY(-1px); }
.reel-rail {
  position: absolute; right: 10px; bottom: 96px;
  display: flex; flex-direction: column; gap: 14px;
}
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 54px; padding: 0; border: 0; background: none; color: #fff;
  font: 600 12px var(--sans); text-decoration: none; cursor: pointer;
}
.rail-btn:hover { color: #fff; }
.rail-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(13, 12, 20, .5); border: 1.5px solid rgba(255, 255, 255, .55);
  font: 700 21px/1 var(--sans);
  backdrop-filter: blur(6px);
  transition: transform .12s, background-color .12s;
}
.rail-btn:hover .rail-icon { background: rgba(13, 12, 20, .7); transform: scale(1.06); }
.rail-btn.on .rail-icon { background: var(--accent); border-color: var(--accent); }
.rail-label { text-shadow: 0 0 2px #000, 0 1px 4px rgba(0, 0, 0, .9); }
.reel-card-end {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 32px; background: var(--sheet); color: var(--ink);
}
.reel-card-end h2 { font: 800 30px/1.1 var(--display); margin: 0 0 10px; }
.reel-card-end p { margin: 0 0 18px; color: var(--muted); }
.reel-end-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; }
.reel-nav {
  position: fixed; right: max(24px, calc(50vw - 560px)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 20;
}
.nav-btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink);
  font: 700 22px/1 var(--sans); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.nav-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.nav-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.reel-hint {
  position: fixed; right: max(24px, calc(50vw - 560px)); top: calc(50% + 70px); transform: translateX(calc(50% - 26px)); z-index: 20; margin: 0;
  background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none;
  animation: hint-bob 1.6s ease-in-out infinite;
}
.reel-hint kbd { font: 600 13px var(--mono); background: rgba(255, 255, 255, .15); padding: 1px 6px; border-radius: 4px; }
@keyframes hint-bob { 50% { margin-top: -5px; } }
.reels-empty { text-align: center; padding: 80px 16px; }

.player {
  position: fixed; inset: 0; z-index: 300;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: #0d0c14; color: #fff;
  overscroll-behavior: none; touch-action: none;
}
.player[hidden] { display: none; }
.player-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
}
.player-title { flex: 1; min-width: 0; font: 800 20px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-back { order: 2; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.player-back:hover { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
.player-title { order: 0; }
.player-report { order: 1; color: rgba(255, 255, 255, .7); font-size: 14px; text-decoration: none; white-space: nowrap; }
.player-report:hover { color: #fff; text-decoration: underline; }
.player-skip { order: 3; padding: 10px 22px; font-size: 17px; }
.player-skip:hover { color: #fff; }
.player-stage { position: relative; flex: 1; min-height: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; }
.player-fit { position: relative; overflow: hidden; background: #000; }
.player-fit iframe { position: absolute; left: 0; top: 0; display: block; border: 0; background: #000; transform-origin: 0 0; }

/* "Turn your phone" prompt for games made for the other orientation. */
.player-turn {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; background: rgba(13, 12, 20, .94);
}
.player-turn[hidden] { display: none; }
.turn-title { margin: 18px 0 0; font: 800 22px var(--display); }
.turn-sub { margin: 0; color: rgba(255, 255, 255, .7); font-size: 15px; }
.turn-skip { margin-top: 14px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.turn-skip:hover { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
.turn-phone {
  width: 54px; height: 92px; border: 4px solid #fff; border-radius: 12px; position: relative;
  animation: turn-phone 2.4s cubic-bezier(.6, 0, .3, 1) infinite;
}
.turn-phone span { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #fff; }
.turn-phone::before {
  content: ''; position: absolute; inset: 8px 6px 16px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), #2d6cdf);
}
.to-portrait .turn-phone { animation-name: turn-phone-back; }
@keyframes turn-phone { 0%, 20% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes turn-phone-back { 0%, 20% { transform: rotate(-90deg); } 55%, 85% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }

/* Phones held upright: Back and Skip sit at the bottom, where a thumb reaches. */
@media (max-width: 640px) and (orientation: portrait) {
  .player-bar {
    order: 2; gap: 10px;
    padding: 10px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .player-stage { padding-top: env(safe-area-inset-top); }
  .player-title { font-size: 15px; }
  .player-back { order: 0; padding: 10px 14px; font-size: 15px; }
  .player-report { font-size: 13px; }
  .player-skip { padding: 10px 18px; font-size: 16px; }
}
/* Phones held sideways: the buttons move into a slim column at the side, so the game gets the full height. */
@media (max-height: 520px) and (orientation: landscape) {
  .player { flex-direction: row; }
  .player-bar {
    flex-direction: column; justify-content: space-between; align-items: stretch; gap: 8px; width: 74px; flex: none;
    padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .player-title { display: none; }
  .player-back { order: 0; padding: 10px 0; font-size: 15px; text-align: center; }
  .player-report { order: 1; text-align: center; font-size: 12px; }
  .player-skip { order: 2; padding: 14px 0; font-size: 15px; text-align: center; }
  .player-label { display: block; font-size: 12px; }
  .player-report .player-label { font-size: 11px; }
  .player-stage { padding-right: env(safe-area-inset-right); }
}
/* Touch screens: the game gets the whole screen and the only site control is one small Back button over it
   (a game that draws its own Back button hides this one too). Report and Skip stay on the game page. */
@media (pointer: coarse) {
  .player, .player-bar { flex-direction: column; }
  .player-bar {
    position: absolute; z-index: 3; order: 0; width: auto; padding: 0; background: none; gap: 0;
    left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); top: auto;
  }
  .player-title, .player-report, .player-skip { display: none; }
  .player-back { padding: 8px 12px; font-size: 14px; background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .6); }
  .player-back .player-label { display: inline; font-size: inherit; }
  .player-stage { padding: 0; }
  .player.own-back .player-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .turn-phone { animation: none; transform: rotate(-90deg); }
  .to-portrait .turn-phone { transform: none; }
}
body.playing { overflow: hidden; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 400;
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 10px;
  background: var(--sheet); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--accent);
  font-weight: 600; font-size: 15px; overflow-wrap: anywhere;
}
.toast[hidden] { display: none; }

@media (max-width: 900px) {
  .reels-mode .mast { grid-template-columns: auto 1fr; }
  .reels-mode .mast-search { display: none; }
  .reels-mode .mast-nav { justify-content: flex-end; }
  .reel-nav { right: 16px; }
}
@media (max-width: 640px) {
  .reels-mode .mast { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 8px 12px; }
  .reels-mode .logo-word { font-size: 20px; }
  .reels-mode .mast-nav { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; font-size: 14px; margin-left: auto; }
  .reels-mode .mast-nav .press-btn { margin-left: 0; padding: 6px 10px; font-size: 13px; }
  .reels-mode .mast-nav > a, .reels-mode .mast-nav .link-btn { white-space: nowrap; }
  .reel { padding: 0 8px 8px; }
  .reel-card { aspect-ratio: auto; width: 100%; max-height: none; border-radius: 14px; box-shadow: none; }
  .reel-info { padding: 60px 70px 16px 16px; }
  .reel-rail { right: 6px; bottom: 84px; }
  .reel-nav { display: none; }
  .nav-in { display: block; width: 50px; height: 50px; font-size: 20px; background: rgba(13, 12, 20, .5); color: #fff; border-color: rgba(255, 255, 255, .5); box-shadow: none; }
  .nav-in:hover:not(:disabled) { transform: none; box-shadow: none; background: rgba(255, 255, 255, .28); }
  .reel-hint { right: auto; left: 50%; top: 44%; transform: translateX(-50%); }
  .reel-info { padding-right: 16px; }
  .reel-tagline, .reel-stats, .reel-by, .reel-title { margin-right: 62px; }
}
/* Phones held sideways: the feed card fills the screen instead of shrinking to a tall sliver. */
@media (max-height: 520px) and (orientation: landscape) {
  .reels-mode .mast { padding-top: 4px; padding-bottom: 4px; }
  .reels-mode .mast-search { display: none; }
  .reels-mode .logo-word { font-size: 18px; }
  .reel { padding: 0 max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); }
  .reel-card { aspect-ratio: auto; width: 100%; height: 100%; max-height: none; border-radius: 12px; box-shadow: none; }
  .reel-info { padding: 40px 20px 12px 16px; }
  .reel-title { font-size: 24px; }
  .reel-tagline { display: none; }
  .reel-info { background: linear-gradient(90deg, rgba(12, 11, 20, .88), rgba(12, 11, 20, .55) 70%, transparent); right: auto; width: 46%; max-width: 400px; padding-right: 20px; }
  .reel-stats { margin: 4px 0 10px; }
  .reel-rail { flex-direction: row; top: 10px; right: 10px; bottom: auto; gap: 8px; }
  .rail-icon { width: 40px; height: 40px; font-size: 18px; }
  .rail-btn { width: 46px; }
  .reel-nav { display: none; }
  .nav-in { display: block; width: 46px; height: 46px; font-size: 18px; background: rgba(13, 12, 20, .5); color: #fff; border-color: rgba(255, 255, 255, .5); box-shadow: none; }
  .reel-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-hint { animation: none; }
  .reels { scroll-behavior: auto; }
}
.for-touch { display: none; }
@media (pointer: coarse) { .for-touch { display: inline; } .for-mouse { display: none; } }
.reel-intro {
  position: fixed; left: max(24px, calc(50vw - 600px)); top: 50%; transform: translateY(-50%);
  width: min(300px, calc(50vw - 330px)); z-index: 10; color: var(--muted); font-size: 15px;
}
.reel-intro-title { font: 800 26px/1.1 var(--display); color: var(--ink); margin: 0 0 12px; }
.reel-intro b { color: var(--ink); }
.reel-intro-links a { font-weight: 600; color: var(--ink); }
@media (max-width: 1100px) { .reel-intro { display: none; } }

/* ---------- comments ---------- */
.comments { margin-top: 40px; }
.comments h2 { font: 800 24px/1.2 var(--display); margin: 0 0 14px; }
.comments h2 .muted { font: 600 18px var(--sans); }
.comment-form { display: grid; gap: 10px; justify-items: start; margin-bottom: 18px; }
.comment-form textarea, .csheet-form textarea {
  width: 100%; font: 16px/1.45 var(--sans); color: var(--ink); background: var(--sheet);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; outline: none;
}
.comment-form textarea:focus, .csheet-form textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment { padding: 12px 0; border-top: 1px solid var(--line); }
.comment-meta { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.comment-meta a { text-decoration: none; }
.comment-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.comment-del { font-size: 13px; color: var(--muted); margin-top: 4px; }
.comment-signin, .comment-empty { color: var(--muted); }

.csheet-backdrop { position: fixed; inset: 0; z-index: 250; background: rgba(13, 12, 20, .45); }
.csheet {
  position: fixed; left: 50%; bottom: 0; z-index: 260;
  width: min(560px, 100vw); height: min(70vh, 640px); height: min(70svh, 640px);
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  background: var(--sheet); color: var(--ink);
  border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  animation: sheet-up .22s ease-out;
}
.csheet[hidden], .csheet-backdrop[hidden] { display: none; }
@keyframes sheet-up { from { transform: translate(-50%, 40px); opacity: 0; } }
.csheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.csheet-head h2 { margin: 0; font: 800 20px var(--display); }
.csheet-head h2 .muted { font: 600 16px var(--sans); }
.csheet-close { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--ink); width: 40px; height: 40px; border-radius: 50%; }
.csheet-close:hover { background: var(--paper); }
.csheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px; }
.csheet-body .comment:first-child { border-top: 0; }
.csheet-body .comment-empty { margin: 18px 0; }
.csheet-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.csheet-form textarea { resize: none; min-height: 44px; max-height: 120px; }
.csheet-form .btn { height: 44px; }
.csheet-signin { margin: 0; padding: 14px 18px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); }
.csheet-signin a { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .csheet { border-left: 0; border-right: 0; } }
@media (prefers-reduced-motion: reduce) { .csheet { animation: none; } }
.comment-cell { max-width: 460px; white-space: pre-line; overflow-wrap: anywhere; }
.comments .comment-meta { margin: 0 0 2px; } .comments .comment-body { margin: 0; } .comments .comment-empty, .comments .comment-signin { margin: 0 0 12px; }









/* ht-phone-ui v9 -------------------------------------------------------------------------------
   1. Phones: the site stays upright. Held sideways outside a game, a prompt asks to turn it back. */
.ht-upright { display: none; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  html:not(.ht-playing) .ht-upright {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 24px; text-align: center; background: #0d0c14; color: #fff;
  }
  html:not(.ht-playing) body { overflow: hidden; }
}
.ht-upright-title { margin: 16px 0 0; font: 800 22px var(--display, system-ui); }
.ht-upright-sub { margin: 0; color: rgba(255, 255, 255, .7); font-size: 15px; }
.ht-upright-phone {
  width: 54px; height: 92px; border: 4px solid #fff; border-radius: 12px; position: relative;
  animation: ht-upright 2.4s cubic-bezier(.6, 0, .3, 1) infinite;
}
.ht-upright-phone span { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #fff; }
.ht-upright-phone::before { content: ''; position: absolute; inset: 8px 6px 16px; border-radius: 3px; background: linear-gradient(135deg, var(--accent, #ff4fa3), #2d6cdf); }
@keyframes ht-upright { 0%, 20% { transform: rotate(-90deg); } 55%, 85% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }

/* 2. Phones, while a game plays: Back and Skip float over the game's top-left corner, slide in when it
      starts, then slide out to the left and leave a small round button. Tapping it brings them back.
      Only transform and opacity animate (no blur, shadows or layout), so the phone's GPU does all the work. */
.ht-ctl-tab { display: none; }
@media (pointer: coarse) {
  .player .player-bar {
    position: absolute; z-index: 5; order: 0; flex-direction: row; align-items: center; gap: 8px;
    top: max(10px, env(safe-area-inset-top)); bottom: auto; left: max(10px, env(safe-area-inset-left)); right: auto;
    width: auto; padding: 0; background: none;
    transform: translate3d(0, 0, 0); opacity: 1;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .22s linear;
    will-change: transform, opacity; backface-visibility: hidden;
  }
  .player .player-title, .player .player-report { display: none; }
  .player .player-back, .player .player-skip {
    display: inline-flex; align-items: center; gap: 6px; order: 0;
    padding: 9px 14px; font-size: 15px; text-align: left; border-radius: 999px;
    background: rgba(13, 12, 20, .78); color: #fff; border: 1.5px solid rgba(255, 255, 255, .5);
    box-shadow: none; transition: none;
  }
  .player .player-skip { order: 1; background: var(--accent, #ff4fa3); border-color: var(--accent, #ff4fa3); }
  .player .player-label { display: inline; font-size: inherit; }
  .player .player-stage { padding: 0; }
  .player.own-back .player-bar, .player.own-back .ht-ctl-tab { display: none; }

  /* waiting for the game to load, and tucked away: off to the left */
  .player[data-ht-ctl="enter"] .player-bar { transform: translate3d(-115%, 0, 0); opacity: 0; transition: none; }
  .player[data-ht-ctl="tucked"] .player-bar {
    transform: translate3d(-115%, 0, 0); opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.4, 0, 1, 1), opacity .2s linear .06s;
  }

  /* the small round button left behind */
  .player .ht-ctl-tab {
    position: absolute; z-index: 5; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
    display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0;
    border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45);
    background: rgba(13, 12, 20, .5); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transform: scale3d(.4, .4, 1); opacity: 0; pointer-events: none;
    transition: transform .2s cubic-bezier(.4, 0, 1, 1), opacity .15s linear;
    will-change: transform, opacity; backface-visibility: hidden;
  }
  .player .ht-ctl-tab svg { display: block; margin-left: 2px; }
  .player[data-ht-ctl="tucked"] .ht-ctl-tab {
    transform: scale3d(1, 1, 1); opacity: .8; pointer-events: auto;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1) .16s, opacity .2s linear .16s;
  }
  .player .ht-ctl-tab:active { opacity: 1; }
  /* bigger invisible touch area around the small button */
  .player .ht-ctl-tab::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
}
/* 3. Intro (about 3 s) every time a game starts. This CSS draws the FINISHED logo with nothing animated, so
      something always shows; the motion (dots printing in, pink and blue ink sliding into register, letters
      popping in) is added from app.js with the Web Animations API on a brand-new element each launch.
      Kept light for phones: no full-screen promoted layers, nothing scaled up, only small parts move. */
.ht-splash {
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--paper, #f4f0e6); color: var(--ink, #1b1a26);
  opacity: 1; transition: opacity .45s linear;
}
.stage .ht-splash { position: absolute; z-index: 5; }
.ht-splash[hidden] { display: none; }
.ht-splash.is-out { opacity: 0; pointer-events: none; }
.ht-dots { position: absolute; inset: 0; z-index: -1; opacity: 1; }
.ht-dots-pink { background: radial-gradient(circle, rgba(212, 35, 127, .16) 0 2.6px, transparent 3px) 0 0 / 14px 14px; }
.ht-dots-blue { background: radial-gradient(circle, rgba(0, 120, 191, .12) 0 2.6px, transparent 3px) 7px 7px / 14px 14px; }

.ht-mark { position: relative; display: grid; font: 900 clamp(36px, 12vmin, 72px)/1 var(--display, 'Arial Black', Impact, sans-serif); font-stretch: 125%; letter-spacing: -.01em; white-space: nowrap; }
.ht-word { grid-area: 1 / 1; display: flex; }
.ht-word > span { display: inline-block; }
.ht-word-pink { color: #d4237f; }
.ht-word-pink > span { transform: translate(-3px, 2px); }
.ht-word-blue { color: #0078bf; }
.ht-word-blue > span { transform: translate(3px, -2px); opacity: .85; }
.ht-word-pink, .ht-word-blue { mix-blend-mode: multiply; }
.ht-word-ink { color: var(--ink, #1b1a26); }

.ht-splash-game { position: relative; margin: 4px 0 0; max-width: 80vw; font-weight: 700; font-size: 16px; opacity: .7; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-splash-bar { position: relative; width: 120px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(27, 26, 38, .12); }
.ht-splash-bar span { display: block; width: 100%; height: 100%; background: #d4237f; animation: ht-load 1.1s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes ht-load { 0% { transform: translate3d(-100%, 0, 0); } 100% { transform: translate3d(100%, 0, 0); } }

/* 4. "Turn your phone sideways to play this game" (replaces the player's older prompt). Stays until the phone
      is turned. Sits under Back/Skip, so Back still works. */
.player .player-turn { display: none !important; }
.player .ht-turn {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; background: rgba(13, 12, 20, .96); color: #fff;
  animation: ht-fade .25s linear both;
}
.player .ht-turn[hidden] { display: none; }
.stage .ht-turn {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; text-align: center; background: rgba(13, 12, 20, .96); color: #fff;
}
.stage .ht-turn-title { margin-top: 6px; font-size: 18px; }
.ht-turn-title { margin: 18px 0 0; max-width: 300px; font: 800 22px/1.2 var(--display, system-ui); }
.ht-turn-sub { margin: 0; color: rgba(255, 255, 255, .7); font-size: 15px; }
.ht-turn-phone {
  width: 54px; height: 92px; border: 4px solid #fff; border-radius: 12px; position: relative;
  animation: ht-turn-side 2.4s cubic-bezier(.6, 0, .3, 1) infinite; will-change: transform;
}
.ht-turn-phone span { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #fff; }
.ht-turn-phone::before { content: ''; position: absolute; inset: 8px 6px 16px; border-radius: 3px; background: linear-gradient(135deg, var(--accent, #d4237f), #2d6cdf); }
.ht-turn.to-upright .ht-turn-phone { animation-name: ht-upright; }
@keyframes ht-turn-side { 0%, 20% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes ht-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ht-turn-phone, .player .ht-turn { animation: none; }
  .ht-splash-bar span { animation-duration: 2.4s; }
  .ht-splash.is-out { transform: none; }
}
@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .ht-upright-phone { animation: none; }
  .player .player-bar, .player[data-ht-ctl="tucked"] .player-bar,
  .player[data-ht-ctl="enter"] .player-bar { transform: none; transition: opacity .2s linear; }
  .player .ht-ctl-tab, .player[data-ht-ctl="tucked"] .ht-ctl-tab { transform: none; transition: opacity .2s linear; }
}