/* ===========================================================
   any excuse will do — "Optimistic Pop-Art" theme
   Tweak the variables below to restyle the whole site.
   Palette leans on Hans Demeyer's optimistic brand energy.
   =========================================================== */
:root {
  --ink:        #141210;   /* near-black comic outline */
  --paper:      #fdf6e3;   /* warm comic paper         */
  --yellow:     #ffd23f;   /* pow! primary             */
  --coral:      #ff5a5f;   /* accent / excitement      */
  --sky:        #3aa8ff;   /* friendly blue            */
  --mint:       #35d0a5;   /* the "cure" / turn colour */
  --pink:       #ff8fc7;
  --shadow:     6px 6px 0 var(--ink);
  --shadow-sm:  3px 3px 0 var(--ink);
  --radius:     18px;
  --border:     4px solid var(--ink);
  font-size: 17px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  line-height: 1.5;
}

/* halftone dot texture behind everything */
.halftone-bg {
  position: fixed; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.06;
  pointer-events: none;
}

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 5vw, 48px);
  max-width: 1000px; margin: 0 auto;
}
.logo {
  display: flex; flex-direction: column; line-height: 0.82;
  text-decoration: none; transform: rotate(-3deg);
  font-family: 'Bangers', cursive; letter-spacing: 1px;
}
.logo-any    { font-size: 1.5rem; color: var(--ink); }
.logo-excuse { font-size: 2.9rem; color: var(--coral); -webkit-text-stroke: 2px var(--ink); }
.logo-will   { font-size: 1.4rem; color: var(--sky); -webkit-text-stroke: 1px var(--ink); align-self: flex-end; }

.lang-switch { display: flex; gap: 6px; }
.lang-btn {
  font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: 1px;
  background: var(--paper); border: var(--border); border-radius: 12px;
  padding: 4px 12px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .1s;
}
.lang-btn.active { background: var(--yellow); }
.lang-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- Panels ---------- */
main { max-width: 1000px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 48px) 60px; }
.panel {
  background: #fff; border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(22px, 4vw, 40px);
  margin-bottom: 40px; position: relative;
}
.panel::before {
  content: ''; position: absolute; top: -2px; left: 24px; right: 24px; height: 8px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 28px);
  opacity: .12; border-radius: 4px;
}

/* ---------- Excuse Machine ---------- */
.tagline {
  font-family: 'Bangers', cursive; font-size: clamp(2.4rem, 7vw, 4rem);
  margin: 0 0 4px; text-align: center; letter-spacing: 1px;
  color: var(--ink); text-shadow: 3px 3px 0 var(--yellow);
}
.subtitle { text-align: center; margin: 0 0 24px; font-weight: 600; opacity: .8; }

