@font-face{font-family:"DM Sans";src:url("assets/dm-sans.ttf")}@font-face{font-family:Manrope;font-weight:800;src:url("assets/manrope.ttf")}:root{--night:#2c1f5a;--night2:#3a2a72;--purple:#742bc1;--blue:#2899ed;--cream:#f9f7fe;--ink:#221637;--muted:#665d75}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',Arial,sans-serif;background:radial-gradient(ellipse at 90% 0%,#6c4eb0 0%,#382870 38%,#2c1f5a 75%);color:white;min-height:100vh}a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #76d0ff;outline-offset:5px}.skip{position:absolute;top:-100px;background:white;color:var(--ink);padding:16px}.skip:focus{top:0;z-index:3}header{max-width:1040px;margin:auto;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:18px}.logo{width:155px;height:48px;object-fit:contain}.home{font-size:13px;text-underline-offset:5px}main{max-width:900px;margin:auto;padding:12px 24px 40px}.intro{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0 30px}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;color:#d5bafa}h1,h2{font-family:Manrope,'DM Sans',Arial,sans-serif;letter-spacing:-.045em}h1{font-size:clamp(34px,6vw,58px);line-height:1.08;margin:16px 0}h1 span{color:#a8c9ff}.intro p:not(.eyebrow){max-width:430px;color:#eee6fb;line-height:1.6}.liran{margin:0;flex:0 0 92px;text-align:center}.liran img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid #ab99ee;box-shadow:0 6px 24px #0e03294d}.liran figcaption{font-size:10px;line-height:1.4;color:#e4d9f8;margin-top:8px}.game{background:var(--cream);border-radius:26px;padding:28px;color:var(--ink);box-shadow:0 20px 60px #15092f55}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.game .eyebrow,.offline .eyebrow{color:#7445ac}.game-heading .eyebrow{margin:0}.game-heading span{font-size:12px;color:#665085;background:#eee6fc;border-radius:100px;padding:7px 12px;white-space:nowrap}h2{font-size:25px;line-height:1.2;margin:18px 0 12px}p{line-height:1.65}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}.card{border:2px solid #e3d9f4;border-radius:18px;background:#fff;color:#533189;font-size:40px;line-height:1;min-height:110px;font-weight:700;box-shadow:0 5px 0 #ded2f0;transition:transform .12s,background .12s}.card:hover{background:#f0e8ff}.card[aria-pressed=true]{background:linear-gradient(130deg,#e1f1ff,#e9d7ff);border-color:#8251c4;transform:translateY(3px);box-shadow:0 2px 0 #8251c4}.card:disabled{cursor:default;opacity:1}.feedback{min-height:52px;font-size:16px;font-weight:600;margin:20px 0;color:#583880}.feedback.success{color:#3e2566}#action,.cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:0;min-height:48px;padding:12px 24px;border-radius:100px;background:linear-gradient(100deg,#159ce9,#9a58e7);color:white;font-weight:700;text-decoration:none;box-shadow:0 8px 20px #53369730}#action[hidden]{display:none}.offline{background:#fff;color:var(--ink);padding:28px;border-radius:26px;margin-top:22px}.offline p{color:var(--muted)}.offline .note{font-size:12px;margin-top:14px}.signup{display:inline-block;margin-top:8px;color:#6134ad;font-weight:700;text-underline-offset:4px}.cta{margin-top:10px;max-width:100%;text-align:center}footer{font-size:12px;line-height:1.6;color:#ded4ee;padding:24px 4px}footer p{max-width:660px} @media(max-width:600px){header{padding:18px 20px}.logo{width:130px;height:40px}main{padding:0 20px 24px}.intro{align-items:flex-start;gap:12px;padding:16px 0 22px}.intro .eyebrow{font-size:9px;letter-spacing:.1em}.liran{flex-basis:64px;padding-top:26px}.liran img{width:62px;height:62px;border-width:2px}.liran figcaption{font-size:9px}h1{font-size:34px}.intro p:not(.eyebrow){font-size:14px}.game,.offline{padding:22px 20px;border-radius:22px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{min-height:92px;font-size:38px}h2{font-size:23px}.game-heading .eyebrow{font-size:9px;letter-spacing:.08em}.game-heading span{font-size:11px;padding:6px 10px}#instruction{font-size:14px}.feedback{font-size:15px}.offline p{font-size:14px}} @media(prefers-reduced-motion:reduce){*{transition:none!important}} @media(max-width:350px){header{padding-inline:16px}main{padding-inline:16px}.home{font-size:12px}.intro{gap:6px}.liran{flex-basis:50px}.liran img{width:50px;height:50px}.liran figcaption{font-size:8px}h1{font-size:30px}.game,.offline{padding:20px 16px}.game-heading .eyebrow{letter-spacing:0}.cta{font-size:13px}}
