/* ==========================================================================
   VIQUIZZ — Design System
   One file. Tokens first, then layout, then components.
   Mobile-first: every breakpoint is a min-width.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Base surfaces (dark is the default look) */
  --bg:#07070F;
  --bg-2:#0D0D1A;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --surface-solid:#14142A;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --text:#F4F4FA;
  --text-2:#A9A9C4;
  --text-3:#6E6E8C;

  /* Brand */
  --brand:#7C5CFF;
  --brand-2:#00E5C0;
  --brand-3:#FF4D9D;
  --hot:#FFB020;
  --ok:#22D88F;
  --bad:#FF5C72;

  --grad-brand:linear-gradient(135deg,#7C5CFF 0%,#FF4D9D 55%,#FFB020 100%);
  --grad-cool:linear-gradient(135deg,#00E5C0 0%,#4B8CFF 50%,#7C5CFF 100%);
  /* The logo: the question mark is a picture, the word next to it uses this colour. */
  --grad-logo:linear-gradient(135deg,#C544D2 0%,#9147E0 26%,#2FAECB 58%,#0FDCBE 100%);
  --logo-word:#F4F4FA;

  /* Category hues — used for card auras and category pages */
  --h-general-knowledge:268; --h-geography:170; --h-history:32;  --h-science:198;
  --h-animals:96;  --h-technology:222; --h-movies:342; --h-tv:282;
  --h-music:312;   --h-sports:8;   --h-food:22;  --h-travel:186;
  --h-cars:352;    --h-gaming:250; --h-space:216; --h-personality:318; --h-pop-culture:288;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-full:999px;
  --sp:clamp(16px,4vw,24px);
  --maxw:1180px;

  --shadow:0 18px 40px -22px rgba(0,0,0,.9);
  --shadow-lg:0 40px 80px -40px rgba(0,0,0,.95);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  --font:"DM Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  --font-display:"Bricolage Grotesque","DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  color-scheme:dark;
}

/* Light theme — only tokens change, nothing else */
:root[data-theme="light"]{
  --bg:#F6F5FB; --bg-2:#FFFFFF;
  --surface:rgba(14,10,40,.035); --surface-2:rgba(14,10,40,.06);
  --surface-solid:#FFFFFF;
  --line:rgba(14,10,40,.10); --line-2:rgba(14,10,40,.18);
  --text:#12102A; --text-2:#55527A; --text-3:#8B88A8;
  --shadow:0 18px 40px -28px rgba(30,20,90,.35);
  --shadow-lg:0 40px 80px -40px rgba(30,20,90,.35);
  --logo-word:#12333D;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0;text-wrap:balance}
[hidden]{display:none!important}
::selection{background:var(--brand);color:#fff}

/* Ambient aurora — pure CSS, no images, no repaint cost while idle */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora::before,.aurora::after{
  content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;
  filter:blur(90px);opacity:.28;will-change:transform;
}
.aurora::before{background:radial-gradient(circle,#7C5CFF,transparent 62%);top:-28vmax;left:-18vmax;animation:drift1 26s var(--ease) infinite alternate}
.aurora::after{background:radial-gradient(circle,#00E5C0,transparent 62%);bottom:-32vmax;right:-20vmax;animation:drift2 32s var(--ease) infinite alternate}
:root[data-theme="light"] .aurora::before,:root[data-theme="light"] .aurora::after{opacity:.20}
@keyframes drift1{to{transform:translate3d(16vw,10vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-14vw,-8vh,0) scale(1.2)}}

/* ---------- 2. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp)}
.stack>*+*{margin-top:var(--gap,16px)}
main{padding-bottom:96px;min-height:60vh}
.section{margin-top:clamp(36px,5.5vw,60px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.section-head h2{font-size:clamp(21px,4.4vw,30px);display:flex;align-items:center;gap:10px}
.section-head .more{font-size:14px;font-weight:600;color:var(--text-2);white-space:nowrap;transition:color .2s}
.section-head .more:hover{color:var(--text)}

/* ---------- 3. HEADER ---------- */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:12px;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.035em;flex-shrink:0}
.logo-mark{flex:0 0 auto;width:23px;height:34px;background-repeat:no-repeat;background-position:center;
  background-size:contain;transition:transform .4s var(--ease-back)}
/* logo-mark:start — the drawing below is written by tools/make_logo.py; do not edit it by hand */
.logo-mark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 136' role='img' aria-label='viquizz'%3E%3Cdefs%3E%3ClinearGradient id='vqg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0.0' stop-color='%23C544D2'/%3E%3Cstop offset='0.26' stop-color='%239147E0'/%3E%3Cstop offset='0.58' stop-color='%232FAECB'/%3E%3Cstop offset='1.0' stop-color='%230FDCBE'/%3E%3C/linearGradient%3E%3Cmask id='vqm' maskUnits='userSpaceOnUse' x='0' y='0' width='88' height='136'%3E%3Cpath d='M 12 47 L 12 30 L 30 12 L 58 12 L 76 30 L 76 48 L 46 78 L 46 100' fill='none' stroke='%23fff' stroke-width='24' stroke-linejoin='miter' stroke-miterlimit='8'/%3E%3Cpolygon points='35,113 58,111 60,134 37,136' fill='%23fff'/%3E%3Cpolygon points='-6,32.9 26,60 26,70 -6,70' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23vqm)'%3E%3Crect x='-4' y='-4' width='96' height='144' fill='url(%23vqg)'/%3E%3Cpolygon points='-3.0,-3.0 28.3,-3.0 27.5,26.5' fill='%23FFFFFF' opacity='0.36'/%3E%3Cpolygon points='-3.0,-3.0 27.5,26.5 -3.0,25.4' fill='%23FFFFFF' opacity='0.36'/%3E%3Cpolygon points='28.3,-3.0 59.7,-3.0 27.5,26.5' fill='%23FFFFFF' opacity='0.262'/%3E%3Cpolygon points='59.7,-3.0 66.9,24.7 27.5,26.5' fill='%23FFFFFF' opacity='0.173'/%3E%3Cpolygon points='59.7,-3.0 91.0,-3.0 91.0,25.4' fill='%23000000' opacity='0.061'/%3E%3Cpolygon points='59.7,-3.0 91.0,25.4 66.9,24.7' fill='%23000000' opacity='0.095'/%3E%3Cpolygon points='-3.0,25.4 27.5,26.5 -3.0,53.8' fill='%23FFFFFF' opacity='0.275'/%3E%3Cpolygon points='27.5,26.5 28.5,55.5 -3.0,53.8' fill='%23FFFFFF' opacity='0.057'/%3E%3Cpolygon points='27.5,26.5 54.3,54.0 28.5,55.5' fill='%23FFFFFF' opacity='0.037'/%3E%3Cpolygon points='66.9,24.7 91.0,25.4 54.3,54.0' fill='%23000000' opacity='0.13'/%3E%3Cpolygon points='91.0,25.4 91.0,53.8 54.3,54.0' fill='%23000000' opacity='0.057'/%3E%3Cpolygon points='-3.0,53.8 28.5,55.5 30.5,87.8' fill='%23FFFFFF' opacity='0.12'/%3E%3Cpolygon points='-3.0,53.8 30.5,87.8 -3.0,82.2' fill='%23FFFFFF' opacity='0.266'/%3E%3Cpolygon points='28.5,55.5 54.3,54.0 30.5,87.8' fill='%23FFFFFF' opacity='0.066'/%3E%3Cpolygon points='54.3,54.0 52.8,78.5 30.5,87.8' fill='%23FFFFFF' opacity='0.051'/%3E%3Cpolygon points='54.3,54.0 91.0,53.8 91.0,82.2' fill='%23000000' opacity='0.093'/%3E%3Cpolygon points='54.3,54.0 91.0,82.2 52.8,78.5' fill='%23000000' opacity='0.018'/%3E%3Cpolygon points='-3.0,82.2 30.5,87.8 -3.0,110.6' fill='%23FFFFFF' opacity='0.094'/%3E%3Cpolygon points='30.5,87.8 21.4,116.5 -3.0,110.6' fill='%23000000' opacity='0.024'/%3E%3Cpolygon points='30.5,87.8 52.8,78.5 63.0,101.9' fill='%23FFFFFF' opacity='0.11'/%3E%3Cpolygon points='30.5,87.8 63.0,101.9 21.4,116.5' fill='%23FFFFFF' opacity='0.119'/%3E%3Cpolygon points='52.8,78.5 91.0,82.2 63.0,101.9' fill='%23000000' opacity='0.016'/%3E%3Cpolygon points='91.0,82.2 91.0,110.6 63.0,101.9' fill='%23000000' opacity='0.128'/%3E%3Cpolygon points='-3.0,110.6 21.4,116.5 28.3,139.0' fill='%23000000' opacity='0.052'/%3E%3Cpolygon points='-3.0,110.6 28.3,139.0 -3.0,139.0' fill='%23000000' opacity='0.064'/%3E%3Cpolygon points='21.4,116.5 63.0,101.9 28.3,139.0' fill='%23000000' opacity='0.135'/%3E%3Cpolygon points='63.0,101.9 59.7,139.0 28.3,139.0' fill='%23000000' opacity='0.264'/%3E%3Cpolygon points='63.0,101.9 91.0,110.6 91.0,139.0' fill='%23000000' opacity='0.157'/%3E%3Cpolygon points='63.0,101.9 91.0,139.0 59.7,139.0' fill='%23000000' opacity='0.247'/%3E%3C/g%3E%3C/svg%3E")}
/* logo-mark:end */
.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.09)}
.logo-word{color:var(--logo-word);text-transform:lowercase}
.header-spacer{flex:1}
.icon-btn{width:38px;height:38px;border-radius:var(--r-full);display:grid;place-items:center;font-size:16px;
  background:var(--surface);border:1px solid var(--line);transition:all .22s var(--ease)}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-2px)}
.lang-select{height:38px;padding:0 28px 0 11px;border-radius:var(--r-full);background:var(--surface);
  border:1px solid var(--line);font-size:13.5px;font-weight:600;cursor:pointer;outline:none;
  -webkit-appearance:none;appearance:none;transition:all .22s var(--ease);max-width:52px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 17px,calc(100% - 9px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.lang-select:hover{background-color:var(--surface-2);border-color:var(--line-2)}
.lang-select option{background:var(--surface-solid);color:var(--text)}
@media (min-width:640px){.lang-select{max-width:none;padding-right:32px}}

.streak-chip{display:flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:var(--r-full);
  background:linear-gradient(135deg,rgba(255,176,32,.18),rgba(255,77,157,.14));border:1px solid rgba(255,176,32,.35);
  font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.streak-chip.dim{background:var(--surface);border-color:var(--line);color:var(--text-3);font-weight:600}

/* Search */
.search-box{position:relative;flex:1;max-width:420px}
.search-box input{width:100%;height:40px;padding:0 14px 0 38px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);outline:none;font-size:15px;transition:all .22s}
.search-box input::placeholder{color:var(--text-3)}
.search-box input:focus{border-color:var(--brand);background:var(--surface-2);box-shadow:0 0 0 4px rgba(124,92,255,.16)}
.search-box .si{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:14px;pointer-events:none}
.search-mobile{display:block}
@media (max-width:760px){ .search-box{display:none} }

/* ---------- 4. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;
  border-radius:var(--r-full);font-weight:700;font-size:16px;letter-spacing:-.01em;
  background:var(--surface-2);border:1px solid var(--line-2);
  transition:transform .2s var(--ease-back),box-shadow .25s,background .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.975)}
.btn-primary{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 12px 30px -12px rgba(124,92,255,.85)}
.btn-primary:hover{box-shadow:0 18px 40px -14px rgba(124,92,255,.95)}
.btn-ghost{background:var(--surface);border-color:var(--line)}
.btn-lg{height:58px;padding:0 34px;font-size:17px}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- 5. HERO ---------- */
.hero{padding:clamp(30px,5.5vw,56px) 0 4px;text-align:center}
.hero h1{font-size:clamp(32px,7.9vw,68px);letter-spacing:-.045em;margin-bottom:16px}
.hero h1 em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--text-2);font-size:clamp(15px,3.6vw,19px);max-width:540px;margin:0 auto 26px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:26px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat b{display:block;font-family:var(--font-display);font-size:clamp(20px,5vw,28px);font-variant-numeric:tabular-nums}
.hero-stat span{font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.09em;font-weight:600}

/* ---------- 6. QUIZ CARDS ---------- */
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.grid.g4{grid-template-columns:repeat(4,1fr)}}

.card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease),border-color .3s,background .3s;
  --hue:268}
.card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(420px 180px at 12% -10%,hsl(var(--hue) 90% 62% / .30),transparent 70%);
  transition:opacity .35s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:hsl(var(--hue) 80% 65% / .45);background:var(--surface-2)}
