/* Not Guess Who on a phone: whose turn, your mystery person, your board of 24 flip-down
   frames in your side's plastic, and the actions for this moment. Dark rules first, then
   the light theme. */
.gwp { --gold: #ffb800; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; font-family: "Avenir Next", "Nunito", var(--font); }
.gwp [hidden] { display: none !important; }
.s-red { --pc: #d6342c; --phi: #f0614f; --plo: #a3221b; }
.s-blue { --pc: #1f63c9; --phi: #4a8ff0; --plo: #154a9b; }
.gwp .nup-turnbar { min-height: 62px; }
.gwp .nup-turnbar.idle .avatar { width: 30px; height: 30px; font-size: 14px; }
.gwp .nup-turnbar .tclock.answer .fg { stroke: #38bdf8; }
.gwp .nup-turnbar.me .tclock.answer.urgent .fg { stroke: #fff; }

/* your person and the other player */
.gwp-top { display: flex; gap: 8px; align-items: stretch; }
.gwp-mine { flex: 1.15; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 0; border-radius: 16px; background: rgba(0,0,0,.3); color: var(--text); text-align: left; cursor: pointer; }
.gwp-mframe { flex: none; width: 44px; padding: 3px 3px 5px; border-radius: 8px; background: linear-gradient(180deg, var(--phi), var(--pc) 30%, var(--plo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.3); }
.gwp-mframe .gwcard { border-radius: 5px; }
.gwp-mframe.big { width: 116px; padding: 5px 5px 8px; border-radius: 12px; }
.gwp-mtext { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.gwp-mtext small { font-size: 10px; font-weight: 900; letter-spacing: .14em; color: var(--label-2); }
.gwp-mtext b { font-size: 21px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gwp-mtext span { font-size: 12px; color: var(--label-2); }
.gwp-opp { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 16px; background: rgba(0,0,0,.3); }
.gwp-opp .avatar { width: 32px; height: 32px; font-size: 15px; box-shadow: 0 0 0 3px var(--pc); }
.gwp-otext { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; flex: 1; }
.gwp-otext b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gwp-otext span { font-size: 12px; color: var(--label-2); }
.gwp-wins { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gwp-wins i { font-style: normal; color: var(--label-3); margin: 0 2px; }

/* the board: a plastic tray of 24 frames */
.gwp-tray { border-radius: 18px; padding: 9px 9px 8px; background: linear-gradient(180deg, var(--phi) 0%, var(--pc) 22%, var(--pc) 70%, var(--plo) 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -5px 0 rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.35); }
.gwp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px 5px; touch-action: none; user-select: none; -webkit-user-select: none; }
.gwp .gw-slot { position: relative; perspective: 260px; cursor: pointer; }
.gwp .gw-slot::before { content: ''; position: absolute; inset: 1px 1px 0; border-radius: 6px; background: rgba(0,0,0,.34); box-shadow: inset 0 4px 6px rgba(0,0,0,.45); }
.gwp .gw-door { position: relative; border-radius: 7px; padding: 3px 3px 6px; transform-origin: 50% 100%; background: linear-gradient(180deg, var(--phi), var(--pc) 30%, var(--plo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 5px rgba(0,0,0,.25); transition: transform .38s cubic-bezier(.5,0,.6,1.3), filter .3s ease; }
.gwp .gw-door .gwcard { border-radius: 4px; }
.gwp .gw-door .gwcard .gw-nm { font-size: 17cqw; }
.gwp .gw-slot.down .gw-door { transform: rotateX(62deg); filter: grayscale(.85) brightness(.55); }
.gwp .gw-slot.pop .gw-door { animation: gwp-up .42s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes gwp-up { from { transform: rotateX(55deg); } }
.gwp .gw-slot.peeking .gw-door { box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(0,0,0,.4); z-index: 2; }
.gwp-grid.guessing .gw-slot:not(.down) .gw-door { animation: gwp-wiggle 1.4s ease-in-out infinite; box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(255,184,0,.6); }
.gwp-grid.guessing .gw-slot:nth-child(odd):not(.down) .gw-door { animation-delay: -.7s; }
@keyframes gwp-wiggle { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

/* the actions for this moment */
.gwp-acts { display: flex; flex-direction: column; gap: 8px; min-height: 64px; }
.gwp-acts .btn { min-height: 52px; font-size: 17px; font-weight: 800; }
.gwp-askbtn { font-size: 19px !important; background: var(--gold) !important; color: #1b1b1b !important; box-shadow: 0 6px 18px rgba(255,184,0,.35); }
.gwp-row { display: flex; gap: 8px; }
.gwp-row .btn { flex: 1; font-size: 15px !important; padding: 10px 8px; white-space: nowrap; }
.gwp-namebtn { background: rgba(255,69,58,.18) !important; color: #ff6b61; box-shadow: inset 0 0 0 2px rgba(255,69,58,.55); }
.gwp-guessbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,184,0,.16); box-shadow: inset 0 0 0 2px var(--gold); }
.gwp-guessbar b { font-size: 18px; }
.gwp-guessbar span { flex: 1; font-size: 13px; color: var(--label-2); }
.gwp-guessbar .btn { width: auto; min-height: 40px; padding: 8px 14px; font-size: 15px; }
.gwp-waitq, .gwp-ans { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(0,0,0,.3); }
.gwp-qtext { font-size: 18px; font-weight: 800; line-height: 1.2; }
.gwp-waitq span { font-size: 14px; color: var(--label-2); }
.gwp-ans { flex-direction: row; align-items: center; gap: 10px; }
.gwp-ans span { flex: 1; font-size: 15px; font-weight: 700; color: var(--label-2); min-width: 0; }
.gwp-ans b { font-size: 18px; font-weight: 900; padding: 5px 12px; border-radius: 10px; color: #fff; background: #6b6b75; white-space: nowrap; }
.gwp-ans.yes b { background: #23a559; }
.gwp-ans.no b { background: #e0453a; }
.gwp-log { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; background: rgba(0,0,0,.22); }
.gwp-lq { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.gwp-lq span { flex: 1; min-width: 0; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gwp-lq b { font-size: 13px; font-weight: 900; padding: 3px 8px; border-radius: 7px; color: #fff; }
.gwp-lq b.yes { background: #23a559; } .gwp-lq b.no { background: #e0453a; } .gwp-lq b.none { background: #6b6b75; }
.gwp-hint { font-size: 12px; text-align: center; color: var(--label-2); opacity: .85; }
.gwp.waiting .gwp-tray { filter: saturate(.85); }

/* sheets: the answer, the question list, a guess, your person */
.gwp-ov { align-items: flex-end; }
.gwp-anssheet { gap: 12px; max-height: 92vh; }
.gwp-asker { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--label-2); }
.gwp-asker b { color: var(--text); }
.gwp-bigq { font-size: 25px; font-weight: 800; line-height: 1.18; letter-spacing: -.01em; }
.gwp-mbig { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.05); }
.gwp-mbig .gw-explain { flex: 1; min-width: 0; }
.gwp-mbig .gw-xname { font-size: 20px; }
.gwp-mbig .gw-xabout { font-size: 13px; }
.gwp-mbig .gw-xtraits span { font-size: 12px; padding: 3px 8px; }
.gwp-yn { display: flex; gap: 10px; }
.gwp-yn .btn { flex: 1; min-height: 64px !important; font-size: 24px !important; font-weight: 900; letter-spacing: .06em; color: #fff; }
.gwp-yes { background: #23a559 !important; }
.gwp-no { background: #e0453a !important; }
.gwp-qsheet { max-height: 82vh; gap: 6px; }
.gwp-qhead { display: flex; align-items: center; justify-content: space-between; }
.gwp-qhead .btn { width: auto; min-height: 40px; }
.gwp-qhint { font-size: 12px; color: var(--label-2); margin: -4px 0 4px; }
.gwp-qgroup { font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--label-2); margin: 8px 2px 0; }
.gwp-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gwp-qrow { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 10px 8px 12px; border: 0; border-radius: 14px; background: rgba(255,255,255,.07); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.gwp-qrow:active { transform: scale(.985); background: rgba(255,184,0,.2); }
.gwp-qrow span { flex: 1; min-width: 0; }
.gwp-qrow small { min-width: 26px; text-align: center; font-size: 13px; font-weight: 800; color: var(--label-2); background: rgba(255,255,255,.08); padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.gwp-qrow.asked { opacity: .6; cursor: default; }
.gwp-qrow b { font-size: 12px; font-weight: 900; padding: 3px 8px; border-radius: 7px; color: #fff; }
.gwp-qrow b.yes { background: #23a559; } .gwp-qrow b.no { background: #e0453a; }
.gwp-gcard { width: min(52vw, 210px); padding: 6px 6px 10px; border-radius: 16px; background: linear-gradient(180deg, #ffd65a, #ffb800); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: ndp-lift .25s cubic-bezier(.2,1.3,.4,1) both; }
.gwp-gcard.s-red, .gwp-gcard.s-blue { background: linear-gradient(180deg, var(--phi), var(--pc) 30%, var(--plo)); }
.gwp-gcard .gwcard { border-radius: 10px; }
.gwp-sure { background: #ff453a !important; color: #fff !important; }

/* slide to read */
.gwp-peek { position: fixed; left: 50%; top: calc(var(--safe-top, 0px) + 56px); width: min(92vw, 360px); display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 20px; background: var(--sheet-bg, #1c1c1e); color: var(--text); box-shadow: 0 18px 40px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translate(-50%, -10px) scale(.96); transition: opacity .12s ease, transform .16s ease; z-index: 35; }
.gwp-peek.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.gwp-peekcard { flex: none; width: 128px; }
.gwp-peekcard .gwcard { border-radius: 12px; }
.gwp-peekcap { flex: 1; min-width: 0; }
.gwp-peekcap .gw-xname { font-size: 20px; }
.gwp-peekcap .gw-xabout { font-size: 13px; }
.gwp-peekcap .gw-xtraits span { font-size: 11px; padding: 3px 7px; }
.gwp-peekdown { margin-top: 6px; font-size: 12px; font-weight: 800; color: #ff6b61; }
.gwp-peekdown.mine { color: var(--gold); }

/* the end of a round, and of the game */
.gwp-end { gap: 12px; }
.gwp-reveal { display: flex; gap: 18px; justify-content: center; margin: 4px 0; }
.gwp-rv { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gwp-rv small { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--label-2); text-transform: uppercase; }
.gwp-rframe { width: 128px; padding: 5px 5px 9px; border-radius: 14px; background: linear-gradient(180deg, var(--phi), var(--pc) 30%, var(--plo)); box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: gwp-flipin .8s cubic-bezier(.3,1.3,.5,1) both; }
.gwp-rv:nth-child(2) .gwp-rframe { animation-delay: .3s; }
@keyframes gwp-flipin { from { transform: perspective(600px) rotateY(160deg); } }
.gwp-rframe .gwcard { border-radius: 9px; }
.gwp-rscore { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 900; }
.gwp-rscore i { font-style: normal; color: var(--label-3); }
.gwp-rscore .s-red b { color: #f0614f; } .gwp-rscore .s-blue b { color: #4a8ff0; }

/* big moments */
.gwp-moment .big { font-family: "Avenir Next", "Nunito", var(--font); text-align: center; padding: 0 12px; }
.gwp-moment.gwm-yes .big { color: #3ddc7c; text-shadow: 5px 5px 0 #0f5c31, 10px 10px 0 rgba(0,0,0,.3); }
.gwp-moment.gwm-no .big, .gwp-moment.gwm-none .big { color: #ff6b61; text-shadow: 5px 5px 0 #7a1a14, 10px 10px 0 rgba(0,0,0,.3); }
.gwp-moment.gwm-round .big { font-size: 62px; }
.gwp-moment.gwm-right .big, .gwp-moment.gwm-wrong .big { font-size: 74px; }
.gwp-moment.gwm-none .big { font-size: 46px; }
.gwp-moment.gwm-guess .big { font-size: 64px; line-height: 1; }
.gwp-mface { width: 150px; padding: 6px 6px 10px; border-radius: 16px; background: linear-gradient(180deg, #ffd65a, #ffb800); box-shadow: 0 0 0 4px #fff, 0 20px 50px rgba(0,0,0,.45); animation: gwp-drum .3s ease-in-out infinite alternate; }
.gwp-mface .gwcard { border-radius: 10px; }
@keyframes gwp-drum { from { transform: rotate(-3deg); } to { transform: rotate(3deg) scale(1.03); } }
.gwp-moment.gwm-right .big { color: #ffd60a; }
.gwp-moment.gwm-wrong .big { color: #fff; text-shadow: 4px 4px 0 #ff453a, 8px 8px 0 rgba(0,0,0,.3); }

/* ---- light theme ---- */
[data-theme="light"] .gwp-mine, [data-theme="light"] .gwp-opp { background: rgba(255,255,255,.82); box-shadow: 0 4px 14px rgba(60,40,20,.1); }
[data-theme="light"] .gwp-waitq, [data-theme="light"] .gwp-ans, [data-theme="light"] .gwp-log { background: rgba(255,255,255,.82); box-shadow: 0 4px 14px rgba(60,40,20,.08); }
[data-theme="light"] .gwp-tray { box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -5px 0 rgba(0,0,0,.14), 0 10px 22px rgba(60,40,20,.22); }
[data-theme="light"] .gwp-namebtn { background: rgba(255,59,48,.1) !important; color: #d93a30; box-shadow: inset 0 0 0 2px rgba(255,59,48,.45); }
[data-theme="light"] .gwp-guessbar { background: rgba(255,184,0,.18); }
[data-theme="light"] .gwp-mbig { background: rgba(120,90,40,.06); }
[data-theme="light"] .gwp-qrow { background: rgba(120,120,128,.1); }
[data-theme="light"] .gwp-qrow small { background: rgba(0,0,0,.06); }
[data-theme="light"] .gwp-peek { background: #fff; box-shadow: 0 18px 40px rgba(30,40,80,.25); }
[data-theme="light"] .gwp-rscore .s-red b { color: #d6342c; } [data-theme="light"] .gwp-rscore .s-blue b { color: #1f63c9; }
[data-theme="light"] .gwp-peekdown.mine { color: #b7791f; }