/* ---------------------------------------------------------------- Azınlık (js/games/azinlik.js)
   A game-show card the whole room plays: the question under a spotlight, three big options in
   their own colours, a countdown ring; at the reveal the bars race and the least picked option
   lights up in gold. The layout follows the card's own width (container query on .az). */
#azinlik-root { padding: 12px 16px 0; }
#azinlik-root[hidden] { display: none; }
/* in the room head: a game that leaves the room open is news, not a warning */
.game-pill.calm { background: var(--surface-2); color: var(--text-2); }
.az { --opt-a: #ff6b5e; --opt-b: #22c3ad; --opt-c: #8b6cff; --gold: #ffd166; --az-ink: #f4f3ff; --az-dim: rgba(244, 243, 255, .7);
  display: grid; gap: 8px; container: az / inline-size; }
.az-show { position: relative; overflow: hidden; display: grid; align-content: start; gap: clamp(14px, 1.7cqw, 24px);
  padding: clamp(18px, 2.6cqw, 36px) clamp(20px, 3cqw, 42px); min-height: clamp(300px, 42cqw, 600px); border-radius: var(--radius);
  color: var(--az-ink);
  background:
    radial-gradient(110% 70% at 50% -25%, rgba(255, 209, 102, .22), transparent 60%),
    radial-gradient(60% 55% at 0% 110%, rgba(139, 108, 255, .28), transparent 70%),
    radial-gradient(60% 55% at 100% 110%, rgba(34, 195, 173, .2), transparent 70%),
    linear-gradient(160deg, #262052, #15132e 72%);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .07); }

.az-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.az-brand { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(13px, 1.15cqw, 17px); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.az-brand svg { width: 1.5em; height: 1.5em; fill: rgba(255, 255, 255, .5); }
.az-brand svg .hot { fill: var(--opt-a); }
.az-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.az-meta span { font-size: clamp(12px, 1.1cqw, 16px); font-weight: 700; padding: .25em .85em; border-radius: 999px; background: rgba(255, 255, 255, .09); font-variant-numeric: tabular-nums; }
.az-meta span:empty { display: none; }

.az-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.az-q { margin: 0; font-size: clamp(20px, 3.8cqw, 50px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; }
.az-show[data-phase="intro"], .az-show.final { align-content: center; }
.az-show[data-phase="intro"] .az-q { font-size: clamp(26px, 5.4cqw, 66px); animation: az-pop .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.az-sub { margin: -6px 0 0; color: var(--az-dim); font-size: clamp(14px, 1.4cqw, 19px); line-height: 1.45; }
.az-sub:empty { display: none; }

/* The countdown ring */
.az-timer { position: relative; width: clamp(64px, 7.6cqw, 104px); height: clamp(64px, 7.6cqw, 104px); flex: none; }
.az-timer[hidden] { display: none; }
.az-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.az-timer .track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 6; }
.az-timer .arc { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .2s; }
.az-secs { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(21px, 2.5cqw, 36px); font-weight: 900; font-variant-numeric: tabular-nums; }
.az-timer.low .arc { stroke: #ff5d5d; }
.az-timer.low .az-secs { color: #ff8a80; animation: az-tick 1s steps(1) infinite; }

/* The three options: a list (letter, text, share in one row); side by side as cards when each
   gets enough room for its text */
.az-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.2cqw, 18px); }
.az-options[hidden] { display: none; }
.az-opt { --oc: var(--opt-a); position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "letter text pct"; align-items: center; gap: 10px; min-height: 68px; padding: 16px 14px 12px;
  border-radius: 16px; text-align: left;
  color: inherit; font: inherit; cursor: pointer; background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .1);
  transition: transform .15s, border-color .15s, background-color .15s, opacity .3s, box-shadow .2s, filter .3s; }
.az-opt.o1 { --oc: var(--opt-b); }
.az-opt.o2 { --oc: var(--opt-c); }
.az-opt:not(:disabled):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--oc) 70%, transparent);
  background: color-mix(in srgb, var(--oc) 14%, transparent); }
.az-opt:not(:disabled):active { transform: translateY(0) scale(.98); }
.az-opt:focus-visible { outline: 3px solid var(--oc); outline-offset: 2px; }
.az-opt:disabled { cursor: default; }
.az-opt.picked { border-color: var(--oc); background: color-mix(in srgb, var(--oc) 22%, transparent); transform: translateY(-2px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc) 25%, transparent), 0 14px 30px -14px var(--oc); }
.az-options.answered .az-opt:not(.picked) { opacity: .72; }
.az-letter { grid-area: letter; position: relative; z-index: 1; width: clamp(36px, 4cqw, 58px); height: clamp(36px, 4cqw, 58px);
  border-radius: 28%; display: grid; place-items: center; font-size: clamp(17px, 1.9cqw, 27px); font-weight: 900; background: var(--oc); color: #15132e; }
.az-text { grid-area: text; position: relative; z-index: 1; font-size: clamp(16px, 1.9cqw, 26px); font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.az-pct { grid-area: pct; position: relative; z-index: 1; font-size: clamp(22px, 2.9cqw, 42px); font-weight: 900; font-variant-numeric: tabular-nums; }
.az-pct:empty { display: none; }
.az-tag { position: absolute; z-index: 1; top: 5px; right: 10px; font-size: clamp(10px, .95cqw, 13px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--oc); }
.az-tag:empty { display: none; }
.az-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--oc) 58%, transparent), color-mix(in srgb, var(--oc) 32%, transparent)); }
.az-opt.revealed { transform: none; box-shadow: none; }
.az-opt.win { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 209, 102, .25), 0 0 44px -6px rgba(255, 209, 102, .6); animation: az-win .7s ease both; }
.az-opt.win .az-tag { color: var(--gold); }
.az-opt.lose { opacity: .5; filter: saturate(.45); }
.az-options.void .az-opt.revealed { opacity: 1; filter: none; }

