/* Ivrit Quest : une colonne de jeu, barre d'état en haut, parcours sinueux, onglets en bas */
:root{
  --bg:#EEF2F6; --surface:#FFFFFF; --surface-2:#E3E9F0; --ink:#13233A; --ink-2:#4F5E74; --line:#D3DCE6;
  --accent:#2563D9; --accent-ink:#FFFFFF; --accent-soft:#DCE7FB;
  --gold:#C98A0B; --gold-soft:#FBEFD2; --ok:#1F8A4C; --ok-soft:#DDF3E5; --bad:#C2352B; --bad-soft:#FBE3E1; --locked:#B9C3CF;
  --fire:#D9480F; --fire-soft:#FFE8D9; --brand-bg:#071233;
  --f-ui:"Rubik",system-ui,sans-serif; --f-he:"Frank Ruhl Libre","Rubik",serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0D1524; --surface:#16223A; --surface-2:#1E2C47; --ink:#E9EEF6; --ink-2:#A3B1C6; --line:#2A3A58;
  --accent-soft:#1E3260; --gold:#F0B437; --gold-soft:#3A2F14; --ok:#4CC27E; --ok-soft:#163A27; --bad:#F06C61; --bad-soft:#40201E; --locked:#3A4A66; --fire:#FF8A3D; --fire-soft:#3D2414; color-scheme:dark}}
body[data-skin="jlm"]{--accent:#B7791F}
body[data-skin="gal"]{--accent:#4D8A2F}
body[data-skin="eil"]{--accent:#D9573B}
body[data-skin="neg"]{--accent:#7451D6}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-he);font-weight:700;font-size:22px;color:#fff;flex:none}
.ava.s{width:34px;height:34px;font-size:18px}
.who{flex:1;min-width:0}
.who b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xpbar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:4px}
.xpbar i{display:block;height:100%;background:var(--accent);width:0}
.chip{display:flex;align-items:center;gap:5px;font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;padding:5px 10px;border-radius:999px}
.chip.h{background:var(--bad-soft);color:var(--bad)}
.chip.c{background:var(--gold-soft);color:var(--gold)}
.chip small{font-weight:400;font-size:11px}
main{flex:1;padding-top:16px;padding-bottom:96px}
.tabs{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs button{flex:1;background:none;border:0;padding:10px 0;font-weight:500;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;position:relative}
.tabs button.on{color:var(--accent)}
.tabs svg{width:22px;height:22px}
.badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
/* parcours */
.world{margin:8px 0 18px;padding:16px 18px;border-radius:16px;background:var(--accent);color:var(--accent-ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.world h2{margin:0;font-size:19px;font-weight:800}
.world p{margin:0;font-size:13px;opacity:.9}
.world .heb{font-family:var(--f-he);font-size:30px;font-weight:700;direction:rtl}
.world.lock{background:var(--surface-2);color:var(--ink-2)}
.path{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:22px}
.node{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0}
.disc{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.node.lock .disc{background:var(--locked);color:var(--ink-2);box-shadow:0 6px 0 color-mix(in srgb,var(--locked) 70%,#000)}
.node.cur .disc{outline:4px solid var(--accent-soft);outline-offset:4px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{outline-offset:8px}}
@media (prefers-reduced-motion:reduce){.node.cur .disc,.spin{animation:none}}
.node .lbl{font-size:13px;font-weight:500;max-width:140px;text-align:center}
.stars{display:flex;gap:2px;height:14px}
.stars svg{width:14px;height:14px}
.dots{display:flex;flex-direction:column;gap:5px;align-items:center}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.note{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:14px}
.note.ok{background:var(--ok-soft);color:var(--ok)}
/* cartes */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
h1{font-size:22px;font-weight:800;margin:0 0 4px;text-wrap:balance}
.sub{color:var(--ink-2);font-size:14px;margin:0 0 14px}
.vocab{display:grid;gap:8px}
.vrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.vrow .he{font-family:var(--f-he);font-size:24px;font-weight:700;direction:rtl}
.vrow .tr{color:var(--ink-2);font-size:13px}
.vrow .fr{margin-left:auto;text-align:right;font-weight:500;font-size:14px;min-width:0}
.ico{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none}
.ico svg{width:18px;height:18px}
.big{display:block;width:100%;border:0;border-radius:14px;padding:14px;font-weight:700;font-size:17px;background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000);margin-top:16px}
.big:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.big.alt{background:var(--surface-2);color:var(--ink);box-shadow:0 4px 0 var(--line)}
/* formulaire */
.field{display:grid;gap:6px;margin-top:14px}
.field label{font-size:14px;font-weight:500}
.field input{height:46px;border:2px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;background:var(--surface);color:var(--ink)}
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px;margin-bottom:14px}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:8px;font-weight:500;color:var(--ink-2)}
.seg button.on{background:var(--surface);color:var(--ink)}
.hero{text-align:center;padding:12px 0 18px}
.hero .logo{font-family:var(--f-he);font-size:56px;font-weight:700;color:var(--accent);line-height:1}
.hero h1{font-size:28px;margin-top:6px}
/* quiz */
.qtop{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.qtop .x{background:none;border:0;font-size:22px;color:var(--ink-2);padding:4px 8px}
.prog{flex:1;height:12px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--ok);transition:width .3s}
.vs{display:flex;justify-content:space-between;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:14px;font-size:14px;font-variant-numeric:tabular-nums}
.vs b{font-size:18px}
.prompt{font-size:14px;color:var(--ink-2);font-weight:500;margin:0 0 8px}
.word{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.word .he{font-family:var(--f-he);font-size:44px;font-weight:700;direction:rtl;line-height:1.2}
.word .fr{font-size:26px;font-weight:700}
.word .tr{color:var(--ink-2);font-size:15px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);border-radius:14px;padding:12px;min-height:64px;font-weight:500;text-align:center}
.opt .he{font-family:var(--f-he);font-size:24px;font-weight:700;direction:rtl;display:block}
.opt .tr{display:block;font-size:12px;color:var(--ink-2);font-weight:400}
.opt.ok{border-color:var(--ok);background:var(--ok-soft)}
.opt.bad{border-color:var(--bad);background:var(--bad-soft)}
.opt.gone{visibility:hidden}
.slot{min-height:72px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;direction:rtl;padding:8px 0;margin-bottom:16px}
.bank{display:flex;flex-wrap:wrap;gap:8px;direction:rtl;justify-content:center}
.tok{border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);border-radius:12px;padding:6px 12px;text-align:center}
.tok .he{font-family:var(--f-he);font-size:22px;font-weight:700;display:block}
.tok .tr{font-size:11px;color:var(--ink-2);display:block;direction:ltr}
.tok.used{visibility:hidden}
.err{color:var(--bad);font-size:13px;margin-top:8px;min-height:18px}
.tools{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tool{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500}
.fb{margin-top:16px;border-radius:14px;padding:14px 16px}
.fb.ok{background:var(--ok-soft);color:var(--ok)}
.fb.bad{background:var(--bad-soft);color:var(--bad)}
.fb b{display:block;font-size:17px}
.fb .ans{color:var(--ink);font-size:15px}
.fb .ans .he{font-family:var(--f-he);font-weight:700;font-size:20px}
/* résultats */
.res{text-align:center}
.bigstars{display:flex;justify-content:center;gap:8px;margin:12px 0}
.bigstars svg{width:48px;height:48px}
.gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.gain{background:var(--surface-2);border-radius:12px;padding:10px}
.gain b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.gain span{font-size:12px;color:var(--ink-2)}
.countdown{font-size:72px;font-weight:800;color:var(--accent);text-align:center;font-variant-numeric:tabular-nums}
.spin{width:44px;height:44px;border-radius:50%;border:5px solid var(--surface-2);border-top-color:var(--accent);margin:18px auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
/* listes */
.sec{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:500;margin:20px 0 8px}
.items{display:grid;gap:10px}
.item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.item .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;font-family:var(--f-he);font-weight:700;font-size:22px}
.item .tx{flex:1;min-width:0}
.item .tx b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis}
.item .tx span{font-size:13px;color:var(--ink-2)}
.item .rk{width:28px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.item.me{border-color:var(--accent);background:var(--accent-soft)}
.acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.buy{border:0;border-radius:10px;padding:8px 12px;font-weight:700;background:var(--gold-soft);color:var(--gold);white-space:nowrap}
.buy.own{background:var(--surface-2);color:var(--ink-2)}
.buy.eq{background:var(--accent);color:var(--accent-ink)}
.buy.go{background:var(--ok-soft);color:var(--ok)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--locked);margin-right:5px}
.dot.on{background:var(--ok)}
.tag{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px}
.tag.win{background:var(--ok-soft);color:var(--ok)}
.tag.lose{background:var(--bad-soft);color:var(--bad)}
.tag.draw,.tag.pending{background:var(--surface-2);color:var(--ink-2)}
.empty{color:var(--ink-2);font-size:14px;padding:12px;text-align:center;border:1px dashed var(--line);border-radius:14px}
.row{display:flex;gap:8px}
.row input{flex:1;min-width:0}
.chip.f{background:var(--fire-soft);color:var(--fire)}
.chip.f.off{background:var(--surface-2);color:var(--ink-2)}
.brand{background:var(--brand-bg);border-radius:20px;display:flex;justify-content:center;padding:10px 0;margin-bottom:16px}
.brand img{width:min(150px,45%);height:auto;display:block}
.hero .brand img{width:min(280px,75%)}
.streak{display:flex;align-items:center;gap:12px;background:var(--fire-soft);color:var(--fire);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.streak b{font-size:22px;font-variant-numeric:tabular-nums}
.streak span{color:var(--ink);font-size:14px}
.chat{display:grid;gap:10px;margin:14px 0}
.msg{border-radius:16px;padding:12px 14px;max-width:88%}
.msg.t{background:var(--surface);border:1px solid var(--line);justify-self:start}
.msg.u{background:var(--accent);color:var(--accent-ink);justify-self:end}
.msg .he{font-family:var(--f-he);font-size:24px;font-weight:700;direction:rtl;text-align:right}
.msg .tr{color:var(--ink-2);font-size:13px}
.msg .fr{font-size:14px;margin-top:2px}
.msg .tip{margin-top:8px;background:var(--gold-soft);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:13px}
.msg .mh{display:flex;align-items:center;gap:8px;justify-content:space-between}
.topics{display:flex;flex-wrap:wrap;gap:8px}
.mic{width:88px;height:88px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;margin:8px auto;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.mic.rec{background:var(--bad);animation:pulse2 1s ease-in-out infinite}
@keyframes pulse2{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.mic.rec{animation:none}}
.mic svg{width:38px;height:38px}
.cin{height:46px;border:2px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;background:var(--surface);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:500;z-index:20;max-width:calc(100% - 32px)}