/* Baitproof polish: the look on top of style.css. Frosted glass over a living background, one pastel-purple tone with flat fills, soft light that follows the pointer.
   Nothing here changes layout or behaviour; remove this file and the site is the plain version. Strict CSP: no inline styles, fonts are served from /static. */

@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* one tone: pastel purple. --violet and --cyan keep their old names but are now lighter shades of the same purple, so anything that still mixes them stays in tune */
  --bg:#FAF8FF;--surface:#fff;--ink:#1D1630;--muted:#6C6585;--faint:#9D97B3;--line:#E9E4F5;--line-2:#D8D0EC;
  --brand:#7A5CD0;--brand-hover:#684BBE;--brand-ink:#fff;--brand-soft:#F0EAFC;--brand-deep:#5B3FB0;
  --violet:#A58CE8;--cyan:#C9B8F4;--info-soft:#F3EEFD;
  --sans:"Inter Variable",ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --r:22px;
  --grad:var(--brand);                                              /* the names stay, the fills are flat */
  --grad-soft:color-mix(in srgb,var(--brand) 13%,transparent);
  --glass:color-mix(in srgb,var(--surface) 66%,transparent);--glass-strong:color-mix(in srgb,var(--surface) 82%,transparent);
  --glass-line:color-mix(in srgb,#fff 62%,var(--line));--glass-hi:rgba(255,255,255,.75);
  --glow-brand:color-mix(in srgb,var(--brand) 38%,transparent);
  --shadow:0 1px 0 var(--glass-hi) inset,0 10px 34px -14px color-mix(in srgb,var(--brand) 30%,transparent),0 2px 6px rgba(16,24,40,.05);
  --shadow-up:0 1px 0 var(--glass-hi) inset,0 26px 60px -20px color-mix(in srgb,var(--brand) 38%,transparent),0 6px 16px rgba(16,24,40,.08)}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F0B1A;--surface:#171226;--ink:#F3F0FB;--muted:#A9A2BF;--faint:#7D7596;--line:#2A2340;--line-2:#3A3156;
  --brand:#A78BFA;--brand-hover:#BBA5FC;--brand-ink:#140E26;--brand-soft:#231A3C;--brand-deep:#CDBDFB;
  --violet:#8B6FE0;--cyan:#6F55C2;--info-soft:#1C1530;
  --glass:color-mix(in srgb,var(--surface) 58%,transparent);--glass-strong:color-mix(in srgb,var(--surface) 78%,transparent);
  --glass-line:rgba(255,255,255,.10);--glass-hi:rgba(255,255,255,.07);
  --shadow:0 1px 0 var(--glass-hi) inset,0 14px 40px -16px rgba(0,0,0,.7);--shadow-up:0 1px 0 var(--glass-hi) inset,0 30px 70px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04)}}

body{font-feature-settings:"cv11","ss01";font-optical-sizing:auto}
::selection{background:color-mix(in srgb,var(--violet) 30%,transparent)}
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand) 40%,transparent) transparent}

/* ---- the living background (ripple.js). Without it the CSS glow from style.css stays. */
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
html.fx-on .glow{display:none}

/* ---- navigation: a floating glass bar */
.bar{background:var(--glass);border-color:var(--glass-line);box-shadow:var(--shadow-up);-webkit-backdrop-filter:saturate(1.8) blur(22px);backdrop-filter:saturate(1.8) blur(22px)}
.brand svg{filter:drop-shadow(0 4px 10px var(--glow-brand));transition:transform .4s var(--ease)}
.brand:hover svg{transform:rotate(-8deg) scale(1.08)}
nav a,nav button{transition:background .25s,color .25s,transform .2s var(--ease)}
nav a:hover,nav button:hover{background:var(--grad-soft);color:var(--ink)}
nav a[aria-current=page]{background:var(--grad-soft);color:var(--brand-deep);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent)}
nav .cta{background:var(--brand);color:var(--brand-ink);box-shadow:0 8px 20px -8px var(--glow-brand);position:relative;overflow:hidden}
nav .cta:hover{background:var(--brand-hover);color:var(--brand-ink);opacity:1;filter:none}
.lang summary{background:var(--glass-strong);border-color:var(--glass-line)}
.lang ul{background:var(--glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-color:var(--glass-line);box-shadow:var(--shadow-up)}

/* ---- headline */
h1{font-weight:800;letter-spacing:-.045em}
.home h1{font-size:clamp(2.2rem,4.7vw,3.35rem);line-height:1.02;margin-bottom:.28em}
.lead{font-size:1.12rem;line-height:1.5}
.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--brand);animation:none}
.dots{background:none;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--brand) 38%,transparent);padding-bottom:.14em}
.pill,.trust-note b,.mode-tag{backdrop-filter:blur(10px)}
.pill{background:var(--glass);border-color:var(--glass-line)}

