/* Menti — player (phone) screen, mobile-first */
:root {
  --house: #1E3932;
  --deep: #0E2A22;
  --green: #00704A;
  --mint: #D4E9E2;
  --gold: #E8B84A;
  --opt-a: #E0304E;
  --opt-b: #1D6FD8;
  --opt-c: #D08A00;
  --opt-d: #2E9E3E;
  --good: #1F9D55;
  --bad: #D2323F;
  --ink: #10201B;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --top-h: 52px;
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body.player {
  margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--font); color: #fff;
  background: radial-gradient(700px 500px at 100% 0, rgba(0, 168, 98, .3), transparent 60%), linear-gradient(170deg, var(--house), var(--deep));
  background-attachment: fixed;
}
[hidden] { display: none !important; }
.opt-a { --opt: var(--opt-a); }
.opt-b { --opt: var(--opt-b); }
.opt-c { --opt: var(--opt-c); }
.opt-d { --opt: var(--opt-d); }
.shape { fill: currentColor; }

.p-top {
  position: sticky; top: 0; z-index: 5; height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 16px; padding-top: env(safe-area-inset-top);
  background: rgba(0, 0, 0, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-weight: 700;
}
.p-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-score { flex: none; background: #fff; color: var(--house); padding: .25rem .75rem; border-radius: 99px; font-weight: 800; font-variant-numeric: tabular-nums; }

.p-main { max-width: 560px; margin: 0 auto; }
.view {
  min-height: calc(100dvh - var(--top-h)); padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; animation: viewIn .35s ease-out both;
}
#vLoading, #vJoin, #vNoCode { min-height: 100dvh; }
.view-center { justify-content: center; align-items: center; text-align: center; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

h1 { font-size: 1.75rem; font-weight: 850; line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.015em; }
.lead { font-size: 1.1rem; color: var(--mint); margin: 0 0 .5rem; line-height: 1.45; }
.hint { font-size: .9rem; color: var(--mint); opacity: .75; margin: .5rem 0 0; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .8rem; color: var(--mint); margin: 0 0 .4rem; }

.logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 900; font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 1.5rem; }
.logo-mark { width: 1.5em; height: 1.5em; border-radius: 9px; background: conic-gradient(var(--opt-a) 0 25%, var(--opt-b) 0 50%, var(--opt-c) 0 75%, var(--opt-d) 0); }

.spinner { margin: auto; width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- join ---------- */
#vJoin { justify-content: center; }
.join-head { margin-bottom: 1.5rem; }
.join-form { background: #fff; color: var(--ink); border-radius: 22px; padding: 22px 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.join-form label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 1rem; }
.join-form input {
  display: block; width: 100%; margin-top: .4rem; padding: .85rem .95rem;
  font: inherit; font-size: 1.1rem; font-weight: 600; color: var(--ink);
  border: 2px solid #DDE5E1; border-radius: 12px; background: #F7FAF8;
}
.join-form input:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(0, 112, 74, .15); }
.form-error { background: #FDE6E8; color: #8E1C25; font-weight: 600; padding: .7rem .9rem; border-radius: 10px; margin: 0 0 1rem; }
.p-btn {
  width: 100%; border: 0; cursor: pointer; padding: 1rem; border-radius: 14px;
  background: var(--green); color: #fff; font: inherit; font-size: 1.15rem; font-weight: 800;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2);
}
.p-btn:active { transform: translateY(1px); }
.p-btn:disabled { opacity: .6; }

/* ---------- waiting ---------- */
.wait-shapes { display: flex; gap: 14px; margin-bottom: 2rem; }
.wait-shapes svg { width: 38px; height: 38px; animation: hop 1.6s ease-in-out infinite; }
.wait-shapes svg:nth-child(1) { color: var(--opt-a); }
.wait-shapes svg:nth-child(2) { color: var(--opt-b); animation-delay: .15s; }
.wait-shapes svg:nth-child(3) { color: var(--opt-c); animation-delay: .3s; }
.wait-shapes svg:nth-child(4) { color: var(--opt-d); animation-delay: .45s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } }

/* ---------- question ---------- */
.view-question { gap: 14px; padding-top: 14px; }
.q-head { display: flex; align-items: center; gap: 12px; }
.q-count { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.q-timer { flex: 1; height: 10px; background: rgba(255, 255, 255, .15); border-radius: 99px; overflow: hidden; }
.q-timer span { display: block; height: 100%; background: #fff; transform-origin: left; border-radius: 99px; }
.q-timer span.low { background: #FFD166; }
.q-image { border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, .2); display: grid; place-items: center; max-height: 32vh; }
.q-image img { max-width: 100%; max-height: 32vh; object-fit: contain; }
.answers { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(110px, 1fr); gap: 12px; }
.answer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 18px; padding: 14px 10px; cursor: pointer;
  background: var(--opt); color: #fff; font: inherit; font-weight: 800; font-size: 1.05rem; line-height: 1.2; text-align: center;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2);
  transition: transform .12s, opacity .25s, filter .25s;
  touch-action: manipulation;
}
.answer:active:not(:disabled) { transform: scale(.96); }
.answer-shape svg { width: 34px; height: 34px; display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2)); }
.answer-text { overflow-wrap: anywhere; }
.answer:disabled { cursor: default; }
.answer.is-chosen { transform: scale(1.03); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2), 0 0 0 4px #fff; }
.answer.is-dim { opacity: .25; filter: saturate(.4); }
.answer.is-static { flex-direction: row; justify-content: flex-start; padding: 14px 18px; text-align: left; min-height: 64px; }
.answer.is-static .answer-shape svg { width: 26px; height: 26px; }

/* ---------- sent ---------- */
.sent-choice { width: 100%; max-width: 360px; margin-bottom: 1.6rem; }
.sent-choice:empty { display: none; }

/* ---------- result ---------- */
.view-result { transition: background .4s; }
.view-result.good { background: var(--good); }
.view-result.bad { background: var(--bad); }
.view-result.none { background: rgba(0, 0, 0, .2); }
.result-icon {
  width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; font-size: 64px; font-weight: 900; margin-bottom: 1.2rem;
  animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.good .result-icon { color: var(--good); }
.bad .result-icon { color: var(--bad); }
.none .result-icon { color: var(--house); }
.view-result h1 { font-size: 2.2rem; }
.result-points { font-size: 1.6rem; font-weight: 900; background: rgba(0, 0, 0, .2); padding: .3rem 1.1rem; border-radius: 99px; margin: .4rem 0 1rem; font-variant-numeric: tabular-nums; }
.result-correct { width: 100%; max-width: 360px; font-weight: 700; margin: 0 0 1rem; }
.result-correct .answer { margin-top: .5rem; }
.result-foot { font-size: 1.05rem; }
@keyframes popIn { from { transform: scale(.3); opacity: 0; } }

/* ---------- rank ---------- */
.rank-big { font-size: 5.5rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; margin: .3rem 0 .2rem; animation: popIn .6s cubic-bezier(.2, 1.4, .4, 1) both; font-variant-numeric: tabular-nums; }
.rank-big .medal { display: block; font-size: 4rem; margin-bottom: .4rem; }
.rank-score { font-size: 1.5rem; font-weight: 800; background: #fff; color: var(--house); padding: .45rem 1.3rem; border-radius: 99px; margin: .8rem 0; font-variant-numeric: tabular-nums; }
.view-rank.medal-1 .rank-big { color: var(--gold); }