:root{color-scheme:dark;--bg:#0d0e10;--panel:#141619;--line:#292b2e;--text:#f3f3f3;--muted:#a7a8ad;--radius:.5rem;font-family:Arial,Helvetica,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{scroll-padding-top:1.5rem}
body{margin:0;background:var(--bg);color:var(--text);font-size:1rem;line-height:1.5}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:5px}
button{border:0;background:none}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.wrap{width:min(100%,100rem);margin-inline:auto;padding:0 1.125rem}
.skip-link{position:fixed;left:1rem;top:1rem;padding:.75rem 1rem;background:#fff;color:#111;z-index:10;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:1.625rem 0 1.5rem}
.brand{display:block}
.brand h1{margin:0;font-size:1.375rem;line-height:1.3;font-weight:400;letter-spacing:-.025em}
.brand span{display:block;color:var(--muted);font-size:.875rem;margin-top:.125rem}
.header nav{display:flex;align-items:center;gap:1.125rem}
.header nav a{position:relative;display:flex;align-items:center;min-height:2.75rem;font-size:.875rem;color:var(--muted)}
.header nav a:hover,.header nav a[aria-current]{color:var(--text)}
.header nav a[aria-current]::after{content:"";position:absolute;bottom:.2rem;left:50%;width:3px;height:3px;border-radius:50%;background:var(--text)}
.gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.gallery-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0;transition:border-color .15s}
.gallery-card:hover{border-color:#77797d}
.gallery-card:focus-within{border-color:#fff;outline:2px solid #fff;outline-offset:4px}
.gallery-launch{position:relative;display:block;aspect-ratio:var(--preview-ratio);padding:0;width:100%;height:100%;text-align:left}
.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;position:absolute;left:0;top:0;z-index:2;width:100%;padding:1rem 1.125rem .875rem;background:none;text-shadow:0 1px 4px #0009}
.card-title{display:block;font-size:.9375rem;line-height:1.3;font-weight:400}
.card-category{display:block;color:var(--muted);font-size:.875rem;line-height:1.4;margin-top:.25rem}
.card-number{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.card-heading .card-category,.card-heading .card-number{color:#dedee0}
.card-preview{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;background:#111316}
.card-preview img{height:100%;width:100%;object-fit:cover}
.card-preview::after,.archive-preview::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0009 0%,#0000 28%,#0000 72%,#0008 100%)}
.card-preview .card-play{z-index:1}
.card-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:1px solid #fff;border-radius:50%;background:rgba(13,14,16,.72);box-shadow:0 2px 8px #0003;transition:background .15s}
.triangle{display:inline-block;width:0;height:0;border-top:.4rem solid transparent;border-bottom:.4rem solid transparent;border-left:.6rem solid currentColor;margin-left:.15rem}
.gallery-launch:hover .card-play,.gallery-launch:focus-visible .card-play,.archive-card button:hover .card-play{background:rgba(13,14,16,.92)}
.play-caption{position:absolute;left:1.125rem;bottom:1.125rem;z-index:1;font-size:.625rem;line-height:1.4;letter-spacing:.22em;color:#fff;text-shadow:0 1px 4px #0009;pointer-events:none}
.collection{border-bottom:1px solid var(--line)}
.collection summary{display:flex;align-items:center;gap:.75rem;min-height:3.5rem;cursor:pointer;list-style:none;color:var(--muted);font-size:.875rem}
.collection summary::-webkit-details-marker{display:none}
.collection summary::after{content:"+";margin-left:auto;color:var(--muted);font-size:1.25rem;font-weight:400}
.collection[open] summary::after{content:"−"}
.collection summary:hover{color:var(--text)}
.collection-count{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.all-playables{margin-top:1.5rem}
.filters{display:flex;flex-wrap:wrap;gap:.375rem;margin:.5rem 0 1.25rem;align-items:center}
.filters button{min-height:2.75rem;padding:.5rem .875rem;border:1px solid var(--line);border-radius:.25rem;font-size:.875rem;color:var(--muted)}
.filters button[aria-pressed="true"]{border-color:#888a8e;color:var(--text);background:#202225}
#result-count{font-size:.875rem;color:var(--muted);margin-left:auto}
.archive-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem .875rem;padding-bottom:1.75rem}
.archive-card{min-width:0}
.archive-card button{width:100%;padding:0;text-align:left}
.archive-preview{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.archive-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.archive-preview .card-play{z-index:1}
.project-link{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--muted);font-size:.875rem}
.project-link:hover{color:#fff}
.other-links{display:grid;gap:.25rem 2rem;padding-bottom:1.25rem}
.other-links a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;font-size:.875rem;color:var(--muted)}
.other-links a:hover{color:#fff}
.footer{display:flex;flex-direction:column;gap:.75rem;padding:1.75rem 0 2rem;font-size:.875rem;color:var(--muted)}
.copyright{font-size:.75rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.footer-links a{display:flex;align-items:center;min-height:2.75rem}
.footer-links .email{flex-basis:100%}
.footer-links a:hover{color:var(--text)}
.back-link{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--muted);font-size:.875rem;margin-bottom:1.5rem}
.case-page{padding:.5rem 0 2rem}
.case-layout{display:grid;gap:2rem}
.case-copy h2{font-size:clamp(1.75rem,4vw,3rem);font-weight:400;letter-spacing:-.04em;line-height:1.1;margin:.75rem 0 1.5rem}
.case-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1rem;border:1px solid #77797d;border-radius:.25rem;font-size:.875rem}
.text-button:hover{background:#222427}
.case-cover{width:100%;max-height:70vh;object-fit:contain;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.loading-fallback{padding:2rem;color:var(--text);font-size:1rem}
.loading-fallback h1{font-size:1.5rem;font-weight:400}
.loading-fallback a{display:inline-flex;align-items:center;min-height:2.75rem;margin-right:1rem}
.player-open{overflow:hidden}
#player{--game-height:calc(100dvh - 9.5rem);width:calc(100% - 1rem);max-width:70rem;max-height:calc(100dvh - 1rem);padding:0;border:1px solid #45474b;border-radius:.5rem;background:#141619;color:var(--text);overflow:auto;overscroll-behavior:contain}
#player::backdrop{background:rgba(0,0,0,.86)}
.player-toolbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.25rem .5rem;padding:.5rem}
.player-toolbar strong{grid-column:1/3;grid-row:1;font-size:.9375rem;font-weight:400;min-width:0;overflow-wrap:anywhere}
.player-toolbar .orientation{grid-column:1/3;grid-row:2;display:flex;gap:.25rem}
.player-toolbar [data-restart]{grid-column:3;grid-row:2}
.player-toolbar .player-close{grid-column:3;grid-row:1}
.player-toolbar button{min-height:2.75rem;padding:.375rem .625rem;font-size:.875rem;border:1px solid transparent;border-radius:.25rem;color:var(--muted)}
.player-toolbar button:hover{color:#fff;background:#27292d}
.orientation button[aria-pressed="true"]{border-color:#77797d;color:var(--text)}
.player-body{display:flex;align-items:center;justify-content:center;min-height:14rem;padding:0 .5rem .5rem;background:#101113}
.player-stage{position:relative;aspect-ratio:9/16;height:min(var(--game-height),52rem);max-width:100%;background:#0d0e10}
.player-stage.landscape{aspect-ratio:16/9;height:auto;width:100%;max-height:var(--game-height)}
.player-stage iframe{display:block;width:100%;height:100%;border:0;background:#0d0e10;aspect-ratio:inherit}
.player-loader{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;font-size:.875rem;color:var(--muted);background:#0d0e10;text-align:center}
.player-loader a{display:inline-flex;align-items:center;min-height:2.75rem;color:#fff;text-decoration:underline}
@media(min-width:640px){
  .wrap{padding-inline:1.75rem}
  .header{padding:2rem 0;gap:1.5rem}
  .header nav{gap:2rem}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-launch{aspect-ratio:3/4}
  .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .other-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}
  .footer-links{gap:1.5rem}
  .footer-links .email{flex-basis:auto}
  .case-layout{grid-template-columns:1fr 1fr;align-items:center}
  #player{--game-height:calc(100dvh - 6.5rem);width:calc(100% - 3rem);max-height:calc(100dvh - 3rem)}
  .player-toolbar{display:flex;gap:.5rem;padding:.5rem 1rem}
  .player-toolbar strong{margin-right:auto}
}
@media(min-width:1024px){
  .wrap{padding-inline:clamp(2rem,2.65vw,3rem)}
  .header{padding:2rem 1.125rem 2.25rem}
  .brand h1{font-size:1.5rem}
  .header nav{gap:3rem;margin-right:1rem}
  .gallery{grid-template-columns:1.18fr .89fr .89fr 1.18fr;grid-template-rows:minmax(0,1.12fr) minmax(0,.88fr);height:clamp(39rem,calc(100dvh - 17rem),51rem);gap:1rem}
  .gallery-launch{aspect-ratio:auto}
  .gallery-card-1{grid-column:1;grid-row:1/3}
  .gallery-card-2{grid-column:2/4;grid-row:1}
  .gallery-card-3{grid-column:4;grid-row:1}
  .gallery-card-4{grid-column:2;grid-row:2}
  .gallery-card-5{grid-column:3;grid-row:2}
  .gallery-card-6{grid-column:4;grid-row:2}
  .card-heading{padding:1rem 1.25rem .875rem}
  .all-playables{margin-top:1.75rem}
  .archive-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem}
  .other-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer{padding:2rem 1.125rem 2.25rem}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}