@font-face {
  font-family:DotGothic16;
  src:url("/brand/landing/dotgothic16-latin.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:Pixel;
  src:url("/brand/landing/pixelify-sans.ttf") format("truetype");
  font-weight:400 700;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --ink:#fffbea;
  --muted:#9eb6cc;
  --night:#071b2a;
  --pink:#77efc0;
  --panel:#102239;
  --line:#29415b;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--night);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button,input,select {
  font:inherit;
}
button,a {
  touch-action:manipulation;
}
button {
  cursor:pointer;
  color:inherit;
}
button:disabled {
  cursor:default;
  opacity:.55;
}
a {
  color:inherit;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #9cf8ec;
  outline-offset:4px;
}
[hidden] {
  display:none!important;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.icon-button {
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  min-width:44px;
  min-height:44px;
  font-size:26px;
  padding:8px;
}
.icon-button:hover {
  color:var(--pink);
}
.sidebar {
  overflow-y:auto;
  position:fixed;
  z-index:6;
  inset:0 auto 0 0;
  width:180px;
  border-right:1px solid #233951;
  background:#071321;
  padding:24px 14px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.wordmark {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin:0 10px;
}
.wordmark img,.mobile-brand img {
  width:72%;
  height:72%;
  object-fit:contain;
  image-rendering:pixelated;
}
.nav-link[data-nav="browse"] .icon,.nav-link[data-nav="profile"] .icon,
.rail-category.cat-action .icon,.rail-category.cat-arcade .icon,.rail-category.cat-strategy .icon { transform:scale(1.08); }
.nav-link,.rail-category {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:48px;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 13px;
  color:var(--muted);
  font-size:14px;
  border-radius:8px;
}
.nav-link.active {
  color:var(--pink);
  background:#ff259b0b;
}
.nav-link:hover,.rail-category:hover {
  background:#15263b;
}
.rail-label {
  font-size:12px;
  color:var(--muted);
  margin:14px 13px -12px;
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.rail-category {
  color:var(--cat);
  font-size:13px;
}
.rail-category span {
  color:#c8d6e6;
}
.rail-category[aria-pressed=true] {
  background:#203148;
}
.rail-about {
  margin-top:auto;
  text-align:left;
  font-size:11px;
  padding:12px;
  border:0;
  background:none;
  color:var(--muted);
}
.masthead {
  height:76px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  position:relative;
  z-index:5;
  margin-left:180px;
  background:#071321;
  border-bottom:1px solid #24364a;
}
.search-box {
  margin:auto;
  display:flex;
  align-items:center;
  gap:12px;
  width:min(470px,80%);
  height:42px;
  border:1px solid #314d68;
  border-radius:24px;
  padding:0 17px;
  color:#b9d0e7;
}
.search-box .icon {
  width:20px;
  height:20px;
}
.search-box input {
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:none;
  color:var(--ink);
  font-size:13px;
}
.search-box input::placeholder {
  color:#9db5cd;
}
.avatar {
  border:2px solid #64d3f0;
  border-radius:50%;
  background:#173750;
  width:44px;
  height:44px;
}
.mobile-only,.mobile-brand,.mobile-header-action {
  display:none;
}
main {
  margin-left:180px;
}
.hero {
  position:relative;
  min-height:535px;
  overflow:hidden;
}
.landscape {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#071321 0%,#07132100 25%),url('/brand/landing/hero.webp') center 56%/cover no-repeat;
}
.hero-content {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:90px 24px 34px;
  min-height:535px;
}
.hero-logo {
  position:relative;
  width:min(620px,76%);
  aspect-ratio:1774/280;
  isolation:isolate;
}
.hero-logo-base {
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:50% 46%;
  width:100%;
  height:100%;
  display:block;
  image-rendering:auto;
}
h1 {
  text-transform:uppercase;
  font-family:Pixel,"Courier New",monospace;
  font-weight:700;
  font-size:clamp(22px,2.4vw,34px);
  letter-spacing:2px;
  text-align:center;
  line-height:1.08;
  margin:16px 0 30px;
  text-shadow:0 3px 0 #216abe,0 3px 8px #004e9c;
}
.play-controls {
  width:420px;
  max-width:100%;
  text-align:center;
}
.play-button {
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:64px;
  border:3px solid #ff94d3;
  background:var(--pink);
  color:#090f1b;
  box-shadow:0 5px 0 #a7106b,0 0 24px #ff26952e;
  padding:14px 18px;
  text-transform:uppercase;
  font-family:Pixel,"Courier New",monospace;
  font-size:21px;
  font-weight:700;
  clip-path:polygon(2% 0,98% 0,100% 12%,100% 88%,98% 100%,2% 100%,0 88%,0 12%);
  transition:filter .15s,transform .15s;
}
.play-button span {
  font-size:29px;
}
.play-button:hover {
  filter:brightness(1.12);
  transform:translateY(-2px);
}
.play-button:active {
  transform:translateY(2px);
}
.play-button:focus-visible {
  clip-path:none;
}
.roughness-control {
  display:flex;
  align-items:center;
  gap:17px;
  margin:19px auto 0;
  padding:0 6px;
}
.settings-button {
  border:0;
  background:transparent;
  flex-shrink:0;
  border-radius:5px;
}
.settings-button .icon {
  width:24px;
  height:24px;
}
input[type=range] {
  appearance:none;
  min-width:0;
  width:100%;
  height:44px;
  margin:0;
  background:transparent;
  cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height:8px;
  background:linear-gradient(to right,var(--pink) 0%,var(--pink) var(--range-fill,0%),#30475f var(--range-fill,0%),#30475f 100%);
  border:0;
  border-radius:5px;
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:33px;
  height:37px;
  background:url('/brand/neon-outline/chaos-skull.png') center/contain no-repeat;
  border:0;
  margin-top:-14px;
  filter:drop-shadow(0 2px 1px #000);
}
input[type=range]::-moz-range-track {
  height:8px;
  background:#30475f;
}
input[type=range]::-moz-range-progress {
  height:8px;
  background:var(--pink);
}
input[type=range]::-moz-range-thumb {
  width:33px;
  height:37px;
  background:url('/brand/neon-outline/chaos-skull.png') center/contain no-repeat;
  border:0;
}
#catalog-status {
  font-size:12px;
  line-height:1.5;
  margin:8px 0;
  background:#071321a8;
  border-radius:5px;
}
.discovery-content {
  max-width:1520px;
  margin:auto;
  padding:0 32px 60px;
}
.categories {
  display:none;
}
.cat-action {
  --cat:#ff52b5;
}
.cat-arcade {
  --cat:#ffdc59;
}
.cat-puzzle {
  --cat:#b76bff;
}
.cat-strategy {
  --cat:#44e6b6;
}
.cat-party {
  --cat:#46bfff;
}
.cat-chill {
  --cat:#ff9851;
}
.shelf {
  margin:0 0 36px;
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
}
.section-heading h2 {
  font:700 21px Pixel,"Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.pink {
  color:var(--pink);
  font-size:30px;
}
.see-all {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  background:none;
  border:0;
  color:var(--muted);
  font-size:13px;
  padding:0;
}
.see-all .icon {
  width:19px;
}
.game-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.game-card {
  position:relative;
  min-width:0;
  border:1px solid #375471;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(150deg,#172d45,#0a1829);
  transition:transform .18s,border-color .18s;
}
.game-card:hover {
  transform:translateY(-4px);
  border-color:var(--pink);
}
.game-launch {
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  text-align:left;
}
.game-art {
  position:relative;
  aspect-ratio:1.7;
  overflow:hidden;
  background:var(--card-bg,#183340);
}
.game-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:auto;
  transition:transform .3s;
}
img[data-game-cover][src="/brand/canonical/crossed-swords-v2.png"] { object-fit:contain; padding:15%; image-rendering:pixelated; }
.game-card:hover .game-art img {
  transform:scale(1.025);
}
.game-art::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:40%;
  background:linear-gradient(0deg,#09152488,transparent);
}
.card-badge {
  position:absolute;
  top:12px;
  left:12px;
  background:#ff259b;
  color:#08111e;
  padding:5px 8px;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  z-index:1;
}
.card-info {
  padding:17px 18px 19px;
}
.card-info h3 {
  font-size:20px;
  margin:0 0 7px;
  font-weight:750;
}
.card-info p {
  font-size:12px;
  color:var(--muted);
  margin:0;
}
.preview-card .game-art { aspect-ratio:2/3!important; }
.preview-card .card-info span,.preview-creator,.preview-note { display:block; margin-top:8px; color:#8fb0c8; font-size:12px; }
.preview-label { display:inline-block; margin:0 0 12px; padding:5px 8px; background:#a8edca; color:#06121b; font:700 11px Pixel,sans-serif; text-transform:uppercase; }
.preview-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0; }
.preview-facts div { padding:12px 0; border-top:1px solid #29415b; }
.preview-facts dt { color:#8fb0c8; font-size:12px; text-transform:uppercase; }
.preview-facts dd { margin:5px 0 0; text-transform:capitalize; }
.card-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 12px 10px 18px;
  gap:12px;
}
.card-support {
  font-size:11px;
  color:#a7c5dd;
  display:flex;
  gap:8px;
}
.save-game {
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  color:#a7c5dd;
  font-size:27px;
  line-height:1;
}
.save-game[aria-pressed=true] {
  color:var(--pink);
}
.compact-grid .game-art {
  aspect-ratio:2.25;
}
.compact-grid .card-info {
  padding-top:12px;
}
.compact-grid .card-info h3 {
  font-size:18px;
}
.empty-state {
  padding:45px 20px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:14px;
}
.bottom-nav {
  display:none;
}
#player {
  max-width:1240px;
  margin:auto;
  padding:100px 24px 20px;
}
#compatibility-banner {
  margin:-16px 0 16px;
  padding:12px 16px;
  background:#f8dfb0;
  color:#19233f;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
}
#compatibility-banner .next-button {
  min-width:48px;
  padding:8px;
}
.player-bar {
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:16px;
}
.game-heading {
  flex:1;
  min-width:0;
}
h2 {
  font-size:20px;
  margin:0 0 6px;
}
.game-heading h2 {
  overflow-wrap:anywhere;
}
.text-button {
  background:transparent;
  border:0;
  padding:10px 0;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:4px;
  min-height:44px;
  font-size:13px;
}
.game-heading .text-button {
  padding:0;
  min-height:26px;
  text-align:left;
}
.next-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#f8dfb0;
  color:#19233f;
  border:2px solid #10172a;
  padding:12px 20px;
  min-height:48px;
  font-weight:700;
}
#game-stage {
  background:#10172a;
  border:1px solid #626174;
  min-height:420px;
  height:calc(100svh - 240px);
  max-height:820px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:24px;
  overflow:hidden;
}
#frame-slot {
  position:absolute;
  inset:0;
}
iframe {
  width:100%;
  height:100%;
  border:0;
  background:#faf8ef;
}
#game-status {
  flex:none;
  max-width:460px;
  padding:0 20px;
  text-align:center;
  position:relative;
  z-index:1;
  color:#fff8e7;
}
#game-status-heading { margin:0; font:600 clamp(21px,3vw,30px)/1.2 Pixel,sans-serif; }
#game-status-explanation { margin:12px 0 0; color:#bdd2d0; font:15px/1.45 Arial,sans-serif; }
#game-recovery-art:not([hidden]) { display:block; position:relative; z-index:1; flex:none; width:min(320px,72vw,40dvh); height:auto; object-fit:contain; }
@media(max-width:760px) { #game-recovery-art:not([hidden]) { width:min(160px,45vw,32dvh); } }
#game-stage:has(#recovery:not([hidden])) { justify-content:safe center; gap:16px; overflow-y:auto; padding:16px 0; box-sizing:border-box; }
#recovery {
  position:relative;
  z-index:1;
  flex:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 20px;
  flex-wrap:wrap;
  justify-content:center;
}
#recovery #skip { min-height:44px; border:1px solid #78efc2; border-radius:5px; padding:10px 18px; color:#fff8e7; background:transparent; }
#recovery #skip:focus-visible { outline:2px solid #78efc2; outline-offset:2px; }
#recovery #retry:disabled { opacity:.55; cursor:not-allowed; }
#game-controls {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
#game-support,#credit-support {
  display:flex;
  justify-content:center;
  gap:8px;
  margin:12px 0;
}
.support-token {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid #6c6a81;
  color:var(--ink);
  font-size:20px;
}
#player {
  padding-top:26px;
  margin-left:0;
}
.text-button {
  color:var(--muted);
}
.next-button {
  background:var(--pink);
  color:#071321;
  border:1px solid #ff8bcb;
  border-radius:6px;
}
.next-button:hover {
  background:#ff75bd;
}
dialog {
  background:#07111f;
  color:var(--ink);
  border:3px solid #2e4357;
  border-radius:6px;
  padding:28px;
  width:min(480px,calc(100% - 28px));
  max-height:calc(100svh - 32px);
  line-height:1.5;
  box-shadow:8px 8px 0 #02060e,0 24px 100px #0009;
}
dialog::backdrop {
  background:rgba(1,6,18,.74);
  backdrop-filter:blur(4px);
}
.dialog-close {
  float:right;
  margin:-12px -12px 0 8px;
}
dialog h2 {
  font-size:25px;
  line-height:1.25;
  margin:2px 0 24px;
}
dialog p {
  font-size:14px;
}
dialog a {
  color:#7aefe4;
}
fieldset {
  border:0;
  padding:0;
  margin:20px 0;
}
legend {
  font-size:14px;
  font-weight:700;
  margin-bottom:12px;
}
.segmented {
  display:flex;
  padding:4px;
  background:#06101f;
  border:1px solid var(--line);
  border-radius:9px;
}
.segmented label {
  flex:1;
  text-align:center;
}
.segmented input,.filter-category input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.segmented span {
  display:block;
  border-radius:5px;
  padding:10px 2px;
  color:var(--muted);
  font-size:13px;
}
.segmented input:checked+span {
  background:#29405d;
  color:#fff;
}
.segmented input:focus-visible+span,.filter-category input:focus-visible+span {
  outline:2px solid #8df7e8;
}
.field {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
}
.field select {
  background:#10263d;
  border:1px solid var(--line);
  padding:9px;
  border-radius:6px;
}
.field-hint {
  font-size:12px!important;
  color:var(--muted);
  margin:-5px 0 14px;
}
.filter-categories {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.filter-category span {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:46px;
  border:1px solid #31465e;
  border-radius:7px;
  font-size:12px;
  color:var(--muted);
}
.filter-category .icon {
  width:18px;
  height:18px;
  color:var(--cat);
}
.filter-category input:checked+span {
  border-color:var(--cat);
  background:#24364b;
  color:white;
}
.quick-filter {
  display:flex;
  gap:10px;
  align-items:center;
  min-height:44px;
  font-size:14px;
}
.quick-filter input {
  accent-color:var(--pink);
  width:18px;
  height:18px;
}
#settings-count {
  color:var(--muted);
  font-size:12px;
}
.dialog-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:16px;
}
.stats-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:30px;
}
.stats-grid p {
  padding:20px 10px;
  background:#142a43;
  border-radius:10px;
  color:var(--muted);
  text-align:center;
}
.stats-grid strong {
  display:block;
  font-size:40px;
  color:var(--pink);
  margin-bottom:5px;
}
.loading-frame {
  opacity:0;
  pointer-events:none;
}
@media(min-width:1600px) {
  .hero {
    min-height:590px;
  }
  .hero-content {
    padding-top:125px;
    min-height:590px;
  }
  .hero-logo {
    width:680px;
  }
  .discovery-content {
    padding-top:4px;
  }
}
@media(max-width:1100px) and (min-width:761px) {
  .sidebar {
    width:150px;
    padding-left:8px;
    padding-right:8px;
  }
  .masthead,main {
    margin-left:150px;
  }
  .masthead {
    padding:0 22px;
  }
  .hero-content {
    padding-top:92px;
  }
  .hero-logo {
    width:85%;
  }
  .discovery-content {
    padding:0 22px 50px;
  }
  .game-grid {
    gap:13px;
  }
  .card-info {
    padding:14px;
  }
  .card-info h3 {
    font-size:18px;
  }
  .card-footer {
    padding-left:14px;
  }
  .section-heading h2 {
    font-size:19px;
  }
}
@media(max-width:760px) {
  .sidebar {
    display:flex;
    top:64px;
    width:220px;
    bottom:72px;
    border-right:1px solid #3a5672;
    padding-top:16px;
  }
  .sidebar.open {
    transform:translateX(0);
    visibility:visible;
    transition-delay:0s;
  }
  .sidebar .wordmark {
    display:none;
  }
  .masthead {
    position:sticky;
    top:0;
    z-index:23;
    margin:0;
    height:64px;
    padding:0 15px;
    gap:9px;
    background:#06111bf2;
    backdrop-filter:blur(14px) saturate(1.2);
  }
  .mobile-only,.mobile-brand {
    display:flex;
  }
  .mobile-brand {
    width:44px;
    height:44px;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
  }
  .masthead .search-box { display:none; }
  .page-header .search-box { display:flex; margin-left:auto; width:145px; height:36px; padding:0 10px; gap:6px; }
  .mobile-header-action { display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:10px; color:#f4edda; }
  #mobile-search-open { margin-left:auto; }
  .notification-status { position:relative; }
  .notification-status::after { content:""; position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%; background:#ff259b; }
  .search-box input {
    font-size:11px;
  }
  .search-box .icon {
    width:17px;
  }
  .avatar { width:44px; height:44px; min-width:44px; min-height:44px; }
  .avatar .icon {
    width:20px;
  }
  main {
    margin:0;
  }
  .hero {
    min-height:555px;
  }
  .landscape {
    background-image:linear-gradient(0deg,#071321 0%,#07132100 27%),url('/brand/landing/hero-mobile.webp');
    background-position:center 68%;
    background-size:cover;
  }
  .hero-content {
    min-height:555px;
    padding:108px 20px 16px;
  }
  .hero-logo {
    width:100%;
    max-width:560px;
    aspect-ratio:1774/280;
  }
  h1 {
    font-size:25px;
    letter-spacing:1px;
    margin:18px 0 0;
  }
  .play-controls {
    margin-top:auto;
    width:100%;
    max-width:480px;
    padding-top:112px;
  }
  .play-button {
    min-height:64px;
    font-size:19px;
    gap:16px;
  }
  .play-button span {
    font-size:27px;
  }
  .roughness-control {
    margin-top:15px;
    padding:0 5px;
    gap:20px;
  }
  .discovery-content {
    padding:0 18px 100px;
  }
  .categories {
    display:flex;
    gap:8px;
    margin:5px 0 22px;
    padding:0 0 8px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .categories::-webkit-scrollbar { display:none; }
  .category-tile {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:0 0 78px;
    gap:3px;
    background:color-mix(in srgb,var(--cat) 9%,#0c1929);
    color:var(--cat);
    border:0;
    border-bottom:3px solid color-mix(in srgb,var(--cat) 70%,transparent);
    min-height:58px;
    border-radius:5px;
    font-size:11px;
    font-weight:600;
    scroll-snap-align:start;
  }
  .category-tile .icon {
    width:24px;
    height:24px;
    stroke-width:2;
  }
  .category-tile[aria-pressed=true] {
    background:color-mix(in srgb,var(--cat) 35%,#0c1929);
    box-shadow:inset 0 0 20px #ffffff20;
  }
  .section-heading {
    margin-bottom:13px;
    gap:8px;
  }
  .section-heading h2 {
    font-size:18px;
    gap:8px;
  }
  .pink {
    font-size:26px;
  }
  .see-all {
    font-size:11px;
    gap:5px;
  }
  .shelf {
    margin-bottom:26px;
  }
  .game-grid {
    grid-template-columns:repeat(3,minmax(145px,1fr));
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:3px 1px 8px;
  }
  .game-card {
    border-radius:8px;
    scroll-snap-align:start;
  }
  .game-art {
    aspect-ratio:.92;
  }
  .game-art img {
    object-fit:cover;
  }
  .card-info {
    padding:13px 10px 12px;
  }
  .card-info h3 {
    font-size:15px;
    line-height:1.25;
    min-height:37px;
  }
  .card-info p {
    font-size:10px;
    line-height:1.3;
  }
  .card-badge {
    font-size:8px;
    top:9px;
    left:8px;
    padding:4px 6px;
  }
  .card-footer {
    padding:0 6px 7px 10px;
    gap:0;
  }
  .card-support {
    font-size:10px;
    gap:4px;
  }
  .save-game {
    width:34px;
    height:34px;
    font-size:25px;
  }
  .compact-grid .game-art {
    aspect-ratio:1.1;
  }
  .compact-grid .card-info h3 {
    font-size:14px;
  }
  .bottom-nav {
    position:fixed;
    z-index:10;
    inset:auto 0 0;
    height:calc(66px + env(safe-area-inset-bottom));
    padding:3px 8px env(safe-area-inset-bottom);
    background:#071321f5;
    border-top:1px solid #3e5e78;
    display:flex;
    backdrop-filter:blur(16px);
  }
  .bottom-nav .nav-link {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    font-size:10px;
    padding:6px 4px;
    border-radius:0;
  }
  .bottom-nav .nav-link .icon {
    width:23px;
    height:23px;
  }
  .bottom-nav .nav-link.active {
    background:none;
  }
  .bottom-nav .nav-link.active .icon {
    filter:drop-shadow(0 0 8px #ff259b66);
  }
  #player {
    padding:14px 8px 90px;
  }
  .player-bar {
    gap:8px;
  }
  .player-bar h2 {
    font-size:17px;
  }
  .player-bar .next-button {
    padding:10px 14px;
  }
  #game-stage {
    height:calc(100svh - 260px);
    min-height:360px;
  }
  #recovery {
    gap:12px;
  }
  #compatibility-banner {
    margin:0 0 15px;
    font-size:13px;
    line-height:1.4;
  }
  .support-token {
    width:36px;
    height:36px;
  }
}
@media(min-width:540px) and (max-width:760px) {
  .hero-content {
    padding-top:90px;
  }
  .hero-logo {
    width:85%;
  }
  .landscape {
    background-image:linear-gradient(0deg,#071321 0%,#07132100 25%),url('/brand/landing/hero.webp');
  }
  .categories {
    grid-template-columns:repeat(6,1fr);
  }
  .category-tile {
    min-height:74px;
  }
  .game-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .game-art {
    aspect-ratio:1.2;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}
@media(min-width:761px) and (max-width:1100px) {
  .landscape {
    background-image:linear-gradient(0deg,#071321 0%,#07132100 25%),url("/brand/landing/hero-tablet.webp");
    background-position:center 58%;
  }
  .hero-content {
    padding-top:95px;
  }
}

/* One scrollbar palette for the page, drawer, dialogs and horizontal shelves. */
:root { --scroll-track:#081522; --scroll-thumb:#405c73; --scroll-hover:#6a91aa; }
* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:var(--scroll-track); border-radius:9px; }
*::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border:2px solid var(--scroll-track); border-radius:9px; }
*::-webkit-scrollbar-thumb:hover { background:var(--scroll-hover); }
*::-webkit-scrollbar-thumb:active { background:#9ed6dd; }
*::-webkit-scrollbar-corner { background:var(--scroll-track); }
.drawer-backdrop { display:none; }
.menu-glyph { position:relative; display:block; width:24px; height:24px; }
.menu-glyph .icon { position:absolute; inset:0; transition:transform .42s cubic-bezier(.34,1.56,.64,1),opacity .2s; }
.menu-glyph .icon:last-child { opacity:0; transform:rotate(-90deg) scale(.4); }
#menu-toggle[aria-expanded="true"] .menu-glyph .icon:first-child { opacity:0; transform:rotate(90deg) scale(.4); }
#menu-toggle[aria-expanded="true"] .menu-glyph .icon:last-child { opacity:1; transform:rotate(0) scale(1); }
.avatar { position:relative; padding:3px; box-shadow:0 0 0 3px #122b40,0 0 18px #2dc9f21f; transition:transform .2s,box-shadow .2s; }
.avatar:hover { transform:translateY(-1px); box-shadow:0 0 0 3px #1c425e,0 0 22px #2dc9f238; }
.avatar img { width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; image-rendering:pixelated; }
@media(max-width:760px) {
  body.drawer-open { overflow:hidden; }
  .masthead { z-index:13; }
  .sidebar { z-index:12; width:min(285px,calc(100vw - 64px)); bottom:0; padding:20px 16px 36px; gap:18px; transform:translateX(-105%); visibility:hidden; transition:transform .38s cubic-bezier(.22,.8,.25,1),visibility 0s .38s; box-shadow:20px 0 70px #0008; overscroll-behavior:contain; }
  .sidebar.open { transform:translateX(0); visibility:visible; transition-delay:0s; }
  .sidebar .nav-link { min-height:52px; font-size:16px; }
  .sidebar .rail-category { min-height:48px; font-size:15px; }
  .drawer-backdrop { display:block; position:fixed; z-index:11; inset:64px 0 0; border:0; background:#010911a6; opacity:0; visibility:hidden; transition:opacity .28s,visibility 0s .38s; backdrop-filter:blur(4px); }
  body.drawer-open .drawer-backdrop { opacity:1; visibility:visible; transition-delay:0s; }
}
@media(prefers-reduced-motion:reduce) { .sidebar,.drawer-backdrop,.menu-glyph .icon { transition:none!important; } }

.game-transition { position:fixed; inset:0; z-index:30; display:grid; grid-template-rows:repeat(14,1fr); pointer-events:auto; overflow:hidden; }
.game-transition span { position:relative; margin-block:-1px; }
.game-transition span::before,.game-transition span::after { content:""; position:absolute; inset:0 auto 0 0; width:50.1%; background:#020306; transform:scaleX(0); transform-origin:left; transition:transform .29s steps(8,end); }
.game-transition span::after { inset:0 0 0 auto; transform-origin:right; }
.game-transition.is-covering span::before,.game-transition.is-covering span::after { transform:scaleX(1); }
.game-transition span:nth-child(3n)::before,.game-transition span:nth-child(3n)::after { transition-delay:35ms; }
.game-transition span:nth-child(4n)::before,.game-transition span:nth-child(4n)::after { transition-delay:65ms; }
.game-transition.is-revealing span::before,.game-transition.is-revealing span::after { transform:scaleX(0); }
@media(prefers-reduced-motion:reduce) { .game-transition { display:none; } }
@supports selector(::-webkit-scrollbar) { * { scrollbar-color:auto; scrollbar-width:auto; } }

dialog h2,.next-button { font-family:Pixel,monospace; font-weight:700; }
.dialog-close { min-width:48px; min-height:48px; }

/* Inner pages share a compact app header; gameplay owns the viewport. */
.page-header { display:none; align-items:center; gap:12px; min-height:64px; margin-left:180px; padding:8px 24px; background:var(--night,#071321); }
body.inner-page .page-header { display:flex; }
body.inner-page .masthead, body.playing .masthead, body.playing .page-header { display:none; }
.page-header h2 { margin:0; }
.page-brand{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px}.page-brand img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.page-header-actions{display:flex;align-items:center;gap:16px;margin-left:auto}.page-header-actions .header-wallet{margin:0}.page-header-actions .avatar{flex:0 0 auto}
#page-menu-toggle{display:none}
body.playing { overflow:hidden; }
body.playing main { margin:0; }
body.playing #sidebar { display:none; }
body.playing #player { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; padding:0; margin:0; z-index:15; }
body.playing #game-stage { position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:none; margin:0; border:0; }
body.playing .player-bar, body.playing #game-controls, body.playing #game-support, body.playing .bottom-nav { display:none; }
.player-menu { display:none; }
body.playing .player-menu { display:flex; align-items:center; justify-content:center; position:fixed; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); width:44px; height:44px; z-index:22; border:0; border-radius:8px; color:#fff; background:#071321b8; }
body.playing.player-chrome .player-bar { display:flex; position:absolute; inset:0 0 auto; min-height:64px; margin:0; padding:8px 64px 8px 12px; background:#071321f5; z-index:20; }
body.playing #compatibility-banner:not([hidden]) { position:absolute; top:72px; left:12px; right:12px; margin:0; z-index:20; }
body.playing #recovery { z-index:19; }
@media (min-width:761px) and (max-width:1100px) { .page-header { margin-left:150px; } }
@media (max-width:760px) { .page-header { margin:0; padding:8px 12px;gap:8px } .page-header .search-box { min-width:0; width:145px; } .page-header h2{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-header-actions{gap:6px} body.inner-page #page-back{display:none} body.inner-page #page-menu-toggle{display:grid;place-items:center} body:has(#game-detail:not([hidden])) #page-back{display:grid} body:has(#game-detail:not([hidden])) #page-menu-toggle{display:none} }
@media (max-width:360px) { .page-header-actions .header-message{display:none} }

body.playing #compatibility-banner:not([hidden]) { top:156px; }

.run-start { display:inline-flex; align-items:center; gap:9px; min-height:40px; margin-top:4px; padding:4px 14px; border:0; background:#071321aa; color:#deedf8; border-radius:20px; font:600 15px Pixel,monospace; }
.run-start:hover { color:#fff; background:#12314bd9; }
.run-start>span:first-child { color:#ffdc59; font-size:22px; }
.run-tag { color:#94b7cc; font:400 11px DotGothic16,sans-serif; }
.run-progress { display:flex; align-items:center; gap:10px; position:fixed; z-index:22; bottom:max(12px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); padding:6px 6px 6px 14px; background:#071321eb; border:1px solid #35546b; border-radius:9px; white-space:nowrap; font-size:13px; }
.run-progress .next-button { min-height:38px; padding:7px 12px; font-size:14px; }
body.player-chrome .run-progress { bottom:80px; }
.run-results { list-style:none; margin:0 0 25px; padding:0; }
.run-results li { display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid #284056; font-size:14px; }
.run-results span { color:#84d7c4; }
#controls-support { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.run-lineup { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; padding:0; margin:24px 0 12px; }
.run-card { min-width:0; list-style:none; border:1px solid #395473; border-radius:8px; padding:7px; background:#0b1d31; text-align:center; }
.run-card strong { display:block; margin:9px 0 3px; font:600 15px Pixel,sans-serif; overflow-wrap:anywhere; }
.run-reel { aspect-ratio:2/3; overflow:hidden; border-radius:4px; display:grid; place-items:center; background:radial-gradient(ellipse,#233452,#071321); }
.run-reel img { display:block; width:100%; height:100%; object-fit:cover; }
.run-reel img[src*="question-block"] { width:70%; height:auto; image-rendering:pixelated; }
.run-draft-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.run-draft-controls .text-button { min-height:44px; font-size:13px; }
.run-reveal { position:fixed; z-index:31; width:120px; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; }
.run-reveal .run-reel { max-height:130px; }
body:not(.playing) .run-reveal { display:none; }

.icon image { image-rendering:pixelated; }
.play-button>.icon { width:32px; height:32px; filter:brightness(0); }
.save-game .icon { width:24px; height:24px; }
.save-game[aria-pressed=true] { background:#78efc220; box-shadow:inset 0 -2px var(--accent); }
.sidebar-brand { display:flex; align-items:center; gap:12px; }
.sidebar .wordmark-swords { transform:scale(.57); }
.side-panel-glyph { display:block; width:24px; height:20px; border:2px solid #9cf8ec; border-radius:2px; position:relative; }
.side-panel-glyph::before { content:""; position:absolute; inset:0 auto 0 6px; border-left:2px solid #9cf8ec; }
@media(min-width:761px) {
 body { --sidebar-width:256px; }
 .sidebar { width:var(--sidebar-width); padding-inline:20px; }
 .masthead,main,.page-header { margin-left:var(--sidebar-width); }
 .sidebar .nav-link,.sidebar .rail-category { min-height:48px; gap:14px; }
 body.sidebar-collapsed { --sidebar-width:76px; }
 .sidebar-collapsed .sidebar { padding-inline:10px; }
 .sidebar-collapsed .sidebar-brand { flex-direction:column; gap:4px; }
 .sidebar-collapsed .sidebar .nav-link,.sidebar-collapsed .sidebar .rail-category { justify-content:center; padding-inline:8px; }
 .sidebar-collapsed .sidebar .nav-link span,.sidebar-collapsed .sidebar .rail-category span,.sidebar-collapsed .rail-label,.sidebar-collapsed .rail-about { display:none; }
}
@media(min-width:761px) and (max-width:1100px) { body { --sidebar-width:200px; } }
.your-game-stats { margin:20px 0; padding:14px 0; border-block:1px solid #29415b; }
.your-game-stats p { margin:5px 0; }
#credit-review { white-space:pre-wrap; overflow-wrap:anywhere; color:#bcd2e5; }
#feedback { width:min(440px,calc(100vw - 32px)); padding:24px; border:1px solid #294455; background:#0b2030; }
#feedback .dialog-close { z-index:1; background:#071b2adb; border-radius:50%; }
.feedback-cover { display:block; width:calc(100% + 48px); height:140px; margin:-24px -24px 24px; object-fit:cover; }
.feedback-heading { text-align:center; }
.feedback-heading h2 { font:700 32px/1 Pixel,monospace; margin:0 0 8px; }
#feedback-title { margin:0; font-size:17px; font-weight:600; }
#feedback-time { margin:6px 0 0; }
.feedback-votes { display:flex; gap:12px; margin:24px 0; }
.feedback-votes button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; flex:1; min-height:100px; border:1px solid #345062; background:#142c3d; border-radius:8px; font:600 22px Pixel,sans-serif; }
.feedback-votes .icon,.feedback-votes .slop-tab-icon { width:36px; height:36px; }
#feedback .field-hint:last-child { text-align:center; }
.feedback-votes button[aria-pressed=true] { border-color:var(--accent); background:#78efc220; box-shadow:inset 0 -2px var(--accent); }
#review-text { display:block; width:100%; margin:8px 0 16px; padding:12px; color:var(--ink); background:#081727; border:1px solid #395473; font:inherit; resize:vertical; }
#review-text:focus-visible { outline:3px solid #9cf8ec; outline-offset:2px; }
.run-results li { flex-wrap:wrap; align-items:center; }
.run-results .text-button { min-height:44px; }
#featured-games,#personal-games { position:relative; display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:clamp(210px,22vw,280px); gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:3px; overscroll-behavior-x:contain; scrollbar-width:none; padding:5px 3px 12px; cursor:grab; }
#featured-games::-webkit-scrollbar,#personal-games::-webkit-scrollbar { display:none; }
#featured-games.is-dragging,#personal-games.is-dragging { scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none; }
#featured-games .game-launch,#personal-games .game-launch { cursor:inherit; }
#featured-games .game-card,#personal-games .game-card { scroll-snap-align:start; }
#featured-games .game-art,#personal-games .game-art { aspect-ratio:1; }
@media(max-width:760px) { #featured-games,#personal-games { grid-auto-columns:190px; gap:12px; } }
body.playing:not(.player-chrome) #run-progress { display:none; }
body.playing .player-menu { inset:auto auto max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border-radius:4px; }
.run-gate { position:fixed; z-index:40; inset:0; display:grid; place-items:center; background:#071321f5; }
.run-gate>div { padding:24px; text-align:center; }
.run-gate button { min-height:48px; margin:8px; }

.run-page { width:min(100%,900px); margin:0 auto; padding:36px 40px 64px; min-height:calc(100svh - 64px); }
.run-page>h2 { font:700 clamp(30px,4vw,48px)/1.05 Pixel,sans-serif; margin:28px 0 14px; }
.run-page>p { max-width:530px; color:#bcd2e5; line-height:1.6; }
.run-page .run-lineup { gap:20px; margin:28px 0 18px; }
.run-page .run-card { padding:10px; }
.run-page .run-reel { max-height:270px; }
.run-page .run-card strong { font-size:20px; min-height:44px; }
.run-page .run-draft-controls { justify-content:flex-start; gap:24px; }
.run-page #run-start { width:100%; min-height:56px; margin-top:12px; }
@media(max-width:760px) { .run-page { padding:24px 20px 40px; } .run-page .run-lineup { gap:10px; } .run-page .run-card { padding:6px; } .run-page .run-card strong { font-size:16px; } .run-page .run-draft-controls { gap:18px; } }
.detail-page,.profile-page{max-width:1180px;margin:0 auto;padding:32px 28px 100px}
.profile-page > .text-button { margin-inline-end:16px; }
.detail-layout{display:grid;grid-template-columns:minmax(180px,340px) 1fr;gap:32px;align-items:start}
.detail-art{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border:1px solid #304850}
.detail-actions,.library-tabs{display:flex;gap:20px;align-items:center;margin:16px 0 24px}
.library-tabs button[aria-pressed=true]{color:#a8edca;border-bottom:2px solid currentColor}
.detail-banner{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#183c37;margin-bottom:24px}
.detail-banner[hidden]{display:none}.detail-banner .next-button{flex-shrink:0}
.profile-avatar{border-radius:50%;border:2px solid #a8edca}
.custom-avatar { background:#102a3a; border-radius:50%; border:2px solid var(--avatar-accent,#78efc2); image-rendering:pixelated; object-fit:contain!important; }
.avatar:has(.custom-avatar) { border-color:var(--avatar-accent,#78efc2); }
.avatar .custom-avatar { border:0; }
.avatar-edit { display:block; margin:8px auto 20px; }
#avatar-picker { width:min(440px,calc(100vw - 32px)); padding:24px; }
#avatar-picker h2 { margin-top:0; font:700 30px Pixel,monospace; }
#avatar-picker fieldset { min-width:0; border:0; padding:0; margin:20px 0; }
#avatar-picker legend { margin-bottom:12px; }
.avatar-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.avatar-choices label { display:grid; justify-items:center; gap:6px; position:relative; cursor:pointer; }
.avatar-choices img { width:min(72px,100%); height:auto; aspect-ratio:1; border:2px solid transparent; border-radius:50%; background:#102a3a; object-fit:contain; image-rendering:pixelated; }
.avatar-choices input,.avatar-accents input { position:absolute; opacity:0; }
.avatar-choices input:checked+img { border-color:var(--avatar-accent,#78efc2); background:#214139; }
.avatar-choices input:focus-visible+img,.avatar-accents input:focus-visible+.accent-swatch { outline:3px solid #fff8e7; outline-offset:4px; }
.avatar-accents { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px; }
.avatar-accents label { display:grid; place-items:center; width:44px; height:44px; position:relative; cursor:pointer; }
.accent-swatch { display:block; width:28px; height:28px; border-radius:50%; }
.avatar-accents input:checked+.accent-swatch { box-shadow:0 0 0 3px #071b2a,0 0 0 5px #fff8e7; }
.accent-mint { background:#78efc2; }.accent-sky { background:#70d8ff; }.accent-violet { background:#b89aff; }.accent-rose { background:#ff91bf; }.accent-gold { background:#ffd66a; }.accent-ivory { background:#fff8e7; }
#avatar-picker .next-button { width:100%; }
@media(max-width:380px) { .avatar-accents { display:grid; grid-template-columns:repeat(3,1fr); justify-items:center; } }
.profile-metrics{display:flex;gap:40px;margin:24px 0}.profile-metrics strong,.profile-metrics span{display:block}.profile-metrics strong{font:700 28px Pixel,monospace;color:#a8edca}
.hero-feature{position:absolute;right:24px;bottom:16px;z-index:2;background:#06121bdd;padding:10px 14px;color:#fff}
.hero-pause{position:absolute;left:16px;bottom:12px;z-index:2;background:#06121bbb}.storage-status{position:fixed;bottom:90px;left:16px;right:16px;padding:12px;background:#193a36;color:#fff;z-index:15}
.detail-page #game-info-content{line-height:1.7}.detail-page #credit-title{display:none}.detail-page #credit-support{display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:1024px){body{--sidebar-width:76px}.sidebar{padding-inline:10px}.sidebar-brand{flex-direction:column;gap:4px}.sidebar .nav-link{justify-content:center;padding-inline:8px}.sidebar .nav-link span,.sidebar .rail-label,.sidebar .rail-category,.sidebar .rail-about,#sidebar-toggle{display:none}.sidebar .nav-link{position:relative}.sidebar .nav-link::after{content:attr(aria-label);position:absolute;left:60px;background:#10252b;padding:6px 12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10}.sidebar .nav-link:hover::after,.sidebar .nav-link:focus-visible::after{opacity:1}}
@media(max-width:599px){.detail-page,.profile-page{padding:24px 16px 100px}.detail-layout{grid-template-columns:1fr;gap:16px}.detail-art{max-width:260px;margin:auto}.profile-metrics{gap:24px}.detail-banner{align-items:stretch;flex-direction:column}.hero-feature{bottom:4px;right:12px;font-size:12px}}

/* Leaderboards use the same shell and game art without presenting preview games as scored. */
.leaderboards-page{min-height:calc(100svh - 64px);padding-bottom:100px;background:#0b1827}
.leaderboards-hero{min-height:clamp(210px,22vw,290px);display:grid;place-items:center;text-align:center;background:linear-gradient(90deg,#07132199,#07132133 50%,#07132199),linear-gradient(0deg,#0b1827,transparent 40%),url('/brand/leaderboard/background.webp') center 55%/cover no-repeat}
.leaderboards-hero>div{padding:32px 16px;background:radial-gradient(ellipse,#071321b8 0,transparent 70%)}
.leaderboards-eyebrow{font:600 12px Pixel,monospace;letter-spacing:.3em;color:#a7efcc}
.leaderboards-hero h2{margin:8px 0;font:700 clamp(38px,5.5vw,76px)/1 Pixel,monospace;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 4px 0 #06111b}
.leaderboards-hero p{margin:0;color:#e3e9df;font-size:14px;letter-spacing:.12em}
.leaderboards-content{width:min(100%,1420px);margin:auto;padding:20px clamp(16px,3vw,40px)}
.leaderboards-scope{margin:0 0 18px;color:#a6bfd0;font-size:13px}
.leaderboard-tabs,.leaderboard-filters{display:flex;align-items:stretch;gap:6px;overflow-x:auto;scrollbar-width:thin}
.leaderboard-tabs,.leaderboard-filters{scrollbar-width:none}.leaderboard-tabs::-webkit-scrollbar,.leaderboard-filters::-webkit-scrollbar{display:none}
.leaderboard-tabs{padding-bottom:8px;border-bottom:1px solid #284052}
.leaderboard-tabs button{display:flex;justify-content:center;align-items:center;gap:9px;min-height:52px;padding:10px 20px;flex:1 0 auto;border:0;border-radius:5px;background:#16283a;color:#c8d4de;font:600 18px Pixel,monospace;white-space:nowrap}
.leaderboard-tabs button[aria-pressed=true]{background:#a9f3bc;color:#0c1c23}
.leaderboard-tabs button[data-leaderboard-metric=slop][aria-pressed=true]{background:#17313a;color:#d6ff96;box-shadow:inset 0 0 0 2px #a7f03b}
.leaderboard-tabs button[aria-pressed=true] .icon{filter:brightness(0)}
.leaderboard-tabs .icon{width:21px;height:21px}
.slop-tab-icon,.leaderboard-slop-value{display:block;width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.slop-tab-icon{background:url('/brand/leaderboard/icons/slop-inactive.png') center/contain no-repeat}
button[aria-pressed=true] .slop-tab-icon{background-image:url('/brand/leaderboard/icons/slop-active.png')}
.leaderboard-filters{gap:8px;padding:16px 0 20px}
.leaderboard-filters button{min-height:40px;padding:7px 17px;flex:0 0 auto;border:1px solid #3a5064;border-radius:22px;background:transparent;color:#bdced9;font-size:13px}
.leaderboard-filters button[aria-pressed=true]{background:#83e5c0;border-color:#83e5c0;color:#0a1a20;font-weight:bold}
.leaderboard-main{min-height:190px}
.leaderboard-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 0 14px}
.leaderboard-heading h3{margin:0;font:700 clamp(23px,2.2vw,32px) Pixel,monospace;text-transform:uppercase}
.leaderboard-heading span{color:#a6bfd0;font-size:12px}
.leaderboard-list{display:grid;gap:8px}
.leaderboard-row{width:100%;display:grid;grid-template-columns:54px 96px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:112px;padding:8px 16px;border:0;border-radius:8px;background:#15283a;text-align:left;transition:background .18s,transform .18s}
.leaderboard-row:hover{background:#1b3445;transform:translateY(-1px)}
.leaderboard-rank{font:700 34px Pixel,monospace;color:#a9f3bc}
.leaderboard-row>img{width:96px;height:96px;object-fit:cover;border-radius:5px}
.leaderboard-row-copy{min-width:0}.leaderboard-row-copy strong,.leaderboard-row-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaderboard-row-copy strong{font:700 21px Pixel,monospace}.leaderboard-row-copy small{margin-top:6px;color:#b0c5d2;font-size:13px}
.leaderboard-game-logo{display:block;max-width:min(100%,240px);height:44px;object-fit:contain;object-position:left center}
.leaderboard-value{display:flex;align-items:center;gap:8px;color:#a9f3bc;font-size:13px;white-space:nowrap}.leaderboard-value .icon{width:21px;height:21px}
.leaderboard-empty{padding:32px 24px;border-radius:8px;background:#14283a;color:#c1d4df}
.leaderboard-preview-section{margin:4px 0 30px}.leaderboard-preview-section .game-grid{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(175px,17vw,235px);overflow-x:auto;gap:12px;padding-bottom:14px;scroll-snap-type:x proximity}.leaderboard-preview-section .game-card{scroll-snap-align:start}
.leaderboard-player{display:flex;align-items:center;gap:14px;padding:16px;border-radius:8px;background:#15283a}.leaderboard-player img{width:64px;height:64px;border-radius:50%;image-rendering:pixelated}.leaderboard-player strong{font:700 20px Pixel,monospace}.leaderboard-player p{margin:6px 0 0;color:#a6bfd0}
.header-wallet,.header-social{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.header-wallet{gap:12px;margin-left:auto}.header-social{margin-left:5px}
.header-coin{display:block;width:23px;height:23px;border:4px solid #ffca4e;background:#b56a21;box-shadow:inset 0 0 0 3px #ffe57a;clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%)}
.header-karma img{display:block;width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.header-message{display:grid;place-items:center;width:44px;height:44px;color:#f4f2e9}.header-message img{display:block;width:24px;height:24px;object-fit:contain}.header-social .notification-status{display:grid;place-items:center;width:44px;height:44px;color:#f4f2e9}.header-social .icon{width:24px;height:24px}
.header-social .notification-status::after{display:none}
@media(max-width:760px){
 .header-wallet{display:none}.header-social{gap:7px;margin-left:0}
 .leaderboards-hero{min-height:205px;background-position:50% 60%}.leaderboards-hero h2{font-size:clamp(35px,10vw,52px)}
 .leaderboards-content{padding:14px 16px 80px}.leaderboard-tabs button{min-height:50px;padding:8px 4px;font-size:13px;flex:1 1 0;min-width:0;gap:5px}
 .leaderboard-tabs .icon{width:18px;height:18px}.leaderboard-filters{padding:14px 0 18px}
 .leaderboard-row{grid-template-columns:30px 68px minmax(0,1fr);gap:10px;padding:8px;min-height:85px}.leaderboard-rank{font-size:23px}.leaderboard-row>img{width:68px;height:68px}.leaderboard-row-copy strong{font-size:17px}.leaderboard-value{grid-column:3;font-size:11px}.leaderboard-value .icon{width:16px;height:16px}
 .leaderboard-game-logo{height:30px}.leaderboard-slop-value{width:16px;height:16px}
 .leaderboard-preview-section .game-grid{grid-auto-columns:175px}
}
@media(prefers-reduced-motion:reduce){.leaderboard-row{transition:none}}

/* Selected tropical shell: one neutral icon family, mint selection, lime play action. */
:root { --accent:#78efc2; --action:#b0f554; }
.masthead { position:sticky; top:0; height:72px; margin-bottom:0; border:0; background:#071b2af5; backdrop-filter:blur(16px); transition:background .18s; }
.home-links { display:none; align-items:center; gap:18px; margin-left:auto; white-space:nowrap; }
.home-links a,.home-how-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; color:var(--muted); font:14px/1.4 Arial,sans-serif; text-decoration:none; }
.home-links .text-button { min-height:44px; font-size:14px; }
.home-links a:hover,.home-how-link:hover { color:var(--accent); }
.masthead .search-box { order:0; }
.masthead .home-links { order:1; }
.masthead .header-wallet { order:2; }
.masthead .header-social { order:3; }
.masthead #profile-open { order:4; }
.header-scrolled .masthead,.page-header { background:#071b2af5; backdrop-filter:blur(16px); }
body.drawer-open .masthead,body.drawer-open .page-header { background:#071b2a; }
.page-header { position:sticky; top:0; z-index:23; }
.masthead .icon,.page-header .icon,.sidebar .icon,.bottom-nav .icon,.category-tile .icon,.settings-button .icon { filter:brightness(0) invert(96%); }
.sidebar .nav-link.active,.bottom-nav .nav-link.active { background:transparent; color:var(--accent); box-shadow:none; }
.sidebar .nav-link:hover,.sidebar .rail-category:hover,.sidebar .rail-category[aria-pressed=true] { background:transparent; color:var(--accent); }
.sidebar .rail-category[aria-pressed=true] span { color:var(--accent); }
.sidebar .rail-category[aria-pressed=true] .icon { filter:brightness(0) saturate(100%) invert(89%) sepia(37%) saturate(663%) hue-rotate(94deg); }
.sidebar .nav-link.active .icon,.bottom-nav .nav-link.active .icon { filter:brightness(0) saturate(100%) invert(89%) sepia(37%) saturate(663%) hue-rotate(94deg); }
.masthead .icon-button,.page-header .icon-button,.notification-status { width:44px; height:44px; min-width:44px; min-height:44px; padding:10px; }
.masthead .icon,.page-header .icon { width:24px; height:24px; }
.avatar { border:1px solid #e6eada; background:#142a36; box-shadow:none; padding:3px!important; }
.avatar:hover { box-shadow:0 0 0 2px var(--accent); }
.header-social .notification-status { width:44px; height:44px; }
.header-social .notification-status .icon { width:24px; height:24px; }
.header-karma img { width:24px; height:24px; }
.header-message { width:44px; height:44px; }
.hero-logo { display:none; }
.hero { min-height:0; margin:0 24px 32px; border-radius:12px; }
.hero-content { min-height:520px; padding:56px 24px 20px; }
.hero .landscape { background-image:linear-gradient(180deg,#071b2a85,#071b2a10 48%,#071b2ad9),url('/brand/landing/hero.webp'); background-position:center 56%; }
.hero-content h1 { font-size:clamp(44px,5.2vw,76px); font-weight:700; color:#fffbea; line-height:.95; letter-spacing:1px; text-shadow:0 2px 0 #09274266,0 4px 12px #061b3633; margin:0; }
.landscape::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#04122170,transparent 45%); pointer-events:none; }
.play-controls { margin-top:auto; width:min(100%,520px); padding-top:72px; }
.roughness-hint { margin:0; color:#d0dedf; font:14px/1.5 Arial,sans-serif; }
.how-it-works { margin:0 0 36px; padding:4px 0 28px; border-bottom:1px solid #ffffff14; scroll-margin-top:88px; }
.how-it-works h2 { margin:0 0 24px; font:700 26px/1.2 Pixel,monospace; }
.how-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.how-steps h3 { margin:0 0 10px; color:var(--accent); font:600 20px/1.3 Pixel,monospace; }
.how-steps p { margin:0; max-width:32ch; color:var(--muted); font:16px/1.6 Arial,sans-serif; }
.how-it-works:focus { outline:2px solid var(--accent); outline-offset:6px; }
.home-links a:focus-visible,.home-how-link:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.play-button,.next-button { background:var(--action); color:#081b2a; border:0; box-shadow:none; }
.play-button { min-height:60px; font-size:25px; }
.play-button>.icon { width:28px; height:28px; }
.roughness-control { gap:12px; margin-top:10px; padding:0; }
input[type=range]::-webkit-slider-runnable-track { background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--range-fill,0%),#526779 var(--range-fill,0%),#526779 100%); height:6px; }
input[type=range]::-moz-range-progress { background:var(--accent); height:6px; }
.run-start { margin-top:5px; min-height:44px; background:transparent; color:#c2cdd2; border:0; }
.home-how-link { display:flex; width:max-content; margin:auto; }
body:not(.inner-page) .categories { display:none; }
.home-view #featured-games .game-art { display:none; }
.home-view #featured-games .card-info { display:block; padding:20px 16px 12px; }
.home-view #featured-games .card-info h3 { font:600 22px/1.3 Pixel,sans-serif; overflow-wrap:anywhere; white-space:normal; margin:0 0 12px; }
.home-view #featured-games .card-info p { display:none; }
.home-view #featured-games .game-card { display:flex; flex-direction:column; height:100%; border:1px solid #ffffff14; border-radius:8px; background:#102a3a; }
.home-view #featured-games .game-launch { flex:1; }
.home-view #featured-games .game-card:hover { transform:none; border-color:var(--accent); }
.home-view #featured-games { min-height:0; align-items:stretch; }
.home-view #featured-games .card-footer { display:flex; padding:0 12px 12px 16px; gap:8px; }
.home-view #featured-games .card-support { min-height:44px; min-width:0; font-size:12px; text-align:left; }
.home-view #featured-games .save-game { width:44px; height:44px; flex:none; }
.home-view #featured-games .creator-credit { color:#bdced9; font-size:14px; }
.creator-credit,.preview-card .card-info .creator-credit { display:flex; align-items:center; gap:7px; min-width:0; margin:6px 0; color:#a7bdc9; font:13px/1.3 Arial,sans-serif; }
.creator-credit img,.creator-initial { width:24px; height:24px; flex:none; border-radius:50%; background:#163646; }
.creator-credit img { object-fit:cover; image-rendering:pixelated; }
.creator-initial { display:grid; place-items:center; color:var(--accent); font:600 14px Pixel,sans-serif; }
.preview-card .card-info .creator-credit>span,.creator-credit>span:last-child { margin:0; font:inherit; color:inherit; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mood-browse { margin-left:auto; color:var(--accent); font:500 16px Pixel,sans-serif; min-height:44px; }
.section-heading .chevron { filter:none; color:inherit; width:18px; height:18px; stroke-width:2.5; }
.carousel-controls { display:flex; gap:2px; }
.carousel-controls button:disabled { opacity:.3; }
#featured-games .preview-card { border:0; background:transparent; }
.card-badge { background:#071b2adc; color:#d7eee6; }
.section-heading h2 { font:700 25px Pixel,monospace; }
.section-heading .star,.section-heading .icon { color:var(--accent); }
.section-heading .icon,.save-game .icon,.filter-category .icon { filter:brightness(0) invert(83%); }
.save-game[aria-pressed=true] .icon { filter:brightness(0) saturate(100%) invert(89%) sepia(37%) saturate(663%) hue-rotate(94deg); }
.account-entry { display:inline-flex; text-decoration:none; padding:14px 20px; margin-top:12px; }
.category-tile,.filter-category span { color:var(--ink); border-color:var(--line); background:#102a3a; }
.category-tile[aria-pressed=true],.filter-category:has(input:checked) span { color:var(--night); background:var(--accent); }
@media(min-width:1024px) {
 .masthead { padding-inline:28px; gap:14px; }
 .masthead .mobile-brand { display:block; position:absolute; left:50%; transform:translateX(-50%); width:180px; height:40px; overflow:hidden; }
 .masthead .mobile-brand img { width:100%; height:100%; object-fit:cover; object-position:50% 46%; transform:scale(1.22); }
 .masthead .search-box { width:clamp(190px,16vw,240px); margin:0; border-radius:8px; background:#071b2a70; border-color:#ffffff30; }
 .hero-content { min-height:520px; padding:56px 32px 20px; }
 .hero-content h1 { font-size:clamp(64px,5.2vw,88px); }
 .play-controls { width:520px; padding-top:72px; }
 .play-button { min-height:64px; font-size:27px; }
 .discovery-content { padding:0 24px 48px; }
 .home-view #featured-games { grid-auto-columns:clamp(210px,19vw,280px); gap:14px; }
 .sidebar .wordmark { width:52px; }
}
@media(min-width:1440px) {
 .home-links { display:flex; }
 .masthead .header-wallet { margin-left:0; }
 .home-how-link { display:none; }
}
@media(max-width:760px) {
 .masthead { padding:0 12px; gap:4px; height:64px; margin-bottom:0; }
 .masthead #menu-toggle { order:0; }
 .masthead .mobile-brand { order:1; min-width:0; }
 .masthead #mobile-search-open { order:2; }
 .masthead .header-social { order:3; }
 .masthead #profile-open { order:4; }
 .mobile-brand { display:block; flex:1; width:auto; max-width:180px; height:32px; overflow:hidden; margin:auto; }
 .mobile-brand img { width:100%; height:100%; object-fit:cover; object-position:50% 46%; transform:scale(1.22); }
 #mobile-search-open { margin-left:0; }
 .masthead .header-message { display:none; }
 .header-social { gap:0; }
 .hero { min-height:0; margin:0 16px 28px; }
 .hero-content { min-height:500px; padding:40px 16px 16px; }
 .hero-content h1 { font-size:clamp(32px,8.8vw,60px); line-height:1; letter-spacing:.5px; }
 .hero .landscape { background-image:linear-gradient(180deg,#071b2a70,#071b2a00 48%,#071b2ad9),url('/brand/landing/hero-core-mobile.webp'); background-size:cover; background-position:center 58%; }
 .play-controls { margin-top:16px; width:100%; max-width:520px; padding-top:0; }
 .play-button { min-height:50px; padding:10px; gap:14px; font-size:clamp(18px,4.8vw,28px); }
 .play-button>.icon { width:26px; height:26px; }
 .roughness-control { gap:8px; }
 .hero .settings-button { padding:10px; min-width:44px; }
 .run-start { font-size:13px; min-height:44px; }
 .hero .roughness-hint,.hero .run-start,.hero .home-how-link,.hero #catalog-status:not(.sr-only) { width:fit-content; max-width:100%; padding-inline:8px; border-radius:5px; background:#071b2af5; color:var(--ink); }
 .hero .roughness-hint { margin-inline:auto; }
 .hero .run-start { display:flex; }
 .hero .run-start,.hero .home-how-link,.hero #catalog-status:not(.sr-only) { margin-left:auto; margin-right:0; }
 .hero .run-tag { color:inherit; }
 .discovery-content { padding:0 16px 30px; }
 .how-it-works { scroll-margin-top:80px; margin-bottom:28px; }
 .how-it-works h2 { font-size:24px; margin-bottom:20px; }
 .how-steps { grid-template-columns:1fr; gap:24px; }
 .how-steps p { max-width:none; }
 .section-heading { margin-bottom:8px; }
 .section-heading h2 { font-size:21px; }
 .home-view #featured-games { grid-auto-columns:min(78vw,280px); gap:12px; }
 #featured-section .section-heading { gap:8px; }
 #featured-section .section-heading h2 { font-size:clamp(17px,4.4vw,23px); }
 .mood-browse { font-size:14px; gap:4px; }
 .carousel-controls { display:none; }
 .sidebar { width:min(82vw,340px); bottom:0; background:#071b2a; gap:16px; }
 .sidebar .nav-link { min-height:58px; font:600 22px Pixel,sans-serif; }
 .sidebar .rail-label { margin:8px 0 -8px; padding:18px 12px 0; border-top:1px solid #ffffff14; }
 .sidebar .rail-categories { display:flex; overflow-x:auto; flex:none; gap:6px; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:8px; }
 .sidebar .rail-category { width:auto; min-width:84px; flex:none; flex-direction:column; gap:8px; scroll-snap-align:start; padding:12px 8px; }
 .sidebar>a.nav-link { margin-top:auto; border-top:1px solid #ffffff14; padding-top:18px; font-size:19px; }
 #featured-games .card-badge { font:600 9px "Segoe UI",sans-serif; padding:3px 5px; }
 #personal-games { grid-auto-columns:42vw; }
 .page-header-actions .header-wallet,.page-header-actions .header-message { display:none; }
 .page-header .page-brand { display:none; }
 .page-header .search-box { width:auto; flex:1; max-width:210px; }
}
@media(prefers-reduced-motion:reduce) { .masthead { transition:none; } }

/* One live iframe, presented either as a watch page or an immersive game. */
.player-main { min-width:0; }
#game-author { margin:2px 0 0; color:var(--muted); font:13px/1.5 Arial,sans-serif; }
#play-next,#game-comments { display:none; }
#player-display-status { margin:0; color:var(--muted); font:14px/1.5 Arial,sans-serif; }
#player-display-status:empty { display:none; }
body.playing:not(.player-expanded) { overflow:auto; }
body.playing:not(.player-expanded) #player { position:relative; inset:auto; width:auto; height:auto; min-height:100dvh; padding:16px; display:grid; gap:28px; z-index:auto; }
body.playing:not(.player-expanded) .player-main { display:flex; flex-direction:column; }
body.playing:not(.player-expanded) #game-stage { position:relative; inset:auto; order:0; height:max(var(--game-min-height,400px),min(68dvh,56vw)); min-height:0; max-height:none; width:100%; flex:none; border-radius:6px; }
body.playing:not(.player-expanded) .player-bar { position:static; inset:auto; display:flex; order:1; flex-wrap:wrap; gap:12px; min-height:76px; margin:0; padding:12px 0; background:transparent; }
body.playing:not(.player-expanded) .player-menu { display:none; }
body.playing:not(.player-expanded) #player-display-status { order:2; }
body.playing:not(.player-expanded) #compatibility-banner:not([hidden]) { position:static; order:2; margin:0 0 16px; }
body.playing:not(.player-expanded) #game-comments { display:block; order:3; padding:24px 0; border-top:1px solid #ffffff14; }
body.playing:not(.player-expanded) #play-next { display:block; min-width:0; }
#play-next h2,#comments-title { font:700 26px/1.2 Pixel,sans-serif; margin:0 0 16px; }
#play-next-games { display:grid; gap:12px; }
.play-next-game { display:flex; width:100%; gap:14px; align-items:center; text-align:left; padding:6px; border:0; border-radius:6px; background:transparent; color:var(--ink); min-width:0; }
.play-next-game:hover { background:#ffffff0a; }
.play-next-game img { width:42%; aspect-ratio:16/10; object-fit:cover; border-radius:4px; }
.play-next-game>span { min-width:0; }
.play-next-game strong { display:block; font:600 18px/1.2 Pixel,sans-serif; overflow-wrap:anywhere; }
.play-next-game small { display:block; color:var(--muted); margin-top:7px; font:12px/1.5 Arial,sans-serif; overflow-wrap:anywhere; }
#comment-draft { width:100%; padding:14px; resize:vertical; min-height:88px; border:1px solid #ffffff28; border-radius:6px; background:#ffffff05; color:var(--ink); font:15px/1.5 Arial,sans-serif; }
.comment-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:10px; }
#comment-status { flex:1; min-width:140px; margin:0; color:var(--muted); font:13px/1.5 Arial,sans-serif; }
#game-description { display:none; }
body.playing:not(.player-expanded) #game-description { display:block; order:2; margin:0 0 20px; padding:14px 16px; background:#ffffff05; border-radius:6px; font:14px/1.6 Arial,sans-serif; }
#game-description summary { cursor:pointer; font-weight:600; min-height:32px; }
#game-views { margin-left:16px; color:var(--muted); font-weight:400; }
.game-stat-row,.game-rating-legend { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.game-rating-bar { height:5px; display:flex; background:#ffffff20; overflow:hidden; border-radius:3px; }
#game-love-fill { background:#78efaa; } #game-slop-fill { background:#f27b7b; }
.game-rating-legend { font-size:12px; margin-top:6px; }
.game-rating-legend>span:first-child { color:#78efaa; } .game-rating-legend>span:last-child { color:#f27b7b; }
.comment { display:flex; gap:12px; padding:12px 0; font:14px/1.5 Arial,sans-serif; }
.comment>img { width:32px; height:32px; border-radius:50%; flex-shrink:0; }
.comment-copy { flex:1; min-width:0; overflow-wrap:anywhere; }
.comment-author { font-weight:600; font-size:13px; } .comment-author span { font-weight:400; color:var(--muted); }
.comment-copy>p { margin:4px 0; white-space:pre-wrap; }
.comment-tools { display:flex; align-items:center; gap:20px; }
.comment-tools .text-button { min-height:36px; font:13px Arial,sans-serif; text-decoration:none; }
.comment-tools button[aria-pressed=true] { color:#ff91bf; }
.comment-report { margin-left:auto; position:relative; } .comment-report summary { cursor:pointer; padding:8px 12px; list-style:none; }
.comment-report form { display:flex; flex-wrap:wrap; gap:8px; position:absolute; z-index:2; right:0; width:220px; padding:12px; background:#102536; border:1px solid #ffffff20; border-radius:6px; }
.comment-report select,.comment-sort-label select { background:#102536; color:var(--ink); border:1px solid #ffffff20; padding:7px; border-radius:4px; }
.comment-sort-label { display:block; text-align:right; font:13px Arial,sans-serif; margin:16px 0 4px; }
.comment-replies { border-left:1px solid #ffffff14; padding-left:12px; } .comment-replies summary { cursor:pointer; color:#78efc2; min-height:32px; padding-top:6px; font-size:13px; }
.comment-replies .comment-replies .comment-replies { padding-left:0; border-left:0; }
.comment-replies .comment-replies .comment>img { display:none; }
.comment-replies .comment-replies .comment { gap:0; }
.comment-reply-form textarea { width:100%; padding:10px; background:#ffffff05; color:var(--ink); border:1px solid #ffffff20; font:14px/1.5 Arial,sans-serif; resize:vertical; }
.comment-reply-form>button { margin-right:20px; }
.comment-actions .next-button { font-size:16px; min-height:44px; }
body.playing:not(.player-expanded) .run-progress { position:static; transform:none; order:2; margin:0 0 12px; align-self:flex-start; }
body.playing.player-expanded #player-display-status:not(:empty) { position:fixed; top:90px; left:12px; z-index:23; padding:12px; background:#071321; }
body.playing.player-expanded .player-bar { padding-right:12px; }
@media(min-width:1024px) {
 body.playing:not(.player-expanded) .masthead { display:none; }
 body.playing:not(.player-expanded) main { margin-left:76px; }
 body.playing:not(.player-expanded) #sidebar { display:flex; }
 body.playing:not(.player-expanded) #player { grid-template-columns:minmax(0,1fr) 300px; padding:24px; gap:24px; min-height:calc(100dvh - 68px); }
}
@media(max-width:1023px) {
 body.playing:not(.player-expanded) #play-next-games { display:flex; overflow-x:auto; scroll-snap-type:x proximity; }
 .play-next-game { flex:0 0 230px; display:block; scroll-snap-align:start; }
 .play-next-game img { width:100%; margin-bottom:10px; }
 body.playing:not(.player-expanded) #game-stage { height:max(var(--game-min-height,400px),52dvh); }
}
@media(max-width:599px) {
 body.playing:not(.player-expanded) #player { padding:0 0 24px; }
 body.playing:not(.player-expanded) .player-bar { padding:12px; gap:10px; }
 body.playing:not(.player-expanded) .game-heading { flex-basis:calc(100% - 60px); }
 body.playing:not(.player-expanded) #game-comments,body.playing:not(.player-expanded) #play-next { padding:20px 16px; }
 body.playing:not(.player-expanded) #game-stage { border-radius:0; }
 body.playing.player-expanded .player-bar { flex-wrap:wrap; }
}


/* Browse has its own compact results layout; Home cards and the landing landscape stay unchanged. */
body.browse-view .page-header { min-height:82px; }
body.browse-view .page-header .search-box { display:flex; width:min(48vw,680px); max-width:none; margin-inline:auto; border-radius:22px; }
body.browse-view .discovery-content { max-width:1520px; padding-top:14px; }
body.browse-view .categories { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:clamp(6px,1.3vw,18px); margin:0 0 30px; padding:0; border-bottom:1px solid #47637a; scroll-snap-type:x proximity; }
body.browse-view .category-tile { flex:0 0 auto; min-height:58px; padding:9px 15px 12px; display:flex; flex-direction:row; gap:9px; color:var(--ink); background:none; border:0; border-bottom:3px solid transparent; border-radius:0; box-shadow:none; font:600 14px Pixel,sans-serif; white-space:nowrap; }
body.browse-view .category-tile .icon { width:21px; height:21px; filter:brightness(0) invert(96%); }
body.browse-view .category-tile[aria-pressed=true] { color:var(--accent); background:none; border-bottom-color:var(--accent); box-shadow:none; }
body.browse-view .category-tile[aria-pressed=true] .icon { filter:brightness(0) saturate(100%) invert(89%) sepia(37%) saturate(663%) hue-rotate(94deg); }
body:not(.browse-view) .cat-all { display:none; }
body.browse-view #browse-section .section-heading { margin-bottom:3px; }
body.browse-view #browse-title { font:700 clamp(22px,2.2vw,30px)/1.2 Pixel,sans-serif; text-transform:uppercase; }
body.browse-view #browse-status { min-height:22px; margin:0 0 14px; color:#a7bfd3; font-size:14px; }
body.browse-view #browse-retry { margin:0 0 18px; color:var(--accent); }
body.browse-view #browse-games { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; overflow:visible; scroll-snap-type:none; }
body.browse-view #browse-games[hidden],.browse-skeleton[hidden] { display:none; }
body.browse-view #browse-games .game-card { align-self:start; }
body.browse-view #browse-games .game-art { aspect-ratio:2/3; }
body.browse-view #browse-games .game-art img { object-fit:cover; }
body.browse-view #browse-games .game-card:not(.preview-card) .game-art::before { content:"PLAYABLE"; position:absolute; top:9px; left:9px; z-index:2; padding:5px 7px; border-radius:3px; background:#082033; color:var(--accent); font:700 10px Pixel,sans-serif; letter-spacing:.04em; }
body.browse-view #browse-games .card-badge { top:9px; left:9px; padding:5px 7px; border-radius:3px; background:#082033; color:#fff; font:700 10px Pixel,sans-serif; letter-spacing:.04em; }
body.browse-view #browse-games .card-info { padding:13px 14px 8px; }
body.browse-view #browse-games .card-info h3 { min-height:0; margin-bottom:5px; font-size:18px; line-height:1.2; }
body.browse-view #browse-games .creator-credit { color:#9ebbd1; }
body.browse-view #browse-games .creator-credit img,body.browse-view #browse-games .creator-initial { display:none; }
body.browse-view #browse-games .card-info p { display:none; }
body.browse-view #browse-games .card-footer { padding:0 10px 8px 14px; }
body.browse-view #browse-pending { margin:0 0 14px; color:#a7bfd3; font-size:14px; }
body.browse-view #browse-pending[hidden],body.browse-view #browse-empty[hidden] { display:none; }
body.browse-view #browse-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:520px; min-height:min(58vh,580px); margin:0 auto; text-align:center; }
body.browse-view #browse-empty>.icon { width:64px; height:64px; margin-bottom:18px; filter:brightness(0) invert(96%); }
body.browse-view #browse-empty h3 { margin:0 0 8px; font:700 clamp(23px,3vw,34px)/1.2 Pixel,sans-serif; }
body.browse-view #browse-empty p { margin:0 0 20px; color:#a7bfd3; font-size:16px; }
body.browse-view #browse-empty .text-button { margin:0; color:var(--accent); text-decoration:underline; text-underline-offset:5px; font-size:16px; }
body.browse-view #browse-empty .text-button[hidden] { display:none; }
.browse-skeleton { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.browse-skeleton-card { padding:14px; border:1px solid #31516b; border-radius:9px; background:#0b2033; }
.browse-skeleton-card span { display:block; background:#25425b; border-radius:5px; }
.browse-skeleton-card .skeleton-art { width:100%; aspect-ratio:2/3; }
.browse-skeleton-card .skeleton-title { width:85%; height:13px; margin:16px 0 9px; }
.browse-skeleton-card .skeleton-credit { width:58%; height:11px; margin-bottom:5px; }
@media(max-width:760px) {
 body.browse-view .page-header { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; grid-template-rows:54px 62px; gap:0 8px; padding:6px 14px 9px; }
 body.browse-view #page-menu-toggle { display:none; }
 body.browse-view #page-back { display:grid; grid-column:1; grid-row:1; }
 body.browse-view #page-title { grid-column:2; grid-row:1; font:700 22px Pixel,sans-serif; }
 body.browse-view .page-header-actions { grid-column:3; grid-row:1; margin:0; }
 body.browse-view .page-header-actions .header-social { display:none; }
 body.browse-view .page-header .search-box { grid-column:1/-1; grid-row:2; width:100%; max-width:none; min-width:0; height:52px; margin:2px 0 0; border-radius:24px; }
 body.browse-view .page-header .search-box input { min-width:0; }
 body.browse-view .discovery-content { padding:8px 14px 36px; }
 body.browse-view .categories { gap:4px; margin-bottom:22px; }
 body.browse-view .category-tile { min-height:52px; padding:7px 11px 10px; font:600 13px Pixel,sans-serif; }
 body.browse-view .category-tile .icon { width:19px; height:19px; }
 body.browse-view #browse-games,.browse-skeleton { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 body.browse-view #browse-games .card-info { padding:10px 9px 5px; }
 body.browse-view #browse-games .card-info h3 { font-size:14px; }
 body.browse-view #browse-games .creator-credit { font-size:11px; }
 body.browse-view #browse-games .card-footer { padding:0 6px 6px 9px; }
 body.browse-view #browse-games .card-support { font-size:9px; }
 body.browse-view #browse-games .save-game { width:32px; height:32px; }
}
@media(prefers-reduced-motion:reduce) {
 body.browse-view .category-tile { transition:none; }
}

/* The player header takes real layout space in both in-page modes. */
.player-header { display:flex; flex:none; align-items:center; gap:12px; min-height:64px; padding:8px 20px; border-bottom:1px solid #34516c; background:#071b2a; color:#fff8e7; }
.player-header[hidden] { display:none; }
.player-header #home-button,.player-header .icon-button,.player-header .notification-status,.player-header .header-message { display:grid; place-items:center; flex:none; width:44px; height:44px; min-width:44px; min-height:44px; }
.player-header .icon { width:24px; height:24px; filter:brightness(0) invert(96%); }
#player-header-art { flex:none; width:40px; height:40px; object-fit:cover; border-radius:4px; }
#player-header-title { flex:1; min-width:0; font:600 18px/1.2 Pixel,sans-serif; overflow-wrap:anywhere; }
.player-header-actions { display:flex; align-items:center; gap:4px; margin-left:auto; }
.player-header .notification-status::after { display:none; }
#player-size::before { content:'↗↙'; display:inline-block; margin-right:8px; color:#78efc2; font-size:18px; text-decoration:none; }
body.playing:not(.player-expanded) #player-header { grid-column:1/-1; }
body.playing.player-expanded #player { display:flex; flex-direction:column; }
body.playing.player-expanded .player-main { position:relative; flex:1; min-height:0; }
body.playing.player-expanded #game-stage { position:absolute; inset:0; }
body.playing.player-expanded .player-menu { position:absolute; inset:8px 8px auto auto; }
@media(max-width:1023px) { body.playing:not(.player-expanded) #player-header { grid-column:1; } }
@media(max-width:599px) {
 .player-header { gap:8px; padding:8px 10px; }
 #player-header-title { font-size:15px; }
 .player-header-desktop { display:none !important; }
 .player-header-actions { gap:0; }
}

[data-account-menu] { width:44px; height:44px; min-width:44px; min-height:44px; }
[data-account-menu] img { object-fit:contain; }
[data-account-menu][data-account-state=neutral] { border-color:transparent; background:transparent; }
[data-account-menu][data-account-state=neutral] img { width:24px; height:24px; margin:auto; border-radius:0; filter:brightness(0) invert(96%); }
[data-account-menu][data-account-state=signed] img { width:32px; height:32px; margin:auto; border-radius:50%; object-fit:cover; }
.account-menu { position:fixed; z-index:40; box-sizing:border-box; overflow-y:auto; padding:12px; border:1px solid #78efc2; border-radius:9px; background:#071b2af5; box-shadow:0 14px 36px #0009; color:#fff8e7; }
.account-menu[hidden] { display:none; }
.account-menu-identity { display:flex; align-items:center; gap:12px; min-height:58px; padding:4px 6px 12px; border-bottom:1px solid #34516c; }
.account-menu-identity img { flex:none; width:44px; height:44px; border:1px solid #78efc2; border-radius:50%; object-fit:contain; image-rendering:pixelated; }
.account-menu-identity img[data-account-state=neutral] { width:44px; height:44px; padding:10px; border:0; border-radius:0; filter:brightness(0) invert(96%); }
#account-menu-identity { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 16px Pixel,sans-serif; }
.account-menu-rows { display:grid; gap:2px; padding-top:8px; }
.account-menu-rows a,.account-menu-rows button { display:flex; align-items:center; justify-content:space-between; gap:8px; box-sizing:border-box; min-height:44px; width:100%; padding:10px 12px; border:0; border-radius:5px; background:transparent; color:#fff8e7; text-align:left; text-decoration:none; font:15px/1.35 Arial,sans-serif; cursor:pointer; }
.account-menu-rows [hidden] { display:none; }
.account-menu-rows svg,.account-menu-rows img { flex:none; width:20px; height:20px; margin-right:4px; object-fit:contain; }
.account-menu-rows .row-label { display:flex; align-items:center; min-width:0; }
.account-menu-rows a:hover,.account-menu-rows button:hover,.account-menu-rows :focus-visible { background:#143247; outline:2px solid #78efc2; outline-offset:0; }
.account-menu-rows small { color:#a6bfd0; font-size:12px; white-space:nowrap; }
#account-menu-logout { margin-top:6px; border-top:1px solid #34516c; border-radius:0; }
#account-menu-status { margin:6px 10px 0; color:#bdd2d0; font:13px/1.4 Arial,sans-serif; overflow-wrap:anywhere; }
#account-menu-status:empty { display:none; }
.account-menu[aria-busy=true] #account-menu-logout { opacity:.65; cursor:wait; }