:root {
  --nyan-gold: #ffd700;
  --nyan-pink: #ff66b2;
  --nyan-purple: #bc00ff;
  --glass: rgba(0, 0, 0, 0.7);
}

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

body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-color: #050505;
  color: #fff;
  overflow: hidden; height: 100vh;
}

#app {
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
}

.back-link {
  position: absolute; top: 15px; left: 15px; z-index: 100;
  background: var(--nyan-gold); color: #000;
  padding: 8px 15px; border-radius: 20px; font-weight: 900;
  text-decoration: none; font-size: 0.8rem;
}

.game-wrapper {
  flex: 1; display: flex; justify-content: center; align-items: center;
  gap: 20px; padding: 20px;
}

.canvas-container {
  position: relative; border: 4px solid var(--nyan-purple);
  box-shadow: 0 0 30px rgba(188, 0, 255, 0.4);
}

#tetris { background: #121212; display: block; }

.side-panel {
  display: flex; flex-direction: column; gap: 20px;
}

.stat-box, .next-box {
  background: var(--glass); padding: 15px;
  border-radius: 15px; border: 1px solid rgba(255,255,255,0.1);
  text-align: center; min-width: 100px;
}

.stat-box label, .next-box label {
  display: block; font-size: 0.7rem; font-weight: 900; color: var(--nyan-pink);
  margin-bottom: 5px;
}

#score, #level, #best, #lines, #side-run-gold {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--nyan-gold);
}

#next { width: 80px; height: 80px; }

.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: 10;
  backdrop-filter: blur(5px);
}

.overlay h2 { font-size: 2rem; margin-bottom: 14px; color: var(--nyan-purple); }

.overlay p {
  width: min(260px, calc(100% - 28px));
  margin: 0 auto 16px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
}

.overlay-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}

.overlay-stats span {
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: 8px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.45);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
}

#start-btn {
  background: var(--nyan-pink); color: #fff; border: none;
  padding: 12px 30px; border-radius: 50px; font-weight: 900;
  cursor: pointer; box-shadow: 0 0 20px var(--nyan-pink);
}

/* Mobile Controls */
.mobile-controls {
  display: flex; justify-content: space-around; align-items: center;
  padding: 20px; background: rgba(0,0,0,0.5);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.ctrl-btn {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--glass); border: 2px solid var(--nyan-purple);
  color: #fff; font-size: 1.5rem; font-weight: 900;
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 0 15px rgba(188, 0, 255, 0.3);
}

.ctrl-btn:active { background: var(--nyan-purple); transform: scale(0.9); }

.ctrl-group-v { display: flex; flex-direction: column; gap: 10px; }

.ctrl-btn.rotate { border-color: var(--nyan-gold); color: var(--nyan-gold); }
.ctrl-btn.drop { border-color: var(--nyan-pink); color: var(--nyan-pink); }
.ctrl-btn.hard { border-color: #0dc2ff; color: #0dc2ff; }

/* Mobile Adaptations */
@media (max-width: 600px) {
  .game-wrapper { flex-direction: column; gap: 10px; padding: 10px; }
  .side-panel { flex-direction: row; order: -1; width: 100%; justify-content: space-between; }
  .stat-box { min-width: 72px; padding: 10px 8px; }
  .side-panel.right { display: none; }
  #tetris { height: 60vh; }
  .mobile-controls { padding: 12px; }
  .ctrl-btn { width: 62px; height: 62px; }
}

.hidden { display: none !important; }


/* --- GLOBAL NYANTREPRENEUR OVERRIDES --- */
.back-link, .hub-btn {
  position: absolute !important; top: 15px !important; left: 15px !important; z-index: 9999 !important;
  background: rgba(18, 18, 18, 0.8) !important; color: #ffd700 !important;
  padding: 8px 16px !important; border-radius: 20px !important; font-weight: 800 !important;
  text-decoration: none !important; font-size: 0.8rem !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
  transition: all 0.2s ease !important;
}