/* GenArcade / Underground Arcade. Public artwork and restrained creator tools. */
@font-face { font-family:'Anton Arcade'; src:url('/assets/fonts/Anton-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
:root { --bg:#09090c; --surface:#111115; --raised:#19181f; --line:#29262f; --blue:#9959f5; --muted:#a29da9; --green:#83d6a0; }
body { background:#09090c; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #c49aff; outline-offset:4px; }
[hidden] { display:none!important; }
.topbar { background:rgba(9,9,12,.97); border-bottom:1px solid #2a2631; backdrop-filter:blur(14px); box-shadow:none; }
.brand img { filter:hue-rotate(31deg); border-radius:3px; }
.brand > span > span,.brand em { color:#a16aee; }
.nav-link.active { color:#f4edf9; }
.desktop-nav .nav-link.active { position:relative; background:transparent; }
.desktop-nav .nav-link.active::after { content:''; position:absolute; height:2px; background:#a367ff; bottom:-24px; left:0; right:0; }
.header-search { background:#101014; border-radius:4px; }
.btn { border-radius:4px; box-shadow:none; }
.btn.primary { background:#8749dd; color:#fff; box-shadow:none; }
.btn.primary:hover { background:#9c63ec; }
.btn.ghost { background:transparent; }
.input,.select,textarea,select { border-radius:4px; }
.surface,.post-card,.prompt-panel,.usage-card,.plan-card,.search-discovery,.empty,.community-sidebar,.graveyard { border-radius:6px; box-shadow:none; }
.page { min-width:0; width:100%; }
.page-intro h1,.detail-heading h1,.profile-info h1 { letter-spacing:-.045em; }
.section-heading h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.65rem,2.4vw,2.5rem); font-weight:400; letter-spacing:-.04em; }
.section-heading h2 > span { color:#a66ef1; font:500 .65rem/1 ui-monospace,Consolas,monospace; margin-right:15px; letter-spacing:.1em; }
.section-heading p { color:#9993a3; }
.eyebrow { letter-spacing:.13em; }
.arcade-hero { position:relative; min-height:470px; display:flex; align-items:center; margin:-20px 0 0; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 83% 42%,#402054 0,#1a1026 30%,transparent 63%),linear-gradient(115deg,#09080e 18%,#160e20 67%,#09080e); border-bottom:1px solid #3e314e; }
.arcade-hero::before { content:''; position:absolute; z-index:-2; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(182,112,250,.07) 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(182,112,250,.06) 80px); mask-image:linear-gradient(90deg,transparent,#000 42%); }
.arcade-hero::after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,#09080f 0%,rgba(9,8,15,.78) 33%,transparent 80%); }
.arcade-hero-mark { position:absolute; z-index:-1; right:4%; top:50%; transform:translateY(-50%) rotate(-8deg); display:flex; align-items:flex-end; pointer-events:none; font:400 clamp(10rem,25vw,25rem)/1 'Anton Arcade',Impact,sans-serif; color:transparent; -webkit-text-stroke:1px rgba(205,158,247,.23); letter-spacing:-.08em; }
.arcade-hero-mark i { font:400 clamp(1.2rem,3vw,3rem)/1 ui-monospace,Consolas,monospace; font-style:normal; color:#ba8bec; letter-spacing:-.25em; margin:0 0 13%; }
.arcade-hero-content { padding:44px clamp(20px,3vw,46px) 48px; width:76%; }
.arcade-kicker { color:#baa0d4; font:500 .62rem/1.7 ui-monospace,Consolas,monospace; letter-spacing:.25em; margin:0 0 21px; }
.arcade-hero h1 { font-family:'Anton Arcade',Impact,'Arial Narrow',sans-serif; font-weight:400; font-size:clamp(4.8rem,8vw,8.8rem); letter-spacing:-.025em; line-height:1.01; margin:0; color:#f3f0f4; }
.arcade-hero h1 em { font-style:normal; color:#a26cf5; }
.arcade-manifesto { color:#c5bdce; font-size:.72rem; letter-spacing:.06em; margin:24px 0 17px; }
.arcade-upload-link { display:inline-flex; gap:14px; align-items:center; color:#ebcb80; font-size:.76rem; font-weight:700; }
.arcade-upload-link .icon { width:18px; }
.arcade-index-strip { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 0; border-bottom:1px solid #29232f; font:500 .6rem/1.5 ui-monospace,Consolas,monospace; letter-spacing:.16em; color:#a49cab; }
.arcade-index-strip > span:first-child { display:flex; align-items:center; gap:10px; color:#d8b36c; }
.arcade-index-strip .icon { width:15px; height:15px; }
.discovery-controls { margin-top:35px; }
.discovery-heading .eyebrow { font-size:.58rem; color:#9e77c9; }
.discovery-heading h2 { font:400 clamp(1.9rem,3vw,2.7rem)/1.2 Georgia,serif; letter-spacing:-.04em; margin:8px 0 23px; }
.discovery-heading h2 span { color:#ac6bf9; }
.classification-filter { display:flex; gap:0; background:transparent; border:0; border-bottom:1px solid #342a40; border-radius:0; padding:0; margin:0; }
.classification-filter button { flex:1; text-align:left; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; box-shadow:none; padding:13px 14px; color:#aaa0b7; }
.classification-filter button.active { background:rgba(127,72,193,.09); border-color:#a16aee; box-shadow:none; color:#eee5fc; }
.classification-filter button small { color:#8f859b; font-size:.66rem; }
.classification-filter button > span { font-size:.83rem; }
.device-toolbar { margin:15px 0; }
.device-filter { background:none; border:0; padding:0; gap:5px; }
.device-filter-button { border-radius:3px; font-size:.68rem; }
.device-filter-button.active { background:#252031; color:#e0c6ff; border-color:#65507b; box-shadow:none; }
.filterbar { border-block:1px solid #29232f; padding:14px 0; gap:12px; }
.filter-chip { border-radius:3px; background:none; border-color:transparent; }
.filter-chip.active { background:#23172f; border-color:#70428c; color:#dcc0fa; }
.select-wrap select { background:#111015; border-color:#352c3e; }
.games-grid { gap:25px; }
.game-card { border:0; border-radius:0; background:transparent; box-shadow:none; padding:0 0 17px; border-bottom:1px solid #34283f; }
.game-card:hover { transform:translateY(-3px); box-shadow:none; border-color:#9563bd; }
.game-card .card-image { display:block; width:100%; height:auto; border-radius:2px; aspect-ratio:4/3; border:1px solid #2c2435; overflow:hidden; }
.game-card .card-image .cover-art { height:100%; }
.game-card .card-details { padding:14px 0 5px; }
.game-card .card-details h3 { font-size:1.12rem; letter-spacing:-.035em; }
.game-card .card-details p { font-size:.69rem; color:#a599b2; }
.game-card .tags { padding:0; gap:7px; margin:7px 0; }
.tag { border-radius:2px; font-size:.58rem; border-color:#40314e; background:#1b1323; color:#c8aedf; }
.game-card .game-tags button { background:none; border:none; padding:0; color:#a18cb9; font-size:.61rem; }
.project-card-meta { padding-inline:0; font-size:.6rem; color:#9e90af; }
.rating-pill,.card-device { border-radius:3px; }
.arcade-discovery .lower-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px; padding:32px 0; border:0; border-block:1px solid #493256; border-radius:0; background:none; box-shadow:none; margin:50px 0 15px; }
.lower-banner h3 { font:400 clamp(1.7rem,3vw,2.8rem)/1.12 Georgia,serif; letter-spacing:-.035em; margin:10px 0; }
.lower-banner p { max-width:520px; }
.lower-banner .banner-icon { border-radius:0; background:none; border:0; color:#b388e7; }
.lower-banner .eyebrow { color:#a16dc8; font-size:.56rem; }
.footer { border-top:0; color:#94879f; }
.bottom-nav { background:rgba(11,9,16,.98); border-color:#3c294a; }
.bottom-nav .nav-link.active { color:#c59aef; }
.site-layout { max-width:1800px; margin:auto; }
.site-layout.console-visible { display:grid; grid-template-columns:minmax(0,1fr) 335px; align-items:start; }
.console-visible .page { padding:30px; }
.console-visible .games-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.console-visible .arcade-hero h1 { font-size:clamp(4rem,6vw,7.5rem); }
.console-visible .arcade-hero-content { width:90%; }
.creator-console { min-width:0; position:sticky; top:88px; max-height:calc(100dvh - 88px); overflow:auto; padding:28px 22px; border-left:1px solid #392944; background:#100d16; scrollbar-width:thin; }
.console-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:20px; }
.console-heading .eyebrow { font-size:.55rem; color:#b883ef; }
.console-heading h2 { font-size:1.32rem; letter-spacing:-.035em; margin:6px 0 0; }
.console-heading .icon-button { flex:0 0 30px; width:30px; height:30px; }
.console-heading-actions { display:flex; gap:7px; align-items:center; }
.console-expand { display:none; align-items:center; gap:4px; padding:6px; border:0; background:none; color:#d5b0ec; font-size:.68rem; }
.console-expand .icon { width:15px; }
.console-preference { display:flex; align-items:center; gap:12px; padding:15px 0; border-block:1px solid #33273e; cursor:pointer; }
.console-preference > span { flex:1; min-width:0; }
.console-preference strong { display:block; font-size:.75rem; }
.console-preference small { display:block; font-size:.63rem; color:#a597b1; line-height:1.5; margin-top:5px; }
.console-preference input { appearance:none; flex:0 0 36px; width:36px; height:21px; border:1px solid #685573; border-radius:20px; background:#29212f; position:relative; cursor:pointer; }
.console-preference input::after { content:''; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#a698b3; transition:transform .15s; }
.console-preference input:checked { background:#8250b9; border-color:#b28bd9; }
.console-preference input:checked::after { transform:translateX(15px); background:white; }
.console-upload { width:100%; margin-top:22px; }
.console-section { margin-top:24px; padding-bottom:22px; border-bottom:1px solid #33263d; }
.console-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.console-section-heading h3 { font-size:.81rem; margin:0; }
.console-section-heading a { display:flex; align-items:center; gap:5px; font-size:.63rem; color:#bc9ad6; }
.console-section-heading .icon { width:13px; }
.console-project { display:flex; gap:8px; align-items:center; padding:12px 0; border-top:1px solid #251c2e; }
.console-project-title { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.console-project-title > img,.console-cover-placeholder { width:42px; height:45px; flex:0 0 42px; object-fit:cover; border-radius:3px; background:#241b2e; display:grid; place-items:center; }
.console-project-title > span { min-width:0; }
.console-project-title strong { font-size:.76rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.console-project-title small { display:block; font-size:.59rem; color:#9f8dac; margin-top:6px; }
.console-status { margin-left:6px; color:#cbb87a; }
.console-status.public { color:#91caa0; }
.console-update { color:#b993d7; padding:8px; }
.console-update .icon { width:15px; }
.console-storage-values { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.console-storage-values strong { font-size:1.3rem; }
.console-storage-values span { font-size:.61rem; color:#b3a2c0; }
.console-meter { display:block; width:100%; height:14px; margin:12px 0; }
.console-meter::-webkit-meter-bar { background:#30263b; border:0; border-radius:2px; }
.console-meter::-webkit-meter-optimum-value { background:#a162e8; }
.console-meter::-moz-meter-bar { background:#a162e8; }
.console-storage-note,.console-empty { color:#a694b4; font-size:.68rem; line-height:1.65; }
.console-profile-link { display:flex; align-items:center; gap:9px; margin:22px 0; font-size:.69rem; color:#cab4dc; }
.console-profile-link .icon { width:16px; }
.console-multiplayer { width:100%; display:flex; align-items:center; gap:10px; text-align:left; padding:14px 10px; background:#20190e; border:1px solid #61512b; border-radius:4px; color:#e4c579; font-size:.7rem; }
.console-multiplayer span { flex:1; }
.console-multiplayer small { display:block; font-size:.5rem; letter-spacing:.12em; margin-top:4px; }
.console-multiplayer .icon { width:18px; }
.console-toggle[aria-expanded="true"] { color:#d0a4ff; border-color:#9660cb; background:#291934; }
/* Game pages and community share the arcade's editorial spacing. */
.detail-heading { padding-block:15px 24px; border-bottom:1px solid #41314b; }
.detail-heading .eyebrow { color:#b485df; font:700 .63rem/1.4 ui-monospace,Consolas,monospace; letter-spacing:.14em; }
.detail-heading h1 { font:400 clamp(2.8rem,5vw,5.8rem)/1.08 'Anton Arcade',Impact,sans-serif; letter-spacing:-.025em; margin:10px 0 19px; }
.detail-heading .creator-byline { color:#b8aabd; }
.game-stage { border-radius:3px; border:1px solid #594468; background:#100d18; }
.game-stage .cover-art:after { background:linear-gradient(0deg,rgba(5,4,9,.78),rgba(5,4,9,.34)); }
.game-stage .cover-art img { filter:none; object-fit:cover; }
.game-launch h2 { font:400 clamp(1.8rem,3vw,3rem)/1.1 Georgia,serif; }
.prompt-panel { background:#100e15; border:1px solid #3d2b49; border-radius:3px; box-shadow:none; }
.prompt-panel > .eyebrow,.prompt-panel h2 .icon { color:#ac7cce; }
.prompt-panel h2 { font:400 1.8rem/1.1 Georgia,serif; }
.prompt-panel .tools-label { font-family:ui-monospace,Consolas,monospace; }
.forum-post { background:transparent; border:0; border-bottom:1px solid #392c43; border-radius:0; padding:25px 10px; box-shadow:none; }
.forum-post:hover { background:rgba(143,77,189,.05); }
.community-tabs { border-color:#4e365c; }
.community-note { border-radius:3px; background:linear-gradient(135deg,#23142f,#100d16); }
.community-sidebar .surface { border-radius:3px; background:#100e15; border-color:#392c43; }
.profile-cover,.public-profile-cover { border-radius:3px; }
.profile-cover-default { background:radial-gradient(circle at 80% 30%,rgba(158,88,219,.42),transparent 28%),linear-gradient(118deg,#0c0a11,#22142f 60%,#0e0b17); }
.profile-identity .avatar.large { box-shadow:0 0 0 5px #09090c; }
.profile-info h1 { font:400 clamp(2.1rem,4vw,3.4rem)/1.1 Georgia,serif; }
.profile-controls .btn { border-radius:3px; }
@media(min-width:1600px) { .arcade-hero { min-height:540px; } }
@media(max-width:1250px) {
  .topbar { gap:20px; padding-inline:24px; }
  .header-actions { gap:10px; }
  .header-search { max-width:210px; }
  .desktop-nav { gap:16px; }
  .site-layout.console-visible { grid-template-columns:minmax(0,1fr) 300px; }
  .creator-console { padding:22px 17px; }
  .console-visible .page { padding:25px 20px; }
  .console-visible .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .console-visible .arcade-hero { min-height:470px; }
  .console-visible .arcade-hero-mark { right:-7%; }
  .console-visible .filterbar,.console-visible .device-toolbar { flex-wrap:wrap; }
  .console-visible .upload-layout { grid-template-columns:1fr; }
  .console-visible .upload-sidebar { position:static; }
  .console-visible .upload-steps { display:flex; padding:0; }
  .console-visible .upload-steps li { min-height:0; }
  .console-visible .upload-steps li > div,.console-visible .creator-note { display:none; }
}
@media(max-width:1000px) {
  .header-search { display:none; }
  .site-layout.console-visible { display:flex; flex-direction:column; }
  .creator-console { order:-1; position:relative; top:auto; width:100%; max-height:none; overflow:visible; border-left:0; border-bottom:1px solid #694185; padding:18px 20px 4px; }
  .creator-console.console-expanded { max-height:65dvh; overflow:auto; padding-bottom:18px; }
  .creator-console:not(.console-expanded) #console-content { display:none; }
  .creator-console:not(.console-expanded) .console-heading { margin-bottom:13px; }
  .console-expand { display:flex; }
  .creator-console .console-body { display:grid; grid-template-columns:1fr 1fr; column-gap:25px; }
  .console-upload { grid-column:1/-1; }
  .console-visible .page { padding:24px 20px 96px; }
  .mobile-search { display:flex; margin:22px 0; }
}
@media(max-width:640px) {
  .topbar { padding-inline:16px; gap:10px; }
  .header-actions { gap:7px; }
  .header-actions .btn { padding:8px; }
  .header-inbox { display:none; }
  .console-toggle { width:32px; height:32px; flex:0 0 32px; }
  .console-visible .page,.page { padding-inline:16px; }
  .arcade-hero,.console-visible .arcade-hero { margin:-24px -16px 0; min-height:390px; align-items:start; }
  .arcade-hero::after { background:linear-gradient(90deg,rgba(9,8,15,.98),rgba(9,8,15,.64) 72%,transparent); }
  .arcade-hero-mark { right:-20%; top:60%; font-size:17rem; -webkit-text-stroke-color:rgba(205,158,247,.15); }
  .arcade-hero-content,.console-visible .arcade-hero-content { width:100%; padding:35px 20px 52px; }
  .arcade-kicker { font-size:.53rem; margin-bottom:23px; }
  .arcade-hero h1,.console-visible .arcade-hero h1 { font-size:clamp(3.55rem,12.7vw,5.5rem); line-height:1.02; }
  .arcade-manifesto { max-width:240px; font-size:.66rem; line-height:1.6; }
  .arcade-index-strip { font-size:.48rem; padding-block:14px; }
  .arcade-index-strip > span:last-child { display:none; }
  .discovery-controls { margin-top:25px; }
  .discovery-heading h2 { font-size:2rem; }
  .classification-filter button { padding:12px 8px; }
  .classification-filter button > span { display:block; font-size:.68rem; line-height:1.5; }
  .classification-filter button .icon,.classification-filter button small { display:none; }
  .device-toolbar { flex-wrap:wrap; gap:6px; }
  .device-toolbar p { font-size:.59rem; }
  .device-filter-button { padding:8px; font-size:.6rem; }
  .filterbar { gap:14px; flex-direction:column; align-items:stretch; }
  .category-tabs { flex-wrap:wrap; gap:4px; }
  .filter-chip { padding:8px; font-size:.63rem; }
  .select-wrap { width:100%; flex-wrap:wrap; }
  .select-wrap select { min-width:0; max-width:100%; flex:1; font-size:.67rem; }
  .games-grid,.console-visible .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 13px; }
  .game-card .card-image { width:100%; height:auto; aspect-ratio:3/4; }
  .game-card .card-details { gap:4px; }
  .game-card .card-details h3 { font-size:1rem; }
  .game-card .card-details p { font-size:.6rem; }
  .game-card .save-button { width:27px; height:27px; padding:5px; flex:0 0 27px; }
  .game-card .project-card-meta { flex-wrap:wrap; gap:3px; font-size:.53rem; }
  .section-heading { gap:12px; align-items:center; }
  .section-heading h2 { font-size:1.6rem; }
  .section-heading h2 > span { font-size:.55rem; margin-right:7px; }
  .section-heading p { font-size:.68rem; }
  .section-heading .section-link { font-size:.6rem; white-space:nowrap; }
  .arcade-discovery .lower-banner { grid-template-columns:1fr; gap:15px; margin-top:30px; }
  .lower-banner .banner-icon { display:none; }
  .lower-banner .btn { justify-self:start; }
  .footer-actions { width:100%; max-width:100%; flex-wrap:wrap; gap:10px 14px; }
  .creator-console .console-body { display:block; }
  .console-visible .arcade-hero-content { width:100%; }
  .detail-heading h1 { font-size:clamp(2.4rem,11vw,4.2rem); }
  .game-stage { min-height:265px; }
  .forum-post { padding-inline:2px; }
}
@media(prefers-reduced-motion:reduce) { .game-card,.console-preference input::after { transition:none; } }