@font-face{font-family:Bricolage;src:url('assets/bricolage.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{color-scheme:dark;font-family:Bricolage,system-ui,sans-serif;background:#101021;color:#fff8ed;--accent:#c5ff62;--muted:#bcb9d5;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}::selection{background:var(--accent);color:#101021}html{scrollbar-color:#656080 #101021}input{caret-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#ambience{position:fixed;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--x,50%) var(--y,0%),#6650b33b,transparent 85%)}
#library{position:relative;min-height:100svh;max-width:1920px;margin:auto;padding:0 max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px;padding-top:env(safe-area-inset-top)}.identity{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;min-width:0}.identity img{flex:none}.identity h1{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}.tools{display:flex;gap:6px}.icon-button{color:var(--muted);background:transparent;border:0;border-radius:12px;width:44px;height:44px;display:grid;place-items:center}.icon-button:hover,.icon-button[aria-expanded=true]{background:#29263e;color:#fff8ed}.icon-button svg,.back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#search-panel{padding:0 0 14px}#search{display:block;width:min(100%,420px);height:44px;background:#252338;color:#fff8ed;border:1px solid #77718f;border-radius:12px;padding:0 14px}#search::placeholder{color:var(--muted)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));grid-auto-flow:dense;gap:12px}.game{min-width:0;position:relative;--hue:250;--near:0}.game a{display:block;position:relative;isolation:isolate;height:100%;color:#fff;text-decoration:none;border-radius:14px;background:hsl(var(--hue) 35% 20%);box-shadow:0 8px 22px -12px hsl(var(--hue) 95% 65% / calc(var(--near)*.8));transition:transform .32s var(--ease),box-shadow .32s var(--ease)}.art{display:block;position:relative;aspect-ratio:1.7;overflow:hidden;border-radius:inherit;width:100%}.art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#090813c9 0%,#09081345 32%,transparent 65%);pointer-events:none}.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);image-rendering:auto}.game-name{position:absolute;z-index:1;inset:12px 13px auto;font-size:17px;font-weight:800;line-height:1.12;text-wrap:balance;text-shadow:0 2px 5px #0009;max-width:90%}.game a:hover,.game a:focus-visible{z-index:2;transform:translateY(-3px);box-shadow:0 12px 32px -8px hsl(var(--hue) 90% 65% / .7)}.game a:hover img,.game a:focus-visible img{transform:scale(1.075)}.game a:active{transform:scale(.98)}.game.featured{grid-column:span 2;grid-row:span 2}.featured .art{aspect-ratio:auto;height:100%;min-height:100%}.featured .game-name{font-size:clamp(22px,2.2vw,32px);inset:18px 20px auto;max-width:80%}.fallback{display:grid;place-items:center;height:100%;min-height:120px;font-size:54px;color:var(--accent)}.play-mark{position:absolute;right:12px;bottom:12px;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#101021;display:grid;place-items:center;opacity:0;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease)}.play-mark svg{width:18px;height:18px;fill:currentColor}.game a:hover .play-mark,.game a:focus-visible .play-mark{opacity:1;transform:none}#empty,#error{padding:24px 0;color:var(--muted)}#error{color:#ffb9b3}
#play{position:fixed;inset:0;background:#000;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}#frame-host,#frame-host iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}.back{position:absolute;z-index:5;top:max(10px,env(safe-area-inset-top));left:calc(max(8px,env(safe-area-inset-left)) + 52px);display:grid;place-items:center;width:44px;height:44px;background:#222;color:#eee;border:1px solid #444;border-radius:5px;padding:8px 10px}.back:hover{filter:brightness(1.3)}
#loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:44px;padding:76px 28px 32px;background:#101021;overflow:auto}.load-art{position:relative;width:min(44vw,420px);aspect-ratio:4/3;flex:none;align-self:center}.load-art>img:first-child{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 24px 80px -30px #8472ff90}.load-logo{position:absolute;right:-16px;bottom:-16px;transform:rotate(-8deg)}.load-copy{max-width:380px;min-width:0}.load-copy h2{font-size:clamp(26px,4vw,44px);font-weight:800;line-height:1.05;letter-spacing:-.035em;text-wrap:balance;margin:0 0 14px}.load-copy p{font-size:16px;line-height:1.5;color:var(--muted);margin:0 0 24px}progress{display:block;appearance:none;width:100%;height:8px;border:0;border-radius:8px;background:#34304c;overflow:hidden;accent-color:var(--accent)}progress::-webkit-progress-bar{background:#34304c}progress::-webkit-progress-value{background:var(--accent);border-radius:8px}progress::-moz-progress-bar{background:var(--accent)}#load-status{font-size:13px;font-variant-numeric:tabular-nums;margin-top:10px}#load-error p{color:#ffd0c8}#load-error button{min-height:44px;padding:10px 16px;border:0;border-radius:10px;font-weight:700;background:var(--accent);color:#101021;margin:0 8px 8px 0}#load-error #cancel{background:#302b48;color:#fff8ed}
@media(min-width:1600px){.games{grid-template-columns:repeat(auto-fill,minmax(218px,1fr))}}
@media(max-width:700px){#library{padding-inline:max(10px,env(safe-area-inset-left))}.masthead{height:70px}.identity{gap:8px}.identity img{width:36px;height:36px}.identity h1{font-size:23px}.games{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.game.featured{grid-column:span 1;grid-row:span 1}.game-name,.featured .game-name{font-size:14px;inset:9px 10px auto;max-width:90%}.art,.game a{border-radius:11px}.featured .art{aspect-ratio:1.7;height:auto}.play-mark{display:none}#loading{flex-direction:column;gap:28px;padding:76px 24px 24px}.load-art{width:min(66vw,320px);aspect-ratio:16/10}.load-copy{width:min(100%,380px)}.load-copy h2{font-size:30px}.load-copy p{font-size:15px;margin-bottom:18px}}
@media(max-width:480px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}.identity h1{font-size:21px}.masthead{height:66px}}
@media(max-height:500px) and (min-width:600px){#loading{flex-direction:row;gap:28px;padding:60px 24px 24px}.load-art{width:min(34vw,320px)}.load-copy h2{font-size:30px}}
@media(pointer:fine){.game a,.identity,button{cursor:url('assets/cursor.svg') 4 3,pointer}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.game a:hover,.game a:focus-visible,.game a:hover img,.game a:focus-visible img{transform:none}#ambience{display:none}}