:root {
  --bg: #f2f5ef;
  --ink: #14201b;
  --muted: #61706a;
  --line: #d8dfd4;
  --surface: #fffef8;
  --green: #2d7b5c;
  --green-dark: #184f3b;
  --yellow: #e7ba42;
  --blue: #4f83c2;
  --red: #b65343;
  --shadow: 0 18px 48px rgba(35, 53, 43, 0.13);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", Arial, sans-serif;
  color: var(--ink);
  position: relative;
  background:
    linear-gradient(140deg, rgba(45, 123, 92, 0.16), transparent 35%),
    linear-gradient(225deg, rgba(79, 131, 194, 0.16), transparent 32%),
    var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.46;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='220' viewBox='0 0 260 220'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(28 28)'%3E%3Ccircle cx='0' cy='0' r='12' fill='%23ffd85a' stroke='%23d9a441' stroke-width='3'/%3E%3Cg stroke='%23d9a441' stroke-width='3'%3E%3Cpath d='M0-23v-10M0 23v10M-23 0h-10M23 0h10M-16-16l-7-7M16 16l7 7M16-16l7-7M-16 16l-7 7'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M95 24c10 14 15 24 15 32a15 15 0 0 1-30 0c0-8 5-18 15-32z' fill='%234f83c2' stroke='%233e6fa8' stroke-width='3'/%3E%3Cg transform='translate(178 34)' stroke='%23ffffff' stroke-width='4'%3E%3Cpath d='M0-18v36M-16-9l32 18M16-9l-32 18'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(230 90)'%3E%3Ccircle cx='0' cy='0' r='9' fill='%23ffd85a' stroke='%23d9a441' stroke-width='3'/%3E%3Cg stroke='%23d9a441' stroke-width='3'%3E%3Cpath d='M0-18v-8M0 18v8M-18 0h-8M18 0h8M-13-13l-6-6M13 13l6 6M13-13l6-6M-13 13l-6 6'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M37 114c8 12 12 20 12 27a12 12 0 0 1-24 0c0-7 4-15 12-27z' fill='%234f83c2' stroke='%233e6fa8' stroke-width='3'/%3E%3Cg transform='translate(128 132)' stroke='%23ffffff' stroke-width='4'%3E%3Cpath d='M0-16v32M-14-8l28 16M14-8l-28 16'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3Cpath d='M209 158c9 13 13 22 13 29a13 13 0 0 1-26 0c0-7 4-16 13-29z' fill='%234f83c2' stroke='%233e6fa8' stroke-width='3'/%3E%3Cg transform='translate(74 190)'%3E%3Ccircle cx='0' cy='0' r='10' fill='%23ffd85a' stroke='%23d9a441' stroke-width='3'/%3E%3Cg stroke='%23d9a441' stroke-width='3'%3E%3Cpath d='M0-20v-8M0 20v8M-20 0h-8M20 0h8M-14-14l-6-6M14 14l6 6M14-14l6-6M-14 14l-6 6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:
    260px 220px;
  background-position: 20px 10px;
  mask-image: linear-gradient(90deg, #000 0, #000 18%, transparent 38%, transparent 62%, #000 82%, #000 100%);
}

.app-shell {
  width: min(1120px, 100% - 2rem);
  margin: 1rem auto 2rem;
  display: grid;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.hero {
  min-height: 360px;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(11, 22, 18, 0.88), rgba(11, 22, 18, 0.35)),
    url("assets/truifel-hero-sweater-sad.png") center/cover;
  box-shadow: var(--shadow);
}

.topbar,
.hero-body,
.control-strip,
.status,
.big-advice,
.period-card,
.panel,
.footnote {
  border-radius: 8px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.topbar strong {
  font-size: 1.05rem;
}

.source-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.source-links a {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  text-decoration: none;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
}

.hero-body {
  align-self: end;
  max-width: 780px;
  padding: 1.3rem;
}

.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 900;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0.45rem;
  font-size: clamp(2.7rem, 7vw, 6rem);
  line-height: 0.92;
  max-width: 760px;
}

h2 {
  margin-bottom: 0.4rem;
  font-size: 1.25rem;
}

h3 {
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
}

.easter-link {
  color: inherit;
  text-decoration: none;
}

.easter-link:hover,
.easter-link:focus-visible {
  color: #b8860b;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

.lead {
  max-width: 820px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.78rem, 1.18vw, 1rem);
  line-height: 1.35;
}

.control-strip,
.status,
.big-advice,
.period-card,
.panel,
.footnote {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.control-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.9rem;
}

label {
  font-weight: 900;
  grid-column: 1 / -1;
}

select,
button {
  min-height: 44px;
  border-radius: 8px;
  font: inherit;
}

select {
  width: 100%;
  border: 1px solid var(--line);
  padding: 0.65rem 0.75rem;
  background: #fff;
  color: var(--ink);
}

button {
  border: 0;
  cursor: pointer;
  font-weight: 900;
}

.secondary-btn {
  padding: 0.65rem 0.9rem;
  color: #3d2a00;
  background: linear-gradient(135deg, #ffd85a, #e7ba42);
  box-shadow: inset 0 -2px 0 rgba(112, 73, 0, 0.12);
}

.icon-btn {
  width: 44px;
  color: var(--green-dark);
  background: #e7f1eb;
  border: 1px solid #bad4c7;
  font-size: 1.2rem;
}

.status {
  padding: 0.8rem 1rem;
  color: var(--muted);
}

.advice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.big-advice,
.period-card,
.panel {
  padding: 1rem;
}

.big-advice {
  min-height: 310px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.why-panel {
  align-content: start;
}

.main-symbol {
  width: clamp(120px, 18vw, 180px);
  height: clamp(120px, 18vw, 180px);
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
}

.big-advice h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
}

.big-advice p,
.period-card p,
.reason-list,
.footnote {
  color: var(--muted);
  line-height: 1.5;
}

.big-advice p:empty {
  display: none;
}

#main-reason {
  max-width: 540px;
  white-space: normal;
  font-size: clamp(0.78rem, 1.18vw, 0.96rem);
  overflow: visible;
  text-overflow: clip;
}

.period-card {
  display: grid;
  align-content: start;
  gap: 0.3rem;
}

.period-label {
  width: fit-content;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  color: var(--green-dark);
  background: #e7f1eb;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.period-symbol {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

.details-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: 1rem;
}

.sun-grid {
  grid-template-columns: 1fr;
}

.reason-list {
  margin: 0;
  padding-left: 1.1rem;
}

.reason-list li + li {
  margin-top: 0.45rem;
}

.visual-reasons {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  list-style: none;
}

.visual-reasons li + li {
  margin-top: 0;
}

.reason-card {
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf3;
}

.reason-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.reason-card-head strong {
  font-size: 1.05rem;
}

.period-pill {
  width: fit-content;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  color: var(--green-dark);
  background: #e7f1eb;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reason-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.metric-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem;
  align-items: center;
  min-height: 58px;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffef8;
}

.metric-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 900;
  background: #edf1eb;
}

.metric-chip strong,
.metric-chip small {
  display: block;
}

.metric-chip strong {
  line-height: 1;
}

.metric-chip small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.metric-chip.low .metric-icon {
  color: #174d38;
  background: #dff1e8;
}

.metric-chip.medium .metric-icon {
  color: #614600;
  background: #ffe6a7;
}

.metric-chip.high .metric-icon {
  color: #fff;
  background: var(--blue);
}

.reason-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.conclusion-card {
  border-color: rgba(45, 123, 92, 0.45);
  background: #edf7f1;
}

.winner-card {
  display: grid;
  gap: 0.65rem;
}

.winner-lockup {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 0.75rem;
  align-items: center;
  color: var(--green-dark);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
}

.winner-symbol {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
}

.province-board {
  display: grid;
  gap: 0.55rem;
}

.province-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
  min-height: 74px;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf3;
}

.province-tile.active {
  border-color: var(--green);
  background: #edf7f1;
}

.sun-ticket {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  justify-items: center;
  align-items: center;
  width: 100%;
  min-height: 112px;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  background: #fbfaf3;
}

.sun-ticket p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.sun-ticket .ticket-punchline {
  margin-top: 0.9rem;
  color: var(--ink);
  font-weight: 900;
}

.sun-ticket strong {
  display: block;
  font-size: 1.15rem;
}

.best-ticket {
  cursor: pointer;
}

.escape-ticket {
  border-color: rgba(231, 186, 66, 0.78);
  background: linear-gradient(135deg, #fff8d9, #fffef8);
}

.sun-symbol {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #f4b72d 0deg 12deg,
      transparent 12deg 28deg,
      #f4b72d 28deg 42deg,
      transparent 42deg 60deg,
      #f4b72d 60deg 74deg,
      transparent 74deg 90deg,
      #f4b72d 90deg 104deg,
      transparent 104deg 120deg,
      #f4b72d 120deg 134deg,
      transparent 134deg 150deg,
      #f4b72d 150deg 164deg,
      transparent 164deg 180deg,
      #f4b72d 180deg 194deg,
      transparent 194deg 210deg,
      #f4b72d 210deg 224deg,
      transparent 224deg 240deg,
      #f4b72d 240deg 254deg,
      transparent 254deg 270deg,
      #f4b72d 270deg 284deg,
      transparent 284deg 300deg,
      #f4b72d 300deg 314deg,
      transparent 314deg 330deg,
      #f4b72d 330deg 344deg,
      transparent 344deg 360deg
    );
  box-shadow: 0 12px 24px rgba(231, 186, 66, 0.28);
}

.sun-symbol span {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a6, #ffd34d 58%, #f0a92a 100%);
  border: 2px solid rgba(112, 73, 0, 0.18);
  box-shadow: inset 0 -4px 0 rgba(161, 91, 0, 0.08);
}

.tile-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.clothing-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 12px rgba(20, 32, 27, 0.18));
}

.tile-symbol .clothing-icon {
  filter: drop-shadow(0 4px 5px rgba(20, 32, 27, 0.16));
}

