@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); :root{ --bg-deep: #0c0a18; --bg-panel: #16122a; --bg-panel-2: #1d1733; --line: #3a3252; --gold: #ffc857; --gold-dim: #8a692f; --crystal: #6dfcf1; --magenta: #ff3e8c; --text: #f2ead2; --text-dim: #b7aecb; --font-display: 'Press Start 2P', monospace; --font-body: 'VT323', monospace; }
*{box-sizing: border-box}
html, body{margin:0; padding:0; background: var(--bg-deep); color: var(--text); font-family: var(--font-body); font-size: 19px; line-height: 1.5}
a{color: var(--crystal); text-decoration: none}
a:hover{color: var(--gold)}
img{max-width:100%; display:block}
button{font-family: inherit; cursor: pointer}
.crt{position: relative; min-height: 100vh; padding: 0; background: radial-gradient(ellipse at 50% -10%, #2a2150 0%, var(--bg-deep) 60%); overflow-x: hidden}
.crt::before{content:""; position: fixed; inset:0; pointer-events:none; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 2px, transparent 3px ); z-index: 9999; opacity:.5}
.crt::after{content:""; position: fixed; inset:0; pointer-events:none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); z-index: 9998}
.wrap{max-width: 980px; margin: 0 auto; padding: 20px}
.site-header{border-bottom: 2px solid var(--line); padding: 22px 0; background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent)}
.site-header .wrap{display:flex; align-items:center; justify-content: space-between; gap: 16px; flex-wrap: wrap}
.logo{font-family: var(--font-display); font-size: 18px; color: var(--gold); letter-spacing: 1px; display:flex; align-items:center; gap:10px; text-shadow: 0 0 10px rgba(255,200,87,0.5)}
.logo .blip{width:10px; height:10px; background: var(--crystal); display:inline-block; box-shadow: 0 0 8px var(--crystal); animation: blink 1.6s steps(2) infinite}
.studio-tag{font-size: 14px; color: var(--text-dim); letter-spacing: 1px}
.hero{padding: 56px 0 30px; text-align:center}
.hero .eyebrow{font-family: var(--font-display); font-size: 11px; color: var(--crystal); letter-spacing: 3px; margin-bottom: 18px; text-shadow: 0 0 8px rgba(109,252,241,.6)}
.glitch-title{font-family: var(--font-display); font-size: clamp(28px, 6vw, 54px); color: var(--text); position: relative; display:inline-block; margin: 0; text-shadow: 2px 0 var(--magenta), -2px 0 var(--crystal); animation: flicker 4.5s infinite}
.hero .sub{margin-top: 14px; color: var(--text-dim); font-size: 20px; max-width: 560px; margin-left:auto; margin-right:auto}
.section-label{font-family: var(--font-display); font-size: 13px; color: var(--gold); letter-spacing: 2px; margin: 0 0 18px; display:flex; align-items:center; gap: 10px}
.section-label::after{content:""; flex:1; height: 2px; background: repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 10px)}
.cart-grid{display:grid; gap: 26px; padding-bottom: 70px}
.cart-card{background: var(--bg-panel); border: 2px solid var(--line); border-radius: 4px; display:grid; grid-template-columns: 280px 1fr; overflow:hidden; position:relative; transition: border-color .2s, transform .15s}
.cart-card:hover{border-color: var(--gold); transform: translateY(-2px)}
.cart-card .art{background: var(--bg-panel-2); border-right: 2px solid var(--line)}
.cart-card .art img{width:100%; height:100%; object-fit:cover}
.cart-card .body{padding: 24px 26px; display:flex; flex-direction:column; gap: 10px}
.cart-card h2{font-family: var(--font-display); font-size: 20px; color: var(--gold); margin:0}
.tagline{color: var(--crystal); font-size: 17px; margin:0}
.desc{color: var(--text-dim); margin: 4px 0 8px}
.tag-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 6px}
.pill{font-size: 13px; border: 1px solid var(--line); color: var(--text-dim); padding: 3px 10px; border-radius: 20px; letter-spacing: .5px}
.btn{font-family: var(--font-display); font-size: 13px; display:inline-flex; align-items:center; gap:8px; background: var(--gold); color: #1a1308; border: none; padding: 12px 18px; border-radius: 3px; width: fit-content; box-shadow: 0 0 0 2px var(--gold-dim) inset; transition: 0.2s}
.btn:hover{background:#ffd573; color:#1a1308; transform: scale(0.97)}
.btn.ghost{background: transparent; color: var(--crystal); box-shadow: 0 0 0 2px var(--crystal) inset}
.btn.ghost:hover{background: rgba(109,252,241,0.08); color: var(--crystal)}
.btn.magenta{background: var(--magenta); color: #2a0414; box-shadow: 0 0 0 2px #a32258 inset}
.btn.magenta:hover{background:#ff66a3}
.detail-hero{padding: 46px 0 10px}
.back-link{font-size: 15px; color: var(--text-dim); display:inline-flex; gap:6px; margin-bottom: 18px}
.back-link:hover{color: var(--gold)}
.detail-title{font-family: var(--font-display); font-size: clamp(24px, 4.5vw, 38px); color: var(--gold); margin: 0 0 8px; text-shadow: 0 0 12px rgba(255,200,87,.35)}
.detail-tagline{color: var(--crystal); font-size: 20px; margin: 0 0 22px}
.detail-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 10px 0 50px; align-items:start}
.phone{border: 3px solid var(--line); border-radius: 28px; background: #000; padding: 14px 10px; width: 100%; max-width: 300px; margin: 0 auto; box-shadow: 0 0 0 6px var(--bg-panel), 0 0 30px rgba(109,252,241,0.08)}
.phone .notch{width: 70px; height: 8px; background: var(--line); border-radius: 6px; margin: 0 auto 10px}
.phone-screen{position: relative; border-radius: 14px; overflow: hidden; background: var(--bg-panel-2)}
.shot-track{display:flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none}
.shot-track::-webkit-scrollbar{display:none;display: none}
.shot-track img{scroll-snap-align: center; flex: 0 0 100%; aspect-ratio: 9/16; object-fit: cover;scroll-snap-align: center; flex: 0 0 100%; aspect-ratio: 16/9; object-fit: cover}
.phone-nav{display:flex; justify-content:space-between; align-items:center; margin-top: 12px; padding: 0 4px}
.phone-nav button{background: var(--bg-panel); border: 1px solid var(--line); color: var(--text); font-family: var(--font-display); font-size: 12px; width: 34px; height: 34px; border-radius: 50%}
.phone-nav button:hover{border-color: var(--gold); color: var(--gold)}
.dots{display:flex; gap:7px;display: flex; gap: 10px}
.dot{width:8px; height:8px; border-radius:50%; background: var(--line); transition: background .2s;width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: all 0.3s; cursor: pointer}
.dot.active{background: var(--crystal); box-shadow: 0 0 6px var(--crystal);background: var(--crystal); box-shadow: 0 0 12px var(--crystal); transform: scale(1.2)}
.desktop-frame{border: 8px solid var(--line); border-radius: 16px; background: #0a0a14; padding: 16px 20px 20px; width: 100%; max-width: 600px; margin: 0 auto; box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--line), 0 0 40px rgba(109,252,241,0.06); position: relative}
.desktop-frame::before{content: "✦"; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 14px; background: var(--bg-deep); padding: 0 12px}
.desktop-screen{position: relative; border-radius: 8px; overflow: hidden; background: var(--bg-panel-2); border: 2px solid var(--bg-panel)}
.desktop-nav{display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 0 6px}
.desktop-nav button{background: var(--bg-panel); border: 2px solid var(--line); color: var(--text); font-family: var(--font-display); font-size: 14px; width: 40px; height: 40px; border-radius: 8px; transition: all 0.2s}
.desktop-nav button:hover{border-color: var(--gold); color: var(--gold); background: var(--bg-panel-2)}
.video-frame{border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: #000; position: relative; aspect-ratio: 16/9}
.video-frame video, .video-frame iframe{width:100%; height:100%; display:block; border:none}
.controls-card{background: var(--bg-panel); border: 2px solid var(--line); border-radius: 6px; padding: 22px 24px; margin: 28px 0}
.controls-card h3{font-family: var(--font-display); font-size: 15px; color: var(--gold); margin: 0 0 16px}
.key-row{display:flex; align-items:center; gap: 16px; margin-bottom: 14px}
.key-row:last-child{margin-bottom:0}
.key{font-family: var(--font-display); font-size: 13px; background: var(--bg-panel-2); border: 1px solid var(--line); border-bottom: 3px solid var(--line); color: var(--crystal); padding: 8px 12px; border-radius: 4px; min-width: 42px; text-align:center}
.key-desc{color: var(--text-dim)}
.dl-row{display:flex; gap: 14px; flex-wrap: wrap; margin: 22px 0 8px}
.dl-card{flex:1; min-width: 200px; background: var(--bg-panel); border: 2px solid var(--line); border-radius: 6px; padding: 18px 20px; display:flex; flex-direction:column; gap:10px}
.dl-card .os{font-family: var(--font-display); font-size: 13px; color: var(--text)}
.dl-card .meta{font-size: 14px; color: var(--text-dim)}
.about-text{color: var(--text-dim); margin: 18px 0}
.about-text strong{color: var(--text)}
.feedback-public-wrap{max-width: 800px; margin: 0 auto; padding: 20px 20px 4px}
.feedback-public-header{text-align: center; margin-bottom: 16px}
.feedback-public-header h1{font-family: var(--font-display); font-size: 22px; color: var(--gold); margin: 0 0 4px}
.feedback-public-header p{color: var(--text-dim); font-size: 18px; margin: 0 0 6px}
.feedback-card{background: var(--bg-panel); border: 2px solid var(--line); border-radius: 8px; padding: 18px 22px; margin-bottom: 14px; transition: border-color 0.2s}
.feedback-card:hover{border-color: var(--gold-dim)}
.feedback-card .feedback-author{display: flex; align-items: center; gap: 12px; margin-bottom: 8px}
.feedback-card .feedback-avatar{width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line)}
.feedback-avatar-placeholder{background: var(--bg-panel-2); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-dim); width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0}
.feedback-card .feedback-name{font-family: var(--font-display); font-size: 14px; color: var(--text); margin-bottom: 2px}
.feedback-card .feedback-date{font-size: 13px; color: var(--text-dim); margin: 0}
.feedback-card .feedback-comment{font-size: 17px; color: var(--text-dim); line-height: 1.5; margin: 4px 0 0 0}
.feedback-empty{text-align: center; color: var(--text-dim); font-size: 18px; margin-bottom: 8px}
.feedback-submit-cta{text-align: center; margin-top: 24px; padding: 20px 20px 18px; background: var(--bg-panel); border: 2px solid var(--line); border-radius: 8px}
.feedback-submit-cta h3{font-family: var(--font-display); font-size: 16px; color: var(--gold); margin: 0 0 8px}
.feedback-submit-cta p{margin-bottom: 12px}
.donate-section{padding: 10px 0 60px}
.coin-machine{background: var(--bg-panel); border: 2px solid var(--line); border-radius: 8px; padding: 28px; display:grid; grid-template-columns: auto 1fr; gap: 26px; align-items:center}
.slot{width: 78px; height: 78px; border-radius: 50%; background: var(--bg-panel-2); border: 3px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; margin: 0 auto; position:relative}
.slot::after{content:""; width: 44px; height: 9px; background: var(--bg-deep); border-radius: 3px; box-shadow: inset 0 0 4px #000}
.coin-machine h3{font-family: var(--font-display); font-size: 15px; color: var(--gold); margin: 0 0 10px}
.btc-box{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 12px}
.btc-address{background: var(--bg-deep); border: 1px solid var(--line); color: var(--crystal); padding: 10px 14px; border-radius: 4px; font-size: 16px; word-break: break-all; flex: 1; min-width: 220px}
.copy-btn{font-family: var(--font-display); font-size: 12px; background: var(--crystal); color: #062a28; border: none; padding: 11px 14px; border-radius: 4px; white-space: nowrap}
.copy-btn:hover{background:#9bfff5}
.copy-btn.copied{background: var(--gold); color:#1a1308}
.contact-section{padding: 10px 0 50px}
.contact-grid{display:flex; gap: 16px; flex-wrap: wrap}
.contact-card{flex:1; min-width: 220px; background: var(--bg-panel); border: 2px solid var(--line); border-radius: 6px; padding: 20px 22px; display:flex; flex-direction:column; gap: 8px}
.contact-card .label{font-family: var(--font-display); font-size: 12px; color: var(--gold)}
.contact-card a{font-size: 18px}
.site-footer{border-top: 2px solid var(--line); padding: 24px 0 40px; text-align:center; color: var(--text-dim); font-size: 15px}
.site-footer .dev{color: var(--text-dim)}
.site-footer .dev a{color: var(--gold)}
.nav-links{display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; padding: 15px 30px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 30px; position: relative; animation: fadeInDown 0.5s ease-out}
.nav-links::before{content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.3}
.nav-link{display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 14px; font-family: var(--font-display); text-decoration: none; letter-spacing: 1px; padding: 8px 16px; border-radius: 4px; transition: all 0.3s ease; position: relative; text-transform: uppercase;font-family: var(--font-display); font-size: 11px; color: var(--text-dim); letter-spacing: 1px; padding: 6px 12px; border: 1px solid transparent; border-radius: 4px; transition: color .15s, border-color .15s}
.nav-link .nav-icon{font-size: 18px; transition: transform 0.3s ease}
.nav-link:hover{color: var(--gold); background: rgba(255, 200, 87, 0.08); transform: translateY(-2px); text-shadow: 0 0 20px rgba(255, 200, 87, 0.2);color: var(--gold); border-color: var(--line)}
.nav-link:hover .nav-icon{transform: scale(1.2) rotate(-5deg)}
.nav-link::after{content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--gold); transition: width 0.3s ease}
.nav-link:hover::after{width: 60%}
.nav-link.active{color: var(--gold);color: var(--crystal); border-color: var(--crystal); text-shadow: 0 0 8px rgba(109,252,241,.5)}
.nav-link.active::after{width: 60%}
.nav-links .nav-link:not(:last-child)::before{content: '✦'; position: absolute; right: -22px; color: var(--text-dim); font-size: 10px; opacity: 0.3}
.site-nav{display: flex; gap: 6px; align-items: center}
.log-tabs{display: flex; gap: 8px; margin: 0 0 32px; flex-wrap: wrap}
.log-tab{font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-dim); transition: color .15s, border-color .15s, background .15s}
.log-tab:hover{color: var(--gold); border-color: var(--gold-dim)}
.log-tab.active{color: var(--bg-deep); background: var(--crystal); border-color: var(--crystal); text-shadow: none}
.log-list{display: flex; flex-direction: column; gap: 22px; padding-bottom: 70px}
.log-card{background: var(--bg-panel); border: 2px solid var(--line); border-radius: 8px; padding: 26px 28px; transition: border-color .2s}
.log-card:hover{border-color: var(--gold-dim)}
.log-meta{display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px}
.log-type{font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; padding: 3px 9px; border-radius: 3px}
.tag-devlog{background: rgba(109,252,241,.12); border: 1px solid var(--crystal); color: var(--crystal)}
.tag-blog{background: rgba(255,200,87,.1); border: 1px solid var(--gold-dim); color: var(--gold)}
.log-game{font-size: 14px; color: var(--magenta)}
.log-game a{color: inherit}
.log-game a:hover{color: var(--gold)}
.log-date{font-size: 14px; color: var(--text-dim); margin-left: auto}
.log-title{font-family: var(--font-display); font-size: 14px; color: var(--text); margin: 0 0 10px; line-height: 1.5}
.log-title a{color: inherit}
.log-title a:hover{color: var(--crystal)}
.log-summary{color: var(--text-dim); margin: 0 0 18px; font-size: 18px}
.log-footer{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px}
.btn.ghost.sm{font-size: 12px; padding: 8px 16px; white-space: nowrap}
.post-hero{padding: 32px 0 20px}
.post-body{max-width: 680px; margin: 30px 0 0; font-size: 20px; line-height: 1.7; color: var(--text-dim)}
.post-body p{margin: 0 0 22px}
.post-body strong{color: var(--text)}
.post-body a{color: var(--crystal)}
.post-body a:hover{color: var(--gold)}
.post-nav{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0 70px; border-top: 2px solid var(--line); padding-top: 28px}
.post-nav-item{display: flex; flex-direction: column; gap: 6px}
.nav-label{font-family: var(--font-display); font-size: 10px; color: var(--text-dim); letter-spacing: 1px}
.post-nav-item a{color: var(--text); font-size: 17px; line-height: 1.4}
.post-nav-item a:hover{color: var(--crystal)}
.newsletter-form input{transition: border-color 0.3s}
.newsletter-form input:focus{border-color: var(--crystal); outline: none}
@keyframes blink{ 50%{ opacity:0; } }
@keyframes flicker{ 0%, 92%, 100% { text-shadow: 2px 0 var(--magenta), -2px 0 var(--crystal); } 93% { text-shadow: -3px 1px var(--magenta), 3px -1px var(--crystal); } 95% { text-shadow: 3px -1px var(--magenta), -3px 1px var(--crystal); opacity:.85; } 97% { text-shadow: 2px 0 var(--magenta), -2px 0 var(--crystal); } }
@media (max-width: 620px){ .cart-card{ grid-template-columns: 1fr; } .cart-card .art{ aspect-ratio: 16/9; border-right:none; border-bottom: 2px solid var(--line); } }
@media (max-width: 760px){ .detail-grid{ grid-template-columns: 1fr; } }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } .desktop-frame { max-width: 100%; } }
@media (max-width: 600px){ .coin-machine{ grid-template-columns: 1fr; text-align:center; } }
@media (max-width: 600px) { .nav-links { gap: 15px; padding: 12px 20px; flex-direction: column; } .nav-links .nav-link:not(:last-child)::before { display: none; } .nav-link { width: 100%; justify-content: center; padding: 10px; } .nav-link .nav-icon { font-size: 20px; } }
@media (prefers-color-scheme: dark) { .nav-links { background: rgba(12, 10, 24, 0.8); border-color: rgba(255, 255, 255, 0.05); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) { .post-nav { grid-template-columns: 1fr; } .log-date { margin-left: 0; } .log-footer { flex-direction: column; align-items: flex-start; } }
@media (max-width: 700px) { .wrap section .news-grid { grid-template-columns: 1fr !important; } }


@media (min-width: 769px) and (max-width: 1024px) {
    body {
        margin: 5px !important;
    }
}

@media (min-width: 1025px) {
    body {
        margin: 5px !important;
    }
}

/* Landscape and portrait orientations */
@media (orientation: portrait) {
    body {
        margin: 5px !important;
    }
}

@media (orientation: landscape) {
    body {
        margin: 5px !important;
    }
}

/* For devices with any display characteristics */
@media (any-pointer: coarse) {
    body {
        margin: 5px !important;
    }
}

@media (any-pointer: fine) {
    body {
        margin: 5px !important;
    }
}