/* Dusk Moon Arcade: the louder side. Loaded after ../site.css, so the studio header, nav and footer stay the same. */
:root { --ab:#060818; --ab2:#0d1230; --cy:#19e6ff; --mg:#ff3dcb; --yl:#ffe933; --ink:#e6ebff; --dim:#8c97d9; }
body.arcade { background: var(--ab); color: var(--ink); }
body.arcade a { color: var(--cy); }
body.arcade .site-nav { background: rgba(6,8,24,.92); border-bottom-color: rgba(25,230,255,.25); }
body.arcade .site-nav nav a[aria-current="page"] { color: var(--cy); border-bottom-color: var(--cy); }
body.arcade .site-nav nav a:hover { border-bottom-color: var(--cy); }
body.arcade footer, body.arcade footer a { color: var(--dim); }
body.arcade footer { border-top-color: rgba(25,230,255,.18); }

/* hero */
.a-hero { position: relative; text-align: center; padding: 54px 20px 64px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #1b1547 0%, #0b0e2c 55%, #060818 100%); border-bottom: 1px solid rgba(25,230,255,.3); }
.a-hero::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(0deg, rgba(160,200,255,.05) 0 1px, transparent 1px 4px); }
.a-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient(90deg, transparent, var(--cy), var(--mg), transparent); }
.a-hero > * { position: relative; }
.a-kicker { margin: 0 0 14px; font: 400 11px/1 "Press Start 2P", ui-monospace, monospace; letter-spacing: .3em; color: var(--dim); }
.a-hero h1 { margin: 0; font: 400 clamp(22px, 5.5vw, 36px)/1.3 "Press Start 2P", ui-monospace, monospace; color: var(--cy); text-shadow: 0 0 18px rgba(25,230,255,.55); }
.a-hero h1 em { font-style: normal; color: var(--mg); text-shadow: 0 0 18px rgba(255,61,203,.55); }
.a-hero .line { margin: 18px auto 0; max-width: 32em; font: 400 24px/1.25 "VT323", ui-monospace, monospace; color: var(--ink); }
.a-hero .cta { margin-top: 22px; }

/* wordmark: VOID with the pixel black hole, BRAWL in magenta, both rows the same width */
.wm { width: min(100%, 360px); margin: 0 auto; font-family: "Press Start 2P", ui-monospace, monospace; line-height: 1; }
.wm .r { display:flex; justify-content: space-between; align-items: center; font-size: clamp(34px, 11vw, 58px); }
.wm .r1 span { color: #e6ebff; text-shadow: 0 0 14px rgba(160,200,255,.7); }
.wm .r1 img { width: 1.05em; height: 1.05em; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(181,107,255,.8)); }
.wm .r2 { margin-top: .22em; }
.wm .r2 span { color: var(--mg); text-shadow: 0 0 14px rgba(255,61,203,.75); }
.wm small { display:block; margin-top: 14px; font: 400 10px/1 "Press Start 2P", ui-monospace, monospace; letter-spacing: .28em; color: var(--cy); text-align: center; }

/* buttons and cards */
body.arcade .btn { background: var(--cy); color: #04101a; border-radius: 4px; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; padding: 13px 16px; box-shadow: 0 0 16px rgba(25,230,255,.35); }
body.arcade .btn.ghost { background: transparent; color: var(--cy); border: 2px solid var(--cy); padding: 11px 14px; box-shadow: none; }
body.arcade .soon { background: transparent; color: var(--yl); border: 2px solid var(--yl); border-radius: 4px; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; padding: 10px 14px; }
body.arcade .card { background: linear-gradient(180deg, #0d1230, #0a0d26); border: 1px solid rgba(25,230,255,.25); border-radius: 10px; }
body.arcade h2 { font: 400 16px/1.5 "Press Start 2P", ui-monospace, monospace; color: var(--cy); margin: 0 0 14px; }
body.arcade h3 { font: 400 22px/1.2 "VT323", ui-monospace, monospace; color: var(--yl); }
body.arcade .tag { color: var(--dim); font: 400 22px/1.25 "VT323", ui-monospace, monospace; }
body.arcade .game img { border-radius: 16px; box-shadow: 0 0 24px rgba(25,230,255,.25); border: 1px solid rgba(25,230,255,.35); }
body.arcade .more { color: var(--cy); }
body.arcade summary { color: var(--ink); }
body.arcade details, body.arcade details:last-of-type { border-color: rgba(25,230,255,.2); }

/* screenshots (landscape) */
.vshots { display:flex; gap: 14px; overflow-x:auto; padding: 4px 2px 14px; margin: 6px 0 14px; scroll-snap-type: x proximity; }
.vshots a { flex: 0 0 auto; display:block; line-height:0; border-radius: 8px; scroll-snap-align: start; }
.vshots img { width: min(440px, 80vw); height: auto; aspect-ratio: 2 / 1; border-radius: 8px; border: 1px solid rgba(25,230,255,.35); box-shadow: 0 8px 24px rgba(0,0,0,.45); display:block; }
.vshots a:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* facts grid */
.facts { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 22px; margin: 0 0 8px; padding: 0; list-style: none; }
.facts li { margin: 0; padding: 8px 0; border-bottom: 1px dashed rgba(25,230,255,.2); }
.facts b { color: var(--yl); font-weight: 800; display:block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.keys { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.keys div { border: 1px solid rgba(255,61,203,.35); border-radius: 8px; padding: 12px 14px; background: rgba(255,61,203,.05); }
.keys b { color: var(--mg); display:block; font: 400 12px/1.4 "Press Start 2P", ui-monospace, monospace; margin-bottom: 6px; }

/* legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 30px 20px 24px; }
.legal h1 { font: 400 clamp(18px, 4.6vw, 26px)/1.4 "Press Start 2P", ui-monospace, monospace; color: var(--cy); margin: 0 0 8px; }
.legal h2 { font: 600 21px/1.25 "Fredoka", "Nunito", system-ui, sans-serif; color: var(--cream, #fff3d6); margin: 28px 0 8px; }
.legal .muted { color: var(--dim); margin-top: 0; }
.legal .box { background: rgba(25,230,255,.07); border: 1px solid rgba(25,230,255,.3); border-radius: 10px; padding: 14px 18px 6px; margin: 18px 0; }
.legal .tablewrap { overflow-x: auto; margin: 10px 0 16px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 15px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 9px 10px; border: 1px solid rgba(25,230,255,.25); }
.legal th { background: rgba(25,230,255,.1); color: var(--cy); }
.back { display:inline-block; margin: 0 0 14px; font-weight: 700; text-decoration: none; }
.back:hover { text-decoration: underline; }

@media (max-width: 640px) { .facts, .keys { grid-template-columns: 1fr; } .a-hero { padding: 40px 16px 52px; } }