@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Fredoka:wght@400;500;600&display=swap");

/* Hue Is It? component styles. Every value comes from tokens.css. Class prefix: hii- */

/* ---------- Base ---------- */
.hii { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }
.hii *, .hii *::before, .hii *::after { box-sizing: border-box; }
.hii button { font-family: inherit; }

/* ---------- Coin ---------- */

/* ---------- Logo (inline) ---------- */

/* ---------- Button ---------- */

/* ---------- Icon button ---------- */

/* ---------- Badge ---------- */

/* ---------- Tag ---------- */

/* ---------- Chip ---------- */

/* ---------- Switch ---------- */

/* ---------- Radio ---------- */

/* ---------- Segmented control ---------- */

/* ---------- Card ---------- */

/* ---------- List rows ---------- */

/* ---------- Progress ---------- */

/* ---------- Loading ---------- */

/* ---------- App shell ---------- */

/* ---------- Top bar ---------- */

/* ---------- Bottom nav ---------- */

/* ---------- Coin counter ---------- */
.hii-coins {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  height: 36px; padding: 0 var(--space-3) 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--surface-300);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}
[dir="rtl"] .hii-coins { padding: 0 var(--space-2) 0 var(--space-3); }

/* ---------- Puzzle card ---------- */
.hii-puzzle {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5); margin: 0;
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-200); box-shadow: var(--shadow-card);
}
.hii-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.hii-legend li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hii-legend i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Answer input ---------- */

/* ---------- Hints ---------- */

/* ---------- Toast ---------- */

/* ---------- Banner ---------- */

/* ---------- Dialog ---------- */

/* ---------- Bottom sheet ---------- */

/* ---------- Empty state ---------- */

/* ---------- Coachmark ---------- */

/* ---------- Category card ---------- */

/* ---------- Level tile ---------- */

/* ---------- Puzzle tile ---------- */

/* ---------- Daily card ---------- */

