:root{
  --ink:#1B1206; --cream:#FFF3DE; --paper:#fff;
  --pink:#FF5C7A; --yellow:#FFD23F; --green:#6BE3A2; --blue:#5CC8FF;
  --purple:#B07BFF; --orange:#FFAF6B; --teal:#7CE8D5;
  --bd:3.5px solid var(--ink); --pop:6px 6px 0 var(--ink); --pop-sm:4px 4px 0 var(--ink);
  --max:1040px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:Fredoka,"Avenir Next",-apple-system,Helvetica,Arial,sans-serif;
  background:var(--cream);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
h1,h2,h3,h4{font-weight:700;line-height:1.14}
.lede{font-size:17px;opacity:.72;font-weight:500}

/* nav */
.topbar{background:var(--paper);border-bottom:var(--bd);position:sticky;top:0;z-index:50}
.navrow{display:flex;align-items:center;gap:10px;padding:10px 0}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;margin-right:auto}
.logo svg{width:34px;height:34px;flex:none}
.navlinks{display:flex;gap:2px}
.nav-a{font-size:14px;font-weight:600;padding:6px 10px;border-radius:999px}
.nav-a:hover{background:var(--cream)}
@media(max-width:600px){.navlinks{display:none}}

/* hero */
.hero{padding:38px 0 26px;text-align:center;background:
  radial-gradient(circle at 12% 18%,rgba(255,210,63,.55) 0,transparent 26%),
  radial-gradient(circle at 88% 26%,rgba(92,200,255,.5) 0,transparent 26%),
  radial-gradient(circle at 50% 108%,rgba(255,92,122,.35) 0,transparent 44%)}
.hero h1{font-size:clamp(28px,6vw,46px);margin-bottom:12px}
.hero h1 em{font-style:normal;background:var(--yellow);border:3px solid var(--ink);
  border-radius:12px;padding:0 12px;display:inline-block;transform:rotate(-1.5deg)}
.hero .lede{max-width:600px;margin:0 auto}

/* game panel */
.panel{background:var(--paper);border:var(--bd);border-radius:26px;box-shadow:var(--pop);
  margin:22px auto 40px;padding:22px 18px;max-width:620px;min-height:440px;
  display:flex;flex-direction:column}
.screen{display:none;flex:1;flex-direction:column}
.screen.on{display:flex}
.ttl{text-align:center;margin-bottom:16px}
.ttl h2{font-size:23px}
.ttl p{font-size:14.5px;opacity:.65;font-weight:500;margin-top:3px}

.btn{display:inline-block;border:var(--bd);border-radius:999px;box-shadow:var(--pop-sm);
  padding:13px 26px;font-weight:700;font-size:16px;background:var(--pink);color:#fff;
  cursor:pointer;font-family:inherit;transition:transform .08s,box-shadow .08s;text-align:center}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.alt{background:var(--paper);color:var(--ink)}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.wide{display:block;width:100%;margin-top:auto}
.btnrow{display:flex;gap:10px;margin-top:14px}
.btnrow .btn{flex:1;padding:12px 10px;font-size:15px}

/* setup */
.field{margin-bottom:16px}
.field>h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;opacity:.55;margin-bottom:8px}
.players{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;gap:8px;align-items:center}
.prow input{flex:1;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);
  background:var(--cream);border:2.5px solid var(--ink);border-radius:12px;padding:11px 13px;min-width:0}
.prow input:focus{outline:0;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.xbtn{flex:none;width:38px;height:38px;border:2.5px solid var(--ink);border-radius:10px;
  background:var(--paper);font-size:18px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink)}
