@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Inter:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; }
.grid { display: grid; }
.card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; }
.art { overflow: hidden; background: var(--card-bg); }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.content { display: flex; flex: 1; flex-direction: column; }
.creator { display: flex; align-items: center; gap: 7px; }
.creator-age { margin-left: auto; white-space: nowrap; }
footer { display: flex; align-items: center; justify-content: center; }
/* Neon hall: the library grows into ordinary rows at every screen size. */
:root { font-family: Inter, system-ui, sans-serif; color: #f4f4ff; background: #060818; --cyan: #28ddff; --pink: #f33cdb; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { background: #060818; isolation: isolate; }
body::before { z-index: -1; background: linear-gradient(180deg, #050a1f55, #07071e66 60%, #060818e8), url('arcade-hall.jpg') center / cover; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid white; outline-offset: 5px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 30; padding: 16px; background: #111b39; color: white; }
.skip-link:focus { top: 10px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px max(24px, calc((100vw - 1240px) / 2)); background: #04091de0; border-bottom: 1px solid #34ceff35; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; font: 800 20px Orbitron, sans-serif; letter-spacing: .04em; color: var(--cyan); }
.brand b { color: var(--pink); }
.brand small { display: block; margin-top: 8px; font: 500 10px Inter, sans-serif; letter-spacing: .3em; color: #bfc6e2; }
.brand-icon { font-size: 32px; text-shadow: 0 0 20px #28ddff80; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#fullscreen-toggle { cursor: pointer; padding: 11px 14px; min-height: 44px; border: 1px solid #28ddff70; border-radius: 6px; background: #1acbff12; color: #c2eefa; font-size: 12px; white-space: nowrap; }
#fullscreen-toggle:hover, #fullscreen-toggle[aria-pressed=true] { border-color: var(--cyan); color: white; }
#fullscreen-toggle:disabled { cursor: wait; opacity: .6; }
.fullscreen-status { margin: 12px 24px; color: #c2cee5; font-size: 13px; text-align: center; }
nav a { text-decoration: none; padding: 12px 18px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #c2c6de; border: 1px solid transparent; border-radius: 6px; }
nav a:hover, nav a:focus-visible { border-color: var(--cyan); color: white; background: #1acbff12; box-shadow: 0 0 15px #28ddff30; }
.shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; }
.hero { margin: 0; text-align: center; padding: 28px 0; }
.eyebrow { margin: 0; font: 600 12px Inter, sans-serif; letter-spacing: .55em; color: #b9d6ef; text-shadow: none; }
h1 { margin: 14px 0 20px; font: italic 900 clamp(46px, 7.5vw, 98px)/1.1 Orbitron, sans-serif; letter-spacing: -.045em; -webkit-text-stroke: 0; background: linear-gradient(#baffff 12%, #35dbff 36%, #d7a5ff 55%, #ff32d6 80%); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #412363) drop-shadow(0 6px 0 #ee33c775); }
.hero p { font-size: 12px; font-weight: 600; letter-spacing: .25em; line-height: 1.9; color: #bccce8; }
.library-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
h2 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.03em; }
#results-count { margin: 0; font-size: 13px; color: #acb6d1; }
.search { display: block; width: 280px; }
.search span { display: block; font-size: 12px; color: #c2cee5; margin-bottom: 6px; }
.search input { width: 100%; color: white; background: #090e26e8; padding: 12px 15px; border: 1px solid #586387; border-radius: 8px; font-size: 15px; }
.search input::placeholder { color: #9aa6c7; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.filters button { cursor: pointer; border: 1px solid #69749a55; background: #090d25e6; border-radius: 999px; color: #bdc7df; font-size: 13px; font-weight: 600; padding: 9px 17px; min-height: 40px; }
.filters button[aria-pressed=true] { border-color: var(--cyan); background: #143450; color: #d5faff; box-shadow: 0 0 15px #28ddff20; }
.filters button:hover { color: white; border-color: #b1bad1; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.card, .card:last-child { --accent: var(--pink); width: auto; grid-column: auto; justify-self: stretch; min-height: 0; border: 2px solid var(--accent); border-radius: 12px; overflow: hidden; clip-path: none; background: linear-gradient(145deg, #14132af5, #070d22fa); box-shadow: 0 0 8px #f33cdb30, 0 12px 28px #0008; transition: transform .18s ease, box-shadow .18s ease; }
.card:nth-child(even) { --accent: var(--cyan); box-shadow: 0 0 10px #28ddff35, 0 12px 28px #0008; }
.card::before, .card::after, .art::after { display: none; }
.card:hover, .card:focus-visible { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent), 0 18px 35px #0008; }
.card:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.art { position: relative; height: auto; aspect-ratio: 16 / 9; border-bottom: 1px solid #ffffff14; }
.tile-updated { position: absolute; right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 5px; border-radius: 3px; background: #060818d9; color: #b9c1d2; font: 400 10px/1.4 Inter, sans-serif; overflow-wrap: anywhere; pointer-events: none; }
.art img, .card:hover .art img, .card:focus-visible .art img { filter: none; transform: none; }
.content { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 0 18px; padding: 16px 18px 12px; flex: 1; align-content: start; }
.title { font: 700 23px/1.25 Inter, sans-serif; margin: 0; letter-spacing: -.035em; text-shadow: none; grid-column: 1; }
.creator { font: 400 12px/1.5 Inter, sans-serif; margin-top: 12px; color: #c5c4db; }
.creator-age { border: 1px solid #68739c80; border-radius: 4px; padding: 2px 5px; font: 500 10px Inter, sans-serif; color: #bdc7df; box-shadow: none; }
.play { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; border: 1px solid var(--accent); border-radius: 6px; margin-top: 20px; padding: 10px; color: white; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), #090e2340); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); font: 700 14px Inter, sans-serif; letter-spacing: .14em; text-shadow: none; }
.card:hover .play { color: white; animation: none; }
.creator { grid-column: 1; grid-row: 2; margin-top: 6px; flex-wrap: wrap; }
.creator-age { margin-left: 2px; padding: 0; border: 0; color: #aab5d0; }
.play { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; padding: 10px 18px; min-width: 104px; box-shadow: none; }
.character-credit { grid-column: 1 / -1; margin: 8px 0 0; color: #c5c4db; font-size: 12px; line-height: 1.5; }
#no-results { padding: 50px 16px; text-align: center; color: #c4c9dc; border: 1px dashed #586387; border-radius: 12px; }
.about { margin: 64px auto 32px; max-width: 620px; text-align: center; }
.about h2 { font-size: 17px; letter-spacing: .06em; }
.about p { color: #aebbd3; font-size: 14px; line-height: 1.8; }
footer { border-top: 1px solid #97b9ff25; flex-wrap: wrap; gap: 14px; margin: 0; padding: 26px 0 32px; font-size: 11px; letter-spacing: .1em; color: #a2acc9; }
.dot { margin: 0; color: var(--pink); }
.deployment-details { max-width: 620px; margin: 0 auto 28px; color: #a2acc9; font-size: 12px; line-height: 1.6; }
.deployment-details summary { width: fit-content; margin: auto; padding: 8px; cursor: pointer; }
#deployment-list { margin-top: 12px; padding: 12px 16px; border: 1px solid #97b9ff25; border-radius: 8px; background: #060818de; }
#deployment-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 6px 0; }
#deployment-list span { overflow-wrap: anywhere; }
@media (min-width: 1600px) { .shell { width: min(1500px, calc(100% - 120px)); } .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shell { width: calc(100% - 48px); } }
@media (max-width: 600px) { .topbar { padding: 18px 20px; flex-wrap: wrap; gap: 18px; } .brand { font-size: 17px; } nav { width: 100%; justify-content: center; } nav a { padding: 10px 20px; } .shell { width: calc(100% - 32px); } .hero { padding: 32px 0; } h1 { font-size: clamp(35px, 10vw, 58px); } .eyebrow { font-size: 10px; letter-spacing: .35em; } .hero p { font-size: 10px; letter-spacing: .12em; } .library-toolbar { align-items: stretch; flex-direction: column; gap: 16px; } .search { width: 100%; } .grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } .filters { gap: 7px; } .filters button { padding: 9px 13px; } .title { font-size: 24px; } .desc { font-size: 16px; } .about { margin-top: 44px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card { transition: none; } }
@media (max-width: 760px) { .grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .content { padding: 14px; gap: 0 10px; } .title { font-size: 21px; } .play { min-width: 88px; padding: 10px 12px; font-size: 12px; } }