:root {
  --cyan: #25f4ee;
  --pink: #fe2c55;
  --white: #fff;
  --muted: rgba(255, 255, 255, .78);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; min-height:0; overflow: hidden; background: #080808; }
body { font-family: Inter, Arial, sans-serif; color: var(--white); }
button { color: inherit; font: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.restart-link { margin-top: 10px !important; background: transparent !important; color: rgba(255,255,255,.72) !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: none !important; }

.app-shell { position: relative; width: min(100%, 520px); height:100vh; height:100dvh; height:var(--quiz-viewport-height,100dvh); margin: auto; overflow: hidden; background: #000; box-shadow: 0 0 70px #000; }
.feed { height: 100%; overflow-y: scroll; overscroll-behavior-y: none; scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: pan-y; }
.feed::-webkit-scrollbar { display: none; }
.video-card { position: relative; height: 100%; min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #111; }
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 18%, transparent 55%, rgba(0,0,0,.72) 100%); }

.topbar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; min-height:58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(9px, env(safe-area-inset-top)) 14px 7px; pointer-events: none; background:#000; border:0; border-bottom:1px solid rgba(255,255,255,.16); box-shadow:none; text-shadow:none; }
.brand { display: flex; align-items: center; gap: 7px; padding:0; border-radius:0; background:transparent; font-weight: 800; font-size: 17px; letter-spacing: -.5px; }
.brand-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #050505; box-shadow: -3px 0 var(--cyan), 3px 0 var(--pink); font-size: 15px; }
.brand-logo { display:block; width:104px; height:31px; object-fit:contain; filter:none; }
.brand-logo-dark { width:108px; height:34px; }
.score-card { position: relative; display: flex; align-items: center; gap: 8px; min-width: 116px; padding: 7px 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.21); border-radius: 999px; background: rgba(12,12,12,.62); backdrop-filter: blur(14px); }
.coin-icon { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; filter: drop-shadow(0 2px 3px rgba(255,174,0,.5)); }
.coin-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.score-card div:nth-child(2) { display: flex; align-items: baseline; gap: 5px; }
.score-label { font-size: 7px; color: #ddd; font-weight: 700; }
#score { display: inline-block; font-size: 16px; transform-origin: center; }
#score.balance-bounce { animation: balanceBounce .65s cubic-bezier(.22, 1.55, .36, 1); }
.quiz-balance-value.balance-bounce { display:inline-block; animation:balanceBounce .65s cubic-bezier(.22,1.55,.36,1); }

.feed-tabs { position: absolute; z-index: 9; top: max(62px, calc(env(safe-area-inset-top) + 50px)); left: 50%; display: flex; align-items: center; gap: 20px; transform: translateX(-50%); white-space: nowrap; text-shadow: 0 1px 4px #000; }
.feed-tabs button { position: relative; padding: 5px 0 9px; color: rgba(255,255,255,.62); font-weight: 600; font-size: 14px; }
.feed-tabs .active { color: #fff; }
.feed-tabs .active::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 24px; height: 2px; transform: translateX(-50%); border-radius: 5px; background: #fff; }

.video-info { position: absolute; z-index: 2; left: 14px; right: 82px; bottom: 91px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.video-info h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.video-info p { margin: 0 0 10px; font-size: 13px; line-height: 1.42; }
.music { display: flex; align-items: center; gap: 8px; overflow: hidden; font-size: 12px; font-weight: 500; white-space: nowrap; }
.music span:last-child { overflow: hidden; text-overflow: ellipsis; }

.actions { position: absolute; z-index: 3; right: 10px; bottom: 84px; display: flex; flex-direction: column; align-items: center; gap: 19px; }
.action { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; text-shadow: 0 1px 5px #000; }
.action-icon { display: grid; place-items: center; width: 44px; height: 39px; transition: transform .18s, color .18s; }
.action-icon svg { width: 32px; height: 32px; overflow: visible; fill: #fff; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); }
.action.comment .action-icon svg { width: 34px; height: 34px; }
.action.share .action-icon svg { width: 35px; height: 35px; }
.action small { font-size: 11px; font-weight: 700; }
.like.liked .action-icon { transform: scale(1.16); }
.like.liked .action-icon svg { fill: var(--pink); stroke: var(--pink); }
.avatar-wrap { position: relative; margin-bottom: 3px; }
.avatar { width: 45px; height: 45px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--cyan), var(--pink)); }
.follow-dot { position: absolute; left: 50%; bottom: -7px; display: grid; place-items: center; width: 18px; height: 18px; transform: translateX(-50%); border-radius: 50%; background: var(--pink); font-size: 15px; font-weight: 800; }
.disc { position:relative; display:grid; place-items:center; width:44px; height:44px; margin-top:2px; overflow:hidden; border:1px solid #353535; border-radius:50%; background:radial-gradient(circle at center,#080808 0 3px,transparent 3.5px),repeating-radial-gradient(circle at center,transparent 0 3px,rgba(255,255,255,.12) 3.4px 3.8px,transparent 4.2px 6px),conic-gradient(from 20deg,#050505,#292929 10%,#080808 20%,#333 29%,#070707 41%,#272727 53%,#050505 66%,#303030 78%,#080808 90%,#050505); box-shadow:inset 0 0 7px #000,0 3px 9px rgba(0,0,0,.65); animation:spin 3.2s linear infinite; }
.disc::before { content:''; position:absolute; inset:3px; border-radius:50%; background:conic-gradient(from 205deg,transparent 0 12%,rgba(255,255,255,.22) 18%,transparent 25% 63%,rgba(255,255,255,.09) 69%,transparent 76%); }
.disc::after { content:''; position:relative; display:block; width:17px; height:17px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:radial-gradient(circle,#050505 0 2px,#ffd84d 2.5px 4px,#fe2c55 4.5px 8px,#25f4ee 8.5px); box-shadow:0 0 0 1px rgba(0,0,0,.8); }
@keyframes spin { to { transform: rotate(360deg); } }

.bottom-nav { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; height:calc(66px + env(safe-area-inset-bottom)); padding:6px 8px max(6px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); background: #050505; border-top: 1px solid rgba(255,255,255,.08); }
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #aaa; }
.bottom-nav .selected { color: #fff; }
.nav-icon { display: grid; place-items: center; width: 26px; height: 25px; line-height: 1; }
.nav-icon svg { width: 24px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon svg .icon-fill { fill: currentColor; stroke: currentColor; }
.profile-icon { display: grid; place-items: center; }
.profile-icon svg { width: 23px; height: 23px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav small { font-size: 9px; }
.bottom-nav .create { justify-self: center; align-self: center; width: 46px; height: 29px; border-radius: 8px; color: #000; background: #fff; box-shadow: -5px 0 var(--cyan), 5px 0 var(--pink); }
.bottom-nav .create span { display: grid; place-items: center; }
.bottom-nav .create svg { width: 23px; height: 23px; fill: none; stroke: #000; stroke-width: 2.4; stroke-linecap: round; }
.reward-overlay { position: absolute; z-index: 25; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; background: rgba(0,0,0,.76); backdrop-filter: blur(2px); pointer-events: none; transition: opacity .22s, visibility .22s; }
.reward-overlay.show { visibility: visible; opacity: 1; }
.reward-content { position: relative; display: flex; min-width: 280px; flex-direction: column; align-items: center; overflow: visible; padding: 20px; opacity: 0; transform: scale(.75) translateY(18px); }
.reward-overlay.show .reward-content { animation: rewardPop 1.5s cubic-bezier(.2,.8,.25,1) both; }
.reward-kicker { margin-bottom: 7px; color: #ffd43b; font-size: 13px; font-weight: 800; letter-spacing: 2.5px; text-shadow: 0 0 14px rgba(255,212,59,.55); }
.reward-copy { font-size: 19px; font-weight: 600; }
#rewardValue { margin-top: 7px; font-size: 35px; font-weight: 800; letter-spacing: -1.5px; background:none; background-clip:border-box; -webkit-background-clip:border-box; color:#fff; filter:drop-shadow(0 3px 12px rgba(0,0,0,.35)); }
.reward-shine { position: fixed; z-index: 2; top: 0; bottom: 0; left: -35vw; width: 24vw; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.04) 15%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.04) 85%, transparent); filter: blur(5px); pointer-events: none; }
.reward-overlay.show .reward-shine { animation: shinePass .8s .42s ease-in-out both; }
.flying-reward { position: absolute; z-index: 40; margin: 0; color: #fff; font-size: 35px; font-weight: 800; letter-spacing: -1.5px; text-shadow:0 3px 12px rgba(0,0,0,.5); pointer-events: none; will-change: transform, opacity; }
@keyframes rewardPop { 0% { opacity: 0; transform: scale(.75) translateY(18px); } 20%, 82% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(.96) translateY(-5px); } }
@keyframes shinePass { from { left: -35vw; } to { left: 120vw; } }
@keyframes balanceBounce { 0% { transform: scale(1); } 34% { transform: scale(1.42) translateY(-3px); color: #ffd43b; text-shadow: 0 0 14px rgba(255,212,59,.75); } 58% { transform: scale(.88); } 76% { transform: scale(1.12); } 100% { transform: scale(1); } }

@media (min-width: 521px) { body { background: #181818; } }

/* Quiz VibeUp */
.quiz-card { --card-dark:#12192c; --card-accent:#25f4ee; position:relative; display:grid; width:100%; height:100%; min-height:100%; place-items:center; overflow:hidden; padding:105px 17px 82px; scroll-snap-align:start; scroll-snap-stop:always; background:radial-gradient(circle at 80% 18%, color-mix(in srgb,var(--card-accent) 35%,transparent),transparent 30%),radial-gradient(circle at 8% 85%,color-mix(in srgb,var(--card-accent) 20%,transparent),transparent 27%),linear-gradient(145deg,var(--card-dark),#050505 72%); }
.quiz-card::before { content:''; position:absolute; inset:0; opacity:.13; background-image:radial-gradient(circle,#fff 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(to bottom,#000,transparent 65%); }
.quiz-decoration { position:absolute; top:105px; right:-25px; display:grid; width:125px; height:125px; place-items:center; transform:rotate(12deg); border:1px solid color-mix(in srgb,var(--card-accent) 40%,transparent); border-radius:36px; color:color-mix(in srgb,var(--card-accent) 45%,transparent); font-size:95px; font-weight:800; }
.quiz-panel { position:relative; z-index:2; width:100%; max-width:440px; padding:25px 18px 21px; border:1px solid rgba(255,255,255,.13); border-radius:25px; background:rgba(5,5,8,.58); box-shadow:0 22px 65px rgba(0,0,0,.38); backdrop-filter:blur(13px); }
.quiz-meta { display:flex; justify-content:space-between; color:var(--card-accent); font-size:10px; font-weight:800; letter-spacing:1.2px; }
.question-progress { height:3px; margin:11px 0 24px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.12); }
.question-progress span { display:block; height:100%; border-radius:inherit; background:var(--card-accent); box-shadow:0 0 10px var(--card-accent); }
.quiz-panel h1 { max-width:360px; margin:0; font-size:clamp(23px,6.5vw,31px); line-height:1.13; letter-spacing:-.8px; }
.quiz-instruction { margin:11px 0 20px; color:rgba(255,255,255,.62); font-size:12px; }
.answers { display:grid; gap:10px; }
.answer { --result-width:0%; position:relative; display:grid; grid-template-columns:35px 1fr auto 18px; align-items:center; gap:10px; width:100%; min-height:56px; padding:8px 12px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:14px; color:#fff; background:rgba(255,255,255,.075); text-align:left; font-size:13px; font-weight:600; transition:transform .16s,border-color .16s,background .16s; }
.answer > :not(.answer-fill) { position:relative; z-index:2; }
.answer-fill { position:absolute; z-index:1; inset:0 auto 0 0; width:0; border-radius:13px; background:color-mix(in srgb,var(--card-accent) 32%,rgba(255,255,255,.06)); transition:width .85s cubic-bezier(.2,.8,.2,1); }
.answer.show-result .answer-fill { width:var(--result-width); }
.answer-percent { min-width:31px; opacity:0; color:#fff; font-size:12px; font-weight:800; text-align:right; transform:translateX(5px); transition:opacity .25s .25s,transform .25s .25s; }
.answer.show-result .answer-percent { opacity:1; transform:translateX(0); }
.answer.show-result svg { display:none; }
.answer:not(:disabled):active { transform:scale(.975); }
.answer:hover { border-color:color-mix(in srgb,var(--card-accent) 65%,white); background:color-mix(in srgb,var(--card-accent) 14%,transparent); }
.answer:disabled { cursor:default; }
.answer.chosen { border-color:var(--card-accent); background:color-mix(in srgb,var(--card-accent) 22%,rgba(0,0,0,.4)); box-shadow:0 0 18px color-mix(in srgb,var(--card-accent) 22%,transparent); }
.answer.chosen .answer-fill { background:color-mix(in srgb,var(--card-accent) 58%,rgba(255,255,255,.1)); }
.answer-letter { display:grid; width:31px; height:31px; place-items:center; border-radius:50%; color:#050505; background:#fff; font-size:12px; font-weight:800; }
.answer svg { width:18px; fill:none; stroke:rgba(255,255,255,.7); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.final-card { background:radial-gradient(circle at 50% 35%,rgba(255,201,48,.22),transparent 34%),linear-gradient(145deg,#19130a,#050505 72%); }
.final-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }
.trophy { display:grid; width:78px; height:78px; margin-bottom:19px; place-items:center; border:2px solid #ffe77b; border-radius:50%; color:#fff6bd; background:linear-gradient(145deg,#ffd94c,#d98b00); box-shadow:0 0 45px rgba(255,193,31,.32); font-size:35px; }
.final-kicker { color:#ffd94c; font-size:11px; font-weight:800; letter-spacing:2px; }
.final-content h1 { margin:8px 0; font-size:42px; }
.final-content p { margin:0 0 21px; color:rgba(255,255,255,.68); font-size:14px; }
.final-content strong { font-size:40px; color:#ffd94c; }
.final-content small { margin:4px 0 28px; color:rgba(255,255,255,.55); }
.final-content button { padding:13px 24px; border-radius:999px; color:#fff; background:var(--pink); font-size:13px; font-weight:800; }
.quiz-actions { z-index:4; bottom:82px; }
.official-avatar { display:grid; width:45px; height:45px; place-items:center; border:2px solid #fff; border-radius:50%; background:#050505; box-shadow:-3px 0 var(--cyan),3px 0 var(--pink); }
.official-avatar img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.official-avatar span { font-size:20px; font-weight:900; text-shadow:-2px 0 var(--cyan),2px 0 var(--pink); }

/* Comentários em gaveta, no padrão visual do TikTok */
.comments-overlay { position:fixed; z-index:100; inset:0; display:flex; align-items:flex-end; visibility:hidden; background:rgba(0,0,0,.48); opacity:0; transition:opacity .22s,visibility .22s; }
.comments-overlay.show { visibility:visible; opacity:1; }
.comments-sheet { width:100%; height:min(72dvh,620px); display:flex; flex-direction:column; overflow:hidden; color:#161616; background:#fff; border-radius:16px 16px 0 0; transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.comments-overlay.show .comments-sheet { transform:translateY(0); }
.comments-handle { width:38px; height:4px; margin:7px auto 2px; border-radius:99px; background:#d6d6d6; }
.comments-header { position:relative; min-height:45px; display:grid; place-items:center; flex-shrink:0; border-bottom:1px solid #eee; }
.comments-header strong { font-size:13px; font-weight:700; }
.comments-close { position:absolute; top:4px; right:9px; width:36px; height:36px; color:#222; font-size:29px; line-height:1; }
.comments-list { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:8px 14px 12px; scrollbar-width:none; }
.comments-list::-webkit-scrollbar { display:none; }
.fake-comment { display:grid; grid-template-columns:38px 1fr 34px; gap:10px; padding:9px 0; }
.fake-comment>img { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#eee; }
.comment-body { min-width:0; }
.comment-body strong { display:block; margin:0 0 3px; color:#777; font-size:12px; font-weight:600; }
.comment-body p { margin:0 0 5px; color:#171717; font-size:13px; line-height:1.35; }
.comment-body small { color:#999; font-size:10px; font-weight:600; }
.comment-like { align-self:start; display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 0; color:#999; }
.comment-like span { font-size:20px; line-height:1; }
.comment-like small { font-size:9px; }
.comment-like.liked { color:var(--pink); }
.comments-compose { min-height:58px; display:grid; grid-template-columns:34px 1fr 30px; align-items:center; gap:9px; padding:8px 13px max(8px,env(safe-area-inset-bottom)); border-top:1px solid #eee; background:#fff; }
.comments-compose img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.comments-compose span { padding:10px 13px; border-radius:999px; background:#f2f2f3; color:#999; font-size:12px; }
.comments-compose button { color:#555; font-size:19px; }
.share-toast { position:fixed; z-index:140; left:50%; bottom:88px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.96); color:#111; box-shadow:0 8px 28px rgba(0,0,0,.35); font-size:12px; font-weight:800; opacity:0; transform:translate(-50%,10px); transition:opacity .2s,transform .2s; pointer-events:none; white-space:nowrap; }
.share-toast.show { opacity:1; transform:translate(-50%,0); }
.action.share.shared .action-icon { color:var(--cyan); }
.quiz-post-info { position:absolute; z-index:3; left:14px; right:78px; bottom:83px; display:flex; flex-direction:column; gap:5px; text-shadow:0 1px 5px #000; pointer-events:none; }
.quiz-post-info strong { font-size:14px; }
.quiz-post-info > span { font-size:11px; line-height:1.3; }
.quiz-post-info .quiz-music { margin-top:2px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quiz-panel { margin-bottom:92px; }
.feed.is-advancing { scroll-snap-type:none; }
.feed.is-advancing .quiz-card { will-change:transform; }

@media (max-height:700px){
 .topbar{min-height:52px;padding-top:max(6px,env(safe-area-inset-top))}
 .brand-logo-dark{height:29px}
 .score-card{padding:5px 10px}
 .quiz-card{padding:78px 14px 72px}
 .quiz-panel{margin-bottom:64px;padding:17px 15px 15px;border-radius:20px}
 .question-progress{margin:8px 0 14px}
 .quiz-panel h1{font-size:clamp(20px,5.8vw,26px)}
 .quiz-instruction{margin:7px 0 12px}
 .answers{gap:7px}
 .answer{min-height:46px;padding:6px 10px}
 .quiz-actions{bottom:74px;gap:11px}
 .quiz-post-info{bottom:74px}
}

/* Cabeçalho simplificado e resumo do perfil dentro do card */
.topbar{justify-content:center;min-height:62px;padding:max(10px,env(safe-area-inset-top)) 14px 8px}
.topbar .score-card{display:none}
.brand{justify-content:center;width:100%}
.brand-logo-dark{width:116px;height:38px}
.feed-tabs{display:none}
.quiz-card{padding-top:74px}
.quiz-panel{max-width:400px;margin-bottom:78px;padding:15px 15px 16px;border-radius:21px}
.quiz-account-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-3px 0 12px;padding:8px 9px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.07)}
.quiz-account-user{display:flex;align-items:center;gap:8px;min-width:0}
.quiz-account-photo{width:34px;height:34px;flex:0 0 34px;border:1.5px solid rgba(255,255,255,.8);border-radius:50%;object-fit:cover;background:#242428}
.quiz-account-handle{max-width:170px;overflow:hidden;color:#fff;font-size:12px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.quiz-account-balance{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0}
.quiz-account-balance small{color:rgba(255,255,255,.58);font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.quiz-account-balance strong{color:#fff;font-size:15px;font-weight:800;white-space:nowrap}
.question-progress{margin:8px 0 16px}
.quiz-panel h1{font-size:clamp(21px,5.8vw,28px)}
.quiz-instruction{margin:8px 0 13px}
.answers{gap:8px}
.answer{min-height:50px;padding:7px 10px}
@media(max-height:700px){
 .quiz-card{padding-top:66px}
 .quiz-panel{margin-bottom:58px;padding:12px 13px 13px}
 .quiz-account-strip{margin-bottom:9px;padding:6px 8px}
 .quiz-account-photo{width:30px;height:30px;flex-basis:30px}
 .answer{min-height:43px}
}