/* Layout: one narrow column like a workbook page; lesson and quiz take over the screen, four tabs at the bottom otherwise. */
:root{
  --bg:#f2f4f8; --surface:#ffffff; --sunk:#e8ecf3; --ink:#142039; --muted:#5a6680; --line:#d9e0ea;
  --blue:#1f4fb6; --blue-soft:#e2eafb; --on-blue:#ffffff;
  --gold:#c3860f; --gold-soft:#faefd6;
  --ok:#1d8048; --ok-soft:#ddf2e5; --bad:#be3a30; --bad-soft:#f9e2df;
  --guide:#d3dbe8; --heart:#e0335a; --on-bad:#ffffff;
  --f-ui:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-he:'Frank Ruhl Libre','Times New Roman','David',serif;
  --f-he-sans:'Rubik','Arial Hebrew',Arial,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1320; --surface:#151d2e; --sunk:#1b2539; --ink:#e7ecf6; --muted:#98a4bd; --line:#27324a;
  --blue:#82a7ff; --blue-soft:#1b2a4c; --on-blue:#0d1320;
  --gold:#efb446; --gold-soft:#372a10;
  --ok:#55cf8a; --ok-soft:#11301f; --bad:#ff7e72; --bad-soft:#3a1815;
  --guide:#2a3651; --heart:#ff5c7f; --on-bad:#1a0b0a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1320; --surface:#151d2e; --sunk:#1b2539; --ink:#e7ecf6; --muted:#98a4bd; --line:#27324a;
  --blue:#82a7ff; --blue-soft:#1b2a4c; --on-blue:#0d1320;
  --gold:#efb446; --gold-soft:#372a10;
  --ok:#55cf8a; --ok-soft:#11301f; --bad:#ff7e72; --bad-soft:#3a1815;
  --guide:#2a3651; --heart:#ff5c7f; --on-bad:#1a0b0a; color-scheme:dark}

*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px)}
body{margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
[lang="he"]{direction:rtl}
.shell{max-width:640px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 112px}
body.focus .shell{padding-block:14px 28px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand h1{font-size:20px;margin:0;font-weight:700;letter-spacing:-.01em}
.brand .he{font-family:var(--f-he);font-size:22px;color:var(--blue)}
.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill b{font-weight:700}
.pill.gold{background:var(--gold-soft);border-color:transparent;color:var(--ink)}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
body.focus .tabs{display:none}
.tabs button{flex:1;max-width:150px;background:none;border:0;padding:9px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;color:var(--muted)}
.tabs button svg{width:24px;height:24px}
.tabs button[aria-current="page"]{color:var(--blue);font-weight:500}

/* generic */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stack{display:flex;flex-direction:column;gap:14px}
.muted{color:var(--muted)}
.small{font-size:14px}
h2{font-size:22px;line-height:1.25;margin:0;text-wrap:balance}
h3{font-size:17px;margin:0}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500}
.btn{border:0;border-radius:12px;padding:14px 18px;font-weight:500;font-size:16px;background:var(--sunk);color:var(--ink)}
.btn.primary{background:var(--blue);color:var(--on-blue)}
.btn.block{width:100%}
.btn.ghost{background:none;border:1px solid var(--line)}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
.say{border:1px solid var(--line);background:var(--surface);border-radius:999px;width:40px;height:40px;display:inline-grid;place-items:center;flex:none;color:var(--blue)}
.say svg{width:20px;height:20px}
body.noaudio .say,body.noaudio .needs-audio{display:none!important}
.bar{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .4s}
.bar.blue>i{background:var(--blue)}

/* home */
.today{display:grid;gap:14px}
.today .goal{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.next-he{font-family:var(--f-he);font-size:28px;color:var(--blue)}
.units{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.unit{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.unit .num{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}
.unit.done .num{background:var(--gold-soft);color:var(--gold)}
.unit.locked{opacity:.6}
.unit .body{min-width:0;display:flex;flex-direction:column;gap:4px}
.unit .ttl{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.unit .ttl .he{font-family:var(--f-he);font-size:22px;line-height:1.1}
.unit .state{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.unlock{align-self:flex-start;font-size:14px;font-weight:500;background:var(--blue-soft);color:var(--blue);border:0;border-radius:10px;padding:9px 14px}
.foot{margin-top:28px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.linkish{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:var(--ink);font-size:14px;font-weight:500}
.linkish.danger{background:var(--bad);border-color:var(--bad);color:var(--on-bad)}
.foot .row{gap:8px}

/* lesson + quiz chrome */
.chrome{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.x{background:none;border:0;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:var(--muted);flex:none}
.x svg{width:22px;height:22px}
.chrome .bar{flex:1}
.lesson-card{min-height:52vh;display:flex;flex-direction:column;gap:16px}
.lesson-card p{margin:0;max-width:62ch}
.glyph-row{display:flex;align-items:flex-end;justify-content:center;gap:26px;padding:8px 0 4px}
.glyph{font-family:var(--f-he);font-size:clamp(110px,32vw,168px);line-height:1;font-weight:500}
.glyph.sans,.sans{font-family:var(--f-he-sans)}
.glyph-alt{display:flex;flex-direction:column;align-items:center;gap:2px}
.glyph-alt span:first-child{font-family:var(--f-he-sans);font-size:54px;line-height:1.1}
.glyph-alt span:last-child{font-size:11px;color:var(--muted)}
.name-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.name-row .ru{font-size:24px;font-weight:700}
.name-row .he{font-family:var(--f-he);font-size:26px}
.sound{display:flex;justify-content:center}
.sound span{background:var(--blue-soft);color:var(--blue);border-radius:10px;padding:6px 14px;font-weight:500}
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.form{background:var(--sunk);border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.form .g{font-family:var(--f-he);font-size:48px;line-height:1.1}
.form .s{font-weight:500}
.form .n{font-size:12px;color:var(--muted)}
.tip{background:var(--gold-soft);border-radius:12px;padding:12px 14px;font-size:15px}
.example{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:14px}
.example .he{font-family:var(--f-he);font-size:34px;line-height:1.2}
.example .meta{display:flex;flex-direction:column;min-width:0;flex:1}
.example .tr{font-weight:500}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.compare div{background:var(--sunk);border-radius:12px;padding:10px;text-align:center}
.compare .he{font-size:30px;line-height:1.3}
.compare .lbl{font-size:12px;color:var(--muted)}
.lesson-nav{display:flex;gap:10px;margin-top:18px}
.lesson-nav .btn{flex:1}

/* quiz */
.q{display:flex;flex-direction:column;gap:18px}
.q-prompt{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:10px 0;min-height:200px;justify-content:center}
.q-label{color:var(--muted);font-size:15px}
.q-big{font-size:40px;font-weight:700}
.q-word{font-family:var(--f-he);font-size:clamp(48px,14vw,72px);line-height:1.25}
.q-word.sans{font-family:var(--f-he-sans);font-weight:500}
.play-big{width:96px;height:96px;border-radius:50%;border:0;background:var(--blue);color:var(--on-blue);display:grid;place-items:center}
.play-big svg{width:40px;height:40px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{min-height:64px;border-radius:14px;border:2px solid var(--line);background:var(--surface);padding:10px;font-size:20px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;overflow-wrap:anywhere}
.opt .key{font-size:11px;color:var(--muted);font-weight:400}
.opt-glyph{font-family:var(--f-he);font-size:46px;line-height:1}
.opt-glyph.sans{font-family:var(--f-he-sans)}
.opt-he{font-family:var(--f-he);font-size:28px;direction:rtl}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt:disabled{cursor:default;color:var(--ink)}
.feedback{border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.feedback.ok{background:var(--ok-soft)}
.feedback.no{background:var(--bad-soft)}
.feedback .verdict{font-weight:700}
.feedback.ok .verdict{color:var(--ok)}
.feedback.no .verdict{color:var(--bad)}
.he-inline{font-family:var(--f-he);font-size:1.35em}
.sticky-next{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.summary{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;padding-top:24px}
.score{font-size:56px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue)}

/* write */
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--sunk);border-radius:12px;padding:4px;gap:4px;margin-bottom:16px}
.seg button{border:0;background:none;border-radius:9px;padding:10px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.type-target{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.type-target .ru{font-size:26px;font-weight:700}
.type-target .tr{color:var(--muted)}
.typed{min-height:70px;border:2px solid var(--line);border-radius:14px;background:var(--surface);font-family:var(--f-he-sans);font-size:38px;display:flex;align-items:center;justify-content:center;padding:6px 12px;direction:rtl;overflow-wrap:anywhere;text-align:center}
.typed.ok{border-color:var(--ok);background:var(--ok-soft)}
.typed.no{border-color:var(--bad);background:var(--bad-soft)}
.typed .caret{display:inline-block;width:2px;height:40px;background:var(--blue);animation:blink 1s steps(1) infinite;margin-inline-start:2px}
@keyframes blink{50%{opacity:0}}
.kb{display:flex;flex-direction:column;gap:6px;direction:ltr;user-select:none;-webkit-user-select:none}
.kb .kr{display:flex;gap:4px;justify-content:center}
.kb button{flex:1;max-width:52px;min-width:0;height:50px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;line-height:1}
.kb button .h{font-family:var(--f-he-sans);font-size:22px}
.kb button .l{font-size:9px;color:var(--muted);margin-top:2px}
.kb button.wide{max-width:none;flex:3}
.kb button.mid{max-width:none;flex:1.6}
.kb button:active{background:var(--blue-soft)}
.trace-wrap{display:flex;flex-direction:column;gap:12px;align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:10px;min-width:44px;height:44px;padding:0 8px;font-family:var(--f-he-sans);font-size:22px}
.chip[aria-pressed="true"]{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
.chip.txt{font-family:var(--f-ui);font-size:14px;height:36px;border-radius:999px;padding:0 14px}
canvas#trace{width:min(100%,340px);aspect-ratio:1;max-width:100%;border-radius:16px;background:var(--surface);border:1px solid var(--line);touch-action:none}

/* words */
.wtools{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.search{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:12px 14px;font:inherit}
.toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.wlist{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.w{display:grid;grid-template-columns:1fr auto 40px;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.w:first-child{border-top:0}
.w .m{min-width:0}
.w .ru{font-weight:500}
.w .tr{font-size:14px;color:var(--muted)}
.w .he{font-family:var(--f-he);font-size:30px;line-height:1.2;text-align:right}
.w.lock .he{opacity:.35}
.w.plain .he{font-family:var(--f-he-sans);font-size:26px}
.empty{padding:24px;text-align:center;color:var(--muted)}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width:380px){.opts{grid-template-columns:1fr}.kb button{height:46px}.kb button .h{font-size:19px}}

/* sign-in */
body.signed-out .tabs{display:none}
body.signed-out .shell{padding-block:14px 28px}
.login{max-width:440px;margin:6vh auto 0;gap:14px}
.login-he{font-family:var(--f-he);font-size:44px;color:var(--blue);line-height:1}

/* credit */
.credit{margin-top:32px;text-align:center;font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.credit .heart{width:15px;height:15px;fill:var(--heart);flex:none;animation:heartbeat 1.3s ease-in-out infinite;transform-origin:center}
body.focus .credit{display:none}
@keyframes heartbeat{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.28)}20%{transform:scale(1.05)}30%{transform:scale(1.22)}}

/* ===== v2: home, puzzle, notes, alphabet, games ===== */
.tnum{font-variant-numeric:tabular-nums}
.small-btn{padding:9px 14px;font-size:14px}
.gold-text{color:var(--gold);font-weight:500}
.unit-wrap{display:flex;flex-direction:column;gap:8px}
.unit .ttl.he{font-family:var(--f-he);font-size:22px;line-height:1.1}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.tile-card{display:flex;gap:14px;align-items:center;text-align:left;width:100%;cursor:pointer}
.pz{position:relative;width:88px;aspect-ratio:1;max-width:100%;border-radius:12px;background-size:cover;background-position:center;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;flex:none;border:1px solid var(--line)}
.pz.big{width:min(240px,70vw)}
.pz-cell{background:var(--sunk);border:1px solid var(--surface);transition:opacity .5s var(--d,0ms)}
.pz-cell:not(.open){background:repeating-linear-gradient(45deg,var(--sunk) 0 6px,var(--blue-soft) 6px 12px)}
.pz-cell.open{opacity:0}
.envelope{font-size:48px;position:relative;flex:none;width:88px;text-align:center}
.badge{position:absolute;top:-2px;right:12px;background:var(--heart);color:#fff;font-style:normal;font-size:12px;font-weight:700;border-radius:99px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px}
.season{display:flex;gap:14px;align-items:flex-start;margin-top:14px;background:var(--gold-soft);border-color:transparent}
.season-emo{font-size:40px;flex:none}
.flag-emo{font-size:40px;flex:none}
.read-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.read-card{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:132px;justify-content:center}
.read-card .emo{font-size:30px}
.read-card .he{font-family:var(--f-he);font-size:30px;line-height:1.2}
.read-card .back{display:none;flex-direction:column;align-items:center;text-align:center}
.read-card.flipped{background:var(--blue-soft);border-color:transparent}
.read-card.flipped .back{display:flex}
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.album-item{display:flex;flex-direction:column;gap:6px}
.album-item .pz{width:100%}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.note-env{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:500;text-align:center}
.note-env span:first-child{font-size:36px}
.note-env.new{border-color:var(--heart);box-shadow:0 0 0 3px color-mix(in srgb,var(--heart) 18%,transparent)}
.note-env.locked{opacity:.6;font-weight:400}
.letter-paper{background:var(--gold-soft);border-color:transparent}
.note-he{font-family:var(--f-he);font-size:clamp(30px,8vw,44px);line-height:1.5;direction:rtl;text-align:right}
.note-img{border-radius:12px;max-width:100%}
.abc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.abc{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:0;min-height:96px;justify-content:center;opacity:.55}
.abc .g{font-family:var(--f-he);font-size:40px;line-height:1.1}
.abc .fin{font-family:var(--f-he);font-size:16px;color:var(--muted)}
.abc .nm{font-size:11px;color:var(--muted)}
.abc.learn{opacity:1;background:var(--blue-soft);border-color:transparent}
.abc.done{opacity:1;background:var(--gold-soft);border-color:transparent}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.vcell{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px}
.vcell .g{font-family:var(--f-he);font-size:34px;line-height:1.2}
.vcell .s{font-weight:500}
.vcell .n{font-size:11px;color:var(--muted)}
.vcell.dim{opacity:.5}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.game-card{display:flex;gap:14px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px;width:100%}
.game-card.locked{opacity:.55;cursor:default}
.game-emo{font-size:38px;width:52px;height:52px;display:grid;place-items:center;background:var(--blue-soft);border-radius:14px;flex:none}
.opt-emo{font-size:44px;line-height:1}
.market{display:flex;flex-direction:column;gap:16px}
.vendor{display:flex;align-items:center;gap:12px}
.vendor-emo{font-size:52px}
.bubble{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:10px 16px;display:flex;flex-direction:column;align-items:flex-end}
.stalls{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stall{aspect-ratio:4/3;border-radius:16px;border:2px solid var(--line);background:repeating-linear-gradient(90deg,var(--surface) 0 18px,var(--gold-soft) 18px 36px);font-size:clamp(46px,14vw,70px);display:grid;place-items:center;border-top:10px solid var(--heart)}
.stall.wrong{border-color:var(--bad)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:520px){.mem{grid-template-columns:repeat(4,1fr)}}
.mem-card{aspect-ratio:3/4;border-radius:14px;border:0;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;transition:transform .25s}
.mem-card.open{background:var(--surface);color:var(--ink);border:2px solid var(--line);transform:rotateY(0)}
.mem-card.done{background:var(--ok-soft);border-color:var(--ok)}
.mem-card .he{font-family:var(--f-he);font-size:26px}
.mem-card .emo{font-size:40px}
.mem-card .snd{font-size:22px;font-weight:700}
.build-emo{font-size:56px;line-height:1}
.slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.slot{width:52px;height:60px;border-radius:12px;border:2px dashed var(--line);background:var(--surface);font-family:var(--f-he-sans);font-size:32px;display:grid;place-items:center}
.slots.ok .slot{border:2px solid var(--ok);background:var(--ok-soft)}
.slots.no .slot{border:2px solid var(--bad);background:var(--bad-soft)}
.tiles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tile{width:52px;height:56px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-family:var(--f-he-sans);font-size:30px;box-shadow:0 2px 0 var(--line)}
.tile:disabled{opacity:.25}
.hunt-target{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.glyph-sm{font-family:var(--f-he);font-size:44px;line-height:1}
.sign{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:22px 16px;border-radius:10px;font-family:var(--f-he-sans);font-weight:700}
.sign .sp{width:14px}
.sc{border:0;background:none;color:inherit;font:inherit;font-size:clamp(30px,9vw,44px);padding:2px 3px;border-radius:8px;line-height:1.2}
.sc.found{background:var(--ok);color:#fff}
.sc.miss{background:var(--bad);color:#fff}
.sign-street{background:#1d4f9c;color:#fff;border:4px solid #fff;outline:2px solid #1d4f9c}
.sign-bus{background:#f5c400;color:#1a1a1a}
.sign-shop{background:#2b1d14;color:#ffd79a;font-family:var(--f-he)}
.sign-info{background:#fff;color:#c4161c;border:4px solid #c4161c}
.sign-job{background:var(--surface);color:var(--ink);border:2px solid var(--line);font-weight:500}
.seq{display:flex;gap:18px;font-family:var(--f-he);font-size:64px;line-height:1.2}
.seq .gap{color:var(--blue);border-bottom:4px solid var(--blue);min-width:56px;text-align:center}
.swap{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:min(360px,100%);aspect-ratio:1}
.swap.solved{gap:0}
.sw{border:0;border-radius:4px;background-size:300% 300%;cursor:pointer}
.sw.sel{outline:4px solid var(--gold);outline-offset:-4px}
.w{grid-template-columns:32px 1fr auto 40px}
.wemo{font-size:24px;text-align:center}
.kb-check{background:var(--blue)!important;color:var(--on-blue);border-color:var(--blue)!important;font-size:14px;font-weight:500}
.tab-he{font-family:var(--f-he);font-size:20px;line-height:24px;height:24px;font-weight:700}
.tabs button{max-width:120px}
img.pic{display:block;object-fit:contain;border-radius:14px;background:#fff}
img.pic.flag-emo{width:64px;height:64px}
.read-card img.pic.emo{width:56px;height:56px}
.opt-emo img.pic{width:64px;height:64px}
.stall img.pic{width:72%;height:72%;margin:auto}
.mem-card img.pic{width:78%;height:auto;aspect-ratio:1}
img.pic.build-emo{width:110px;height:110px}
.wemo img.pic{width:32px;height:32px;border-radius:8px}
.bonus{border:0;padding:0;border-radius:12px;overflow:hidden;aspect-ratio:1;background:var(--sunk)}
.bonus img{width:100%;height:100%;object-fit:cover;display:block}
.bonus.locked{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);background:repeating-linear-gradient(45deg,var(--sunk) 0 8px,var(--blue-soft) 8px 16px)}
.bonus.locked svg{width:26px;height:26px}
.photo-full{max-width:100%;max-height:70vh;border-radius:16px}

/* ===== bigger puzzle ===== */
.photo-card{display:flex;flex-direction:column;gap:10px;text-align:left;width:100%;cursor:pointer}
.photo-card .pz.big{width:100%;max-width:520px;align-self:center}
.home-grid{grid-template-columns:1fr}
.album{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.pz.big{width:min(100%,420px)}

/* ===== intro: our photos fly in like an album (after the Peruchi sketch B intro) ===== */
.intro{position:fixed;inset:0;z-index:50;background:#0b0d14;overflow:hidden;transition:opacity .9s cubic-bezier(.7,0,.3,1),transform 1.1s cubic-bezier(.7,0,.3,1);cursor:pointer}
.intro::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 50%,transparent 20%,rgba(11,13,20,.85) 80%);pointer-events:none}
body.i-out .intro{opacity:0;transform:scale(1.16);pointer-events:none}
.ic{position:absolute;width:clamp(120px,32vw,270px);aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#222;border:6px solid #fff;border-bottom-width:22px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.95);opacity:0;transition:transform 1.5s cubic-bezier(.14,.9,.24,1),opacity .8s ease}
.ic img{width:100%;height:100%;object-fit:cover;display:block}
body.i-go .ic{opacity:1}
.ic1{left:2%;top:6%;transform:translate(-190%,-24%) rotate(-26deg)}
.ic2{left:34%;top:-3%;transform:translate(0,-230%) rotate(16deg)}
.ic3{right:2%;top:7%;transform:translate(215%,-40%) rotate(22deg)}
.ic4{left:-4%;top:42%;transform:translate(-230%,10%) rotate(-18deg)}
.ic5{right:-4%;top:40%;transform:translate(210%,20%) rotate(20deg)}
.ic6{left:8%;bottom:-4%;transform:translate(-40%,240%) rotate(-12deg)}
.ic7{right:8%;bottom:-2%;transform:translate(60%,230%) rotate(14deg)}
body.i-go .ic1{transform:rotate(-7deg);transition-delay:.10s}
body.i-go .ic2{transform:rotate(5deg);transition-delay:.26s}
body.i-go .ic3{transform:rotate(-4deg);transition-delay:.42s}
body.i-go .ic4{transform:rotate(8deg);transition-delay:.58s}
body.i-go .ic5{transform:rotate(-6deg);transition-delay:.74s}
body.i-go .ic6{transform:rotate(4deg);transition-delay:.90s}
body.i-go .ic7{transform:rotate(-8deg);transition-delay:1.06s}
.ititle{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:0 22px;pointer-events:none}
.ititle::before{content:"";position:absolute;width:min(92vw,760px);height:min(46vh,360px);border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,13,20,.95),rgba(11,13,20,.75) 55%,rgba(11,13,20,0) 100%);opacity:0;transition:opacity .9s ease 1.2s}
body.i-go .ititle::before{opacity:1}
.ihe,.ititle p{position:relative}
.ihe{font-family:var(--f-he);font-weight:700;color:#fff;font-size:clamp(46px,12vw,96px);line-height:1.1;opacity:0;transform:translateY(26px) scale(.96);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.ititle p{margin:0;font-size:clamp(17px,3.6vw,24px);font-weight:500;color:#f3d79a;opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s;max-width:22ch}
body.i-go .ihe{opacity:1;transform:none;transition-delay:1.35s}
body.i-go .ititle p{opacity:1;transform:none;transition-delay:1.7s}
.iskip{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:6;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);opacity:0;transition:opacity .6s 2.1s}
body.i-go .iskip{opacity:1}
@media (prefers-reduced-motion: reduce){.ic,.ihe,.ititle p{transition:opacity .3s!important}}