/* Side Effects Are WHAT?! landing page (/sideeffects). Loaded after site.css; the colors come from the card art. */
.se {
  --teal: #277b91;
  --teal-dark: #203c45;
  --light: #eaf4f6;
  --pink: #de9ca8;
  --brown: #86502c;
  --paper: #f5efe7;
  --ink: #292929;
  /* The walkthrough's three players: voting tokens and points. */
  --p1: #f0a830;
  --p2: #d2456e;
  --p3: #3bb27b;
  --card-shadow: 0 6px 16px rgba(20, 30, 34, 0.28);
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.se h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); color: var(--teal-dark); }
.se-section { padding: clamp(56px, 8vw, 104px) 0; }
.se-heading { margin-bottom: clamp(28px, 4vw, 48px); }
.se-heading p { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: #4c5a5e; margin: 0; }
.se-btn { background: var(--teal); }
.se-btn:hover { background: var(--teal-dark); }
.se :focus-visible { outline-color: var(--teal); }
.se-section img, .se-hero img { border-radius: 4.5% / 3.3%; }

/* Hero */
.se-hero { background: radial-gradient(120% 90% at 85% 10%, #d3eaef 0%, var(--light) 55%, var(--paper) 100%); padding: clamp(28px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.se-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: 'text art' 'more art'; column-gap: clamp(28px, 5vw, 72px); align-items: end; }
.se-hero-text { grid-area: text; }
.se-hero-more { grid-area: more; align-self: start; }
.se-hero-art { grid-area: art; display: flex; justify-content: center; align-self: center; padding: 12px 0; }
.se-kicker { font-family: var(--heading); font-weight: 600; letter-spacing: 0.03em; color: var(--teal); margin-bottom: 8px; }
.se-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 4.6rem); color: var(--teal-dark); line-height: 1.02; margin-bottom: 0.25em; }
.se-tagline { font-family: var(--heading); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); color: var(--brown); margin-bottom: 0.6em; }
.se-lede { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); max-width: 34em; }
.se-hero .box { position: relative; z-index: 2; width: min(440px, 100%); aspect-ratio: 992 / 1317; box-shadow: 0 18px 40px rgba(32, 60, 69, 0.28); transform: rotate(1.5deg); }
.se-facts { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.se-facts li { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 8px 16px; background: var(--white); border: 2px solid var(--teal); border-radius: 16px; color: var(--teal-dark); font-weight: 700; line-height: 1.2; }
.se-facts strong { font-family: var(--heading); font-size: 1.5rem; color: var(--teal); }
.se-status { margin: 14px 0 0; font-weight: 700; color: #4c5a5e; display: flex; align-items: center; gap: 8px; }
.se-status::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(222, 156, 168, 0.35); }

/* About */
.se-about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.se-about-text p { font-size: 1.12rem; }
.se-punch { font-family: var(--heading); font-weight: 600; font-size: 1.35rem !important; color: var(--brown); }
.se-about-art { position: relative; aspect-ratio: 1 / 0.92; max-width: 560px; width: 100%; margin-inline: auto; }
.se-about-art .ab { position: absolute; box-shadow: var(--card-shadow); transition: transform 0.25s; }
.ab-condition { width: 46%; left: 0; top: 4%; transform: rotate(-7deg); }
.ab-treatment { width: 46%; right: 2%; top: 0; transform: rotate(5deg); }
.ab-effect { width: 34%; right: 8%; top: 38%; transform: rotate(10deg); z-index: 2; }
.se-about-art .ab:hover { transform: rotate(0deg) translateY(-8px); z-index: 3; }

/* How to Play: the sample round. The rules are on the left, the table and your hand on the right. */
.se-howto { background: var(--light); }
.ht { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); grid-template-areas: 'prog prog' 'text play'; column-gap: clamp(24px, 3vw, 40px); align-items: start; }
.ht-progress { grid-area: prog; list-style: none; margin: 0 auto 28px; padding: 0; display: flex; gap: 6px; width: 100%; max-width: 720px; position: relative; }
.ht-progress li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 0.92rem var(--body); color: #4c5a5e; text-align: center; }
.ht-progress li + li::before { content: ''; position: absolute; top: 20px; right: calc(50% + 24px); width: calc(100% - 42px); height: 3px; border-radius: 3px; background: #b9d3d9; }
.ht-progress .num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 700 1.15rem var(--heading); background: var(--white); color: var(--teal-dark); border: 3px solid #b9d3d9; transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.ht-progress li.done .num { border-color: var(--teal); color: var(--teal); }
.ht-progress li[aria-current='step'] .num { background: var(--teal); border-color: var(--teal); color: var(--white); transform: scale(1.08); }
.ht-progress li[aria-current='step'] { color: var(--teal-dark); }

.ht-text { grid-area: text; }
.js .ht-panel:not(.active) { display: none; }
.ht-panel { animation: ht-in 0.3s ease-out; }
.no-js .ht-panel + .ht-panel { margin-top: 28px; }
@keyframes ht-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ht-kicker { font-family: var(--heading); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.ht-panel h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--teal-dark); }
.ht-note { font-size: 0.96rem; color: #4c5a5e; background: rgba(255, 255, 255, 0.7); border-left: 4px solid var(--pink); padding: 8px 12px; border-radius: 0 10px 10px 0; }

.ht-play { grid-area: play; min-width: 0; }
.no-js .ht-progress, .no-js .ht-stage, .no-js .ht-tray { display: none; }

.ht-btn { min-height: 48px; padding: 10px 20px; border-radius: 999px; font: 800 1rem var(--body); cursor: pointer; border: 2px solid var(--teal); background: var(--teal); color: var(--white); box-shadow: 0 3px 0 rgba(32, 60, 69, 0.45); transition: background-color 0.15s, transform 0.15s; }
.ht-btn:hover { background: var(--teal-dark); }

/* The table */
.ht-stage { position: relative; isolation: isolate; border-radius: 28px; padding: clamp(14px, 2.5vw, 28px); background: radial-gradient(110% 80% at 50% 0%, #2d5866 0%, var(--teal-dark) 70%); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.06), 0 14px 30px rgba(32, 60, 69, 0.25); color: var(--white); }
.ht-stage img { display: block; width: 100%; height: auto; border-radius: 4.5% / 3.3%; }
.ht-players { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-weight: 800; font-size: 0.92rem; }
.ht-players li { display: flex; align-items: center; gap: 7px; padding: 3px 12px 3px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.ht-players .token { width: 22px; height: 22px; }
.ht-players b { font: 700 1.05rem var(--heading); color: var(--sun); min-width: 1ch; }
.ht-condition { width: clamp(110px, 11vw, 140px); margin: 0 auto clamp(14px, 2vw, 22px); }
.ht-flip-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; }
.ht-flip-btn:not(:disabled) .flip { animation: ht-nudge 1.6s ease-in-out infinite; }
.ht-flip-btn:disabled { cursor: default; }
@keyframes ht-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-4deg) scale(1.04); } 90% { transform: rotate(3deg) scale(1.04); } }
.ht-stage :focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.flip { aspect-ratio: 600 / 818; perspective: 1000px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
.flip .face { position: absolute; inset: 0; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--card-shadow); }
.flip .face-front { transform: rotateY(180deg); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }

