.c-red { color: #ef4444; } .c-yellow { color: #ca8a04; }
.hexboard { width: 100%; max-width: 560px; display: block; margin: 0 auto; }
.hexboard .edge.red { fill: #ef4444; }
.hexboard .edge.yellow { fill: #eab308; }
.hexboard .cell polygon { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; transition: fill .4s, transform .3s; }
.hexboard .cell text { fill: var(--text); font-family: var(--font-ar); font-weight: 900; font-size: 30px; pointer-events: none; }
.hexboard .cell.can { cursor: pointer; }
.hexboard .cell.can:hover polygon { fill: rgb(var(--primary-rgb) / .25); stroke: var(--primary); }
.hexboard .cell.own-red polygon { fill: #ef4444; stroke: #b91c1c; }
.hexboard .cell.own-yellow polygon { fill: #eab308; stroke: #a16207; }
.hexboard .cell.own-red text { fill: #fff; } .hexboard .cell.own-yellow text { fill: #1d1600; }
.hexboard .cell.is-active polygon { stroke: var(--primary); stroke-width: 5; animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 50% { stroke-opacity: .4; } }
.q-card { text-align: center; margin-top: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.q-card h3 { margin: 0; font-size: clamp(1.15rem, 3vw, 1.5rem); line-height: 1.7; max-width: 640px; text-wrap: balance; }
.q-card h3.big { font-size: 2rem; }
.letter { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--primary); color: var(--on-primary); font-size: 2.2rem; font-weight: 900; box-shadow: 0 10px 30px -10px var(--glow); }
.turn { padding: .3rem .9rem; border-radius: 99px; font-weight: 900; font-size: .85rem; }
.turn.t-red { background: #ef4444; color: #fff; } .turn.t-yellow { background: #eab308; color: #1d1600; }
.buzz { min-width: 240px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: scale(1.04); } }
.ans-form { display: flex; gap: .5rem; width: min(460px, 100%); }
.ans-form .input { height: 52px; font-size: 1.1rem; }
.teams-mini { display: flex; flex-direction: column; gap: .8rem; }
.tcol { border-radius: 14px; padding: .7rem; background: var(--bg-2); border: 2px solid var(--line-soft); display: flex; flex-direction: column; gap: .35rem; }
.tcol.t-red.is-turn { border-color: #ef4444; } .tcol.t-yellow.is-turn { border-color: #eab308; }
.tcol .th { display: flex; justify-content: space-between; font-weight: 900; }
.tcol.t-red .th b { color: #ef4444; } .tcol.t-yellow .th b { color: #ca8a04; }
.tcol .th span { font-size: 1.3rem; }
.tm { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; padding: .25rem .4rem; border-radius: 8px; }
.tm svg { width: 15px; height: 15px; color: var(--text-mute); }
.tm small { color: var(--text-mute); }
.tm.is-buzz { background: var(--tint); outline: 1px solid var(--primary); }
.turn.t-host { background: var(--primary); color: var(--on-primary); }
.q-top { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.big-timer .rt-timer { font-size: 1.5rem; min-width: 74px; height: 56px; border-radius: 18px; justify-content: center; }
.big-timer { display: flex; justify-content: center; }
.q-card > .big-timer { margin-top: .4rem; }
.voice-turn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 16px; font-size: 1.1rem; background: var(--surface-2); border: 2px solid var(--line); animation: pop .35s var(--ease); }
.voice-turn svg { width: 22px; height: 22px; color: var(--primary); }
.voice-turn.t-red { border-color: #ef4444; } .voice-turn.t-yellow { border-color: #eab308; }
.judge { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.judge .btn { min-width: 130px; }
.peek { position: relative; margin-top: .2rem; padding: .55rem 1rem; border-radius: 12px; border: 1px dashed var(--line); color: var(--text-mute); font-size: .82rem; font-weight: 700; user-select: none; -webkit-user-select: none; touch-action: none; }
.peek .peek-a { display: none; color: var(--text); font-size: 1rem; font-weight: 900; }
.peek:active { color: transparent; }
.peek:active .peek-a { display: block; position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface-3); border-radius: 12px; border: 1px solid var(--primary); }
/* buzzer order */
.press-box { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.press-box h4 { margin: 0 0 .5rem; font-size: .9rem; color: var(--text-mute); }
.presses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-width: 420px; margin-inline: auto; }
.presses li { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-inline-start: 5px solid var(--line); font-size: .92rem; animation: pop .3s var(--ease); }
.presses li.t-red { border-inline-start-color: #ef4444; } .presses li.t-yellow { border-inline-start-color: #eab308; }
.presses li.now { background: rgb(var(--primary-rgb) / .14); border-top-color: var(--primary); border-bottom-color: var(--primary); }
.presses li.out { opacity: .45; text-decoration: line-through; }
.presses .pn { width: 1.8em; text-align: center; font-weight: 900; }
.presses small { margin-inline-start: auto; color: var(--text-mute); font-weight: 800; }
.presses em { font-style: normal; font-size: .75rem; font-weight: 900; padding: .1rem .5rem; border-radius: 99px; background: var(--primary); color: var(--on-primary); }
.presses i { font-style: normal; font-size: .75rem; color: var(--text-mute); }
.voice-turn .vt-first { font-size: .8rem; font-weight: 900; padding: .15rem .55rem; border-radius: 99px; background: rgb(0 0 0 / .25); }
.voice-turn.flash { animation: vflash .9s ease 2; }
@keyframes vflash { 50% { box-shadow: 0 0 0 6px rgb(var(--primary-rgb) / .35); transform: scale(1.03); } }
.buzz.q { margin-top: .8rem; }