/* Studio site, round 4: brighter. Starry electric-blue ground, light little windows with loud title
   bars, chunky toy-like pixel frames, and lots of small hand-drawn sprites (all ours) in the spirit of
   the 2000s personal web. Arcade leads with a real game (Dog Mosh Festival). One deliberate look. */
:root { color-scheme: light;
  --sky: #0b0612; --sky-hi: #4b5cff; --sky-lo: #2a1245; --night: #000000;
  --win: #f6f4ff; --win-2: #e9e6ff; --ink: #160f4a; --soft: #4b4596; --line: #120c45;
  --white: #ffffff; --pink: #ff4fb8; --pink-lo: #c21f86; --cyan: #34e6ff; --cyan-lo: #0aa6c9; --lime: #7dff4f; --lime-lo: #2fae1f; --violet: #9b5cff; --violet-lo: #6a2fd6;
  --ground: #0b0612; --tile: none; --on-sky: #ffffff; --on-sky-soft: #e6e9ff; --on-night: #ffffff; --on-night-soft: #aab2ff; --hl: #7dff4f; --hl2: #34e6ff; --tshadow: #120c45; --btn-ink: #160f4a; --link: #6a2fd6; --link2: #c21f86; --cab: #6a2fd6;
  --px: "Pixelify Sans", "Silkscreen", monospace; --lab: "Silkscreen", "Courier New", monospace; --mono: "Space Mono", ui-monospace, monospace }
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--sky); color: var(--on-sky); font: 14px/1.65 var(--mono); overflow-x: hidden }
img { max-width: 100% }
h1, h2, h3, p { margin: 0 }
h2 { text-wrap: balance }
.spr, .pixelated { image-rendering: pixelated }
.spr { display: block }
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.wrap { max-width: 1060px; margin-inline: auto }
.starry { background: var(--tile) 0 0 / 128px 128px, var(--ground); background-color: var(--sky); image-rendering: pixelated }
/* chunky toy frame: 4px navy edge with stepped corners and a hard drop shadow */
.toy { box-shadow: 0 -4px 0 var(--line), 0 4px 0 var(--line), -4px 0 0 var(--line), 4px 0 0 var(--line), 8px 10px 0 color-mix(in srgb, var(--line) 45%, transparent) }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font: 700 16px/1 var(--px); text-decoration: none; cursor: pointer; border: 0;
  color: var(--btn-ink); background: var(--lime); box-shadow: 0 -4px 0 var(--line), 0 4px 0 var(--line), -4px 0 0 var(--line), 4px 0 0 var(--line), 6px 8px 0 var(--line) }
.btn.pink { background: var(--pink); color: var(--white) }
.btn.cyan { background: var(--cyan) }
.nowplaying { color: var(--btn-ink) !important }
.btn:active { transform: translate(4px, 5px); box-shadow: 0 -4px 0 var(--line), 0 4px 0 var(--line), -4px 0 0 var(--line), 4px 0 0 var(--line) }
.copy { font: 400 11px/1 var(--lab); background: none; border: 0; color: var(--link2); cursor: pointer; padding: 8px 0; margin-left: 12px; text-decoration: underline }
.lab { font: 400 11px/1 var(--lab); letter-spacing: .08em }
/* chrome pixel headings: liquid-metal bands, hard black shadow, pink haze */
.metal { font-family: var(--px) !important; font-weight: 700 !important; letter-spacing: .01em; color: transparent; text-shadow: none !important;
  background: linear-gradient(180deg, #ffffff 0 36%, #d9ccff 36% 50%, #ff7cc8 50% 66%, #ffffff 66% 74%, #9a6bff 74%); -webkit-background-clip: text; background-clip: text; background-size: 100% 1em; line-height: 1 !important;
  filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 12px rgba(255,79,174,.6)) }