/* Under the options: the live count and my part */
.az-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.az-count { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(13px, 1.2cqw, 17px); font-weight: 700; color: var(--az-dim); font-variant-numeric: tabular-nums; }
.az-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: az-live 1.6s infinite; }
.az-count:empty::before { display: none; }
.az-count.bump { animation: az-bump .35s ease; }
.az-show:not([data-phase="question"]) .az-count::before { animation: none; background: rgba(255, 255, 255, .35); }
.az-mine { font-size: clamp(12px, 1.1cqw, 15px); font-weight: 800; padding: .25em .85em; border-radius: 999px; }
.az-mine:empty { display: none; }
.az-mine.in { background: rgba(61, 220, 132, .16); color: #6ff0a8; }
.az-mine.out { background: rgba(255, 255, 255, .08); color: var(--az-dim); }
.az-mine.host { background: rgba(255, 209, 102, .16); color: var(--gold); }

/* The verdict, the survivors */
.az-result { justify-self: center; text-align: center; font-size: clamp(18px, 2.6cqw, 34px); font-weight: 900; padding: 8px 22px; border-radius: 14px; }
.az-result:empty { display: none; }
.az-result.good { background: linear-gradient(135deg, #34db86, #19a578); color: #052a1a; }
.az-result.bad { background: rgba(255, 93, 93, .16); color: #ffa39b; }
.az-result.calm { background: rgba(255, 255, 255, .1); }
.az-result.pop { animation: az-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.az-survivors { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.az-survivors:empty { display: none; }
.az-s-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--az-dim); }
.az-faces { display: flex; align-items: center; }
.az-faces .avatar { border-color: #1f1b45; }
.az-faces .avatar + .avatar { margin-left: -8px; }
.az-more { margin-left: 6px; font-size: 13px; font-weight: 800; }

/* The end: the winners */
.az-show.final { text-align: center; }
.az-show.final .az-qrow { grid-template-columns: minmax(0, 1fr); }
.az-show.final .az-q { font-size: clamp(24px, 4.6cqw, 58px); animation: az-pop .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.az-final { display: grid; gap: 18px; justify-items: center; }
.az-final[hidden] { display: none; }
.az-podium { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 14px; }
.az-winner { display: grid; justify-items: center; gap: 6px; font-size: clamp(13px, 1.3cqw, 18px); }
.az-winner .avatar { width: clamp(56px, 6.5cqw, 88px); height: clamp(56px, 6.5cqw, 88px); font-size: clamp(18px, 2.2cqw, 30px); }
.az-podium.solo .az-winner .avatar { width: clamp(64px, 10cqw, 140px); height: clamp(64px, 10cqw, 140px); font-size: clamp(22px, 3.4cqw, 48px); }
.az-winner b { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-podium.solo .az-winner { font-size: clamp(16px, 1.8cqw, 24px); }
.az-podium.solo .avatar { box-shadow: 0 0 0 4px var(--gold), 0 0 44px rgba(255, 209, 102, .5); }
.az-winner .crown { width: clamp(42px, 5cqw, 70px); height: clamp(28px, 3.3cqw, 46px); margin-bottom: -4px; fill: var(--gold); filter: drop-shadow(0 4px 10px rgba(255, 209, 102, .6)); animation: az-crown 1.8s ease-in-out infinite; }
.az-final-buttons { justify-content: center; flex-wrap: wrap; }

.az-confetti { position: absolute; left: 0; right: 0; top: 45%; height: 0; pointer-events: none; z-index: 5; }
.az-confetti i { position: absolute; top: 0; width: 8px; height: 12px; border-radius: 2px; }
.az-bar[hidden] { display: none; }
.az-bar { flex-wrap: wrap; row-gap: 8px; }
.az-bar .g-hint { flex: 1 1 260px; }
.az-bar .g-buttons { margin-left: auto; }

@keyframes az-pop { from { transform: scale(.7); opacity: 0; } }
@keyframes az-win { 40% { transform: scale(1.035); } }
@keyframes az-tick { 50% { transform: scale(1.12); } }
@keyframes az-bump { 40% { transform: scale(1.08); } }
@keyframes az-live { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } }
@keyframes az-crown { 50% { transform: translateY(-4px) rotate(-4deg); } }

@container az (min-width: 720px) {
  /* Wide: three cards side by side; the letter and the share on top, the text under them */
  .az-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .az-opt { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "letter pct" "text text";
    align-items: start; align-content: start; min-height: clamp(116px, 15cqw, 220px); padding: clamp(14px, 1.8cqw, 26px) clamp(14px, 1.8cqw, 26px) clamp(26px, 2.8cqw, 38px); }
  .az-pct { justify-self: end; }
  .az-tag { top: auto; bottom: 7px; }
}
@container az (max-width: 560px) {
  /* Narrow: a bit tighter */
  .az-show { padding: 14px; gap: 12px; }
  .az-options { gap: 8px; }
  .az-opt { min-height: 60px; padding: 14px 12px 10px; }
  .az-letter { width: 32px; height: 32px; font-size: 15px; }
  .az-text { font-size: 15px; }
  .az-pct { font-size: 19px; }
  .az-timer { width: 54px; height: 54px; }
  .az-secs { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .az-count::before, .az-timer.low .az-secs, .az-winner .crown { animation: none; }
}