@font-face{font-family:"PS2P";src:url("/assets/fonts/press-start-2p.woff2") format("woff2");font-display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{margin:0;background:#000;color:#ffb27a;font-family:"PS2P",monospace;line-height:1.6;min-height:100vh;
 background-image:radial-gradient(ellipse at 50% 0,rgba(253,94,2,.18),transparent 60%);
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:inherit}
.hdr{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 12px 8px;text-align:center}
.hdr img{width:88px;height:auto;aspect-ratio:auto}
.hdr h1{margin:0;color:#fd5e02;font-size:clamp(14px,4.4vw,24px);letter-spacing:1px;text-shadow:0 0 12px rgba(253,94,2,.55)}
.hdr p{margin:0;font-size:9px;color:#b83f00}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,210px));justify-content:center;gap:14px;max-width:920px;margin:14px auto 30px;padding:0 14px}
.card{position:relative;border:3px solid #fd5e02;border-radius:10px;background:#120700;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 16px rgba(253,94,2,.25)}
.card .shot{position:relative;aspect-ratio:400/760;overflow:hidden;background:#000}
.card .shot img{display:block;width:100%;height:100%;object-fit:cover}
.card.locked .shot img{filter:grayscale(.65) brightness(.38)}
.lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px;text-align:center;font-size:9px;color:#fff;text-shadow:0 2px 0 #000}
.lock svg{width:34px;height:34px}
.meta{padding:10px 8px 12px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.meta h2{margin:0;font-size:11px;color:#fd5e02}
.meta .tag{font-size:8px;color:#ffb27a}
.btn{display:inline-block;border:0;border-radius:8px;background:#fd5e02;color:#000;font:inherit;font-size:9px;padding:10px 12px;cursor:pointer;text-decoration:none;box-shadow:0 3px 0 #b83f00;width:100%;max-width:220px;text-align:center}
.btn:hover,.btn:focus-visible{background:#ff8a3d;outline:none}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #b83f00}
.btn.ghost{background:transparent;color:#fd5e02;border:2px solid #fd5e02;box-shadow:none}
.foot{text-align:center;font-size:7px;color:#5a2000;padding:0 12px 24px}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal.on{display:flex}
.box{background:#120700;border:3px solid #fd5e02;border-radius:12px;max-width:360px;width:100%;padding:18px 16px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;font-size:9px}
.box h3{margin:0;color:#fd5e02;font-size:12px}
.box .st{min-height:1.6em;color:#fff;word-break:break-word}
.box .st.err{color:#ff6a6a}
.wl{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
/* gated pages */
.page{display:flex;justify-content:center}
.gate,.unlocked{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 14px;text-align:center;max-width:460px;width:100%}
.gate h1,.unlocked h1{margin:0;color:#fd5e02;font-size:clamp(12px,4vw,18px)}
.gate p{margin:0;font-size:10px;color:#fff}
.logo-sm{width:72px;height:auto}
.top{display:flex;justify-content:space-between;width:100%;font-size:9px}
.top .back{color:#fd5e02;text-decoration:none}
.top .wal{color:#ffb27a}
.frame{border:3px solid #fd5e02;border-radius:10px;overflow:hidden;width:min(100%,400px);box-shadow:0 0 18px rgba(253,94,2,.35)}
.frame img{display:block;width:100%;height:auto}
.note{font-size:8px;color:#b83f00;margin:0}
.btn img{width:18px;height:18px;vertical-align:middle;margin:-3px 8px 0 0;border-radius:4px}
.box{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch}