@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* { box-sizing:border-box; margin:0; padding:0; }
body { background:#000 url('/tumblr_md5kaonzyA1reuwduo1_500.gif') repeat; color:#fff; font-family:Arial, sans-serif; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:1000; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,0,.035) 2px,rgba(0,255,0,.035) 4px); }
#ng-container { max-width:1200px; margin:auto; padding:20px; }
header { text-align:center; margin-bottom:30px; }
#logo-container { margin-bottom:20px; position:relative; }
#tank-logo { width:180px; height:100px; margin:auto; position:relative; }
.tank-treads { animation:tread-move 1s linear infinite; } @keyframes tread-move { to { transform:translateX(-10px); } }
.tank-cannon { position:absolute; top:22px; left:85px; width:50px; height:8px; background:linear-gradient(90deg,#444,#666,#444); box-shadow:0 0 5px #ff8a00; transform:rotate(0); transform-origin:left center; transition:transform .3s; }.tank-cannon:hover { transform:rotate(-20deg); }
h1 { color:#ff8a00; font-size:clamp(2rem,6vw,3rem); margin-top:10px; letter-spacing:4px; text-shadow:0 0 10px #ff4500,0 0 20px #ff4500; }
.flame-text { color:#ff0; font-size:1.5rem; margin:10px 0; text-shadow:0 0 5px #f00,0 0 10px #f00; }
.marquee-text { background:#222; padding:5px; border:1px solid #ff8a00; color:#0f0; font:bold 14px monospace; text-shadow:0 0 10px #0f0; }
.decentralized-tag { display:inline-block; margin-top:10px; padding:5px 10px; color:#0f0; background:#111; border:1px solid #0f0; font:bold 12px monospace; letter-spacing:1px; text-transform:uppercase; box-shadow:0 0 8px rgba(0,255,0,.45); }
#nav-menu { display:flex; justify-content:center; background:#333; border:2px solid #ff8a00; border-radius:5px; box-shadow:0 0 10px #ff4500; }
.nav-item { color:#fff; text-decoration:none; padding:10px 20px; font-weight:bold; }.nav-item:hover,.nav-item.active { background:#ff8a00; color:#000; }
.section { position:relative; background:rgba(0,0,0,.78); border:2px solid #ff8a00; border-radius:8px; padding:20px; margin-bottom:30px; box-shadow:0 0 15px #ff4500; }
h2 { color:#ff8a00; border-bottom:2px solid #ff8a00; padding-bottom:10px; margin-bottom:20px; text-shadow:0 0 5px #ff4500; }
.featured-game-container { display:flex; justify-content:center; min-height:400px; }.featured-game-container iframe { max-width:100%; border:3px solid #666; background:#111; }
#featured-game-display { width:800px; max-width:100%; min-height:400px; display:flex; justify-content:center; align-items:center; background:#111; border:3px solid #666; overflow:hidden; }
.loading-spinner { width:40px; height:40px; border:4px solid transparent; border-top-color:#ff8a00; border-right-color:#f0f; border-bottom-color:#0ff; border-left-color:#ff0; border-radius:50%; animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }.filter-btn,.pagination button,.submit-btn,.random-game-btn { background:#333; color:#fff; border:1px solid #ff8a00; padding:7px 15px; border-radius:4px; cursor:pointer; }.filter-btn:hover,.filter-btn.active,.pagination button:hover,.submit-btn:hover,.random-game-btn:hover { background:#ff8a00; color:#000; box-shadow:0 0 10px #ff4500; }.filter-btn:disabled,.pagination button:disabled { opacity:.45; cursor:not-allowed; }.random-game-btn { margin-left:auto; background:#5b164e; font-weight:bold; }
.games-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; margin-bottom:20px; }.game-card { background:#222; border:2px solid #666; border-radius:8px; overflow:hidden; transition:.25s; cursor:pointer; }.game-card:hover { transform:translateY(-4px); border-color:#ff8a00; box-shadow:0 0 15px #ff4500; }.game-card img { display:block; width:100%; height:150px; object-fit:cover; }.game-info { padding:12px; }.game-info h3 { color:#ff8a00; font-size:1rem; margin-bottom:8px; }.game-info p { color:#aaa; font-size:.85rem; margin:4px 0; }.game-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }.tag { color:#0f0; background:#111; padding:3px 6px; font:11px monospace; }.game-rating { color:#ff0; float:right; }.pagination { display:flex; justify-content:center; align-items:center; gap:15px; margin-top:20px; }
#submission-section .form-group { margin-bottom:15px; }#submission-section label { margin-right:18px; }#game-url { width:min(100%,500px); padding:10px; background:#111; color:#fff; border:1px solid #666; }.submit-btn { background:#ff8a00; color:#000; font-weight:bold; }
footer { text-align:center; padding:20px; background:rgba(0,0,0,.8); border-top:2px solid #ff8a00; }.footer-content { color:#aaa; line-height:1.8; }.footer-content a { color:#ff8a00; }.secret-note { color:#555; font-size:.8rem; }
.modal { display:none; position:fixed; z-index:100; inset:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,.92); }.modal-content { position:relative; background:#222; margin:4% auto; padding:20px; border:3px solid #ff8a00; width:90%; max-width:900px; box-shadow:0 0 30px #ff4500; }.close-modal { position:absolute; top:8px; right:20px; color:#aaa; font-size:30px; cursor:pointer; }.close-modal:hover { color:#ff8a00; }#modal-game-title { margin-top:10px; }#modal-game-container { display:flex; justify-content:center; align-items:center; min-height:400px; background:#111; }#modal-game-container iframe { max-width:100%; border:0; }
@media(max-width:600px) { #ng-container { padding:10px; }.nav-item { padding:10px 8px; font-size:12px; }.flame-text { font-size:1.1rem; }.games-grid { grid-template-columns:1fr; }.game-card img { height:auto; }.featured-game-container { min-height:260px; } }