:root{
  --bg:#fbf8f3;--paper:#ffffff;--ink:#1e1b2b;--muted:#6c6878;--line:#ece6dc;
  --accent:#5b3df5;--accent-2:#ff8a3d;--accent-soft:#efeaff;--good:#2fa36b;--mid:#e3b341;--bad:#9b97a6;
  --radius:18px;--shadow:0 1px 2px rgba(30,27,43,.04),0 10px 30px rgba(30,27,43,.07);
  --display:Fraunces,Georgia,serif;--text:Inter,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#13111b;--paper:#1c1928;--ink:#f1eef8;--muted:#a8a3b7;--line:#2c283b;
  --accent:#8b74ff;--accent-soft:#2a2347;--shadow:none;--bad:#4a4658;
}}
.lang-ar{--display:"Noto Kufi Arabic",system-ui,sans-serif;--text:"Noto Kufi Arabic",system-ui,sans-serif}
.lang-ja{--display:"Noto Sans JP",system-ui,sans-serif;--text:"Noto Sans JP",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.6vw,3rem);margin:.15em 0 .4em;font-weight:800}
h2{font-size:1.45rem;margin:1.8em 0 .6em}
h3{font-size:1.1rem;margin:.2em 0 .35em}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
main{padding:22px 16px 64px}

/* header */
.top{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap}
.brand{font:800 1.3rem var(--display);color:var(--ink);display:flex;align-items:center;gap:8px}
.brand:hover{text-decoration:none}
.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#fff;font-size:16px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
nav{display:flex;gap:16px;flex-wrap:wrap;font-weight:500;font-size:.95rem;flex:1}
nav a{color:var(--ink);opacity:.85;white-space:nowrap}
nav a:hover{opacity:1;color:var(--accent);text-decoration:none}
.langs{position:relative}
.langs summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.9rem;background:var(--paper);white-space:nowrap}
.langs summary::-webkit-details-marker{display:none}
.langs .menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:grid;min-width:180px;z-index:30}
.langs .menu a{padding:8px 12px;border-radius:10px;color:var(--ink)}
.langs .menu a:hover,.langs .menu a[aria-current]{background:var(--accent-soft);text-decoration:none}
@media (max-width:720px){nav{order:3;flex-basis:100%;gap:14px;overflow-x:auto;padding-bottom:8px;flex-wrap:nowrap}.langs{margin-inline-start:auto}}

/* hero */
.kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;font-weight:600;color:var(--accent-2);margin:0}
.lead{font-size:1.14rem}
.muted{color:var(--muted)}.small{font-size:.85rem}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center;padding:34px 30px;margin-top:6px;border-radius:28px;
  background:radial-gradient(120% 120% at 100% 0%,var(--accent-soft),transparent 60%),var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-art{width:100%;max-width:300px;justify-self:center;color:var(--ink)}
@media (max-width:760px){.hero{grid-template-columns:1fr;padding:24px 20px}.hero-art{max-width:200px;order:-1}}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 22px;border-radius:999px;font-weight:600;border:0;font:600 1rem var(--text);cursor:pointer;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none}

/* sections */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.signs{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.sign{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);gap:4px;transition:transform .15s,border-color .15s}
.sign:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-3px)}
.sign small{color:var(--muted);font-size:.74rem}
.medal{flex:none;display:block}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.panel h2{margin-top:.2em}
.quiz-panel{background:linear-gradient(135deg,var(--accent),#8f7bff);color:#fff;border:0}
.quiz-panel .btn{background:#fff;color:var(--accent);box-shadow:none}
.panel-emoji{font-size:2.2rem;display:inline-block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);box-shadow:var(--shadow);display:block;overflow:hidden;transition:transform .15s,border-color .15s}
.card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-3px)}
.card p{color:var(--muted);margin:.3em 0 0;font-size:.93rem}
.card-body{padding:16px 18px 18px}
.cover{display:block;width:100%;height:140px}
.banner{display:block;width:100%;height:200px;border-radius:var(--radius);margin:6px 0 18px}
.hcard{display:flex;gap:14px;padding:16px;align-items:flex-start}
.tag{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.cds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cds.big{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cd{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--ink);display:grid;gap:2px}
.cd:hover{border-color:var(--accent);text-decoration:none}
.cd-emoji{font-size:1.4rem}
.cd b{font:800 1.8rem var(--display);color:var(--accent);line-height:1.1}
.cd span:last-child{font-size:.85rem;color:var(--muted)}

/* reading pages */
.reading,.post,.quiz,.puzzle,.countdown{max-width:760px}
.reading-head,.quiz-head,.cd-hero{display:flex;gap:18px;align-items:center;margin-top:10px}
.cd-big{font-size:3.4rem}
.facets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
@media (max-width:720px){.facets{grid-template-columns:1fr}}
.facets>div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px}
.facets p{margin:0;font-size:.95rem}
.lucky{display:flex;gap:10px;flex-wrap:wrap}
.lucky span{background:var(--accent-soft);border-radius:999px;padding:7px 15px;font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.88rem;color:var(--ink)}
.chips a:hover{border-color:var(--accent);text-decoration:none}
.post p{margin:0 0 1em}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:13px 17px;margin-bottom:8px}
.faq summary{font-weight:600;cursor:pointer}