.card:hover::before{opacity:1}
.card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-emoji{font-size:34px;line-height:1;filter:drop-shadow(0 6px 14px hsl(var(--hue) 90% 60% / .45));
  transition:transform .45s var(--ease-back)}
.card:hover .card-emoji{transform:scale(1.14) rotate(-7deg)}
.card h3{font-size:17px;letter-spacing:-.02em}
.card p{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;flex-wrap:wrap}

.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2)}
.tag-cat{background:hsl(var(--hue) 85% 60% / .16);border-color:hsl(var(--hue) 85% 62% / .35);color:hsl(var(--hue) 90% 74%)}
:root[data-theme="light"] .tag-cat{color:hsl(var(--hue) 70% 36%)}
.tag-easy{color:#4ADE9B;border-color:rgba(74,222,155,.32);background:rgba(74,222,155,.12)}
.tag-medium{color:#FFC65C;border-color:rgba(255,198,92,.32);background:rgba(255,198,92,.12)}
.tag-hard{color:#FF7B8B;border-color:rgba(255,123,139,.32);background:rgba(255,123,139,.12)}
.tag-hot{color:#fff;background:linear-gradient(135deg,#FF4D9D,#FFB020);border-color:transparent}
.tag-new{color:#fff;background:linear-gradient(135deg,#00E5C0,#4B8CFF);border-color:transparent}
.card-done{position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(34,216,143,.18);border:1px solid rgba(34,216,143,.4);font-size:12px;color:#4ADE9B}

/* Featured / daily card */
.feature{position:relative;padding:clamp(22px,5vw,34px);border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  border:1px solid var(--line-2);background:var(--surface)}
.feature::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-brand);opacity:.16}
.feature::after{content:"";position:absolute;width:280px;height:280px;right:-70px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);z-index:-1}
.feature-label{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 13px;border-radius:var(--r-full);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:800;
  letter-spacing:.10em;text-transform:uppercase;margin-bottom:14px}
.feature h2{font-size:clamp(24px,5.6vw,38px);margin-bottom:10px}
.feature p{color:var(--text-2);max-width:520px;margin:0 0 20px;font-size:15.5px}
.feature-emoji{font-size:clamp(48px,11vw,76px);line-height:1;margin-bottom:12px;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(4deg)}}

/* Category pills */
.pills{display:flex;gap:9px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pills::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 17px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;
  transition:all .22s var(--ease);white-space:nowrap}
.pill:hover{background:var(--surface-2);transform:translateY(-2px)}
.pill.active{background:var(--grad-brand);border-color:transparent;color:#fff;font-weight:700}

/* ---------- 7. QUIZ PLAYER ---------- */
.player{max-width:660px;margin-inline:auto;padding-top:22px}
.player-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.progress{flex:1;height:7px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad-brand);
  transition:width .55s var(--ease);box-shadow:0 0 14px rgba(124,92,255,.65)}
.qcount{font-size:13px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.timer{width:44px;height:44px;flex-shrink:0;position:relative;display:grid;place-items:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:3.5}
.timer .trk{stroke:var(--surface-2)}
.timer .val{stroke:var(--brand-2);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s}
.timer.warn .val{stroke:var(--bad)}

.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,5vw,30px);
  box-shadow:var(--shadow);animation:qin .45s var(--ease) both}
@keyframes qin{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.qglyph{font-size:clamp(64px,17vw,104px);text-align:center;line-height:1.1;margin-bottom:14px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.4));animation:pop .5s var(--ease-back) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.qtext{font-family:var(--font-display);font-size:clamp(19px,4.8vw,26px);font-weight:700;letter-spacing:-.025em;
  line-height:1.28;margin-bottom:6px}
.qhint{font-size:13px;color:var(--text-3);font-weight:600;margin-bottom:18px}

.options{display:grid;gap:10px;margin-top:18px}
.opt{position:relative;display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 17px;
  border-radius:var(--r);background:var(--surface-2);border:1.5px solid var(--line);
  font-size:15.5px;font-weight:600;line-height:1.35;
  transition:transform .18s var(--ease-back),border-color .2s,background .2s}
.opt:hover:not(:disabled){border-color:var(--line-2);transform:translateX(4px)}
.opt:active:not(:disabled){transform:scale(.985)}
.opt .key{flex-shrink:0;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;font-weight:800;color:var(--text-2)}
.opt.sel{border-color:var(--brand);background:rgba(124,92,255,.14)}
.opt.sel .key{background:var(--brand);border-color:var(--brand);color:#fff}
.opt.correct{border-color:var(--ok);background:rgba(34,216,143,.15);animation:goodPulse .5s var(--ease)}
.opt.correct .key{background:var(--ok);border-color:var(--ok);color:#04231A}
.opt.wrong{border-color:var(--bad);background:rgba(255,92,114,.14);animation:shake .42s}
.opt.wrong .key{background:var(--bad);border-color:var(--bad);color:#fff}
.opt.muted{opacity:.42}
@keyframes goodPulse{0%{box-shadow:0 0 0 0 rgba(34,216,143,.5)}100%{box-shadow:0 0 0 16px rgba(34,216,143,0)}}
@keyframes shake{10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-5px)}}

/* Ranking drag list */
.rank-list{display:grid;gap:9px;margin-top:18px}
.rank-item{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r);
  background:var(--surface-2);border:1.5px solid var(--line);font-weight:600;font-size:15px;
  transition:border-color .2s,background .2s,transform .2s}
.rank-item .num{width:26px;height:26px;flex-shrink:0;border-radius:8px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800}
.rank-item .txt{flex:1}
.rank-move{display:flex;flex-direction:column;gap:2px}
.rank-move button{width:26px;height:20px;border-radius:6px;background:var(--surface);border:1px solid var(--line);
  font-size:9px;display:grid;place-items:center;color:var(--text-2);transition:all .18s}
.rank-move button:hover:not(:disabled){background:var(--brand);color:#fff;border-color:var(--brand)}
.rank-move button:disabled{opacity:.25;cursor:not-allowed}
.rank-item.correct{border-color:var(--ok);background:rgba(34,216,143,.14)}
.rank-item.wrong{border-color:var(--bad);background:rgba(255,92,114,.12)}

/* Number guess */
.guess{margin-top:20px}
.guess-input{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:var(--r-full);
  background:var(--surface-2);border:1.5px solid var(--line);transition:border-color .2s,box-shadow .2s}
.guess-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,92,255,.16)}
.guess-input input{flex:1;min-width:0;height:44px;background:none;border:0;outline:none;
  font-family:var(--font-display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.guess-input .unit{font-size:14px;font-weight:700;color:var(--text-3);padding-right:6px}
.guess-slider{width:100%;margin-top:16px;accent-color:var(--brand)}

/* Feedback */
.feedback{margin-top:18px;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface-2);animation:qin .35s var(--ease) both}
.feedback.good{border-color:rgba(34,216,143,.35);background:rgba(34,216,143,.10)}
.feedback.bad{border-color:rgba(255,92,114,.32);background:rgba(255,92,114,.09)}
.feedback b{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:16px;margin-bottom:5px}
.feedback p{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.55}
.streak-pop{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:80;pointer-events:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(22px,6vw,34px);
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:streakUp 1.1s var(--ease) forwards}
@keyframes streakUp{0%{opacity:0;transform:translate(-50%,16px) scale(.8)}22%{opacity:1;transform:translate(-50%,0) scale(1.06)}
  70%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px) scale(.95)}}

