/* Page-owned styles for Duck Lords: Tower Defense TD Review */

.game-review-page {
  padding-block: var(--space-8);
}

.game-review-page section {
  margin-block-end: var(--space-9);
}

.game-review-page section:last-child {
  margin-block-end: 0;
}

.game-review-page h2 {
  margin-block-end: var(--space-5);
}

/* Review Overview */
.review-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.review-overview__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.review-overview__title {
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  margin-block-end: 0;
}

.review-overview__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  max-width: 720px;
  margin-block-end: 0;
}

.review-overview__cta {
  align-self: flex-start;
}

.review-overview__media {
  margin-block-end: 0;
  min-width: 0;
}

.review-overview__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.review-overview__media:hover img {
  border-color: var(--color-ink);
}

.review-overview__note {
  grid-column: 1 / -1;
  max-width: 560px;
  padding: var(--space-5);
  background-color: var(--color-parchment-deep);
  border-inline-start: 2px solid var(--color-moss);
  border-radius: var(--radius-lg);
}

.review-overview__note-title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  margin-block-end: var(--space-3);
}

.review-overview__note p {
  margin-block-end: 0;
}

/* Core Gameplay Loop */
.core-loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.core-loop__text {
  max-width: 680px;
  min-width: 0;
}

.core-loop__text p {
  margin-block-end: var(--space-4);
}

.core-loop__text p:last-child {
  margin-block-end: 0;
}

.core-loop__diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 80%;
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-5);
  background-color: var(--color-parchment-deep);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
}

.core-loop__diagram-node {
  font-family: var(--font-heading);
  font-size: var(--text-small-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-parchment);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.core-loop__diagram-arrow {
  font-size: var(--text-body-large-size);
  line-height: 1;
  color: var(--color-ink);
}

.core-loop__diagram-arrow--wave {
  color: var(--color-warning-red);
}

.core-loop__diagram-arrow--player {
  color: var(--color-moss);
}

.core-loop__tip {
  max-width: 560px;
  margin-block-end: 0;
}

/* Tower Defence Mechanics */
.tower-defence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.tower-defence__text {
  max-width: 680px;
  min-width: 0;
}

.tower-defence__text p {
  margin-block-end: var(--space-4);
}

.tower-defence__text p:last-child {
  margin-block-end: 0;
}

.tower-defence__board {
  width: 100%;
  padding: var(--space-5);
  background-color: var(--color-parchment-deep);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
}

.tower-defence__board-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-block-end: var(--space-4);
}

.tower-defence__board-list {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
}

.tower-defence__board-list li {
  margin-block-end: var(--space-2);
}

.tower-defence__board-list li:last-child {
  margin-block-end: 0;
}

.tower-defence__warning {
  max-width: 680px;
  margin-block-end: 0;
}

/* Battle Cards */
.battle-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.battle-cards__text {
  max-width: 680px;
  min-width: 0;
}

.battle-cards__text p {
  margin-block-end: var(--space-4);
}

.battle-cards__text p:last-child {
  margin-block-end: 0;
}

.battle-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.battle-cards__note {
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--color-parchment);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.battle-cards__note:hover {
  border-color: var(--color-ink);
}

.battle-cards__note h3 {
  margin-block-end: var(--space-3);
}

.battle-cards__note p {
  margin-block-end: 0;
}

.battle-cards__synergy {
  max-width: 680px;
  margin-block-end: 0;
}

/* Units & Lords */
.units-lords {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.units-lords__text {
  max-width: 680px;
  min-width: 0;
}

.units-lords__text p {
  margin-block-end: var(--space-4);
}

.units-lords__text p:last-child {
  margin-block-end: 0;
}

.units-lords__table-wrap {
  width: 100%;
  overflow-x: auto;
}

.units-lords__table {
  min-width: 560px;
  margin-block-end: 0;
}

.units-lords__lord-tip {
  max-width: 680px;
  margin-block-end: 0;
}

/* Roguelike Structure */
.roguelike-structure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.roguelike-structure__text {
  max-width: 680px;
  min-width: 0;
}

.roguelike-structure__text p {
  margin-block-end: var(--space-4);
}

.roguelike-structure__text p:last-child {
  margin-block-end: 0;
}

.roguelike-structure__diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 70%;
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-5);
  background-color: var(--color-parchment-deep);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
}