.ht-spots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.8vw, 24px); }
.ht-spots:empty { display: none; }
/* In a spot the Side Effects stack below the treatment, each showing its title. */
.ht-spot { --se-w: 74cqi; --se-h: calc(var(--se-w) * 605 / 440); --se-show: 36.6cqi; container-type: inline-size; position: relative; padding: 8px; border-radius: 20px; transition: opacity 0.35s, transform 0.35s, background-color 0.2s, box-shadow 0.2s; }
.ht-spot.enter { opacity: 0; transform: translateY(18px); }
.ht-owner { min-height: 1.4em; margin: 0 0 4px; text-align: center; font-weight: 800; font-size: 0.85rem; color: var(--sun); }
.ht-cards { position: relative; }
.ht-treat { position: relative; }
.ht-target { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: none; border-radius: 10px; cursor: default; }
.ht-effects { position: relative; z-index: 2; width: var(--se-w); margin: -87cqi auto 0; min-height: 87cqi; }
.ht-effects:empty { margin-top: 0; min-height: 0; }
.ht-se { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; color: inherit; transform: rotate(var(--r)); transition: opacity 0.3s, transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.15); border-radius: 8px; }
.ht-se + .ht-se { margin-top: calc(var(--se-show) - var(--se-h)); }
.ht-se.enter { opacity: 0; transform: translateY(36px); }
.ht-se img { box-shadow: var(--card-shadow); }
.ht-se.mine { cursor: pointer; }
.ht-se.mine:hover { transform: translateY(-4px) rotate(0deg); }
.se-dot { position: absolute; top: 6%; right: 6%; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.owner-p1 .se-dot { background: var(--p1); }
.owner-p2 .se-dot { background: var(--p2); }
.owner-p3 .se-dot { background: var(--p3); }

/* Treatments you can tap: attach a Side Effect (step 3) or vote (step 4). */
.ht-spot.targetable { cursor: pointer; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.ht-spot.targetable .ht-target { cursor: pointer; }
.ht-spot.targetable:hover { background: rgba(255, 255, 255, 0.13); }
.ht-spot.selected { background: rgba(255, 213, 46, 0.16); box-shadow: inset 0 0 0 3px var(--sun); }
.ht-spot.blocked { opacity: 0.55; }
.ht-spot.win { background: rgba(255, 213, 46, 0.14); box-shadow: inset 0 0 0 3px var(--sun), 0 0 28px rgba(255, 213, 46, 0.35); }
.scored .ht-spot:not(.win) { opacity: 0.45; }

.ht-votes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; min-height: 40px; margin-top: 6px; font-weight: 800; font-size: 0.92rem; }
.tokens { display: inline-flex; gap: 6px; }
.token { display: inline-block; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.18); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.token.enter { transform: scale(0); }
.token-p1 { background: var(--p1); }
.token-p2 { background: var(--p2); }
.token-p3 { background: var(--p3); }
.vote-count { opacity: 0.9; }
.winner-tag { background: var(--sun); color: var(--ink); font: 700 0.95rem var(--heading); padding: 2px 12px; border-radius: 999px; transform: rotate(-4deg); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.winner-tag.enter { transform: scale(0); }

.points { position: absolute; z-index: 5; top: -12px; right: -10px; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font: 700 1.25rem var(--heading); color: var(--white); border: 3px solid var(--white); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transform: rotate(-8deg); transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ht-se .points { top: 2%; right: -12px; min-width: 38px; height: 38px; font-size: 1.05rem; }
.points.enter { transform: scale(0) rotate(-25deg); }
.points-p1 { background: var(--p1); }
.points-p2 { background: var(--p2); }
.points-p3 { background: var(--p3); }

/* Your hand, what to do next, and the button for the next step */
.ht-tray { position: sticky; bottom: 12px; z-index: 10; margin-top: 14px; padding: 14px 16px; border-radius: 20px; background: var(--white); box-shadow: 0 4px 14px rgba(32, 60, 69, 0.12); }
.ht-prompt { margin: 0; font-weight: 700; color: var(--teal-dark); min-height: 1.5em; }
.ht-hand { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.ht-hand:empty { display: none; }
.has-hand .ht-prompt { margin-bottom: 8px; }
.ht-card { flex: 0 0 auto; width: 118px; padding: 0; border: 0; background: none; border-radius: 9px; cursor: pointer; transition: transform 0.2s, opacity 0.25s, box-shadow 0.2s; }
.ht-card-side-effect { width: 104px; }
.ht-card img { display: block; width: 100%; height: auto; border-radius: 4.5% / 3.3%; box-shadow: 0 3px 8px rgba(20, 30, 34, 0.25); }
.ht-card.enter { opacity: 0; transform: translateY(16px); }
.ht-card:hover:not(:disabled) { transform: translateY(-5px); }
.ht-card[aria-pressed='true'] { transform: translateY(-8px); box-shadow: 0 0 0 4px var(--sun), 0 8px 16px rgba(20, 30, 34, 0.25); }
.ht-card:disabled { opacity: 0.4; cursor: default; }
.ht-actions { display: flex; justify-content: flex-end; }
.ht-actions .ht-btn { margin-top: 12px; }
.ht-tray :focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ht-flip-btn:not(:disabled) .flip { animation: none; }
  .ht *, .ht *::before { transition-duration: 0.01s !important; }
}

/* Band after How to Play */
.se-band { background: var(--pink); padding: clamp(44px, 6vw, 72px) 0; text-align: center; }
.se-band h2 { color: var(--teal-dark); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }
.se-band p { max-width: 36em; margin: 0 auto 22px; font-size: 1.12rem; }

/* Card showcase */
.se-showcase { background: var(--paper); }
.sc-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.sc-group { text-align: center; }
.sc-group h3 { display: inline-block; font-size: 1.35rem; color: var(--white); padding: 4px 18px; border-radius: 999px; margin-bottom: 8px; }
.sc-condition h3 { background: #b9606f; }
.sc-treatment h3 { background: var(--brown); }
.sc-side-effect h3 { background: var(--teal); }
.sc-group > p { color: #4c5a5e; font-weight: 700; margin-bottom: 18px; }
.sc-stack { list-style: none; margin: 0 auto; padding: 0; position: relative; width: min(250px, 100%); aspect-ratio: 100 / 240; }
.sc-side-effect .sc-stack { aspect-ratio: 100 / 180; }
.sc-stack li { position: absolute; left: 0; width: 100%; top: calc(var(--i) * 21.5%); transform: rotate(calc((var(--i) - 1) * 2.5deg)); transition: transform 0.25s; border-radius: 10px; }
.sc-side-effect .sc-stack li { width: 76%; left: 12%; }
.sc-stack li img { box-shadow: var(--card-shadow); }
.sc-stack li:hover, .sc-stack li:focus-visible { transform: translateY(-14px) rotate(0deg); z-index: 4; }
.sc-hint { display: none; }

/* Signup */
.se-signup { background: var(--teal); color: var(--white); padding: clamp(56px, 8vw, 104px) 0; }
.se-signup:focus { outline: none; }
.se-signup .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.se-signup h2 { color: var(--white); }
.se-signup-text p { font-size: 1.2rem; color: #e8f4f6; }
.se-signup .signup-card { margin: 0; color: var(--ink); }
.se-signup .form-status.success { font-weight: 400; }
.success-title { display: block; font: 700 1.5rem var(--heading); margin-bottom: 4px; }

/* FAQ and email privacy */
.se-faq h2 { margin-bottom: 24px; }
.faq details { background: var(--white); border-radius: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(32, 60, 69, 0.08); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 20px; position: relative; font: 600 1.15rem var(--heading); color: var(--teal-dark); border-radius: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center; background: var(--light); color: var(--teal); font: 700 1.3rem/1 var(--body); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 20px 18px; }
.faq a { color: var(--teal); font-weight: 700; }

@media (max-width: 960px) {
  /* The rules go below the table. Your hand stays in reach at the bottom of the screen while the table scrolls past. */
  .ht { display: flex; flex-direction: column; }
  .ht-text { margin-top: 28px; }
  .ht-tray { position: sticky; bottom: 0; z-index: 10; margin: 12px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(6px); box-shadow: 0 -4px 16px rgba(32, 60, 69, 0.14); }
  .ht-prompt { font-size: 0.98rem; }
  .ht-actions .ht-btn { margin-top: 8px; width: 100%; }
  .ht-card { width: 96px; }
  .ht-card-side-effect { width: 88px; }
}

@media (max-width: 860px) {
  .se-hero .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'text' 'art' 'more'; }
  .se-hero-text { text-align: center; }
  .se-hero .box { width: min(300px, 74vw); }
  .se-hero-art { margin: 8px 0 24px; }
  .se-facts { justify-content: center; }
  .se-status { justify-content: center; }
  .se-about .wrap, .se-signup .wrap { grid-template-columns: minmax(0, 1fr); }
  .sc-groups { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -16px; padding: 4px 16px 20px; scrollbar-width: thin; }
  .sc-group { flex: 0 0 min(76vw, 300px); scroll-snap-align: center; }
  .sc-stack { width: min(220px, 70%); }
  .sc-hint { display: block; text-align: center; color: #4c5a5e; font-weight: 700; margin: 4px 0 0; }
}

@media (max-width: 640px) {
  .ht-progress .lbl { font-size: 0.78rem; }
  .ht-progress .num { width: 36px; height: 36px; font-size: 1rem; }
  .ht-progress li + li::before { top: 17px; right: calc(50% + 21px); width: calc(100% - 36px); }
  .ht-condition { width: min(42vw, 170px); }
  .ht-spots { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Each treatment is a row: the card on the left, its Side Effects stacked on the right. */
  .ht-spot { --se-w: 43.8cqi; --se-show: 19cqi; }
  .ht-owner { text-align: left; }
  .ht-cards { display: grid; grid-template-columns: 50fr 42fr; gap: 4cqi; align-items: start; }
  .ht-effects, .ht-effects:empty { width: auto; margin: 0; min-height: 0; }
  .ht-votes { justify-content: flex-start; margin-top: 8px; }
}