/* Storybook look: sky scene with floating letters and a castle above arched wooden doors, one per item. */
:root{
  color-scheme:light;
  --sky1:#5cc3ff; --sky2:#cdefff; --grass:#58c45f; --grass2:#3fa84d;
  --stone:#d9d3e8; --stone2:#b3aacb; --roof:#ec4a5c; --roof2:#b72f43; --gold:#ffc928; --gold2:#d69a10;
  --wood:#9a6330; --wood2:#6f4219; --ink:#2a1a4a; --cream:#fff8e3;
  --f-display:'Lalezar','Cairo',sans-serif; --f-body:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{height:auto}
body{margin:0;background:var(--grass2);color:var(--ink);font-family:var(--f-body);direction:rtl;line-height:1.6;overflow-x:hidden}
.sky{position:relative;padding:18px 16px 0;background:linear-gradient(180deg,var(--sky1),var(--sky2) 78%);overflow:hidden}
.sun{position:absolute;top:16px;left:6%;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,#fff6a8 35%,#ffd93b 70%);box-shadow:0 0 0 14px rgba(255,235,120,.35),0 0 0 30px rgba(255,235,120,.18)}
.cloud{position:absolute;height:34px;width:110px;background:#fff;border-radius:99px;opacity:.95;animation:drift 38s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:46px;height:46px;top:-22px;right:18px}.cloud::after{width:34px;height:34px;top:-14px;right:56px}
.c1{top:70px;right:-140px}.c2{top:130px;right:-140px;animation-duration:52s;animation-delay:-20s;transform:scale(.8)}
@keyframes drift{to{transform:translateX(calc(-100vw - 300px))}}
.fl{position:absolute;font-family:var(--f-display);font-size:2.2rem;color:#fff;text-shadow:0 3px 0 rgba(30,60,140,.35);animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(6deg)}}
.stage{position:relative;max-width:760px;margin:0 auto;z-index:2}
h1{font-family:var(--f-display);font-weight:400;margin:0 auto;text-align:center;width:fit-content;max-width:100%;font-size:clamp(2.3rem,10vw,3.8rem);line-height:1.25;color:#fff;padding:2px 34px 8px;background:linear-gradient(180deg,#ff7a8a,var(--roof));border-radius:14px;text-shadow:0 3px 0 rgba(120,20,40,.45);box-shadow:0 6px 0 var(--roof2),0 12px 18px rgba(30,40,100,.25);text-wrap:balance}
.tag{text-align:center;margin:12px 0 0;font-weight:900;font-size:1.1rem;color:#1d3f85}
.castle{display:block;width:100%;height:auto;margin-top:6px}
.flag{transform-origin:left center;animation:wave 1.6s ease-in-out infinite}
@keyframes wave{50%{transform:skewY(7deg) scaleX(.92)}}
.ground{background:linear-gradient(180deg,var(--grass),var(--grass2));padding:6px 16px 10px;margin-top:-2px}
.path{max-width:760px;margin:0 auto;text-align:center}
.path h2{font-family:var(--f-display);font-weight:400;font-size:1.7rem;margin:14px 0 4px;color:#fff;text-shadow:0 2px 0 rgba(0,70,30,.45)}
.gates{max-width:760px;margin:12px auto 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:26px 16px}
.gate{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.hit{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;text-decoration:none;color:var(--ink);transition:transform .15s}
.hit:hover,.hit:focus-visible{transform:translateY(-6px)}
.hit:focus-visible,.dl:focus-visible,.foot a:focus-visible,.back:focus-visible{outline:4px solid #fff;outline-offset:5px;border-radius:30px}
.arch{width:100%;max-width:230px;aspect-ratio:4/5;background:var(--stone);border-radius:999px 999px 14px 14px;padding:12px;box-shadow:0 7px 0 var(--stone2),0 16px 22px rgba(10,60,30,.35);position:relative}
.door{width:100%;height:100%;border-radius:999px 999px 6px 6px;position:relative;overflow:hidden;background:repeating-linear-gradient(90deg,var(--wood) 0 22px,var(--wood2) 22px 25px);display:flex;align-items:center;justify-content:center}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,230,140,0),rgba(0,0,0,.18));pointer-events:none}
.door svg{width:78%;height:auto;position:relative;z-index:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.knob{position:absolute;bottom:20%;left:14%;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 2px 0 var(--gold2);z-index:2}
.plank{background:linear-gradient(180deg,#b97c3f,var(--wood));color:#fff;border-radius:12px;padding:6px 14px 9px;text-align:center;box-shadow:0 5px 0 var(--wood2);width:100%;max-width:230px}
.plank b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.3;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.plank span{display:block;font-size:.92rem;font-weight:700;opacity:.95;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;max-width:230px}
.chips li{background:var(--cream);color:var(--ink);border-radius:99px;padding:0 10px;font-size:.8rem;font-weight:800}
.play{background:var(--gold);color:var(--ink);font-family:var(--f-display);font-size:1.35rem;padding:5px 34px 8px;border-radius:99px;box-shadow:0 5px 0 var(--gold2)}
.hit:active .play,.dl:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold2)}
.dl{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:#fff;color:var(--ink);font-family:var(--f-display);font-size:1.15rem;padding:2px 26px 4px;border-radius:99px;box-shadow:0 5px 0 var(--stone2);text-decoration:none}
.msg{max-width:760px;margin:12px auto 0;background:var(--cream);border-radius:16px;padding:14px 16px;font-weight:700;text-align:center}
.foot{max-width:760px;margin:22px auto 0;padding:0 16px 32px;text-align:center;color:#fff;font-weight:700;text-shadow:0 1px 0 rgba(0,70,30,.5)}
.foot a{color:#fff}
.top{padding:12px 16px;background:var(--sky1)}.back{color:#fff;font-weight:900;text-decoration:none;text-shadow:0 2px 0 rgba(30,60,140,.35)}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 8px}
.prose{background:var(--cream);border-radius:20px;margin:16px auto;padding:20px 18px}
.prose h1{margin:.2em 0;width:auto;font-size:2rem;padding:0 16px 4px}.prose h2{margin:1.2em 0 .2em;font-weight:900;font-size:1.2rem}
.draft{display:inline-block;margin:0;background:var(--roof);color:#fff;font-weight:900;border-radius:8px;padding:0 12px}
@media (prefers-reduced-motion:reduce){.cloud,.fl,.flag,.hit{animation:none;transition:none}}

/* library: subject pages */
.subhead{padding-bottom:18px}
.subhead h1{font-size:clamp(2rem,8vw,3rem)}
.empty{max-width:760px;margin:10px auto 0;background:var(--cream);border-radius:16px;padding:12px 16px;font-weight:700;text-align:center}
.hit.soon{cursor:default;opacity:.85}
.hit.soon:hover{transform:none}
.gates.subjects{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:22px 12px}
.subjects .plank b{font-size:1.2rem}.subjects .plank span{font-size:.8rem}
.subjects .play{font-size:1.15rem;padding:3px 24px 6px}

.backrow{max-width:760px;margin:10px auto 0;text-align:center}
.gates.corners{max-width:760px}