.roguelike-structure__diagram-node {
  font-family: var(--font-heading);
  font-size: var(--text-small-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-parchment);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.roguelike-structure__diagram-arrow {
  font-size: var(--text-body-large-size);
  line-height: 1;
  color: var(--color-ink);
}

.roguelike-structure__diagram-arrow--failure {
  color: var(--color-warning-red);
}

.roguelike-structure__diagram-arrow--progress {
  color: var(--color-moss);
}

.roguelike-structure__info {
  max-width: 680px;
  margin-block-end: 0;
}

/* Strategy Depth */
.strategy-depth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.strategy-depth__text {
  max-width: 680px;
  min-width: 0;
}

.strategy-depth__text p {
  margin-block-end: var(--space-4);
}

.strategy-depth__text p:last-child {
  margin-block-end: 0;
}

.strategy-depth__card {
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--color-parchment);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-block-start: 3px solid var(--color-moss);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.strategy-depth__card:hover {
  border-color: var(--color-ink);
}

.strategy-depth__card h3 {
  margin-block-end: var(--space-3);
}

.strategy-depth__card ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
}

.strategy-depth__card li {
  margin-block-end: var(--space-2);
}

.strategy-depth__card li:last-child {
  margin-block-end: 0;
}

.strategy-depth__tip {
  grid-column: 1 / -1;
  max-width: 680px;
  margin-block-end: 0;
}

/* Progression */
.progression {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.progression__text {
  max-width: 680px;
  min-width: 0;
}

.progression__text p {
  margin-block-end: var(--space-4);
}

.progression__text p:last-child {
  margin-block-end: 0;
}

.progression__diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 80%;
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-5);
  background-color: var(--color-parchment-deep);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
}

.progression__diagram-node {
  font-family: var(--font-heading);
  font-size: var(--text-small-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-parchment);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.progression__diagram-arrow {
  font-size: var(--text-body-large-size);
  line-height: 1;
  color: var(--color-ink);
}

.progression__diagram-arrow--meta {
  color: var(--color-moss);
}

.progression__info {
  max-width: 680px;
  margin-block-end: 0;
}

/* Visual Style */
.visual-style {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.visual-style__text {
  max-width: 680px;
  min-width: 0;
}

.visual-style__text p {
  margin-block-end: var(--space-4);
}

.visual-style__text p:last-child {
  margin-block-end: 0;
}

.visual-style__media {
  width: 80%;
  max-width: 680px;
  margin-inline: auto;
  margin-block-end: 0;
  min-width: 0;
}

.visual-style__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.visual-style__media:hover img {
  border-color: var(--color-ink);
}

.visual-style__mobile-note {
  max-width: 680px;
  margin-block-end: 0;
}

/* Learning Curve */
.learning-curve {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.learning-curve__text {
  max-width: 680px;
  min-width: 0;
}

.learning-curve__text p {
  margin-block-end: var(--space-4);
}

.learning-curve__text p:last-child {
  margin-block-end: 0;
}

.learning-curve__graph {
  position: relative;
  width: 60%;
  max-width: 680px;
  min-height: 180px;
  margin-inline: auto;
  background-color: var(--color-parchment-deep);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.learning-curve__graph-line {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 20%;
  height: 2px;
  background-color: var(--color-ink);
  transform: rotate(-18deg);
  transform-origin: left bottom;
}

.learning-curve__graph-label {
  position: absolute;
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-ink-soft);
}

.learning-curve__graph-label--start {
  left: 12%;
  bottom: 8%;
}

.learning-curve__graph-label--end {
  right: 12%;
  top: 8%;
}

.learning-curve__warning {
  max-width: 680px;
  margin-block-end: 0;
}

/* Replayability */
.replayability {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.replayability__text {
  max-width: 680px;
  min-width: 0;
}

.replayability__text p {
  margin-block-end: var(--space-4);
}

.replayability__text p:last-child {
  margin-block-end: 0;
}

.replayability__icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-5);
  background-color: var(--color-parchment-deep);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-lg);
}

.replayability__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 100px;
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-ink);
}

.replayability__icon-mark {
  font-size: var(--text-h3-size);
  line-height: 1;
  color: var(--color-duck-feather);
}

.replayability__tip {
  max-width: 680px;
  margin-block-end: 0;
}

