:root{
  --bg1:#bfeaff; --bg2:#fff4c2;
  --ink:#2b2d5b; --card:#ffffff;
  --blue:#4dabf7; --green:#51cf66; --red:#ff6b6b; --yellow:#ffd43b; --purple:#9775fa; --orange:#ff922b; --pink:#f783ac;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  font-family:"Vazirmatn","Tahoma",sans-serif; color:var(--ink);
  background:linear-gradient(180deg,var(--bg1),var(--bg2)); background-attachment:fixed;
  font-size:clamp(18px,2.2vw,24px); overflow-x:hidden;
}
#app{max-width:980px;margin:0 auto;padding:16px 16px 40px;min-height:100vh;display:flex;flex-direction:column}
.floaty{position:fixed;font-size:42px;opacity:.5;pointer-events:none;animation:float 7s ease-in-out infinite;z-index:0}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(6deg)}}
.screen{position:relative;z-index:1;animation:pop .45s ease both}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:none}}
h1{font-family:"Lalezar",sans-serif;font-size:clamp(40px,8vw,76px);margin:8px 0;color:#e8590c;text-shadow:3px 3px 0 #fff,6px 6px 0 rgba(0,0,0,.08);text-align:center}
.sub{text-align:center;font-weight:700;margin:0 0 18px}
.mascot{font-size:clamp(80px,16vw,140px);text-align:center;animation:bounce 1.6s ease-in-out infinite;display:block}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.btn{
  font:inherit;font-weight:900;border:0;cursor:pointer;color:#fff;background:var(--blue);
  padding:16px 28px;border-radius:26px;font-size:1.15em;box-shadow:0 8px 0 rgba(0,0,0,.2);
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.btn.green{background:var(--green)} .btn.orange{background:var(--orange)} .btn.purple{background:var(--purple)} .btn.pink{background:var(--pink)}
.btn.small{padding:8px 16px;font-size:.85em;border-radius:18px;box-shadow:0 5px 0 rgba(0,0,0,.2);min-height:44px;min-width:44px}
:focus-visible{outline:4px solid #1c7ed6;outline-offset:3px}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:20px 0}
.chapter{
  background:var(--card);border-radius:32px;padding:24px;text-align:center;box-shadow:0 10px 0 rgba(0,0,0,.12);
  border:5px solid var(--yellow);cursor:pointer;transition:transform .15s;
}
.chapter:hover{transform:translateY(-6px) rotate(-1deg)}
.chapter .emoji{font-size:64px}
.chapter h2{font-family:"Lalezar",sans-serif;font-size:1.7em;margin:6px 0;color:var(--purple)}
.stars-row{font-size:1.4em;min-height:1.6em;letter-spacing:2px;line-height:1.35;word-break:break-all;overflow-wrap:anywhere}
.bigmedal{background:linear-gradient(135deg,#fff3bf,#ffd8a8);border:5px dashed var(--orange);border-radius:30px;padding:16px;text-align:center;margin-top:10px;font-weight:900}
.credits{text-align:center;font-size:.6em;opacity:.7;margin-top:18px}
.credits a{color:inherit}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;position:relative;z-index:1}
.progress{flex:1;height:26px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:inset 0 3px 6px rgba(0,0,0,.15)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--yellow));border-radius:20px;transition:width .5s}
.score{background:#fff;border-radius:20px;padding:6px 14px;font-weight:900;box-shadow:0 4px 0 rgba(0,0,0,.12);white-space:nowrap}
.qcard{background:var(--card);border-radius:34px;padding:clamp(18px,3vw,34px);box-shadow:0 10px 0 rgba(0,0,0,.12);position:relative;z-index:1}
.qnum{display:inline-block;background:var(--purple);color:#fff;border-radius:18px;padding:2px 16px;font-weight:900;margin-bottom:8px}
.speak{float:left;font-size:1.3em;padding:6px 14px}
.qtext{font-size:1.35em;font-weight:900;line-height:1.9;margin:6px 0 18px;clear:both}

/* ---- picture above the question ---- */
.art{margin:4px auto 10px;max-width:min(100%,400px);border-radius:24px;overflow:hidden;animation:pop .5s both;box-shadow:0 6px 0 rgba(0,0,0,.1)}
.art:not(.themed){width:fit-content;max-width:100%}
.art img.scene{display:block;width:auto;max-width:100%;height:auto;max-height:250px}
.art.themed{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,28px);padding:clamp(12px,3vw,24px) 16px}
.art.themed .ico{width:clamp(52px,14vw,76px);height:clamp(52px,14vw,76px)}
.art.sky{background:linear-gradient(180deg,#a5d8ff,#e7f5ff)}
.art.grass{background:linear-gradient(180deg,#d3f9d8,#8ce99a)}
.art.water{background:linear-gradient(180deg,#e7f5ff,#4dabf7)}
.art.night{background:linear-gradient(180deg,#1b1f4b,#3b3f8f)}
.art.warm{background:linear-gradient(180deg,#fff3bf,#ffd8a8)}

/* ---- icons, tiles, visuals (shared by answer cards and pairing) ---- */
.ico{display:block;width:clamp(44px,9vw,68px);height:clamp(44px,9vw,68px);user-select:none;-webkit-user-drag:none}
.vis{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:8px 10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;max-width:96px;padding:6px 4px;border-radius:16px}
.tile .cap{font-size:.62em;font-weight:900;line-height:1.4;text-align:center}
.tile.yes{background:#d3f9d8;box-shadow:inset 0 0 0 3px var(--green)}
.tile.no{background:#ffe3e3;box-shadow:inset 0 0 0 3px var(--red)}
.tile .mk{position:absolute;top:-6px;inset-inline-end:-6px;width:24px;height:24px;border-radius:50%;color:#fff;font-size:15px;font-weight:900;line-height:24px;text-align:center}
.tile.yes .mk{background:#2f9e44}.tile.no .mk{background:#e03131}
.tile .ico[src*="/panel-"]{width:clamp(58px,16vw,100px);height:clamp(58px,16vw,100px);border-radius:10px}
.tile.multi{min-width:104px;max-width:150px;padding:8px 6px}
.tile.multi .cap{font-size:.66em}
.scene-pair{display:flex;align-items:center;justify-content:center;gap:2px}
.scene-pair .ico{width:clamp(36px,8vw,52px);height:clamp(36px,8vw,52px)}
.vis.steps{gap:6px 2px;flex-wrap:nowrap}
.vis.steps .tile{min-width:0;padding:4px 2px}
.vis.steps .arrow{font-size:.8em}
.pic{display:block;width:clamp(72px,24vw,92px);height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;user-select:none;-webkit-user-drag:none}
.pic.wide{height:auto}
.tile.scene{max-width:100%}
.tile.scene .cap{display:none}
.pick .pic{width:clamp(80px,26vw,104px)}
.vis.n-1 .pic{width:clamp(96px,32vw,150px)}
.vis.n-2 .pic{width:clamp(84px,27vw,120px)}
.vis.n-3 .pic{width:clamp(52px,18vw,84px)} /* three in a row fit on one line */
.tile.art-tile{min-width:0;max-width:120px}
.vis.steps .pic{width:clamp(58px,21vw,82px)}
.m .pic{width:clamp(60px,20vw,76px)}
.m.visual .pic{width:clamp(68px,22vw,92px)}
.sign{align-self:center;font-size:1.6em;font-weight:900;color:var(--purple);padding:0 2px}
.arrow{align-self:center;font-size:1.1em;color:var(--purple)}

/* ---- answer cards ---- */
.options{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{
  font:inherit;font-weight:700;color:var(--ink);background:#f1f8ff;border:4px solid #a5d8ff;border-radius:24px;
  padding:12px 14px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  text-align:right;transition:transform .12s, background .2s;
}
.card:hover{transform:scale(1.02);background:#e7f5ff}
.card .vis{background:#fff;border-radius:18px;padding:10px 8px;box-shadow:inset 0 0 0 3px #d0ebff;min-height:96px;align-items:center}
.card .txt{line-height:1.9;font-size:.95em}
.card.ok{background:#d3f9d8;border-color:var(--green)}
.card.bad{background:#ffe3e3;border-color:var(--red);animation:shake .5s}
.card.ok .vis{box-shadow:inset 0 0 0 3px var(--green)}.card.bad .vis{box-shadow:inset 0 0 0 3px var(--red)}
.card:disabled{cursor:default}
.card:disabled:hover{transform:none}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-12px)}40%,80%{transform:translateX(12px)}}
.picks{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.pick{align-items:center;text-align:center}
.pick .ico{width:clamp(60px,16vw,84px);height:clamp(60px,16vw,84px)}

/* ---- pairing ---- */
.match{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.match .col{display:grid;gap:12px;align-content:start}
.m{
  font:inherit;font-weight:900;border:4px solid #ffd8a8;background:#fff9db;color:var(--ink);border-radius:22px;padding:12px 10px;
  cursor:pointer;text-align:center;transition:transform .12s;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:72px;justify-content:center;
}
.m .ico{width:clamp(40px,10vw,64px);height:clamp(40px,10vw,64px)}
.m.visual .ico{width:clamp(56px,14vw,96px);height:clamp(56px,14vw,96px)}
.m:hover{transform:scale(1.04)}
.m.sel{border-color:var(--blue);background:#d0ebff;transform:scale(1.07)}
.m.done{border-color:var(--green);background:#d3f9d8;cursor:default;transform:none}
.m.bad{border-color:var(--red);background:#ffe3e3;animation:shake .5s}

.feedback{margin-top:18px;border-radius:24px;padding:14px 18px;font-weight:700;line-height:1.9;display:none}
.feedback.show{display:block;animation:pop .35s both}
.feedback.good{background:#d3f9d8;border:4px solid var(--green)}
.feedback.hint{background:#fff3bf;border:4px solid var(--yellow)}
.next-row{text-align:center;margin-top:18px}
.result{text-align:center;background:var(--card);border-radius:36px;padding:28px;box-shadow:0 10px 0 rgba(0,0,0,.12)}
.medal{font-size:clamp(100px,20vw,180px);display:block;animation:spin 3s ease-in-out infinite}
@keyframes spin{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(10deg) scale(1.1)}}
.result .stars-row{font-size:clamp(1.4em,7vw,2.2em)}
.confetti{position:fixed;top:-60px;font-size:30px;pointer-events:none;z-index:50;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(540deg)}}
.row-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media (max-width:560px){.match{gap:12px 14px}.m{padding:10px 4px;font-size:.9em}.tile{min-width:56px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}