*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#050810;color:#f3f6ff;font-family:ui-monospace,Menlo,Consolas,monospace;overscroll-behavior:none}
body{touch-action:manipulation;-webkit-user-select:none;user-select:none}
canvas{display:block;margin:0 auto;touch-action:none}
.back{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;z-index:9;color:#000;background:#ffe600;border:3px solid #000;box-shadow:3px 3px 0 #ff2bd6;padding:.35rem .7rem;font:800 .75rem ui-monospace,monospace;text-decoration:none;text-transform:uppercase}
.wrap{max-width:980px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 24px) 16px 40px}
h1{font:900 clamp(2.4rem,10vw,4.6rem)/.95 system-ui,sans-serif;margin:.4rem 0 .5rem;color:#ff2bd6;text-shadow:4px 4px 0 #00e5ff,8px 8px 0 #000;text-transform:uppercase;letter-spacing:-.03em}
.sub{opacity:.7;margin:0 0 1.6rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{display:block;color:#000;text-decoration:none;border:4px solid #000;box-shadow:6px 6px 0 #f3f6ff;transition:transform .12s,box-shadow .12s;overflow:hidden}
.card:hover,.card:active{transform:translate(3px,3px);box-shadow:3px 3px 0 #f3f6ff}
.cover{aspect-ratio:3/2;background:#000;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 3.2rem system-ui;color:rgba(0,0,0,.35)}
.cbody{padding:.8rem 1rem 1rem}
.cbody b{display:block;font:900 1.5rem/1.1 system-ui,sans-serif;text-transform:uppercase}
.cbody span{display:block;font-size:.78rem;line-height:1.45;font-weight:600;margin:.3rem 0 .5rem}
.cbody small{font-weight:800;font-size:.7rem;background:#000;color:#fff;padding:.15rem .5rem}
.fine{opacity:.5;font-size:.72rem;margin-top:2rem}