/* Tokens from tokens.json, then screen helpers and game motion. */
:root {
  --surface-100:#F6F6FA; --surface-200:#FFFFFF; --surface-300:#EEEDF5; --line:#E3E2EC; --line-strong:#8F8BA8;
  --ink:#17152E; --ink-muted:#5E5B78; --accent:#3D3A9E; --accent-soft:#E7E6F7;
  --success:#13795B; --danger:#C2343B; --danger-soft:#FBE3E4; --coin:#E0A100;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(23,21,46,.06),0 0 0 1px #E3E2EC;
  --font-display:"Baloo 2","Fredoka",system-ui,sans-serif; --font-body:"Fredoka",system-ui,sans-serif;
}
.phone { width:390px; height:844px; overflow:hidden; position:relative; }
.ic { display:block; flex:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ic.s20 { width:20px; height:20px; }
.coin { display:inline-block; flex:none; position:relative; width:20px; height:20px; border-radius:50%; background:var(--coin); }
.coin::after { content:""; position:absolute; inset:19%; border-radius:50%; border:1.6px solid var(--ink); opacity:.55; }
.pie { display:block; flex:none; border-radius:50%; }
a.hii-coins { text-decoration:none; color:var(--ink); }
.ad { background:#000; color:#fff; }

/* ---------- Motion ---------- */
a,button { transition:transform .12s ease; }
a:active,button:active { transform:scale(.96); }
.enter > * { animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
.enter > *:nth-child(2) { animation-delay:.07s; } .enter > *:nth-child(3) { animation-delay:.14s; } .enter > *:nth-child(4) { animation-delay:.21s; }
.enter > *:nth-child(5) { animation-delay:.28s; } .enter > *:nth-child(6) { animation-delay:.35s; } .enter > *:nth-child(n+7) { animation-delay:.42s; }
.tiles-in > * { animation:tile .45s cubic-bezier(.2,1.4,.4,1) both; }
.tiles-in > *:nth-child(2) { animation-delay:.05s; } .tiles-in > *:nth-child(3) { animation-delay:.1s; } .tiles-in > *:nth-child(4) { animation-delay:.15s; } .tiles-in > *:nth-child(5) { animation-delay:.2s; }
.tiles-in > *:nth-child(6) { animation-delay:.25s; } .tiles-in > *:nth-child(7) { animation-delay:.3s; } .tiles-in > *:nth-child(8) { animation-delay:.35s; } .tiles-in > *:nth-child(9) { animation-delay:.4s; } .tiles-in > *:nth-child(n+10) { animation-delay:.45s; }
.pie-in { animation:piein .7s cubic-bezier(.2,1.3,.4,1) both; }
.grow { transform-origin:left; animation:grow .8s cubic-bezier(.2,.8,.2,1) both .25s; }
.pop { animation:pop .55s cubic-bezier(.2,1.6,.4,1) both .2s; }
.wrong-once { animation:shakeonce .55s ease-in-out; }
@keyframes shakeonce { 0%,100% { transform:none; } 20%,60% { transform:translateX(-8px); } 40%,80% { transform:translateX(8px); } }
.float { animation:float 3s ease-in-out infinite; }
.spin-slow { animation:spinslow 6s linear infinite; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes tile { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }
@keyframes piein { from { opacity:0; transform:rotate(-140deg) scale(.5); } to { opacity:1; transform:none; } }
@keyframes grow { from { transform:scaleX(0); } to { transform:none; } }
@keyframes pop { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:none; } }
@keyframes float { 0%,100% { transform:none; } 50% { transform:translateY(-6px); } }
@keyframes spinslow { to { transform:rotate(360deg); } }

/* ---------- Answer squares ---------- */
.answer { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--space-2); }
.squares { display:flex; flex-direction:column; align-items:center; gap:6px; --sq:48px; --sqh:48px; --sqf:24px; --sqg:6px; }
.sq-row { display:flex; justify-content:center; gap:var(--sqg); }
.sq { width:var(--sq); height:var(--sqh); padding:0; display:grid; place-items:center; border:0; border-radius:var(--radius-sm); background:var(--surface-200); box-shadow:inset 0 0 0 1.5px var(--line-strong); color:var(--ink); font-family:var(--font-display); font-size:var(--sqf); font-weight:700; font-style:normal; line-height:1; text-transform:uppercase; cursor:default; }
button.sq:active { transform:none; }
.sq.is-active { box-shadow:inset 0 0 0 2.5px var(--accent),0 0 0 3px var(--accent-soft); animation:sqbeat 1.1s ease-in-out infinite; }
.sq.is-filled { box-shadow:inset 0 0 0 2px var(--ink); animation:sqtype .22s cubic-bezier(.2,1.6,.4,1); }
.sq.is-given { background:var(--accent-soft); box-shadow:none; animation:sqflip .55s cubic-bezier(.2,.9,.3,1) both; }
.sq.is-wrong { background:var(--danger-soft); box-shadow:inset 0 0 0 2px var(--danger); color:var(--danger); }
.sq.is-right { background:var(--success); box-shadow:none; color:var(--surface-200); animation:sqflip .55s cubic-bezier(.2,.9,.3,1) both; }
.sq.is-pick { cursor:pointer; background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent); animation:sqwig 1.5s ease-in-out infinite; }
.d1 { animation-delay:.08s; } .d2 { animation-delay:.16s; } .d3 { animation-delay:.24s; } .d4 { animation-delay:.32s; } .d5 { animation-delay:.4s; } .d6 { animation-delay:.48s; }
.answer-note { margin:0; min-height:20px; font-size:14px; line-height:20px; text-align:center; color:var(--ink-muted); }
.answer-note.is-wrong { color:var(--danger); font-weight:500; }
.clue { display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); background:var(--accent-soft); font-size:14px; font-weight:600; }
.kb { flex:none; height:188px; display:flex; flex-direction:column; gap:var(--space-2); padding:0 var(--space-2) var(--space-5); box-sizing:border-box; background:var(--surface-100); color:var(--ink); text-decoration:none; }
a.kb:active { transform:none; }
.kb.is-off { opacity:.35; pointer-events:none; }
.kb-row { flex:1; display:flex; justify-content:center; gap:5px; }
.key { flex:1; min-width:0; max-width:34px; padding:0; display:grid; place-items:center; border:0; border-radius:var(--radius-sm); background:var(--surface-200); box-shadow:var(--shadow-card); color:var(--ink); font-family:var(--font-body); font-size:18px; font-weight:600; cursor:pointer; }
.key.wide { flex:1.6; max-width:54px; background:var(--surface-300); box-shadow:none; }
.key:active,.key.is-press { transform:translateY(-3px) scale(1.14); background:var(--accent-soft); }
.key.is-press { animation:keypress 1.6s ease-in-out infinite; }
@keyframes sqbeat { 0%,100% { transform:none; } 50% { transform:scale(1.05); } }
@keyframes sqtype { 0% { transform:scale(.8); } 60% { transform:scale(1.14); } 100% { transform:none; } }
@keyframes sqflip { 0% { transform:rotateX(90deg) scale(1.1); } 60% { transform:rotateX(-12deg) scale(1.1); } 100% { transform:none; } }
@keyframes sqwig { 0%,100% { transform:none; } 25% { transform:rotate(-4deg); } 75% { transform:rotate(4deg); } }
@keyframes keypress { 0%,60%,100% { transform:none; background:var(--surface-200); } 70%,85% { transform:translateY(-3px) scale(1.14); background:var(--accent-soft); } }

