/* ── Tips page styles ──────────────────────────────────────────────────────── */

/* ── SEO Intro ─────────────────────────────────────────────────────────────── */
.tips-seo-intro {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.75;
  padding: 16px 20px;
  margin-bottom: 36px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 0 10px 10px 0;
}

.tips-seo-intro strong { color: var(--text-strong); }

/* ── Premium section titles ────────────────────────────────────────────────── */
.tips-swot       .nx-section-title { --tips-accent: #a78bfa; }
.tips-gameplan   .nx-section-title { --tips-accent: #38bdf8; }
.tips-spikes     .nx-section-title { --tips-accent: #fbbf24; }
.tips-section    .nx-section-title { --tips-accent: #34d399; }
.tips-section--vs .nx-section-title { --tips-accent: #f87171; }
.tips-combos     .nx-section-title { --tips-accent: #fb923c; }

.tips-swot .nx-section-title,
.tips-gameplan .nx-section-title,
.tips-spikes .nx-section-title,
.tips-section .nx-section-title,
.tips-combos .nx-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--tips-accent, var(--accent-cyan));
  padding-left: 12px;
  border-left: 3px solid var(--tips-accent, var(--accent-cyan));
  text-shadow: 0 0 20px color-mix(in srgb, var(--tips-accent, var(--accent-cyan)) 40%, transparent);
}

/* ── 2-column layout for pairs of sections ─────────────────────────────────── */
.tips-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-bottom: 48px;
  align-items: start;
}

.tips-2col > * {
  margin-bottom: 0;
}

/* ── Shared section spacing ────────────────────────────────────────────────── */
.tips-swot,
.tips-combos {
  margin-bottom: 48px;
}

.tips-gameplan,
.tips-spikes,
.tips-section {
  margin-bottom: 40px;
}

/* ── SWOT (Strengths / Weaknesses) ────────────────────────────────────────── */
.tips-swot__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tips-swot__col {
  border-radius: 12px;
  padding: 20px 20px 16px;
  position: relative;
  overflow: hidden;
}

.tips-swot__col--strength {
  background: rgba(46,204,113,.06);
  border: 1px solid rgba(46,204,113,.3);
  box-shadow: 0 0 0 1px rgba(46,204,113,.06) inset, 0 4px 20px rgba(46,204,113,.06);
}

.tips-swot__col--weakness {
  background: rgba(255,77,79,.06);
  border: 1px solid rgba(255,77,79,.3);
  box-shadow: 0 0 0 1px rgba(255,77,79,.06) inset, 0 4px 20px rgba(255,77,79,.06);
}

/* Top accent bar */
.tips-swot__col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.tips-swot__col--strength::before { background: linear-gradient(90deg, transparent, rgba(46,204,113,.7), transparent); }
.tips-swot__col--weakness::before { background: linear-gradient(90deg, transparent, rgba(255,77,79,.7), transparent); }

.tips-swot__label {
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 14px;
}

.tips-swot__label--strength { color: #2ECC71; }
.tips-swot__label--weakness { color: #FF4D4F; }

.tips-swot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tips-swot__list li {
  font-size: .83rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}

.tips-swot__col--strength .tips-swot__list li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: #2ECC71;
  font-weight: 900;
  font-size: .9rem;
}

.tips-swot__col--weakness .tips-swot__list li::before {
  content: '−';
  position: absolute;
  left: 0;
  color: #FF4D4F;
  font-weight: 900;
  font-size: .9rem;
}

.tips-swot__list li strong { color: var(--text-strong); }

/* ── Game Plan ─────────────────────────────────────────────────────────────── */
.tips-gp__phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tips-gp__phase {
  border-radius: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-top-width: 2px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  position: relative;
}

.tips-gp__phase--early { border-top-color: #2ECC71; }
.tips-gp__phase--mid   { border-top-color: #FFD166; }
.tips-gp__phase--late  { border-top-color: #FF4D4F; }

.tips-gp__phase p {
  font-size: .83rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.tips-gp__phase p strong { color: var(--text-strong); }

.tips-gp__phase-label {
  display: inline-block;
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 4px;
  padding: 3px 9px;
  margin-bottom: 10px;
}

.tips-gp__phase-label--early { background: rgba(46,204,113,.15); color: #2ECC71; }
.tips-gp__phase-label--mid   { background: rgba(255,209,102,.15); color: #FFD166; }
.tips-gp__phase-label--late  { background: rgba(255,77,79,.15);   color: #FF4D4F; }

/* ── Power Spikes ──────────────────────────────────────────────────────────── */
.tips-spikes__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tips-spike {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.tips-spike__condition {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.08);
}

.tips-spike__level-badge {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fbbf24;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tips-spike__role-badge {
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent-cyan);
  background: rgba(66,183,255,.12);
  border: 1px solid rgba(66,183,255,.25);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.tips-spike__cond-text {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.4;
}

.tips-spike__cond-text strong { color: var(--accent-cyan); }

.tips-spike__impact {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  padding: 12px 16px;
  align-self: center;
}

.tips-spike__impact strong { color: var(--text-strong); }

/* ── Tips list ─────────────────────────────────────────────────────────────── */
.tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tips-list li {
  font-size: .84rem;
  color: var(--text-muted);
  line-height: 1.65;
  padding: 13px 16px 13px 40px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid rgba(66,183,255,.35);
  border-radius: 0 10px 10px 0;
  position: relative;
}

.tips-list li::before {
  content: '›';
  position: absolute;
  left: 15px;
  top: 13px;
  color: var(--accent-cyan);
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
}

.tips-list li strong { color: var(--text-strong); font-weight: 700; }

/* vsTips — red accent border */
.tips-section--vs .tips-list li {
  border-left-color: rgba(255,77,79,.4);
}

.tips-section--vs .tips-list li::before {
  color: #FF6B6B;
}

/* ── Combos ────────────────────────────────────────────────────────────────── */
.tips-combos__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.tips-combo {
  background: color-mix(in srgb, var(--diff-color, transparent) 5%, rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--diff-color, white) 22%, rgba(255,255,255,.08));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb, var(--diff-color, transparent) 8%, transparent) inset;
}

.tips-combo__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--diff-color, transparent) 8%, rgba(255,255,255,.04));
  border-bottom: 1px solid color-mix(in srgb, var(--diff-color, white) 12%, rgba(255,255,255,.05));
}

.tips-combo__name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-strong);
  flex: 1;
}

.tips-combo__diff {
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--diff-color, #fff);
  background: color-mix(in srgb, var(--diff-color, #fff) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--diff-color, #fff) 30%, transparent);
  border-radius: 4px;
  padding: 3px 8px;
}

/* ── Combo inputs — fit-content row, steps equal width ─────────────────────── */
.tips-combo__inputs {
  display: inline-flex;   /* shrinks to content width */
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 2px;
  padding: 12px 14px;
  /* force all .combo-step inside to same width via subgrid workaround */
}

/* equal-width steps: fixed tile */
.combo-step {
  width: 58px;
}

.combo-arrow {
  color: rgba(255,255,255,.25);
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
  padding: 0 1px;
  align-self: center;
  padding-bottom: 20px; /* vertically align with icon center */
}

/* Base step — column card: icon on top, label below */
.combo-step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  padding: 6px 4px;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
}

/* Spell step (Q/W/E/R/P) */
.combo-step--spell {
  background: rgba(66,183,255,.08);
  border: 1px solid rgba(66,183,255,.2);
}

.combo-step--spell .combo-step__key { color: var(--accent-cyan); }

.combo-step__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.combo-step__key {
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .05em;
  text-align: center;
  line-height: 1;
}

.combo-step__rest {
  font-size: .65rem;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  text-align: center;
  max-width: 64px;
  white-space: normal;
  line-height: 1.2;
}

/* AA step */
.combo-step--aa {
  background: rgba(255,209,102,.08);
  border: 1px solid rgba(255,209,102,.2);
}

.combo-step--aa .combo-step__key { color: #FFD166; }

.combo-step--aa .combo-step__icon {
  filter: brightness(1.1) sepia(.3) saturate(1.4) hue-rotate(15deg);
}

/* Flash step */
.combo-step--flash {
  background: rgba(189,147,249,.08);
  border: 1px solid rgba(189,147,249,.2);
}

.combo-step--flash .combo-step__key { color: #BD93F9; }

/* Note/plain step — stays single line, no fixed width */
.combo-step--note {
  width: auto !important;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.38);
  font-size: .68rem;
  font-style: italic;
  font-weight: 400;
  flex-direction: row;
  padding: 4px 8px;
  align-self: center;
  padding-bottom: 20px; /* align with arrows */
}

.tips-combo__tip {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.01);
}

.tips-combo__tip strong { color: var(--text-strong); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tips-2col { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .tips-swot__grid       { grid-template-columns: 1fr; }
  .tips-gp__phases       { grid-template-columns: 1fr; }
  .tips-spike            { grid-template-columns: 1fr; }
  .tips-combos__list     { grid-template-columns: 1fr; }
  .tips-spike__condition { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
}