/* Strengths */
.strengths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.strengths__text {
  max-width: 680px;
  min-width: 0;
}

.strengths__text p {
  margin-block-end: 0;
}

.strengths__card {
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--color-parchment);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-block-start: 3px solid var(--color-moss);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.strengths__card:hover {
  border-color: var(--color-ink);
}

.strengths__card h3 {
  margin-block-end: var(--space-3);
}

.strengths__card ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
}

.strengths__card li {
  margin-block-end: var(--space-2);
}

.strengths__card li:last-child {
  margin-block-end: 0;
}

/* Limitations */
.limitations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.limitations__text {
  max-width: 680px;
  min-width: 0;
}

.limitations__text p {
  margin-block-end: 0;
}

.limitations__card {
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--color-parchment);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-block-start: 3px solid var(--color-warning-red);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

.limitations__card:hover {
  border-color: var(--color-ink);
}

.limitations__card h3 {
  margin-block-end: var(--space-3);
}

.limitations__card ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
}

.limitations__card li {
  margin-block-end: var(--space-2);
}

.limitations__card li:last-child {
  margin-block-end: 0;
}

/* Final Verdict */
.final-verdict {
  margin-block-end: 0;
}

.final-verdict__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-7);
  background-color: var(--color-parchment-deep);
  border: 1px solid rgba(43, 38, 32, 0.28);
  border-radius: var(--radius-xl);
  text-align: center;
}

.final-verdict__title {
  margin-block-end: 0;
}

.final-verdict__text {
  max-width: 680px;
  margin-block-end: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
}

.final-verdict__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* Responsive rules */
@media (min-width: 768px) {
  .review-overview {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }

  .review-overview__note {
    grid-column: 1 / -1;
  }

  .core-loop {
    grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
    align-items: start;
  }

  .core-loop__text {
    grid-column: 1;
  }

  .core-loop__diagram {
    grid-column: 1 / -1;
  }

  .core-loop__tip {
    grid-column: 2;
    grid-row: 1;
    margin-block-end: 0;
  }

  .strategy-depth {
    grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
    align-items: start;
  }

  .strategy-depth__text {
    grid-column: 1;
  }

  .strategy-depth__card {
    grid-column: 2;
    grid-row: 1;
  }

  .strategy-depth__tip {
    grid-column: 1 / -1;
  }

  .strengths {
    grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
    align-items: start;
  }

  .strengths__text {
    grid-column: 1;
  }

  .strengths__card {
    grid-column: 2;
    grid-row: 1;
  }

  .limitations {
    grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
    align-items: start;
  }

  .limitations__text {
    grid-column: 1;
  }

  .limitations__card {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 1024px) {
  .game-review-page {
    padding-block: var(--space-10);
  }

  .game-review-page section {
    margin-block-end: var(--space-10);
  }

  .game-review-page section:last-child {
    margin-block-end: 0;
  }

  .battle-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .game-review-page {
    padding-block: var(--space-7);
  }

  .game-review-page section {
    margin-block-end: var(--space-8);
  }

  .review-overview__title {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
  }

  .review-overview__lead {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .review-overview__cta {
    width: 100%;
  }

  .core-loop__diagram,
  .roguelike-structure__diagram,
  .progression__diagram {
    width: 100%;
  }

  .battle-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .units-lords__table {
    min-width: 0;
    width: 100%;
  }

  .units-lords__table-wrap {
    overflow-x: visible;
  }

  .visual-style__media {
    width: 100%;
  }

  .learning-curve__graph {
    width: 100%;
  }

  .replayability__icons {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .final-verdict__panel {
    padding: var(--space-5);
  }

  .final-verdict__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .final-verdict__cta,
  .final-verdict__secondary {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .review-overview__note {
    padding: var(--space-4);
  }

  .core-loop__diagram-node,
  .roguelike-structure__diagram-node,
  .progression__diagram-node {
    font-size: var(--text-label-size);
    padding: var(--space-1) var(--space-2);
  }

  .core-loop__diagram-arrow,
  .roguelike-structure__diagram-arrow,
  .progression__diagram-arrow {
    font-size: var(--text-body-size);
  }

  .tower-defence__board,
  .battle-cards__note,
  .strategy-depth__card,
  .strengths__card,
  .limitations__card {
    padding: var(--space-4);
  }
}