/* quiz */
.progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin:6px 0 10px}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s}
.q{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:14px 0;box-shadow:var(--shadow)}
.qcat{margin:0;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media (max-width:560px){.opts{grid-template-columns:1fr}}
.opt{font:inherit;text-align:start;padding:11px 13px;border-radius:13px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;display:flex;gap:10px;align-items:center}
.opt-l{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.8rem}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt.right{background:var(--good);border-color:var(--good);color:#fff}
.opt.wrong{background:#d9534f;border-color:#d9534f;color:#fff}
.opt.right .opt-l,.opt.wrong .opt-l{background:rgba(255,255,255,.25);color:#fff}
.fact{margin:12px 0 0;font-size:.93rem;color:var(--muted)}
.score{background:linear-gradient(135deg,var(--accent),#8f7bff);color:#fff;border-radius:var(--radius);padding:24px;text-align:center}
.score h2{margin:0}

/* countdown */
.ticker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}
.ticker div{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 6px;text-align:center;box-shadow:var(--shadow)}
.ticker b{display:block;font:800 clamp(1.6rem,6vw,2.6rem) var(--display);color:var(--accent)}
.ticker span{font-size:.8rem;color:var(--muted)}

/* puzzle */
.board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;max-width:320px;margin:20px auto}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tile{aspect-ratio:1;border:2px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;font:800 1.6rem Inter,sans-serif;text-transform:uppercase;background:var(--paper)}
.tile.g{background:var(--good);border-color:var(--good);color:#fff}
.tile.y{background:var(--mid);border-color:var(--mid);color:#fff}
.tile.x{background:var(--bad);border-color:var(--bad);color:#fff}
.msg{text-align:center;font-weight:600;min-height:1.5em}
.kb{display:flex;flex-direction:column;gap:6px;max-width:500px;margin:0 auto}
.kb div{display:flex;gap:4px;justify-content:center}
.kb button{flex:1;max-width:44px;padding:14px 0;border:0;border-radius:8px;background:var(--line);color:var(--ink);font:600 .9rem Inter,sans-serif;cursor:pointer;text-transform:uppercase}
.kb button.wide{max-width:70px;font-size:.75rem}
.kb button.g{background:var(--good);color:#fff}.kb button.y{background:var(--mid);color:#fff}.kb button.x{background:var(--bad);color:#fff}

/* contact */
.cform{display:grid;gap:14px;max-width:540px;margin:18px 0}
.cform label{display:grid;gap:6px;font-weight:500;font-size:.95rem}
.cform input,.cform textarea{font:inherit;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent)}
.cform .btn{justify-self:start}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--paper);padding:30px 0;font-size:.92rem}
.foot p{margin:.4em 0}
.small-brand{font-size:1.1rem}
.foot .links{display:flex;gap:16px;flex-wrap:wrap}

/* home top */
.hero-top{padding:26px 26px 22px;margin-top:6px;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow);
  background:radial-gradient(120% 140% at 100% 0%,var(--accent-soft),transparent 55%),radial-gradient(90% 120% at 0% 100%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 60%),var(--paper)}
.hero-top h1{font-size:clamp(1.5rem,3.6vw,2.3rem);max-width:820px}
.hero-top .sec-head h2{margin-top:.6em}
@media (max-width:600px){.hero-top{padding:18px 14px}.signs{grid-template-columns:repeat(3,1fr);gap:8px}.sign{padding:12px 6px}.sign small{font-size:.66rem}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.fact-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.fact-card::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--accent-soft)}
.fact-card p{margin:.4em 0 0;position:relative;z-index:1}
.fact-emoji{font-size:1.8rem;position:relative;z-index:1}
.more-fun{margin-top:40px}

/* games */
.gamepage{max-width:640px}
#game{margin:18px 0 8px}
.gbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px;font-weight:600}
.gbar .btn{margin-inline-start:auto}
.btn.small{padding:8px 16px;font-size:.9rem}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:420px}
.mcard{aspect-ratio:1;border:0;border-radius:14px;cursor:pointer;font-size:clamp(1.6rem,7vw,2.4rem);position:relative;background:transparent;padding:0;perspective:600px}
.mcard span{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;backface-visibility:hidden;transition:transform .35s}
.mcard .back{background:linear-gradient(135deg,var(--accent),#8f7bff);color:#fff;font-size:1.3rem}
.mcard .front{background:var(--paper);border:2px solid var(--line);transform:rotateY(180deg)}
.mcard.open .back{transform:rotateY(180deg)}
.mcard.open .front{transform:rotateY(0)}
.mcard.done .front{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--paper))}
.board2048{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;background:#bbada0;padding:9px;border-radius:14px;max-width:420px;touch-action:none;user-select:none}
.board2048 .t{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font:800 clamp(1.1rem,6vw,2rem) Inter,sans-serif;background:#cdc1b4;color:#776e65}
.t2{background:#eee4da!important}.t4{background:#ede0c8!important}.t8{background:#f2b179!important;color:#fff!important}.t16{background:#f59563!important;color:#fff!important}
.t32{background:#f67c5f!important;color:#fff!important}.t64{background:#f65e3b!important;color:#fff!important}.t128{background:#edcf72!important;color:#fff!important}
.t256{background:#edcc61!important;color:#fff!important}.t512{background:#edc850!important;color:#fff!important}.t1024{background:#edc53f!important;color:#fff!important}
.t2048,.t4096{background:#edc22e!important;color:#fff!important}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:330px}
.tc{aspect-ratio:1;border-radius:16px;border:2px solid var(--line);background:var(--paper);font:800 clamp(2rem,10vw,3rem) Inter,sans-serif;cursor:pointer;color:var(--ink)}
.tc.x{color:var(--accent)}.tc.o{color:var(--accent-2)}
.tc:hover{border-color:var(--accent)}
.install{border:0;border-radius:999px;padding:7px 14px;font:600 .88rem var(--text);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;cursor:pointer;white-space:nowrap}
.install[hidden]{display:none}
@media (max-width:720px){.install{margin-inline-start:auto}.install:not([hidden])+.langs{margin-inline-start:8px}}