/* S4leeh — game.css */

:root {
  --gold:     #D4AF37;
  --gold-d:   rgba(212,175,55,.28);
  --gold-g:   rgba(212,175,55,.10);
  --gold-b:   rgba(212,175,55,.06);
  --bg:       #0a0909;
  --glass:    rgba(8,7,9,.78);
  --border:   rgba(255,255,255,.07);
  --border-g: rgba(212,175,55,.22);
  --text:     #F0EFEF;
  --t2:       rgba(240,239,239,.55);
  --t3:       rgba(240,239,239,.28);
  --blur:     blur(18px);
  --blur-h:   blur(28px);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html, body {
  height:100%; overflow:hidden;
  font-family:'Cairo',sans-serif;
  background:var(--bg); color:var(--text);
  touch-action:none; user-select:none; -webkit-user-select:none;
}

/* BG layers */
#bg-layer    { position:fixed; inset:0; z-index:0; background:url('../img/wmremove-transformed.png') center/cover no-repeat; }
#bg-vignette { position:fixed; inset:0; z-index:1; background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.2) 0%, rgba(0,0,0,.85) 70%), linear-gradient(to bottom, rgba(8,7,9,.55) 0%, rgba(8,7,9,.92) 100%); }
#bg-left-mask  { position:fixed; top:0; left:0;  bottom:0; width:38%; z-index:2; background:linear-gradient(to right, rgba(8,7,9,.95) 0%, transparent 100%); }
#bg-right-mask { position:fixed; top:0; right:0; bottom:0; width:38%; z-index:2; background:linear-gradient(to left,  rgba(8,7,9,.95) 0%, transparent 100%); }

/* Scrollbar */
::-webkit-scrollbar       { width:3px; }
::-webkit-scrollbar-thumb { background:var(--gold-d); border-radius:99px; }
::-webkit-scrollbar-track { background:transparent; }

/* Glass panel */
.panel {
  background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:18px;
  transition:border-color .2s;
}

/* Gold divider label */
.g-label {
  font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t3); display:flex; align-items:center; gap:.4rem;
}
.g-label::after { content:''; flex:1; height:1px; background:var(--border); }

/* Start button */
#startBtn {
  position:relative; overflow:hidden; cursor:pointer;
  background:linear-gradient(135deg,#e8c940 0%,var(--gold) 50%,#b8902a 100%);
  color:#0a0909; border-radius:16px; border:none;
  font-family:'Cairo',sans-serif; font-weight:900;
  box-shadow:0 8px 0 #6b5210, 0 20px 40px rgba(0,0,0,.55), 0 0 60px rgba(212,175,55,.2);
  transition:transform .09s, box-shadow .09s;
  touch-action:manipulation;
}
#startBtn:active {
  transform:translateY(8px);
  box-shadow:0 0 0 #6b5210, 0 4px 12px rgba(0,0,0,.4), 0 0 20px rgba(212,175,55,.1);
}
#startBtn .shimmer {
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-100%);
}
#startBtn:hover .shimmer { animation:shimmer 1.5s infinite; }
@keyframes shimmer { to { transform:translateX(150%); } }

/* Logo float */
#logoWrap {
  position:relative;
  filter:drop-shadow(0 0 24px rgba(212,175,55,.35));
  animation:logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

/* Leaderboard rows */
.lb-row {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .6rem; border-radius:10px;
  background:rgba(255,255,255,.025);
  border:1px solid transparent;
  transition:border-color .15s, background .15s;
  font-size:.72rem;
}
.lb-row.rank-1 { border-color:rgba(212,175,55,.25); background:rgba(212,175,55,.06); }
.lb-row.rank-2 { border-color:rgba(200,200,200,.12); }
.lb-row.rank-3 { border-color:rgba(205,127,50,.14); }
.lb-row:hover  { border-color:var(--gold-d); background:rgba(212,175,55,.05); }

.medal-1 { color:#D4AF37; font-weight:900; font-size:.8rem; }
.medal-2 { color:rgba(200,200,200,.8); font-weight:900; font-size:.8rem; }
.medal-3 { color:#cd7f32; font-weight:900; font-size:.8rem; }

/* Quest progress bar */
.qbar      { height:3px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.qbar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),#e8c940); transition:width .5s ease; }

/* Game interface */
#game-interface {
  position:fixed; inset:0; z-index:80;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  background:var(--bg);
  gap:12px; padding:8px;
}

canvas {
  image-rendering:pixelated;
  border:1px solid var(--gold-d);
  border-radius:14px;
  box-shadow:0 0 60px rgba(0,0,0,.9), 0 0 30px rgba(212,175,55,.06);
  display:block; max-width:100%;
}

.hud-box {
  background:rgba(8,7,9,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-g); border-radius:12px;
  padding:.45rem 1rem;
}

/* Game over overlay */
#msg-overlay {
  position:absolute; inset:0; z-index:90;
  display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:2rem;
  background:rgba(8,7,9,.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}

/* Mobile jump button */
#mobileJump {
  display:none;
  position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:85;
  width:72px; height:72px; border-radius:50%;
  background:rgba(212,175,55,.12);
  border:1.5px solid var(--gold-d);
  align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:0 0 20px rgba(212,175,55,.12);
  transition:background .1s, transform .1s;
  touch-action:manipulation; cursor:pointer;
}
#mobileJump:active { background:rgba(212,175,55,.28); transform:translateX(-50%) scale(.91); }

/* Back link */
.back-link {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:700; text-decoration:none;
  color:var(--t3); background:rgba(255,255,255,.04);
  border:1px solid var(--border); padding:.3rem .85rem; border-radius:99px;
  transition:color .15s, border-color .15s;
}
.back-link:hover { color:var(--gold); border-color:var(--gold-d); }

/* Chip + live dot */
.chip {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.18rem .55rem; border-radius:99px; font-size:.62rem; font-weight:700;
  background:var(--gold-b); border:1px solid var(--gold-d); color:var(--gold);
}
.dot-live {
  width:6px; height:6px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 6px rgba(74,222,128,.7);
  animation:dotpulse 1.6s ease-in-out infinite;
}
@keyframes dotpulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Responsive */
@media (max-width:640px) {
  #bg-left-mask, #bg-right-mask { display:none; }
  #mobileJump { display:flex; }
}
@media (prefers-reduced-motion:reduce) {
  #logoWrap, #startBtn .shimmer, .dot-live { animation:none!important; }
  #startBtn:active { transform:none; }
}