/* ═══════════════════════════════════════════════
   THEME.CSS
   Egyptian visual styling: intro screen, cards,
   buttons, modals. Colors and textures live here.
   ═══════════════════════════════════════════════ */

/*  
   INTRO SCREEN
     */

#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 500;           /* Above everything while visible */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Layered radial gradients give a warm torch-glow feel */
  background:
    radial-gradient(ellipse at 50% 0%,   #2e1c06 0%, transparent 65%),
    radial-gradient(ellipse at 20% 100%, #1a0d03 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, #0d0804 0%, transparent 55%),
    #0a0806;
}

/* Particle canvas behind the intro text */
#intro-particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Centered content card */
#intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 32px;
  text-align: center;
  max-width: 600px;
  width: 90%;
}

/* Small decorative hieroglyph strip */
.hieroglyph-deco {
  font-size: 1.3rem;
  letter-spacing: 10px;
  color: var(--gold-dim);
}

/* Large animated ankh */
.intro-ankh {
  font-size: 5rem;
  color: var(--gold);
  filter: drop-shadow(0 0 20px var(--gold-glow));
}

/* Main title on intro screen */
.intro-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  color: var(--gold-light);
  text-shadow: 0 0 30px var(--gold-glow), 0 0 60px rgba(212,175,55,0.2);
  letter-spacing: 3px;
}

/* Italic tagline */
.intro-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--sand);
  margin-top: -8px;
}

/* Thin horizontal gold line */
.intro-divider {
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

/* Keyboard hints at the bottom */
.intro-hint {
  font-size: 0.7rem;
  color: var(--gold-dim);
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Big "Enter" button — extends .btn-egypt */
.btn-enter-world {
  font-size: 1rem !important;
  padding: 16px 40px !important;
  letter-spacing: 2px;
  border-color: var(--gold) !important;
  box-shadow: 0 0 24px var(--gold-glow);
  margin-top: 8px;
}

/*  
   GAME SCREEN BACKGROUND
     */

#game-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%,   #2a1a05 0%, transparent 60%),
    radial-gradient(ellipse at 20% 100%, #1a0d03 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, #0d0804 0%, transparent 50%),
    var(--bg-deep);
}

/* Sand-particle canvas floats behind everything */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/*  
   BUTTONS
     */

.btn-egypt {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--gold);
  background: linear-gradient(180deg, #2a1e08 0%, #140e04 100%);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.1s;
}

/* Inner shimmer layer that appears on hover */
.btn-egypt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(212,175,55,0.12) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s;
}

.btn-egypt:hover::before { opacity: 1; }

.btn-egypt:hover {
  border-color: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow), inset 0 0 8px rgba(212,175,55,0.08);
  color: var(--gold-light);
}

.btn-egypt:active { transform: scale(0.96); }

.btn-egypt:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}

/* Big modal button */
.btn-large {
  font-size: 0.95rem;
  padding: 14px 32px;
  letter-spacing: 2px;
  margin-top: 8px;
}

/* Small icon-only button (mute) */
.btn-icon {
  padding: 6px 10px;
  font-size: 1rem;
}

/*  
   CARD PILE SLOTS (empty receptacles)
     */

.card-pile {
  width:  var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius);
  border: 1px dashed var(--gold-dim);
  background: rgba(212, 175, 55, 0.04);
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Glow when a dragged card hovers over this pile */
.card-pile.drop-target {
  border-color: var(--gold);
  box-shadow: 0 0 18px var(--gold-glow), inset 0 0 20px rgba(212,175,55,0.06);
}

/* Foundation piles show their suit symbol as a ghost watermark */
.foundation-pile::before {
  content: attr(data-suit);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: rgba(212, 175, 55, 0.12);
  pointer-events: none;
}

/* Stock pile shows Eye of Horus as watermark */
#stock-pile {
  cursor: pointer;
}
#stock-pile::before {
  content: '𓂀';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: rgba(212, 175, 55, 0.15);
  pointer-events: none;
}
#stock-pile:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

/*  
   CARDS
     */

.card {
  width:  var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius);
  position: absolute;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  will-change: transform;
}

/* Face-down cards are not draggable */
.card.face-down { cursor: default; }

