/* BLOBS — gameplay page */
.blob { opacity: 0.15; }
.blob-1 { width: 500px; height: 500px; background: var(--orange); top: -200px; right: -140px; }
.blob-2 { width: 440px; height: 440px; background: var(--purple); bottom: -180px; left: -130px; animation-delay: -8s; }
.blob-3 { width: 380px; height: 380px; background: var(--teal); top: 50%; left: -150px; animation-delay: -14s; opacity: 0.1; }

/* PAGE HERO */
.page-hero { padding: 160px 32px 70px; text-align: center; position: relative; }
.breadcrumb { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 24px; }
.breadcrumb a { color: var(--orange); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(241,164,60,0.12); border: 1px solid rgba(241,164,60,0.3); color: var(--orange-light); border-radius: 50px; padding: 7px 16px; font-size: 13px; font-weight: 700; margin-bottom: 22px; animation: fadeUp 0.7s ease both; }
.page-title { font-size: clamp(40px, 6.5vw, 78px); font-weight: 900; line-height: 1.0; letter-spacing: -2.5px; margin-bottom: 20px; animation: fadeUp 0.7s 0.08s ease both; }
.page-title .accent { background: linear-gradient(120deg, var(--orange), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.page-sub { font-size: 18px; color: rgba(255,255,255,0.6); max-width: 600px; margin: 0 auto; line-height: 1.7; animation: fadeUp 0.7s 0.16s ease both; }

/* SECTION */
.section { padding: 80px 32px; }
.section-inner { max-width: 1300px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 56px; max-width: 680px; margin-left: auto; margin-right: auto; }

/* RULES LAYOUT */
.rules-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }

.objective-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 40px 36px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.objective-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange), var(--pink)); }
.objective-card::after { content: ''; position: absolute; bottom: -100px; right: -100px; width: 300px; height: 300px; background: var(--orange); opacity: 0.04; border-radius: 50%; pointer-events: none; }
.objective-card:hover { transform: translateY(-4px); border-color: rgba(241,164,60,0.25); }

.objective-icon { font-size: 52px; line-height: 1; margin-bottom: 20px; }
.objective-title { font-size: 28px; font-weight: 900; letter-spacing: -0.8px; margin-bottom: 14px; }
.objective-desc { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.75; }

.conditions-col { display: flex; flex-direction: column; gap: 22px; }

.condition-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 30px 28px;
  flex: 1;
  position: relative; overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.condition-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.condition-win::before { background: var(--teal); }
.condition-fail::before { background: #EF4444; }
.condition-win:hover { transform: translateY(-4px); border-color: rgba(59,206,172,0.25); }
.condition-fail:hover { transform: translateY(-4px); border-color: rgba(239,68,68,0.25); }

.condition-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.condition-icon { font-size: 26px; line-height: 1; }
.condition-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.condition-desc { font-size: 14px; color: rgba(255,255,255,0.58); line-height: 1.7; }

/* MECHANICS GRID */
.mechanics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.mechanic-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 20px;
  position: relative; overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.mechanic-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mc, var(--orange)); }
.mechanic-card::after { content: ''; position: absolute; top: -50px; right: -50px; width: 160px; height: 160px; background: var(--mc, var(--orange)); opacity: 0.05; border-radius: 50%; transition: opacity 0.3s ease; pointer-events: none; }
.mechanic-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--mc, var(--orange)) 30%, transparent); box-shadow: 0 18px 38px rgba(0,0,0,0.3); }
.mechanic-card:hover::after { opacity: 0.1; }

.mechanic-icon { font-size: 32px; line-height: 1; margin-bottom: 12px; }
.mechanic-name { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 8px; }
.mechanic-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.65; }

/* CTA */
.cta-section { text-align: center; padding: 100px 32px 120px; }
.cta-inner { max-width: 600px; margin: 0 auto; }
.cta-title { font-size: clamp(32px, 5vw, 52px); font-weight: 900; letter-spacing: -1.6px; line-height: 1.1; margin-bottom: 16px; }
.cta-title .accent { background: linear-gradient(120deg, var(--orange), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cta-desc { font-size: 17px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 36px; }
.cta-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav-links .nav-link { display: none; }
  .page-hero { padding: 130px 20px 50px; }
  .section { padding: 60px 20px; }
  .rules-layout { grid-template-columns: 1fr; }
  .mechanics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mechanics-grid { grid-template-columns: 1fr; }
  .mechanic-card { padding: 22px 18px; }
  .objective-card { padding: 28px 24px; }
}