/* Cepat Tepat QUIZ — participant app.
   Palette and type scale taken verbatim from the design file. */

:root {
  --red: #D8412F;      --red-dark: #A62B21;
  --yellow: #F2B233;   --yellow-dark: #C98D14;
  --green: #17795F;    --green-dark: #0F5744;
  --purple: #7C3A5E;   --purple-dark: #5A2543;
  --cream: #FFF8EC;    --ink: #2C1B12;
  --page: #EFE3D2;     --border: #E7D8C0;
  --muted: #8A7460;    --muted-2: #9A8267;
  --sand: #F6EBD8;     --warm: #FFF3DC;
  --font-head: 'Baloo 2', cursive;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  /* Lock the viewport: this is a game, not a document. */
  overscroll-behavior: none;
}

#app {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto;
}

/* --- shared pieces -------------------------------------------------------- */

.qz-btn {
  border: 0; width: 100%; cursor: pointer;
  border-radius: 18px; padding: 16px;
  font: 800 20px var(--font-head);
  color: var(--cream); background: var(--red);
  box-shadow: 0 5px 0 var(--red-dark);
  transition: transform .06s, box-shadow .06s;
}
.qz-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--red-dark); }
.qz-btn[disabled] { opacity: .55; cursor: default; }
.qz-btn.ghost {
  background: transparent; color: var(--ink);
  border: 2px solid var(--border); box-shadow: none;
}
.qz-btn.dark { background: var(--ink); box-shadow: 0 5px 0 #14100c; }

.qz-logo {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--red); box-shadow: 0 4px 0 var(--red-dark);
  display: flex; align-items: center; justify-content: center;
  font: 800 24px var(--font-head); color: var(--cream);
}
.qz-title { font: 800 26px var(--font-head); }
.qz-sub { font-size: 13px; color: var(--muted); }
.qz-mono { font-family: var(--font-mono); }

.qz-pill {
  background: #fff; border: 2px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-family: var(--font-mono); font-size: 12px; color: #6F5A46;
}
.qz-pill.dark {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}

.qz-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qz-spacer { margin-top: auto; }
.qz-stack { display: flex; flex-direction: column; gap: 12px; }

/* --- P1 PIN entry --------------------------------------------------------- */

.pin-boxes { display: flex; gap: 8px; justify-content: center; }
.pin-box {
  width: 46px; height: 60px; border-radius: 14px; background: #fff;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font: 700 28px var(--font-mono);
}
.pin-box.empty { background: var(--sand); border-color: var(--border); }
.pin-box.active { border: 3px solid var(--red); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  height: 56px; border-radius: 14px; background: #fff;
  border: 2px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: 700 24px var(--font-mono); color: var(--ink);
}
.key:active { background: var(--sand); }
.key.alt { background: var(--sand); font-size: 13px; color: var(--muted); }

/* --- P2 name and avatar --------------------------------------------------- */

.qz-input {
  width: 100%; background: #fff; border: 3px solid var(--ink);
  border-radius: 18px; padding: 16px 18px;
  font: 700 22px var(--font-body); color: var(--ink);
}
.qz-input:focus { outline: none; border-color: var(--red); }

.avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar {
  aspect-ratio: 1; border-radius: 16px; background: #fff;
  border: 2px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.avatar.sel {
  background: var(--warm); border: 3px solid var(--red);
  box-shadow: 0 4px 0 var(--red-dark);
}

/* --- P3 lobby ------------------------------------------------------------- */

.lobby-avatar {
  width: 110px; height: 110px; border-radius: 34px; background: var(--warm);
  border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 56px;
}
.card {
  background: #fff; border: 2px solid var(--border);
  border-radius: 20px; padding: 16px;
}
.note {
  background: var(--warm); border: 2px dashed #E0BE7C;
  border-radius: 16px; padding: 14px; font-size: 13px; line-height: 1.45; color: #6F5A46;
}
.note b { color: var(--ink); }

/* --- question chrome ------------------------------------------------------ */

.qhead { display: flex; align-items: center; gap: 10px; }
.progress {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.progress > i { display: block; height: 100%; background: var(--red); transition: width .3s; }

.qrow { display: flex; align-items: center; gap: 14px; }
.timer {
  width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.timer > span {
  width: 52px; height: 52px; border-radius: 50%; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font: 800 24px var(--font-head);
}
.qtext { font-size: 16px; line-height: 1.35; font-weight: 600; }

/* --- answer options ------------------------------------------------------- */

.opts { display: flex; flex-direction: column; gap: 12px; }
.opt {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 0; border-radius: 18px; padding: 16px 14px; width: 100%; text-align: left;
  font: 600 15px var(--font-body); line-height: 1.3; color: var(--cream);
}
.opt > i {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: rgba(255,248,236,.22);
  display: flex; align-items: center; justify-content: center;
  font: 800 17px var(--font-head); font-style: normal;
}
.opt.a { background: var(--red);    box-shadow: 0 5px 0 var(--red-dark); }
.opt.b { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-dark); color: var(--ink); }
.opt.b > i { background: rgba(44,27,18,.16); color: var(--ink); }
.opt.c { background: var(--green);  box-shadow: 0 5px 0 var(--green-dark); }
.opt.d { background: var(--purple); box-shadow: 0 5px 0 var(--purple-dark); }
.opt:active { transform: translateY(3px); }
.opt.chosen { outline: 4px solid var(--ink); outline-offset: 2px; }
.opt.dimmed { opacity: .38; }

.tf { display: flex; flex-direction: column; gap: 14px; }
.tf-btn {
  border: 0; cursor: pointer; border-radius: 22px; padding: 34px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 800 30px var(--font-head); color: #fff;
}
.tf-btn.yes { background: var(--green); box-shadow: 0 6px 0 var(--green-dark); }
.tf-btn.no  { background: var(--red);   box-shadow: 0 6px 0 var(--red-dark); }
.tf-btn em { font-size: 34px; font-style: normal; }

/* Polling uses neutral styling so nobody expects a score. */
.poll-opt {
  background: #fff; border: 2px solid var(--border); border-radius: 18px;
  padding: 17px 16px; font: 600 15px var(--font-body); color: var(--ink);
  cursor: pointer; width: 100%; text-align: left;
}
.poll-opt.sel {
  background: var(--warm); border: 3px solid var(--purple);
  box-shadow: 0 5px 0 var(--purple-dark); font-weight: 700;
}

/* --- P8 ordering ---------------------------------------------------------- */

.ord { display: flex; flex-direction: column; gap: 10px; }
.ord-item {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--ink); border-radius: 16px;
  padding: 12px; box-shadow: 0 4px 0 var(--border);
  touch-action: none;   /* let the drag handler own the gesture */
}
.ord-item.dragging { opacity: .5; border-style: dashed; border-color: var(--red); }
.ord-item.over { border-color: var(--red); background: var(--warm); }
.ord-num {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 800 16px var(--font-head); color: #fff;
}
.ord-text { font-size: 15px; font-weight: 600; flex: 1; line-height: 1.25; }
.ord-btns { display: flex; flex-direction: column; gap: 4px; }
.ord-btn {
  width: 34px; height: 26px; border-radius: 8px; cursor: pointer;
  background: var(--sand); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #6F5A46;
}
.ord-btn[disabled] { opacity: .3; }
.ord-grip { width: 22px; color: #C9B392; text-align: center; cursor: grab; font-size: 15px; }

/* --- P5 / P6 feedback ----------------------------------------------------- */

.fb { min-height: 100dvh; margin: -20px -18px; padding: 40px 24px; }
.fb.ok  { background: var(--green); color: #EAF7F1; }
.fb.bad { background: var(--red-dark); color: #FFEDE9; }
.fb.end { background: var(--ink); color: var(--cream); }
.fb-badge {
  width: 120px; height: 120px; border-radius: 40px; background: #EAF7F1;
  display: flex; align-items: center; justify-content: center;
  font-size: 60px; color: var(--green);
}
.fb.bad .fb-badge { background: #FFEDE9; color: var(--red-dark); }
.fb-h { font: 800 46px var(--font-head); color: #fff; text-align: center; }
.fb-pts {
  background: var(--yellow); border-radius: 999px; padding: 10px 22px;
  font: 800 26px var(--font-head); color: var(--ink); box-shadow: 0 5px 0 var(--yellow-dark);
}
.fb-row {
  display: flex; justify-content: space-between;
  background: rgba(255,255,255,.12); border-radius: 14px;
  padding: 13px 16px; font-size: 14px;
}
.fb-row b { font-family: var(--font-mono); }
.fb-key {
  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.3);
  border-radius: 18px; padding: 16px; width: 100%;
}
.streak {
  display: flex; align-items: center; gap: 8px; background: var(--ink);
  border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--cream);
}

/* --- P11 podium ----------------------------------------------------------- */

.podium-badge {
  position: absolute; bottom: -10px; right: -10px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font: 800 20px var(--font-head); color: var(--ink);
}

/* --- states --------------------------------------------------------------- */

.qz-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--cream);
  padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  z-index: 50; max-width: 88vw; text-align: center;
}
.qz-err { color: var(--red-dark); font-size: 13px; font-weight: 600; text-align: center; }

.reconnecting {
  position: fixed; inset: 0; background: rgba(44,27,18,.92); z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--cream); text-align: center; padding: 24px;
}
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid rgba(255,248,236,.25); border-top-color: var(--yellow);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}