.arcade-catalog{
  --arcade-ink:#101828;
  --arcade-muted:#475467;
  --arcade-subtle:#667085;
  --arcade-border:#d0d5dd;
  --arcade-border-soft:#e4e7ec;
  --arcade-surface:#ffffff;
  --arcade-surface-soft:#f8fafc;
  --arcade-accent:#163d77;
  --arcade-accent-strong:#0d2b58;
  --arcade-accent-soft:#eaf1fb;
  --arcade-success:#17633a;
  --arcade-success-soft:#edf8f1;
  --arcade-warning:#6f4800;
  --arcade-warning-soft:#fff7e4;
  color:var(--arcade-ink);
  background:#fff;
}
.arcade-catalog-shell{width:min(1180px,calc(100% - 2rem));margin-inline:auto}
.arcade-catalog-hero{border-bottom:1px solid var(--arcade-border-soft);background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}
.arcade-catalog-hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr);gap:2rem;align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
.arcade-catalog-hero-copy{max-width:760px}
.arcade-catalog-kicker,.arcade-section-kicker,.arcade-access-eyebrow{margin:0 0 .5rem;font-size:.76rem;line-height:1.25;font-weight:800;letter-spacing:.075em;text-transform:uppercase;color:#365f9b}
.arcade-catalog-hero h1{margin:0;font-size:clamp(2.25rem,5vw,4.6rem);line-height:.98;letter-spacing:-.05em;font-weight:790;color:var(--arcade-ink)}
.arcade-catalog-hero-copy>p:last-of-type{max-width:690px;margin:1rem 0 0;color:var(--arcade-muted);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.65}
.arcade-catalog-hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.arcade-catalog-hero-actions .btn{min-height:44px;display:inline-flex;align-items:center;padding-inline:1.1rem}

.arcade-access-card{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:1.35rem;border:1px solid var(--arcade-border);border-radius:18px;background:var(--arcade-surface);box-shadow:0 12px 30px rgba(16,24,40,.06)}
.arcade-access-card--ready{border-color:#b8d9c5;background:var(--arcade-success-soft)}
.arcade-access-card--blocked{border-color:#e0ba66;background:var(--arcade-warning-soft)}
.arcade-access-card h2{margin:0;font-size:1.12rem;line-height:1.3;font-weight:800;color:var(--arcade-ink)}
.arcade-access-card p:not(.arcade-access-eyebrow){margin:.45rem 0 0;color:var(--arcade-muted);font-size:.88rem;line-height:1.55}
.arcade-access-card .btn{align-self:flex-start;margin-top:1rem}
.arcade-access-link{display:inline-flex;align-self:flex-start;margin-top:.8rem;font-size:.82rem;font-weight:750;color:var(--arcade-accent)}

.arcade-catalog-body{display:grid;gap:2.25rem;padding-block:2rem 4rem}
.arcade-section-heading{margin-bottom:1rem;max-width:780px}
.arcade-section-heading--split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.arcade-section-heading h2{margin:0;font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.15;letter-spacing:-.025em;font-weight:780;color:var(--arcade-ink)}
.arcade-section-heading p:not(.arcade-section-kicker){margin:.45rem 0 0;color:var(--arcade-muted);line-height:1.55}
.arcade-section-heading>a{font-size:.86rem;font-weight:750;text-decoration:none;white-space:nowrap}
.arcade-section-heading>a:hover{text-decoration:underline}

.arcade-continue{padding:1.35rem;border:1px solid var(--arcade-border-soft);border-radius:18px;background:var(--arcade-surface-soft)}
.arcade-continue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.arcade-continue-card{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;padding:1rem;border:1px solid var(--arcade-border-soft);border-radius:14px;background:#fff}
.arcade-continue-copy{min-width:0}
.arcade-category-label{display:block;margin-bottom:.3rem;color:#365f9b;font-size:12px;font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.arcade-continue-card h3{margin:0;color:var(--arcade-ink);font-size:1rem;font-weight:800;line-height:1.3}
.arcade-continue-card p{margin:.35rem 0 0;color:var(--arcade-subtle);font-size:.78rem;line-height:1.45}
.arcade-continue-card progress{width:100%;height:7px;margin-top:.65rem;border:0;border-radius:999px;overflow:hidden;background:#e4e7ec;accent-color:#285ea8}
.arcade-continue-card progress::-webkit-progress-bar{background:#e4e7ec;border-radius:999px}
.arcade-continue-card progress::-webkit-progress-value{background:#285ea8;border-radius:999px}
.arcade-continue-card progress::-moz-progress-bar{background:#285ea8;border-radius:999px}
.arcade-progress-facts{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.55rem}
.arcade-progress-facts span{font-size:12px;color:var(--arcade-muted)}
.arcade-progress-facts strong{color:var(--arcade-ink)}
.arcade-last-played{font-size:12px!important;color:var(--arcade-subtle)!important}
.arcade-continue-card .btn{min-height:40px;display:inline-flex;align-items:center}

.arcade-discovery{min-width:0}
.arcade-filter-bar{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(210px,.75fr) auto;gap:.85rem;align-items:end;padding:1rem;border:1px solid var(--arcade-border);border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.04)}
.arcade-filter-field{display:grid;gap:.35rem;min-width:0}
.arcade-filter-field label{font-size:.75rem;font-weight:800;color:#344054}
.arcade-filter-field input,.arcade-filter-field select,.arcade-page-size select{width:100%;min-height:43px;border:1px solid #98a2b3;border-radius:9px;background:#fff;color:var(--arcade-ink);padding:.55rem .7rem;font:inherit;font-size:.86rem}
.arcade-filter-field input:focus,.arcade-filter-field select:focus,.arcade-page-size select:focus{outline:3px solid rgba(40,94,168,.18);outline-offset:1px;border-color:#285ea8}
.arcade-filter-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.arcade-filter-actions .btn{min-height:43px;display:inline-flex;align-items:center}

.arcade-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0}
.arcade-results-toolbar>p{margin:0;color:var(--arcade-muted);font-size:.82rem}
.arcade-page-size{display:flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;color:var(--arcade-muted)}
.arcade-page-size select{width:auto;min-height:36px;padding:.3rem 1.8rem .3rem .55rem}

.arcade-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.arcade-game-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--arcade-border-soft);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(16,24,40,.04);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.arcade-game-card:hover{transform:translateY(-2px);border-color:#c3cfdf;box-shadow:0 10px 24px rgba(16,24,40,.08)}
.arcade-game-visual{position:relative;min-height:126px;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1rem;text-decoration:none;background:linear-gradient(145deg,#102a56 0%,#1b4f8f 55%,#5f86b9 100%);overflow:hidden}
.arcade-game-visual::after{content:"";position:absolute;right:-34px;top:-48px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.arcade-game-mark{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.65);border-radius:13px;background:rgba(255,255,255,.12);color:#fff;font-size:.78rem;font-weight:900;letter-spacing:.04em}
.arcade-game-category{position:relative;z-index:1;max-width:65%;padding:.36rem .55rem;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(9,26,56,.46);color:#fff;font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arcade-game-content{display:flex;flex:1;flex-direction:column;padding:1rem}
.arcade-game-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.65rem}
.arcade-game-title-row h3{min-width:0;margin:0;font-size:1rem;line-height:1.3;font-weight:800;color:var(--arcade-ink)}
.arcade-game-title-row h3 a{color:inherit;text-decoration:none}
.arcade-game-title-row h3 a:hover{text-decoration:underline}
.arcade-featured-badge{flex:0 0 auto;padding:.28rem .45rem;border-radius:999px;background:#eef4ff;color:#244f87;font-size:12px;font-weight:850}
.arcade-game-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.75rem;margin:.55rem 0 0;color:var(--arcade-muted);font-size:.8rem;line-height:1.55}
.arcade-game-evidence{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--arcade-border-soft)}
.arcade-game-evidence span{padding:.28rem .42rem;border-radius:7px;background:var(--arcade-surface-soft);color:#475467;font-size:12px;font-weight:700}
.arcade-game-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:auto;padding-top:1rem}
.arcade-game-actions .btn{min-height:39px;display:inline-flex;align-items:center}
.arcade-inline-link{font-size:.75rem;font-weight:750;color:var(--arcade-accent)}

.arcade-empty-state{padding:2.4rem 1.2rem;border:1px dashed #98a2b3;border-radius:14px;background:var(--arcade-surface-soft);text-align:center}
.arcade-empty-state h3{margin:0;color:var(--arcade-ink);font-size:1.1rem;font-weight:800}
.arcade-empty-state p{max-width:560px;margin:.55rem auto 1rem;color:var(--arcade-muted);line-height:1.55}
.arcade-pagination{display:flex;align-items:center;justify-content:center;gap:.85rem;margin-top:1.4rem}
.arcade-pagination span{font-size:.8rem;font-weight:700;color:var(--arcade-muted)}
.arcade-pagination .disabled{pointer-events:none;opacity:.5}

@media (max-width:980px){
  .arcade-catalog-hero-grid{grid-template-columns:1fr;gap:1.2rem}
  .arcade-access-card{max-width:620px}
  .arcade-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arcade-filter-bar{grid-template-columns:1fr 1fr}
  .arcade-filter-actions{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:720px){
  .arcade-catalog-shell{width:min(100% - 1.2rem,1180px)}
  .arcade-catalog-hero-grid{padding-block:2.2rem}
  .arcade-catalog-hero h1{font-size:clamp(2rem,12vw,3.2rem)}
  .arcade-section-heading--split{align-items:flex-start;flex-direction:column}
  .arcade-continue{padding:.9rem}
  .arcade-continue-grid,.arcade-game-grid,.arcade-filter-bar{grid-template-columns:1fr}
  .arcade-continue-card{grid-template-columns:1fr;align-items:start}
  .arcade-continue-card .btn{justify-self:start}
  .arcade-filter-actions{grid-column:auto}
  .arcade-results-toolbar{align-items:flex-start;flex-direction:column}
  .arcade-pagination{justify-content:space-between;gap:.45rem}
}
@media (prefers-reduced-motion:reduce){.arcade-game-card{transition:none}.arcade-game-card:hover{transform:none}}