/* ---- cards: frosted glass with a lit edge, and a soft light that follows the pointer (--mx / --my are set by fx.js) */
.card{position:relative;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border:1px solid var(--glass-line);box-shadow:var(--shadow);transition:box-shadow .3s,transform .35s var(--ease),border-color .3s}
.card:hover{border-color:color-mix(in srgb,var(--brand) 26%,var(--glass-line))}
.card,.mode-card,.mock{isolation:isolate} /* the light sits above the glass and below the content, without touching any child's position */
.card::before,.mode-card::before,.mock::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--brand) 13%,transparent),transparent 62%)}
.card:hover::before,.mode-card:hover::before,.mock:hover::before{opacity:1}
.card.drop{background:color-mix(in srgb,var(--brand-soft) 80%,transparent)}

/* ---- buttons: one flat tone with a soft glow, and a ripple where you press (fx.js adds .rip) */
.btn,button.big,a.big{position:relative;overflow:hidden;background:var(--grad);border-color:transparent;border-radius:14px;min-height:50px;padding:0 26px;font-weight:650;letter-spacing:-.005em;
  box-shadow:0 12px 26px -12px var(--glow-brand),0 2px 6px color-mix(in srgb,var(--brand) 30%,transparent);transition:transform .25s var(--ease),box-shadow .3s,background .25s}
.btn:hover,button.big:hover,a.big:hover{background:var(--brand-hover);filter:none;box-shadow:0 18px 34px -12px var(--glow-brand),0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent)}
.btn.sec,a.sec{background:var(--glass-strong);color:var(--ink);border-color:var(--glass-line);box-shadow:var(--shadow);filter:none}
.btn.sec:hover,a.sec:hover{background:var(--glass-strong);filter:none;border-color:color-mix(in srgb,var(--brand) 45%,var(--glass-line))}
.ghost,.speak,.inbtn,.choice{position:relative;overflow:hidden;background:var(--glass-strong);border-color:var(--glass-line);transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}
.ghost:hover,.speak:hover,.inbtn:hover{background:var(--grad-soft);border-color:color-mix(in srgb,var(--brand) 50%,transparent);box-shadow:0 8px 20px -10px var(--glow-brand)}
.rip{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);background:rgba(255,255,255,.26);animation:rip .5s ease-out forwards}
.ghost .rip,.speak .rip,.inbtn .rip,.choice .rip,.btn.sec .rip{background:color-mix(in srgb,var(--brand) 16%,transparent)}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---- the text box: lights up when you click into it */
textarea,input{background:var(--glass-strong);border-color:var(--glass-line);border-radius:16px;transition:border-color .25s,box-shadow .3s,background .25s}
textarea:focus,input:focus{background:var(--glass-strong);border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent),0 16px 36px -14px var(--glow-brand)}

/* ---- the main box gets a clear purple edge while you are typing in it */
#check-form::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .4s;background:var(--brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#check-form:focus-within::after{opacity:.75}