.metal b { color: transparent; background: linear-gradient(180deg, #f4ffd1 0 38%, #c6ff3d 38% 68%, #5fa800 68%) 0 0 / 100% 1em; -webkit-background-clip: text; background-clip: text }
/* Spore Nocturne: a looping night forest built at 1x from CC0 sprites (surt, Kami, CazBee), shown at 1.5x.
   Layers scroll in whole art pixels at three speeds; the Red Shroom runs on the spot. Still under reduced motion. */
.forest { position: relative; height: 306px; overflow: hidden; image-rendering: pixelated; margin-top: 44px;
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))) }
.intro { padding-bottom: 0 !important }
/* divider: the Red Shroom crossing grass and mushrooms, over the same stars */
.strip { position: relative; height: 96px; overflow: hidden; image-rendering: pixelated; margin-top: 48px;
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))) }
.has-strip { padding-bottom: 0 !important }
.strip .ly { position: absolute; inset: 0; display: block; background: url(img/forest/strip.png) 0 0 / 960px 96px repeat-x }
.strip .runner { position: absolute; display: block; left: 30%; bottom: 13.5px; width: 48px; height: 48px; background: url(img/forest/runner.png) 0 0 / 96px 48px no-repeat }
.strip.b .ly { background-position-x: -480px } .strip.b .runner { left: 62% }
@media (prefers-reduced-motion: no-preference) { .strip .ly { animation: scroll 12s steps(640) infinite } .strip.b .ly { animation-delay: -6s } .strip .runner { animation: run .28s steps(2) infinite } }
.forest i { position: absolute; display: block }
.forest .ly { inset: 0; background: 0 0 / 960px 306px repeat-x }
.forest .back { background-image: url(img/forest/back.png) } .forest .mid { background-image: url(img/forest/mid.png) } .forest .front { background-image: url(img/forest/front.png) }
.forest .runner { left: 30%; bottom: 16.5px; width: 48px; height: 48px; background: url(img/forest/runner.png) 0 0 / 96px 48px no-repeat }
@media (prefers-reduced-motion: no-preference) {
  .forest .back { animation: scroll 64s steps(640) infinite } .forest .mid { animation: scroll 32s steps(640) infinite } .forest .front { animation: scroll 12s steps(640) infinite }
  .forest .runner { animation: run .28s steps(2) infinite }
}
@keyframes scroll { to { background-position-x: -960px } }
@keyframes run { to { background-position-x: -96px } }
.sechead { display: flex; align-items: center; gap: 14px; margin-bottom: 26px }
.sechead h2 { font-size: 40px; line-height: 1 }
.arcade .sechead h2 { color: var(--on-night); text-shadow: 4px 4px 0 var(--line) }
.sechead .spr { flex: none }
section { padding-block: 56px }

/* ---------- top bar: a webring-style strip ---------- */
.bar { background: var(--night); padding-block: 10px }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px }
.home { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-night); font: 700 17px/1 var(--px) }
.home img { width: 40px; height: 40px }
.bar nav { display: flex; gap: 6px; font: 400 11px/1 var(--lab) }
.bar nav a { color: var(--on-night); text-decoration: none; padding: 10px 10px; background: var(--sky-lo) }
.bar nav a:hover { background: var(--pink) }
@media (max-width: 600px) { .bar nav { display: none } }

