:root{
--bg:#0b0d10; --panel:#111419; --muted:#8a93a6; --text:#e9eefc; --brand:#7aa2ff; --brand2:#c084fc; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
--radius:18px; --radius-sm:12px; --shadow:0 10px 30px rgba(0,0,0,.35);
}

body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:inherit; text-decoration:none}
input {display: none; }
input[type="text"] { display: inline; }








.container{max-width:1200px;margin:0 auto;padding:20px}
header{position:sticky;top:0;background:rgba(14,17,23,.6);backdrop-filter:saturate(130%) blur(8px);border-bottom:1px solid rgba(122,162,255,.15);z-index:5}
.nav{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--shadow)}
.brand h1{font-size:18px;letter-spacing:.3px;margin:0}
.navlinks{display:flex;gap:16px;align-items:center}
.btn, button{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(122,162,255,.25);background:linear-gradient(180deg,#192034,#121725);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}
.btn:hover,button:hover{transform:translateY(-1px);border-color:rgba(122,162,255,.5); background:green}

.screenshot_img{width:14%; border:1px solid black; float:left}

/* New shot enters */
.screenshot_img.new {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 3s ease, transform 1s ease;
}
.screenshot_img.new.show {
  opacity: 1;
  transform: scale(1);
}


.featured_img{width:19%; border:1px solid black; float:left}
.featured_img:hover{transform:translateY(-1px)}

/* GAME */
#heroImageCard img{max-height:500px; width:auto}
.wrap{padding-top:10px; width:80%; max-width:800px; margin:auto }
.shell{background:linear-gradient(180deg,#101626,#0d1220); border-radius:18px}
.header{padding:14px 18px; border-bottom:1px solid var(--border); text-align:center}
.title{ font-weight:600; }
.chat{}
.bubble{margin-top: 10px; text-align: left; padding:15px}
.bubble.user{text-transform: uppercase;}
.bubble.sys{}
.bubble.sys.faded{color:#7e879d}
.bubble.sys.fresh{font-size:larger}
.bubble.sys.centered{text-align:center}
.image-card{position: relative}
.image-card img{height: auto;margin:auto; display: block; width: 80%; border-radius:14px; border:1px solid var(--border); }
.image-card .overlay {position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);}
    
#initOverlay {z-index:2; position: absolute; top: 50%; left: 50%;}
#initOverlay.hidden { display:none; }
.spinner.large { width:48px; height:48px}
.composer-spinner { margin-top:.5rem; min-height:1.5rem; }
.composer-spinner .spinner { vertical-align:middle; }

.hint.alt { outline:1px dashed currentColor; opacity:.9; }
.hidden { display:none !important; }

.image-card .overlay.hidden {display: none;}
.composer{ border-top:1px solid var(--border); padding:12px; background:linear-gradient(180deg,#0f1422,#0b0f1a); position:sticky; bottom:0 }
.row{ display:flex; gap:10px; align-items:center }
.row input[type=text]{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#0b0f19; color:var(--text); }
.row button{ border:1px solid var(--border); background:linear-gradient(180deg,#192034,#121725); color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer }
.hints{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; justify-content: center;}
.hint{ border:1px solid var(--border); background:linear-gradient(180deg,#253b7b,#5d7ab7); padding:8px 12px; border-radius:999px; cursor:pointer; font-size:14px }
.spinner{ display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) }}

#loadingSpinner {position: absolute;width: 60px;height: 60px;border: 6px solid rgba(255,255,255,0.3);border-top-color: #fff;border-radius: 50%;animation: spin1 1s linear infinite;}
@keyframes spin1 {to { transform: rotate(360deg); }}.status{ color:var(--muted); font-size:13px; margin-left:8px }

/* Hero */
.hero{display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;align-items:stretch;padding:28px 0}
.hero .left{padding:26px;border:1px solid rgba(122,162,255,.2);background:radial-gradient(1200px 400px at 0% -10%,rgba(122,162,255,.08),transparent 60%),linear-gradient(180deg,#121725,#0e131f);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero h2{font-size:34px;margin:0 0 10px}
.sub{color:var(--muted);margin-bottom:20px}
.stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.stat{background:#0b0f19;border:1px solid rgba(122,162,255,.12);padding:10px 12px;border-radius:12px}

/* Upload card */
.uploader {
  padding: 20px;
  border: 1px dashed rgba(122,162,255,.35);
  border-radius: 16px;
  background: linear-gradient(180deg,#1a420c,#006521);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 280px;
  transition: transform 0.15s ease, box-shadow 0.15s ease; /* include box-shadow in transition */
  box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,0.2)); /* ✅ semicolon added */
  cursor: pointer; /* makes hover feel interactive */
}

.uploader:hover {
  transform: translateY(-2px) translateX(1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.uploader:active {
  transform: translateY(1px) translateX(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.uploader .drag {
  border-color: var(--brand);
}


.uploader .hint1{color:var(--muted)}
.uploader .or{opacity:.7}

/* Sections */
.section{margin:34px 0 16px}
.section h3{margin:0 0 10px;font-size:20px}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid rgba(122,162,255,.25);padding:8px 12px;border-radius:999px;color:#c7d2fe;cursor:pointer}
.chip.active{background:linear-gradient(180deg,#1c2440,#161b2a);border-color:rgba(122,162,255,.6)}
.search{display:flex;gap:8px;align-items:center}
.search input{background:#0b0f19;border:1px solid rgba(122,162,255,.2);color:var(--text);padding:10px 12px;border-radius:12px;min-width:220px}

/* Card grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 3;background:linear-gradient(180deg,#101522,#0c1018);border:1px solid rgba(122,162,255,.18);border-radius:16px;overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(122,162,255,.35)}
.cover{position:relative;height:180px;background:#0a0a0a}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;top:10px;left:10px;background:rgba(17,20,25,.8);border:1px solid rgba(122,162,255,.35);padding:6px 10px;border-radius:999px;font-size:12px}
.content{padding:14px}
.title{font-weight:600}
.meta{margin-top:10px;color:var(--muted);font-size:13px}
.btn-play{margin:auto; text-align:center; display:block; margin-top:12px; width:80%; border:1px solid rgba(122,162,255,.25);background:linear-gradient(180deg,#192034,#121725);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}
.btn-play:hover{background:green; border-color:rgba(122,162,255,.5)}



/* Footer */
footer{margin-top:50px;padding:30px 0;color:var(--muted);border-top:1px solid rgba(122,162,255,.12)}

/* Responsive */
@media (max-width:1100px){
	.hero{grid-template-columns:1fr}
	.card{grid-column:span 4}
}
@media (max-width:800px){
	.grid{gap:12px}
	.card{grid-column:span 6}
	.hero h2{font-size:28px}
	.screenshot_img{width:13%}
	}
@media (max-width:520px){
	.card{grid-column:span 12}
	}