.situations { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.chip {
  font-family: 'Archivo'; font-weight: 800; font-size: .95rem;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .1s, background .1s;
}
.chip:hover { transform: translateY(-2px) rotate(-1deg); }
.chip.active { background: var(--sky); color: #fff; }
.chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* free-text reason input */
.reason-divider { text-align: center; margin: 6px 0 16px; position: relative; }
.reason-divider span {
  background: #fff; padding: 0 12px; position: relative; z-index: 1;
  font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; opacity: .55;
}
.reason-divider::before {
  content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 3px;
  background: var(--ink); opacity: .12; border-radius: 3px;
}
.reason-box { display: flex; gap: 10px; max-width: 620px; margin: 0 auto 26px; }
.reason-box input {
  flex: 1; font-family: 'Archivo'; font-size: 1rem; padding: 12px 16px;
  border: var(--border); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-sm);
}
.reason-box input:focus { outline: none; background: #fff; }
.reason-box .btn { white-space: nowrap; }

.excuse-stage { display: flex; justify-content: center; margin: 10px 0 26px; }
.speech-bubble {
  position: relative; max-width: 640px; width: 100%;
  background: var(--yellow); border: var(--border); border-radius: 26px;
  box-shadow: var(--shadow); padding: 30px 30px 26px; text-align: center;
}
.speech-bubble::after {
  content: ''; position: absolute; bottom: -26px; left: 60px;
  border-width: 26px 22px 0 0; border-style: solid;
  border-color: var(--ink) transparent transparent transparent;
}
.speech-bubble::before {
  content: ''; position: absolute; bottom: -18px; left: 64px;
  border-width: 18px 15px 0 0; border-style: solid;
  border-color: var(--yellow) transparent transparent transparent; z-index: 2;
}
.excuse-text {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 800; margin: 0 0 8px;
  transition: opacity .18s;
}
.excuse-text.swap { opacity: 0; }
.excuse-meta { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; opacity: .55; }

.machine-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  font-family: 'Bangers', cursive; letter-spacing: 1px; font-size: 1.2rem;
  border: var(--border); border-radius: 14px; padding: 10px 22px;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .08s;
  background: #fff;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--coral); color: #fff; }
.btn-ghost   { background: #fff; color: var(--ink); }
.btn-share   { background: var(--sky); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* POW burst on click */
.burst { position: relative; }
.burst.pow::after {
  content: 'POW!'; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Bangers'; color: var(--yellow); -webkit-text-stroke: 2px var(--ink);
  font-size: 2rem; animation: pow .5s ease-out forwards; pointer-events: none;
}
@keyframes pow {
  0% { transform: scale(.2) rotate(-12deg); opacity: 0; }
  40% { transform: scale(1.3) rotate(6deg); opacity: 1; }
  100% { transform: scale(2) rotate(0); opacity: 0; }
}

/* ---------- The Turn ---------- */
.turn-card {
  margin-top: 28px; background: var(--mint); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; color: var(--ink);
  animation: rise .3s ease-out;
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.turn-intro { font-family: 'Bangers'; font-size: 1.6rem; margin: 0 0 12px; }
.turn-question { font-weight: 800; font-size: 1.15rem; margin: 0 0 14px; }
.turn-action { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 14px 16px; font-weight: 600; }
.turn-signoff { margin: 16px 0 0; font-style: italic; font-weight: 700; }

/* ---------- Section headers ---------- */
.section-title { font-family: 'Bangers'; font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 4px; letter-spacing: 1px; }
.section-sub { font-weight: 600; opacity: .8; margin: 0 0 22px; }

/* ---------- Quiz ---------- */
.quiz-progress { height: 12px; background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.quiz-progress-fill { height: 100%; width: 0; background: var(--sky); transition: width .3s; }
.quiz-question { font-weight: 800; font-size: 1.25rem; margin: 0 0 18px; }
.quiz-options { display: grid; gap: 12px; }
.quiz-option {
  text-align: left; font-family: 'Archivo'; font-weight: 700; font-size: 1rem;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .08s, background .1s;
}
.quiz-option:hover { transform: translate(-1px,-1px); background: var(--pink); }
.quiz-option:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

.archetype-card {
  text-align: center; background: var(--yellow); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; margin-bottom: 22px;
}
.archetype-emoji { font-size: 3.4rem; display: block; }
.archetype-name { font-family: 'Bangers'; font-size: 2.2rem; margin: 6px 0 2px; letter-spacing: 1px; }
.archetype-tagline { font-weight: 800; font-style: italic; margin: 0 0 12px; }
.archetype-teaser { font-weight: 600; margin: 0; }

.unlock { text-align: center; }
.unlock-pitch { font-size: 1.1rem; margin: 0 0 16px; }
.antidote-text { background: var(--mint); border: var(--border); border-radius: var(--radius); padding: 22px; font-weight: 700; box-shadow: var(--shadow); }

/* ---------- Forms ---------- */
.email-form, .submit-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.submit-form { max-width: 100%; }
input[type=email], input[type=text], textarea, select {
  font-family: 'Archivo'; font-size: 1rem; padding: 12px 14px;
  border: 3px solid var(--ink); border-radius: 12px; background: #fff;
}
textarea { min-height: 84px; resize: vertical; }
.consent { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; font-weight: 600; }
.consent input { margin-top: 3px; }
.submit-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.submit-row input { flex: 1; min-width: 120px; }
.form-status { font-weight: 700; min-height: 1.2em; margin: 10px 0 0; }
.form-status.ok { color: #1a8f5f; }
.form-status.err { color: var(--coral); }

/* ---------- Leaderboard ---------- */
.leaderboard { display: grid; gap: 12px; margin-top: 26px; }
.lb-item {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.lb-text { font-weight: 700; }
.lb-by { font-size: .78rem; opacity: .6; font-weight: 700; }
.lb-vote { font-family: 'Bangers'; font-size: 1.2rem; background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px; padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.lb-vote:active { transform: translate(2px,2px); }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 30px 20px 50px; font-weight: 600; }
.site-footer a { color: var(--coral); font-weight: 800; }
.footer-tag { font-family: 'Bangers'; font-size: 1.3rem; letter-spacing: 1px; margin-top: 6px; }

/* ---------- Share card (off-screen export) ---------- */
.share-render { position: fixed; left: -9999px; top: 0; }
.share-card {
  width: 600px; height: 600px; background: var(--yellow); position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 60px; text-align: center; overflow: hidden; border: 12px solid var(--ink);
}
.share-halftone { position: absolute; inset: 0; background-image: radial-gradient(var(--ink) 2px, transparent 2.5px); background-size: 28px 28px; opacity: .08; }
.share-quote { font-family: 'Archivo'; font-weight: 900; font-size: 2rem; line-height: 1.25; z-index: 2; }
.share-brand { position: absolute; bottom: 40px; font-family: 'Bangers'; font-size: 1.6rem; letter-spacing: 2px; color: var(--coral); -webkit-text-stroke: 1.5px var(--ink); }

@media (max-width: 560px) {
  .machine-actions, .submit-row { justify-content: center; }
  .btn { font-size: 1.05rem; }
}