:root { --ink:#19163d; --cream:#fff9e9; --purple:#6c4ae4; --pink:#f666a7; --orange:#ff9c45; --cyan:#83ddd4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#f9edcb; font-family:"Silkscreen", monospace; font-size:13px; }
body::before { content:""; position:fixed; inset:0; z-index:-2; opacity:.7; background-image:radial-gradient(#e8c989 1px,transparent 1px); background-size:12px 12px; }
.site-shell { max-width:1120px; min-height:100vh; margin:auto; background:var(--cream); box-shadow:0 0 0 8px var(--ink), 0 0 0 12px var(--pink); overflow:hidden; }
.topbar { height:74px; padding:0 48px; display:flex; align-items:center; justify-content:space-between; border-bottom:4px solid var(--ink); background:var(--cream); }
.logo { color:var(--ink); font-size:22px; text-decoration:none; letter-spacing:-2px; text-shadow:2px 2px 0 var(--pink); }.logo span { color:var(--purple); }
.status { font-size:10px; text-transform:uppercase; }.status span { display:inline-block; width:8px; height:8px; margin-right:6px; background:#60c67a; border:1px solid var(--ink); box-shadow:1px 1px 0 var(--ink); }
.hero { position:relative; min-height:430px; padding:78px 48px 50px; background:linear-gradient(125deg,#d5f5ed 0%,#c9f0e6 51%,#aee2de 51%,#aee2de 100%); overflow:hidden; }
.hero::after { content:""; position:absolute; width:600px; height:600px; right:-250px; top:-210px; border:30px solid var(--pink); border-radius:50%; box-shadow:0 0 0 26px var(--orange), 0 0 0 52px var(--purple); opacity:.9; }
.eyebrow { color:var(--purple); font-size:11px; margin:0 0 15px; }.hero h1 { position:relative; z-index:1; margin:0; max-width:700px; font-size:48px; line-height:1.18; letter-spacing:-3px; }.hero h1 em { color:var(--purple); font-style:normal; text-shadow:3px 3px 0 var(--pink); }.intro { position:relative; z-index:1; max-width:400px; margin:18px 0 28px; line-height:1.7; font-family:"VT323", monospace; font-size:22px; }
.pixel-button { position:relative; z-index:1; display:inline-block; padding:15px 18px; background:var(--ink); color:#fff; text-decoration:none; box-shadow:5px 5px 0 var(--purple); transition:transform .15s,box-shadow .15s; }.pixel-button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--purple); }.pixel-button b { color:var(--cyan); font-size:18px; }
.hero-sticker { position:absolute; z-index:2; right:180px; bottom:68px; transform:rotate(10deg); width:100px; height:100px; display:grid; place-content:center; text-align:center; line-height:1.1; color:var(--ink); background:var(--orange); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); font-size:18px; }.hero-sticker small { font-size:10px; }
.ticker { height:36px; display:flex; align-items:center; overflow:hidden; white-space:nowrap; border-block:4px solid var(--ink); background:var(--purple); color:#fff; }.ticker div { animation:slide 18s linear infinite; } @keyframes slide { to { transform:translateX(-40%); } }
.section { padding:58px 48px; }.section-heading { display:flex; align-items:center; gap:14px; }.section-heading span { padding:5px; color:#fff; background:var(--purple); font-size:10px; }.section-heading h2 { margin:0; font-size:25px; letter-spacing:-2px; }.section-heading i { height:4px; flex:1; background:var(--ink); }.section-note,.feed-copy p { margin:13px 0 27px; font-family:"VT323", monospace; font-size:20px; }.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.game-card { display:flex; gap:18px; min-height:168px; padding:18px; color:var(--ink); text-decoration:none; border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); transition:transform .15s,box-shadow .15s; }.game-card:hover { transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink); }.purple { background:#cfc2ff; }.orange { background:#ffd39d; }.cartridge { width:118px; flex:0 0 118px; padding:9px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; background:var(--ink); border:4px solid #fff; box-shadow:0 0 0 4px var(--ink); }.purple .cartridge b { color:var(--pink); }.orange .cartridge b { color:var(--orange); }.cartridge span { font-size:16px; line-height:1.05; }.cartridge small { color:var(--cyan); font-size:8px; }.game-card h3 { margin:4px 0 10px; font-size:18px; }.game-card p { min-height:39px; margin:0; line-height:1.6; font-family:"VT323",monospace; font-size:18px; }.play { display:inline-block; margin-top:14px; color:var(--purple); font-size:10px; }.tiny-note { margin:25px 0 0; color:#5c577a; font-family:"VT323",monospace; font-size:17px; }.tiny-note code { padding:1px 3px; color:var(--ink); background:#f5dfe9; }
.feed { background:#f3ddff; border-top:4px solid var(--ink); }.feed-copy { display:flex; justify-content:space-between; align-items:baseline; }.feed-copy span { color:var(--purple); }.feed-copy b { font-size:18px; }.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.photo { position:relative; aspect-ratio:1; margin:0; overflow:hidden; border:3px solid var(--ink); background:var(--purple); }.photo img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(1.12) contrast(1.05); transition:transform .25s; }.photo:hover img { transform:scale(1.06); }.photo figcaption { position:absolute; inset:auto 0 0; padding:8px; display:flex; justify-content:space-between; color:#fff; background:#19163dd9; transform:translateY(100%); transition:transform .2s; font-size:9px; }.photo:hover figcaption { transform:none; }
footer { display:flex; justify-content:space-between; padding:20px 48px; color:#fff; background:var(--ink); font-size:9px; }
.upload-box { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 25px; padding:13px; border:3px dashed var(--purple); background:#fff8e8; }.upload-box label { padding:10px; color:#fff; background:var(--purple); cursor:pointer; font-size:10px; }.upload-box input { max-width:210px; font-family:"Silkscreen",monospace; font-size:9px; }.upload-box .pixel-button { padding:11px 14px; border:0; font-family:"Silkscreen",monospace; font-size:10px; cursor:pointer; }.upload-box span { color:var(--purple); font-size:10px; }.empty-feed { grid-column:1 / -1; margin:0; padding:28px; border:3px dashed var(--ink); text-align:center; background:#fff8e8; font-family:"VT323",monospace; font-size:21px; }
.rank-badge { position:absolute; top:8px; left:8px; z-index:1; padding:6px; color:var(--ink); background:var(--orange); border:2px solid var(--ink); font-size:8px; }.photo figcaption { transform:none; align-items:center; gap:5px; }.vote-button { padding:4px 6px; color:#fff; border:1px solid #fff; background:var(--purple); font-family:"Silkscreen",monospace; font-size:8px; cursor:pointer; }.vote-button:hover { background:var(--pink); }.vote-button:disabled { cursor:default; opacity:.6; }
@media (max-width:700px) { .site-shell { box-shadow:none; }.topbar,.section { padding-left:22px; padding-right:22px; }.topbar { height:64px; }.status { display:none; }.hero { min-height:450px; padding:60px 22px; }.hero h1 { font-size:34px; }.hero-sticker { right:38px; bottom:36px; }.game-grid { grid-template-columns:1fr; }.photo-grid { grid-template-columns:repeat(2,1fr); }.feed-copy { display:block; }.feed-copy p { margin-bottom:8px; } footer { gap:14px; padding:18px 22px; flex-direction:column; } }