/* ---------- intro ---------- */
.intro { position: relative; padding-block: 48px 64px }
.intro .wrap { position: relative; display: grid; gap: 28px; align-items: center }
@media (min-width: 820px) { .intro .wrap { grid-template-columns: auto 1fr } }
.intro .logo { width: 200px; height: 200px; filter: drop-shadow(2px 0 0 var(--line)) drop-shadow(-2px 0 0 var(--line)) drop-shadow(0 2px 0 var(--line)) drop-shadow(0 -2px 0 var(--line)) drop-shadow(6px 6px 0 var(--line)) }
.intro .txt { position: relative; display: grid; gap: 18px; min-width: 0 }
.intro h1 { font-size: clamp(40px, 8vw, 72px); line-height: .95; max-width: 12ch }
.intro p { max-width: 36rem; color: var(--on-sky-soft); text-shadow: 0 1px 0 #000, 0 0 8px #000 }
.intro .btnrow { display: flex; flex-wrap: wrap; gap: 26px; padding-top: 8px }
.floaty { position: absolute; pointer-events: none }
@media (prefers-reduced-motion: no-preference) {
  .bob { animation: bob 2.4s steps(4) infinite alternate } .twinkle { animation: tw 1.6s steps(2) infinite }
}
@keyframes bob { to { transform: translateY(-10px) } }
@keyframes tw { 50% { opacity: .2 } }
.nowplaying { position: absolute; right: 0; top: -22px; transform: rotate(6deg); font: 700 13px/1.2 var(--px); color: var(--ink); background: var(--cyan); padding: 10px 12px; text-decoration: none;
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 5px 6px 0 var(--line) }
.nowplaying small { display: block; font: 400 9px/1 var(--lab) }
@media (max-width: 819px) { .nowplaying { position: static; justify-self: start; transform: rotate(-3deg); margin-bottom: 6px } }

.marquee { overflow: hidden; white-space: nowrap; font: 400 12px/1 var(--lab); color: var(--lime); padding-block: 13px; background: #000; box-shadow: inset 0 -3px 0 var(--pink) }
.marquee span { display: inline-block; padding-left: 100% }
@media (prefers-reduced-motion: no-preference) { .marquee span { animation: crawl 28s linear infinite; animation-delay: -10s } }
@keyframes crawl { to { transform: translateX(-100%) } }

/* ---------- windows (light, loud title bars) ---------- */
.win { position: relative; background: var(--win); color: var(--ink); min-width: 0 }
.win .tb { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; font: 400 11px/1 var(--lab); color: var(--white);
  background: linear-gradient(90deg, var(--tb1, var(--violet-lo)), var(--tb2, var(--pink))) }
.win .tb i { display: flex; gap: 6px; font-style: normal } .win .tb i b { width: 14px; height: 14px; background: var(--win); box-shadow: inset -2px -2px 0 var(--soft) }
.win .wc { padding: 20px; display: grid; gap: 14px }
.win h3 { font: 700 24px/1.05 var(--px) }
.win p { color: var(--soft) }
.win a { color: var(--link) } .win a.btn { color: var(--btn-ink) }

/* ---------- games ---------- */
.product .art { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover }
@media (min-width: 820px) { .product .inner { display: grid; grid-template-columns: 1.3fr 1fr } .product .art { height: 100%; aspect-ratio: auto } }
.product h3 { font-size: 36px; color: var(--link) }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none }
.tags li { font: 400 10px/1 var(--lab); padding: 7px 8px; background: var(--win-2); color: var(--ink) }
.submenu { display: flex; flex-wrap: wrap; font: 400 11px/1 var(--lab); padding: 0; margin: 0; list-style: none }
.submenu li + li::before { content: "·"; color: var(--soft); padding: 0 10px }
.submenu a { display: inline-block; padding: 8px 0; text-decoration: none }
.submenu a:hover { text-decoration: underline }

/* ---------- arcade ---------- */
.arcade { background: var(--night) }
.cab { display: grid; gap: 0; background: var(--cab); padding: 18px 18px 22px; position: relative }
@media (min-width: 820px) { .cab { grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: center; padding: 26px } }
.cab .marq { grid-column: 1 / -1; text-align: center; font-size: clamp(26px, 5.5vw, 46px); line-height: 1; padding: 28px 22px 30px; margin-bottom: 18px;
  background: #000; box-shadow: inset 0 0 0 4px #000, inset 0 0 0 7px var(--pink), inset 0 0 0 13px #000, inset 0 0 0 15px var(--cyan) }
.cab .marq span { display: inline-block }
.cab .screen { position: relative; background: #000; padding: 10px; box-shadow: inset 0 0 0 4px var(--line) }
.cab .screen img { display: block; width: 100%; aspect-ratio: 934 / 456; object-fit: cover }
.cab .screen::after { content: ""; position: absolute; inset: 10px; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(0,0,0,.18) 3px 4px) }
.cab .info { display: grid; gap: 14px; padding-top: 22px; color: var(--white); min-width: 0 }
@media (min-width: 820px) { .cab .info { padding-top: 0 } }
.cab .info p { color: color-mix(in srgb, var(--white) 88%, var(--violet)) }
.cab .tags li { background: var(--night); color: var(--white) }
.cab .tags li.age { background: var(--pink); color: var(--white) }
.cab .live { display: flex; align-items: center; gap: 10px; font: 400 10px/1 var(--lab); color: var(--lime) }
.cab .live i { width: 10px; height: 10px; background: var(--lime) }
.rowhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 46px 0 22px; font: 700 20px/1 var(--px); color: var(--on-night) }
.rowhead span { font: 400 10px/1 var(--lab); color: var(--on-night-soft) }
.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 30px 22px }
.icon { display: grid; gap: 12px; justify-items: center; align-content: start; text-align: center; color: var(--on-night); font: 700 14px/1.15 var(--px); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none }
.icon .tile { width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; display: grid; place-items: center; background: var(--sky-lo) }
.icon .tile img { width: 100%; height: 100%; object-fit: cover }
.icon small { display: block; font: 400 9px/1 var(--lab); color: var(--on-night-soft); margin-top: 5px }
.icon:hover .tile { transform: translateY(-4px) }
.icon .badge { position: absolute; left: 6px; top: 6px; font: 400 9px/1 var(--lab); padding: 4px 5px; color: var(--btn-ink); background: var(--lime) }
.icon.empty { cursor: default; color: var(--on-night-soft) }
.icon.empty:hover .tile { transform: none }
.icon.empty .tile { background: repeating-linear-gradient(45deg, var(--sky-lo) 0 10px, var(--night) 10px 20px) }

