@import url('assets/fonts/fonts.css');


:root {
  color-scheme:dark;
  --bg:#101715;
  --sidebar:#141d19;
  --panel:#1b2520;
  --line:#29342d;
  --muted:#97a49b;
  --text:#f1f4ed;
  --accent:#b3ed9b;
  --accent-dark:#243d29;
  --accent-text:#c8f3b7;
  --hero:#294c37;
  --font:'DM Sans',sans-serif;
  --display:'Outfit',sans-serif}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:1rem;
  -webkit-font-smoothing:antialiased}
button,input,select {
  font:inherit}
button,a,input,select {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
button {
  color:inherit}
button,select {
  touch-action:manipulation}
button:disabled {
  cursor:default}
button {
  border:0}
button svg,span svg {
  display:block;
  width:20px;
  height:20px}
svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px}
button {
  transition:background .18s,color .18s,transform .18s}
button:hover {
  filter:brightness(1.07)}
[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}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  transform:translateY(-160%);
  z-index:30;
  color:#102016;
  background:var(--accent);
  padding:12px 18px;
  border-radius:9px}
.skip-link:focus {
  transform:none}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:220px;
  background:var(--sidebar);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  z-index:10;
  padding:29px 18px 20px}
.brand {
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  background:none;
  width:max-content;
  font-family:var(--display);
  font-size:1.75rem;
  line-height:.85;
  font-weight:750;
  letter-spacing:-1.7px}
.brand-symbol {
  display:grid;
  place-items:center;
  width:43px;
  height:46px;
  color:var(--accent)}
.brand-symbol svg {
  width:43px;
  height:43px;
  fill:currentColor;
  stroke:none}
.brand small {
  display:block;
  font-family:var(--font);
  letter-spacing:4px;
  font-size:.75rem;
  line-height:1;
  margin:10px 0 0 3px;
  font-weight:600}
.brand-dot {
  color:var(--accent)}
.sidebar-content {
  margin-top:49px}
.nav-caption {
  font-size:.75rem;
  letter-spacing:1.65px;
  color:#7f9086;
  margin:0 14px 17px;
  font-weight:650}
.zone-nav {
  display:grid;
  gap:8px}
.nav-item {
  display:flex;
  align-items:center;
  gap:13px;
  background:none;
  width:100%;
  padding:14px;
  border-radius:11px;
  text-align:left;
  color:#a3b0a7;
  font-weight:600;
  font-size:1rem}
.nav-item>span:nth-child(2) {
  flex:1}
.nav-item svg {
  width:21px;
  height:21px}
.nav-item small {
  display:block;
  font-size:.8125rem;
  font-weight:400;
  margin-top:5px;
  opacity:.68;
  white-space:nowrap}
.nav-item.active {
  color:var(--accent-text);
  background:var(--accent-dark)}
.nav-item:hover {
  background:#223027}
.nav-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  opacity:0}
.active .nav-dot {
  opacity:1}
.nav-divider {
  height:1px;
  background:var(--line);
  margin:23px 13px 15px}
.utility-nav {
  padding:13px 14px;
  font-size:.9375rem;
  font-weight:500}
.utility-nav svg {
  width:18px;
  height:18px}
.count-badge {
  font-size:.8125rem;
  background:#2c3830;
  border-radius:5px;
  min-width:21px;
  padding:3px;
  text-align:center;
  color:#bdc8c0}
.sidebar-bottom {
  margin-top:auto;
  padding-top:35px}
.club-note {
  position:relative;
  overflow:hidden;
  padding:22px 17px 19px;
  background:#213526;
  border:1px solid #304a32;
  border-radius:13px}
.club-note .sparkle {
  display:block;
  color:#c6e9a6;
  margin-bottom:13px}
.club-note .sparkle svg {
  width:25px;
  height:25px}
.club-note strong {
  font-family:var(--display);
  font-size:1.375rem;
  font-weight:550;
  line-height:1.2;
  color:#d6ecc7;
  position:relative;
  z-index:1}
.club-note p {
  font-size:.8125rem;
  line-height:1.7;
  margin:11px 0 0;
  color:#9caf9c;
  position:relative;
  z-index:1}
.note-ring {
  position:absolute;
  width:120px;
  height:120px;
  border:1px solid #567247;
  border-radius:50%;
  opacity:.33}
.ring-one {
  right:-65px;
  top:30px}
.ring-two {
  right:-46px;
  top:48px}
.sidebar-footer {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.75rem;
  color:#87998b;
  white-space:nowrap;
  margin:20px 3px 0}
.status-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9bce87}

.workspace {
  margin-left:220px}
.topbar {
  height:86px;
  padding:0 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px}