/* Card currently being dragged (added to ghost elements) */
.card.dragging {
  opacity: 0.88;
  box-shadow: 0 18px 40px rgba(0,0,0,0.9), 0 0 22px var(--gold-glow);
  cursor: grabbing;
  transform: scale(1.04) rotate(1.5deg);
}

/* Lift face-up cards slightly on hover */
.card.face-up:not(.dragging):hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.8), 0 0 14px var(--gold-glow);
  transform: translateY(-3px);
  z-index: 100;
}

/* ── Card Face (front side) ── */
.card-front {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  /* Warm papyrus gradient */
  background: linear-gradient(160deg, #f7edd5 0%, #e8d4a0 50%, #dfc88a 100%);
  border: 1px solid #c8a96e;
  padding: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    2px 4px 12px rgba(0,0,0,0.6);
}

/* Inner decorative border frame on the card face */
.card-front::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  border: 1px solid rgba(180, 130, 50, 0.4);
  pointer-events: none;
}

/* Subtle horizontal line texture (like aged papyrus) */
.card-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 14px,
    rgba(180,130,50,0.05) 14px,
    rgba(180,130,50,0.05) 15px
  );
  pointer-events: none;
  border-radius: var(--radius);
}

/* Corner pip: rank + suit stacked vertically */
.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.card-corner.top-left  { align-self: flex-start; }
.card-corner.bottom-right {
  align-self: flex-end;
  transform: rotate(180deg); /* upside-down for bottom corner */
  margin-top: auto;
}

.corner-rank {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}
.corner-suit { font-size: 0.7rem; line-height: 1; }

/* Large center suit symbol (faint) */
.card-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.card-center-suit { font-size: 1.8rem; opacity: 0.22; }

/* Suit colors */
.card.red  .corner-rank,
.card.red  .corner-suit,
.card.red  .card-center-suit { color: var(--red); }

.card.black .corner-rank,
.card.black .corner-suit,
.card.black .card-center-suit { color: var(--black); }

/* ── Card Back ── */
.card-back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  /* Diagonal stripe pattern — Egyptian geometric style */
  background: repeating-linear-gradient(
    45deg,
    #1a0f04 0px, #1a0f04 4px,
    #221508 4px, #221508 8px
  );
  border: 2px solid var(--gold-dim);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(212,175,55,0.2),
    2px 4px 12px rgba(0,0,0,0.7);
}

/* Eye of Horus symbol on card backs */
.card-back::before {
  content: '𓂀';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--gold-dim);
  text-shadow: 0 0 8px var(--gold-glow);
}

/* Inner border frame on card back */
.card-back::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

/*  
   MODALS (Win / Game Over / No Moves)
     */

/* Dark translucent backdrop */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 1, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
}
.modal-overlay.hidden { display: none !important; }

/* Modal card */
#win-modal,
#gameover-modal,
#nomoves-modal {
  background: linear-gradient(160deg, #1e1508 0%, #0e0a04 100%);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 40px 48px;
  text-align: center;
  max-width: 440px;
  width: 90%;
  box-shadow:
    0 0 40px var(--gold-glow),
    0 0 80px rgba(212,175,55,0.12),
    inset 0 1px 0 rgba(212,175,55,0.2);
}

/* Hieroglyph row inside modals */
.hieroglyph-row {
  font-size: 1.3rem;
  letter-spacing: 8px;
  color: var(--gold-dim);
  margin-bottom: 14px;
}

/* Modal headings */
#win-modal h2,
#gameover-modal h2,
#nomoves-modal h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-light);
  text-shadow: 0 0 20px var(--gold-glow), 0 0 40px rgba(212,175,55,0.25);
  margin-bottom: 10px;
  letter-spacing: 2px;
}

/* Italic subtitle / message */
.modal-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--sand);
  margin-bottom: 22px;
  line-height: 1.5;
}

/* Win stats row */
.win-stats {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 18px;
}

.win-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(212,175,55,0.06);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 10px 18px;
}
.win-stat span {
  font-size: 0.62rem;
  color: var(--gold-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.win-stat strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-light);
}

/* Bouncing scarab beetles row */
.scarab-row {
  font-size: 1.4rem;
  letter-spacing: 12px;
  margin-bottom: 4px;
}

/* No-moves modal button row */
.nomoves-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Win-particles canvas (added to DOM on win) */
#win-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 199;  /* Below modal (200) but above game */
}