/* ---- the hero demo phone floats and tilts toward the pointer (--rx / --ry) */
.home-demo{perspective:1100px}
.mock{position:relative;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(22px);backdrop-filter:saturate(1.6) blur(22px);border-color:var(--glass-line);border-radius:26px;box-shadow:var(--shadow-up);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s var(--ease);animation:floaty 7s ease-in-out infinite}
.mock-top{border-bottom-color:var(--glass-line)}
.mock-body{position:relative}
.bubble{background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:18px;box-shadow:0 6px 18px -10px rgba(16,24,40,.25)}
.mock-tags span{background:var(--grad-soft);color:var(--brand-deep);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent)}
.mock-verdict{box-shadow:0 10px 24px -12px currentColor}
.mock-cap{opacity:.8}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* ---- the verdict card */
#result,#live{scroll-margin-top:96px} /* scrolled into view, it sits below the floating bar */
.card.result{background:var(--glass-strong)}
.result .banner{position:relative;overflow:hidden}
.v-scam .banner,.v-likely_scam .banner{background:var(--bad-soft)}
.v-safe .banner{background:var(--ok-soft)}
.v-unsure .banner{background:var(--warn-soft)}
.vicon{box-shadow:0 10px 24px -8px currentColor;position:relative;z-index:1}
.result .banner span:last-child{position:relative;z-index:1}
.panel{background:var(--glass);border-color:var(--glass-line);border-radius:16px}
.chips li{background:var(--grad-soft);color:var(--brand-deep);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 16%,transparent)}
.pill b,.trust-note b{color:var(--brand-deep)}
.result .ev li,.result .lk li{animation:rise .5s var(--ease) both}
.result .ev li:nth-child(2){animation-delay:.05s}.result .ev li:nth-child(3){animation-delay:.1s}.result .ev li:nth-child(4){animation-delay:.15s}.result .ev li:nth-child(5){animation-delay:.2s}.result .ev li:nth-child(6){animation-delay:.25s}.result .ev li:nth-child(n+7){animation-delay:.3s}
.ev li{background:var(--glass);border-color:var(--glass-line)}
.live{background:var(--glass-strong)}

/* ---- the help panel on results that need it */
.help{margin:14px 0;padding:14px 18px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass)}
.help summary{cursor:pointer;font:650 1rem var(--sans);list-style-position:inside}
.help h4{margin:14px 0 4px;font:650 .72rem var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.help ul{margin:0;padding-left:1.2em}.help li{margin:4px 0}
.help a{font-weight:650;overflow-wrap:anywhere}
.help p{margin:10px 0 0}

/* ---- Train, Games, Records: cards that rise and tilt */
.mode-grid,.tiles,.kpis{perspective:1100px}
.mode-card,.tile,.kpi{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);border-color:var(--glass-line);box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.mode-card:hover:enabled,a.mode-card:hover{transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:var(--shadow-up);border-color:color-mix(in srgb,var(--brand) 45%,var(--glass-line))}
.mode-card.hot{background:color-mix(in srgb,var(--brand) 12%,var(--glass))}
.tile:hover{transform:translateY(-3px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:var(--shadow-up)}
.phone{background:var(--glass-strong);border-color:var(--glass-line);border-radius:26px;box-shadow:var(--shadow-up)}
.choice:hover:enabled{box-shadow:0 14px 28px -14px currentColor}

/* ---- the small screens' bottom bar and the footer */
.tabs{background:var(--glass)!important;-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-color:var(--glass-line)!important}
footer.wrap{color:var(--muted)}

/* ---- the switch for the moving background (shown by ripple.js only where the effect can run) */

/* ---- calm: no floating, shine or tilt for people who asked for less motion */
@media (prefers-reduced-motion:reduce){
  .mock{animation:none;transform:none}.mode-card,.tile,.kpi{transform:none!important}
  .btn::after,button.big::after,a.big::after,nav .cta::after{display:none}.rip{display:none}.result .ev li,.result .lk li{animation:none}}
@media (hover:none){.mock{animation-duration:9s}.card::before,.mode-card::before,.mock::before{display:none}}
@media (max-width:560px){.home h1{font-size:clamp(2.1rem,10vw,2.8rem)}.mock{animation:none}}

/* ---- remaining two-colour fills from style.css, made flat */
progress.xpbar::-webkit-progress-value{background:var(--brand)}progress.xpbar::-moz-progress-bar{background:var(--brand)}
.g2{stop-color:var(--brand)}
.share .bigpct{background:none;-webkit-text-fill-color:currentColor;color:var(--brand)}
.btn,button.big,a.big{color:var(--brand-ink)}

/* ---- who you are, in the header: your avatar and nickname, or "Log in" */
.me{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 8px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-strong);color:var(--ink);font:650 .85rem var(--sans);text-decoration:none;white-space:nowrap;max-width:11rem;transition:background .2s,transform .2s var(--ease)}
.me:hover{background:var(--grad-soft)}
.me .avt{font-size:.9rem}
.me-name{overflow:hidden;text-overflow:ellipsis}
.me.login{padding:0 14px;background:var(--brand);color:var(--brand-ink);border-color:transparent}
.me.login:hover{background:var(--brand-hover)}
@media (max-width:560px){.me{padding:0 10px 0 8px;max-width:none}.me-name{display:none}.me.login{padding:0 12px;font-size:.8rem}}

/* ---- a quiet invitation to the games, below the check */
.play-promo{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin:34px 0 10px;padding:22px 26px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.play-promo h2{margin:0 0 4px}.play-promo p{margin:0;color:var(--muted);max-width:34em}
.play-promo .actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}.play-promo .btn{margin-top:0}

/* ---- a festival is on: one quiet line */
.season-strip{margin:26px 0 0;padding:14px 20px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);color:var(--muted);text-wrap:pretty}
.season-strip b{color:var(--ink)}