.breadcrumb {
  display:flex;
  gap:13px;
  align-items:center;
  font-size:.875rem;
  color:#8f9d94}
.breadcrumb>span:first-child {
  margin-right:1px}
.breadcrumb svg {
  width:17px;
  height:17px}
.breadcrumb strong {
  font-weight:500;
  color:#d9e0d9}
.breadcrumb-slash {
  color:#4d5c52}
.topbar-actions {
  display:flex;
  gap:20px;
  align-items:center}
.icon-button {
  display:grid;
  place-items:center;
  background:none;
  width:36px;
  height:36px;
  border-radius:50%;
  color:#9aab9e}
.icon-button:hover {
  background:#2c3830;
  color:#f4f6f0}
.wallet {
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 13px 8px 9px;
  background:#202b23;
  border:1px solid #35422c;
  border-radius:10px;
  text-align:left}
.coin-icon {
  display:grid;
  place-items:center;
  background:#e9c66b;
  color:#866226;
  border:3px double #a48238;
  border-radius:50%;
  width:29px;
  height:29px;
  font-family:var(--display);
  font-size:1.125rem;
  font-weight:700;
  box-shadow:0 2px 0 #8f7333}
.wallet small {
  display:block;
  font-size:.75rem;
  letter-spacing:1px;
  color:#bcc2a5;
  font-weight:600}
.wallet strong {
  font-family:var(--display);
  font-size:1.125rem;
  line-height:1.25;
  font-weight:600;
  letter-spacing:.4px}
.wallet-info {
  margin-left:12px;
  color:#8d9d86}
.wallet-info svg {
  width:14px;
  height:14px}
.avatar {
  position:relative;
  width:34px;
  height:34px;
  background:#e7bf9c;
  border-radius:12px;
  font-family:var(--display);
  font-size:1rem;
  font-weight:650;
  color:#684b33}
.avatar>span {
  position:absolute;
  bottom:-2px;
  right:-2px;
  width:9px;
  height:9px;
  border-radius:50%;
  border:2px solid var(--bg);
  background:#a7dc88}

main {
  max-width:1480px;
  margin:0 auto;
  padding:34px 42px 0;
  min-width:0}
.page-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:27px}
.eyebrow {
  color:#8da18f;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:2px;
  margin:0 0 9px}
h1 {
  font-family:var(--display);
  font-size:2rem;
  line-height:1.2;
  font-weight:550;
  letter-spacing:-.9px;
  margin:0}
h1>span {
  color:var(--accent)}
.page-intro p:last-child {
  color:var(--muted);
  font-size:.875rem;
  margin:9px 0 0}
.lobby-badge {
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid #34402e;
  color:#b8c2a6;
  border-radius:5px;
  padding:6px 8px;
  font-size:.75rem;
  letter-spacing:1px;
  white-space:nowrap}
.lobby-badge>span {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#c7d999}
.hero-layout {
  display:grid;
  grid-template-columns:minmax(0,2.55fr) minmax(230px,1fr);
  gap:20px}
.hero {
  position:relative;
  overflow:hidden;
  min-height:326px;
  border-radius:18px;
  background:var(--hero);
  isolation:isolate;
  border:1px solid #4c6d4355}
.hero-image {
  position:absolute;
  inset:0 0 0 auto;
  width:63%;
  height:100%;
  object-fit:cover;
  object-position:57% center;
  z-index:-2}
.hero-shade {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#294c37 0%,#294c37 29%,#294c37eb 40%,#294c3738 63%,#294c3700 100%)}
.hero-content {
  position:relative;
  padding:31px 32px;
  max-width:70%}
.hero-label {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#e0f0cc;
  font-size:.75rem;
  letter-spacing:1.6px;
  font-weight:650}
.hero-label svg {
  width:13px;
  height:13px}
.hero h2 {
  font-family:var(--display);
  font-size:2.5rem;
  line-height:1.1;
  letter-spacing:-1.1px;
  font-weight:550;
  margin:20px 0 14px}
.hero h2 em {
  font-style:normal;
  color:#c0ee9e}
.hero-content>p {
  font-size:.875rem;
  line-height:1.8;
  color:#c1d2bd;
  margin:0 0 22px;
  max-width:260px}
.primary-button {
  display:inline-flex;
  gap:18px;
  align-items:center;
  padding:12px 16px;
  background:#d5f5aa;
  color:#233b22;
  border-radius:8px;
  font-size:.875rem;
  font-weight:700;
  box-shadow:0 3px 0 #163a2440}
.primary-button svg {
  width:15px;
  height:15px}
.primary-button:hover {
  transform:translateY(-2px);
  background:#e2ffbd}
.hero-footnote {
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:16px;
  font-size:.75rem;
  color:#c7dab8}
.hero-footnote svg {
  width:11px;
  height:11px}
.hero-sticker {
  position:absolute;
  right:20px;
  top:22px;
  width:69px;
  height:69px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px dashed #f0f1cd9c;
  color:#fff9d9;
  transform:rotate(12deg);
  border-radius:50%;
  background:#23462e42;
  backdrop-filter:blur(4px)}
.hero-sticker svg {
  width:15px;
  height:15px}
.hero-sticker strong {
  font-size:.75rem;
  line-height:1.25;
  font-weight:700;
  text-align:center;
  letter-spacing:.5px}
.switch-card {
  position:relative;
  border:1px solid #37413a;
  border-radius:18px;
  background:#202922;
  padding:20px 23px;
  display:flex;
  flex-direction:column;
  overflow:hidden}
.switch-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#a3b29f;
  gap:10px}
.small-label {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:1.3px}
.switch-card-top svg {
  width:16px;
  height:16px;
  color:#778774}
.switch-art {
  position:relative;
  height:114px;
  margin:0 auto;
  width:190px}
.art-chip {
  position:absolute;
  display:grid;
  place-items:center;
  width:67px;
  height:73px;
  border-radius:19px;
  top:28px;
  box-shadow:1px 8px 0 #091b1555,0 12px 15px #0002;
  transform:rotate(-18deg)}
.art-chip svg {
  width:44px;
  height:44px;
  stroke-width:1.5}
.chip-mint {
  left:21px;
  background:linear-gradient(145deg,#d4ebaf,#6fbd8b);
  color:#366749;
  border:1px solid #dcf4be}
.chip-mint svg path:first-child {
  fill:#659d69;
  stroke:#366749}
.chip-violet {
  left:91px;
  top:22px;
  transform:rotate(19deg);
  background:linear-gradient(145deg,#dfc7f4,#9c83c7);
  color:#685381;
  border:1px solid #ead8fc}
.chip-violet rect {
  fill:#ecdafa;
  stroke:#ecdafa}
.chip-violet circle {
  fill:#7e6598;
  stroke:none}
.art-coin {
  position:absolute;
  left:78px;
  top:83px;
  background:#edcd7c;
  color:#9b722e;
  width:31px;
  height:31px;
  border:3px double #b08d3f;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-weight:700;
  transform:rotate(-17deg);
  box-shadow:0 3px 0 #967035}
.switch-card h2 {
  font-family:var(--display);
  font-size:1.375rem;
  font-weight:500;
  letter-spacing:-.4px;
  margin:15px 0 8px}
.switch-card p {
  font-size:.8125rem;
  line-height:1.8;
  color:#a4b09f;
  margin:0 0 12px}
.text-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #3c4637;
  background:none;
  padding:13px 0 0;
  margin-top:auto;
  color:#d9e5c6;
  font-size:.8125rem;
  font-weight:600;
  width:100%}
.text-button svg {
  width:16px;
  height:16px}

.catalog {
  padding-top:36px;
  scroll-margin-top:24px;
  outline:none!important}
.catalog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px}
.catalog h2 {
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:-.5px;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px}
.catalog h2>span {
  font-family:var(--font);
  font-size:.8125rem;
  letter-spacing:0;
  padding:4px 6px;
  border:1px solid #3c493d;
  color:#9eafa1;
  border-radius:6px}
.catalog-heading p {
  font-size:.8125rem;
  color:var(--muted);
  margin:7px 0 0}
.search-box {
  display:flex;
  align-items:center;
  background:#19221d;
  border:1px solid #303c33;
  border-radius:8px;
  padding:9px 10px;
  gap:9px;
  width:226px}
.search-box svg {
  width:15px;
  height:15px;
  color:#98a798}
.search-box input {
  background:transparent;
  color:#e0e8db;
  border:0;
  outline:none;
  width:100%;
  min-width:0;
  font-size:.8125rem}
.search-box:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 2px #b3ed9b18}
.search-box input:focus-visible {
  outline:none}
.search-box input::placeholder {
  color:#8d9c8f}
.search-box kbd {
  font-family:inherit;
  font-size:.8125rem;
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  border:1px solid #3c483c;
  border-radius:4px;
  color:#8c9d8e}
.catalog-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px}
.filters {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap}
.filter {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.8125rem;
  font-weight:500;
  padding:8px 12px;
  background:none;
  color:#a5b3a5;
  border:1px solid #303d33;
  border-radius:7px;
  white-space:nowrap}
.filter svg {
  width:13px;
  height:13px}
.filter.active {
  background:#d9edc4;
  color:#30462b;
  border-color:#d9edc4}
.filter:hover:not(.active) {
  background:#26362b}
.sort-label {
  display:flex;
  align-items:center;
  gap:6px;
  color:#a4b2a4}
.sort-label svg {
  width:14px;
  height:14px}
.sort-label select {
  background:var(--bg);
  color:#b3bfb2;
  border:0;
  font-size:.8125rem;
  max-width:115px;
  cursor:pointer;
  padding:5px 1px}
.game-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px}
.game-card {
  position:relative;
  min-width:0;
  border:1px solid #344136;
  border-radius:13px;
  background:#1b251f;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  overflow:hidden}
.game-card:hover {
  transform:translateY(-5px);
  border-color:#6b8566;
  box-shadow:0 10px 25px #0003}
.game-open {
  display:block;
  width:100%;
  padding:0;
  background:none;
  text-align:left;
  border-radius:12px;
  overflow:hidden}
.game-open:focus-visible {
  outline-offset:-3px}
.cover {
  position:relative;
  overflow:hidden;
  aspect-ratio:1.34;
  background:#314338}
.cover img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s}
.game-card:hover .cover img {
  transform:scale(1.06)}
.cover:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#0a171320,transparent 50%,#0a171315);
  pointer-events:none}
.coming-soon {
  position:absolute;
  left:10px;
  top:10px;
  padding:5px 6px;
  background:#16251ccc;
  color:#eff4e9;
  border:1px solid #ffffff24;
  backdrop-filter:blur(10px);
  border-radius:5px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.7px;
  z-index:1}
.favorite-button {
  position:absolute;
  top:9px;
  right:9px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  background:#14231a88;
  color:#f1f2dc;
  border:1px solid #ffffff44;
  backdrop-filter:blur(10px);
  border-radius:50%;
  z-index:2}
.favorite-button svg {
  width:14px;
  height:14px}
.favorite-button[aria-pressed=true] {
  background:#f4e7c1;
  color:#715326;
  border-color:#f4e7c1}
.favorite-button[aria-pressed=true] svg {
  fill:currentColor}
.game-info {
  padding:15px 13px 13px}
.game-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px}
.game-info h3 {
  font-family:var(--display);
  font-size:1.125rem;
  font-weight:550;
  letter-spacing:-.25px;
  margin:0}
.card-arrow {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:23px;
  height:23px;
  border:1px solid #3e4e3d;
  color:#b5c5ac;
  flex-shrink:0}
.card-arrow svg {
  width:12px;
  height:12px}
.game-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-top:11px;
  font-size:.75rem;
  color:#9daf9b}
.game-type {
  display:flex;
  align-items:center;
  gap:4px}
.game-type svg {
  width:11px;
  height:11px}
.game-cost {
  color:#c5dda8;
  white-space:nowrap;
  font-size:.75rem}
.game-cost span {
  color:#9ba89a}
.empty-state {
  padding:42px 20px;
  text-align:center;
  border:1px dashed #475442;
  border-radius:13px}
.empty-state>span {
  display:flex;
  justify-content:center;
  color:#b1c79d}
.empty-state h3 {
  font-family:var(--display);
  font-size:1.375rem;
  font-weight:500}
.empty-state p {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.7}
.secondary-button {
  padding:10px 16px;
  border-radius:8px;
  background:#2a3a2d;
  color:#d4e6c4;
  border:1px solid #44563c;
  font-size:.875rem}
.bottom-note {
  margin-top:27px;
  border:1px solid #2e3a2f;
  border-radius:10px;
  padding:16px 19px;
  display:flex;
  align-items:center;
  gap:13px;
  background:#18221b}
.note-icon {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border-radius:9px;
  background:#2d3d2b;
  color:#bdcf9d;
  flex-shrink:0}
.note-icon svg {
  width:17px;
  height:17px}
.bottom-note strong {
  font-size:.8125rem;
  font-weight:600;
  color:#c6d2c1}
.bottom-note p {
  font-size:.75rem;
  line-height:1.6;
  color:#8ea18b;
  margin:4px 0 0}
.coming-tag {
  margin-left:auto;
  white-space:nowrap;
  font-size:.75rem;
  letter-spacing:1.2px;
  color:#b0bd99;
  border:1px solid #3f4b31;
  border-radius:4px;
  padding:6px 8px}
.main-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 0 23px;
  gap:15px;
  font-size:.75rem;
  color:#778a7a}
.main-footer p {
  margin:0;
  line-height:1.7}
.main-footer p>span {
  margin:0 8px}
.main-footer button {
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  color:#9caf99;
  padding:5px 0;
  font-size:.75rem;
  white-space:nowrap}
.main-footer svg {
  width:12px;
  height:12px}

dialog {
  position:fixed;
  padding:0;
  border:1px solid #4b5a48;
  border-radius:22px;
  max-width:480px;
  width:calc(100% - 32px);
  max-height:calc(100dvh - 48px);
  background:#1a251e;
  color:var(--text);
  overflow:auto;
  box-shadow:0 30px 100px #0007}
dialog::backdrop {
  background:#07100bcc;
  backdrop-filter:blur(8px)}
body:has(dialog[open]) {
  overflow:hidden}
.modal-close {
  position:absolute;
  right:13px;
  top:13px;
  background:#142119c9;
  border:1px solid #ffffff25;
  color:#e8eedf;
  z-index:2}
.modal-art {
  width:100%;
  height:220px;
  display:block;
  object-fit:cover}
.modal-body {
  padding:29px}
.modal-eyebrow {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--accent);
  font-size:.75rem;
  letter-spacing:1px;
  margin:0 0 10px}
.modal-eyebrow svg {
  width:13px;
  height:13px}
.modal-body h2 {
  font-family:var(--display);
  font-size:2rem;
  font-weight:550;
  letter-spacing:-.8px;
  margin:0 0 12px}
.modal-copy {
  color:#b0beac;
  font-size:.9375rem;
  line-height:1.9;
  margin:0 0 19px}
.modal-stats {
  display:flex;
  gap:10px;
  margin:21px 0}
.modal-stat {
  border:1px solid #374a36;
  border-radius:9px;
  background:#233222;
  padding:13px;
  flex:1}
.modal-stat small {
  display:block;
  font-size:.75rem;
  color:#9aac92;
  margin-bottom:7px}
.modal-stat strong {
  font-size:.9375rem;
  font-weight:600}
.availability-note {
  display:flex;
  gap:9px;
  align-items:flex-start;
  border-radius:9px;
  background:#343324;
  border:1px solid #524b31;
  color:#d8ca9b;
  padding:13px;
  font-size:.8125rem;
  line-height:1.7;
  margin:18px 0}
.availability-note svg {
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-top:1px}
.wide-button {
  width:100%;
  justify-content:center}
.modal-guide {
  padding-top:43px}
.guide-steps {
  display:grid;
  gap:17px;
  margin:25px 0}
.guide-step {
  display:flex;
  gap:13px;
  align-items:flex-start}
.step-number {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:9px;
  background:#35472f;
  color:#d0e6b8;
  flex-shrink:0;
  font-size:.875rem}
.guide-step strong {
  display:block;
  font-size:.9375rem;
  font-weight:600;
  margin:3px 0 5px}
.guide-step p {
  font-size:.875rem;
  line-height:1.8;
  color:#a5b69d;
  margin:0}
.favorite-list {
  display:grid;
  gap:9px}
.favorite-row {
  display:flex;
  align-items:center;
  gap:12px;
  background:#233025;
  padding:9px;
  border:1px solid #394a34;
  border-radius:10px}
.favorite-row img {
  width:60px;
  height:50px;
  object-fit:cover;
  border-radius:7px}
.favorite-row>button:first-of-type {
  background:none;
  text-align:left;
  padding:0;
  flex:1}
.favorite-row strong {
  display:block;
  font-size:.9375rem;
  font-weight:500}
.favorite-row small {
  display:block;
  font-size:.75rem;
  margin-top:5px;
  color:#a2b39b}
.favorite-row>button:last-child {
  padding:9px;
  background:none;
  color:#cfdbbf}
.favorite-row svg {
  width:17px;
  height:17px}
.empty-favorites {
  text-align:center;
  padding:17px 0}
.empty-favorites>span {
  display:flex;
  justify-content:center;
  margin:12px;
  color:#c9dcad}
.empty-favorites>span svg {
  width:34px;
  height:34px}
.empty-favorites p {
  font-size:.9375rem;
  line-height:1.8;
  color:#acbba3}
.toast {
  position:fixed;
  left:calc(50% + 110px);
  bottom:25px;
  z-index:50;
  transform:translate(-50%,15px);
  opacity:0;
  pointer-events:none;
  background:#dbedc8;
  color:#2b4228;
  box-shadow:0 8px 30px #0005;
  border:1px solid #eff8e7;
  border-radius:10px;
  padding:12px 18px;
  font-size:.875rem;
  max-width:calc(100% - 30px);
  width:max-content;
  transition:opacity .2s,transform .2s}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)}

html[data-theme=gambling] {
  --accent:#d5b6f2;
  --accent-dark:#382c49;
  --accent-text:#e6cff6;
  --hero:#45325a}
.nav-item[data-zone=gambling].active {
  background:#382c49;
  color:#e1c5f4}
.nav-item[data-zone=farming].active {
  background:#243d29;
  color:#c8f3b7}
[data-theme=gambling] .hero {
  background:#45325a;
  border-color:#80649a55}
[data-theme=gambling] .hero-shade {
  background:linear-gradient(90deg,#45325a 0%,#45325a 29%,#45325aeb 40%,#45325a38 63%,#45325a00 100%)}
[data-theme=gambling] .hero h2 em {
  color:#ebc9ff}
[data-theme=gambling] .hero-content>p {
  color:#d9c9e5}
[data-theme=gambling] .hero-label,[data-theme=gambling] .hero-footnote {
  color:#eddbf8}
[data-theme=gambling] .hero .primary-button {
  background:#e8ccff;
  color:#4c3261}
[data-theme=gambling] .hero-sticker {
  background:#5f447366}
[data-theme=gambling] .filter.active {
  background:#dfc7f0;
  color:#4b345c;
  border-color:#dfc7f0}
[data-theme=gambling] .game-cost {
  color:#e0c2ef}

/* Readable type scales with the viewport without shrinking on small screens. */
:root {
  font-size:clamp(1rem, .875rem + .2vw, 1.125rem);
  --sidebar-width:15rem;
  --page-gutter:clamp(1.25rem, 3vw, 3rem);
}
html {scrollbar-gutter:stable}
body {line-height:1.5}
button, input, select {line-height:1.4}
button svg, .status-dot, .nav-dot, .coin-icon {flex-shrink:0}
.sidebar {
  width:var(--sidebar-width);
  height:100vh;
  height:100dvh;
  padding:1.5rem 1rem 1rem;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#456046 transparent;
  overscroll-behavior:contain;
}
.brand {flex-shrink:0; padding:0 .5rem; gap:.6rem; line-height:1}
.brand small {font-size:.6875rem; letter-spacing:.28rem; margin-top:.4rem}
.brand-symbol, .brand-symbol svg {width:2.4rem; height:2.4rem}
.sidebar-content {
  margin-top:clamp(1rem, 4vh, 2.5rem);
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#456046 transparent;
}
.nav-caption {font-size:.75rem; letter-spacing:.075rem; margin:0 .75rem .75rem; color:#a0b1a5}
.nav-item {gap:.65rem; padding:.75rem; min-height:3.75rem; font-size:1rem}
.nav-item>span:nth-child(2) {min-width:0}
.nav-item small {font-size:.75rem; white-space:normal; line-height:1.4; margin-top:.15rem; opacity:.85}
.nav-item>span:first-child, .nav-item>span:last-child {flex-shrink:0}
.nav-divider {margin:1rem .75rem .5rem}
.utility-nav {min-height:2.75rem; font-size:.875rem}
.count-badge {font-size:.75rem}
.sidebar-bottom {flex-shrink:0; padding-top:1.25rem}
.club-note {padding:1rem; border-radius:.875rem}
.club-note strong {font-size:1.25rem}
.club-note p {font-size:.8125rem; line-height:1.6; color:#b3c4af; margin-top:.5rem}
.sidebar-footer {font-size:.75rem; white-space:normal; line-height:1.5; margin:.75rem .15rem 0; color:#a0b29f}
.workspace {margin-left:var(--sidebar-width); min-width:0}
.topbar {min-height:5.25rem; height:auto; padding:1rem var(--page-gutter)}
.breadcrumb {font-size:.875rem}
.topbar-actions {gap:1rem}
.icon-button, .avatar {width:2.75rem; height:2.75rem; flex-shrink:0}
.wallet {position:relative; isolation:isolate; overflow:hidden; min-height:3rem; gap:.65rem; transition:border-color .25s, box-shadow .25s, background .25s}
.wallet small {font-size:.75rem; letter-spacing:.06rem}
.wallet strong {font-size:1.25rem}
.wallet-info {margin-left:.5rem}
.wallet::before {
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, transparent 30%, #e7be5e24 42%, #fff2bf85 50%, #e7be5e24 58%, transparent 70%);
  transform:translate(-110%, -110%);
  opacity:0;
}
.wallet:focus-visible {border-color:#dfbe70; box-shadow:0 0 1.25rem #e8ba432b}
.wallet:focus-visible::before {animation:wallet-shine .85s cubic-bezier(.2,.65,.35,1) both}
@media(hover:hover) and (pointer:fine) {
  .wallet:hover {border-color:#dfbe70; box-shadow:0 0 1.25rem #e8ba432b}
  .wallet:hover::before {animation:wallet-shine .85s cubic-bezier(.2,.65,.35,1) both}
}
@keyframes wallet-shine {
  0% {transform:translate(-110%, -110%); opacity:0}
  20% {opacity:1}
  80% {opacity:1}
  100% {transform:translate(110%, 110%); opacity:0}
}
main {max-width:100rem; padding:2rem var(--page-gutter) 0}
.page-intro {align-items:flex-start; flex-wrap:wrap}
.eyebrow, .hero-label, .small-label, .lobby-badge {font-size:.75rem}
.eyebrow {letter-spacing:.1rem}
h1 {font-size:clamp(1.75rem, 1.25rem + 1vw, 2.5rem)}
.page-intro p:last-child {font-size:1rem; line-height:1.6}
.hero-layout {grid-template-columns:minmax(0,2.5fr) minmax(16rem,1fr)}
.hero {min-height:23rem}
.hero-content {padding:2rem; max-width:78%}
.hero h2 {font-size:clamp(2rem, 1.4rem + 1.3vw, 3rem); line-height:1.12}
.hero-content>p {font-size:.9375rem; line-height:1.7; max-width:20rem; margin-bottom:1.5rem}
.primary-button, .secondary-button {font-size:.9375rem; min-height:2.75rem}
.hero-footnote {font-size:.75rem; line-height:1.6; align-items:flex-start}
.hero-footnote>span:first-child {flex-shrink:0; margin-top:.2rem}
.hero-sticker {width:4.5rem; height:4.5rem}
.hero-sticker strong {font-size:.625rem}
.switch-card {padding:1.5rem; min-width:0}
.switch-card h2 {font-size:1.5rem; line-height:1.25}
.switch-card p {font-size:.9375rem; line-height:1.7; margin-bottom:1.25rem}
.switch-art {flex-shrink:0; margin-block:.5rem}
.text-button {font-size:.9375rem; min-height:2.75rem}
.catalog-heading {flex-wrap:wrap}
.catalog h2 {font-size:1.5rem}
.catalog-heading p {font-size:.9375rem}
.search-box {width:16rem; min-height:2.75rem}
.search-box input {font-size:1rem}
.catalog-toolbar {align-items:flex-start; flex-wrap:wrap}
.filter {font-size:.875rem; min-height:2.75rem; padding:.625rem .75rem}
.sort-label {min-height:2.75rem}
.sort-label select {font-size:.875rem; max-width:none; min-height:2.75rem}
.game-grid {grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
.game-info {padding:1rem .875rem}
.game-heading {align-items:flex-start}
.game-info h3 {font-size:1.125rem; line-height:1.35; overflow-wrap:anywhere}
.game-meta {font-size:.8125rem; flex-wrap:wrap; gap:.5rem}
.game-cost {font-size:inherit}
.coming-soon {font-size:.75rem; top:auto; bottom:.625rem; left:.625rem; letter-spacing:.025rem}
.favorite-button {width:2.75rem; height:2.75rem; top:.5rem; right:.5rem}
.favorite-button svg {width:1.125rem; height:1.125rem}
.bottom-note strong {font-size:.9375rem}
.bottom-note p {font-size:.875rem; color:#a8baa3}
.coming-tag {font-size:.75rem}
.main-footer, .main-footer button {font-size:.75rem; color:#a0b29f}
.main-footer {flex-wrap:wrap}
.mobile-tools {display:none}
.toast {left:calc(50% + var(--sidebar-width)/2); font-size:.875rem}
dialog {
  width:calc(100% - 2rem);
  max-width:34rem;
  max-height:calc(100dvh - 2rem);
  overflow:hidden;
  overscroll-behavior:contain;
}
#modal-content {
  max-height:calc(100dvh - 2rem - 2px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#456046 transparent;
}
dialog[open] {animation:modal-in .26s cubic-bezier(.2,.8,.2,1) both}
dialog[open]::backdrop {animation:backdrop-in .26s ease-out both}
dialog.is-closing {animation:modal-out .18s ease-in both; pointer-events:none}
dialog.is-closing::backdrop {animation:backdrop-out .18s ease-in both}
.modal-close {width:2.75rem; height:2.75rem}
.modal-body {padding:1.75rem}
.modal-guide {padding-top:3.75rem}
.modal-eyebrow {font-size:.75rem; padding-right:1.5rem; line-height:1.6; flex-wrap:wrap}
.modal-body h2 {font-size:clamp(1.75rem, 1.4rem + .8vw, 2.125rem); line-height:1.2}
.modal-copy {font-size:1rem; line-height:1.75}
.modal-stats {flex-wrap:wrap}
.modal-stat {min-width:9rem}
.modal-stat small {font-size:.8125rem}
.modal-stat strong {font-size:.9375rem}
.availability-note, .guide-step p, .empty-favorites p {font-size:.9375rem; line-height:1.7}
.guide-step strong, .favorite-row strong {font-size:1rem}
.step-number {font-size:.8125rem}
.favorite-row {gap:.625rem}
.favorite-row>button:first-of-type {min-width:0; overflow-wrap:anywhere}
.favorite-row small {font-size:.8125rem}
.favorite-row>button:last-child {min-width:2.75rem; min-height:2.75rem}
@keyframes modal-in {
  from {opacity:0; transform:translateY(1rem) scale(.97)}
  to {opacity:1; transform:translateY(0) scale(1)}
}
@keyframes modal-out {
  from {opacity:1; transform:translateY(0) scale(1)}
  to {opacity:0; transform:translateY(.625rem) scale(.98)}
}
@keyframes backdrop-in {from {opacity:0} to {opacity:1}}
@keyframes backdrop-out {from {opacity:1} to {opacity:0}}

/* Keep the bottom card in view; the menu can scroll on short windows. */
@media(min-width:761px) and (max-height:800px) {
  .sidebar {padding-top:1rem}
  .sidebar-content {margin-top:1rem}
  .nav-caption {margin-bottom:.5rem}
  .nav-item {padding:.625rem .75rem; min-height:3.25rem}
  .utility-nav {min-height:2.75rem}
  .nav-divider {margin:.75rem .75rem .375rem}
  .sidebar-bottom {padding-top:.875rem}
  .club-note {padding:.875rem}
  .club-note .sparkle {display:none}
  .sidebar-footer {margin-top:.625rem}
}
@media(min-width:761px) and (max-height:520px) {
  .sidebar-content {flex-shrink:0; overflow:visible}
}
@media(min-width:1600px) {
  .hero {min-height:25rem}
  .hero-content {padding:2.5rem}
  .cover {aspect-ratio:1.5}
}
@media(max-width:1250px) {
  :root {--sidebar-width:14rem}
  .hero-layout {grid-template-columns:minmax(0,1fr)}
  .switch-card {display:none}
  .hero-content {max-width:75%}
  .game-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover {aspect-ratio:1.6}
}
@media(max-width:900px) {
  .page-intro {gap:.75rem}
  .lobby-badge {display:none}
  .catalog-heading {align-items:flex-start}
  .search-box {width:100%}
  .main-footer {flex-direction:column; align-items:flex-start}
}
@media(max-width:760px), (max-width:1024px) and (max-height:520px) {
  :root {--page-gutter:clamp(1rem, 4vw, 1.5rem)}
  .sidebar {position:relative; inset:auto; width:auto; height:auto; display:block; padding:1.25rem var(--page-gutter) 0; border-right:0; background:var(--bg); overflow:visible}
  .brand {padding:0; font-size:1.75rem}
  .sidebar-content {margin-top:1.25rem; overflow:visible}
  .nav-caption, .nav-divider, .utility-nav, .sidebar-bottom {display:none}
  .zone-nav {display:flex; gap:.375rem; background:#1b251f; padding:.3125rem; border:1px solid #2e3a30; border-radius:.875rem}
  .nav-item {width:50%; min-height:3rem; justify-content:center; padding:.625rem; gap:.5rem}
  .nav-item>span:nth-child(2) {flex:initial}
  .nav-item small, .nav-dot {display:none}
  .workspace {margin-left:0}
  .topbar {min-height:4.5rem; padding:.75rem var(--page-gutter); gap:.5rem}
  .breadcrumb {gap:.5rem; font-size:.8125rem}
  .breadcrumb>span:first-child, .help-button {display:none}
  .topbar-actions {gap:.625rem}
  .wallet {padding:.375rem .625rem; gap:.5rem}
  .wallet-info {display:none}
  .coin-icon {width:1.75rem; height:1.75rem; font-size:1rem}
  .wallet strong {font-size:1.125rem}
  .avatar {width:2.5rem; height:2.5rem}
  main {padding-top:1.5rem}
  .page-intro {margin-bottom:1.5rem}
  .hero {min-height:22rem; border-radius:1rem}
  .hero-content {padding:1.5rem; max-width:90%}
  .hero h2 {font-size:clamp(2rem, 1.5rem + 1.5vw, 2.5rem); margin-block:1.25rem 1rem}
  .hero-content>p {font-size:.9375rem}
  .hero-image {width:75%; object-position:center; opacity:.8}
  .hero-shade {background:linear-gradient(90deg,#294c37 0%,#294c37ef 30%,#294c3799 65%,#294c3720 100%)}
  [data-theme=gambling] .hero-shade {background:linear-gradient(90deg,#45325a 0%,#45325aef 30%,#45325a99 65%,#45325a20 100%)}
  .hero-sticker {width:3.5rem; height:3.5rem; right:.75rem; top:.875rem}
  .hero-sticker strong {font-size:.5625rem}
  .hero-footnote {white-space:normal}
  .catalog {padding-top:1.75rem}
  .catalog-heading {gap:1rem}
  .search-box {width:100%}
  .search-box kbd {display:none}
  .catalog-toolbar {gap:.5rem; margin-bottom:1rem}
  .filters {gap:.375rem}
  .filter {padding:.5rem .625rem; gap:.375rem}
  .game-grid {gap:.875rem}
  .cover {aspect-ratio:1.25}
  .game-info {padding:.875rem .75rem}
  .game-info h3 {font-size:1.125rem}
  .game-meta {gap:.375rem}
  .bottom-note {padding:1rem; gap:.75rem}
  .coming-tag {display:none}
  .mobile-tools {display:flex; flex-wrap:wrap; gap:.75rem; padding-top:1.25rem}
  .mobile-tools button {display:flex; align-items:center; gap:.5rem; min-height:2.75rem; padding:.625rem .875rem; background:#233026; border:1px solid #354834; border-radius:.5rem; font-size:.875rem; color:#c4d3bb}
  .mobile-tools svg {width:1rem; height:1rem}
  .main-footer {padding-block:1.25rem}
  .toast {left:50%}
  .modal-art {height:12rem}
}
@media(max-width:460px) {
  .avatar {display:none}
  .hero-content {max-width:100%; padding:1.5rem 1.25rem}
  .hero-label {padding-right:3rem; letter-spacing:.05rem}
  .game-grid {gap:.75rem}
  .game-info {padding:.75rem .625rem}
  .game-heading {gap:.25rem}
  .game-info h3 {font-size:1rem}
  .card-arrow {display:none}
  .coming-soon {left:.375rem; bottom:.375rem; padding:.25rem .375rem; font-size:.6875rem; letter-spacing:0}
  .cover {aspect-ratio:1.1}
  .modal-body {padding:1.25rem}
  .modal-guide {padding-top:3.75rem}
  .modal-art {height:10rem}
  .modal-stat {padding:.75rem; min-width:0; flex-basis:100%}
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {animation:none!important; transition:none!important; scroll-behavior:auto!important}
}