/* ---------- Sign in ---------- */

/* ---------- Coin shop ---------- */
.is-dim { opacity:.45; pointer-events:none; }


/* ---------- Website ---------- */
.lp { --brand-coral:#FF5A5F; --brand-yellow:#FFC233; --brand-indigo:#3D3A9E; --web-pad:96px; width:1440px; background:var(--surface-100); color:var(--ink); font-family:var(--font-body); overflow:hidden; }

.lp a { color:inherit; }
.web-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) var(--web-pad); }
.web-brand { display:inline-flex; align-items:center; gap:var(--space-3); font-family:var(--font-display); font-size:24px; font-weight:800; text-decoration:none; }
.web-links { display:flex; gap:var(--space-8); font-size:17px; font-weight:500; }
.web-links a { text-decoration:none; }

.web-hero { position:relative; background:var(--brand-indigo); color:#fff; overflow:hidden; }
.web-hero .web-nav { position:relative; z-index:1; }
.web-hero__in { position:relative; z-index:1; display:grid; grid-template-columns:1fr 390px; align-items:center; gap:var(--space-10); padding:var(--space-8) var(--web-pad) 96px; }

.web-h1 { margin:0; font-family:var(--font-display); font-size:84px; line-height:88px; font-weight:800; }

.web-h1 em { font-style:normal; color:var(--brand-yellow); }
.web-lead { margin:var(--space-6) 0 var(--space-8); max-width:560px; font-size:22px; line-height:32px; opacity:.92; }

.badges { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.badge { display:inline-flex; align-items:center; gap:var(--space-3); height:60px; padding:0 var(--space-5); box-sizing:border-box; border-radius:var(--radius-md); background:#000; color:#fff !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); text-decoration:none; }

.badge svg { flex:none; width:28px; height:28px; }
.badge span { display:flex; flex-direction:column; font-size:12px; line-height:14px; }
.badge b { font-size:18px; line-height:22px; font-weight:600; white-space:nowrap; }
.blob { position:absolute; border-radius:50%; pointer-events:none; }
.blob.a { width:420px; height:420px; top:-230px; left:36%; background:conic-gradient(var(--brand-coral) 0 34%,transparent 0); opacity:.95; animation:spinslow 40s linear infinite; }
.blob.b { width:280px; height:280px; bottom:-120px; left:-70px; background:conic-gradient(var(--brand-yellow) 0 62%,transparent 0); animation:spinslow 28s linear infinite reverse; }
.blob.c { width:90px; height:90px; top:62%; left:46%; background:var(--brand-coral); -webkit-mask:radial-gradient(circle,transparent 42%,#000 43%); mask:radial-gradient(circle,transparent 42%,#000 43%); animation:float 4s ease-in-out infinite; }



.mock { width:100%; max-width:350px; margin-inline:auto; box-sizing:border-box; padding:var(--space-4) var(--space-3) var(--space-3); border-radius:40px; background:var(--surface-100); color:var(--ink); box-shadow:0 0 0 8px #17152E,0 32px 64px rgba(0,0,0,.35); }
.mock__top { display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-2) var(--space-3); }
.mock__top strong { font-family:var(--font-display); font-size:18px; font-weight:700; }
.mock .hii-puzzle { padding:var(--space-3); gap:var(--space-2); }
.mock .pie { width:150px; height:150px; }
.mock .hii-legend li { font-size:14px; }
.mock .squares { --sq:40px; --sqh:44px; --sqf:21px; --sqg:5px; padding-top:var(--space-3); }
.mock .answer-note { min-height:40px; padding:var(--space-2) var(--space-2) 0; box-sizing:border-box; }
.mock .answer-note.is-win { color:var(--success); font-weight:600; }
.mock .kb { height:auto; padding:0; gap:6px; background:transparent; }
.mock .kb-row { flex:none; height:42px; gap:3px; }
.mock .key { font-size:15px; border-radius:6px; }
.web-sec { padding:96px var(--web-pad); }

.web-sec.is-white { background:var(--surface-200); }
.web-h2 { margin:0 0 var(--space-10); font-family:var(--font-display); font-size:52px; line-height:58px; font-weight:800; text-align:center; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }

.step { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); text-align:center; padding:var(--space-8) var(--space-6); border-radius:var(--radius-xl); background:var(--surface-100); }
.step__art { height:150px; display:grid; place-items:center; }
.step h3,.feat h3 { margin:0; font-family:var(--font-display); font-size:26px; line-height:30px; font-weight:700; }
.step p,.feat p { margin:0; font-size:17px; line-height:25px; color:var(--ink-muted); }
.step .squares { --sq:56px; --sqh:56px; --sqf:28px; }
.brandpie { width:130px; height:130px; border-radius:50%; background:conic-gradient(var(--brand-coral) 0 50%,var(--brand-yellow) 0 80%,var(--brand-indigo) 0); }
.feats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }

.feat { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); border-radius:var(--radius-lg); background:var(--surface-200); box-shadow:var(--shadow-card); }
.feat__i { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:#17152E; }
.feat:nth-child(3n+1) .feat__i { background:#FFD9DA; } .feat:nth-child(3n+2) .feat__i { background:#FFEDC2; } .feat:nth-child(3n) .feat__i { background:var(--accent-soft); }
.faq { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:var(--space-3); }
.faq details { padding:var(--space-5) var(--space-6); border-radius:var(--radius-md); background:var(--surface-100); }
.faq summary { cursor:pointer; font-size:19px; line-height:26px; font-weight:600; }
.faq p { margin:var(--space-3) 0 0; font-size:17px; line-height:26px; color:var(--ink-muted); }
.web-cta { position:relative; overflow:hidden; padding:88px var(--web-pad); text-align:center; background:var(--brand-yellow); color:#17152E; }

.web-cta .web-h2 { margin-bottom:var(--space-3); }
.web-cta p { margin:0 0 var(--space-8); font-size:20px; line-height:30px; }
.web-cta .badges { justify-content:center; }
.web-cta img { display:block; margin:0 auto var(--space-4); }
.web-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-8) var(--web-pad); background:#17152E; color:#fff; font-size:15px; }
.web-foot nav { display:flex; flex-wrap:wrap; gap:var(--space-6); }
.web-foot a { text-decoration:none; }
.web-foot .muted { opacity:.7; }

/* ---------- Legal pages ---------- */
.legal-head { padding:var(--space-10) var(--web-pad); background:var(--surface-200); box-shadow:inset 0 -1px 0 var(--line); }
.legal-head h1 { margin:0; font-family:var(--font-display); font-size:56px; line-height:60px; font-weight:800; }

.legal-head p { margin:var(--space-2) 0 0; font-size:16px; color:var(--ink-muted); }
.legal-wrap { display:grid; grid-template-columns:260px minmax(0,720px); gap:var(--space-10); justify-content:center; padding:var(--space-10) var(--web-pad) 80px; }

.legal-toc { position:sticky; top:var(--space-5); align-self:start; display:flex; flex-direction:column; gap:var(--space-2); font-size:15px; line-height:21px; }
.legal-toc a { color:var(--ink-muted); text-decoration:none; }

.legal { display:flex; flex-direction:column; gap:var(--space-8); }
.legal-short { padding:var(--space-5); border-radius:var(--radius-lg); background:var(--accent-soft); }
.legal-short h2 { margin:0 0 var(--space-3); font-family:var(--font-display); font-size:22px; line-height:26px; font-weight:700; }
.legal-short ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.legal-short li { display:flex; gap:var(--space-2); font-size:16px; line-height:23px; }
.legal-short .ic { margin-top:2px; }
.legal-sec { scroll-margin-top:var(--space-4); }
.legal-sec h2 { margin:0 0 var(--space-3); font-family:var(--font-display); font-size:24px; line-height:30px; font-weight:700; }
.legal-sec p { margin:0 0 var(--space-3); font-size:17px; line-height:26px; color:var(--ink-muted); }
.legal-sec p:last-child { margin-bottom:0; }
.legal-sec ul { margin:0 0 var(--space-3); padding-inline-start:var(--space-5); font-size:17px; line-height:26px; color:var(--ink-muted); }
.legal-sec li { margin-bottom:var(--space-2); }
.legal-sec b { color:var(--ink); font-weight:600; }
.legal-rows { display:flex; flex-direction:column; border-radius:var(--radius-md); background:var(--surface-200); box-shadow:var(--shadow-card); margin-bottom:var(--space-3); }
.legal-row { padding:var(--space-3) var(--space-4); font-size:16px; line-height:23px; color:var(--ink-muted); box-shadow:inset 0 -1px 0 var(--line); }
.legal-row:last-child { box-shadow:none; }
.legal-row b { display:block; color:var(--ink); font-weight:600; }
.legal-row small { display:block; margin-top:var(--space-1); font-size:14px; line-height:20px; }
.web-hero--plain { background:var(--surface-200); color:var(--ink); }

/* ---------- Age, consent ---------- */
.legal-sec a { color:var(--accent); font-weight:600; }

/* ---------- 3D coin ---------- */
.coin { background:url(/img/ef932cd028.png) center/118% no-repeat; border-radius:0; }
.coin::after { display:none; }
bdi { white-space:nowrap; }
.kb { direction:ltr; }

.lp{width:auto;max-width:100%}
@media (min-width: 1024px) and (max-width: 1339px){.blob.c{display:none}}
body{margin:0}
@media (max-width: 1023px){
.lp{--web-pad:20px; }
.web-links{display:none;}
.web-hero__in{grid-template-columns:1fr; padding-top:var(--space-4); padding-bottom:64px;}
.web-h1{font-size:46px; line-height:50px;}
.web-lead{font-size:18px; line-height:27px; margin:var(--space-4) 0 var(--space-6);}
.badge{flex:1; min-width:165px; justify-content:center; padding:0 var(--space-3);}
.blob.a{width:280px; height:280px; left:auto; right:-120px; top:-90px;}
.blob.b{width:180px; height:180px; bottom:auto; top:430px; left:-100px;}
.blob.c{display:none;}
.web-sec{padding:56px var(--web-pad);}
.web-h2{font-size:34px; line-height:38px; margin-bottom:var(--space-6);}
.steps{grid-template-columns:1fr;}
.feats{grid-template-columns:1fr; gap:var(--space-3);}
.web-cta{padding:56px var(--web-pad);}
.legal-head h1{font-size:36px; line-height:40px;}
.legal-wrap{grid-template-columns:1fr; padding-top:var(--space-6); padding-bottom:var(--space-10);}
.legal-toc{display:none;}
}