/* ---------- 8. RESULT ---------- */
.result{max-width:620px;margin-inline:auto;text-align:center;padding-top:16px}
.result-card{position:relative;padding:clamp(26px,6vw,40px) clamp(20px,5vw,34px);border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line-2);overflow:hidden;isolation:isolate;box-shadow:var(--shadow-lg);
  animation:qin .5s var(--ease) both}
.result-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-brand);opacity:.17}
.result-emoji{font-size:clamp(64px,16vw,96px);line-height:1;animation:pop .6s var(--ease-back) both;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.42))}
.result-score{font-family:var(--font-display);font-size:clamp(46px,13vw,76px);font-weight:700;letter-spacing:-.05em;
  line-height:1;margin:10px 0 2px;font-variant-numeric:tabular-nums}
.result-score small{font-size:.46em;color:var(--text-2);font-weight:600;margin-left:3px}
.result-title{font-family:var(--font-display);font-size:clamp(21px,5vw,30px);font-weight:700;margin:10px 0 8px;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.result-msg{color:var(--text-2);font-size:15.5px;margin:0 auto 20px;max-width:420px}
.result-meta{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:16px 0;margin:4px 0 18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.result-meta div{text-align:center}
.result-meta b{display:block;font-family:var(--font-display);font-size:20px;font-variant-numeric:tabular-nums}
.result-meta span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700}

.share-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.share-btn{width:46px;height:46px;border-radius:var(--r-full);display:grid;place-items:center;font-size:17px;
  background:var(--surface-2);border:1px solid var(--line);transition:all .22s var(--ease-back)}
.share-btn:hover{transform:translateY(-3px) scale(1.06);border-color:var(--line-2)}
.share-btn.wa:hover{background:#25D366;color:#fff;border-color:#25D366}
.share-btn.fb:hover{background:#1877F2;color:#fff;border-color:#1877F2}
.share-btn.x:hover{background:#000;color:#fff;border-color:#000}
.share-btn.rd:hover{background:#FF4500;color:#fff;border-color:#FF4500}
.share-btn.em:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

.review{margin-top:26px;text-align:left}
.review-item{padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);margin-bottom:9px}
.review-item .rq{font-weight:700;font-size:14.5px;margin-bottom:6px;display:flex;gap:9px;align-items:flex-start}
.review-item .rq i{font-style:normal;flex-shrink:0}
.review-item .ra{font-size:13.5px;color:var(--text-2);margin:0 0 0 25px}
.review-item .ra em{font-style:normal;color:var(--ok);font-weight:700}
.review-item .ra s{color:var(--bad);opacity:.85}

/* ---------- 9. ACCOUNT / MISC ---------- */
.save-prompt{margin-top:24px;padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px dashed var(--line-2)}
.save-prompt h4{font-size:16px;margin-bottom:4px}
.save-prompt p{font-size:13.5px;color:var(--text-2);margin:0 0 14px}
.oauth{display:grid;gap:9px}
.oauth button{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--line);font-weight:700;font-size:14.5px;transition:all .2s}
.oauth button:hover{border-color:var(--line-2);transform:translateY(-2px)}

.empty{text-align:center;padding:60px 20px;color:var(--text-2)}
.empty .e{font-size:52px;margin-bottom:12px}
.empty h3{margin-bottom:6px}

.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.chip{height:34px;padding:0 14px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line);
  font-size:13px;font-weight:600;transition:all .2s}
.chip:hover{background:var(--surface-2)}
.chip.active{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:700}

.board{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden}
.board-row{display:flex;align-items:center;gap:13px;padding:13px 17px;border-bottom:1px solid var(--line);font-size:14.5px}
.board-row:last-child{border-bottom:0}
.board-row .rk{width:28px;font-family:var(--font-display);font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
.board-row.me{background:rgba(124,92,255,.10)}
.board-row .nm{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-row .sc{font-weight:800;font-variant-numeric:tabular-nums}
.board-row:nth-child(1) .rk{color:#FFB020}.board-row:nth-child(2) .rk{color:#C9CBD8}.board-row:nth-child(3) .rk{color:#CD7F32}

.ach-grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.ach{padding:15px 12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-align:center;
  opacity:.38;filter:grayscale(1);transition:all .3s var(--ease)}
.ach.on{opacity:1;filter:none;border-color:hsl(var(--h-history) 90% 60% / .4);background:rgba(255,176,32,.09)}
.ach .ae{font-size:26px;margin-bottom:6px}
.ach b{display:block;font-size:12.5px;font-family:var(--font-display)}
.ach span{font-size:10.5px;color:var(--text-3);line-height:1.3;display:block;margin-top:3px}

/* Breadcrumbs + SEO prerendered block */
.crumbs{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--text-3);margin-bottom:14px;flex-wrap:wrap}
.crumbs a:hover{color:var(--text)}
.seo-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Publicidade.
   Com o AdSense desligado, o JavaScript nem chega a escrever o bloco: nao ha
   caixas vazias nem espaco reservado a espera de nada. Estas regras so contam
   quando ha mesmo um anuncio. */
.ad-slot{margin:26px 0;min-width:0;text-align:center}
.ad-slot .ad-label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:6px;font-weight:700}
.ad-slot ins{display:block;min-height:90px}

/* A pista.
   O botao fica por baixo da pergunta e por cima das opcoes — onde a pessoa
   ja esta a olhar quando hesita. O preco vem escrito ao lado, para ninguem
   descobrir depois que perdeu pontos. */
.hint-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.btn-hint{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-weight:700;font-size:14px;
  font-family:inherit;cursor:pointer;transition:all .2s var(--ease)}
.btn-hint:hover:not(:disabled){border-color:hsl(45 90% 60% / .55);background:rgba(255,176,32,.10)}
.btn-hint:disabled{opacity:.45;cursor:default}
.btn-hint .hi{font-size:16px;line-height:1}
.btn-hint .hint-n{min-width:20px;padding:1px 7px;border-radius:var(--r-full);background:rgba(255,176,32,.18);
  border:1px solid rgba(255,176,32,.35);font-size:12px;font-weight:800}
.btn-hint[data-empty="1"] .hint-n{background:var(--surface);border-color:var(--line);color:var(--text-3)}
.btn-hint-ad{border-style:dashed}
.hint-cost{font-size:12.5px;color:var(--text-3)}
.hint-box{margin:0 0 18px;padding:14px 16px;border-radius:var(--r);
  border:1px solid rgba(255,176,32,.38);background:rgba(255,176,32,.09);animation:fadeUp .35s var(--ease) both}
.hint-box b{display:block;font-family:var(--font-display);font-size:14px;margin-bottom:4px}
.hint-box p{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.55}
.opt.gone{opacity:.28;text-decoration:line-through;pointer-events:none}
.rank-item.locked{border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.08)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:34px 0 44px;margin-top:60px;color:var(--text-3);font-size:13.5px}
.footer-grid{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:720px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-grid h5{font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-2);margin-bottom:11px}
.footer-links{display:flex;flex-direction:column;gap:7px}
.footer-links a:hover{color:var(--text)}

/* Toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);z-index:200;
  padding:13px 22px;border-radius:var(--r-full);background:var(--surface-solid);border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);font-weight:600;font-size:14.5px;opacity:0;transition:all .4s var(--ease-back)}
.toast.on{transform:translate(-50%,0);opacity:1}

/* Confetti canvas */
#confetti{position:fixed;inset:0;z-index:150;pointer-events:none}

/* Skeleton */
.skel{border-radius:var(--r-lg);background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:220% 100%;animation:shimmer 1.3s linear infinite;height:168px}
@keyframes shimmer{to{background-position:-220% 0}}

.fade-up{animation:fadeUp .55s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Aviso de cookies do Google Analytics. So existe quando o data/google.json
   tem um numero G-; sem ele o site nao mostra aviso nenhum. Os dois botoes
   tem o mesmo peso de proposito: recusar nao pode dar mais trabalho. */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:180;max-width:620px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px;
  border-radius:var(--r-lg);background:var(--surface-solid);border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);animation:fadeUp .45s var(--ease) both}
.consent p{flex:1 1 280px;margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}
.consent p a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.consent-btns{display:flex;gap:8px;flex:0 0 auto;margin-left:auto}
.consent-btns .btn{min-width:104px}

/* ---------- conta (opcional) ---------- */
.acc{max-width:640px}
.acc-lead{color:var(--text-2);font-size:16px;line-height:1.65;margin:0 0 10px}
.acc-small{color:var(--text-2);font-size:14px;line-height:1.6;margin:0 0 14px}
.acc-tabs{margin:20px 0 14px}
.acc-box{margin:16px 0;padding:22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.acc-box h2{font-size:18px;margin:0 0 8px}
.acc-field{display:block;margin:0 0 14px}
.acc-field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.acc-field input{width:100%;height:48px;padding:0 14px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line);color:var(--text);font:inherit;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.acc-field input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,92,255,.16)}
.acc-field small{display:block;margin-top:5px;color:var(--text-3);font-size:12.5px;line-height:1.5}
.acc-check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;font-size:14px;color:var(--text-2);line-height:1.5;cursor:pointer}
.acc-check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--brand)}
.acc-err{display:none;margin:0 0 14px;padding:11px 14px;border-radius:var(--r);font-size:14px;line-height:1.5;
  background:rgba(255,92,114,.12);border:1px solid rgba(255,92,114,.4);color:var(--text)}
.acc-ok{margin:0 0 14px;padding:11px 14px;border-radius:var(--r);font-size:14px;background:rgba(34,216,143,.12);border:1px solid rgba(34,216,143,.4)}
.acc-code{margin:16px 0;padding:18px;border-radius:var(--r);text-align:center;font-family:ui-monospace,Consolas,monospace;
  font-size:clamp(18px,5.4vw,26px);letter-spacing:.08em;font-weight:700;background:var(--surface-2);border:1px dashed var(--line-2);
  user-select:all;word-break:break-all}
.acc-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.acc-row .btn{flex:1;min-width:150px;height:46px}
.acc-danger{border-color:rgba(255,92,114,.35)}
.oauth a.btn{height:46px}