.xbtn:active{transform:translate(2px,2px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);padding:9px 15px;
  font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{box-shadow:3px 3px 0 var(--ink)}
.chip.t-pink[aria-pressed="true"]{background:var(--pink);color:#fff}
.chip.t-green[aria-pressed="true"]{background:var(--green)}
.chip.t-blue[aria-pressed="true"]{background:var(--blue)}
.chip.t-purple[aria-pressed="true"]{background:var(--purple);color:#fff}
.chip.t-orange[aria-pressed="true"]{background:var(--orange)}
.chip.t-yellow[aria-pressed="true"]{background:var(--yellow)}
.toggle{display:flex;align-items:center;gap:12px;border:2.5px solid var(--ink);border-radius:14px;
  padding:11px 14px;background:var(--cream);cursor:pointer}
.toggle .t{flex:1;font-weight:600;font-size:15px}
.toggle .t small{display:block;font-weight:500;font-size:12.5px;opacity:.6;margin-top:1px}
.sw{flex:none;width:48px;height:28px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);position:relative}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--ink);transition:transform .16s}
.toggle[aria-pressed="true"] .sw{background:var(--green)}
.toggle[aria-pressed="true"] .sw::after{transform:translateX(20px)}
.err{color:#C81E3C;font-weight:600;font-size:14px;text-align:center;margin-top:10px;min-height:20px}

/* reveal card */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.step{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.card{width:100%;max-width:330px;aspect-ratio:3/4;border:var(--bd);border-radius:24px;
  cursor:pointer;position:relative;background:none;padding:0;font-family:inherit;color:inherit;
  perspective:1200px;box-shadow:var(--pop)}
.card .face{position:absolute;inset:0;border-radius:21px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center;
  backface-visibility:hidden;transition:transform .42s cubic-bezier(.4,.1,.2,1)}
.card .front{background:linear-gradient(160deg,#FF9F1C 0%,#FF6B2C 48%,#F52233 100%);color:#fff}
.card .back{background:var(--ink);color:var(--cream);transform:rotateY(180deg)}
.card.open .front{transform:rotateY(-180deg)}
.card.open .back{transform:rotateY(0)}
.card .pname{font-size:clamp(26px,7vw,36px);font-weight:700;line-height:1.05;word-break:break-word}
.card .tap{font-size:15px;font-weight:600;opacity:.9}
.card .tap .ar{font-size:34px;display:block;animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.card .lbl{font-size:14px;font-weight:600;opacity:.7;letter-spacing:.04em}
.card .word{font-size:clamp(28px,8vw,44px);font-weight:700;line-height:1.05;word-break:break-word}
.card .back.imp .word{color:var(--yellow)}
.card .hint{font-size:14px;font-weight:500;opacity:.72}
.cap{text-align:center;font-size:14px;font-weight:600;line-height:1.4;max-width:360px;
  background:var(--cream);border:2.5px solid var(--ink);border-radius:14px;padding:10px 14px}

/* discuss / vote / result */
.plate{background:var(--cream);border:2.5px solid var(--ink);border-radius:16px;padding:14px 16px;
  font-size:15px;font-weight:500;line-height:1.5;margin-bottom:12px}
.plate b{font-weight:700}
.big{font-size:clamp(24px,7vw,34px);font-weight:700;text-align:center;line-height:1.15;margin:10px 0}
.votes{display:flex;flex-direction:column;gap:8px}
.vbtn{border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);padding:13px 16px;
  font-family:inherit;font-weight:600;font-size:16px;text-align:left;cursor:pointer;color:var(--ink)}
.vbtn[aria-pressed="true"]{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.res{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px}
.res .em{font-size:56px;line-height:1}

/* content sections */
.sec{padding:38px 0;border-top:var(--bd)}
.sec h2{font-size:clamp(22px,4.4vw,30px);margin-bottom:8px}
.sec h3{font-size:17px;margin-bottom:4px}
.sec p{font-size:16px;opacity:.78;margin-bottom:14px;max-width:70ch}
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:20px}
.step-c{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;padding:16px;box-shadow:var(--pop-sm)}
.step-c .n{display:inline-block;background:var(--yellow);border:2.5px solid var(--ink);border-radius:8px;
  padding:0 9px;font-weight:700;margin-bottom:8px}
.step-c p{font-size:14.5px;margin:0}
.faq details{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:13px 16px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;font-weight:700}
.faq details[open] summary::after{content:'–'}
.faq p{font-size:15px;margin:9px 0 0}
footer{border-top:var(--bd);background:var(--paper);padding:24px 0;text-align:center;font-size:14px;opacity:.7}

/* language picker */
.langpick{display:flex;align-items:center;gap:5px;border:2.5px solid var(--ink);border-radius:999px;
  padding:5px 10px;background:var(--paper);font-size:14px;font-weight:600}
.langpick select{font-family:inherit;font-weight:600;font-size:14px;border:0;background:none;
  color:inherit;cursor:pointer;outline:0;max-width:78px}
[dir="rtl"] .logo{margin-right:0;margin-left:auto}
.article h3{font-size:19px;margin:22px 0 6px}
.article .lede{margin-bottom:6px;max-width:70ch}
.cta-line{margin-top:26px}