/* Would You Rather: a wooden signpost is the card. The top board points left (side 1), the bottom board points
   right (side 2), so the screen teaches "point left for 1, right for 2". Boards are HTML so long text wraps;
   only the post and its face are SVG. In dark mode the boards turn dark so they don't glare in a night car. */
:root {
  --accent: var(--think);
  --board: #f3dfb8;
  --board-edge: #d6b47a;
  --board-fg: #1d2333;
  --pole: #a8743f;
  --face: #e8c48c;
  --face-ink: #2a1a08;
  --wyr-two: #1572a0;
  --on-two: #fff;
  --on-sun: #1d2333;
  --pill-line: var(--think);
  --pill-on: var(--think);
  --pill-on-fg: #fff;
  --pill-focus: var(--think);
  --pt: 1.5em;
}
@media (prefers-color-scheme: dark) {
  :root {
    --board: var(--card); --board-edge: #33415f; --board-fg: var(--fg); --pole: #6b4a2c; --face: #c9a46c;
    --wyr-two: var(--ice); --on-two: #121a2c; --on-sun: #121a2c; --pill-on-fg: #121a2c;
  }
}
.back:focus-visible { outline-color: var(--think); }
.status { min-height: 1.1em; }

/* While playing, everything above the card shrinks so card, follow-up and buttons fit on a 667px-tall phone. */
.playing { gap: 8px; padding-block: 6px 20px; }
.playing h1 { font-size: 1.3rem; }
.playing .back { padding-block: 2px; }
.playing .status { min-height: 0; font-size: 1.4rem; }
.playing .sub { display: none; }

.sign {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--board-fg); cursor: pointer;
}
.playing .sign { cursor: default; }
.top {
  position: relative; z-index: 1; font-family: var(--display); font-size: 1.25rem; padding: 4px 16px 7px; border-radius: 10px;
  background: linear-gradient(var(--board) calc(100% - 4px), var(--board-edge) 0);
}
.board {
  position: relative; z-index: 1; width: calc(100% - 18px); display: flex; align-items: center; gap: 10px;
  min-height: 4.2rem; padding: 8px 14px 14px; text-align: left;
  background: linear-gradient(var(--board) calc(100% - 6px), var(--board-edge) 0);
}
.b1 { align-self: flex-start; padding-left: calc(var(--pt) + 4px); clip-path: polygon(var(--pt) 0, 100% 0, 100% 100%, var(--pt) 100%, 0 50%); border-radius: 0 12px 12px 0; }
.b2 { align-self: flex-end; padding-right: calc(var(--pt) + 4px); clip-path: polygon(0 0, calc(100% - var(--pt)) 0, 100% 50%, calc(100% - var(--pt)) 100%, 0 100%); border-radius: 12px 0 0 12px; }
.mark { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1; background: var(--sun); color: var(--on-sun);
}
.b2 .num { background: var(--wyr-two); color: var(--on-two); }
.pic { font-size: 1.6rem; line-height: 1.1; }
.side {
  flex: 1; font-family: var(--display); line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere;
  font-size: clamp(1.4rem, calc(2.5rem - var(--len, 20) * .03rem), 1.9rem);
}
.or {
  position: relative; z-index: 1; font-weight: 800; font-size: 1rem; line-height: 1; padding: 6px 12px; margin-block: -2px;
  border-radius: 999px; background: var(--bg); color: var(--fg); border: 2px solid var(--pole);
}
.wild {
  width: 100%; justify-content: center; text-align: center; border-radius: 16px; border: 3px dashed var(--think);
  background: var(--board); padding: 16px;
}
.wild .side { font-size: 1.6rem; }

/* The post runs behind the boards, from the top sign down to the face. */
.sign::before {
  content: ""; position: absolute; left: 50%; top: 12px; bottom: 30px; width: 16px; margin-left: -8px;
  background: var(--pole); border-radius: 3px;
}
.post { position: relative; z-index: 1; width: 92px; height: auto; display: block; margin-top: -10px; overflow: visible; }
.pole { fill: var(--pole); }
.head { fill: var(--face); stroke: var(--pole); stroke-width: 3; }
.eye { fill: var(--face-ink); }
.wink-eye, .mouth { fill: none; stroke: var(--face-ink); stroke-width: 3.5; stroke-linecap: round; }
.cheek { fill: #ff8a7a; opacity: .5; }
.wink-eye { opacity: 0; }
.arm { opacity: 0; fill: var(--face); stroke: var(--pole); stroke-width: 4; stroke-linecap: round; transform-origin: 84px 52px; }
.arm path { fill: none; }
.eyes, .face { transform-box: view-box; }
.face { transform-origin: 60px 74px; }

/* Face moods, set by game.js on each new card. */
.mood-think .eyes { animation: look .7s ease-out 1; }
@keyframes look { 0% { transform: translateY(0); } 25%, 55% { transform: translateY(-4px); } 40% { transform: translateY(-4px) scaleY(.1); } 100% { transform: none; } }
.eyes { transform-origin: 60px 40px; }
.mood-wink .eye-r { opacity: 0; }
.mood-wink .wink-eye { opacity: 1; }
.mood-wiggle .face { animation: wiggle .5s ease-in-out 2; }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.mood-wave .arm { opacity: 1; animation: wave .5s ease-in-out 4 alternate; }
@keyframes wave { from { transform: rotate(-12deg); } to { transform: rotate(18deg); } }

/* New card: each board swings in from the side it points to. */
.swing .b1 { animation: in-left .3s ease-out 1; }
.swing .b2 { animation: in-right .3s ease-out 1; }
.swing .wild { animation: pop .3s ease-out 1; }
@keyframes in-left { from { transform: translateX(-24px) rotate(-4deg); opacity: 0; } }
@keyframes in-right { from { transform: translateX(24px) rotate(4deg); opacity: 0; } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }

.why {
  position: relative; margin: 2px 0 0; padding: 10px 18px; max-width: 100%; border-radius: 18px;
  background: var(--card); border: 2px solid var(--think); font-weight: 800; font-size: 1.2rem; line-height: 1.25; text-wrap: balance;
}
.why::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg);
  background: var(--card); border-left: 2px solid var(--think); border-top: 2px solid var(--think);
}

.nav { display: flex; gap: 10px; justify-content: center; width: 100%; }
.playing .main-btn { flex: 1.4; padding-inline: 16px; }
.prev-btn {
  flex: 1; font-family: var(--display); font-size: 1.25rem; border-radius: 999px; padding: 12px 10px; cursor: pointer;
  border: 3px solid var(--think); background: var(--card); color: var(--fg);
}
.prev-btn:disabled { opacity: .55; cursor: default; }
.prev-btn:focus-visible, .done-btn:focus-visible { outline: 3px solid var(--think); outline-offset: 3px; }
.done-btn {
  font-family: var(--body); font-weight: 800; font-size: 1rem; border: 0; background: none; color: var(--fg); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 4px 16px; margin-top: -4px; border-radius: 8px;
}
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .sign *, .sign { animation: none !important; }
}