/* ---------- collage ---------- */
.board { position: relative; display: grid; gap: 44px }
@media (min-width: 820px) { .board { grid-template-columns: repeat(12, 1fr); align-items: start } }
.w-people { transform: rotate(-1.4deg); --tb1: var(--cyan-lo); --tb2: var(--violet) }
.w-news { transform: rotate(1.2deg); --tb1: var(--pink-lo); --tb2: var(--violet) }
.w-hello { transform: rotate(-.8deg); --tb1: var(--lime-lo); --tb2: var(--cyan-lo) }
.w-ring { transform: rotate(.6deg); --tb1: var(--violet-lo); --tb2: var(--cyan-lo) }
@media (min-width: 820px) { .w-people { grid-column: 1 / 7 } .w-news { grid-column: 7 / 13; margin-top: 50px } .w-hello { grid-column: 2 / 7 } .w-badges { grid-column: 7 / 13; margin-top: 30px } .w-ring { grid-column: 3 / 11 } }
.member { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center }
.member .ava { width: 64px; height: 64px; display: grid; place-items: center; background: var(--sky); box-shadow: inset 0 0 0 3px var(--line) }
.member b { font: 700 17px/1.1 var(--px); display: block }
.member span { font: 400 10px/1.4 var(--lab); color: var(--soft) }
.member a { font: 400 11px/1 var(--lab); display: inline-block; padding: 8px 0 0 }
.news { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px }
.news time { display: block; font: 400 10px/1 var(--lab); color: var(--link2); margin-bottom: 6px }
.new { font: 400 9px/1 var(--lab); color: var(--white); background: var(--pink); padding: 3px 5px; margin-left: 8px; vertical-align: 2px }
@media (prefers-reduced-motion: no-preference) { .new { animation: tw 1.2s steps(1) infinite } }
.badges { display: flex; flex-wrap: wrap; gap: 16px }
.badges a, .badges span { display: block; line-height: 0 }
.badges canvas { width: 176px; height: 62px }
@media (max-width: 420px) { .badges canvas { width: 150px; height: 53px } }
.ring { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; font: 400 11px/1 var(--lab) }
.ring a { text-decoration: none; padding: 8px 4px }
.ring b { font: 700 16px/1 var(--px); color: var(--ink) }
.construct { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 14px; font: 400 11px/1.4 var(--lab); color: var(--lime);
  background: repeating-linear-gradient(-45deg, var(--pink) 0 14px, #000 14px 28px) }
.construct span { background: #000; padding: 8px 10px }
footer a { color: var(--link) }
footer { padding-block: 30px 44px; text-align: center; font: 400 10px/1.8 var(--lab); color: var(--on-night-soft); background: var(--night) }

/* ---------- in-page player ---------- */
.ov { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: auto 1fr; background: var(--night);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) }
.ov[hidden] { display: none }
.ov .tb { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font: 700 15px/1 var(--px); color: var(--white); background: linear-gradient(90deg, var(--violet-lo), var(--pink)) }
.ov .tb .x { min-width: 44px; height: 36px; font: 700 15px/1 var(--px); color: var(--ink); background: var(--win); border: 0; cursor: pointer; box-shadow: inset -3px -3px 0 var(--soft) }
.ov .stage { position: relative; display: grid; place-items: center; overflow: hidden }
.ov .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000 }
.ov .tb .tab { margin-left: auto; font: 400 11px/1 var(--lab); color: var(--white); padding: 12px 6px }


/* Candy Noir, the site's one look */
:root { color-scheme: dark; --sky: #0b0612; --ground: radial-gradient(circle at 100% 0%, rgba(255,95,176,.32), transparent 38%), radial-gradient(circle at 104% 70%, rgba(79,220,255,.22), transparent 34%), radial-gradient(circle at 0% 108%, rgba(154,107,255,.34), transparent 42%), #0b0612; --sky-lo: #2a1245; --night: #000000; --on-sky: #ffffff; --on-sky-soft: #e6d8ff; --on-night: #ffffff; --on-night-soft: #b9a6d9; --hl: #c6ff3d; --hl2: #ff7cc8; --tshadow: #ff2f9a; --line: #000000; --btn-ink: #0b0612; --win: #150a24; --win-2: #26133d; --ink: #f6efff; --soft: #bba8dc; --link: #ff7cc8; --link2: #c6ff3d; --cab: #2a1245; --lime: #c6ff3d; --lime-lo: #5fa800; --pink: #ff4fae; --pink-lo: #c4157a; --cyan: #4fdcff; --cyan-lo: #0f8fb8; --violet: #9a6bff; --violet-lo: #5a2bc4; --tile: url(img/stars.png) }