/* Weekly Trick cards and chart presentation */
.spot-card { background: #fff; border: 1px solid #d5dbe1; border-radius: 20px; padding: 22px 22px 20px; text-align: center; color: #172536; }
.spot-name { margin: 0 0 10px; color: #8F5E00; font-weight: 800; font-size: .95rem; }
.spot-figure { margin: 0 auto; max-width: 420px; }
.spot-figure figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-align: left; margin-bottom: 6px; font-size: .95rem; }
.spot-mock { flex: none; font-size: .72rem; font-weight: 700; color: #6b7780; border: 1px solid #d5dbe1; border-radius: 999px; padding: 2px 8px; }
.spot-figure svg { display: block; width: 100%; height: auto; }
.spot-figure.spot-turning { animation: spot-turn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes spot-turn { 0% { transform: perspective(700px) rotateY(0); } 50% { transform: perspective(700px) rotateY(90deg); } 100% { transform: perspective(700px) rotateY(0); } }
.spot-legend { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: .82rem; color: #3d5163; }
.spot-legend[hidden] { display: none; }
.spot-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.spot-to { color: #6b7780; }
.spot-note { margin: 6px 0 0; font-size: .85rem; color: #3d5163; }
.spot-q { margin: 16px 0 4px; font-size: 1.15rem; font-weight: 800; color: #1A3E6E; text-wrap: balance; }
.spot-label { margin: 0 0 10px; color: #8F5E00; font-weight: 700; font-size: .9rem; }
.spot-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.spot-choices button { appearance: none; font: inherit; font-weight: 800; font-size: .95rem; padding: 9px 16px; border-radius: 999px; border: 2px solid #1A3E6E; background: #fff; color: #1A3E6E; cursor: pointer; }
.spot-choices button:hover:not(:disabled) { background: #1A3E6E; color: #fff; }
.spot-choices button:disabled { opacity: .45; cursor: default; }
.spot-choices button.is-answer { opacity: 1; background: #1A3E6E; color: #fff; }
.spot-choices button:focus-visible, .spot-flip:focus-visible { outline: 3px solid #E59E12; outline-offset: 2px; }
.spot-answer p { margin: 12px auto 0; max-width: 34rem; line-height: 1.5; text-wrap: balance; }
.spot-flip { appearance: none; margin-top: 12px; font: inherit; font-weight: 800; padding: 10px 18px; border: 0; border-radius: 999px; background: #E59E12; color: #10284A; cursor: pointer; }
.spot-flip:hover { background: #F6B53A; }
.spot-lesson { font-size: .95rem; color: #3d5163; }
.spot-lesson a { color: #1A3E6E; font-weight: 700; white-space: nowrap; }
.spot-lesson[hidden], .spot-answer[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .spot-figure.spot-turning { animation: none; } }

.spot-page { display: grid; gap: 22px; }
.spot-foot { text-align: center; color: #3d5163; font-size: .95rem; max-width: 40rem; margin: 6px auto 0; text-wrap: balance; }
.spot-foot a { color: #1A3E6E; font-weight: 700; }

.spot-checklist { background: #1A3E6E; color: #fff; border-radius: 20px; padding: 24px 26px; }
.spot-checklist h2 { margin: 0 0 12px; font-size: 1.4rem; text-align: center; }
.spot-checklist ol { margin: 0 auto; padding-left: 1.3rem; max-width: 36rem; display: grid; gap: 8px; line-height: 1.45; }
.spot-checklist strong { color: #F6C35E; }

/* /trick/: this week's trick, then links to the last few */
.trick-recent { text-align: center; }
.trick-recent h2 { margin: 6px 0 12px; font-size: 1.25rem; color: #1A3E6E; }
.trick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trick-links a { display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #d5dbe1; color: #1A3E6E; font-weight: 800; text-decoration: none; }
.trick-links a span { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8F5E00; }
.trick-links a:hover, .trick-links a:focus-visible { border-color: #1A3E6E; }


/* /trick/ page only — follow the approved Phase 1 canvas and heading layout.
   Leave shared play.css and other Spot card uses untouched. */
body.hanten-trick .site > header.play-hero {
  max-width: 1000px;
  margin: 0 auto;
}
body.hanten-trick .site > main.spot-page {
  width: min(820px, calc(100% - 48px));
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 0 52px;
  box-sizing: border-box;
}
body.hanten-trick .spot-card {
  box-shadow: 0 5px 18px rgba(9,34,68,.16);
}
body.hanten-trick .trick-recent h2,
body.hanten-trick .spot-foot { color: #fff; }
body.hanten-trick .spot-foot a { color: #fff; text-decoration: underline; }
@media (max-width: 640px) {
  body.hanten-trick .site > main.spot-page {
    width: calc(100% - 32px);
    padding-top: 8px;
    padding-bottom: 36px;
  }
  body.hanten-trick .spot-card { padding: 18px 14px; }
}


/* /trick/ refinements — aligned with approved Weekly Flip answer feedback. */
body.hanten-trick .spot-choices button {
  background: #EAF2FA;
  border: 1.5px solid #A8C1DB;
  color: #1A3E6E;
  border-radius: 12px;
  font-weight: 750;
}
body.hanten-trick .spot-choices button:hover:not(:disabled) {
  background: #D7E7F7;
  border-color: #1A3E6E;
  color: #1A3E6E;
}
body.hanten-trick .spot-choices button:disabled { opacity: .72; }
body.hanten-trick .spot-choices button.selected:not(.is-answer) {
  background: #FCE8E6;
  border-color: #B74B43;
  color: #7B2621;
  opacity: 1;
}
body.hanten-trick .spot-choices button.selected:not(.is-answer)::after {
  content: "  ✕";
  font-weight: 900;
}
body.hanten-trick .spot-choices button.is-answer,
body.hanten-trick .spot-choices button.is-answer:disabled {
  background: #DDF2E3;
  border-color: #2E7D49;
  color: #195C32;
  opacity: 1;
}
body.hanten-trick .spot-choices button.is-answer::after {
  content: "  ✓";
  font-weight: 900;
}

/* Closing line matches the approved Explore by Theme supporting-text treatment. */
body.hanten-trick .spot-foot {
  max-width: 48rem;
  margin: 18px auto 0;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
body.hanten-trick .spot-foot a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Four equal recent-trick tiles on one row on wider desktops. */
@media (min-width: 1000px) {
  body.hanten-trick .trick-recent {
    width: min(1200px, calc(100vw - 64px));
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  body.hanten-trick .trick-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  body.hanten-trick .trick-links a {
    min-width: 0;
    overflow-wrap: anywhere;
    justify-content: center;
  }
}
@media (min-width: 641px) and (max-width: 999px) {
  body.hanten-trick .trick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hanten-trick .trick-links a { min-width: 0; }
}
@media (max-width: 640px) {
  body.hanten-trick .trick-links { display: grid; grid-template-columns: 1fr; }
  body.hanten-trick .trick-links a { min-width: 0; }
}

/* Keep the wide Recent Tricks row from enlarging the parent CSS grid.
   Without this, the grid's auto track grows to 1200px and shifts the
   interactive card and the four recent links off-screen to the right. */
body.hanten-trick .site > main.spot-page {
  grid-template-columns: minmax(0, 1fr);
}
body.hanten-trick .site > main.spot-page > * {
  min-width: 0;
}

/* Weekly Trick: keep the shared footer at the viewport bottom for short states,
   and after the full chart/reveal when content grows. */
body.hanten-phase1.hanten-trick{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;box-sizing:border-box;padding-bottom:0}
body.hanten-phase1.hanten-trick>.site{flex:1 0 auto;min-height:0}
body.hanten-phase1.hanten-trick>.hx-foot{flex:0 0 auto;margin-top:28px}