:root {
  --body-bg: linear-gradient(180deg, #1c0f2e, #3a1e4a);
  --main-bg: linear-gradient(to right, #800000, #FF7F50);
  --header-bg: #000;
  --footer-bg: #000;
  --card-bg: #efe6ff;
  --card-text: #1c0f2e;
  --accent: #FF7F50;
  --font-base: "Georgia", serif;
  --text-main: #f0f0f0;
  --header-text: #FF7F50;
  --surface: white;
  --button-bg: #1f2a38;
  --card-border: #000;
  --shadow-soft: rgba(0,0,0,0.08);
  --font-weight: 500;
  --line-height: 1.6;
}

/* =========================
   VILÁG KÁRTYÁK
========================= */

.world-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding: 3rem 4rem;
}

.world-card {
  border-radius: 14px;
  padding: 2rem 1.5rem;
  box-shadow: 0 6px 18px var(--shadow-soft);
  transition: all 0.3s ease;
  border: var(--card-border);
  cursor: pointer;
}

.world-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.world-card h2 {
  margin-top: 0;
  color: var(--card-text);
  font-size: 1.1rem;
}

.world-card p {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ===========================
   GOMBOK (TANULÁS / JÁTÉK)
=========================== */

.mode-container{
    display:flex;
    justify-content:center;
    gap:40px;
    margin-top:80px;
}

.mode-card{
    width:260px;
    padding:30px;
    text-align:center;
    text-decoration:none;
    border-radius:16px;
    transition:all 0.25s ease;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    border: var(--card-border);
}

.mode-card .icon{
    font-size:40px;
    display:block;
    margin-bottom:10px;
}

.mode-card h2{
    margin:10px 0;
    letter-spacing:2px;
}

.mode-card p{
    font-size:14px;
    opacity:0.8;
}


/* JÁTÉK */

.mode-card.game{
    background:
        url("map-texture.png"),
        linear-gradient(135deg,#ffb347,#ffcc33);
    background-size:cover;
    color: var(--card-text);
    background: #efe2c4;
}

.mode-card.game:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
    filter:brightness(1.15);
}