:root {
  --neon-green: #00ff66;
  --neon-gold: #ffd700;
  --bg-dark: #121212;
  --card-width: 50px;
  --card-height: 75px;
}

@media (min-width: 400px) {
  :root { --card-width: 60px; --card-height: 90px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; touch-action: manipulation; }

body {
  font-family: 'Outfit', 'M PLUS Rounded 1c', sans-serif;
  background-color: var(--bg-dark); color: #fff;
  height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center;
}

#app {
  width: 100%; height: 100%; max-width: 500px;
  background: url('bg.png') center/cover no-repeat;
  display: flex; flex-direction: column; position: relative;
}

#app::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(18, 18, 18, 0.75); backdrop-filter: blur(8px); z-index: 1;
}

header, #table, .overlay { position: relative; z-index: 2; }

/* HUB Button */
.hub-btn { z-index: 100 !important; }

header {
  padding: 15px; margin-top: 40px; text-align: center;
}

.logo { font-size: 2rem; font-weight: 900; text-shadow: 0 0 15px var(--neon-gold); margin-bottom: 15px; }
.logo span { color: var(--neon-green); }

.stats { display: flex; justify-content: center; gap: 20px; }
.stat-box {
  background: rgba(0, 255, 102, 0.1); border: 1px solid var(--neon-green); padding: 5px 20px;
  border-radius: 10px; text-align: center; font-weight: 800; font-size: 0.8rem; color: var(--neon-green);
}
.stat-box span { font-size: 1.5rem; display: block; color: #fff; text-shadow: 0 0 10px #fff; }

#table {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 20px;
}

#peaks {
  position: relative; height: calc(var(--card-height) * 4); width: 100%;
}

.card {
  width: var(--card-width); height: var(--card-height);
  position: absolute; border-radius: 6px; box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 900;
  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease;
  background: #fff; color: #000; border: 1px solid #ccc; cursor: pointer;
}

.card.face-down {
  background: repeating-linear-gradient(45deg, #111, #111 10px, #222 10px, #222 20px);
  border: 1px solid var(--neon-gold); color: transparent; cursor: default;
}

.card.red { color: #ff0033; }
.card.black { color: #000; }

.card.glow { box-shadow: 0 0 20px var(--neon-gold); transform: translateY(-5px); z-index: 50 !important; }

.deck-area {
  display: flex; justify-content: center; gap: 40px; margin-bottom: 30px;
}

.card-stack {
  width: var(--card-width); height: var(--card-height);
  border: 2px dashed rgba(255, 255, 255, 0.3); border-radius: 6px; position: relative;
}

#deck {
  background: repeating-linear-gradient(45deg, #111, #111 10px, #222 10px, #222 20px);
  border: 1px solid var(--neon-gold); cursor: pointer; display: flex; justify-content: center; align-items: center;
  box-shadow: 0 0 15px rgba(255,215,0,0.3);
}

.deck-count {
  background: var(--neon-green); color: #000; padding: 2px 8px; border-radius: 10px;
  font-size: 0.8rem; font-weight: 900; position: absolute; bottom: -10px; right: -10px;
}

.overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 50; backdrop-filter: blur(5px); text-align: center;
}
#end-title { font-size: 3rem; color: var(--neon-gold); margin-bottom: 10px; text-shadow: 0 0 20px var(--neon-gold); }
#end-desc { margin-bottom: 30px; font-weight: 800; font-size: 1.2rem; }
#retry-btn { background: #fff; color: #000; border: none; padding: 15px 40px; border-radius: 30px; font-weight: 900; font-size: 1.2rem; cursor: pointer; box-shadow: 0 0 15px rgba(255,255,255,0.5); }
.hidden { display: none !important; }