.clothing-icon span {
  position: absolute;
  display: block;
}

.raincoat .body {
  left: 25%;
  top: 32%;
  width: 50%;
  height: 56%;
  border-radius: 16% 16% 10% 10%;
  background: linear-gradient(90deg, #f2b51f 0 48%, #d69412 49% 51%, #ffd85a 52% 100%);
  border: 0.04em solid rgba(99, 67, 0, 0.18);
}

.raincoat .hood {
  left: 31%;
  top: 7%;
  width: 38%;
  height: 36%;
  border-radius: 50% 50% 18% 18%;
  background: #f5c433;
  border: 0.05em solid rgba(99, 67, 0, 0.18);
}

.raincoat .zip {
  left: 49%;
  top: 36%;
  width: 2.4%;
  height: 48%;
  border-radius: 999px;
  background: rgba(93, 63, 0, 0.42);
}

.raincoat .sleeve {
  top: 36%;
  width: 21%;
  height: 42%;
  border-radius: 999px 999px 18% 18%;
  background: #e9aa18;
}

.raincoat .sleeve.left {
  left: 13%;
  transform: rotate(15deg);
}

.raincoat .sleeve.right {
  right: 13%;
  transform: rotate(-15deg);
}

.raincoat .drop {
  width: 8%;
  height: 13%;
  border-radius: 55% 55% 55% 12%;
  background: #4f83c2;
  transform: rotate(45deg);
}

.raincoat .drop.one {
  left: 19%;
  top: 12%;
}

.raincoat .drop.two {
  right: 19%;
  top: 19%;
}

.turtleneck .body {
  left: 22%;
  top: 34%;
  width: 56%;
  height: 52%;
  border-radius: 18% 18% 12% 12%;
  background: linear-gradient(135deg, #378960, #1f6848);
  border: 0.04em solid rgba(0, 49, 30, 0.2);
}

.turtleneck .neck {
  left: 34%;
  top: 13%;
  width: 32%;
  height: 31%;
  border-radius: 18% 18% 8% 8%;
  background: repeating-linear-gradient(90deg, #2d7b5c 0 16%, #23694e 17% 28%);
}

.turtleneck .sleeve {
  top: 39%;
  width: 24%;
  height: 41%;
  border-radius: 999px 999px 18% 18%;
  background: #246f51;
}

.turtleneck .sleeve.left {
  left: 8%;
  transform: rotate(18deg);
}

.turtleneck .sleeve.right {
  right: 8%;
  transform: rotate(-18deg);
}

.turtleneck .rib {
  left: 31%;
  width: 38%;
  height: 3%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.turtleneck .rib.one {
  top: 24%;
}

.turtleneck .rib.two {
  top: 30%;
}

.cool-shirt .body {
  left: 23%;
  top: 28%;
  width: 54%;
  height: 58%;
  border-radius: 14% 14% 12% 12%;
  background: linear-gradient(135deg, #fbfbf4, #dff4ff);
  border: 0.05em solid rgba(28, 74, 100, 0.18);
}

.cool-shirt .sleeve {
  top: 33%;
  width: 25%;
  height: 28%;
  border-radius: 20% 60% 35% 35%;
  background: #dff4ff;
  border: 0.04em solid rgba(28, 74, 100, 0.14);
}

.cool-shirt .sleeve.left {
  left: 7%;
  transform: rotate(18deg);
}

.cool-shirt .sleeve.right {
  right: 7%;
  transform: rotate(-18deg);
}

.cool-shirt .letter {
  left: 42%;
  top: 42%;
  color: #193f79;
  font-size: 26%;
  line-height: 1;
  font-weight: 900;
}

.cool-shirt .shade {
  top: 14%;
  width: 21%;
  height: 13%;
  border-radius: 20% 20% 50% 50%;
  background: #111a25;
}

.cool-shirt .shade.left {
  left: 27%;
  transform: rotate(6deg);
}

.cool-shirt .shade.right {
  right: 27%;
  transform: rotate(-6deg);
}

.cool-shirt .bridge {
  left: 47%;
  top: 18%;
  width: 6%;
  height: 3%;
  border-radius: 999px;
  background: #111a25;
}

.tile-name {
  display: block;
  font-weight: 900;
}

.tile-meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.footnote {
  padding: 0.8rem 1rem;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  white-space: nowrap;
  overflow: hidden;
}

.tone-shirt {
  border-color: rgba(231, 186, 66, 0.65);
}

.tone-pull {
  border-color: rgba(45, 123, 92, 0.65);
}

.tone-jas {
  border-color: rgba(79, 131, 194, 0.65);
}

@media (max-width: 860px) {
  .app-shell {
    width: min(100% - 1rem, 1120px);
  }

  .advice-grid,
  .details-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 430px;
  }
}

@media (max-width: 560px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .main-symbol {
    width: 116px;
    height: 116px;
  }

  .reason-metrics {
    grid-template-columns: 1fr;
  }

  .footnote {
    white-space: normal;
    overflow: visible;
    line-height: 1.45;
  }
}