/* the home page's second card, under the example: where you are in the game */
.home-card{padding:20px 22px;display:grid;gap:10px}
.home-card h2{margin:0;font-size:1.15rem}.home-card p{margin:0}
.hc-top{display:flex;align-items:center;gap:14px}.hc-top .avt{font-size:2.5rem}
.home-card .xpbar{width:100%}.hc-xp{font-size:.85rem}
.hc-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.hc-stats li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep,var(--brand));font:650 .82rem var(--sans)}
.home-more,.play-promo .more{display:inline-flex;align-items:center;gap:4px;min-height:44px;font:650 .95rem var(--sans);color:var(--brand-deep,var(--brand));text-decoration:none}
.home-more .ic,.play-promo .more .ic{width:1.1em;height:1.1em;transition:transform .15s}.home-more:hover .ic,.play-promo .more:hover .ic{transform:translateX(3px)}
.home-more:hover,.play-promo .more:hover{text-decoration:underline}

/* Tamil: its letters are wider and taller than Latin ones, so the bar and the small labels get a little more room */
:lang(ta) .chips li,:lang(ta) .chip,:lang(ta) .badge-chip,:lang(ta) .filters button,:lang(ta) .mock-tags span,:lang(ta) .hh-tab,:lang(ta) .hh-buy,:lang(ta) .hc-stats li{font-size:.84rem}
:lang(ta) .navlink,:lang(ta) .cta{font-size:.92rem}
@media (max-width:560px){:lang(ta) .me.login{padding:0 9px;font-size:.72rem}:lang(ta) .lang summary{padding:0 9px}:lang(ta) .cta{padding:0 12px;font-size:.78rem}:lang(ta) .tabs a{font-size:.7rem}}


/* ---- a question in a round (Inbox Rush, the Daily Challenge, bosses): one calm column with the same room between each part */
.card.play{padding:24px 26px}
.card.play progress.round-prog{height:8px;margin-bottom:20px}
.card.play .phone{background:var(--surface);box-shadow:var(--shadow);margin-bottom:22px}
.card.play .phone-top{padding:11px 20px}
.card.play .msg{padding:20px 22px;font-size:1.12rem;line-height:1.6}
.card.play h2{margin:0 0 14px;font-size:1.2rem}
.card.play .choices{gap:14px;margin-top:0}
.card.play .choice{min-height:118px;justify-content:center;gap:8px;padding:18px 10px;background:var(--surface);border:2px solid var(--line-2);box-shadow:var(--shadow)}
.card.play .choice kbd{margin-top:2px}
.card.play .hint{margin:18px 0 0;font-size:.84rem;line-height:1.5}
.card.play progress.clock{margin-top:18px}
.card.play .words{margin:0 0 18px}
@media (max-width:560px){
  .card.play{padding:18px 16px}.card.play .phone{margin-bottom:18px}.card.play .msg{padding:16px 16px;font-size:1.05rem}
  .card.play .choices{gap:10px}.card.play .choice{min-height:60px;padding:12px 14px;font-size:1rem}
}

/* ---- the Telegram card: one big link, the code folded away */
.tg .btn.big{display:inline-flex;align-items:center;gap:.5em}.tg .btn.big .ic{width:1.2em;height:1.2em}
.tg .btn.big.wait{opacity:.6;pointer-events:none}
.tg-tap{margin:10px 0 0}
.tg-alt{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.tg-alt summary{cursor:pointer;color:var(--muted);font:600 .9rem var(--sans);min-height:32px;display:flex;align-items:center}
.tg-alt summary:hover{color:var(--ink)}.tg-alt summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.tg-alt[open] summary{color:var(--ink)}