/* Phone screens (modern mobile browsers) */
html { font-size: 16px; }
body.phone { min-height: 100%; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
#app { min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#view { display: flex; flex-direction: column; padding: 18px 18px 22px; }

/* header */
#top { padding: 12px 16px; gap: 10px; background: rgba(0, 0, 0, .18); }
#top img { width: 38px; height: 38px; border-radius: 50%; }
#top .nm { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#top .score { margin-left: auto; font-weight: 900; font-size: 16px; background: rgba(255, 255, 255, .1); padding: 6px 12px; border-radius: 99px; white-space: nowrap; }
.lang-toggle { display: flex; background: rgba(255, 255, 255, .1); border-radius: 99px; padding: 3px; flex: none; }
.lang-toggle button { font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 99px; color: var(--muted); }
.lang-toggle button.on { background: #fff; color: var(--bg); }
#tbar { height: 6px; background: rgba(255, 255, 255, .1); }
#tbar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff4fa3, #ffc93c); transform-origin: left; }
#tbar.urgent #tbar-fill { background: #ff5d62; }

/* generic */
h1 { font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.12; }
h2 { font-size: 22px; font-weight: 800; line-height: 1.2; }
.muted { color: var(--muted); }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mtauto { margin-top: auto; }
.tc { text-align: center; }
.big-btn { width: 100%; padding: 18px; border-radius: 18px; font-size: 20px; font-weight: 900; background: linear-gradient(135deg, #ff4fa3, #8b5cf6); box-shadow: 0 8px 24px rgba(255, 79, 163, .4); }
.big-btn:active { transform: scale(.98); }
.big-btn[disabled] { opacity: .45; box-shadow: none; }
.ghost-btn { padding: 12px 18px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-size: 15px; font-weight: 700; color: var(--muted); }
.logo { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #ff4fa3, #8b5cf6); font-size: 32px; font-weight: 900; line-height: 84px; text-align: center; margin: 0 auto; box-shadow: 0 0 40px rgba(255, 79, 163, .55); animation: floaty 3s ease-in-out infinite; }

/* language */
.lang-pick button { width: 100%; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .08); font-size: 22px; font-weight: 800; margin-top: 14px; border: 2px solid rgba(255, 255, 255, .12); }
.lang-pick button:active { background: rgba(255, 255, 255, .18); }
.lang-pick .flag { display: inline-block; width: 30px; height: 20px; border-radius: 4px; vertical-align: -3px; margin-right: 12px; }
.flag-ua { background: linear-gradient(#0057b7 50%, #ffd700 50%); }
.flag-en { background: #012169; position: relative; overflow: hidden; }
.flag-en:before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 6px; background: #fff; }
.flag-en:after { content: ''; position: absolute; left: 0; right: 0; top: 8.5px; height: 3px; background: #c8102e; }

/* join */
.field { width: 100%; padding: 16px 18px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .07); color: #fff; font-size: 20px; font-weight: 700; font-family: inherit; outline: none; -webkit-user-select: text; user-select: text; }
.field:focus { border-color: var(--pink); }
.label { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 20px 0 10px; }
.avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.av { position: relative; border-radius: 50%; padding: 3px; border: 3px solid transparent; transition: transform .15s; }
.av img { width: 100%; height: auto; border-radius: 50%; }
.av.sel { border-color: #fff; transform: scale(1.08); box-shadow: 0 0 18px rgba(255, 255, 255, .5); }
.av.taken { opacity: .2; pointer-events: none; }

/* lobby */
.me-big { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); animation: floaty 3s ease-in-out infinite; }
.waiting-dots span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; margin: 0 4px; animation: pulse 1s infinite; opacity: .7; }
.waiting-dots span:nth-child(2) { animation-delay: .2s; } .waiting-dots span:nth-child(3) { animation-delay: .4s; }
.mini-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mini-players img { width: 34px; height: 34px; border-radius: 50%; }

/* question */
.q-meta { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.q-text { font-size: 22px; font-weight: 800; line-height: 1.25; margin-top: 8px; }
.q-text.small { font-size: 17px; }
.q-img { max-height: 26vh; max-width: 100%; border-radius: 14px; margin: 14px auto 0; }
.hint { font-size: 14px; color: var(--muted); margin-top: 6px; font-weight: 700; }
.choices { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; flex: 1 1 auto; }
.choices.two-col { display: grid; grid-template-columns: 1fr 1fr; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px 16px; border-radius: 18px; font-size: 19px; font-weight: 800; text-align: left; box-shadow: 0 5px 0 rgba(0, 0, 0, .25); transition: transform .1s, opacity .2s; }
.choices.big .choice { flex: 1 1 0; }
.choice:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.choice .shape { font-size: 26px; }
.choice.dark { color: #2a1a00; }
.choice img.ci { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; }
.choice img.ca { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.choices.two-col .choice { flex-direction: column; justify-content: center; text-align: center; padding: 12px 8px; font-size: 16px; }
.choices.two-col .choice img.ci { width: 100%; height: 22vw; }
.choice.picked { outline: 4px solid #fff; outline-offset: 2px; }
.choice .tick { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--green); padding: 4px; }
.choices.dim .choice:not(.picked) { opacity: .35; }

/* states */
.state-card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.result-ico { width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .95); padding: 22px; margin-bottom: 18px; animation: popIn .5s ease-out both; }
.result-ico svg { width: 100%; height: 100%; }
.res-ok { background: linear-gradient(160deg, #1fa463, #0f6e44) !important; }
.res-no { background: linear-gradient(160deg, #e5484d, #96202a) !important; }
.res-none { background: linear-gradient(160deg, #4b4470, #261f45) !important; }
.res-vote { background: linear-gradient(160deg, #8b5cf6, #4c1d95) !important; }
.delta-big { font-size: 46px; font-weight: 900; margin-top: 10px; animation: popIn .5s .15s ease-out both; }
.streak { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .25); padding: 6px 14px; border-radius: 99px; font-weight: 800; margin-top: 12px; color: #ffd18a; }
.streak svg { width: 18px; height: 18px; }
.answer-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; font-weight: 800; font-size: 17px; margin-top: 8px; max-width: 100%; }
.answer-chip .shape { font-size: 20px; }
.answer-chip img { width: 30px; height: 30px; border-radius: 50%; }
.rank-line { font-size: 18px; font-weight: 800; margin-top: 20px; background: rgba(0, 0, 0, .22); padding: 10px 18px; border-radius: 14px; }
.place-big { font-size: 92px; font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 6px 30px rgba(255, 201, 60, .45); animation: popIn .6s ease-out both; }
.medal { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 14px; line-height: 120px; font-size: 56px; font-weight: 900; color: #3d2600; }
.medal.m1 { background: radial-gradient(circle at 30% 30%, #fff1b8, #ffc93c 45%, #d48806); box-shadow: 0 0 40px rgba(255, 201, 60, .6); }
.medal.m2 { background: radial-gradient(circle at 30% 30%, #fff, #c9cfe3 45%, #8a93ad); }
.medal.m3 { background: radial-gradient(circle at 30% 30%, #ffe0c4, #e08e54 45%, #9c4f1e); }

/* overlay / toast */
#overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 40; background: rgba(15, 7, 38, .88); text-align: center; padding: 30px; }
#overlay .spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: spin 1s linear infinite; margin-bottom: 16px; }
#overlay .ico { width: 64px; height: 64px; margin-bottom: 14px; }
#toast { position: fixed; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 45; background: #fff; color: var(--bg); border-radius: 14px; padding: 14px 16px; font-weight: 800; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }