/* Shinobytes Site Core Styles */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; background:#0d0f17; color:#d6dae5; line-height:1.55; }
img { max-width:100%; display:block; }
a { color:#6db8ff; text-decoration:none; }
a:hover,a:focus { text-decoration:none; }
.text-link { text-decoration:underline; }
.text-link:hover,.text-link:focus-visible { text-decoration:underline; }
h1,h2,h3,h4 { font-weight:600; line-height:1.2; margin:0 0 .6em; }
p { margin:0 0 1em; }
ul { margin:0 0 1em; padding-left:1.2em; }

/* Layout */
.site-header { position:fixed; top:0; left:0; right:0; backdrop-filter:blur(12px); background:rgba(13,15,23,.72); border-bottom:1px solid rgba(255,255,255,.06); z-index:60; display:flex; align-items:center; padding:.5rem clamp(.75rem,2.5vw,2rem); }
.site-header.sub { position:sticky; top:0; }
.logo-wrap { display:flex; align-items:center; gap:1rem; flex-grow:1; }
@media (max-width: 860px){
  .logo-wrap { justify-content:space-between; }
}
.logo { display:flex; align-items:center; gap:.6rem; font-weight:600; color:inherit; font-size:1.05rem; letter-spacing:.5px; }
.logo img { width:40px; height:40px; object-fit:cover; border-radius:8px; }
.nav { margin-left:auto; }
.nav ul { list-style:none; display:flex; gap:1.2rem; margin:0; padding:0; align-items:center; }
.nav a { position:relative; padding-bottom: 7px; line-height:1.1; }
.nav a:after { content:""; position:absolute; left:0; bottom:.25rem; height:2px; width:100%; background:linear-gradient(90deg,#6db8ff,#4de1a1); transform:scaleX(.12); transform-origin:left center; opacity:0; transition:transform .35s cubic-bezier(.4,.14,.3,1),opacity .35s; border-radius:2px; }
.nav a:hover:after,.nav a:focus-visible:after { transform:scaleX(1); opacity:1; }
.logo-wrap .nav-toggle { margin-left:auto; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:transparent; border:0; cursor:pointer; }
.nav-toggle span { width:26px; height:2px; background:#fff; display:block; transition:.4s; }

/* Hero */
.hero { position:relative; min-height:88vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:6rem 1rem 3rem; }
.hero .bg-media { position:absolute; inset:0; overflow:hidden; z-index:-2; }
.hero .bg-media img { width:100%; height:100%; object-fit:cover; filter:brightness(.4) saturate(1.2); }
.hero .bg-media .overlay { position:absolute; inset:0; background:radial-gradient(circle at center,rgba(20,25,40,.4),#0d0f17); }
.hero-inner { max-width:860px; }
.hero-logo-wrap { display:flex; justify-content:center; margin:0 0 2.8rem; }
.hero-logo { font-size:clamp(2.8rem,8vw,5.2rem); font-weight:700; letter-spacing:3px; position:relative; line-height:1; background:linear-gradient(120deg,#6db8ff,#4de1a1 55%,#6db8ff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 22px rgba(0,0,0,.55)); opacity:0; transform:translateY(30px) scale(.9); animation:heroLogoFade 1.4s cubic-bezier(.23,1,.32,1) .2s forwards; }
.hero-logo:before { content:""; position:absolute; inset:0; mix-blend-mode:overlay; opacity:0; animation:heroLogoGlow 2.4s ease .8s forwards; }
@keyframes heroLogoFade { 0% { opacity:0; transform:translateY(30px) scale(.9); letter-spacing:3px; } 55% { opacity:1; transform:translateY(0) scale(1.02); } 78% { transform:translateY(0) scale(.985); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes heroLogoGlow { 0% { opacity:0; } 40% { opacity:.55; } 100% { opacity:.15; } }
.lead { font-size:1.15rem; opacity:.88; }
.cta-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.scroll-indicator { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); font-size:.75rem; letter-spacing:2px; opacity:.45; animation:float 3s ease-in-out infinite; }
@keyframes float { 50% { transform:translate(-50%,8px); } }

/* Sections */
.section { padding:5.5rem 1.25rem 4.5rem; max-width:1320px; margin-inline:auto; }
.section.alt { background:linear-gradient(160deg,#121722,#0d0f17 60%); border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }
body.theme-light .section.alt { background:#eef3f9; }
.section-head { text-align:center; max-width:820px; margin:0 auto 3rem; }
.section-head p { opacity:.8; }

/* Game Grid */
.game-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.game-card { background:#161b27; border:1px solid rgba(255,255,255,.06); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; position:relative; box-shadow:0 4px 18px -6px rgba(0,0,0,.6); }
.game-card .card-media { aspect-ratio: 16 / 9; overflow:hidden; }
.game-card img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s ease; }
.game-card:hover img { transform:scale(1.08); }
.game-card .card-body { padding:1.1rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.75rem; }
.game-card h3 { margin:0; font-size:1.4rem; }
.game-card .desc { font-size:.9rem; opacity:.85; }
.tag { display:inline-block; font-size:.65rem; text-transform:uppercase; letter-spacing:1px; padding:.35rem .55rem; border-radius:24px; background:#243045; color:#9fb7d9; margin-top:.25rem; }
.tag.released { background:#123e2b; color:#4de1a1; }
.tag.in-dev { background:#3d2b07; color:#f7b955; }
.features { list-style: none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; font-size:.75rem; opacity:.85; }
.actions { margin-top:auto; display:flex; gap:.65rem; flex-wrap:wrap; }

/* Pillars */
.pillars { display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.pillar { background:#161b27; padding:1.4rem 1.35rem 1.55rem; border:1px solid rgba(255,255,255,.07); border-radius:16px; position:relative; overflow:hidden; }
.pillar:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(120,170,255,.12),transparent 65%); opacity:0; transition:.6s; pointer-events:none; }
.pillar:hover:before { opacity:1; }

/* Timeline */
.timeline { list-style:none; margin:0; padding:0; position:relative; }
.timeline:before { content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:linear-gradient(#6db8ff,#4de1a1); opacity:.4; }
.timeline li { position:relative; margin:0 0 1.6rem 0; padding-left:2.4rem; }
.timeline li:before { content:""; position:absolute; left:1px; top:.2rem; width:18px; height:18px; border-radius:50%; background:linear-gradient(145deg,#6db8ff,#4de1a1); box-shadow:0 0 0 4px #0d111a; }
.timeline .time { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; opacity:.65; margin-bottom:.15rem; }
.timeline.compact:before { background:rgba(255,255,255,.15); }
.timeline.compact li:before { background:#6db8ff; }

/* Contact */
.contact-panel { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start; }
.contact-card { background:#161b27; padding:1.6rem 1.4rem; border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.contact-form { background:#161b27; padding:1.6rem 1.4rem; border:1px solid rgba(255,255,255,.08); border-radius:16px; display:flex; flex-direction:column; gap:1rem; }
.contact-form .row { display:flex; gap:1rem; flex-wrap:wrap; }
.contact-form label { display:flex; flex-direction:column; gap:.35rem; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; opacity:.8; }
.contact-form input,.contact-form textarea { background:#0f141d; color:#fff; border:1px solid #283448; border-radius:10px; padding:.7rem .85rem; font:inherit; resize:vertical; }
.form-hint { font-size:.65rem; opacity:.55; margin:0; }

/* Footer */
.site-footer { background:#0a0d13; padding:3.3rem 1.25rem 2rem; border-top:1px solid rgba(255,255,255,.06); }
.footer-grid { max-width:1260px; margin:0 auto 2.4rem; display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.footer-grid h4 { margin-top:0; font-size:.9rem; letter-spacing:1px; text-transform:uppercase; opacity:.7; }
.foot-base { max-width:1260px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.7rem; opacity:.7; }

/* Detail Pages */
.detail-page { padding:7rem 1.25rem 4rem; max-width:980px; margin:0 auto; }
.game-detail header { text-align:center; margin-bottom:2rem; }
.game-detail .media-hero { border-radius:20px; overflow:hidden; margin:0 auto 2.5rem; max-width:1000px; box-shadow:0 10px 45px -14px rgba(0,0,0,.55); }
.game-detail section { margin-bottom:2.2rem; }
.feature-list { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.dev-badge { display:inline-block; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; padding:.35rem .6rem; background:#2d2740; color:#c6b6ff; border-radius:1rem; margin-top:.5rem; }

/* Buttons */
.btn,button { --btn-bg:#243045; --btn-color:#e1e8f5; --btn-bg-hover:#2e3c53; --btn-focus:0 0 0 3px rgba(109,184,255,.35); font:inherit; cursor:pointer; display:inline-flex; gap:.5rem; align-items:center; justify-content:center; text-decoration:none; padding:.75rem 1.25rem; border-radius:14px; border:1px solid transparent; background:var(--btn-bg); color:var(--btn-color); font-weight:500; line-height:1.1; transition:.25s; }
.btn.primary { --btn-bg:linear-gradient(120deg,#4e9fff,#6db8ff); --btn-bg-hover:linear-gradient(120deg,#58b3ff,#84c8ff); color:#061522; }
.btn.outline { background:transparent; border-color:#2c3a52; }
.btn.outline:hover { background:#1c2736; }
.btn.small { padding:.55rem .9rem; font-size:.75rem; }
.btn.full { width:100%; }
.ghost { background:transparent; border:1px solid rgba(255,255,255,.18); color:#c9d5e6; }
.ghost:hover { background:#192233; }
button:focus-visible,.btn:focus-visible { outline:none; box-shadow:var(--btn-focus); }

/* Animations */
[data-animate] { opacity:0; transform:translateY(24px); transition: .8s cubic-bezier(.23,1,.32,1); }
[data-animate].in { opacity:1; transform:translateY(0); }

/* Utilities */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.small { font-size:.75rem; }
.text-logo{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;font-weight:600;letter-spacing:1px;background:linear-gradient(90deg,#6db8ff,#4de1a1);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

/* Responsive */
@media (max-width: 860px) {
  .nav-toggle { display:flex; }
  .nav { position:absolute; top:100%; right:1rem; background:#131925; padding:1rem 1.2rem; border:1px solid rgba(255,255,255,.08); border-radius:14px; min-width:200px; box-shadow:0 10px 40px -10px rgba(0,0,0,.55); opacity:0; transform:translateY(-10px); pointer-events:none; transition:.4s; }
  .nav.open { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav ul { flex-direction:column; align-items:flex-start; }
  .section { padding:5rem 1rem 4rem; }
  .game-detail { padding-top:1rem; }
}

/* Light theme removed – dark-only design */

/* Scrollbar (optional) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0d1118; }
::-webkit-scrollbar-thumb { background:#202b3b; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#2a3a50; }