.landing { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; background: var(--bg-image) no-repeat center/cover, var(--bg); position:relative; overflow:hidden; }
.landing-bg { position:absolute; inset:0; background: radial-gradient(ellipse at 50% 40%, transparent 20%, rgba(0,0,0,0.6) 100%); }
.landing-content { position:relative; z-index:1; text-align:center; padding:40px; background: linear-gradient(180deg, rgba(22,15,8,0.94) 0%, rgba(12,8,3,0.96) 100%); border:2px solid; border-image: linear-gradient(180deg, #5a4012, #d4a545, #5a4012) 1; box-shadow:var(--shadow-panel); min-width:440px; max-height:90vh; overflow-y:auto; }
.lang-switcher { display:flex; gap:6px; justify-content:flex-end; margin-bottom:16px; }
.lang-btn { padding:5px 12px; border-radius:3px; border:2px solid rgba(212,165,69,0.2); background:rgba(0,0,0,0.4); color:var(--parchment-dark); font-family:'Cinzel',serif; font-size:0.72rem; font-weight:600; letter-spacing:1px; cursor:pointer; transition:all 0.2s; box-shadow:var(--shadow-inset); }
.lang-btn.active, .lang-btn:hover { border-color:var(--gold); color:var(--gold-bright); background:linear-gradient(180deg, rgba(60,40,15,0.6) 0%, rgba(30,18,6,0.7) 100%); text-shadow:var(--text-shadow-glow); }
.landing-title { font-family:'Cinzel',serif; font-size:2.6rem; font-weight:900; color:var(--gold-bright); letter-spacing:6px; line-height:1.2; margin-bottom:8px; text-shadow:0 0 20px rgba(212,165,69,0.4), 0 2px 4px rgba(0,0,0,0.8); }
.landing-title span { color:var(--gold-bright); }
.landing-subtitle { font-family:'Crimson Text',serif; font-style:italic; color:var(--parchment); font-size:1.1rem; margin-bottom:28px; text-shadow:0 1px 3px rgba(0,0,0,0.8); }
.player-setup { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.player-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:4px; background:rgba(0,0,0,0.4); border:1px solid rgba(212,165,69,0.2); box-shadow:var(--shadow-inset); }
.player-color-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; box-shadow:0 0 4px currentColor; }
.player-name-input { flex:1; background:transparent; border:none; color:var(--parchment-light); font-family:'Crimson Text',serif; font-size:1.15rem; outline:none; }
.ai-toggle { display:flex; align-items:center; gap:5px; font-family:'Cinzel',serif; font-size:0.8rem; font-weight:600; color:var(--gold-dim); letter-spacing:1px; cursor:pointer; }
.ai-toggle input { accent-color:var(--gold); }
.player-count-btns { display:flex; gap:6px; justify-content:center; margin-bottom:20px; }

/* Metallic gold buttons */
.count-btn { padding:6px 16px; border-radius:3px; border:2px solid rgba(212,165,69,0.25); background:rgba(0,0,0,0.4); color:var(--parchment-dark); font-family:'Cinzel',serif; font-size:0.8rem; font-weight:600; letter-spacing:1px; cursor:pointer; transition:all 0.25s; box-shadow:var(--shadow-inset); }
.count-btn.active, .count-btn:hover { border-color:var(--gold); color:var(--gold-bright); background:linear-gradient(180deg, rgba(60,40,15,0.7) 0%, rgba(30,18,6,0.8) 100%); box-shadow:0 0 12px rgba(212,165,69,0.15); text-shadow:var(--text-shadow-glow); }

/* BIG start button — golden metallic */
.start-btn {
  padding:16px 40px; border-radius:3px;
  border:2px solid var(--gold-dim);
  background: linear-gradient(180deg, #5a4012 0%, #8b6914 35%, #d4a545 50%, #8b6914 65%, #5a4012 100%);
  color:#1a0e04;
  font-family:'Cinzel',serif; font-size:1.05rem; font-weight:700;
  letter-spacing:3px; cursor:pointer; transition:all 0.25s; margin-top:16px;
  box-shadow: var(--shadow-button), 0 0 12px rgba(212,165,69,0.1);
  text-transform:uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.start-btn:hover {
  border-color:var(--gold-bright);
  background: linear-gradient(180deg, #6b4f10 0%, #d4a545 35%, #f0c860 50%, #d4a545 65%, #6b4f10 100%);
  box-shadow: var(--shadow-glow), var(--shadow-button), 0 0 24px rgba(212,165,69,0.2);
}

/* Landing form: player name section */
.your-name-section { margin-bottom:20px; }
.your-name-label { display:block; font-family:'Cinzel',serif; font-size:0.9rem; font-weight:600; color:#d4a545; letter-spacing:1px; margin-bottom:8px; text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
.your-name-input { width:100%; padding:12px 16px; background:rgba(0,0,0,0.5); border:2px solid rgba(212,165,69,0.25); border-radius:4px; color:var(--parchment-light); font-family:'Crimson Text',serif; font-size:1.2rem; outline:none; transition:all 0.2s; box-shadow:var(--shadow-inset); }
.your-name-input:focus { border-color:var(--gold); box-shadow:var(--shadow-inset), 0 0 12px rgba(212,165,69,0.12); }
.your-name-input::placeholder { color:var(--parchment-dark); opacity:0.7; }

/* Landing form: opponent selection */
.opponent-section { margin-bottom:20px; }
.opponent-section .your-name-label { margin-bottom:10px; }
.opponent-btns { display:flex; gap:8px; justify-content:center; margin-top:8px; }
.opp-btn { padding:9px 20px; border-radius:3px; border:2px solid rgba(212,165,69,0.25); background:rgba(0,0,0,0.4); color:var(--parchment-dark); font-family:'Cinzel',serif; font-size:0.85rem; font-weight:600; letter-spacing:1px; cursor:pointer; transition:all 0.25s; box-shadow:var(--shadow-inset); }
.opp-btn.active, .opp-btn:hover { border-color:var(--gold); color:var(--gold-bright); background:linear-gradient(180deg, rgba(60,40,15,0.7) 0%, rgba(30,18,6,0.8) 100%); box-shadow:0 0 12px rgba(212,165,69,0.15); text-shadow:var(--text-shadow-glow); }
.map-hint { font-family:'Crimson Text',serif; font-size:0.95rem; color:var(--parchment); margin-top:10px; opacity:0.8; text-shadow:0 1px 2px rgba(0,0,0,0.6); }

/* Landing form: opponents list */
.opponents-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.opp-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:4px; background:rgba(0,0,0,0.4); border:1px solid rgba(212,165,69,0.2); box-shadow:var(--shadow-inset); }
.opp-color { width:14px; height:14px; border-radius:50%; flex-shrink:0; box-shadow:0 0 4px currentColor; }
.opp-name-input { flex:1; background:transparent; border:none; color:var(--parchment-light); font-family:'Crimson Text',serif; font-size:1.15rem; outline:none; }
.opp-name-input::placeholder { color:var(--parchment-dark); opacity:0.7; }
.opp-badge { font-family:'Cinzel',serif; font-size:0.72rem; font-weight:600; color:#d4a545; letter-spacing:1px; padding:3px 10px; border:1px solid rgba(212,165,69,0.25); border-radius:3px; background:rgba(0,0,0,0.3); }
.opp-ai-summary { display:flex; align-items:center; justify-content:center; gap:12px; padding:16px 24px; background:rgba(0,0,0,0.35); border:1px solid rgba(212,165,69,0.2); border-radius:6px; color:#c8a96e; font-family:'Cinzel',serif; font-size:1.1rem; letter-spacing:1px; }
.opp-ai-icon { font-size:1.4rem; filter:drop-shadow(0 0 4px rgba(212,165,69,0.4)); }
.opp-ai-text { font-weight:600; }

/* Landing form: difficulty selection */
.difficulty-section { margin-bottom:20px; }
.difficulty-btns { display:flex; gap:8px; justify-content:center; margin-top:8px; }
.diff-btn { padding:9px 20px; border-radius:3px; border:2px solid rgba(212,165,69,0.25); background:rgba(0,0,0,0.4); color:var(--parchment-dark); font-family:'Cinzel',serif; font-size:0.85rem; font-weight:600; letter-spacing:1px; cursor:pointer; transition:all 0.25s; box-shadow:var(--shadow-inset); }
.diff-btn.active, .diff-btn:hover { border-color:var(--gold); color:var(--gold-bright); background:linear-gradient(180deg, rgba(60,40,15,0.7) 0%, rgba(30,18,6,0.8) 100%); box-shadow:0 0 12px rgba(212,165,69,0.15); text-shadow:var(--text-shadow-glow); }

/* ===================== MOBILE RESPONSIVE — LANDING ===================== */
@media (max-width: 700px) {
  .landing-content { min-width: auto; width: 92vw; max-width: 480px; padding: 24px 18px; }
  .landing-title { font-size: 1.8rem; letter-spacing: 3px; }
  .landing-subtitle { font-size: 0.95rem; margin-bottom: 18px; }
  .your-name-input { font-size: 1.05rem; padding: 10px 14px; }
  .your-name-label { font-size: 0.8rem; }
  .opp-btn { padding: 7px 14px; font-size: 0.78rem; }
  .diff-btn { padding: 7px 14px; font-size: 0.78rem; }
  .count-btn { padding: 5px 12px; font-size: 0.75rem; }
  .start-btn { padding: 12px 28px; font-size: 0.95rem; }
  .player-name-input { font-size: 1rem; }
  .opp-name-input { font-size: 1rem; }
  .opp-ai-summary { padding: 12px 16px; font-size: 0.95rem; }
}

@media (max-height: 500px) {
  .landing-content { padding: 14px 16px; max-height: 92vh; }
  .landing-title { font-size: 1.5rem; margin-bottom: 4px; }
  .landing-subtitle { font-size: 0.85rem; margin-bottom: 10px; }
  .your-name-section { margin-bottom: 10px; }
  .opponent-section { margin-bottom: 10px; }
  .difficulty-section { margin-bottom: 10px; }
  .opponents-list { gap: 4px; margin-bottom: 10px; }
  .opp-row { padding: 6px 10px; }
  .start-btn { padding: 10px 24px; margin-top: 8px; }
}

@media (max-height: 380px) {
  .landing-content { padding: 8px 12px; max-height: 96vh; }
  .landing-title { font-size: 1.1rem; margin-bottom: 2px; letter-spacing: 2px; }
  .landing-subtitle { font-size: 0.75rem; margin-bottom: 6px; }
  .your-name-section { margin-bottom: 6px; }
  .your-name-label { font-size: 0.7rem; margin-bottom: 4px; }
  .your-name-input { padding: 7px 10px; font-size: 0.95rem; }
  .opponent-section { margin-bottom: 6px; }
  .opp-btn { padding: 5px 10px; font-size: 0.7rem; }
  .diff-btn { padding: 5px 10px; font-size: 0.7rem; }
  .difficulty-section { margin-bottom: 6px; }
  .opponents-list { gap: 3px; margin-bottom: 6px; }
  .opp-row { padding: 4px 8px; }
  .opp-name-input { font-size: 0.9rem; }
  .start-btn { padding: 7px 18px; margin-top: 4px; font-size: 0.85rem; }
  .lang-switcher { margin-bottom: 6px; }
  .lang-btn { padding: 3px 8px; font-size: 0.65rem; }
}