@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  --font-display: 'Press Start 2P', monospace;
  --font-ui: 'VT323', monospace;
  --color-bg: #1a1a2e;
  --color-accent: #e94560;
  --color-gold: #f5c842;
  --color-green: #4ade80;
  --color-red: #ef4444;
  --color-blue: #60a5fa;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-ui), system-ui;
}

#gameContainer {
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5);
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

#scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
}

#ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

#ui-layer button, #ui-layer .deck-card {
  pointer-events: auto;
}

#hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

#hud-left, #hud-center, #hud-right {
  display: flex;
  align-items: center;
  gap: 1.5vw;
}

.hud-item {
  font-family: var(--font-display);
  font-size: clamp(8px, 1.2vw, 14px);
  color: #fff;
  text-shadow: 0 0 10px rgba(233,69,96,0.5);
  letter-spacing: 1px;
}

.hud-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5vh 0.8vw;
  border-radius: 4px;
  font-size: clamp(14px, 1.5vw, 20px);
  cursor: pointer;
  transition: all 0.2s;
}

.hud-btn:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.1);
}

#buildingDeck {
  position: absolute;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}

#deckCards {
  display: flex;
  gap: 0.8vw;
  padding: 1vh 1.5vw;
  background: rgba(0,0,0,0.75);
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.15);
}

.deck-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8vh 0.6vw;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 55px;
}

.deck-card:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-4px);
  border-color: var(--color-gold);
}

.deck-card.selected {
  background: rgba(233,69,96,0.3);
  border-color: var(--color-accent);
  transform: translateY(-6px);
  box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

.card-emoji {
  font-size: clamp(18px, 2.2vw, 30px);
  margin-bottom: 0.2vh;
}

.card-name {
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.1vw, 14px);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.card-category {
  font-family: var(--font-ui);
  font-size: clamp(8px, 0.9vw, 12px);
  text-align: center;
}

#scorePopup {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 36px);
  pointer-events: none;
  z-index: 10;
  text-shadow: 0 0 20px currentColor;
}

.score-positive { color: var(--color-green); }
.score-negative { color: var(--color-red); }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  z-index: 20;
  pointer-events: auto;
}

.overlay.hidden { display: none; }

.overlay-content {
  text-align: center;
  padding: 4vh 4vw;
  background: linear-gradient(135deg, rgba(26,26,46,0.95), rgba(22,33,62,0.95));
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(233,69,96,0.3), inset 0 0 40px rgba(0,0,0,0.3);
  max-width: 90vw;
}

.pixel-text {
  font-family: var(--font-display);
  color: var(--color-gold);
  font-size: clamp(16px, 3vw, 36px);
  text-shadow: 3px 3px 0px var(--color-accent), 0 0 20px rgba(245,200,66,0.5);
  margin: 0 0 2vh 0;
  line-height: 1.6;
}

.subtitle {
  font-family: var(--font-ui);
  color: #ccc;
  font-size: clamp(14px, 1.8vw, 22px);
  margin: 1vh 0;
  line-height: 1.4;
}

.controls-hint {
  text-align: left;
  margin: 2vh auto;
  padding: 1.5vh 2vw;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  max-width: 350px;
}

.controls-hint p {
  font-family: var(--font-ui);
  color: #aaa;
  font-size: clamp(12px, 1.3vw, 16px);
  margin: 0.5vh 0;
}

.arcade-btn {
  font-family: var(--font-display);
  font-size: clamp(10px, 1.3vw, 16px);
  color: #fff;
  background: linear-gradient(180deg, var(--color-accent) 0%, #c23152 100%);
  border: 2px solid #ff6b8a;
  padding: 1.5vh 3vw;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.2s;
  margin-top: 2vh;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

.arcade-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(233,69,96,0.6);
  background: linear-gradient(180deg, #ff5577 0%, var(--color-accent) 100%);
}

.arcade-btn:active { transform: scale(0.95); }

.pack-btn {
  font-size: clamp(8px, 1vw, 12px);
  padding: 1vh 2vw;
}

.pack-btn span {
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.1vw, 14px);
  opacity: 0.7;
}

#nextPackBtn {
  position: absolute;
  bottom: 12vh;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}

#nextPackBtn.hidden { display: none; }

#tooltip {
  position: absolute;
  padding: 1vh 1.2vw;
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  pointer-events: none;
  z-index: 15;
  max-width: 260px;
}

#tooltip.hidden { display: none; }

#tooltipName {
  font-family: var(--font-display);
  font-size: clamp(8px, 1vw, 12px);
  color: var(--color-gold);
  margin-bottom: 0.5vh;
}

#tooltipDesc {
  font-family: var(--font-ui);
  font-size: clamp(12px, 1.2vw, 16px);
  color: #ccc;
  margin-bottom: 0.5vh;
}

#tooltipScore {
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: bold;
}

.hidden { display: none !important; }

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-60px); }
}

.score-float {
  animation: floatUp 1.2s ease-out forwards;
}